# Directory Viewer

Table of Contents

###### Examples

Basic Usage

###### JavaScript Reference

Constructor
Requirements
Attributes
Properties
Methods

### Basic Usage

Create a directory viewer using the `k-directory-viewer` component. Load a directory by calling the `loadDirectory()` method.

    <k-directory-viewer id="dv1"></k-directory-viewer>
    <script type="module">
      import DirectoryViewer from '/kempo/components/DirectoryViewer.js';
      document.getElementById('dv1').loadDirectory();
    </script>

## JavaScript Reference

### Constructor

###### Extends Component

##### `new DirectoryViewer(handle)`

#### Parameters

##### `handle: FileSystemDirectoryHandle`

The handle to the directory.

### Requirements

- Component

### Attributes

##### `hasHandle: boolean`

Whether the directory viewer has a handle.

##### `selected: boolean`

Whether the directory viewer is selected.

### Properties

##### `handle: FileSystemDirectoryHandle`

The handle to the directory.

##### `filters: Array`

An array of filters applied to the directory viewer.

### Methods

##### `loadDirectory(): Promise`

Loads a directory using the file picker API.

##### `clearDirectoryHandle(): void`

Clears the directory handle.

##### `updateContents(): void`

Updates the contents of the directory viewer.

##### `select(): void`

Selects the directory viewer.

##### `addFilter(filter): void`

Adds a filter to the directory viewer.