tosijs-ui 1.0.0

package/dist/size-break.js

@@ -0,0 +1,118 @@
+import { Component as WebComponent, elements } from 'xinjs';
+const { slot } = elements;
+/*#
+# size-break
+
+While we wait for enough browsers to implement [container-queries](https://www.w3.org/TR/css-contain-3/),
+and in any event when you simply want to do different things at different sizes (e.g. in the project I'm
+working on right now, a row of buttons turns into a menu at narrow widths) there's `<xin-sizebreak>`.
+
+Note that the sizes referred to are of the `<xin-sizebreak>`'s `.offsetParent`, and it watches for
+the window's `resize` events and its own (via `ResizeObserver`).
+
+```html
+<div class="container">
+  <xin-sizebreak min-width="300" min-height="150">
+    <h1>BIG!</h1>
+    <i slot="small">little</i>
+  </xin-sizebreak>
+  <xin-sizer></xin-sizer>
+</div>
+```
+```css
+.preview {
+  touch-action: none;
+}
+
+.preview xin-sizebreak {
+  width: 100%;
+  height: 100%;
+  background: #fff8;
+  border: 1px solid #aaa;
+}
+
+.preview xin-sizebreak * {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+}
+
+.preview .container {
+  position: relative;
+  min-width: 100px;
+  min-height: 40px;
+  max-height: 100%;
+  width: 400px;
+  height: 100px;
+}
+
+.preview .sizer {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  text-align: center;
+  background: #0002;
+  bottom: 0;
+  right: 0;
+  cursor: nwse-resize;
+  opacity: 0.5;
+}
+
+.preview .sizer:hover {
+  opacity: 1.0;
+}
+```
+
+`<xin-sizebreak>` supports both `min-width` and/or `min-height`, and you can of course target only one
+of the slots if you like. The demo site uses them to hide the [bundlejs](https://bundlejs.com/) badge when
+space is tight.
+*/
+export class SizeBreak extends WebComponent {
+    minWidth = 0;
+    minHeight = 0;
+    value = 'normal';
+    content = [slot({ part: 'normal' }), slot({ part: 'small', name: 'small' })];
+    static styleSpec = {
+        ':host': {
+            display: 'inline-block',
+            position: 'relative',
+        },
+    };
+    constructor() {
+        super();
+        this.initAttributes('minWidth', 'minHeight');
+    }
+    onResize = () => {
+        const { normal, small } = this.parts;
+        const parent = this.offsetParent;
+        if (!(parent instanceof HTMLElement)) {
+            return;
+        }
+        else if (parent.offsetWidth < this.minWidth ||
+            parent.offsetHeight < this.minHeight) {
+            normal.hidden = true;
+            small.hidden = false;
+            this.value = 'small';
+        }
+        else {
+            normal.hidden = false;
+            small.hidden = true;
+            this.value = 'normal';
+        }
+    };
+    // TODO trigger a resize event when an ancestor element
+    // is inserted or moved into the DOM.
+    connectedCallback() {
+        super.connectedCallback();
+        globalThis.addEventListener('resize', this.onResize);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        globalThis.removeEventListener('resize', this.onResize);
+    }
+}
+export const sizeBreak = SizeBreak.elementCreator({
+    tag: 'xin-sizebreak',
+});

package/dist/sizer.d.ts

@@ -0,0 +1,34 @@
+import { Component as XinComponent, ElementCreator } from 'tosijs';
+export declare class XinSizer extends XinComponent {
+    target?: HTMLElement | null;
+    static styleSpec: {
+        ':host': {
+            _resizeIconFill: string;
+            display: string;
+            position: string;
+            bottom: number;
+            right: number;
+            padding: number;
+            width: number;
+            height: number;
+            opacity: number;
+            transition: string;
+        };
+        ':host(:hover)': {
+            opacity: number;
+        };
+        ':host svg': {
+            width: number;
+            height: number;
+            stroke: string;
+        };
+    };
+    content: SVGElement;
+    get minSize(): {
+        width: number;
+        height: number;
+    };
+    resizeTarget: (event: Event) => void;
+    connectedCallback(): void;
+}
+export declare const xinSizer: ElementCreator<XinSizer>;

package/dist/sizer.js

@@ -0,0 +1,92 @@
+/*#
+# 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

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

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

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

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

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

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

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

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