Interface Options<Component, ContextExternal>

Options for SvelteApp including the svelte property which defines the Svelte component to load as the "application shell".

Note: Unlike standard Svelte component loading, any context provided is loaded as additional data into the #external context key along with data such as the outer application instance reference. This allows one to extend the SvelteApp.Context.External interface with additional data that you are loading and use one type to conveniently retrieve all external context data inside a Svelte component.

Note that the svelte configuration includes dynamic options to define context and props as a function as well as an object. There are times when the context and prop data to load needs to come from data associated with the instance of the application. When defining the configuration from the overloaded static accessor SvelteApp.defaultOptions you may use a standard function IE function() {} for context or props. When SvelteApp loads the component, these functions will be invoked with the this reference of the actual instance allowing association of instance data from within a static context.

interface Options<
    Component extends SvelteComponent = SvelteComponent,
    ContextExternal extends AbstractExternal = AbstractExternal,
> {
    alwaysOnTop?: boolean;
    baseApplication?: string;
    classes?: string[];
    containerQueryType?: string;
    defaultCloseAnimation?: boolean;
    dragDrop?: {
        callbacks?: {
            dragover?: Function;
            dragstart?: Function;
            drop?: Function;
        };
        dragSelector?: string;
        dropSelector?: string;
    }[];
    draggable?: boolean;
    filters?: SearchFilterConfiguration[];
    focusAuto?: boolean;
    focusKeep?: boolean;
    focusSource?: A11yFocusSource;
    focusTrap?: boolean;
    headerButtonNoClose?: boolean;
    headerButtonNoLabel?: boolean;
    headerIcon?: string;
    headerNoTitleMinimized?: boolean;
    height?: string
    | number;
    id?: string;
    left?: string | number;
    maxHeight?: string | number;
    maxWidth?: string | number;
    minHeight?: string | number;
    minimizable?: boolean;
    minWidth?: string | number;
    popOut?: boolean;
    positionable?: boolean;
    positionInitial?: InitialSystem;
    positionOrtho?: boolean;
    positionValidator?: ValidatorOption;
    resizable?: boolean;
    rotateX?: string | number;
    rotateY?: string | number;
    rotateZ?: string | number;
    rotation?: string | number;
    scale?: number;
    scrollY?: string[];
    sessionStorage?: WebStorage;
    svelte: Dynamic<
        Component,
        {
            ContextOmit: "application"
            | "elementRootUpdate"
            | "sessionStorage";
            ContextShape: ContextExternal;
            PropsOmit: "elementRoot" | "elementContent" | "elementTarget";
        },
    >;
    tabs?: TabsConfiguration[];
    template?: string;
    themeName?: string;
    title?: string;
    top?: string
    | number;
    transformOrigin?: TransformOrigin;
    width?: string | number;
}

Type Parameters

Hierarchy
Index

Properties

alwaysOnTop? baseApplication? classes? containerQueryType? defaultCloseAnimation? dragDrop? draggable? filters? focusAuto? focusKeep? focusSource? focusTrap? headerButtonNoClose? headerButtonNoLabel? headerIcon? headerNoTitleMinimized? height? id? left? maxHeight? maxWidth? minHeight? minimizable? minWidth? popOut? positionable? positionInitial? positionOrtho? positionValidator? resizable? rotateX? rotateY? rotateZ? rotation? scale? scrollY? sessionStorage? svelte tabs? template? themeName? title? top? transformOrigin? width?

Properties

alwaysOnTop?: boolean

If true, then application shells are always on top.

false

baseApplication?: string

A named "base application" which generates an additional hook

classes?: string[]

An array of CSS string classes to apply to the rendered HTML

containerQueryType?: string

Defines the app window content container query type. The default container type is inline-size allowing size queries for width. The other valid option is size which allows width and height queries.

inline-size

defaultCloseAnimation?: boolean

If false, the default slide close animation is not run.

true

dragDrop?: {
    callbacks?: {
        dragover?: Function;
        dragstart?: Function;
        drop?: Function;
    };
    dragSelector?: string;
    dropSelector?: string;
}[]
draggable?: boolean

If true, then application shells are draggable.

true

filters?: SearchFilterConfiguration[]

filters An array of SearchFilter configuration objects.

focusAuto?: boolean

When true, auto-management of app focus is enabled.

true

focusKeep?: boolean

When focusAuto and focusKeep is true; keeps internal focus.

false

focusSource?: A11yFocusSource

Defines A11yHelper focus source to apply when the application closes.

@defaultValue: undefined

focusTrap?: boolean

When true focus trapping / wrapping is enabled keeping focus inside app.

true

headerButtonNoClose?: boolean

If true, then the close header button is removed.

false

headerButtonNoLabel?: boolean

If true, then the header button labels are removed.

false

headerIcon?: string

Sets a header icon given an image URL.

undefined

headerNoTitleMinimized?: boolean

If true, then the header title is hidden when minimized.

false

height?: string | number

The default pixel height for app; may use percentage.

When defined as a string see TJSPosition.API.Data.TJSPositionDataRelative for relative values supported.

null

id?: string

The default CSS id to assign to the rendered HTML

left?: string | number

The default left offset position for app; may use percentage.

When defined as a string see TJSPosition.API.Data.TJSPositionDataRelative for relative values supported.

null

maxHeight?: string | number

Assigned to position. Number specifying maximum window height.

When defined as a string see TJSPosition.API.Data.TJSPositionDataRelative for relative values supported.

null

maxWidth?: string | number

Assigned to position. Number specifying maximum window width.

When defined as a string see TJSPosition.API.Data.TJSPositionDataRelative for relative values supported.

null

minHeight?: string | number

Assigned to position. Number specifying minimum window height.

When defined as a string see TJSPosition.API.Data.TJSPositionDataRelative for relative values supported.

50

minimizable?: boolean

Whether the rendered application can be minimized (popOut only)

minWidth?: string | number

Assigned to position. Number specifying minimum window width.

When defined as a string see TJSPosition.API.Data.TJSPositionDataRelative for relative values supported.

200

popOut?: boolean

Whether to display the application as a pop-out container

positionable?: boolean

If false, then position.set does not take effect.

true

positionInitial?: InitialSystem

A helper for initial position placement.

TJSPosition.Initial.browserCentered

positionOrtho?: boolean

When true, TJSPosition is optimized for orthographic use.

true

positionValidator?: ValidatorOption

A validator function or data or list of validators.

TJSPosition.Validators.transformWindow

resizable?: boolean

Whether the rendered application can be drag-resized (popOut only)

rotateX?: string | number

Assigned to position. Number specifying the window rotation around the X-axis in degrees.

When defined as a string see TJSPosition.API.Data.TJSPositionDataRelative for values supported.

null

rotateY?: string | number

Assigned to position. Number specifying the window rotation around the Y-axis in degrees.

When defined as a string see TJSPosition.API.Data.TJSPositionDataRelative for values supported.

null

rotateZ?: string | number

Assigned to position. Number specifying the window rotation around the Z-axis in degrees.

When defined as a string see TJSPosition.API.Data.TJSPositionDataRelative for values supported.

null

rotation?: string | number

Assigned to position. Number specifying the window rotation around the Z-axis in degrees. Alias for rotateZ.

When defined as a string see TJSPosition.API.Data.TJSPositionDataRelative for values supported.

null

scale?: number

A transformation scale for the rendered HTML

scrollY?: string[]

A list of unique CSS selectors which target containers that should have their vertical scroll positions preserved during a re-render.

sessionStorage?: WebStorage

An instance of WebStorage (session) to share across SvelteApps. This is only required to share a WebStorage instance across multiple SvelteApps. By default, a unique #runtime/svelte/store/web-storage!TJSSessionStorage instance is created per SvelteApp.

TJSSessionStorage

svelte: Dynamic<
    Component,
    {
        ContextOmit: "application"
        | "elementRootUpdate"
        | "sessionStorage";
        ContextShape: ContextExternal;
        PropsOmit: "elementRoot" | "elementContent" | "elementTarget";
    },
>

A Svelte configuration object defining the main component loaded.

Note: that svelte.class is required; this is due to type inference requirements by TypeScript.

tabs?: TabsConfiguration[]

Track Tab navigation handlers which are active for this Application

template?: string

The default HTML template path to render for this Application

themeName?: string

An explicit theme name to apply to the application shell. Presently valid options are dark or light. If not explicit theme is provided the current core platform theme is applied.

title?: string

A default window title string (popOut only)

top?: string | number

The default top offset position for app; may use percentage.

When defined as a string see TJSPosition.API.Data.TJSPositionDataRelative for relative values supported.

null

transformOrigin?: TransformOrigin

By default, 'top / left' respects rotation when minimizing.

'top left'

width?: string | number

The default pixel height for app; may use percentage.

When defined as a string see TJSPosition.API.Data.TJSPositionDataRelative for relative values supported.

null

Settings

Member Visibility

On This Page

Properties