<anura-select adapter="some-adapter" source="123"></anura-select>
A multi-select component with filtering capabilities
required: yes, live: no, default: -
With which adapter to talk to (to load the values from)
<anura-select adapter="#my-adapter"></anura-select>
required: yes, live: on-load, default: -
What metadata field to query in order to get the possible values from. The value type will depend on the adapter that you're using (usually an ID or a UUID)
<anura-select source="123"></anura-select>
required: no, live: yes, default: true
How to handle the search field, possible values:
true
- search field is available, but must be toggled through the search-icon
false
- the search field is not available
visible
- the search field is visible without having to toggle it
<anura-select filter="visible"></anura-select>
required: no, live: on-load, default: false
Whether to use radio buttons (i.e. only allow a single selection) instead of checkboxes
<anura-select radio="true"></anura-select>
required: no, live: set by component, default: -
The value deriving from the inputs (comma-separated). Can be used to set an initial value, but will only be written to by the component afterwards.
<anura-select value="103"></anura-select>
required: no, live: set by component, default: -
The type of field that should be affected. This will be set by your adapter and is specific to the implementation. Don't touch this.
required: no, live: on-change, default: false
Whether the title that is displayed inside the select box should still be visible when values are selected. Given the screenshot above:
false
: "Approval: Released, Pending, New"true
: "Released, Pending, New"<anura-select hide-title="true"></anura-select>
required: no, live: on-load, default:
name-asc
How the options should be sorted, e.g. name-desc
or id-asc
(-asc
is optional/default).
Available keys are name
, id
, value
and order
, but it depends on your DAM if they are present or make sense.
<anura-select sort="name-desc"></anura-select>
required: no, live: on-change, default: -
CELUM only, use a different root node for node-referencing fields (needs to reside beneath the actual root node).
<anura-select root-node="123"></anura-select>
required: no, live: on-change, default: 3
CELUM only, when loading a tree, how many child-levels should be fetched
<anura-select depth="3"></anura-select>
required: no, live: on-change, default: -
CELUM only, when loading a tree, how many parent-levels should be skipped (child-nodes will be merged into one big list)
<anura-select skip-levels="1"></anura-select>
required: no, live: on-change, default: -
Sharedien only, when setting the type to relation
, you need to set the entity type of the relation (in addition to the relation identifier as source)
<anura-select type="relation" value-type="my-entity-type" source="my-relation-type""></anura-select>
required: no, live: on-load, default: true
Set this to false
to disable faceted search for this component.
<anura-select facets="false"></anura-select>
standard change event
Fired when the user selects values in the dropdown
<header part="header">
<span part="header-title"></span>
<span part="header-value"></span>
<button part="select-button header-clear">
<anura-icon part="header-icon header-icon-clear"></anura-icon>
</button>
<button part="select-button header-toggle">
<anura-icon part="header-icon header-icon-toggle"></anura-icon>
</button>
</header>
<fieldset part="fieldset">
<div part="fieldset-title">
<label part="fieldset-label"></label>
<span part="fieldset-counter"></span>
<button part="fieldset-reset"></button>
<button part="select-button fieldset-filter">
<anura-icon part="select-icon select-icon-search"></anura-icon>
</button>
<button part="select-button fieldset-close" id="fieldset-close" tabindex="1">
<anura-icon part="select-icon select-icon-close" icon="x"></anura-icon>
</button>
</div>
<input part="fieldset-search">
<div part="fieldset-body">
<label part="select-label">
<input part="select-input">
<span part="select-name"></span>
<span part="select-count"></span>
</label>
<!-- labels repeat here -->
</div>
</fieldset>