@web-atoms/web-controls 2.6.2 → 2.6.4

package/src/calendar/AtomCalendarStyle.ts

@@ -1,187 +0,0 @@
-import Colors from "@web-atoms/core/dist/core/Colors.js";
-import { AtomStyle } from "@web-atoms/core/dist/web/styles/AtomStyle.js";
-import { AtomTheme } from "@web-atoms/core/dist/web/styles/AtomTheme.js";
-import { IStyleDeclaration } from "@web-atoms/core/dist/web/styles/IStyleDeclaration.js";
-
-export default class AtomCalendarStyle extends AtomStyle {
-
-    public get theme(): AtomTheme {
-        return this.styleSheet as AtomTheme;
-    }
-
-    public get root(): IStyleDeclaration {
-
-        const existing = this.calendarContainer;
-
-        return {
-            ... existing,
-            backgroundColor: Colors.white,
-            subclasses: {
-                ... existing.subclasses,
-                " .is-disabled ": {
-                    textDecoration: "line-through"
-                },
-                " .week-days": {
-                    subclasses: {
-                        " > div": {
-                            display: "inline-block",
-                            border: "none",
-                            color: Colors.black,
-                            fontWeight: "bold",
-                            fontSize: "75%",
-                            textAlign: "center",
-                            borderRadius : 0,
-                            backgroundColor: Colors.rgba(232, 232, 232),
-                            width : "14%",
-                            paddingTop: "1%",
-                            paddingBottom: "1%"
-                        }
-                    }
-                },
-                " .month-days": {
-                    marginTop: "0.5%",
-                    marginBottom: "0.5%",
-                    subclasses: {
-                        " > div" : {
-                            width: "14%",
-                            minHeight: "28px",
-                            display: "inline-block",
-                            borderRadius: "50%",
-                            backgroundColor: Colors.white,
-                            cursor: "default",
-                            color: Colors.black,
-                            subclasses: {
-                            " > div": {
-                                borderRadius: "50%",
-                                width: "61%",
-                                display: "block",
-                                padding: "7%",
-                                paddingLeft: "2%",
-                                paddingRight: "2%",
-                                subclasses: {
-                                    ".date-css": {
-                                        display: "inline-block",
-                                        fontSize: "75%",
-                                        textAlign: "center"
-                                    },
-                                    ".is-today": {
-                                        fontWeight: "bold",
-                                        color: Colors.rgba(27, 177, 177),
-                                    },
-                                    ".is-weekend": {
-                                        color: "#a50000",
-                                    },
-                                    ".shoot": {
-                                        backgroundColor: "#093",
-                                        ...this.typeStyle
-                                    },
-                                    ".audition": {
-                                        backgroundColor: "#6f6ffb",
-                                        ...this.typeStyle
-                                    },
-                                    ".option": {
-                                        backgroundColor: "#3bc3c3",
-                                        ...this.typeStyle
-                                    },
-                                    ".callback": {
-                                        backgroundColor: "#ffa401",
-                                        ...this.typeStyle
-                                    },
-                                    ".test-shoot": {
-                                        backgroundColor: "#ff96aa",
-                                        ...this.typeStyle
-                                    },
-                                    ".personal": {
-                                        backgroundColor: "#fab5be",
-                                        ...this.typeStyle
-                                    },
-                                    ".go-see": {
-                                        backgroundColor: "#fab0fb",
-                                        ...this.typeStyle
-                                    },
-                                    ".training": {
-                                        backgroundColor: "#d1cebc",
-                                        ...this.typeStyle
-                                    },
-                                    ".wardrobe": {
-                                        backgroundColor: "#bbdf49",
-                                        ...this.typeStyle
-                                    },
-                                    ".rehearsal": {
-                                        backgroundColor: "#39f",
-                                        ...this.typeStyle
-                                    },
-                                    ".travel": {
-                                        backgroundColor: "#c7894b",
-                                        ...this.typeStyle
-                                    },
-                                    ".is-other-month": {
-                                        color: Colors.gray
-                                    },
-                                    ".is-selected": {
-                                        border: "1px solid",
-                                        borderColor: Colors.gray,
-                                        fontWeight: "bold",
-                                        backgroundColor: Colors.white,
-                                        color: Colors.rgba(185, 149, 93),
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    };
-}
-
-    public get typeStyle(): IStyleDeclaration {
-    return {
-        color: "#fff",
-        padding: "10%",
-        paddingLeft: "0",
-        paddingRight: "0"
-            };
-        }
-    public get calendarContainer(): IStyleDeclaration {
-        return {
-            minWidth: "305px",
-            textAlign: "center",
-            fontFamily: "'Muli', sans-serif",
-            boxSizing: "content-box",
-            border: "1px solid",
-            borderColor: Colors.rgba(232, 232, 232),
-            subclasses: {
-                " .header": {
-                    textAlign: "center",
-                    padding: "1%",
-                    subclasses: {
-                        " > span": {
-                            display: "inline-block",
-                            marginTop: "1%",
-                            padding: "3%",
-                            width: "4%",
-                            background: "transparent no-repeat",
-                        },
-                        " .previous-btn": {
-                            marginLeft: "3%",
-                            float: "left"
-                        },
-                        " .next-btn": {
-                            marginRight: "3%",
-                            float: "right"
-                        },
-                        " > select": {
-                            padding: "1%",
-                            lineHeight: "1.4",
-                            fontSize: "95%",
-                            color: Colors.rgba(185, 149, 93),
-                            border: "none",
-                            fontWeight: "600"
-                        }
-                    }
-                }
-            }
-        };
-    }
-}

package/src/calendar/CalendarViewModel.ts

@@ -1,131 +0,0 @@
-import { AtomViewModel, Watch } from "@web-atoms/core/dist/view-model/AtomViewModel.js";
-import DateTime from "@web-atoms/date-time/dist/DateTime.js";
-
-export interface ILabelValue {
-    label?: string;
-    value?: any;
-}
-
-export interface ICalendarItem {
-    label: string;
-    type?: string;
-    isToday: boolean;
-    isOtherMonth: boolean;
-    isWeekend: boolean;
-    value: DateTime;
-}
-
-export default class CalendarViewModel extends AtomViewModel {
-
-    public owner: any;
-
-    public get year() {
-        return this.start.year;
-    }
-
-    public set year(v: number) {
-        if (this.start.year === v) {
-            return;
-        }
-        const s = this.mStart;
-        this.mStart = new DateTime(v, s.month, s.day);
-        this.refresh("start");
-    }
-
-    public get month() {
-        return this.start.month;
-    }
-
-    public set month(v: number) {
-        if (this.start.month === v) {
-            return;
-        }
-        const s = this.mStart;
-        this.mStart = new DateTime(s.year, v, s.day);
-        this.refresh("start");
-    }
-
-    private mStart: DateTime = DateTime.today;
-    public get start(): DateTime {
-        return this.mStart;
-    }
-    public set start(value: DateTime) {
-        this.mStart = value;
-        this.refresh("year");
-        this.refresh("month");
-    }
-
-    @Watch
-    public get selectedDate(): any {
-        return this.owner.selectedDate;
-    }
-
-    @Watch
-    public get enableFunc(): any {
-        return this.owner.enableFunc;
-    }
-
-    @Watch
-    public get yearList(): ILabelValue[] {
-        const start = this.year + this.owner.yearStart;
-        const end = this.year + this.owner.yearEnd;
-
-        const a = [];
-        for (let index = start; index <= end; index++) {
-            a.push({ label: index + "", value: index });
-        }
-        return a;
-    }
-
-    @Watch
-    public get items(): ICalendarItem[] {
-        const today = DateTime.today;
-        const start = this.start;
-        let startDate = new DateTime(start.year, start.month, 1);
-        while (startDate.dayOfWeek !== 1) {
-            startDate = startDate.add(-1);
-        }
-        const a = [];
-        const y = startDate.year;
-        const m = startDate.month;
-        for (let index = 0; index < 42; index++) {
-            const cd = startDate.add(index);
-            a.push({
-                label: cd.day + "",
-                type: null,
-                value: cd,
-                isToday: cd.equals(today),
-                isOtherMonth: start.month !== cd.month,
-                isWeekend: (cd.dayOfWeek === 0 || cd.dayOfWeek === 6)
-            });
-        }
-        const o = this.owner;
-        o.element.dispatchEvent(new CustomEvent("refresh", {
-            detail: {
-                year: start.year,
-                month: start.month
-            }
-        }));
-        o.currentDate = startDate;
-        return a;
-    }
-
-    public changeMonth(step: number): void {
-        const s = this.start.addMonths(step);
-        const start = this.year + this.owner.yearStart;
-        const end = this.year + this.owner.yearEnd;
-        const sy = s.year;
-        if (sy < start || sy > end) {
-            return;
-        }
-        this.start = s;
-        this.refresh("start");
-    }
-
-    public dateClicked(item: ICalendarItem): void {
-        const e = this.owner.element as HTMLElement;
-        this.owner.selectedDate = item.value;
-        e.dispatchEvent(new CustomEvent("dateClicked", { detail: item } ));
-    }
-
-}

package/src/calendar/res/SRCalendar.ts

@@ -1,36 +0,0 @@
-import DISingleton from "@web-atoms/core/dist/di/DISingleton.js";
-
-@DISingleton({
-    inject: "./{lang}/SRCalendar"
-})
-export default abstract class SRCalendar {
-
-    public monthList = [
-        {label: "January", value: 0},
-        {label: "February", value: 1},
-        {label: "March", value: 2},
-        {label: "April", value: 3},
-        {label: "May", value: 4},
-        {label: "June", value: 5},
-        {label: "July", value: 6},
-        {label: "August", value: 7},
-        {label: "September", value: 8},
-        {label: "October", value: 9},
-        {label: "November", value: 10},
-        {label: "December", value: 11}
-    ];
-
-    public weekDays = [
-        { label: "Mon", value: "Mon" },
-        { label: "Tue", value: "Tue" },
-        { label: "Wed", value: "Wed" },
-        { label: "Thu", value: "Thu" },
-        { label: "Fri", value: "Fri" },
-        { label: "Sat", value: "Sat" },
-        { label: "Sun", value: "Sun" }
-    ];
-    public toShortDate(d: Date): string {
-        return d.toLocaleDateString();
-    }
-
-}

package/src/calendar/res/en-US/SRCalendar.ts

@@ -1,30 +0,0 @@
-import SRCalendar from "../SRCalendar.js";
-
-export default class Calendar extends SRCalendar {
-
-    public monthList = [
-        {label: "January", value: 0},
-        {label: "February", value: 1},
-        {label: "March", value: 2},
-        {label: "April", value: 3},
-        {label: "May", value: 4},
-        {label: "June", value: 5},
-        {label: "July", value: 6},
-        {label: "August", value: 7},
-        {label: "September", value: 8},
-        {label: "October", value: 9},
-        {label: "November", value: 10},
-        {label: "December", value: 11}
-    ];
-
-    public weekDays = [
-        { label: "Mon", value: "Mon" },
-        { label: "Tue", value: "Tue" },
-        { label: "Wed", value: "Wed" },
-        { label: "Thu", value: "Thu" },
-        { label: "Fri", value: "Fri" },
-        { label: "Sat", value: "Sat" },
-        { label: "Sun", value: "Sun" }
-    ];
-
-}

package/src/data-grid/AtomColumn.tsx

@@ -1,65 +0,0 @@
-// tslint:disable
-import Bind from "@web-atoms/core/dist/core/Bind"
-import XNode from "@web-atoms/core/dist/core/XNode"
-import {BindableProperty} from "@web-atoms/core/dist/core/BindableProperty.js";
-import {AtomControl} from "@web-atoms/core/dist/web/controls/AtomControl.js";
-
-    import FormattedString from "@web-atoms/core/dist/core/FormattedString.js";
-
-
-
-export default class AtomColumn extends AtomControl {
-	
-	constructor(app: any, e: any = document.createElement("th")) {
-		super(app, e);
-	}
-
-	@BindableProperty
-	public label: string | FormattedString ;
-
-	@BindableProperty
-	public labelPath: string ;
-
-	@BindableProperty
-	public valuePath: string ;
-
-	@BindableProperty
-	public sort: any ;
-
-	@BindableProperty
-	public align: string ;
-
-	@BindableProperty
-	public headerTemplate: any ;
-
-	@BindableProperty
-	public footerTemplate: any ;
-
-	@BindableProperty
-	public dataTemplate: any ;
-
-	public create(): void {
-		
-		this.label = null;
-		this.labelPath = null;
-		this.valuePath = null;
-		this.sort = null;
-		this.align = 'left';
-		this.headerTemplate = null;
-		this.footerTemplate = null;
-		this.dataTemplate = null;
-		this.render(
-		<div>
-			<span
-				template="headerTemplate"
-				formattedText={Bind.oneWay(() => this.label)}>
-			</span>
-			<span
-				template="dataTemplate"
-				styleTextAlign={Bind.oneWay(() => this.align)}
-				formattedText={Bind.oneWay((x) => x.localViewModel.getItem(x.data, this.valuePath))}>
-			</span>
-		</div>
-		);
-	}
-}

package/src/data-grid/AtomDataGrid.ts

@@ -1,61 +0,0 @@
-import {BindableProperty} from "@web-atoms/core/dist/core/BindableProperty.js";
-import {AtomItemsControl} from "@web-atoms/core/dist/web/controls/AtomItemsControl.js";
-import AtomColumn from "./AtomColumn.js";
-import AtomDataGridStyle from "./AtomDataGridStyle.js";
-import AtomDataGridViewModel from "./AtomDataGridViewModel.js";
-import GridTemplate from "./GridTemplate.js";
-
-declare var UMD: any;
-const moduleName = globalThis.filename;
-export default class AtomDataGrid extends AtomItemsControl {
-    // tslint:disable-next-line: variable-name
-    public static readonly _$_url = moduleName ;
-
-    @BindableProperty
-    public  columns: any[]  ;
-
-    constructor(app: any, e: any = document.createElement("div")) {
-        super(app, e);
-    }
-
-    public append(e): any {
-        if (e instanceof AtomColumn) {
-            const c = this.columns || (this.columns = []);
-            c.push(e);
-            return this;
-        }
-        return super.append(e);
-    }
-
-    public preCreate(): void {
-
-        this. columns =  null ;
-        this.defaultControlStyle = AtomDataGridStyle;
-
-        this.runAfterInit(() => {
-            this.element.className = this.controlStyle.name;
-        });
-
-        this.localViewModel =  this.resolve(AtomDataGridViewModel, "owner") ;
-
-        this.runAfterInit(() => {
-
-            this.itemTemplate = GridTemplate(this, "dataTemplate", "td");
-
-            const table = document.createElement("table");
-
-            this.element.append(table);
-
-            const headerTemplate = GridTemplate(this, "headerTemplate", "th");
-            const headRow = new (headerTemplate)(this.app, document.createElement("tr"));
-            headRow.data = this;
-            const head = document.createElement("thead");
-            head.appendChild(headRow.element);
-            table.appendChild(head);
-
-            const body = document.createElement("tbody");
-            this.itemsPresenter = body;
-            table.appendChild(body);
-        });
-    }
-}

package/src/data-grid/AtomDataGridStyle.ts

@@ -1,45 +0,0 @@
-import Colors from "@web-atoms/core/dist/core/Colors.js";
-import { AtomStyle } from "@web-atoms/core/dist/web/styles/AtomStyle.js";
-import { IStyleDeclaration } from "@web-atoms/core/dist/web/styles/IStyleDeclaration.js";
-
-export default class AtomDataGridStyle extends AtomStyle {
-
-    public get root(): IStyleDeclaration {
-        return {
-            position: "absolute",
-            left: 0,
-            right: 0,
-            top: 0,
-            bottom: 0,
-            overflow: "auto",
-            subclasses: {
-                " > table > thead": {
-                    subclasses: {
-                        " > tr": {
-                            backgroundColor: Colors.lightGrey
-                        },
-                        " > tr > th": {
-                            padding: "5px"
-                        }
-                    }
-                },
-                " > table > tbody": {
-                    subclasses: {
-                        " > tr": {
-                            backgroundColor: Colors.white
-                        },
-                        " > tr:hover": {
-                            backgroundColor: Colors.lightGreen
-                        },
-                        " > tr > td": {
-                            padding: "5px"
-                        },
-                        " > tr > td:hover": {
-                            backgroundColor: Colors.lightSeaGreen
-                        }
-                    }
-                }
-            }
-        };
-    }
-}

package/src/data-grid/AtomDataGridViewModel.ts

@@ -1,74 +0,0 @@
-import { App } from "@web-atoms/core/dist/App.js";
-import { Inject } from "@web-atoms/core/dist/di/Inject.js";
-import { AtomViewModel, Watch } from "@web-atoms/core/dist/view-model/AtomViewModel.js";
-import Load from "@web-atoms/core/dist/view-model/Load.js";
-import AtomColumn from "./AtomColumn.js";
-
-interface IDataGrid {
-    columns: AtomColumn[];
-    items: any[];
-}
-
-export default class AtomDataGridViewModel extends AtomViewModel {
-
-    public owner: IDataGrid;
-
-    // @Inject
-    // public app: App;
-
-    @Watch
-    public watchInit() {
-
-        if (!this.owner) {
-            return;
-        }
-
-        const data = this.owner.items;
-
-        if (!data) {
-            return;
-        }
-
-        let columns = this.owner.columns;
-
-        if (columns && columns.length) {
-            return;
-        }
-
-        const columnList: {[k: string]: AtomColumn} = {  };
-        columns = [];
-        // prepare column list... from all items...
-        for (const iterator of data) {
-            for (const key in iterator) {
-                if (columnList[key]) {
-                    continue;
-                }
-                if (iterator.hasOwnProperty(key)) {
-                    const v = iterator[key];
-                    const c = new AtomColumn(this.app);
-                    c.label = key;
-                    c.labelPath = key;
-                    c.valuePath = key;
-                    c.align = "left";
-                    if (typeof v !== "string") {
-                        c.align = "right";
-                        c.sort = (a: number, b: number) => a > b ? -1 : 1;
-                    } else {
-                        c.sort = (a: string, b: string) => a.localeCompare(b);
-                    }
-                    columns.push(c);
-                    columnList[key] = c;
-                }
-            }
-        }
-
-        setTimeout(() => {
-            this.owner.columns = columns;
-        }, 1);
-    }
-
-    public getItem(data, valuePath) {
-        return data[valuePath];
-    }
-
-}