Tagify - tags input component

Transforms an input field or a textarea into a Tags component, in an easy, customizable way,
with great performance and small code footprint, exploded with features.


Vanilla ⚡ React ⚡ Vue ⚡ Angular

👉 See Demos 👈

Table of Contents

- Table of Contents
- Installation
- Option 1 - import from CDN:
- option 2 - import as a Node module:
- Usage (in your bundle):
- Features
- Building the project
- Adding tags dynamically
- Output value
- Modify original input value format
- Ajax whitelist
- Persisted data
- Edit tags
- Validations
- Drag & Sort
- Integration example:
- DOM Templates
- Example of overriding the tag template:
- Suggestions list
- Example for a suggestion item alias
- Example whitelist:
- Mixed-Content
- Single-Value
- React
- Update regarding onChange prop:
- Updating the component's state
- jQuery version
- CSS Variables
- Full list of Tagify's SCSS variables
- Methods
- Events
- Hooks
- Settings

Installation

$3

Place these lines before any other code which is (or will be) using Tagify (Example here)
``html



`

Tagify will then be available globally.
To load specific version use @ - for example: unpkg.com/@yaireo/tagify@3.1.0

$3

`sh
npm i @yaireo/tagify --save
`

#### Usage (in your bundle):

live demo using Parcel as bundler

`js
import Tagify from '@yaireo/tagify'

var tagify = new Tagify(...)
`

> Don't forget to include tagify.css file in your project.
> CSS location: @yaireo/tagify/dist/tagify.css
> SCSS location: @yaireo/tagify/src/tagify.scss
> See SCSS usecase & example

Features

* Can be applied on input & textarea elements
* Supports mix content (text and tags together)
* Supports single-value mode (like )
* Supports whitelist/blacklist
* Supports Templates for: component wrapper, tag items, suggestion list & suggestion items
Shows suggestions list (flexiable settings & styling) at full (component) width or next to* the typed texted (caret)
* Allows setting suggestions' aliases for easier fuzzy-searching
* Auto-suggest input as-you-type with ability to auto-complete
* Can paste in multiple values: tag 1, tag 2, tag 3 or even newline-separated tags
* Tags can be created by Regex delimiter or by pressing the "Enter" key / focusing of the input
Validate tags by Regex pattern* or by function
* Tags may be editable (double-click)
* ARIA accessibility support(Component too generic for any meaningful ARIA)
* Supports read-only mode to the whole componenet or per-tag
* Each tag can have any properties desired (class, data-whatever, readonly...)
* Automatically disallow duplicate tags (vis "settings" object)
* Has built-in CSS loader, if needed (Ex. AJAX whitelist pulling)
* Tags can be trimmed via hellip by giving max-width to the tag element in your CSS
* Easily change direction to RTL (via the SCSS file)
Internet Explorer - A polyfill script should be used: tagify.polyfills.min.js (in /dist) (IE support has been dropped)*
* Many useful custom events
* Original input/textarea element values kept in sync with Tagify

Building the project

Simply run gulp in your terminal, from the project's path (Gulp should be installed first).

Source files are this path: /src/

Output files, which are automatically generated using Gulp, are in: /dist/

The rest of the files are most likely irrelevant.

Adding tags dynamically

`javascript
var tagify = new Tagify(...);

tagify.addTags(["banana", "orange", "apple"])

// or add tags with pre-defined propeties

tagify.addTags([{value:"banana", color:"yellow"}, {value:"apple", color:"red"}, {value:"watermelon", color:"green"}])
`

Output value

There are two possible ways to get the value of the tags:

1. Access the tagify's instance's value prop: tagify.value (Array of tags)
2. Access the original input's value: inputElm.value (Stringified Array of tags)

The most common way is to simply listen to the change event on the original input

`javascript
var inputElm = document.querySelector,
tagify = new Tagify (inputElm);

inputElm.addEventListener('change', onChange)

function onChange(e){
// outputs a String
console.log(e.target.value)
}

`

$3

Default format is a JSON string:

'[{"value":"cat"}, {"value":"dog"}]'

I recommend keeping this because some situations might have values such as addresses (tags contain commas):

'[{"value":"Apt. 2A, Jacksonville, FL 39404"}, {"value":"Forrest Ray, 191-103 Integer Rd., Corona New Mexico"}]'

Another example for complex tags state might be disabled tags, or ones with custom identifier class:

(tags can be clicked, so delevopers can choose to use this to disable/enable tags)

'[{"value":"cat", "disabled":true}, {"value":"dog"}, {"value":"bird", "class":"color-green"}]'

To change the format, assuming your tags have no commas and are fairly simple:

`js
var tagify = new Tagify(inputElm, {
originalInputValueFormat: valuesArr => valuesArr.map(item => item.value).join(',')
})
`

Output:

"cat,dog"

Ajax whitelist

Dynamically-loaded suggestions list (whitelist) from the server (as the user types) is a frequent need to many.

Tagify comes with its own loading animation, which is a very lightweight CSS-only code, and the loading
state is controlled by the method tagify.loading which accepts true or false as arguments.

Below is a basic example using the fetch API. I advise to abort the last request on any input before starting a new request.



Example:

`javascript
var input = document.querySelector('input'),
tagify = new Tagify(input, {whitelist:[]}),
controller; // for aborting the call

// listen to any keystrokes which modify tagify's input
tagify.on('input', onInput)

function onInput( e ){
var value = e.detail.value
tagify.whitelist = null // reset the whitelist

// https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort
controller && controller.abort()
controller = new AbortController()

// show loading animation and hide the suggestions dropdown
tagify.loading(true).dropdown.hide()

fetch('http://get_suggestions.com?value=' + value, {signal:controller.signal})
.then(RES => RES.json())
.then(function(newWhitelist){
tagify.whitelist = newWhitelist // update whitelist Array in-place
tagify.loading(false).dropdown.show(value) // render the suggestions dropdown
})
}
`


Persisted data

Sometimes the whitelist might be loaded asynchronously, and so any pre-filled value in the original input field
will be removed if the enforceWhitelist is set to true.

Tagify can automatically restore the last used whitelist by setting a unique id to the Tagify instance,
by using the localstorage to persist the whitelist & value data:

`js
var input = document.querySelector('input'),
tagify = new Tagify(input, {
id: 'test1', // must be unique (per-tagify instance)
enforceWhitelist: true,
}),
`

Edit tags

Tags which aren't read-only can be edited by double-clicking them (by default)
or by changing the editTags setting to 1, making tags editable by single-clicking them.

The value is saved on blur or by pressing enter key. Pressing Escape will revert the change trigger blur.
ctrlz will revert the change if an edited tag was marked as not valid (perhaps duplicate or blacklisted)

To prevent all tags from being allowed to be editable, set the editTags setting to false (or null).

To do the same but for specific tag(s), set those tags' data with editable property set to false:

`html

`

Validations

For "regular" tags (not mix-mode or select-mode) the easiest way is to use the pattern setting and use a Regex, or
apply the pattern attribute directly on the input which will be "transformed" into a Tagify component (for vanilla code where the input tag is fully accessible to develops).

If the pattern setting does not meet your needs, use the validate setting, which recieves a tag data object as an argument and should return true if validaiton is passing, or false/string of not.
A string may be returned as the reason of the validation failure so it would be printed as the title attribute of the invalid tag.

Note - there is a setting to keep invalid tags (keepInvalidTags) and if it's set to true, the user can see the reason for the invalidation by
hovering the tag and see the browser's native tooltip via the title attribute:

`js
{
empty : "empty",
exceed : "number of tags exceeded",
pattern : "pattern mismatch",
duplicate : "already exists",
notAllowed : "not allowed"
}
`

The texts for those (invalid tags) titles can be customized from the settings:

`js
new Tagify(inputElement, {
texts: {
duplicate: "Duplicates are not allowed"
}
})
`

Or by directly manipulating the Tagify function prototype:

`js
Tagify.prototype.TEXTS = {...Tagify.prototype.TEXTS, {duplicate: "Duplicates are not allowed"}}
`

Drag & Sort

To be able to sort tags by draging, a 3rd-party script is needed.

I have made a very simple drag & drop (~11kb unminified) script which uses HTML5 native API and
it is available to download via NPM or Github
but any other drag & drop script may possibly work. I could not find in the whole internet a decent lightweight script.

$3

`js
var tagify = new Tagify(inputElement)

// bind "DragSort" to Tagify's main element and tell
// it that all the items with the below "selector" are "draggable"
var dragsort = new DragSort(tagify.DOM.scope, {
selector: '.'+tagify.settings.classNames.tag,
callbacks: {
dragEnd: onDragEnd
}
})

// must update Tagify's value according to the re-ordered nodes in the DOM
function onDragEnd(elm){
tagify.updateValueByDOMTags()
}
`

DOM Templates

It's possible to control the templates for some of the HTML elements tagify is using by
modifying the settings.templates Object with your own custom functions which must return an HTML string.

Available templates are: wrapper, tag, dropdown, dropdownItem and the optional dropdownItemNoMatch
which is a special template for rendering a suggestion item (in the dropdown list) only if there were no matches found for the typed input.

View templates

$3

Each template function automaticaly gets binded with this pointing to the current Tagify instance.
It is imperative to preserve the class names and also the this.getAttributes(tagData) for proper functionality.

`js
new Tagify(inputElem, {
templates: {
tag(tagData, tagify){
return contenteditable='false'
spellcheck='false'
tabIndex="${this.settings.a11y.focusableTags ? 0 : -1}"
class="${this.settings.classNames.tag} ${tagData.class ? tagData.class : ""}"
${this.getAttributes(tagData)}>

${tagData[this.settings.tagTextProp] || tagData.value}


}
})
`

Suggestions list

The suggestions list is a whitelist Array of Strings or Objects which was set in the settings Object when the Tagify instance was created, and can be set latet directly on the instance: tagifyInstance.whitelist = ["tag1", "tag2", ...].

The suggestions dropdown will be appended to the document's element and will be rendered by default in a position below (bottom of) the Tagify element.
Using the keyboard arrows up/down will highlight an option from the list, and hitting the Enter key to select.

It is possible to tweak the list dropdown via 2 settings:

- enabled - this is a numeral value which tells Tagify when to show the suggestions dropdown, when a minimum of N characters were typed.
- maxItems - Limits the number of items the suggestions list will render

`javascript
var input = document.querySelector('input'),
tagify = new Tagify(input, {
whitelist : ['aaa', 'aaab', 'aaabb', 'aaabc', 'aaabd', 'aaabe', 'aaac', 'aaacc'],
dropdown : {
classname : "color-blue",
enabled : 0, // show the dropdown immediately on focus
maxItems : 5,
position : "text", // place the dropdown near the typed text
closeOnSelect : false, // keep the dropdown open after selecting a suggestion
highlightFirst: true
}
});
`

Will render

`html

aaab

aaabb

aaabc

aaabd

aaabe

`

By default searching the suggestions is using fuzzy-search (see settings).

If you wish to assign alias to items (in your suggestion list), add the searchBy property to whitelist items you wish
to have an alias for.

In the below example, typing a part of a string which is included in the searchBy property, for example land midd" -
the suggested item which match the value "Israel" will be rendered in the suggestions (dropdown) list.

$3

`javascript
whitelist = [
...
{ value:'Israel', code:'IL', searchBy:'holy land, desert, middle east' },
...
]
`

Another handy setting is dropdown.searchKeys which, like the above dropdown.searchBy setting, allows
expanding the search of any typed terms to more than the value property of the whitelist items (if items are a Collection).

$3

`javascript
[
{
value : 123456,
nickname : "foo",
email : "foo@mail.com"
},
{
value : 987654,
nickname : "bar",
email : "bar@mail.com"
},
...more..
]
`

// setting to search in other keys:
`javascript
{
dropdown: {
searchKeys: ["nickname", "email"] // fuzzy-search matching for those whitelist items' properties
}
}
`

Mixed-Content

See demo here

This feature must be toggled using these settings:

`js
{
// mixTagsInterpolator: ["{{", "}}"], // optional: interpolation before & after string
mode: 'mix', // <-- Enable mixed-content
pattern: /@|#/ // <-- Text starting with @ or # (if single, String can be used here instead of Regex)
}
`

When mixing text with tags, the original textarea (or input) element will have a value as follows:

[[cartman]]⁠ and [[kyle]]⁠ do not know [[Homer simpson]]⁠

If the inital value of the textarea or input is formatted as the above example, tagify will try to
automatically convert everything between [[ & ]] to a tag, if tag exists in the whitelist, so make
sure when the Tagify instance is initialized, that it has tags with the correct value property that match
the same values that appear between [[ & ]].

Applying the setting dropdown.position:"text" is encouraged for mixed-content tags, because the suggestions list
weird when there is already a lot of content at multiple lines.

If a tag does not exists in the whitelist, it may be created by the user and all you should do is listen to the add event and update your local/remote state.

Single-Value

Similar to native element, but allows typing text as value.

React

See live demo for React integration examples.
⚠️ Tagify is not a controlled component.

A Tagify React component is exported from react.tagify.js:

---

$3

I have changed how the onChange works internally within the Wrapper of Tagify
so as of March 30, 2021 the e argument will include a detail parameter with the value as string.
There is no more e.target, and to access the original DOM input element, do this: e.detail.tagify.DOM.originalInput.

----

> Note: You will need to import Tagify's CSS also, either by JavaScript or by SCSS @import (which is preferable)
> Also note that you will need to use dart-sass and not node-sass in order to compile the file.

`javascript
import Tags from "@yaireo/tagify/dist/react.tagify" // React-wrapper file
import "@yaireo/tagify/dist/tagify.css" // Tagify CSS

// on tag add/edit/remove
const onChange = useCallback((e) => {
console.log("CHANGED:"
, e.detail.tagify.value // Array where each tag includes tagify's (needed) extra properties
, e.detail.tagify.getCleanValue()) // Same as above, without the extra properties
, e.detail.value // a string representing the tags
)
}, [])

const App = () => {
return (
tagifyRef={tagifyRef} // optional Ref object for the Tagify instance itself, to get access to inner-methods
settings={settings} // tagify settings object
defaultValue="a,b,c"
{...tagifyProps} // dynamic props such as "loading", "showDropdown:'abc'", "value"
onChange={onChange}
/>
)
})
`

To gain full access to Tagify's (instance) inner methods, A custom ref can be used:

`jsx
...
const tagifyRef = useRef()
...


// or mix-mode
settings={...}
onChange={...}
defaultValue={This is a textarea which mixes text with [[{"value":"tags"}]].}
/>
`

component is a shorthand for

#### Updating the component's state

The settings prop is only used once in the initialization process, please do not update it afterwards.

---


📖 List of (React) props for the <Tags/> component

Prop | Type | Updatable | Info
----------------------- | ------------------------- |:---------:| -----------------------------------------------------------
settings | _Object | | See settings section
name | _String | ✔ |

's element name attribute
value | String/Array | ✔ | Initial value.
defaultValue | String/Array | | Same as value prop
placeholder | _String | ✔ | placeholder text for the component
readOnly | _Boolean | ✔ | Toggles readonly state. With capital O.
tagifyRef | _Object | | useRef hook refference for the component inner instance of vailla Tagify (for methods access)
showFilteredDropdown | _{Boolean/String} | ✔ | if true shows the suggestions dropdown. if assigned a String, show the dropdown pre-filtered.
loading | _Boolean | ✔ | Toggles loading state for the whole component
whitelist | _Array | ✔ | Sets the whitelist which is the basis for the suggestions dropdown & autocomplete
className | _String | | Component's optional class name to be added
InputMode | _String | | "textarea" will create a </code> (hidden) element instead of the default <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><input></code> and automatically make Tagify act as <a href="#mixed-content" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><em>"mix mode"</em></a> <br />autoFocus | <sub>Boolean</sub> | | Should the component have focus on mount. Must be unique, per-page. <br />children | <sub>String/Array</sub> | | <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">value</code>/<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">defaultValue</code> props are prefered <br />onChange | <sub>Function</sub> | | See <a href="#events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><em>events</em> section</a> <br />onInput | <sub>Function</sub> | | See <a href="#events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><em>events</em> section</a> <br />onAdd | <sub>Function</sub> | | See <a href="#events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><em>events</em> section</a> <br />onRemove | <sub>Function</sub> | | See <a href="#events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><em>events</em> section</a> <br />onInvalid | <sub>Function</sub> | | See <a href="#events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><em>events</em> section</a> <br />onClick | <sub>Function</sub> | | See <a href="#events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><em>events</em> section</a> <br />onKeydown | <sub>Function</sub> | | See <a href="#events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><em>events</em> section</a> <br />onFocus | <sub>Function</sub> | | See <a href="#events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><em>events</em> section</a> <br />onBlur | <sub>Function</sub> | | See <a href="#events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><em>events</em> section</a> <br />onEditInput | <sub>Function</sub> | | See <a href="#events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><em>events</em> section</a> <br />onEditBeforeUpdate | <sub>Function</sub> | | See <a href="#events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><em>events</em> section</a> <br />onEditUpdated | <sub>Function</sub> | | See <a href="#events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><em>events</em> section</a> <br />onEditStart | <sub>Function</sub> | | See <a href="#events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><em>events</em> section</a> <br />onEditKeydown | <sub>Function</sub> | | See <a href="#events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><em>events</em> section</a> <br />onDropdownShow | <sub>Function</sub> | | See <a href="#events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><em>events</em> section</a> <br />onDropdownHide | <sub>Function</sub> | | See <a href="#events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><em>events</em> section</a> <br />onDropdownSelect | <sub>Function</sub> | | See <a href="#events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><em>events</em> section</a> <br />onDropdownScroll | <sub>Function</sub> | | See <a href="#events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><em>events</em> section</a> <br />onDropdownNoMatch | <sub>Function</sub> | | See <a href="#events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><em>events</em> section</a> <br />onDropdownUpdated | <sub>Function</sub> | | See <a href="#events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><em>events</em> section</a> <br /></details> <br /> <br />--- <br /> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">jQuery version</h2> <br /> <br /><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jQuery.tagify.js</code> <br /> <br />A jQuery wrapper verison is also available, but I advise not using it because it's basically the exact same as the "normal" <br />script (non-jqueryfied) and all the jQuery's wrapper does is allowing to chain the event listeners for ('add', 'remove', 'invalid') <br /> <br />``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$('[name=tags]') <br /> .tagify() <br /> .on('add', function(e, tagData){ <br /> console.log('added', ...tagData) // data, index, and DOM node <br /> }); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />Accessing methods can be done via the <a href="https://api.jquery.com/data" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>.data('tagify')<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a>: <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$('[name=tags]').tagify(); <br />// get tags from the server (ajax) and add them: <br />$('[name=tags]').data('tagify').addTags('aaa, bbb, ccc') <br /></code>``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">HTML input & textarea attributes</h2> <br /> <br />The below list of <em>attributes</em> affect <em>Tagify</em>.<br> <br />These can also be set by Tagify <a href="#settings" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">settings</a> Object manually, and not <em>declerativly</em> (via attributes). <br /> <br />Attribute | Example | Info <br />----------------- | ----------------------------------------------------- | -------------------- <br /><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">pattern</a> | <pre lang=html></code><input pattern='^[A-Za-z_✲ ]{1,15}$'><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></pre> | Tag Regex pattern which tag input is validated by. <br /><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefplaceholder" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">placeholder</a> | <pre lang=html></code><input placeholder='please type your tags'><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></pre> | This attribute's value will be used as a constant placeholder, which is visible unless something is being typed. <br />readOnly | <pre lang=html></code><input readOnly><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></pre> | No user-interaction (add/remove/edit) allowed. <br />autofocus | <pre lang=html></code><input autofocus><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></pre> | Automatically focus the the Tagify component when the component is loaded <br />required | <pre lang=html></code><input required><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></pre> | Adds a </code>required<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute to the Tagify wrapper element. Does nothing more. <br /> <br /> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">FAQ</h2> <br />List of questions & scenarios which might come up during development with Tagify: <br /> <br /><details> <br /> <summary><strong>Dynamic whitelist</strong></summary> <br />The whitelist initial value is set like so: <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />const tagify = new Tagify(tagNode, { <br /> whitelist: ["a", "b", "c"] <br />}) <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />If changes to the whitelist are needed, they should be done like so: <br /> <br /><strong>Incorrect:</strong> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js <br />tagify.settings.whitelist = ["foo", "bar"] <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><strong>Correct:</strong> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js <br />// set the whitelist directly on the instance and not on the "settings" property <br />tagify.whitelist = ["foo", "bar"] <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /></details> <br /> <br />--- <br /> <br /><details> <br /> <summary><strong>tags/whitelist data structure</strong></summary> <br /> <br />Tagify does not accept just <em>any</em> kind of data structure.<br> <br />If a tag data is represented as an </code>Object<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, it <strong>must</strong> contain a <strong>unique</strong> property </code>value<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br />which Tagify uses to check if a tag already exists, among other things, so make sure it is present. <br /> <br /><strong>Incorrect:</strong> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />[{ "id":1, "name":"foo bar" }] <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><strong>Correct:</strong> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />[{ "id":1, "value": 1, "name":"foo bar" }] <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />[{ "value":1, "name":"foo bar" }] <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />[{ "value":"foo bar" }] <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />// ad a simple array of Strings <br />["foo bar"] <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /></details> <br /> <br />--- <br /> <br /><details> <br /> <summary><strong>Save changes (Ex. to a server)</strong></summary> <br /> <br />In framework-less projects, the developer should save the state of the Tagify component (somewhere), and <br />the question is:<br/> <br /><strong>when should the state be saved?</strong> <br />On every change made to <em>Tagify's</em> internal state (</code>tagify.value<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> via the </code>update()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> method).<br> <br /> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />var tagify = new Tagify(...) <br /> <br />// listen to "change" events on the "original" input/textarea element <br />tagify.DOM.originalInput.addEventListener('change', onTagsChange) <br /> <br />// This example uses async/await but you can use Promises, of course, if you prefer. <br />async function onTagsChange(e){ <br /> const {name, value} = e.target <br /> // "imaginary" async function "saveToServer" should get the field's name & value <br /> await saveToServer(name, value) <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />If you are using <em>React/Vue/Angular</em> or any "modern" framework, then you already know how to <br />attach "onChange" event listeners to your </code><input><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">/</code><textarea><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> elements, so the above is irrelevant. <br /></details> <br /> <br />---- <br /> <br /><details> <br /> <summary><strong>Render tags in one single line</strong></summary> <br /> <br />Stopping tags from wrapping to new lines, add this to your </code>.tagify<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <em>selector CSS Rule</em>: <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">css <br />flex-wrap: nowrap; <br /></code>``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /></details> <br /> <br />---- <br /> <br /><details> <br /> <summary><strong>Submit on </code>Enter<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> key</strong></summary> <br /> <br />Tagify internally has </code>state<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property, per </code>Tagify<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> instance <br />and this may be useful for a variety of things when implementing a specific scenario. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js <br />var tagify = new Tagify(...) <br />var formElm = document.forms[0]; // just an example <br /> <br />tagify.on('keydown', onTagifyKeyDown) <br /> <br />function onTagifyKeyDown(e){ <br /> if( e.key == 'Enter' && // "enter" key pressed <br /> !tagify.state.inputText && // assuming user is not in the middle oy adding a tag <br /> !tagify.state.editing // user not editing a tag <br /> ){ <br /> setTimeout(() => formElm.submit()) // put some buffer to make sure tagify has done with whatever, to be on the safe-side <br /> } <br /> <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /></details> <br /> <br />--- <br /> <br />* <a href="https://github.com/yairEO/tagify/issues/247" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Double-click tag fires both "edit" & "click" custom events</a> <br />* <a href="https://github.com/yairEO/tagify/issues/254" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Manualy open the suggestions dropdown</a> <br />* <a href="https://github.com/yairEO/tagify/issues/244" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Render your own suggestions dropdown</a> <br />* <a href="https://github.com/yairEO/tagify/issues/252" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Allow max length on mix mode</a> <br />* <a href="https://github.com/yairEO/tagify/issues/253" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Always show dropdown</a> <br />* <a href="https://github.com/yairEO/tagify/issues/245" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Limit the length of a tag value (minimum & maximum)</a> <br /><em> <a href="https://github.com/yairEO/tagify/issues/237" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></em>Mixed mode* initial value</a> <br />* <a href="https://github.com/yairEO/tagify/issues/223" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Random colors for each tag</a> <br />* <a href="https://github.com/yairEO/tagify/issues/220" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Format input value for server side</a> <br />* <a href="https://github.com/yairEO/tagify/issues/294" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Writing to tagify textarea</a> <br />* <a href="https://github.com/yairEO/tagify/issues/145" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Scroll all tags within one line, instead of growing vertically</a> <br />* <a href="https://github.com/yairEO/tagify/issues/365" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Insert emoji at caret location when editing a tag</a> <br />* <a href="https://github.com/yairEO/tagify/issues/413" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">propagate </code>change<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event</a> <br />* <a href="https://github.com/yairEO/tagify/issues/433" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Manually update tag data after it was added</a> <br />* <a href="https://github.com/yairEO/tagify/issues/465" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Ajax Whitelist with "enforceWhitelist" setting enabled</a> <br />* <a href="https://github.com/yairEO/tagify/issues/474" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Custom (multiple) tag validation & AJAX</a> <br />* <a href="https://github.com/yairEO/tagify/issues/160" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Make tags from pasted multi-line text</a> <br /><em> <a href="https://github.com/yairEO/tagify/issues/524#issuecomment-699140465" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Add a tag at </em>caret<em> position in </em>mixed mode*</a> <br />* <a href="[https0465](https://github.com/yairEO/tagify/issues/862" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Change automatic title tooltips for invalid tags</a>) <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">CSS Variables</h2> <br /> <br />> Learn more about <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">CSS Variables</a>) (custom properties) <br /> <br />Tagify's utilizes <em>CSS variables</em> which allow easy customization without the need to manually write CSS. <br />If you do wish to heavily style your Tagify components, then you can (and should) use the below variables within <br />your modified styles as much as you can. <br /> <br />For a <em>live</em> example, see the <a href="https://yaireo.github.io/tagify/#section-different-look" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">demos page</a>. <br /> <br />Name | Info <br />------------------------------- | -------------------------------- <br />--tags-disabled-bg | Tag background color when <em>disabled</em> <br />--tags-border-color | The outer border color which surrounds tagify <br />--tags-hover-border-color | <em>hover</em> state <br />--tags-focus-border-color | <em>focus</em> state <br />--tag-bg | Tag background color <br />--tag-hover | Tag background color on hover (mouse) <br />--tag-text-color | Tag text color <br />--tag-text-color--edit | Tag text color when a Tag is being edited <br />--tag-pad | Tag padding, from all sides. Ex. </code>.3em .5em<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br />--tag--min-width | Minimum Tag width <br />--tag--max-width | Maximum tag width, which gets trimmed with <em>hellip</em> after <br />--tag-inset-shadow-size | This is the inner shadow size, which dictates the color of the Tags.<br>It's important the size fits <em>exactly</em> to the tag.<br>Change this if you change the </code>--tag-pad<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or fontsize. <br />--tag-invalid-color | For border color of edited tags with invalid value being typed into them <br />--tag-invalid-bg | Background color for invalid Tags. <br />--tag-remove-bg | Tag background color when hovering the </code>×<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> button. <br />--tag-remove-btn-color | Remove (</code>×<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) button text color <br />--tag-remove-btn-bg | Remove (</code>×<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) button background color <br />--tag-remove-btn-bg--hover | Remove (</code>×<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) button hover background color <br />--input-color | Input text color <br />--tag-hide-transition | Controls the transition property when a tag is removed. default is '.3s' <br />--placeholder-color | Placeholder text color <br />--placeholder-color-focus | Placeholder text color when Tagify has focus and no input was typed <br />--loader-size | Loading animation size. </code>1em<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is pretty big, default is a bit less. <br />--readonly-striped | Either a value </code>1<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>0<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> can be used to toggle the striped diagonal background in <em>readonly</em> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Methods</h2> <br /> <br /></code>Tagify<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">prototype</a> based and There are many methods, but I've chosen to list the most relevant ones: <br /> <br />Name | Parameters | Info <br />-------------------------- | --------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- <br /></code>destroy<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | | Reverts the input element back as it was before Tagify was applied <br /></code>removeAllTags<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | | Removes all tags and resets the original input tag's value property <br /></code>addTags<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <ol><li></code>Array<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">/</code>String<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">/</code>Object<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag(s) to add</li><li></code>Boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> clear input after adding</li><li></code>Boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - skip adding invalids</li><ol> | Accepts a String (word, single or multiple with a delimiter), an Array of Objects (see above) or Strings. <br /></code>addMixTags<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>Array<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">/</code>String<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Bypasses the normalization process in </code>addTags<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, forcefully adding tags at the last caret location or at the end, if there's no last caret location saved (at </code>tagify.state.selection<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) <br /></code>removeTags<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <ol><li></code>Array<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">/</code>HTMLElement<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">/</code>String<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag(s) to remove</li><li></code>silent<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> does not update the component's value</li><li></code>tranDuration<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> Transition duration (in </code>ms<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)</li></ul> | (#502) Remove single/multiple Tags. When nothing passed, removes last tag. <ul><li></code>silent<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - A flag, which when turned on, does not remove any value and does not update the original input value but simply removes the tag from tagify</li><li></code>tranDuration<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - delay for animation, after which the tag will be removed from the DOM</li></ul> <br /></code>addEmptyTag<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>Object<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <sub>(</code>tagData<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)</sub> | Create an empty tag (optionally with pre-defined data) and enters "edit" mode directly. <a href="https://yaireo.github.io/tagify#section-different-look" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">See demo</a> <br /></code>loadOriginalValues<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>String<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">/</code>Array<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Converts the input's value into tags. This method gets called automatically when instansiating Tagify. Also works for mixed-tags <br /></code>getWhitelistItemsByValue<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>Object<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>{value}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - return an Array of found matching items (case-insensitive) <br /></code>getTagIndexByValue<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>String<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Returns the index of a specific tag, by value <br /></code>getTagElmByValue<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>String<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Returns the first matched tag node, if found <br /></code>isTagDuplicate<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>String<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Returns how many tags already exists with that value <br /></code>parseMixTags<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>String<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Converts a String argument (</code>[[foo]]⁠ and [[bar]]⁠ are..<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) into HTML with mixed tags & texts <br /></code>getTagElms<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | | Returns a DOM nodes list of all the tags <br /></code>getTagElmByValue<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>String<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Returns a specific tag DOM node by value <br /></code>tagData<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>HTMLElement<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>Object<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | set/get tag data on a tag element (has</code>.tagify__tag<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> class by default) <br /></code>editTag<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>HTMLElement<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Goes to edit-mode in a specific tag <br /></code>replaceTag<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>tagElm<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>Object<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <sub>(</code>tagData<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)</sub> | Exit a tag's edit-mode. if "tagData" exists, replace the tag element with new data and update Tagify value <br /></code>loading<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>Boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | toggle loading state on/off (Ex. AJAX whitelist pulling) <br /></code>tagLoading<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>HTMLElement<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, Boolean | same as above but for a specific tag element <br /></code>createTagElem<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>Object<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <sub>(</code>tagData<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)</sub> | Returns a tag element from the supplied tag data <br /></code>injectAtCaret<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>HTMLElement<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <sub>(</code>injectedNode<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)</sub>, </code>Object<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <sub>(</code>range<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)</sub> | Injects text or HTML node at last caret position. </code>range<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> parameter is <em>optional</em> <br /></code>placeCaretAfterNode<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>HTMLElement<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Places the caret after a given node <br /></code>insertAfterTag<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>HTMLElement<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <sub>(tag element)</sub>, </code>HTMLElement<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">/</code>String<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <sub>(whatever to insert after)</sub> | <br /></code>toggleClass<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>Boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Toggles </code>class<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> on the main <em>tagify</em> container (</code>scope<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) <br /></code>dropdown.selectAll<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | | Add <strong>all</strong> whitelist items as tags and close the suggestion dropdown <br /></code>dropdown.show<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>String<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Shows the sugegstions list dropdown. A string paramater allows filtering the results <br /></code>dropdown.hide<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>Boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Hides the suggestions list dropdown (if it's not managed manually by the developer) <br /></code>dropdown.toggle<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>Boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Toggles dropdown show/hide. the boolean parameter will force-show <br /></code>updateValueByDOMTags<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | | Iterate tag DOM nodes and re-build the </code>tagify.value<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> array (call this if tags get sorted manually) <br /></code>parseTemplate<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>String<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">/</code>Function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <sub>(template name or function)</sub>, </code>Array<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <sub>(data)</sub> | converts a template string (by selecting one from the </code>settings.templates<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> by name or supplying a template function which returns a String) into a DOM node <br /></code>setReadonly<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>Boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Toggles "readonly" mode on/off <br /></code>setDisabled<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>Boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Toggles "disabled" mode on/off <br /></code>getPersistedData<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>String<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Get data for the specific instance by parameter <br /></code>setPersistedData<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>*<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>String<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Set data for the specific instance. Must supply a second parameter which will be the key to save the data in the localstorage (under the tagify namespace) <br /></code>clearPersistedData<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>String<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Clears data for the specific instance, by parameter. If the parameter is ommited, clears all persisted data related to this instance (by its </code>id<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> which was set in the instance's settings) <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Events</h2> <br /> <br />All triggered events return the instance's scope (tagify).<br> <br />See </code>e.detail<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for custom event additional data. <br /> <br /><details> <br /> <summary>Example 1</summary> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />var tagify = new Tagify(...) <br /> <br />// events can be chainable, and multiple events may be binded for the same callback <br />tagify <br /> .on('input', e => console.log(e.detail)) <br /> .on('edit:input edit:updated edit:start edit:keydown', e => console.log(e.type, e.detail)) <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /></details> <br /> <br /><details> <br /> <summary>Example 2</summary> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />var tagify = new Tagify(inputNode, { <br /> callbacks: { <br /> "change": (e) => console.log(e.detail), <br /> "dropdown:show": (e) => console.log(e.detail) <br /> } <br />}) <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /></details> <br /> <br />Name | Info <br />------------------ | -------------------------------------------------------------------------- <br />change | Any change to the value has occured. </code>e.details.value<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> callback listener argument is a <em>String</em> <br />add | A tag has been added <br />remove | A tag has been removed (<a href="https://github.com/yairEO/tagify/issues/222" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">use </code>removeTag<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a> instead with <em>jQuery</em>) <br />invalid | A tag has been added but did not pass vaildation. See <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">event detail</a> <br />input | <a href="https://developer.mozilla.org/en-US/docs/Web/Events/input" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Input</a> event, when a tag is being typed/edited. </code>e.detail<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> exposes </code>value<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>inputElm<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> & </code>isValid<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br />click | Clicking a tag. Exposes the tag element, its index & data <br />dblclick | Double-clicking a tag <br />keydown | When tagify input has focus and a key was pressed <br />focus | The component currently has focus <br />blur | The component lost focus <br />edit:input | Typing inside an edited tag <br />edit:beforeUpdate | Just before a tag has been updated, while still in "edit" mode <br />edit:updated | A tag as been updated (changed view editing or by directly calling the </code>replaceTag()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> method) <br />edit:start | A tag is now in "edit mode" <br />edit:keydown | keydown event while an edited tag is in focus <br />dropdown:show | Suggestions dropdown is to be rendered. The dropdown DOM node is passed in the callback, <a href="https://yaireo.github.io/tagify/#section-basic" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">see demo</a>. <br />dropdown:hide | Suggestions dropdown has been removed from the DOM <br />dropdown:select | Suggestions dropdown item selected (by mouse/keyboard/touch) <br />dropdown:scroll | Tells the percentage scrolled. (</code>event.detail.percentage<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) <br />dropdown:noMatch | No whitelist suggestion item matched for the the typed input. At this point it is possible to manually set </code>tagify.suggestedListItems<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to any possible custom value, for example: </code>[{ value:"default" }]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br />dropdown:updated | Fired when the dropdown list is re-filtered while suggestions list is visible and a tag was removed so it was re-added as a suggestion <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Hooks</h2> <br /> <br /><strong>Promise</strong>-based hooks for <em>async</em> program flow scenarios. <br /> <br />Allows to "hook" (intervene) at certain points of the program, which were selected as a suitable place to <br /><strong>pause</strong> the program flow and wait for further instructions on how/if to procceed. <br /> <br /><details> <br /> <summary>For example, if a developer wishes to add a (native) confirmation popup before a tag is removed (by a user action): <br /></summary> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />var input = document.querySelector('input') <br />var tagify = new Tagify(input,{ <br /> hooks: { <br /> /** <br /> * Removes a tag <br /> * @param {Array} tags [Array of Objects [{node:..., data:...}, {...}, ...]] <br /> */ <br /> beforeRemoveTag : function( tags ){ <br /> return new Promise((resolve, reject) => { <br /> confirm("Remove " + tags[0].data.value + "?") <br /> ? resolve() <br /> : reject() <br /> }) <br /> } <br /> } <br />}) <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /></details> <br /> <br /> <br />Name | Parameters | Info <br />---------------------- | ------------------------------------------- | -------------------------------------------------------------------------- <br />beforeRemoveTag | Array <sub>(of Objects)</sub> | <a href="https://jsbin.com/xoseyux/edit?html,js,output" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Example</a> <br />suggestionClick | Object <sub>(click event data)</sub> | <a href="https://jsbin.com/tuwihuf/edit?html,js,output" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Example</a> <br />beforePaste | </code>tagify<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>pastedText<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>clipboardData<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Before pasted text was added to Tagify. <em>Resolve</em> with new paste value if needed <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3"><a href="https://github.com/yairEO/tagify/blob/master/src/parts/defaults.js#L1" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Settings</a></h2> <br /> <br />Name | Type | Default | Info <br />------------------------- | ---------------------------- | ------------------------------------------- | -------------------------------------------------------------------------- <br />tagTextProp | <sub>String</sub> | </code>"value"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Tag data Object property which will be displayed as the tag's text. Remember to keep "value" property <em>unique</em>. See Also: </code>dropdown.mapValueTo<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>dropdown.searchKeys<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br />placeholder | <sub>String</sub> | | Placeholder text. If this attribute is set on an input/textarea element it will override this setting <br />delimiters | <sub>String</sub> | </code>","<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | [RegEx <strong>string</strong>] split tags by any of these delimiters. Example delimeters: ",|.| " (<em>comma</em>, <em>dot</em> or <em>whitespace</em>) <br />pattern | <sub>String/RegEx</sub> | null | Validate input by RegEx pattern (can also be applied on the input itself as an attribute) Ex: </code>/[1-9]/<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br />mode | <sub>String</sub> | null | Use </code>select<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for single-value dropdown-like select box. See </code>mix<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> as value to allow mixed-content. The 'pattern' setting must be set to some character. <br />mixTagsInterpolator | <sub>Array</sub> | <sub></code>['[[', ']]']<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></sub> | Interpolation for mix mode. Everything between these will become a tag <br />mixTagsAllowedAfter | <sub>RegEx</sub> | <sub></code>/,\|\.\|\:\|\s/<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></sub> | Define conditions in which typed mix-tags content is allowing a tag to be created after. <br />duplicates | <sub>Boolean</sub> | false | Should duplicate tags be allowed or not <br />trim | <sub>Boolean</sub> | true | If </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> trim the tag's value (remove before/after whitespaces) <br />enforceWhitelist | <sub>Boolean</sub> | false | Should ONLY use tags allowed in whitelist.<br>In </code>mix-mode<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, setting it to </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> will not allow creating new tags. <br />userInput | <sub>Boolean</sub> | true | Disable manually typing/pasting/editing tags (tags may only be added from the whitelist). Can also use the </code>disabled<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute on the original input element. <br />autoComplete.enabled | <sub>Boolean</sub> | true | Tries to suggest the input's value while typing (match from whitelist) by adding the rest of term as grayed-out text <br />autoComplete.rightKey | <sub>Boolean</sub> | false | If </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, when </code>→<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is pressed, use the suggested value to create a tag, else just auto-completes the input. In mixed-mode this is ignored and treated as "true" <br />whitelist | <sub>Array</sub> | [] | An array of allowed tags (<em>Strings</em> or <em>Objects</em>). When using <em>Objects</em> in the <em>whitelist</em> array a </code>value<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property is a must & should be unique. <br/>Also, the *whitelist used for auto-completion when </code>autoCompletion.enabled<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br />blacklist | <sub>Array</sub> | [] | An array of tags which aren't allowed <br />addTagOnBlur | <sub>Boolean</sub> | true | Automatically adds the text which was inputed as a tag when blur event happens <br />pasteAsTags | <sub>Boolean</sub> | true | Automatically converts pasted text into tags <br />callbacks | <sub>Object</sub> | {} | Exposed callbacks object to be triggered on events: </code>'add'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> / </code>'remove'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tags <br />maxTags | <sub>Number</sub> | Infinity | Maximum number of allowed tags. when reached, adds a class "tagify--hasMaxTags" to </code><Tags><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br />editTags | <sub>Object/Number</sub> | {} | </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>null<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> will disallow editing <br />editTags.<em>clicks</em> | <sub>Number</sub> | 2 | Number of clicks to enter "edit-mode": 1 for single click. Any other value is considered as double-click <br />editTags.<em>keepInvalid</em> | <sub>Boolean</sub> | true | keeps invalid edits as-is until </code>esc<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is pressed while in focus <br />templates | <sub>Object</sub> | <sub></code>wrapper<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>tag<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>dropdownItem<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></sub> | Object consisting of functions which return template strings <br />validate | <sub>Function</sub> | | If the </code>pattern<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> setting does not meet your needs, use this function, which recieves <em>tag data object</em> as an argument and should return </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> if validaiton passed or </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">/</code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> of not. A <em>string</em> may be returned as the reason of the validation failure. <br />transformTag | <sub>Function</sub> | | Takes a tag data as argument and allows mutating it before a tag is created or edited and also before validation.<br>Should not </code>return<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> anything, only <strong>mutate</strong> the argument. <br />keepInvalidTags | <sub>Boolean</sub> | false | If </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, do not remove tags which did not pass validation <br />skipInvalid | <sub>Boolean</sub> | false | If </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, do not add invalid, temporary, tags before automatically removing them <br />backspace | <sub>*</sub> | true | On pressing backspace key:<br> </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - remove last tag <br></code>edit<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - edit last tag<br></code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - do nothing (useful for outside style) <br />originalInputValueFormat | <sub>Function</sub> | | If you wish your original input/textarea </code>value<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property format to other than the default (which I recommend keeping) you may use this and make sure it returns a <em>string</em>. <br />mixMode.<em>insertAfterTag</em> | <sub>Node/String</sub> | </code>\u00A0<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>node<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to add after a tag added | <br />a11y.<em>focusableTags</em> | <sub>Boolean</sub> | false | allows tags to get focus, and also to be deleted via <kbd>Backspace</kbd> <br />dropdown.<em>enabled</em> | <sub>Number</sub> | 2 | Minimum characters input for showing a suggestions list. </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> will not render a suggestions list. <br />dropdown.<em>caseSensitive</em> | <sub>Boolean</sub> | false | if </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, match <strong>exact</strong> item when a suggestion is selected (from the dropdown) and also more strict matching for dulpicate items. <strong>Ensure</strong> </code>fuzzySearch<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for this to work. <br />dropdown.<em>maxItems</em> | <sub>Number</sub> | 10 | Maximum items to show in the suggestions list <br />dropdown.<em>classname</em> | <sub>String</sub> | </code>""<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Custom <em>classname</em> for the dropdown suggestions list <br />dropdown.<em>fuzzySearch</em> | <sub>Boolean</sub> | true | Enables filtering dropdown items values' by string <em>containing</em> and not only <em>beginning</em> <br />dropdown.<em>sortby</em> | <sub>String/Function</sub> | | If set as </code>startsWith<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> string, the suggestions list will be sorted with matched items which starts with the query shown first, and <em>exact</em> matches shown before all.<br><br> If this setting is defined as a </code>function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, it recieves two arguments: the array of filtered items and the query and it must return an Array.<br><br>(<em>default sorting order is same as the whitelist's</em>) <br />dropdown.<em>accentedSearch</em> | <sub>Boolean</sub> | true | Enable searching for <em>accented</em> items in the whitelist without typing exact match (#491) <br />dropdown.<em>position</em> | <sub>String</sub> | </code>"all"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <ul><li></code>manual<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - will not render the dropdown, and you would need to do it yourself. <a href="https://yaireo.github.io/tagify/#section-manual-suggestions" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">See demo</a></li><li></code>text<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - places the dropdown next to the caret</li><li></code>input<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - places the dropdown next to the input (useful in rare situations)</li><li></code>all<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - normal, full-width design</li></ul> <br />dropdown.<em>highlightFirst</em> | <sub>Boolean</sub> | false | When a suggestions list is shown, highlight the first item, and also suggest it in the input (The suggestion can be accepted with <kbd>→</kbd> key) <br />dropdown.<em>closeOnSelect</em> | <sub>Boolean</sub> | true | close the dropdown after selecting an item, if </code>enabled:0<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is set (which means always show dropdown on focus) <br />dropdown.<em>clearOnSelect</em> | <sub>Boolean</sub> | true | Keep typed text after selecting a suggestion <br />dropdown.<em>mapValueTo</em> | <sub>Function/String</sub> | | If whitelist is an Array of Objects:<br>Ex. </code>[{value:'foo', email:'foo@a.com'},...]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)<br> this setting controlls which data <em>key</em> will be printed in the dropdown.<br> Ex.1: </code>mapValueTo: data => "To:" + data.email<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br>Ex.2: </code>mapValueTo: "email"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br />dropdown.<em>searchKeys</em> | <sub>Array</sub> | <sub></code>["value", "searchBy"]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></sub> | When a user types something and trying to match the whitelist items for suggestions, this setting allows matching other keys of a whitelist objects <br />dropdown.<em>appendTarget</em> | <sub>HTMLNode</sub> | </code>document.body<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Target-Node which the <em>suggestions dropdown</em> is appended to (<em>only when rendered</em>) <br />dropdown.<em>placeAbove</em> | <sub>Boolean</sub> | | If defined, will force the placement of the dropdown in respect to the Boolean value: </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> will always show the suggestions dropdown above the input field and </code>false` will always show it below. By default this setting it not defined and the placement of the dropdown is automatically decided according to the space availble, where opening it <em>below</em> the input is preferred. <br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"26:[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"@babel/core\",{\"href\":\"/package/%40babel%2Fcore\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@babel/core\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.15.5\"}]]}],[\"$\",\"$L5\",\"@babel/plugin-proposal-object-rest-spread\",{\"href\":\"/package/%40babel%2Fplugin-proposal-object-rest-spread\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@babel/plugin-proposal-object-rest-spread\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.14.7\"}]]}],[\"$\",\"$L5\",\"@babel/plugin-transform-destructuring\",{\"href\":\"/package/%40babel%2Fplugin-transform-destructuring\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@babel/plugin-transform-destructuring\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.14.7\"}]]}],[\"$\",\"$L5\",\"@babel/preset-env\",{\"href\":\"/package/%40babel%2Fpreset-env\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@babel/preset-env\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.15.4\"}]]}],[\"$\",\"$L5\",\"@babel/preset-react\",{\"href\":\"/package/%40babel%2Fpreset-react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[\"$L28\",\"$undefined\"]}],\"@babel/preset-react\"]}],\"$L29\"]}],\"$L2a\",\"$L2b\",\"$L2c\",\"$L2d\",\"$L2e\",\"$L2f\",\"$L30\",\"$L31\",\"$L32\",\"$L33\",\"$L34\",\"$L35\",\"$L36\",\"$L37\",\"$L38\",\"$L39\",\"$L3a\",\"$L3b\",\"$L3c\",\"$L3d\",\"$L3e\",\"$L3f\",\"$L40\",\"$L41\",\"$L42\",\"$L43\",\"$L44\",\"$L45\",\"$L46\",\"$L47\",\"$L48\",\"$L49\",\"$L4a\",\"$L4b\",\"$L4c\"]}]}]\n"])</script><script>self.__next_f.push([1,"28:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n29:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.14.5\"}]\n2a:[\"$\",\"$L5\",\"@rollup/plugin-babel\",{\"href\":\"/package/%40rollup%2Fplugin-babel\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@rollup/plugin-babel\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.3.0\"}]]}]\n2b:[\"$\",\"$L5\",\"@rollup/stream\",{\"href\":\"/package/%40rollup%2Fstream\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@rollup/stream\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"git+https://github.com/andremacola/stream.git\"}]]}]\n2c:[\"$\",\"$L5\",\"beepbeep\",{\"href\":\"/package/beepbeep\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"beepbeep\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.3.0\"}]]}]\n2d:[\"$\",\"$L5\",\"gulp\",{\"href\":\"/package/gulp\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.0.2\"}]]}]\n2e:[\"$\",\"$L5\",\"gulp-autoprefixer\",{\"href\":\"/package/gulp-autoprefixer\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":"])</script><script>self.__next_f.push([1,"\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-autoprefixer\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^8.0.0\"}]]}]\n2f:[\"$\",\"$L5\",\"gulp-babel\",{\"href\":\"/package/gulp-babel\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-babel\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^8.0.0\"}]]}]\n30:[\"$\",\"$L5\",\"gulp-bump\",{\"href\":\"/package/gulp-bump\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-bump\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.2.0\"}]]}]\n31:[\"$\",\"$L5\",\"gulp-cached\",{\"href\":\"/package/gulp-cached\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-cached\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.1.1\"}]]}]\n32:[\"$\",\"$L5\",\"gulp-clean-css\",{\"href\":\"/package/gulp-clean-css\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-clean-css\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.3.0\"}]]}]\n33:[\"$\",\"$L5\",\"gulp-combine-mq\",{\"href\":\"/package/gulp-combine-mq\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"heigh"])</script><script>self.__next_f.push([1,"t\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-combine-mq\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.4.0\"}]]}]\n34:[\"$\",\"$L5\",\"gulp-concat\",{\"href\":\"/package/gulp-concat\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-concat\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.6.1\"}]]}]\n35:[\"$\",\"$L5\",\"gulp-css-globbing\",{\"href\":\"/package/gulp-css-globbing\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-css-globbing\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.2.2\"}]]}]\n36:[\"$\",\"$L5\",\"gulp-eslint\",{\"href\":\"/package/gulp-eslint\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-eslint\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.0.0\"}]]}]\n37:[\"$\",\"$L5\",\"gulp-header-comment\",{\"href\":\"/package/gulp-header-comment\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-header-comment\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.9.0\"}]]}]\n38:[\"$\",\"$L5\",\"gulp-insert\",{\"href\":\"/package/gulp-insert\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex item"])</script><script>self.__next_f.push([1,"s-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-insert\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.5.0\"}]]}]\n39:[\"$\",\"$L5\",\"gulp-load-plugins\",{\"href\":\"/package/gulp-load-plugins\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-load-plugins\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.0.7\"}]]}]\n3a:[\"$\",\"$L5\",\"gulp-rename\",{\"href\":\"/package/gulp-rename\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-rename\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.0.0\"}]]}]\n3b:[\"$\",\"$L5\",\"gulp-replace\",{\"href\":\"/package/gulp-replace\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-replace\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.1.3\"}]]}]\n3c:[\"$\",\"$L5\",\"gulp-sass\",{\"href\":\"/package/gulp-sass\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-sass\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.0.0\"}]]}]\n3d:[\"$\",\"$L5\",\"gulp-sourcemaps\",{\"href\":\"/package/gulp-sourcemaps\",\"className\":\"group flex items-center ju"])</script><script>self.__next_f.push([1,"stify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-sourcemaps\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.0.0\"}]]}]\n3e:[\"$\",\"$L5\",\"gulp-streamify\",{\"href\":\"/package/gulp-streamify\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-streamify\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.0.2\"}]]}]\n3f:[\"$\",\"$L5\",\"gulp-tag-version\",{\"href\":\"/package/gulp-tag-version\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-tag-version\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.3.1\"}]]}]\n40:[\"$\",\"$L5\",\"gulp-tap\",{\"href\":\"/package/gulp-tap\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-tap\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.0.0\"}]]}]\n41:[\"$\",\"$L5\",\"gulp-terser\",{\"href\":\"/package/gulp-terser\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-terser\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foregro"])</script><script>self.__next_f.push([1,"und\",\"children\":\"^2.0.1\"}]]}]\n42:[\"$\",\"$L5\",\"gulp-umd\",{\"href\":\"/package/gulp-umd\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-umd\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.0.0\"}]]}]\n43:[\"$\",\"$L5\",\"gulp-util\",{\"href\":\"/package/gulp-util\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-util\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.0.8\"}]]}]\n44:[\"$\",\"$L5\",\"gulp-watch\",{\"href\":\"/package/gulp-watch\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-watch\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.0.1\"}]]}]\n45:[\"$\",\"$L5\",\"path\",{\"href\":\"/package/path\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"path\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.12.7\"}]]}]\n46:[\"$\",\"$L5\",\"rollup\",{\"href\":\"/package/rollup\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"rollup\"]}],[\"$\",\"span\",null,{\"classN"])</script><script>self.__next_f.push([1,"ame\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.56.3\"}]]}]\n47:[\"$\",\"$L5\",\"rollup-plugin-banner\",{\"href\":\"/package/rollup-plugin-banner\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"rollup-plugin-banner\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.2.1\"}]]}]\n48:[\"$\",\"$L5\",\"rollup-plugin-terser\",{\"href\":\"/package/rollup-plugin-terser\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"rollup-plugin-terser\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.0.2\"}]]}]\n49:[\"$\",\"$L5\",\"run-sequence\",{\"href\":\"/package/run-sequence\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"run-sequence\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.2.1\"}]]}]\n4a:[\"$\",\"$L5\",\"sass\",{\"href\":\"/package/sass\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"sass\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.39.0\"}]]}]\n4b:[\"$\",\"$L5\",\"semver\",{\"href\":\"/package/semver\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity gr"])</script><script>self.__next_f.push([1,"oup-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"semver\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.3.5\"}]]}]\n4c:[\"$\",\"$L5\",\"vinyl-source-stream\",{\"href\":\"/package/vinyl-source-stream\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"vinyl-source-stream\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.0.0\"}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>