[MINITOC]

## Foreword

The following CSS variables can be declared globally and are used my multiple components:

* `--button-color` - The color of buttons
* `--button-font-color` - The font color of buttons
* `--selected-color`- Color to indicate selected status (e.g. checkbox)
* `--border-color`- Color of borders (e.g. in anura-asset, anura-searchbar)
* `--counter-color` - Color for counters (anura-tree, anura-select)
* `--sidebar-width` - Width of sidebars (and `--sidebar-height` respectively when in portrait mode)

## Navigation

Navigation components provide various methods to restrict the scope of displayed assets. In the end they all behave like an input element (e.g. they have a *value* and emit *change* events).

* [anura-searchbar](./searchbar)
* [anura-select](./select)
* [anura-date](./date)
* [anura-text](./text)
* [anura-tree](./tree)

## Main Views

Main views display the assets, given scope defined by 1-n navigation components.

* [anura-gallery](./gallery)
  * [anura-asset](./asset)
* anura-table
  * anura-col
* Supporting elements
  * [anura-paginator](./paginator)
  * [anura-lightbox](./lightbox)
    * [anura-details](./details)
  * [anura-basket](./basket)

## Ancillary Components

### anura-icon

A wrapper around the wonderful [feathericons.com](https://feathericons.com/) by @colebemis

#### Attributes

##### icon

> **required: yes**, live: yes, default: -

Which icon from the feathericon set you with to display, e.g. `folder`.

##### toggle-icon

> required: no, live: yes, default: -

Alternative icon to switch to when the component receives the `toggled` attribute

##### toggled

> required: no, live: yes, default: not

Whether to switch to the toggled state, e.g. `<anura-icon icon="square" toggle-icon="check-square" toggled>`

##### loading

>  required: no, live: yes, default: not

Whether to switch to a loading animation, e.g.  `<anura-icon icon="book" loading>`

### anura-counter

Tiny component to show the number of assets that a given main view has to offer (regardless of pagination).

![Screenshot of anura-countert](anura-counter.png)

If you want to adjust the wording, the translation keys are `resultCount0`, `resultCount1` and `resultCountN` (this one takes a `{count}`).

#### Attributes

##### parent

> **required: yes**, live: yes, default: -

The parent component to listen to, e.g. `anura-gallery`

##### number-only

> required: no, live: yes, default: false

Set this to `true` to exclusively show the count, without any surrounding text.

##### count-selected

> required: no, live: yes, default: true

When using the [checkbox](asset/#buttons) feature on assets, also show how many assets are currently selected.

E.g.: "Found 1337 assets, 3 selected"

##### multi-select

> required: no, live: on-change, default: none

When using `count-selected`, offer buttons to select all or none

##### basket

> required: no, live: yes, default: -

When using `count-selected`, set the basket and offer a button to add all them - needs to be querySelect-able.

#### Slots

* **prefix** - content that should appear before the count
* **suffix** - content that should appear after the count

#### Parts

```html
<span part="counter-count"></span>
<span part="counter-select"></span>
```

### anura-injector

Extremely basic component that appends the content of its default slot to the specified target. This is useful when you don't have control over the entire layout of the page that you are using Anura in, e.g. some CMS may only allow you to add content in the main part, but you may want to add something to the sidebar.

#### Attributes

##### target

> **required: yes**, live: yes, default: -

Selector for the injection target, e.g. `#sidebar`.

#### Slots

The unnamed default slot.

#### Example

```html
<anura-injector target="#sidebar">
  <anura-searchbar adapter="some-adapter"></anura-searchbar>
  <anura-select adapter="some-adapter" source="produktkategorie"></anura-select>
  <anura-select adapter="some-adapter" source="Content-Type"></anura-select>
  <anura-select adapter="some-adapter" source="verwendungszweck"></anura-select>
</anura-injector>
```