tosijs-ui 1.0.0 → 1.0.2

package/dist/sizer.js

@@ -1,92 +0,0 @@
-/*#
-# sizer
-
-This is a super-simple component that you can put in a fixed size element allowing it to be resized
-from the bottom-right.
-
-```html
-<div>
-  <xin-sizer></xin-sizer>
-</div>
-```
-```css
-.preview div {
-  position: absolute;
-  top: 10px;
-  left: 10px;
-  width: 200px;
-  height: 100px;
-  background: #ff02;
-  border: 1px solid #555;
-}
-```
-
-<xin-css-var-editor element-selector="xin-sizer"></xin-css-var-editor>
-*/
-import { Component as XinComponent, vars } from 'xinjs';
-import { icons } from './icons';
-import { trackDrag } from './track-drag';
-export class XinSizer extends XinComponent {
-    target = null;
-    static styleSpec = {
-        ':host': {
-            _resizeIconFill: '#222',
-            display: 'block',
-            position: 'absolute',
-            bottom: -7,
-            right: -7,
-            padding: 14,
-            width: 44,
-            height: 44,
-            opacity: 0.25,
-            transition: 'opacity 0.25s ease-out',
-        },
-        ':host(:hover)': {
-            opacity: 0.5,
-        },
-        ':host svg': {
-            width: 16,
-            height: 16,
-            stroke: vars.resizeIconFill,
-        },
-    };
-    content = icons.resize();
-    get minSize() {
-        const { minWidth, minHeight } = getComputedStyle(this.target);
-        return {
-            width: parseFloat(minWidth) || 32,
-            height: parseFloat(minHeight) || 32,
-        };
-    }
-    resizeTarget = (event) => {
-        const { target } = this;
-        if (!target)
-            return;
-        const w = target.offsetWidth;
-        const h = target.offsetHeight;
-        target.style.left = target.offsetLeft + 'px';
-        target.style.top = target.offsetTop + 'px';
-        target.style.bottom = '';
-        target.style.right = '';
-        const { minSize } = this;
-        trackDrag(event, (dx, dy, event) => {
-            target.style.width = Math.max(minSize.width, w + dx) + 'px';
-            target.style.height = Math.max(minSize.height, h + dy) + 'px';
-            if (event.type === 'mouseup') {
-                return true;
-            }
-        }, 'nwse-resize');
-    };
-    connectedCallback() {
-        super.connectedCallback();
-        if (!this.target) {
-            this.target = this.parentElement;
-        }
-        const PASSIVE = { passive: true };
-        this.addEventListener('mousedown', this.resizeTarget, PASSIVE);
-        this.addEventListener('touchstart', this.resizeTarget, PASSIVE);
-    }
-}
-export const xinSizer = XinSizer.elementCreator({
-    tag: 'xin-sizer',
-});

package/dist/src/ab-test.d.ts

@@ -1,14 +0,0 @@
-import { Component } from 'xinjs';
-export declare class AbTest extends Component {
-    static set conditions(context: {
-        [key: string]: any;
-    });
-    condition: string;
-    not: boolean;
-    static instances: Set<AbTest>;
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    render(): void;
-}
-export declare const abTest: any;

package/dist/src/babylon-3d.d.ts

@@ -1,53 +0,0 @@
-import { Component as WebComponent, ElementCreator } from 'xinjs';
-type B3dCallback = ((element: B3d, BABYLON: any) => void) | ((element: B3d, BABYLON: any) => Promise<void>);
-interface B3dUIOptions {
-    snippetId?: string;
-    jsonUrl?: string;
-    data?: any;
-    size?: number;
-}
-type MeshProcessCallback = (meshes: any[]) => void;
-export declare class B3d extends WebComponent {
-    babylonReady: Promise<any>;
-    BABYLON?: any;
-    static styleSpec: {
-        ':host': {
-            display: string;
-            position: string;
-        };
-        ':host canvas': {
-            width: string;
-            height: string;
-        };
-        ':host .babylonVRicon': {
-            height: number;
-            width: number;
-            backgroundColor: string;
-            filter: string;
-            backgroundImage: string;
-            backgroundPosition: string;
-            backgroundRepeat: string;
-            border: string;
-            borderRadius: number;
-            borderStyle: string;
-            outline: string;
-            transition: string;
-        };
-        ':host .babylonVRicon:hover': {
-            transform: string;
-        };
-    };
-    content: any;
-    constructor();
-    scene: any;
-    engine: any;
-    sceneCreated: B3dCallback;
-    update: B3dCallback;
-    private _update;
-    onResize(): void;
-    loadScene: (path: string, file: string, processCallback?: MeshProcessCallback) => Promise<void>;
-    loadUI: (options: B3dUIOptions) => Promise<any>;
-    connectedCallback(): void;
-}
-export declare const b3d: ElementCreator<B3d>;
-export {};

package/dist/src/bodymovin-player.d.ts

@@ -1,32 +0,0 @@
-import { Component as WebComponent, ElementCreator } from 'xinjs';
-export interface LottieConfig {
-    container?: HTMLElement | ShadowRoot;
-    renderer: 'svg' | 'canvas' | 'html';
-    loop: boolean;
-    autoplay: boolean;
-    animationData?: string;
-    path?: string;
-    [key: string]: any;
-}
-export declare class BodymovinPlayer extends WebComponent {
-    content: any;
-    src: string;
-    json: string;
-    config: LottieConfig;
-    static bodymovinAvailable?: Promise<any>;
-    animation: any;
-    static styleSpec: {
-        ':host': {
-            width: number;
-            height: number;
-            display: string;
-        };
-    };
-    private _loading;
-    get loading(): boolean;
-    constructor();
-    private readonly doneLoading;
-    private readonly load;
-    render(): void;
-}
-export declare const bodymovinPlayer: ElementCreator<BodymovinPlayer>;

package/dist/src/carousel.d.ts

@@ -1,113 +0,0 @@
-import { Component as WebComponent, ElementCreator } from 'xinjs';
-export declare class XinCarousel extends WebComponent {
-    arrows: boolean;
-    dots: boolean;
-    loop: boolean;
-    maxVisibleItems: number;
-    snapDelay: number;
-    snapDuration: number;
-    auto: number;
-    private lastAutoAdvance;
-    private interval?;
-    private autoAdvance;
-    private _page;
-    get page(): number;
-    set page(p: number);
-    get visibleItems(): HTMLElement[];
-    get lastPage(): number;
-    static styleSpec: {
-        ':host': {
-            display: string;
-            flexDirection: string;
-            position: string;
-        };
-        ':host svg': {
-            height: any;
-        };
-        ':host button': {
-            outline: string;
-            border: string;
-            boxShadow: string;
-            background: string;
-            color: any;
-            padding: number;
-        };
-        ':host::part(back), :host::part(forward)': {
-            position: string;
-            top: number;
-            bottom: number;
-            width: any;
-            zIndex: number;
-        };
-        ':host::part(back)': {
-            left: number;
-        };
-        ':host::part(forward)': {
-            right: number;
-        };
-        ':host button:disabled': {
-            opacity: number;
-            pointerEvents: string;
-        };
-        ':host button:hover': {
-            color: any;
-        };
-        ':host button:active': {
-            color: any;
-        };
-        ':host::part(pager)': {
-            position: string;
-        };
-        ':host::part(scroller)': {
-            overflow: string;
-            position: string;
-        };
-        ':host::part(grid)': {
-            display: string;
-            justifyItems: string;
-        };
-        ':host *::-webkit-scrollbar, *::-webkit-scrollbar-thumb': {
-            display: string;
-        };
-        ':host .dot': {
-            background: any;
-            borderRadius: any;
-            height: any;
-            width: any;
-            transition: any;
-        };
-        ':host .dot:not(.current):hover': {
-            background: any;
-            height: any;
-            width: any;
-            margin: any;
-        };
-        ':host .dot:not(.current):active': {
-            background: any;
-        };
-        ':host .dot.current': {
-            background: any;
-        };
-        ':host::part(progress)': {
-            display: string;
-            gap: any;
-            justifyContent: string;
-            padding: any;
-        };
-    };
-    easing: (t: number) => number;
-    indicateCurrent: () => void;
-    snapPosition: () => void;
-    back: () => void;
-    forward: () => void;
-    handleDotClick: (event: Event) => void;
-    private snapTimer;
-    private animationFrame;
-    animateScroll(position: number, startingPosition?: number, timestamp?: number): void;
-    content: () => any[];
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    render(): void;
-}
-export declare const xinCarousel: ElementCreator<XinCarousel>;

package/dist/src/code-editor.d.ts

@@ -1,27 +0,0 @@
-import { Component as WebComponent, ElementCreator } from 'xinjs';
-export declare class CodeEditor extends WebComponent {
-    private source;
-    get value(): string;
-    set value(text: string);
-    mode: string;
-    disabled: boolean;
-    role: string;
-    get editor(): any;
-    private _editor;
-    private _editorPromise;
-    options: any;
-    theme: string;
-    static styleSpec: {
-        ':host': {
-            display: string;
-            position: string;
-            width: string;
-            height: string;
-        };
-    };
-    constructor();
-    onResize(): void;
-    connectedCallback(): void;
-    render(): void;
-}
-export declare const codeEditor: ElementCreator<CodeEditor>;

package/dist/src/color-input.d.ts

@@ -1,41 +0,0 @@
-import { Component, ElementCreator, PartsMap } from 'xinjs';
-interface ColorParts extends PartsMap {
-    rgb: HTMLInputElement;
-    alpha: HTMLInputElement;
-    css: HTMLInputElement;
-}
-declare class ColorInput extends Component<ColorParts> {
-    value: any;
-    color: any;
-    static styleSpec: {
-        ':host': {
-            _gap: number;
-            _swatchSize: number;
-            _cssWidth: number;
-            _alphaWidth: number;
-            display: string;
-            gap: any;
-            alignItems: string;
-        };
-        ':host input[type="color"]': {
-            border: number;
-            width: any;
-            height: any;
-            background: string;
-        };
-        ':host::part(alpha)': {
-            width: any;
-        };
-        ':host::part(css)': {
-            width: any;
-            fontFamily: string;
-        };
-    };
-    content: any[];
-    private valueChanged;
-    update: (event: Event) => void;
-    connectedCallback(): void;
-    render(): void;
-}
-export declare const colorInput: ElementCreator<ColorInput>;
-export {};

package/dist/src/data-table.d.ts

@@ -1,79 +0,0 @@
-import { Component as WebComponent, ElementCreator } from 'xinjs';
-import { SortCallback } from './make-sorter';
-export interface ColumnOptions {
-    name?: string;
-    prop: string;
-    width: number;
-    visible?: boolean;
-    align?: string;
-    sort?: false | 'ascending' | 'descending';
-    headerCell?: (options: ColumnOptions) => HTMLElement;
-    dataCell?: (options: ColumnOptions) => HTMLElement;
-}
-export interface TableData {
-    columns?: ColumnOptions[] | null;
-    array: any[];
-    filter?: ArrayFilter | null;
-}
-export type ArrayFilter = (array: any[]) => any[];
-export type SelectCallback = (selected: any[]) => void;
-export declare class DataTable extends WebComponent {
-    select: boolean;
-    multiple: boolean;
-    nosort: boolean;
-    nohide: boolean;
-    noreorder: boolean;
-    selectionChanged: SelectCallback;
-    localized: boolean;
-    private selectedKey;
-    private selectBinding;
-    pinnedTop: number;
-    pinnedBottom: number;
-    maxVisibleRows: number;
-    get value(): TableData;
-    set value(data: TableData);
-    private rowData;
-    private _array;
-    private _columns;
-    private _filter;
-    charWidth: number;
-    rowHeight: number;
-    minColumnWidth: number;
-    get virtual(): {
-        height: number;
-    } | undefined;
-    constructor();
-    get array(): any[];
-    set array(newArray: any[]);
-    get filter(): ArrayFilter;
-    set filter(filterFunc: ArrayFilter);
-    get sort(): SortCallback | undefined;
-    set sort(sortFunc: ArrayFilter);
-    get columns(): ColumnOptions[];
-    set columns(newColumns: ColumnOptions[]);
-    get visibleColumns(): ColumnOptions[];
-    content: any;
-    getColumn(event: any): ColumnOptions | undefined;
-    private setCursor;
-    private resizeColumn;
-    selectRow(row: any, select?: boolean): void;
-    selectRows(rows?: any[], select?: boolean): void;
-    deSelect(rows?: any[]): void;
-    private rangeStart?;
-    private updateSelection;
-    connectedCallback(): void;
-    setColumnWidths(): void;
-    sortByColumn: (columnOptions: ColumnOptions, direction?: "ascending" | "descending" | "auto") => void;
-    popColumnMenu: (target: HTMLElement, options: ColumnOptions) => void;
-    get captionSpan(): ElementCreator;
-    headerCell: (options: ColumnOptions) => any;
-    dataCell: (options: ColumnOptions) => any;
-    get visibleRows(): any[];
-    get visibleSelectedRows(): any[];
-    get selectedRows(): any[];
-    rowTemplate(columns: ColumnOptions[]): HTMLTemplateElement;
-    private draggedColumn?;
-    private dropColumn;
-    render(): void;
-}
-export declare const dataTable: ElementCreator<DataTable>;

package/dist/src/drag-and-drop.d.ts

@@ -1,2 +0,0 @@
-export declare const draggedElement: () => Element;
-export declare const init: () => void;

package/dist/src/editable-rect.d.ts

@@ -1,97 +0,0 @@
-import { Component } from 'xinjs';
-interface Locks {
-    left: boolean;
-    right: boolean;
-    top: boolean;
-    bottom: boolean;
-}
-export declare class EditableRect extends Component {
-    static angleSize: number;
-    static gridSize: number;
-    static snapAngle: boolean;
-    static snapToGrid: boolean;
-    static styleSpec: {
-        ':host': {
-            '--handle-bg': string;
-            '--handle-color': string;
-            '--handle-hover-bg': string;
-            '--handle-hover-color': string;
-            '--handle-size': string;
-            '--handle-padding': string;
-        };
-        ':host ::slotted(*)': {
-            position: string;
-        };
-        ':host > :not(style,slot)': {
-            boxSizing: string;
-            content: string;
-            position: string;
-            display: string;
-            height: any;
-            width: any;
-            padding: any;
-            '--text-color': any;
-            background: any;
-        };
-        ':host > .drag-size': {
-            top: number;
-            bottom: number;
-            left: number;
-            right: number;
-            height: string;
-            width: string;
-            background: string;
-            cursor: string;
-        };
-        ':host > [part="rotate"]': {
-            transform: string;
-        };
-        ':host > [locked] > svg:first-child, :host > :not([locked]) > svg+svg': {
-            display: string;
-        };
-        ':host .icon-unlock': {
-            opacity: number;
-        };
-        ':host svg': {
-            pointerEvents: string;
-        };
-        ':host > *:hover': {
-            '--text-color': any;
-            background: any;
-        };
-    };
-    static snappedCoords(event: PointerEvent, coords: number[]): number[];
-    static snappedAngle(event: PointerEvent, a: number): number;
-    get locked(): Locks;
-    set locked(locks: Locks);
-    get coords(): {
-        top: number;
-        left: number;
-        bottom: number;
-        right: number;
-    };
-    get left(): number;
-    get width(): number;
-    get right(): number;
-    get top(): number;
-    get height(): number;
-    get bottom(): number;
-    triggerChange: () => void;
-    adjustPosition: (event: Event) => void;
-    resize: (event: Event) => void;
-    adjustSize: (event: Event) => void;
-    get rect(): DOMRect;
-    get center(): {
-        x: number;
-        y: number;
-    };
-    get element(): HTMLElement;
-    adjustRotation: (event: Event) => void;
-    toggleLock: (event: Event) => void;
-    content: () => any[];
-    constructor();
-    connectedCallback(): void;
-    render(): void;
-}
-export declare const editableRect: any;
-export {};

package/dist/src/filter-builder.d.ts

@@ -1,64 +0,0 @@
-import { Component as WebComponent, ElementCreator } from 'xinjs';
-type ObjectTest = (obj: any) => boolean;
-type ArrayFilter = (array: any[]) => any[];
-interface FilterMaker {
-    caption: string;
-    negative?: string;
-    needsValue?: boolean;
-    makeTest: (value: any) => ObjectTest;
-}
-export declare const availableFilters: {
-    [key: string]: FilterMaker;
-};
-interface Filter {
-    description: string;
-    test: ObjectTest;
-}
-type Fields = Array<{
-    name?: string;
-    prop: string;
-}>;
-export interface FilterPartState {
-    haystack: string;
-    condition: string;
-    needle: string;
-}
-export declare class FilterPart extends WebComponent {
-    fields: Fields;
-    filters: {
-        [key: string]: FilterMaker;
-    };
-    haystack: string;
-    condition: string;
-    needle: string;
-    content: () => any[];
-    filter: Filter;
-    constructor();
-    get state(): FilterPartState;
-    set state(newState: FilterPartState);
-    buildFilter: () => void;
-    connectedCallback(): void;
-    render(): void;
-}
-export declare const filterPart: ElementCreator<FilterPart>;
-export type FilterState = FilterPartState[];
-export declare class FilterBuilder extends WebComponent {
-    private _fields;
-    get fields(): Fields;
-    set fields(_fields: Fields);
-    get state(): FilterState;
-    set state(parts: FilterState);
-    filter: ArrayFilter;
-    description: string;
-    addFilter: () => void;
-    content: () => any[];
-    filters: {
-        [key: string]: FilterMaker;
-    };
-    reset: () => void;
-    buildFilter: () => void;
-    connectedCallback(): void;
-    render(): void;
-}
-export declare const filterBuilder: ElementCreator<FilterBuilder>;
-export {};

package/dist/src/float.d.ts

@@ -1,18 +0,0 @@
-import { Component as WebComponent, ElementCreator } from 'xinjs';
-export declare class XinFloat extends WebComponent {
-    static floats: Set<XinFloat>;
-    drag: boolean;
-    remainOnResize: 'hide' | 'remove' | 'remain';
-    remainOnScroll: 'hide' | 'remove' | 'remain';
-    content: any;
-    static styleSpec: {
-        ':host': {
-            position: string;
-        };
-    };
-    constructor();
-    reposition: (event: Event) => void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-}
-export declare const xinFloat: ElementCreator<XinFloat>;