## class: `WyFilesHeader`, `wy-files-header`

Header toolbar for the files view — actions for uploading, sorting, view options and notifications.

**Used sub components:**

*   [`<wy-button>`](./ui/wy-button)
*   [`<wy-dropdown>`](./ui/wy-dropdown)
*   [`<wy-icon>`](./ui/wy-icon)
*   [`<wy-progress-circular>`](./ui/wy-progress-circular)
*   [`<wy-overlay>`](./ui/wy-overlay)
*   [`<wy-container>`](./ui/wy-container)
*   [`<wy-file-item>`](./wy-file-item)
*   [`<wy-cloud-files>`](./wy-cloud-files)
*   [`<wy-context-data-progress>`](./wy-context-data)

### Fields

| Name          | Type                       | Default                             | Description                                                     | Inherited From        |
| ------------- | -------------------------- | ----------------------------------- | --------------------------------------------------------------- | --------------------- |
| `order`       | `FileOrderType`            | `{ by: "name", descending: false }` | Active sort order for the list.                                 |                       |
| `view`        | `"grid" \| "list"`         | `"list"`                            | Active layout for rendering files.                              |                       |
| `showTrashed` | `boolean`                  | `false`                             | Show trashed files when enabled.                                |                       |
| `app`         | `AppType \| undefined`     |                                     | The app data.                                                   | WeavySubAppComponent  |
| `apps`        | `AppListType \| undefined` |                                     | Multiple apps data.                                             | WeavySubAppComponent  |
| `link`        | `LinkType \| undefined`    |                                     | Any provided link that should be loaded, shown and highlighted. | WeavySubTypeComponent |

### Methods

| Name        | Description                                          | Parameters | Return                       | Inherited From        |
| ----------- | ---------------------------------------------------- | ---------- | ---------------------------- | --------------------- |
| `whenApp`   | Resolves when app data is available.                 |            | `Promise<AppType>`           | WeavySubAppComponent  |
| `whenApps`  | Resolves when multiple app data is available.        |            | `Promise<AppListType>`       | WeavySubAppComponent  |
| `whenLink`  | Resolves when a provided link is available.          |            | `Promise<LinkType>`          | WeavySubTypeComponent |
| `whenReady` | Resolves when the component has rendered first time. |            | `Promise<WeavySubComponent>` | WeavySubComponent     |

### Events

| Name             | Type                            | Description                                                     | Inherited From    |
| ---------------- | ------------------------------- | --------------------------------------------------------------- | ----------------- |
| `upload-files`   | `UploadFilesEventType`          | Emitted when files are selected for upload.                     |                   |
| `external-blobs` | `ExternalBlobsEventType`        | Emitted when external cloud blobs are selected.                 |                   |
| `create-files`   | `CreateFilesEventType`          | Emitted to create files programmatically.                       |                   |
| `order`          | `OrderEventType<FileOrderType>` | Emitted when the user changes sort order.                       |                   |
| `view`           | `ViewEventType<FileViewType>`   | Emitted when the user changes the view mode (list/grid).        |                   |
| `show-trashed`   | `ShowTrashedEventType`          | Emitted when the show/hide trashed toggle is changed.           |                   |
| `subscribe`      | `SubscribeEventType`            | Emitted when the app subscribe/unsubscribe action is triggered. |                   |
| `ready`          | `CustomEvent`                   | When the component has rendered.                                | WeavySubComponent |

### Attributes

| Name          | Field       | Inherited From |
| ------------- | ----------- | -------------- |
| `order`       | order       |                |
| `view`        | view        |                |
| `showTrashed` | showTrashed |                |

### CSS Parts

| Name                      | Description                          |
| ------------------------- | ------------------------------------ |
| `wy-files-header`         | Root header container                |
| `wy-header`               | Header area                          |
| `wy-header-outer`         | Outer styling for header area.       |
| `wy-files-header-toolbar` | Toolbar in the header                |
| `wy-toolbar`              | Toolbar container for header actions |
| `wy-toolbar-buttons`      | Group for toolbar buttons            |
| `wy-toolbar-buttons-last` | Right aligned toolbar button group   |

### Slots

| Name      | Description                    |
| --------- | ------------------------------ |
| `actions` | Buttons placed in the toolbar. |

<details><summary>Private API</summary>

### Fields

| Name                        | Privacy | Type                                                               | Default                                                                               | Description | Inherited From        |
| --------------------------- | ------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------- | ----------- | --------------------- |
| `#resolveApp`               | private | `(app: AppType) => void \| undefined`                              |                                                                                       |             | WeavySubAppComponent  |
| `#whenApp`                  | private |                                                                    | `new Promise<AppType>((r) => { this.#resolveApp = r; })`                              |             | WeavySubAppComponent  |
| `#resolveApps`              | private | `(apps: AppListType) => void \| undefined`                         |                                                                                       |             | WeavySubAppComponent  |
| `#whenApps`                 | private |                                                                    | `new Promise<AppListType>((r) => { this.#resolveApps = r; })`                         |             | WeavySubAppComponent  |
| `#resolveContextDataBlobs`  | private | `(blobs: ContextDataBlobsType) => void \| undefined`               |                                                                                       |             | WeavySubTypeComponent |
| `#whenContextDataBlobs`     | private |                                                                    | `new Promise<ContextDataBlobsType>((r) => { this.#resolveContextDataBlobs = r; })`    |             | WeavySubTypeComponent |
| `#resolveComponentFeatures` | private | `(componentFeatures: ComponentFeaturePolicy) => void \| undefined` |                                                                                       |             | WeavySubTypeComponent |
| `#whenComponentFeatures`    | private |                                                                    | `new Promise<ComponentFeaturePolicy>((r) => { this.#resolveComponentFeatures = r; })` |             | WeavySubTypeComponent |
| `#resolveLink`              | private | `(link: LinkType) => void \| undefined`                            |                                                                                       |             | WeavySubTypeComponent |
| `#whenLink`                 | private |                                                                    | `new Promise<LinkType>((r) => { this.#resolveLink = r; })`                            |             | WeavySubTypeComponent |
| `#resolveSettings`          | private | `(settings: WeavyComponentSettingsType) => void \| undefined`      |                                                                                       |             | WeavySubTypeComponent |
| `#whenSettings`             | private |                                                                    | `new Promise<WeavyComponentSettingsType>((r) => { this.#resolveSettings = r; })`      |             | WeavySubTypeComponent |
| `#resolveContextId`         | private | `(contextId: ContextIdType) => void \| undefined`                  |                                                                                       |             | WeavySubComponent     |
| `#whenContextId`            | private |                                                                    | `new Promise<ContextIdType>((r) => { this.#resolveContextId = r; })`                  |             | WeavySubComponent     |
| `#resolveUser`              | private | `(user: UserType) => void \| undefined`                            |                                                                                       |             | WeavySubComponent     |
| `#whenUser`                 | private |                                                                    | `new Promise<UserType>((r) => { this.#resolveUser = r; })`                            |             | WeavySubComponent     |
| `#resolveWeavy`             | private | `(weavy: WeavyType) => void \| undefined`                          |                                                                                       |             | WeavySubComponent     |
| `#whenWeavy`                | private |                                                                    | `new Promise<WeavyType>((r) => { this.#resolveWeavy = r; })`                          |             | WeavySubComponent     |
| `#resolveReady`             | private | `(component: WeavySubComponent) => void \| undefined`              |                                                                                       |             | WeavySubComponent     |
| `#whenReady`                | private |                                                                    | `new Promise<WeavySubComponent>((r) => { this.#resolveReady = r; })`                  |             | WeavySubComponent     |

### Methods

| Name                  | Privacy   | Description                                                 | Parameters                                                                               | Return | Inherited From |
| --------------------- | --------- | ----------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------ | -------------- |
| `dispatchUploadFiles` | protected | Dispatch an \`upload-files\` event with the selected files. | `files: FileList \| null`                                                                |        |                |
| `renderFileMutation`  | private   |                                                             | `mutation: MutationState<BlobType \| FileType, Error, unknown, FileMutationContextType>` |        |                |

</details>

<hr/>

## Exports

| Kind                        | Name              | Declaration   | Module                            | Package |
| --------------------------- | ----------------- | ------------- | --------------------------------- | ------- |
| `js`                        | `WyFilesHeader`   | WyFilesHeader | lib/components/wy-files-header.ts |         |
| `custom-element-definition` | `wy-files-header` | WyFilesHeader | lib/components/wy-files-header.ts |         |
