tosijs-ui 1.0.0

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

@@ -0,0 +1,97 @@
+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

@@ -0,0 +1,64 @@
+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

@@ -0,0 +1,18 @@
+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>;

package/dist/src/form.d.ts

@@ -0,0 +1,68 @@
+import { Component as XinComponent, ElementCreator } from 'xinjs';
+export declare class XinField extends XinComponent {
+    caption: string;
+    key: string;
+    type: '' | 'checkbox' | 'number' | 'range' | 'date' | 'text' | 'color';
+    optional: boolean;
+    pattern: string;
+    placeholder: string;
+    min: string;
+    max: string;
+    step: string;
+    fixedPrecision: number;
+    value: any;
+    content: any;
+    constructor();
+    private valueChanged;
+    handleChange: () => void;
+    initialize(form: XinForm): void;
+    connectedCallback(): void;
+    render(): void;
+}
+export declare class XinForm extends XinComponent {
+    context: {
+        [key: string]: any;
+    };
+    value: {
+        [key: string]: any;
+    };
+    get isValid(): boolean;
+    static styleSpec: {
+        ':host': {
+            display: string;
+            flexDirection: string;
+        };
+        ':host::part(header), :host::part(footer)': {
+            display: string;
+        };
+        ':host::part(content)': {
+            display: string;
+            flexDirection: string;
+            overflow: string;
+            height: string;
+            width: string;
+            position: string;
+            boxSizing: string;
+        };
+        ':host form': {
+            display: string;
+            flex: string;
+            position: string;
+            overflow: string;
+        };
+    };
+    content: any[];
+    getField: (key: string) => XinField | null;
+    get fields(): any;
+    set fields(values: {
+        [key: string]: any;
+    });
+    submit: () => void;
+    handleSubmit: (event: SubmitEvent) => void;
+    submitCallback: (value: {
+        [key: string]: any;
+    }, isValid: boolean) => void;
+    connectedCallback(): void;
+}
+export declare const xinField: ElementCreator<XinField>;
+export declare const xinForm: ElementCreator<XinForm>;

package/dist/src/gamepad.d.ts

@@ -0,0 +1,34 @@
+export interface XinButton {
+    index: number;
+    pressed: boolean;
+    value: number;
+}
+export interface XinGamepad {
+    id: string;
+    axes: number[];
+    buttons: {
+        [key: number]: number;
+    };
+}
+export declare function gamepadState(): {
+    id: string;
+    axes: readonly number[];
+    buttons: {
+        [key: number]: number;
+    };
+}[];
+export declare function gamepadText(): string;
+export interface XinXRControllerComponentState {
+    pressed: boolean;
+    axes?: number[];
+}
+export interface XinXRControllerState {
+    [key: string]: XinXRControllerComponentState;
+}
+export interface XinXRControllerMap {
+    [key: string]: XinXRControllerState;
+}
+export declare function xrControllers(xrHelper: any): {
+    [key: string]: XinXRControllerState;
+};
+export declare function xrControllersText(controllers?: XinXRControllerMap): string;

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

@@ -0,0 +1,309 @@
+declare const _default: {
+    earth: string;
+    blueprint: string;
+    tosiXr: string;
+    cmy: string;
+    rgb: string;
+    xrColor: string;
+    tosiUi: string;
+    tosiFavicon: string;
+    tosiPlatform: string;
+    tosi: string;
+    sortDescending: string;
+    columns: string;
+    underline: string;
+    grid: string;
+    triangle: string;
+    search: string;
+    volume2: string;
+    arrowUpCircle: string;
+    pauseCircle: string;
+    checkSquare: string;
+    arrowDown: string;
+    figma: string;
+    cornerRightUp: string;
+    chevronsRight: string;
+    list: string;
+    chevronsDown: string;
+    wind: string;
+    cornerUpRight: string;
+    target: string;
+    scissors: string;
+    minimize2: string;
+    playCircle: string;
+    crosshair: string;
+    airplay: string;
+    xOctagon: string;
+    repeat: string;
+    edit3: string;
+    volume1: string;
+    sunrise: string;
+    toggleRight: string;
+    umbrella: string;
+    user: string;
+    fileMinus: string;
+    xCircle: string;
+    circle: string;
+    phoneMissed: string;
+    edit2: string;
+    cornerLeftUp: string;
+    home: string;
+    gitlab: string;
+    music: string;
+    smartphone: string;
+    moreHorizontal: string;
+    sliders: string;
+    arrowUpLeft: string;
+    chevronDown: string;
+    hexagon: string;
+    github: string;
+    crop: string;
+    tag: string;
+    briefcase: string;
+    rotateCw: string;
+    map: string;
+    inbox: string;
+    alignJustify: string;
+    plusSquare: string;
+    power: string;
+    database: string;
+    cameraOff: string;
+    toggleLeft: string;
+    file: string;
+    messageCircle: string;
+    voicemail: string;
+    terminal: string;
+    move: string;
+    maximize: string;
+    chevronUp: string;
+    arrowDownLeft: string;
+    fileText: string;
+    droplet: string;
+    zapOff: string;
+    x: string;
+    barChart: string;
+    lock: string;
+    logIn: string;
+    shoppingBag: string;
+    divide: string;
+    cloudDrizzle: string;
+    refreshCw: string;
+    chevronRight: string;
+    clipboard: string;
+    package: string;
+    instagram: string;
+    link: string;
+    videoOff: string;
+    key: string;
+    meh: string;
+    cornerDownRight: string;
+    arrowRight: string;
+    aperture: string;
+    stopCircle: string;
+    logOut: string;
+    arrowLeftCircle: string;
+    barChart2: string;
+    gitPullRequest: string;
+    minimize: string;
+    minusSquare: string;
+    settings: string;
+    cloudSnow: string;
+    thumbsDown: string;
+    type: string;
+    archive: string;
+    phoneOutgoing: string;
+    pocket: string;
+    mail: string;
+    shield: string;
+    download: string;
+    phoneForwarded: string;
+    cornerRightDown: string;
+    bookOpen: string;
+    divideSquare: string;
+    server: string;
+    tv: string;
+    skipForward: string;
+    volume: string;
+    userPlus: string;
+    batteryCharging: string;
+    layers: string;
+    slash: string;
+    radio: string;
+    book: string;
+    userMinus: string;
+    bell: string;
+    gitBranch: string;
+    coffee: string;
+    code: string;
+    thermometer: string;
+    cast: string;
+    flag: string;
+    eyeOff: string;
+    battery: string;
+    disc: string;
+    frown: string;
+    tool: string;
+    cpu: string;
+    bold: string;
+    hash: string;
+    share2: string;
+    plus: string;
+    check: string;
+    rotateCcw: string;
+    hardDrive: string;
+    bluetooth: string;
+    pieChart: string;
+    headphones: string;
+    rss: string;
+    wifi: string;
+    cornerUpLeft: string;
+    watch: string;
+    info: string;
+    userX: string;
+    loader: string;
+    refreshCcw: string;
+    folderPlus: string;
+    gitMerge: string;
+    mic: string;
+    copy: string;
+    zoomIn: string;
+    arrowRightCircle: string;
+    alignRight: string;
+    image: string;
+    maximize2: string;
+    checkCircle: string;
+    sunset: string;
+    save: string;
+    smile: string;
+    navigation: string;
+    cloudLightning: string;
+    paperclip: string;
+    fastForward: string;
+    xSquare: string;
+    award: string;
+    zoomOut: string;
+    box: string;
+    thumbsUp: string;
+    percent: string;
+    sidebar: string;
+    square: string;
+    play: string;
+    gitCommit: string;
+    table: string;
+    send: string;
+    phoneCall: string;
+    speaker: string;
+    facebook: string;
+    codesandbox: string;
+    camera: string;
+    link2: string;
+    printer: string;
+    folderMinus: string;
+    arrowUpRight: string;
+    truck: string;
+    lifeBuoy: string;
+    penTool: string;
+    atSign: string;
+    feather: string;
+    trash: string;
+    wifiOff: string;
+    cornerLeftDown: string;
+    dollarSign: string;
+    star: string;
+    cloudOff: string;
+    sun: string;
+    messageSquare: string;
+    edit: string;
+    anchor: string;
+    alertCircle: string;
+    chevronsUp: string;
+    uploadCloud: string;
+    twitch: string;
+    youtube: string;
+    unlock: string;
+    compass: string;
+    plusCircle: string;
+    creditCard: string;
+    cloudRain: string;
+    trash2: string;
+    skipBack: string;
+    filePlus: string;
+    delete: string;
+    command: string;
+    clock: string;
+    octagon: string;
+    phone: string;
+    eye: string;
+    phoneOff: string;
+    codepen: string;
+    dribbble: string;
+    gift: string;
+    externalLink: string;
+    zap: string;
+    trello: string;
+    moreVertical: string;
+    micOff: string;
+    share: string;
+    arrowUp: string;
+    bellOff: string;
+    linkedin: string;
+    video: string;
+    divideCircle: string;
+    activity: string;
+    twitter: string;
+    mapPin: string;
+    filter: string;
+    phoneIncoming: string;
+    italic: string;
+    chevronsLeft: string;
+    calendar: string;
+    globe: string;
+    arrowLeft: string;
+    alignCenter: string;
+    minusCircle: string;
+    arrowDownRight: string;
+    framer: string;
+    volumeX: string;
+    slack: string;
+    cloud: string;
+    downloadCloud: string;
+    shuffle: string;
+    rewind: string;
+    upload: string;
+    trendingDown: string;
+    pause: string;
+    arrowDownCircle: string;
+    bookmark: string;
+    alertTriangle: string;
+    userCheck: string;
+    tablet: string;
+    alertOctagon: string;
+    menu: string;
+    chrome: string;
+    shoppingCart: string;
+    folder: string;
+    users: string;
+    cornerDownLeft: string;
+    monitor: string;
+    minus: string;
+    helpCircle: string;
+    navigation2: string;
+    chevronLeft: string;
+    film: string;
+    moon: string;
+    shieldOff: string;
+    layout: string;
+    mousePointer: string;
+    alignLeft: string;
+    heart: string;
+    trendingUp: string;
+    resize: string;
+    bug: string;
+    blog: string;
+    sortAscending: string;
+    npm: string;
+    game: string;
+    google: string;
+    discord: string;
+};
+export default _default;

package/dist/src/icon-types.d.ts

@@ -0,0 +1,7 @@
+import { ElementCreator } from 'xinjs';
+export type IconData = {
+    [key: string]: string;
+};
+export type SVGIconMap = {
+    [key: string]: ElementCreator<SVGElement>;
+};

package/dist/src/icons.d.ts

@@ -0,0 +1,17 @@
+import { Component as WebComponent } from 'xinjs';
+import { SVGIconMap } from './icon-types';
+export declare const defineIcons: (newIcons: {
+    [key: string]: string;
+}) => void;
+export declare const svg2DataUrl: (svg: SVGElement, fill?: string | false, stroke?: string | false, strokeWidth?: number | string) => string;
+export declare const icons: SVGIconMap;
+export declare class SvgIcon extends WebComponent {
+    icon: string;
+    size: number;
+    fill: string;
+    stroke: string;
+    strokeWidth: number;
+    constructor();
+    render(): void;
+}
+export declare const svgIcon: any;

package/dist/src/index.d.ts

@@ -0,0 +1,37 @@
+export * from './ab-test';
+export * from './babylon-3d';
+export * from './bp-loader';
+export * from './bodymovin-player';
+export * from './carousel';
+export * from './code-editor';
+export * from './color-input';
+export * from './data-table';
+export * as dragAndDrop from './drag-and-drop';
+export * from './editable-rect';
+export * from './filter-builder';
+export * from './float';
+export * from './form';
+export * from './gamepad';
+export * from './icons';
+export * from './live-example';
+export * from './localize';
+export { makeSorter } from './make-sorter';
+export * from './mapbox';
+export * from './markdown-viewer';
+export * from './menu';
+export * from './notifications';
+export * from './password-strength';
+export * from './pop-float';
+export * from './rating';
+export * from './rich-text';
+export * from './segmented';
+export * from './select';
+export * from './side-nav';
+export * from './size-break';
+export * from './sizer';
+export * from './tab-selector';
+export * from './tag-list';
+export { trackDrag, bringToFront, findHighestZ } from './track-drag';
+export { version } from './version';
+export { scriptTag, styleSheet } from './via-tag';
+export * as xinjs from 'xinjs';

package/dist/src/live-example.d.ts

@@ -0,0 +1,51 @@
+import { Component, ElementCreator } from 'xinjs';
+interface ExampleContext {
+    [key: string]: any;
+}
+export declare class LiveExample extends Component {
+    persistToDom: boolean;
+    prettier: boolean;
+    prefix: string;
+    storageKey: string;
+    context: ExampleContext;
+    uuid: string;
+    remoteId: string;
+    lastUpdate: number;
+    interval?: any;
+    static insertExamples(element: HTMLElement, context?: ExampleContext): void;
+    constructor();
+    get activeTab(): Element | undefined;
+    private getEditorValue;
+    private setEditorValue;
+    get css(): string;
+    set css(code: string);
+    get html(): string;
+    set html(code: string);
+    get js(): string;
+    set js(code: string);
+    updateUndo: () => void;
+    undo: () => void;
+    redo: () => void;
+    get isMaximized(): boolean;
+    flipLayout: () => void;
+    exampleMenu: () => void;
+    content: () => any[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    copy: () => void;
+    toggleMaximize: () => void;
+    get remoteKey(): string;
+    remoteChange: (event?: StorageEvent) => void;
+    showCode: () => void;
+    closeCode: () => void;
+    openEditorWindow: () => void;
+    refreshRemote: () => void;
+    updateSources: () => void;
+    refresh: () => void;
+    initFromElements(elements: HTMLElement[]): void;
+    showDefaultTab(): void;
+    render(): void;
+}
+export declare const liveExample: ElementCreator<LiveExample>;
+export declare function makeExamplesLive(element: HTMLElement): void;
+export {};