tosijs-ui 1.0.0

package/dist/src/localize.d.ts

@@ -0,0 +1,30 @@
+import { Component } from 'xinjs';
+export declare const i18n: any;
+export declare const setLocale: (language: string) => void;
+export declare const updateLocalized: () => void;
+export declare function initLocalization(localizedStrings: string): void;
+export declare function localize(ref: string): string;
+export declare class LocalePicker extends Component {
+    hideCaption: boolean;
+    content: () => any;
+    constructor();
+    render(): void;
+}
+export declare const localePicker: any;
+interface AbstractLocalized {
+    localeChanged: () => {};
+    connectedCallback: () => {};
+    disconnectedCallback: () => {};
+}
+export declare class XinLocalized extends Component {
+    static allInstances: Set<AbstractLocalized>;
+    contents: () => any;
+    refString: string;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    localeChanged(): void;
+    render(): void;
+}
+export declare const xinLocalized: any;
+export {};

package/dist/src/make-sorter.d.ts

@@ -0,0 +1,3 @@
+export type SortValuator<T = object> = (f: T) => (string | number)[];
+export type SortCallback<T = object> = (p: T, q: T) => number;
+export declare function makeSorter<T>(sortValuator: SortValuator<T>, ascending?: boolean | boolean[]): SortCallback<T>;

package/dist/src/mapbox.d.ts

@@ -0,0 +1,24 @@
+import { Component as WebComponent, ElementCreator } from 'xinjs';
+export declare class MapBox extends WebComponent {
+    coords: string;
+    content: any;
+    get map(): any;
+    mapStyle: string;
+    token: string;
+    static mapboxCSSAvailable: Promise<void>;
+    static mapboxAvailable?: Promise<any>;
+    private _map;
+    static styleSpec: {
+        ':host': {
+            display: string;
+            position: string;
+            width: string;
+            height: string;
+            textAlign: string;
+        };
+    };
+    constructor();
+    connectedCallback(): void;
+    render(): void;
+}
+export declare const mapBox: ElementCreator<MapBox>;

package/dist/src/markdown-viewer.d.ts

@@ -0,0 +1,15 @@
+import { Component, ElementCreator } from 'xinjs';
+export declare class MarkdownViewer extends Component {
+    src: string;
+    value: string;
+    content: any;
+    elements: boolean;
+    context: {
+        [key: string]: any;
+    };
+    constructor();
+    connectedCallback(): void;
+    didRender: (() => void) | (() => Promise<void>);
+    render(): void;
+}
+export declare const markdownViewer: ElementCreator<MarkdownViewer>;

package/dist/src/match-shortcut.d.ts

@@ -0,0 +1,9 @@
+interface KeyboardEventLike {
+    key: string;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    altKey: boolean;
+    shiftKey: boolean;
+}
+export declare const matchShortcut: (keystroke: KeyboardEventLike, shortcut: string) => boolean;
+export {};

package/dist/src/menu.d.ts

@@ -0,0 +1,60 @@
+import { Component, PartsMap } from 'xinjs';
+import { FloatPosition } from './pop-float';
+import { SvgIcon } from './icons';
+export type ActionCallback = () => void | Promise<void>;
+export interface MenuAction {
+    caption: string;
+    shortcut?: string;
+    checked?: () => boolean;
+    enabled?: () => boolean;
+    action: ActionCallback | string;
+    icon?: string | Element;
+}
+export interface SubMenu {
+    caption: string;
+    checked?: () => boolean;
+    enabled?: () => boolean;
+    menuItems: MenuItem[];
+    icon?: string | Element;
+}
+export type MenuSeparator = null;
+export type MenuItem = MenuAction | SubMenu | MenuSeparator;
+export declare const createMenuAction: (item: MenuAction, options: PopMenuOptions) => HTMLElement;
+export declare const createSubMenu: (item: SubMenu, options: PopMenuOptions) => HTMLElement;
+export declare const createMenuItem: (item: MenuItem, options: PopMenuOptions) => HTMLElement;
+export declare const menu: (options: PopMenuOptions) => HTMLDivElement;
+interface PoppedMenu {
+    target: HTMLElement;
+    menu: HTMLElement;
+}
+export declare const removeLastMenu: (depth?: number) => PoppedMenu | undefined;
+export interface PopMenuOptions {
+    target: HTMLElement;
+    menuItems: MenuItem[];
+    width?: string | number;
+    position?: FloatPosition;
+    submenuDepth?: number;
+    submenuOffset?: {
+        x: number;
+        y: number;
+    };
+    localized?: boolean;
+}
+export declare const popMenu: (options: PopMenuOptions) => void;
+interface XinMenuParts extends PartsMap {
+    trigger: HTMLButtonElement;
+    icon: SvgIcon;
+}
+export declare class XinMenu extends Component<XinMenuParts> {
+    menuItems: MenuItem[];
+    menuWidth: string;
+    localized: boolean;
+    showMenu: (event: Event) => void;
+    content: () => any;
+    handleShortcut: (event: KeyboardEvent) => Promise<void>;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+export declare const xinMenu: any;
+export {};

package/dist/src/notifications.d.ts

@@ -0,0 +1,106 @@
+import { Component, ElementCreator } from 'xinjs';
+interface NotificationSpec {
+    message: string;
+    type?: 'success' | 'info' | 'log' | 'warn' | 'error' | 'progress';
+    icon?: SVGElement | string;
+    duration?: number;
+    progress?: () => number;
+    close?: () => void;
+}
+type callback = () => void;
+export declare class XinNotification extends Component {
+    private static singleton?;
+    static styleSpec: {
+        ':host': {
+            _notificationSpacing: number;
+            _notificationWidth: number;
+            _notificationPadding: string;
+            _notificationBg: string;
+            _notificationAccentColor: string;
+            _notificationTextColor: string;
+            _notificationIconSize: any;
+            _notificationButtonSize: number;
+            _notificationBorderWidth: string;
+            _notificationBorderRadius: any;
+            position: string;
+            left: number;
+            right: number;
+            bottom: number;
+            paddingBottom: any;
+            width: any;
+            display: string;
+            flexDirection: string;
+            margin: string;
+            gap: any;
+            maxHeight: string;
+            overflow: string;
+            boxShadow: string;
+        };
+        ':host *': {
+            color: any;
+        };
+        ':host .note': {
+            display: string;
+            background: any;
+            padding: any;
+            gridTemplateColumns: string;
+            gap: any;
+            alignItems: string;
+            borderRadius: any;
+            boxShadow: string;
+            borderColor: any;
+            borderWidth: any;
+            borderStyle: string;
+            transition: string;
+            transitionProperty: string;
+            zIndex: number;
+        };
+        ':host .note .icon': {
+            stroke: any;
+        };
+        ':host .note button': {
+            display: string;
+            lineHeight: any;
+            padding: number;
+            margin: number;
+            height: any;
+            width: any;
+            background: string;
+            alignItems: string;
+            justifyContent: string;
+            boxShadow: string;
+            border: string;
+            position: string;
+        };
+        ':host .note button:hover svg': {
+            stroke: any;
+        };
+        ':host .note button:active svg': {
+            borderRadius: number;
+            stroke: any;
+            background: any;
+            padding: any;
+        };
+        ':host .note svg': {
+            height: any;
+            width: any;
+            pointerEvents: string;
+        };
+        ':host .message': {
+            display: string;
+            flexDirection: string;
+            alignItems: string;
+            gap: any;
+        };
+        ':host .note.closing': {
+            opacity: number;
+            zIndex: number;
+        };
+    };
+    static removeNote(note: HTMLElement): void;
+    static post(spec: NotificationSpec | string): callback;
+    content: any;
+}
+export declare const xinNotification: ElementCreator<XinNotification>;
+export declare function postNotification(spec: NotificationSpec | string): callback;
+export {};

package/dist/src/password-strength.d.ts

@@ -0,0 +1,35 @@
+import { Component } from 'xinjs';
+export declare const digest: (s: string, method?: string) => Promise<string>;
+export declare const isBreached: (password: string) => Promise<boolean>;
+export declare class XinPasswordStrength extends Component {
+    minLength: number;
+    goodLength: number;
+    indicatorColors: string;
+    descriptionColors: string;
+    issues: {
+        tooShort: boolean;
+        short: boolean;
+        noUpper: boolean;
+        noLower: boolean;
+        noNumber: boolean;
+        noSpecial: boolean;
+    };
+    issueDescriptions: {
+        tooShort: string;
+        short: string;
+        noUpper: string;
+        noLower: string;
+        noNumber: string;
+        noSpecial: string;
+    };
+    value: number;
+    strengthDescriptions: string[];
+    constructor();
+    strength(password: string): number;
+    isBreached(): Promise<boolean>;
+    updateIndicator: (password: string) => void;
+    update: (event: Event) => void;
+    content: () => any[];
+    render(): void;
+}
+export declare const xinPasswordStrength: any;

package/dist/src/pop-float.d.ts

@@ -0,0 +1,10 @@
+import { ElementPart } from 'xinjs';
+import { XinFloat } from './float';
+export type FloatPosition = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw' | 'en' | 'wn' | 'es' | 'ws' | 'side' | 'auto';
+export interface PopFloatOptions {
+    content: HTMLElement | ElementPart[];
+    target: HTMLElement;
+    position?: FloatPosition;
+}
+export declare const popFloat: (options: PopFloatOptions) => XinFloat;
+export declare const positionFloat: (element: HTMLElement, target: HTMLElement, position?: FloatPosition) => void;

package/dist/src/rating.d.ts

@@ -0,0 +1,62 @@
+import { Component, ElementCreator } from 'xinjs';
+export declare class XinRating extends Component {
+    iconSize: number;
+    min: 0 | 1;
+    max: number;
+    step: number;
+    value: number | null;
+    icon: string;
+    ratingFill: string;
+    ratingStroke: string;
+    emptyFill: string;
+    emptyStroke: string;
+    readonly: boolean;
+    hollow: boolean;
+    static styleSpec: {
+        ':host': {
+            display: string;
+            position: string;
+            width: string;
+        };
+        ':host::part(container)': {
+            position: string;
+            display: string;
+        };
+        ':host::part(empty), :host::part(filled)': {
+            height: string;
+            whiteSpace: string;
+            overflow: string;
+        };
+        ':host::part(empty)': {
+            pointerEvents: string;
+            _xinIconFill: any;
+            _xinIconStroke: any;
+        };
+        ':host::part(filled)': {
+            position: string;
+            left: number;
+            _xinIconFill: any;
+            _xinIconStroke: any;
+        };
+        ':host svg': {
+            transform: string;
+            pointerEvents: string;
+            transition: string;
+        };
+        ':host svg:hover': {
+            transform: string;
+        };
+        ':host svg:active': {
+            transform: string;
+        };
+    };
+    constructor();
+    content: () => any;
+    displayValue(value: number | null): void;
+    update: (event: Event) => void;
+    handleKey: (event: KeyboardEvent) => void;
+    connectedCallback(): void;
+    private _renderedIcon;
+    render(): void;
+}
+export declare const xinRating: ElementCreator<XinRating>;

package/dist/src/rich-text.d.ts

@@ -0,0 +1,28 @@
+import { Component as WebComponent, ElementCreator } from 'xinjs';
+export declare function blockStyle(options?: {
+    caption: string;
+    tagType: string;
+}[]): any;
+export declare function spacer(width?: string): any;
+export declare function elastic(width?: string): any;
+export declare function commandButton(title: string, dataCommand: string, icon: SVGElement): any;
+export declare const richTextWidgets: () => any[];
+export declare class RichText extends WebComponent {
+    widgets: 'none' | 'minimal' | 'default';
+    private isInitialized;
+    get value(): string;
+    set value(docHtml: string);
+    blockElement(elt: Node): Element | undefined;
+    get selectedBlocks(): any[];
+    get selectedText(): string;
+    selectionChange: (event: Event, editor: RichText) => void;
+    handleSelectChange: (event: Event) => void;
+    handleButtonClick: (event: Event) => void;
+    content: any[];
+    constructor();
+    doCommand(command?: string): void;
+    updateBlockStyle(): void;
+    connectedCallback(): void;
+    render(): void;
+}
+export declare const richText: ElementCreator<RichText>;

package/dist/src/segmented.d.ts

@@ -0,0 +1,80 @@
+import { Component as WebComponent, ElementCreator } from 'xinjs';
+interface Choice {
+    icon?: string | SVGElement;
+    value: string;
+    caption: string;
+}
+export declare class XinSegmented extends WebComponent {
+    choices: string | Choice[];
+    other: string;
+    multiple: boolean;
+    name: string;
+    placeholder: string;
+    localized: boolean;
+    value: null | string;
+    get values(): string[];
+    content: () => any[];
+    static styleSpec: {
+        ':host': {
+            display: string;
+            gap: any;
+            alignItems: any;
+        };
+        ':host, :host::part(options)': {
+            flexDirection: any;
+        };
+        ':host label': {
+            display: string;
+            alignItems: string;
+            gap: any;
+            gridTemplateColumns: any;
+            padding: any;
+            font: any;
+        };
+        ':host label:has(:checked)': {
+            color: any;
+            background: any;
+        };
+        ':host svg': {
+            height: any;
+            stroke: any;
+        };
+        ':host label.no-icon': {
+            gap: number;
+            gridTemplateColumns: any;
+        };
+        ':host input[type="radio"], :host input[type="checkbox"]': {
+            visibility: any;
+        };
+        ':host::part(options)': {
+            display: string;
+            borderRadius: any;
+            background: any;
+            color: any;
+            overflow: string;
+            alignItems: any;
+        };
+        ':host::part(custom)': {
+            padding: any;
+            color: any;
+            background: any;
+            font: any;
+            border: string;
+            outline: string;
+        };
+        ':host::part(custom)::placeholder': {
+            color: any;
+            opacity: any;
+        };
+    };
+    constructor();
+    private valueChanged;
+    handleChange: () => void;
+    handleKey: (event: KeyboardEvent) => void;
+    connectedCallback(): void;
+    private get _choices();
+    get isOtherValue(): boolean;
+    render(): void;
+}
+export declare const xinSegmented: ElementCreator<XinSegmented>;
+export {};

package/dist/src/select.d.ts

@@ -0,0 +1,43 @@
+import { Component as WebComponent, ElementCreator } from 'xinjs';
+import { MenuItem } from './menu';
+type OptionRequest = () => Promise<string | undefined>;
+export interface SelectOption {
+    icon?: string | HTMLElement;
+    caption: string;
+    value: string | OptionRequest;
+}
+export interface SelectOptionSubmenu {
+    icon?: string | HTMLElement;
+    caption: string;
+    options: SelectOptions;
+}
+export type SelectOptions = Array<string | null | SelectOption | SelectOptionSubmenu>;
+export declare class XinSelect extends WebComponent {
+    editable: boolean;
+    showIcon: boolean;
+    hideCaption: boolean;
+    options: string | SelectOptions;
+    value: string;
+    placeholder: string;
+    filter: string;
+    localized: boolean;
+    private setValue;
+    private getValue;
+    get selectOptions(): SelectOptions;
+    private buildOptionMenuItem;
+    get optionsMenu(): MenuItem[];
+    handleChange: (event: Event) => void;
+    handleKey: (event: KeyboardEvent) => void;
+    filterMenu: any;
+    popOptions: (event?: Event) => void;
+    content: () => any[];
+    constructor();
+    get allOptions(): SelectOption[];
+    findOption(): SelectOption;
+    localeChanged: () => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): void;
+}
+export declare const xinSelect: ElementCreator<XinSelect>;
+export {};

package/dist/src/side-nav.d.ts

@@ -0,0 +1,36 @@
+import { Component, ElementCreator } from 'xinjs';
+export declare class SideNav extends Component {
+    minSize: number;
+    navSize: number;
+    compact: boolean;
+    content: any[];
+    private _contentVisible;
+    get contentVisible(): boolean;
+    set contentVisible(visible: boolean);
+    static styleSpec: {
+        ':host': {
+            display: string;
+            gridTemplateColumns: string;
+            gridTemplateRows: string;
+            position: string;
+            margin: any;
+            transition: any;
+        };
+        ':host slot': {
+            position: string;
+        };
+        ':host slot:not([name])': {
+            display: string;
+        };
+        ':host slot[name="nav"]': {
+            display: string;
+        };
+    };
+    onResize: () => void;
+    private observer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    constructor();
+    render(): void;
+}
+export declare const sideNav: ElementCreator<SideNav>;

package/dist/src/size-break.d.ts

@@ -0,0 +1,18 @@
+import { Component as WebComponent, ElementCreator } from 'xinjs';
+export declare class SizeBreak extends WebComponent {
+    minWidth: number;
+    minHeight: number;
+    value: 'normal' | 'small';
+    content: any[];
+    static styleSpec: {
+        ':host': {
+            display: string;
+            position: string;
+        };
+    };
+    constructor();
+    onResize: () => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+export declare const sizeBreak: ElementCreator<SizeBreak>;

package/dist/src/sizer.d.ts

@@ -0,0 +1,34 @@
+import { Component as XinComponent, ElementCreator } from 'xinjs';
+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: any;
+        };
+    };
+    content: any;
+    get minSize(): {
+        width: number;
+        height: number;
+    };
+    resizeTarget: (event: Event) => void;
+    connectedCallback(): void;
+}
+export declare const xinSizer: ElementCreator<XinSizer>;