Skip to main content


The @supplies decorator is used to mark a Collection.Provider property of a NodeBlock as the list of possible values for a certain slot. For example, let's say you have a dropdown block with a collection that contains all the possible dropdown options and a single slot that holds the selected option for the dropdown. This decorator tells Tripetto the collection of options is the supply of possible values for the slot.


The @supplies decorator helps the builder to understand the possible values that a certain slot can contain. Some blocks, like the calculator block make use of that to optimize the user experience.

Decorator type

Property ℹ️

Applies to

Decorator signature

type: "#slots",
reference: string,
sole?: boolean | string,
condition?: string

Decorator parameters

type"#slots"NoSpecifies this is a supply for a slot (that's currently the only supported type).
referencestringNoSpecifies the reference of the slot. You can use a wildcard (using an asterisk) to reference multiple slots (for example, slot-*).
soleboolean | stringYesSpecifies if the collection is the sole values supplier (true by default). For example, if your slot is used for a fixed dropdown list and the dropdown options are supplied by the collection, that collection is the sole supplier of values for the slot. If your slot is used for a text field with autocomplete suggestions and the collection is the supplier for the possible suggestions, the collection is not a sole supplier, because the user can also specify another value that is not in the collection list. It is also possible to supply the property name of a boolean value of the node block to dynamically specify if the supply is the sole supplier or not.
conditionstringYesSpecifies the property name of a boolean value of the node block that specifies if the supply is enabled or not.


import { tripetto, supplies, slots, Collection, NodeBlock } from "@tripetto/builder";

type: "node",
identifier: "dropdown",
label: "Dropdown",
icon: "data:image/svg+xml;base64,PHN2ZyAvPg=="
class Dropdown extends NodeBlock {
// Let's bind the options as a value supply to the slot with reference `option`
// The builder now understands that the possible values of the slot with
// reference `option` comes from the collection of dropdown options.
@supplies<Dropdown>("#slot", "option")
options = Collection.of<DropdownOption, Dropdown>(DropdownOption, this);

onSlots(): void {
type: Slots.String,
reference: "option",
label: "Selected option"