(()=>{"use strict";var e={687:()=>{},87:e=>{e.exports=window.wp.element},723:e=>{e.exports=window.wp.i18n}},r={};function t(o){var n=r[o];if(void 0!==n)return n.exports;var a=r[o]={exports:{}};return e[o](a,a.exports,t),a.exports}t.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return t.d(r,{a:r}),r},t.d=(e,r)=>{for(var o in r)t.o(r,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:r[o]})},t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r);var o=t(87),n=t(723);t(687);const __=n.__,a=()=>React.createElement("b",null,__("Hello world!","jetpack-subscribers-dashboard"));!async function(){const e=document.getElementById("jetpack-subscribers-dashboard");null!==e&&(0,o.createRoot)(e).render(React.createElement(a,null))}()})();/** VC Modal block popup */
.add_element_size(@counter, @max_width: 1330px) when (@counter >= 0) {
.add_element_size((@counter - 1), (@max_width - @vc_add_element_button_width));
@media (min-width: @max_width) {
.vc_modal-dialog {
width: (10px + @vc_add_element_width + @counter * @vc_add_element_button_width);
}
}
}
.vc_modal {
display: none;
overflow: auto;
overflow-y: hidden;
position: fixed;
top: 0 !important;
right: 0;
bottom: 0;
left: 0;
-webkit-overflow-scrolling: touch;
width: auto !important;
margin-left: 0 !important;
background-color: transparent !important;
z-index: @vc_zindex_modal !important;
&.fade .vc_modal-dialog {
.translate(0, -25%);
.transition-transform(~"0.3s ease-out");
}
&.in .vc_modal-dialog {
.translate(0, 0)
}
*, & {
.box-sizing(border-box);
}
}
.add_element_size(4);
.vc_modal-content {
position: relative;
background-color: @modal-content-bg;
.box-shadow(0 3px 9px rgba(0, 0, 0, .5));
background-clip: padding-box;
// Remove focus outline from opened modal
outline: 0;
-webkit-border-radius: @vc_modal_content_radius;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid @vc_modal_content_border_color;
}
.vc_modal-header {
.vc_box-heading;
}
.vc_modal-title {
.modal-title;
.vc_heading(16px);
cursor: default;
border: 0 !important;
}
.vc_modal-body {
.modal-body;
overflow-y: auto;
}
.vc_modal-footer {
.modal-footer;
}
// Default bootstrap classes for modal box
.modal-open {
.modal-open;
}
.clousus {
z-index: @zindex-modal-background;
}
.modal-backdrop {
.modal-backdrop;
}
// Measure scrollbar width for padding body during modal show/hide
.modal-scrollbar-measure {
.modal-scrollbar-measure;
}{"content":[{"id":"52d1d9f0","elType":"section","settings":{"height":"min-height","custom_height":{"unit":"px","size":470},"column_position":"stretch","content_position":"middle","structure":"20"},"elements":[{"id":"138f581a","elType":"column","settings":{"_column_size":50,"_inline_size":39.451,"_inline_size_tablet":50,"padding_tablet":{"unit":"px","top":"0","right":"35","bottom":"0","left":"35","isLinked":false}},"elements":[{"id":"4beb981c","elType":"section","settings":{"content_width":{"unit":"px","size":200}},"elements":[{"id":"6fbbdce2","elType":"column","settings":{"_column_size":100,"_inline_size":null},"elements":[{"id":"7f8cc37a","elType":"widget","settings":{"image":{"id":11396,"url":"https:\/\/library.elementor.com\/wp-content\/uploads\/2019\/01\/Icecream.png"},"image_size":"full","width":{"unit":"px","size":45},"opacity":{"unit":"px","size":1},"_margin":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false},"_animation":"tada","_animation_delay":1400},"elements":[],"widgetType":"image"},{"id":"227987d2","elType":"widget","settings":{"title":"GELATERIA","align":"center","title_color":"#f38895","typography_typography":"custom","typography_font_size":{"unit":"px","size":31},"typography_font_weight":"300","_margin":{"unit":"px","top":"-8","right":"0","bottom":"25","left":"0","isLinked":false},"_margin_mobile":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false},"_padding":{"unit":"px","top":"10","right":"0","bottom":"10","left":"0","isLinked":false},"_z_index":2,"_border_border":"dashed","_border_width":{"unit":"px","top":"1","right":"0","bottom":"1","left":"0","isLinked":false},"_border_color":"#f38895"},"elements":[],"widgetType":"heading"}],"isInner":true}],"isInner":true},{"id":"2d0f979","elType":"widget","settings":{"title":"special offer","align":"center","title_color":"#83d8d8","typography_typography":"custom","typography_font_family":"Open Sans Condensed","typography_font_size":{"unit":"px","size":54},"typography_text_transform":"capitalize","typography_font_size_tablet":{"unit":"px","size":51},"_margin_mobile":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false}},"elements":[],"widgetType":"heading"},{"id":"70c6c160","elType":"widget","settings":{"title":"50% off your next order!","align":"center","title_color":"rgba(0,0,0,0.49)","typography_typography":"custom","typography_font_family":"Helvetica","typography_font_size":{"unit":"px","size":23},"typography_font_weight":"400"},"elements":[],"widgetType":"heading"},{"id":"5e179253","elType":"widget","settings":{"text":"sweet prices","align":"center","typography_typography":"custom","typography_font_family":"Helvetica","typography_font_size":{"unit":"px","size":20},"typography_font_weight":"300","typography_text_transform":"uppercase","typography_letter_spacing":{"unit":"px","size":1.7},"background_color":"#83d8d8","border_radius":{"unit":"px","top":"70","right":"70","bottom":"70","left":"70","isLinked":true},"text_padding":{"unit":"px","top":"20","right":"45","bottom":"20","left":"45","isLinked":false},"_margin":{"unit":"px","top":"48","right":"0","bottom":"0","left":"0","isLinked":false},"button_background_hover_color":"#f38895","_animation":"fadeInDown","animation_duration":"fast","_animation_delay":500},"elements":[],"widgetType":"button"},{"id":"64c2f7f7","elType":"widget","settings":{"title":"Offer stands till 31\/6\/2019","align":"center","title_color":"#b2b2b2","typography_typography":"custom","typography_font_family":"Helvetica","typography_font_size":{"unit":"px","size":19},"typography_font_weight":"400","_margin":{"unit":"px","top":"81","right":"0","bottom":"0","left":"0","isLinked":false},"_margin_mobile":{"unit":"px","top":"0","right":"0","bottom":"17","left":"0","isLinked":false}},"elements":[],"widgetType":"heading"}],"isInner":false},{"id":"17ff106d","elType":"column","settings":{"_column_size":50,"_inline_size":60.549,"background_background":"classic","background_image":{"id":9734,"url":"https:\/\/library.elementor.com\/wp-content\/uploads\/2019\/01\/candy.png"},"background_position":"center center","background_size":"cover","border_radius":{"unit":"px","top":"0","right":"10","bottom":"10","left":"0","isLinked":false},"_inline_size_tablet":50,"background_repeat":"no-repeat"},"elements":[{"id":"47559f3","elType":"widget","settings":{"space_mobile":{"unit":"px","size":279}},"elements":[],"widgetType":"spacer"}],"isInner":false}],"isInner":false}],"page_settings":{"width":{"unit":"px","size":"910","sizes":[]},"width_tablet":{"unit":"px","size":"733","sizes":[]},"height_type":"custom","height":{"unit":"px","size":"","sizes":[]},"height_mobile":{"unit":"px","size":"701","sizes":[]},"entrance_animation":"fadeIn","border_radius":{"unit":"px","top":"10","right":"10","bottom":"10","left":"10","isLinked":"1"},"overlay_background_color":"rgba(255,255,255,0.8)","close_button_vertical_mobile":{"unit":"%","size":"65.8","sizes":[]},"close_button_color":"#ffffff","icon_size":{"unit":"px","size":"20","sizes":[]}}}jQuery(document).ready(function ($) {
});/*! @elementor/utils */
/*! react */
/*!**************************!*\
!*** external ["React"] ***!
\**************************/
/*!****************************************!*\
!*** external ["elementorV2","utils"] ***!
\****************************************/
/*!*******************************************************************!*\
!*** ./node_modules/@elementor/editor-v1-adapters/dist/index.mjs ***!
\*******************************************************************/
For QUIC.cloud connectivity ping test, please do not delete, generated by LSCWP
maniastudio – maniastudio
import { XMarkIcon } from '@heroicons/react/24/outline';
import { useState, useEffect, useRef } from '@wordpress/element';
import { classNames } from '../helpers';
const TagsInput = ( {
name = '',
placeholder = '',
value = '',
onChange,
validationPattern = '',
delimiters = [ ',', '\n', ';', ' ' ],
className = '',
tokenClassName = '',
filterDuplicates = true,
maxLength = 80,
maxTokens = 0, // 0 means unlimited.
} ) => {
const [ tags, setTags ] = useState( [] );
const delimitersRegex = new RegExp( delimiters.join( '|' ), 'g' );
const inputRef = useRef( null );
const autoSizer = useRef( null );
const addNewTag = ( tagValue ) => {
setTags( filterDuplicateValues( [ ...tags, tagValue ] ) );
};
const handleDeleteTag = ( index ) => {
const newTags = [ ...tags ];
newTags.splice( index, 1 );
setTags( newTags );
if ( typeof onChange === 'function' ) {
onChange( newTags );
}
if ( maxTokens > 0 && tags.length >= maxTokens ) {
setTimeout( () => {
if ( ! inputRef.current ) {
return;
}
inputRef.current.focus();
}, 50 );
}
};
const filterDuplicateValues = ( val ) => {
return filterDuplicates
? [ ...new Set( val ) ]?.filter( Boolean )
: val;
};
const handleAddTag = ( event ) => {
if ( maxTokens > 0 && tags.length >= maxTokens ) {
return;
}
const tag = event.target.value.trim();
if (
! tag ||
( tag && validationPattern && ! validationPattern.test( tag ) ) ||
tag.length > maxLength
) {
return;
}
addNewTag( tag );
event.target.value = '';
handleAutoSizeInput( '' );
if ( typeof onChange === 'function' ) {
onChange( filterDuplicateValues( [ ...tags, tag ] ) );
}
};
const handleKeyDown = ( event ) => {
// If press Enter add tag.
if ( event.key === 'Enter' ) {
event.preventDefault();
handleAddTag( event );
}
// If press Backspace and input is empty, remove tag.
if ( event.key === 'Backspace' && ! event.target.value ) {
handleDeleteTag( tags.length - 1 );
}
// If press delimiter, add tag.
if ( delimiters.includes( event.key ) ) {
event.preventDefault();
handleAddTag( event );
}
};
const handlePaste = ( event ) => {
event.preventDefault();
const clipboardData = event.clipboardData || window.clipboardData;
const pastedText = clipboardData.getData( 'text' );
if ( ! pastedText ) {
return;
}
if ( maxTokens > 0 && tags.length >= maxTokens ) {
return;
}
const newTags = pastedText
.split( delimitersRegex )
.filter( Boolean )
.filter(
( tag ) => ! validationPattern || validationPattern.test( tag )
);
setTags( filterDuplicateValues( [ ...tags, ...newTags ] ) );
if ( typeof onChange === 'function' ) {
onChange( filterDuplicateValues( [ ...tags, ...newTags ] ) );
}
};
const handleClickInputContainer = ( event ) => {
if ( event.target === inputRef.current ) {
return;
}
if ( ! inputRef.current ) {
return;
}
inputRef.current.focus();
};
const handleAutoSizeInput = ( input ) => {
if ( input === '' ) {
autoSizer.current.innerHTML = placeholder;
return;
}
autoSizer.current.innerText = input;
};
const handleOnChangeInput = ( event ) => {
handleAutoSizeInput( event.target.value );
};
useEffect( () => {
if ( ! value ) {
setTags( [] );
return;
}
let tagValues = [];
if ( typeof value === 'string' ) {
tagValues = value.split( delimitersRegex ).filter( Boolean );
} else if ( Array.isArray( value ) ) {
tagValues = [ ...value ];
}
// Slice tags if maxTokens is set.
if ( maxTokens > 0 ) {
tagValues = tagValues.slice( 0, maxTokens );
}
if (
tags.length > 0 &&
tags.every( ( tag ) => tagValues.includes( tag ) )
) {
return;
}
setTags(
filterDuplicateValues ? [ ...new Set( tagValues ) ] : tagValues
);
}, [ value ] ); // eslint-disable-line
return (
{
if ( event.target.tagName !== 'INPUT' ) {
event.preventDefault();
}
} }
role="button"
tabIndex={ 0 }
onClick={ handleClickInputContainer }
onKeyDown={ ( event ) => {
if ( event.key === 'Enter' || event.key === ' ' ) {
handleClickInputContainer();
}
} }
>
{ tags.map( ( tag, index ) => (
{ tag }
handleDeleteTag( index ) }
className="flex-shrink-0 w-4 h-4 text-nav-inactive hover:text-nav-active bg-transparent border-0 cursor-pointer"
>
) ) }
{ ( tags.length < maxTokens || maxTokens === 0 ) && (
{ placeholder }
) }
);
};
export default TagsInput;
Skip to content