Class TJSApplicationShell

Provides an alternate application shell that is scoped by slightly different CSS classes than ApplicationShell. An application shell is a main top level slotted component that provides a reactive outer wrapper and header bar for the main content component.

Container queries (inline-size) are supported for width queries. The main app window container is named tjs-app-window and the window content container is tjs-app-content. Take note that the width available is the inline-size width of the app window or content minus the border constraints. Container queries will be disabled if the width app option is auto or not an explicit constraint. Just a precautionary warning that If you set width to auto during runtime unexpected behavior or a collapse of the app window will occur which is to be expected.

CSS variables

'--tjs-app-background': Controls the app background image; set in main `index.js`.

Hierarchy

SvelteComponent<
    {
        appOffsetHeight?: boolean;
        appOffsetWidth?: boolean;
        contentHeight?: boolean;
        contentOffsetHeight?: boolean;
        contentOffsetWidth?: boolean;
        contentWidth?: boolean;
        draggable?: any;
        draggableOptions?: any;
        elementContent?: HTMLElement;
        elementRoot?: HTMLElement;
        inTransition?: () => undefined;
        inTransitionOptions?: {};
        outTransition?: () => undefined;
        outTransitionOptions?: {};
        padToVisualEdge?: VisualEdgeSides;
        scrollContainer?: boolean | TJSScrollContainerData;
        stylesApp?: any;
        stylesContent?: any;
        transition?: () => undefined;
        transitionOptions?: any;
    },
    { [evt: string]: CustomEvent<any> },
    { default: {} },
>
- TJSApplicationShell (View Summary)

Indexable

[prop: string]: any

Constructors

constructor

new TJSApplicationShell(
    options: ComponentConstructorOptions<
        {
            appOffsetHeight?: boolean;
            appOffsetWidth?: boolean;
            contentHeight?: boolean;
            contentOffsetHeight?: boolean;
            contentOffsetWidth?: boolean;
            contentWidth?: boolean;
            draggable?: any;
            draggableOptions?: any;
            elementContent?: HTMLElement;
            elementRoot?: HTMLElement;
            inTransition?: () => undefined;
            inTransitionOptions?: {};
            outTransition?: () => undefined;
            outTransitionOptions?: {};
            padToVisualEdge?: VisualEdgeSides;
            scrollContainer?: boolean | TJSScrollContainerData;
            stylesApp?: any;
            stylesContent?: any;
            transition?: () => undefined;
            transitionOptions?: any;
        },
    >,
): TJSApplicationShell
Parameters
- options: ComponentConstructorOptions<
      {
          appOffsetHeight?: boolean;
          appOffsetWidth?: boolean;
          contentHeight?: boolean;
          contentOffsetHeight?: boolean;
          contentOffsetWidth?: boolean;
          contentWidth?: boolean;
          draggable?: any;
          draggableOptions?: any;
          elementContent?: HTMLElement;
          elementRoot?: HTMLElement;
          inTransition?: () => undefined;
          inTransitionOptions?: {};
          outTransition?: () => undefined;
          outTransitionOptions?: {};
          padToVisualEdge?: VisualEdgeSides;
          scrollContainer?: boolean | TJSScrollContainerData;
          stylesApp?: any;
          stylesContent?: any;
          transition?: () => undefined;
          transitionOptions?: any;
      },
  >
Returns TJSApplicationShell

Inherited from SvelteComponent.constructor

Accessors

appOffsetHeight

get appOffsetHeight(): boolean

Getter for appOffsetHeight prop.

Returns boolean
set appOffsetHeight(_: boolean): void
Setter for appOffsetHeight prop.
Parameters
- _: boolean
Returns void

appOffsetWidth

get appOffsetWidth(): boolean

Getter for appOffsetWidth prop.

Returns boolean
set appOffsetWidth(_: boolean): void
Setter for appOffsetWidth prop.
Parameters
- _: boolean
Returns void

contentHeight

get contentHeight(): boolean

Getter for contentHeight prop.

Returns boolean
set contentHeight(_: boolean): void
Setter for contentHeight prop.
Parameters
- _: boolean
Returns void

contentOffsetHeight

get contentOffsetHeight(): boolean

Getter for contentOffsetHeight prop.

Returns boolean
set contentOffsetHeight(_: boolean): void
Setter for contentOffsetHeight prop.
Parameters
- _: boolean
Returns void

contentOffsetWidth

get contentOffsetWidth(): boolean

Getter for contentOffsetWidth prop.

Returns boolean
set contentOffsetWidth(_: boolean): void
Setter for contentOffsetWidth prop.
Parameters
- _: boolean
Returns void

contentWidth

get contentWidth(): boolean

Getter for contentWidth prop.

Returns boolean
set contentWidth(_: boolean): void
Setter for contentWidth prop.
Parameters
- _: boolean
Returns void

draggable

get draggable(): any

Getter for draggable prop.

Returns any
set draggable(_: any): void
Setter for draggable prop.
Parameters
- _: any
Returns void

draggableOptions

get draggableOptions(): any

Getter for draggableOptions prop.

Returns any
set draggableOptions(_: any): void
Setter for draggableOptions prop.
Parameters
- _: any
Returns void

elementContent

get elementContent(): HTMLElement

Getter for elementContent prop.

Returns HTMLElement
set elementContent(_: HTMLElement): void
Setter for elementContent prop.
Parameters
- _: HTMLElement
Returns void

elementRoot

get elementRoot(): HTMLElement

Getter for elementRoot prop.

Returns HTMLElement
set elementRoot(_: HTMLElement): void
Setter for elementRoot prop.
Parameters
- _: HTMLElement
Returns void

inTransition

get inTransition(): () => undefined

Getter for inTransition prop.

Returns () => undefined
set inTransition(_: () => undefined): void
Setter for inTransition prop.
Parameters
- _: () => undefined
Returns void

inTransitionOptions

get inTransitionOptions(): {}

Getter for inTransitionOptions prop.

Returns {}
set inTransitionOptions(_: {}): void
Setter for inTransitionOptions prop.
Parameters
- _: {}
Returns void

outTransition

get outTransition(): () => undefined

Getter for outTransition prop.

Returns () => undefined
set outTransition(_: () => undefined): void
Setter for outTransition prop.
Parameters
- _: () => undefined
Returns void

outTransitionOptions

get outTransitionOptions(): {}

Getter for outTransitionOptions prop.

Returns {}
set outTransitionOptions(_: {}): void
Setter for outTransitionOptions prop.
Parameters
- _: {}
Returns void

padToVisualEdge

get padToVisualEdge(): VisualEdgeSides

Getter for padToVisualEdge prop.

Returns VisualEdgeSides
set padToVisualEdge(_: VisualEdgeSides): void
Setter for padToVisualEdge prop.
Parameters
- _: VisualEdgeSides
Returns void

scrollContainer

get scrollContainer(): boolean | TJSScrollContainerData

Getter for scrollContainer prop.

Returns boolean | TJSScrollContainerData
set scrollContainer(_: boolean | TJSScrollContainerData): void
Setter for scrollContainer prop.
Parameters
- _: boolean | TJSScrollContainerData
Returns void

stylesApp

get stylesApp(): any

Getter for stylesApp prop.

Returns any
set stylesApp(_: any): void
Setter for stylesApp prop.
Parameters
- _: any
Returns void

stylesContent

get stylesContent(): any

Getter for stylesContent prop.

Returns any
set stylesContent(_: any): void
Setter for stylesContent prop.
Parameters
- _: any
Returns void

transition

get transition(): () => undefined

Getter for transition prop.

Returns () => undefined
set transition(_: () => undefined): void
Setter for transition prop.
Parameters
- _: () => undefined
Returns void

transitionOptions

get transitionOptions(): any

Getter for transitionOptions prop.

Returns any
set transitionOptions(_: any): void
Setter for transitionOptions prop.
Parameters
- _: any
Returns void

Methods

$destroy

$destroy(): void

Returns void

Inherited from SvelteComponent.$destroy

$on

$on<K extends string>(
type: K,
callback: (e: CustomEvent<any>) => void,
): () => void
Type Parameters
- K extends string
Parameters
- type: K
- callback: (e: CustomEvent<any>) => void
Returns () => void

Inherited from SvelteComponent.$on

$set

$set(props: Partial<Props>): void
Parameters
- props: Partial<Props>
Returns void

Inherited from SvelteComponent.$set

Class TJSApplicationShell

CSS variables

Hierarchy

Indexable

Index

Constructors

Accessors

Methods

Constructors

constructor

Parameters

Returns TJSApplicationShell

Accessors

appOffsetHeight

Returns boolean

Parameters

Returns void

appOffsetWidth

Returns boolean

Parameters

Returns void

contentHeight

Returns boolean

Parameters

Returns void

contentOffsetHeight

Returns boolean

Parameters

Returns void

contentOffsetWidth

Returns boolean

Parameters

Returns void

contentWidth

Returns boolean

Parameters

Returns void

draggable

Returns any

Parameters

Returns void

draggableOptions

Returns any

Parameters

Returns void

elementContent

Returns HTMLElement

Parameters

Returns void

elementRoot

Returns HTMLElement

Parameters

Returns void

inTransition

Returns () => undefined

Parameters

Returns void

inTransitionOptions

Returns {}

Parameters

Returns void

outTransition

Returns () => undefined

Parameters

Returns void

outTransitionOptions

Returns {}

Parameters

Returns void

padToVisualEdge

Returns VisualEdgeSides

Parameters

Returns void

scrollContainer

Returns boolean | TJSScrollContainerData

Parameters

Returns void

stylesApp

Returns any

Parameters