# presentation/components/shell.component.ts

> 55 lines of code and 13 definitions.

Tree: Site tree
Language: typescript
Layer: product
Canonical: https://banes-lab.com/anatomy/tree#file-presentation-components-shell-component-ts
Source text: https://banes-lab.com/source/tree/presentation/components/shell.component.ts.txt

Listed in [presentation/components](https://banes-lab.com/api/source/tree/presentation/components.md), after [presentation/components/search.component.ts](https://banes-lab.com/source/tree/presentation/components/search.component.ts.md) and before [presentation/components/source.component.ts](https://banes-lab.com/source/tree/presentation/components/source.component.ts.md).

## Definitions

- `constructor` (method_definition, line 20, exported)
- `ShellPane` (class_declaration, line 15, exported)
- `body` (public_field_definition, line 17, exported)
- `typing` (public_field_definition, line 18, exported)
- `clear` (method_definition, line 30, exported)
- `prompt` (method_definition, line 35, exported)
- `type` (method_definition, line 39, exported)
- `typed` (method_definition, line 45, exported)
- `resume` (method_definition, line 50, exported)
- `append` (method_definition, line 54, exported)
- `line` (method_definition, line 58, exported)
- `className` (lexical_declaration, line 59, exported)
- `element` (lexical_declaration, line 60, exported)

## Uses

- [core/factories/element.factory.ts](https://banes-lab.com/source/tree/core/factories/element.factory.ts.md)
- [core/registries/style.registry.ts](https://banes-lab.com/source/tree/core/registries/style.registry.ts.md)

## Source

```typescript
import {
    COMMAND_MARK,
    SHELL_ROWS,
    SURFACE_LINE_CLASS,
    SURFACE_PANE_CLASS,
    SURFACE_RESUMED_CLASS,
    SURFACE_SHELL_CLASS,
    SURFACE_SHELL_ROWS_PROPERTY,
    SURFACE_TYPING_CLASS,
} from "#configuration/constants/surface.constants";
import { COMMAND_PANE_LABEL } from "#configuration/strings/surface.strings";
import { createElement } from "#core/factories/element.factory";
import { declareStyle } from "#core/registries/style.registry";

export class ShellPane {
    public readonly element: HTMLElement;
    private readonly body: HTMLElement;
    private typing: HTMLElement | null = null;

    public constructor() {
        this.body = createElement("code");
        this.element = createElement("section", {
            attributes: { "aria-label": COMMAND_PANE_LABEL },
            children: [createElement("pre", { children: [this.body] })],
            className: `${SURFACE_PANE_CLASS} ${SURFACE_SHELL_CLASS}`,
        });
        declareStyle(this.element, SURFACE_SHELL_ROWS_PROPERTY, String(SHELL_ROWS));
    }

    public clear(): void {
        this.typing = null;
        this.body.replaceChildren();
    }

    public prompt(): void {
        this.typing = this.line(COMMAND_MARK, SURFACE_TYPING_CLASS);
    }

    public type(command: string): void {
        if (this.typing !== null) {
            this.typing.textContent = COMMAND_MARK + command;
        }
    }

    public typed(): void {
        this.typing?.classList.remove(SURFACE_TYPING_CLASS);
        this.typing = null;
    }

    public resume(command: string): void {
        this.line(COMMAND_MARK + command, SURFACE_RESUMED_CLASS);
    }

    public append(text: string): void {
        this.line(text, null);
    }

    private line(text: string, modifier: string | null): HTMLElement {
        const className = modifier === null ? SURFACE_LINE_CLASS : `${SURFACE_LINE_CLASS} ${modifier}`;
        const element = createElement("span", { className, text });
        this.body.append(element);
        return element;
    }
}
```