@salla.sa/twilight-components 2.10.7 → 2.11.0

package/dist/cjs/twilight.cjs.js

@@ -4,7 +4,7 @@
 'use strict';
 
 const index = require('./index-1d2b3370.js');
-const appGlobals = require('./app-globals-da038c01.js');
+const appGlobals = require('./app-globals-ffcb56c9.js');
 require('./_commonjsHelpers-691dd63b.js');
 
 /*
@@ -78,5 +78,5 @@ const patchDynamicImport = (base, orgScriptElm) => {
 
 patchBrowser().then(options => {
   appGlobals.globalScripts();
-  return index.bootstrapLazy(JSON.parse("[[\"salla-button_37.cjs\",[[4,\"salla-gifting\",{\"productId\":[2,\"product-id\"],\"sectionTitle\":[32],\"sectionSubtitle\":[32],\"sectionBtnText\":[32],\"giftDetails\":[32],\"selectImageForYourGift\":[32],\"selectImageOrUpload\":[32],\"selectGiftMessage\":[32],\"giftCustomText\":[32],\"textId\":[32],\"incorrectGiftText\":[32],\"nextStep\":[32],\"senderNameLabel\":[32],\"receiverNameFieldLabel\":[32],\"receiverMobileFieldLabel\":[32],\"receiverEmailFieldLabel\":[32],\"emailPlaceholder\":[32],\"sendLater\":[32],\"selectSendDateAndTime\":[32],\"canNotEditOrderAfterSelectDate\":[32],\"sendGift\":[32],\"donationRequired\":[32],\"step1Elems\":[32],\"step2Elems\":[32],\"stepsWrapper\":[32],\"textArea\":[32],\"imageCover\":[32],\"textSelect\":[32],\"customTextArea\":[32],\"calendarFormGroup\":[32],\"currentStep\":[32],\"showCalendar\":[32],\"showGiftText\":[32],\"currentLang\":[32],\"parentClass\":[32],\"errors\":[32],\"gift\":[32],\"selectedGiftTextOption\":[32],\"showTextArea\":[32],\"selectedImage\":[32],\"uploadedImage\":[32],\"selectedText\":[32],\"senderName\":[32],\"errorMessage\":[32],\"hasError\":[32],\"quantity\":[32],\"deliveryDate\":[32],\"timeZone\":[32],\"receiverName\":[32],\"receiverMobile\":[32],\"receiverCountryCode\":[32],\"receiverEmail\":[32],\"open\":[64],\"close\":[64],\"goToStep2\":[64]}],[4,\"salla-loyalty\",{\"prizePoints\":[8,\"prize-points\"],\"customerPoints\":[2,\"customer-points\"],\"prizeTitle\":[1,\"prize-title\"],\"allowEmail\":[4,\"allow-email\"],\"allowMobile\":[4,\"allow-mobile\"],\"requireEmail\":[4,\"require-email\"],\"guestMessage\":[1,\"guest-message\"],\"loyaltyProgram\":[32],\"buttonLoading\":[32],\"selectedItem\":[32],\"askConfirmation\":[32],\"is_loggedin\":[32],\"hasError\":[32],\"errorMessage\":[32],\"translationLoaded\":[32],\"open\":[64],\"close\":[64],\"resetExchange\":[64],\"exchangeLoyaltyPoint\":[64]}],[4,\"salla-product-size-guide\",{\"guides\":[32],\"productId\":[32],\"placeholder_title\":[32],\"placeholder_description\":[32],\"modal_title\":[32],\"hasError\":[32],\"open\":[64],\"close\":[64]}],[0,\"salla-offer-modal\",{\"offer\":[32],\"offer_name\":[32],\"offer_message\":[32],\"hasError\":[32],\"errorMessage\":[32],\"productID\":[32],\"translationLoaded\":[32],\"addToCartLabel\":[32],\"open\":[64],\"showOffer\":[64]}],[0,\"salla-rating-modal\",{\"orderId\":[2,\"order-id\"],\"order\":[32],\"hasError\":[32],\"errorMessage\":[32],\"translationLoaded\":[32],\"open\":[64],\"close\":[64]}],[4,\"salla-scopes\",{\"selection\":[1],\"searchDisplayLimit\":[2,\"search-display-limit\"],\"translationLoaded\":[32],\"mode\":[32],\"current_scope\":[32],\"scopes\":[32],\"originalScopesList\":[32],\"selected_scope\":[32],\"isOpenedBefore\":[32],\"hasError\":[32],\"loading\":[32],\"close\":[64],\"open\":[64],\"handleSubmit\":[64]}],[0,\"salla-localization-modal\",{\"language\":[1537],\"currency\":[1537],\"translationLoaded\":[32],\"languages\":[32],\"currencies\":[32],\"hasError\":[32],\"errorMessage\":[32],\"open\":[64],\"close\":[64],\"submit\":[64]}],[4,\"salla-login-modal\",{\"isEmailAllowed\":[1028,\"is-email-allowed\"],\"isMobileAllowed\":[1028,\"is-mobile-allowed\"],\"isEmailRequired\":[1028,\"is-email-required\"],\"supportWebAuth\":[516,\"support-web-auth\"],\"currentTabName\":[32],\"regType\":[32],\"translationLoaded\":[32],\"title\":[32],\"emailErrorMsg\":[32],\"firstNameErrorMsg\":[32],\"lastNameErrorMsg\":[32],\"open\":[64]},[[8,\"verified\",\"onVerified\"]]],[0,\"salla-quick-order\",{\"quickOrderTitle\":[1025,\"quick-order-title\"],\"subTitle\":[1025,\"sub-title\"],\"payButtonTitle\":[1025,\"pay-button-title\"],\"confirmPayButtonTitle\":[1025,\"confirm-pay-button-title\"],\"agreementText\":[1025,\"agreement-text\"],\"isEmailRequired\":[1028,\"is-email-required\"],\"productId\":[1025,\"product-id\"],\"thanksMessage\":[1025,\"thanks-message\"],\"quickOrderStyle\":[1025,\"quick-order-style\"],\"user\":[32],\"isAvailable\":[32],\"oneClick\":[32],\"expanded\":[32],\"isTermsRequired\":[32],\"countryCode\":[32],\"submitSucess\":[32],\"placeHolderEmail\":[32],\"emailOptional\":[32],\"agreementShowText\":[32],\"agreementModalHead\":[32],\"userNameLabel\":[32],\"termsChecked\":[32]}],[0,\"salla-user-settings\",{\"isNotifiable\":[516,\"is-notifiable\"],\"deactivateAccount\":[32],\"promotionalMsgs\":[32],\"deactivateDesc\":[32],\"promotionalMsgsDesc\":[32],\"sorryForLeavingText\":[32],\"warningText\":[32],\"keepAccount\":[32],\"buttonLoading\":[32]}],[4,\"salla-map\",{\"readonly\":[4],\"searchable\":[1028],\"lat\":[1026],\"lng\":[1026],\"apiKey\":[1025,\"api-key\"],\"title\":[1],\"zoom\":[1026],\"theme\":[1025],\"modalActivityTitle\":[32],\"confirmButtonTitle\":[32],\"locateButtonTitle\":[32],\"locateButtonEdit\":[32],\"searchInputValue\":[32],\"geolocationError\":[32],\"searchInput\":[32],\"mapElement\":[32],\"open\":[64]}],[0,\"salla-product-options\",{\"productId\":[2,\"product-id\"],\"options\":[1],\"optionsData\":[32],\"uploadedImage\":[32],\"outOfStockText\":[32],\"donationAmount\":[32]}],[0,\"salla-search\",{\"inline\":[4],\"oval\":[4],\"height\":[2],\"translationLoaded\":[32],\"results\":[32],\"loading\":[32],\"typing\":[32],\"debounce\":[32],\"search_term\":[32]},[[0,\"keydown\",\"handleKeyDown\"]]],[0,\"salla-comment-form\",{\"type\":[1],\"showAvatar\":[4,\"show-avatar\"],\"itemId\":[8,\"item-id\"],\"placeholder\":[32],\"submitText\":[32],\"canComment\":[32]}],[4,\"salla-social-share\",{\"url\":[513],\"urlName\":[513,\"url-name\"],\"platforms\":[513],\"opened\":[32],\"allPlatforms\":[32],\"platformIcons\":[32],\"convertedPlatforms\":[32],\"open\":[64]}],[4,\"salla-cart-summary\",{\"cartSummaryCount\":[32],\"cartSummaryTotal\":[32],\"animateToCart\":[64]}],[4,\"salla-color-picker\",{\"color\":[1],\"placement\":[8],\"format\":[1],\"showCancelButton\":[4,\"show-cancel-button\"],\"showTextField\":[4,\"show-text-field\"],\"enableAlpha\":[4,\"enable-alpha\"],\"widgetColor\":[32],\"setPickerOption\":[64],\"movePopUp\":[64],\"setColorValue\":[64],\"openPicker\":[64],\"closePicker\":[64],\"destroyPicker\":[64]}],[4,\"salla-infinite-scroll\",{\"nextPage\":[1,\"next-page\"],\"autoload\":[1028],\"container\":[1],\"item\":[1],\"loadMore\":[32],\"noMore\":[32],\"failedToLoad\":[32]}],[4,\"salla-quantity-input\",{\"quantity\":[32],\"decrease\":[64],\"increase\":[64],\"setValue\":[64]}],[0,\"salla-user-menu\",{\"inline\":[516],\"avatarOnly\":[516,\"avatar-only\"],\"showHeader\":[516,\"show-header\"],\"relativeDropdown\":[516,\"relative-dropdown\"],\"accountLoading\":[32],\"opened\":[32],\"notifications\":[32],\"orders\":[32],\"pending_orders\":[32],\"wishlist\":[32],\"profile\":[32],\"rating\":[32],\"logout\":[32],\"hello\":[32],\"first_name\":[32],\"last_name\":[32],\"has_red_dot\":[32],\"avatar\":[32],\"badges\":[32],\"OrderUpdate\":[32]}],[0,\"salla-product-availability\",{\"channels\":[1],\"productId\":[2,\"product-id\"],\"isSubscribed\":[1028,\"is-subscribed\"],\"translationLoaded\":[32],\"title_\":[32],\"isVisitorSubscribed\":[32]}],[4,\"salla-verify\",{\"display\":[1],\"type\":[1025],\"autoReload\":[4,\"auto-reload\"],\"supportWebAuth\":[4,\"support-web-auth\"],\"translationLoaded\":[32],\"title\":[32],\"resendAfter\":[32],\"isProfileVerify\":[32],\"getCode\":[64],\"open\":[64]}],[4,\"salla-conditional-fields\",null,[[0,\"change\",\"changeHandler\"]]],[0,\"salla-rating-stars\",{\"name\":[1],\"size\":[1],\"value\":[2]}],[0,\"salla-datetime-picker\",{\"value\":[1025],\"placeholder\":[1],\"allowInput\":[4,\"allow-input\"],\"allowInvalidPreload\":[4,\"allow-invalid-preload\"],\"altFormat\":[1,\"alt-format\"],\"altInput\":[4,\"alt-input\"],\"altInputClass\":[1,\"alt-input-class\"],\"appendTo\":[16],\"ariaDateFormat\":[1,\"aria-date-format\"],\"autoFillDefaultTime\":[4,\"auto-fill-default-time\"],\"clickOpens\":[4,\"click-opens\"],\"closeOnSelect\":[4,\"close-on-select\"],\"conjunction\":[1],\"dateFormat\":[1,\"date-format\"],\"defaultDate\":[8,\"default-date\"],\"defaultHour\":[2,\"default-hour\"],\"defaultMinute\":[2,\"default-minute\"],\"defaultSeconds\":[2,\"default-seconds\"],\"disable\":[16],\"disableMobile\":[4,\"disable-mobile\"],\"enable\":[16],\"enableSeconds\":[4,\"enable-seconds\"],\"enableTime\":[4,\"enable-time\"],\"formatDate\":[16],\"hourIncrement\":[2,\"hour-increment\"],\"inline\":[4],\"locale\":[1],\"maxDate\":[8,\"max-date\"],\"maxTime\":[8,\"max-time\"],\"minDate\":[8,\"min-date\"],\"minTime\":[8,\"min-time\"],\"minuteIncrement\":[2,\"minute-increment\"],\"mode\":[1],\"monthSelectorType\":[1,\"month-selector-type\"],\"nextArrow\":[1,\"next-arrow\"],\"noCalendar\":[4,\"no-calendar\"],\"dateParser\":[16],\"position\":[1],\"positionElement\":[16],\"prevArrow\":[1,\"prev-arrow\"],\"shorthandCurrentMonth\":[4,\"shorthand-current-month\"],\"static\":[4],\"showMonths\":[2,\"show-months\"],\"time_24hr\":[4,\"time_-2-4hr\"],\"weekNumbers\":[4,\"week-numbers\"],\"wrap\":[4]}],[0,\"salla-file-upload\",{\"required\":[4],\"disabled\":[4],\"allowDrop\":[4,\"allow-drop\"],\"allowBrowse\":[4,\"allow-browse\"],\"allowPaste\":[4,\"allow-paste\"],\"allowMultiple\":[4,\"allow-multiple\"],\"allowReplace\":[4,\"allow-replace\"],\"allowRevert\":[4,\"allow-revert\"],\"allowRemove\":[4,\"allow-remove\"],\"allowProcess\":[4,\"allow-process\"],\"allowReorder\":[4,\"allow-reorder\"],\"storeAsFile\":[4,\"store-as-file\"],\"forceRevert\":[4,\"force-revert\"],\"maxFilesCount\":[2,\"max-files-count\"],\"maxParallelUploads\":[2,\"max-parallel-uploads\"],\"checkValidity\":[4,\"check-validity\"],\"itemInsertLocation\":[1,\"item-insert-location\"],\"itemInsertInterval\":[2,\"item-insert-interval\"],\"credits\":[4],\"dropOnPage\":[4,\"drop-on-page\"],\"dropOnElement\":[4,\"drop-on-element\"],\"dropValidation\":[4,\"drop-validation\"],\"ignoredFiles\":[16],\"serverConfig\":[1,\"server-config\"],\"instantUpload\":[4,\"instant-upload\"],\"chunkUploads\":[4,\"chunk-uploads\"],\"chunkForce\":[4,\"chunk-force\"],\"chunkSize\":[2,\"chunk-size\"],\"chunkRetryDelays\":[16],\"labelDecimalSeparator\":[1,\"label-decimal-separator\"],\"labelThousandsSeparator\":[1,\"label-thousands-separator\"],\"labelIdle\":[1,\"label-idle\"],\"labelInvalidField\":[1,\"label-invalid-field\"],\"labelFileWaitingForSize\":[1,\"label-file-waiting-for-size\"],\"labelFileSizeNotAvailable\":[1,\"label-file-size-not-available\"],\"labelFileLoading\":[1,\"label-file-loading\"],\"labelFileLoadError\":[1,\"label-file-load-error\"],\"labelFileProcessing\":[1,\"label-file-processing\"],\"labelFileProcessingComplete\":[1,\"label-file-processing-complete\"],\"labelFileProcessingAborted\":[1,\"label-file-processing-aborted\"],\"labelFileProcessingError\":[1,\"label-file-processing-error\"],\"labelFileProcessingRevertError\":[1,\"label-file-processing-revert-error\"],\"labelFileRemoveError\":[1,\"label-file-remove-error\"],\"labelTapToCancel\":[1,\"label-tap-to-cancel\"],\"labelTapToRetry\":[1,\"label-tap-to-retry\"],\"labelTapToUndo\":[1,\"label-tap-to-undo\"],\"labelButtonRemoveItem\":[1,\"label-button-remove-item\"],\"labelButtonAbortItemLoad\":[1,\"label-button-abort-item-load\"],\"labelButtonRetryItemLoad\":[1,\"label-button-retry-item-load\"],\"labelButtonAbortItemProcessing\":[1,\"label-button-abort-item-processing\"],\"labelButtonUndoItemProcessing\":[1,\"label-button-undo-item-processing\"],\"labelButtonRetryItemProcessing\":[1,\"label-button-retry-item-processing\"],\"labelButtonProcessItem\":[1,\"label-button-process-item\"],\"iconRemove\":[1,\"icon-remove\"],\"iconProcess\":[1,\"icon-process\"],\"iconRetry\":[1,\"icon-retry\"],\"iconUndo\":[1,\"icon-undo\"],\"pond\":[32],\"files\":[32],\"appendFile\":[64]}],[4,\"salla-tab-content\",{\"name\":[1],\"isSelected\":[32],\"getChild\":[64]}],[4,\"salla-tab-header\",{\"name\":[1],\"activeClass\":[1,\"active-class\"],\"height\":[8],\"centered\":[4],\"isSelected\":[32],\"getChild\":[64]}],[4,\"salla-tabs\",{\"backgroundColor\":[1,\"background-color\"],\"vertical\":[4]},[[0,\"tabSelected\",\"onSelectedTab\"]]],[4,\"salla-slider\",{\"blockTitle\":[513,\"block-title\"],\"blockSubtitle\":[513,\"block-subtitle\"],\"displayAllUrl\":[513,\"display-all-url\"],\"verticalThumbs\":[516,\"vertical-thumbs\"],\"autoHeight\":[516,\"auto-height\"],\"showControls\":[516,\"show-controls\"],\"controlsOuter\":[516,\"controls-outer\"],\"showThumbsControls\":[4,\"show-thumbs-controls\"],\"autoPlay\":[4,\"auto-play\"],\"slidesPerView\":[1,\"slides-per-view\"],\"pagination\":[4],\"centered\":[4],\"loop\":[4],\"type\":[1],\"sliderConfig\":[520,\"slider-config\"],\"thumbsConfig\":[520,\"thumbs-config\"],\"currentIndex\":[32],\"isEnd\":[32],\"isBeginning\":[32],\"isRTL\":[32],\"swiperScript\":[32],\"displayAllTitle\":[32],\"slideTo\":[64],\"slideNext\":[64],\"slidePrev\":[64],\"slideToLoop\":[64],\"slideNextLoop\":[64],\"slidePrevLoop\":[64],\"slideReset\":[64],\"slideToClosest\":[64],\"update\":[64],\"updateAutoHeight\":[64],\"updateSlides\":[64],\"updateProgress\":[64],\"updateSlidesClasses\":[64],\"getSlides\":[64]}],[4,\"salla-list-tile\",{\"href\":[1],\"target\":[1]}],[0,\"salla-tel-input\",{\"phone\":[1025],\"name\":[1],\"countryCode\":[1025,\"country-code\"],\"mobileRequired\":[32],\"countryCodeLabel\":[32],\"mobileLabel\":[32],\"tooShort\":[32],\"tooLong\":[32],\"invalidCountryCode\":[32],\"invalidNumber\":[32],\"errorMap\":[32],\"getValues\":[64],\"isValid\":[64]}],[4,\"salla-placeholder\",{\"icon\":[1],\"alignment\":[1],\"iconSize\":[1,\"icon-size\"],\"translationLoaded\":[32]}],[0,\"salla-skeleton\",{\"type\":[1],\"width\":[1],\"height\":[1]}],[4,\"salla-modal\",{\"isClosable\":[1028,\"is-closable\"],\"width\":[513],\"position\":[513],\"visible\":[516],\"hasSkeleton\":[516,\"has-skeleton\"],\"isLoading\":[1540,\"is-loading\"],\"subTitleFirst\":[4,\"sub-title-first\"],\"noPadding\":[4,\"no-padding\"],\"subTitle\":[1,\"sub-title\"],\"centered\":[4],\"iconStyle\":[1,\"icon-style\"],\"modalTitle\":[32],\"open\":[64],\"close\":[64],\"setTitle\":[64],\"loading\":[64],\"stopLoading\":[64]},[[0,\"keyup\",\"handleKeyUp\"]]],[4,\"salla-button\",{\"shape\":[513],\"color\":[513],\"fill\":[513],\"size\":[513],\"width\":[513],\"loading\":[516],\"disabled\":[516],\"loaderPosition\":[1,\"loader-position\"],\"href\":[1],\"load\":[64],\"stop\":[64],\"setText\":[64],\"disable\":[64],\"enable\":[64]}],[0,\"salla-loading\",{\"size\":[8],\"width\":[8],\"color\":[1],\"bgColor\":[1,\"bg-color\"]}]]],[\"salla-add-product-button.cjs\",[[4,\"salla-add-product-button\",{\"channels\":[513],\"quantity\":[514],\"donatingAmount\":[514,\"donating-amount\"],\"productId\":[520,\"product-id\"],\"productStatus\":[513,\"product-status\"],\"productType\":[513,\"product-type\"]}]]],[\"salla-installment.cjs\",[[0,\"salla-installment\",{\"price\":[1],\"language\":[1],\"currency\":[1],\"tamaraIsActive\":[32],\"tabbyIsActive\":[32],\"spotiiIsActive\":[32]}]]],[\"salla-loyalty-prize-item.cjs\",[[0,\"salla-loyalty-prize-item\",{\"item\":[16]}]]],[\"salla-select.cjs\",[[0,\"salla-select\",{\"label\":[1],\"items\":[16],\"itemText\":[1,\"item-text\"],\"itemValue\":[1,\"item-value\"],\"itemDisabled\":[1,\"item-disabled\"],\"size\":[1],\"value\":[1032],\"autofocus\":[4],\"clearable\":[4],\"clearIcon\":[1,\"clear-icon\"],\"color\":[1],\"flat\":[4],\"disabled\":[4],\"loading\":[4],\"loadingColor\":[1,\"loading-color\"],\"hint\":[1],\"persistHint\":[4,\"persist-hint\"],\"placeholder\":[1],\"multiple\":[4],\"autocomplete\":[4],\"required\":[4],\"chips\":[4],\"shape\":[1],\"returnObject\":[4,\"return-object\"],\"hideDetail\":[4,\"hide-detail\"]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"salla-button_37.cjs\",[[4,\"salla-gifting\",{\"productId\":[2,\"product-id\"],\"sectionTitle\":[32],\"sectionSubtitle\":[32],\"sectionBtnText\":[32],\"giftDetails\":[32],\"selectImageForYourGift\":[32],\"selectImageOrUpload\":[32],\"selectGiftMessage\":[32],\"giftCustomText\":[32],\"textId\":[32],\"incorrectGiftText\":[32],\"nextStep\":[32],\"senderNameLabel\":[32],\"receiverNameFieldLabel\":[32],\"receiverMobileFieldLabel\":[32],\"receiverEmailFieldLabel\":[32],\"emailPlaceholder\":[32],\"sendLater\":[32],\"selectSendDateAndTime\":[32],\"canNotEditOrderAfterSelectDate\":[32],\"sendGift\":[32],\"donationRequired\":[32],\"currentStep\":[32],\"showCalendar\":[32],\"showGiftText\":[32],\"currentLang\":[32],\"parentClass\":[32],\"errors\":[32],\"gift\":[32],\"selectedGiftTextOption\":[32],\"showTextArea\":[32],\"selectedImage\":[32],\"uploadedImage\":[32],\"selectedText\":[32],\"senderName\":[32],\"errorMessage\":[32],\"hasError\":[32],\"quantity\":[32],\"deliveryDate\":[32],\"timeZone\":[32],\"receiverName\":[32],\"receiverMobile\":[32],\"receiverCountryCode\":[32],\"receiverEmail\":[32],\"open\":[64],\"close\":[64],\"goToStep2\":[64]}],[4,\"salla-loyalty\",{\"prizePoints\":[8,\"prize-points\"],\"customerPoints\":[2,\"customer-points\"],\"prizeTitle\":[1,\"prize-title\"],\"allowEmail\":[4,\"allow-email\"],\"allowMobile\":[4,\"allow-mobile\"],\"requireEmail\":[4,\"require-email\"],\"guestMessage\":[1,\"guest-message\"],\"loyaltyProgram\":[32],\"buttonLoading\":[32],\"selectedItem\":[32],\"askConfirmation\":[32],\"is_loggedin\":[32],\"hasError\":[32],\"errorMessage\":[32],\"translationLoaded\":[32],\"open\":[64],\"close\":[64],\"resetExchange\":[64],\"exchangeLoyaltyPoint\":[64]}],[4,\"salla-product-size-guide\",{\"guides\":[32],\"productId\":[32],\"placeholder_title\":[32],\"placeholder_description\":[32],\"modal_title\":[32],\"hasError\":[32],\"open\":[64],\"close\":[64]}],[4,\"salla-login-modal\",{\"isEmailAllowed\":[1028,\"is-email-allowed\"],\"isMobileAllowed\":[1028,\"is-mobile-allowed\"],\"isEmailRequired\":[1028,\"is-email-required\"],\"supportWebAuth\":[516,\"support-web-auth\"],\"currentTabName\":[32],\"regType\":[32],\"translationLoaded\":[32],\"title\":[32],\"emailErrorMsg\":[32],\"firstNameErrorMsg\":[32],\"lastNameErrorMsg\":[32],\"dragAndDrop\":[32],\"browseFromFiles\":[32],\"customFields\":[32],\"uploadedImage\":[32],\"open\":[64]},[[8,\"verified\",\"onVerified\"]]],[0,\"salla-offer-modal\",{\"offer\":[32],\"offer_name\":[32],\"offer_message\":[32],\"hasError\":[32],\"errorMessage\":[32],\"productID\":[32],\"translationLoaded\":[32],\"addToCartLabel\":[32],\"open\":[64],\"showOffer\":[64]}],[0,\"salla-rating-modal\",{\"orderId\":[2,\"order-id\"],\"order\":[32],\"hasError\":[32],\"errorMessage\":[32],\"translationLoaded\":[32],\"open\":[64],\"close\":[64]}],[4,\"salla-scopes\",{\"selection\":[1],\"searchDisplayLimit\":[2,\"search-display-limit\"],\"translationLoaded\":[32],\"mode\":[32],\"current_scope\":[32],\"scopes\":[32],\"originalScopesList\":[32],\"selected_scope\":[32],\"isOpenedBefore\":[32],\"hasError\":[32],\"loading\":[32],\"close\":[64],\"open\":[64],\"handleSubmit\":[64]}],[0,\"salla-localization-modal\",{\"language\":[1537],\"currency\":[1537],\"translationLoaded\":[32],\"languages\":[32],\"currencies\":[32],\"hasError\":[32],\"errorMessage\":[32],\"open\":[64],\"close\":[64],\"submit\":[64]}],[0,\"salla-quick-order\",{\"quickOrderTitle\":[1025,\"quick-order-title\"],\"subTitle\":[1025,\"sub-title\"],\"payButtonTitle\":[1025,\"pay-button-title\"],\"confirmPayButtonTitle\":[1025,\"confirm-pay-button-title\"],\"agreementText\":[1025,\"agreement-text\"],\"isEmailRequired\":[1028,\"is-email-required\"],\"productId\":[1025,\"product-id\"],\"thanksMessage\":[1025,\"thanks-message\"],\"quickOrderStyle\":[1025,\"quick-order-style\"],\"user\":[32],\"isAvailable\":[32],\"oneClick\":[32],\"expanded\":[32],\"isTermsRequired\":[32],\"countryCode\":[32],\"submitSucess\":[32],\"placeHolderEmail\":[32],\"emailOptional\":[32],\"agreementShowText\":[32],\"agreementModalHead\":[32],\"userNameLabel\":[32],\"termsChecked\":[32]}],[0,\"salla-user-settings\",{\"isNotifiable\":[516,\"is-notifiable\"],\"deactivateAccount\":[32],\"promotionalMsgs\":[32],\"deactivateDesc\":[32],\"promotionalMsgsDesc\":[32],\"sorryForLeavingText\":[32],\"warningText\":[32],\"keepAccount\":[32],\"buttonLoading\":[32]}],[4,\"salla-map\",{\"readonly\":[4],\"searchable\":[1028],\"lat\":[1026],\"lng\":[1026],\"apiKey\":[1025,\"api-key\"],\"modalTitle\":[1,\"modal-title\"],\"zoom\":[1026],\"theme\":[1025],\"modalActivityTitle\":[32],\"confirmButtonTitle\":[32],\"locateButtonTitle\":[32],\"locateButtonEdit\":[32],\"searchInputValue\":[32],\"geolocationError\":[32],\"searchInput\":[32],\"mapElement\":[32],\"open\":[64]}],[0,\"salla-product-options\",{\"productId\":[2,\"product-id\"],\"options\":[1],\"optionsData\":[32],\"uploadedImage\":[32],\"outOfStockText\":[32],\"donationAmount\":[32]}],[0,\"salla-search\",{\"inline\":[4],\"oval\":[4],\"height\":[2],\"translationLoaded\":[32],\"results\":[32],\"loading\":[32],\"typing\":[32],\"debounce\":[32],\"search_term\":[32]},[[0,\"keydown\",\"handleKeyDown\"]]],[0,\"salla-comment-form\",{\"type\":[1],\"showAvatar\":[4,\"show-avatar\"],\"itemId\":[8,\"item-id\"],\"placeholder\":[32],\"submitText\":[32],\"canComment\":[32]}],[4,\"salla-social-share\",{\"url\":[513],\"urlName\":[513,\"url-name\"],\"platforms\":[513],\"opened\":[32],\"allPlatforms\":[32],\"platformIcons\":[32],\"convertedPlatforms\":[32],\"open\":[64]}],[4,\"salla-cart-summary\",{\"cartSummaryCount\":[32],\"cartSummaryTotal\":[32],\"animateToCart\":[64]}],[4,\"salla-color-picker\",{\"color\":[1],\"placement\":[8],\"format\":[1],\"showCancelButton\":[4,\"show-cancel-button\"],\"showTextField\":[4,\"show-text-field\"],\"enableAlpha\":[4,\"enable-alpha\"],\"widgetColor\":[32],\"setPickerOption\":[64],\"movePopUp\":[64],\"setColorValue\":[64],\"openPicker\":[64],\"closePicker\":[64],\"destroyPicker\":[64]}],[4,\"salla-infinite-scroll\",{\"nextPage\":[1,\"next-page\"],\"autoload\":[1028],\"container\":[1],\"item\":[1],\"loadMore\":[32],\"noMore\":[32],\"failedToLoad\":[32]}],[4,\"salla-quantity-input\",{\"quantity\":[32],\"decrease\":[64],\"increase\":[64],\"setValue\":[64]}],[0,\"salla-user-menu\",{\"inline\":[516],\"avatarOnly\":[516,\"avatar-only\"],\"showHeader\":[516,\"show-header\"],\"relativeDropdown\":[516,\"relative-dropdown\"],\"accountLoading\":[32],\"opened\":[32],\"notifications\":[32],\"orders\":[32],\"pending_orders\":[32],\"wishlist\":[32],\"profile\":[32],\"rating\":[32],\"logout\":[32],\"hello\":[32],\"first_name\":[32],\"last_name\":[32],\"avatar\":[32],\"badges\":[32],\"OrderUpdate\":[32]}],[0,\"salla-product-availability\",{\"channels\":[1],\"productId\":[2,\"product-id\"],\"isSubscribed\":[1028,\"is-subscribed\"],\"translationLoaded\":[32],\"title_\":[32],\"isVisitorSubscribed\":[32]}],[4,\"salla-verify\",{\"display\":[1],\"type\":[1025],\"autoReload\":[4,\"auto-reload\"],\"supportWebAuth\":[4,\"support-web-auth\"],\"translationLoaded\":[32],\"title\":[32],\"resendAfter\":[32],\"isProfileVerify\":[32],\"getCode\":[64],\"open\":[64]}],[4,\"salla-conditional-fields\",null,[[0,\"change\",\"changeHandler\"]]],[0,\"salla-rating-stars\",{\"name\":[1],\"size\":[1],\"value\":[2]}],[0,\"salla-datetime-picker\",{\"value\":[1025],\"placeholder\":[1],\"allowInput\":[4,\"allow-input\"],\"allowInvalidPreload\":[4,\"allow-invalid-preload\"],\"altFormat\":[1,\"alt-format\"],\"altInput\":[4,\"alt-input\"],\"altInputClass\":[1,\"alt-input-class\"],\"appendTo\":[16],\"ariaDateFormat\":[1,\"aria-date-format\"],\"autoFillDefaultTime\":[4,\"auto-fill-default-time\"],\"clickOpens\":[4,\"click-opens\"],\"closeOnSelect\":[4,\"close-on-select\"],\"conjunction\":[1],\"dateFormat\":[1,\"date-format\"],\"defaultDate\":[8,\"default-date\"],\"defaultHour\":[2,\"default-hour\"],\"defaultMinute\":[2,\"default-minute\"],\"defaultSeconds\":[2,\"default-seconds\"],\"disable\":[16],\"disableMobile\":[4,\"disable-mobile\"],\"enable\":[16],\"enableSeconds\":[4,\"enable-seconds\"],\"enableTime\":[4,\"enable-time\"],\"formatDate\":[16],\"hourIncrement\":[2,\"hour-increment\"],\"inline\":[4],\"locale\":[1],\"maxDate\":[8,\"max-date\"],\"maxTime\":[8,\"max-time\"],\"minDate\":[8,\"min-date\"],\"minTime\":[8,\"min-time\"],\"minuteIncrement\":[2,\"minute-increment\"],\"mode\":[1],\"monthSelectorType\":[1,\"month-selector-type\"],\"nextArrow\":[1,\"next-arrow\"],\"noCalendar\":[4,\"no-calendar\"],\"dateParser\":[16],\"position\":[1],\"positionElement\":[16],\"prevArrow\":[1,\"prev-arrow\"],\"shorthandCurrentMonth\":[4,\"shorthand-current-month\"],\"static\":[4],\"showMonths\":[2,\"show-months\"],\"time_24hr\":[4,\"time_-2-4hr\"],\"weekNumbers\":[4,\"week-numbers\"],\"wrap\":[4]}],[4,\"salla-tab-content\",{\"name\":[1],\"isSelected\":[32],\"getChild\":[64]}],[4,\"salla-tab-header\",{\"name\":[1],\"activeClass\":[1,\"active-class\"],\"height\":[8],\"centered\":[4],\"isSelected\":[32],\"getChild\":[64]}],[4,\"salla-tabs\",{\"backgroundColor\":[1,\"background-color\"],\"vertical\":[4]},[[0,\"tabSelected\",\"onSelectedTab\"]]],[4,\"salla-slider\",{\"blockTitle\":[513,\"block-title\"],\"blockSubtitle\":[513,\"block-subtitle\"],\"displayAllUrl\":[513,\"display-all-url\"],\"verticalThumbs\":[516,\"vertical-thumbs\"],\"vertical\":[516],\"autoHeight\":[516,\"auto-height\"],\"showControls\":[516,\"show-controls\"],\"controlsOuter\":[516,\"controls-outer\"],\"showThumbsControls\":[4,\"show-thumbs-controls\"],\"autoPlay\":[4,\"auto-play\"],\"slidesPerView\":[1,\"slides-per-view\"],\"pagination\":[4],\"centered\":[4],\"loop\":[4],\"type\":[1],\"sliderConfig\":[520,\"slider-config\"],\"thumbsConfig\":[520,\"thumbs-config\"],\"currentIndex\":[32],\"isEnd\":[32],\"isBeginning\":[32],\"isRTL\":[32],\"swiperScript\":[32],\"displayAllTitle\":[32],\"slideTo\":[64],\"slideNext\":[64],\"slidePrev\":[64],\"slideToLoop\":[64],\"slideNextLoop\":[64],\"slidePrevLoop\":[64],\"slideReset\":[64],\"slideToClosest\":[64],\"update\":[64],\"updateAutoHeight\":[64],\"updateSlides\":[64],\"updateProgress\":[64],\"updateSlidesClasses\":[64],\"getSlides\":[64]}],[0,\"salla-file-upload\",{\"uploadedImage\":[1025,\"uploaded-image\"],\"required\":[4],\"disabled\":[4],\"allowDrop\":[4,\"allow-drop\"],\"allowBrowse\":[4,\"allow-browse\"],\"allowPaste\":[4,\"allow-paste\"],\"allowMultiple\":[4,\"allow-multiple\"],\"allowReplace\":[4,\"allow-replace\"],\"allowRevert\":[4,\"allow-revert\"],\"allowRemove\":[4,\"allow-remove\"],\"allowProcess\":[4,\"allow-process\"],\"allowReorder\":[4,\"allow-reorder\"],\"storeAsFile\":[4,\"store-as-file\"],\"forceRevert\":[4,\"force-revert\"],\"maxFilesCount\":[2,\"max-files-count\"],\"maxParallelUploads\":[2,\"max-parallel-uploads\"],\"checkValidity\":[4,\"check-validity\"],\"itemInsertLocation\":[1,\"item-insert-location\"],\"itemInsertInterval\":[2,\"item-insert-interval\"],\"credits\":[4],\"dropOnPage\":[4,\"drop-on-page\"],\"dropOnElement\":[4,\"drop-on-element\"],\"dropValidation\":[4,\"drop-validation\"],\"ignoredFiles\":[16],\"serverConfig\":[1,\"server-config\"],\"instantUpload\":[4,\"instant-upload\"],\"chunkUploads\":[4,\"chunk-uploads\"],\"chunkForce\":[4,\"chunk-force\"],\"chunkSize\":[2,\"chunk-size\"],\"chunkRetryDelays\":[16],\"labelDecimalSeparator\":[1,\"label-decimal-separator\"],\"labelThousandsSeparator\":[1,\"label-thousands-separator\"],\"labelIdle\":[1,\"label-idle\"],\"labelInvalidField\":[1,\"label-invalid-field\"],\"labelFileWaitingForSize\":[1,\"label-file-waiting-for-size\"],\"labelFileSizeNotAvailable\":[1,\"label-file-size-not-available\"],\"labelFileLoading\":[1,\"label-file-loading\"],\"labelFileLoadError\":[1,\"label-file-load-error\"],\"labelFileProcessing\":[1,\"label-file-processing\"],\"labelFileProcessingComplete\":[1,\"label-file-processing-complete\"],\"labelFileProcessingAborted\":[1,\"label-file-processing-aborted\"],\"labelFileProcessingError\":[1,\"label-file-processing-error\"],\"labelFileProcessingRevertError\":[1,\"label-file-processing-revert-error\"],\"labelFileRemoveError\":[1,\"label-file-remove-error\"],\"labelTapToCancel\":[1,\"label-tap-to-cancel\"],\"labelTapToRetry\":[1,\"label-tap-to-retry\"],\"labelTapToUndo\":[1,\"label-tap-to-undo\"],\"labelButtonRemoveItem\":[1,\"label-button-remove-item\"],\"labelButtonAbortItemLoad\":[1,\"label-button-abort-item-load\"],\"labelButtonRetryItemLoad\":[1,\"label-button-retry-item-load\"],\"labelButtonAbortItemProcessing\":[1,\"label-button-abort-item-processing\"],\"labelButtonUndoItemProcessing\":[1,\"label-button-undo-item-processing\"],\"labelButtonRetryItemProcessing\":[1,\"label-button-retry-item-processing\"],\"labelButtonProcessItem\":[1,\"label-button-process-item\"],\"iconRemove\":[1,\"icon-remove\"],\"iconProcess\":[1,\"icon-process\"],\"iconRetry\":[1,\"icon-retry\"],\"iconUndo\":[1,\"icon-undo\"],\"pond\":[32],\"files\":[32],\"appendFile\":[64]}],[4,\"salla-list-tile\",{\"href\":[1],\"target\":[1]}],[0,\"salla-tel-input\",{\"phone\":[1025],\"name\":[1],\"countryCode\":[1025,\"country-code\"],\"mobileRequired\":[32],\"countryCodeLabel\":[32],\"mobileLabel\":[32],\"tooShort\":[32],\"tooLong\":[32],\"invalidCountryCode\":[32],\"invalidNumber\":[32],\"errorMap\":[32],\"getValues\":[64],\"isValid\":[64]}],[4,\"salla-placeholder\",{\"icon\":[1],\"alignment\":[1],\"iconSize\":[1,\"icon-size\"],\"translationLoaded\":[32]}],[0,\"salla-skeleton\",{\"type\":[1],\"width\":[1],\"height\":[1]}],[4,\"salla-modal\",{\"isClosable\":[1028,\"is-closable\"],\"width\":[513],\"position\":[513],\"visible\":[516],\"hasSkeleton\":[516,\"has-skeleton\"],\"isLoading\":[1540,\"is-loading\"],\"subTitleFirst\":[4,\"sub-title-first\"],\"noPadding\":[4,\"no-padding\"],\"subTitle\":[1,\"sub-title\"],\"centered\":[4],\"iconStyle\":[1,\"icon-style\"],\"modalTitle\":[32],\"open\":[64],\"close\":[64],\"setTitle\":[64],\"loading\":[64],\"stopLoading\":[64]},[[0,\"keyup\",\"handleKeyUp\"]]],[4,\"salla-button\",{\"shape\":[513],\"color\":[513],\"fill\":[513],\"size\":[513],\"width\":[513],\"loading\":[516],\"disabled\":[516],\"loaderPosition\":[1,\"loader-position\"],\"href\":[1],\"load\":[64],\"stop\":[64],\"setText\":[64],\"disable\":[64],\"enable\":[64]}],[0,\"salla-loading\",{\"size\":[8],\"width\":[8],\"color\":[1],\"bgColor\":[1,\"bg-color\"]}]]],[\"salla-add-product-button.cjs\",[[4,\"salla-add-product-button\",{\"channels\":[513],\"quantity\":[514],\"donatingAmount\":[514,\"donating-amount\"],\"productId\":[520,\"product-id\"],\"productStatus\":[513,\"product-status\"],\"productType\":[513,\"product-type\"]}]]],[\"salla-installment.cjs\",[[0,\"salla-installment\",{\"price\":[1],\"language\":[1],\"currency\":[1],\"tamaraIsActive\":[32],\"tabbyIsActive\":[32],\"spotiiIsActive\":[32]}]]],[\"salla-loyalty-prize-item.cjs\",[[0,\"salla-loyalty-prize-item\",{\"item\":[16]}]]],[\"salla-select.cjs\",[[0,\"salla-select\",{\"label\":[1],\"items\":[16],\"itemText\":[1,\"item-text\"],\"itemValue\":[1,\"item-value\"],\"itemDisabled\":[1,\"item-disabled\"],\"size\":[1],\"value\":[1032],\"autofocus\":[4],\"clearable\":[4],\"clearIcon\":[1,\"clear-icon\"],\"color\":[1],\"flat\":[4],\"disabled\":[4],\"loading\":[4],\"loadingColor\":[1,\"loading-color\"],\"hint\":[1],\"persistHint\":[4,\"persist-hint\"],\"placeholder\":[1],\"multiple\":[4],\"autocomplete\":[4],\"required\":[4],\"chips\":[4],\"shape\":[1],\"returnObject\":[4,\"return-object\"],\"hideDetail\":[4,\"hide-detail\"]}]]]]"), options);
 });

package/dist/collection/components/salla-file-upload/salla-file-upload.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { Component, Prop, State, h, Method, Host, Event } from '@stencil/core';
+import { Component, Prop, State, h, Method, Element, Host, Event } from '@stencil/core';
 import * as FilePond from 'filepond';
 import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size';
 import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
@@ -10,6 +10,10 @@ import FilePondPluginImageEdit from 'filepond-plugin-image-edit';
 import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
 export class SallaFileUpload {
   constructor() {
+    /**
+     * The uploaded image link or URL
+     */
+    this.uploadedImage = undefined;
     /**
      * Sets the required attribute to the output field
      */
@@ -115,7 +119,28 @@ export class SallaFileUpload {
     /**
      * A server configuration object describing how FilePond should interact with the server.
      */
-    this.serverConfig = null;
+    this.serverConfig = {
+      process: async (_fieldName, file, _metadata, load, error, _progress, abort, _transfer, _options) => {
+        const formData = new FormData();
+        formData.append("image_url", file, file.name);
+        return await salla.product.uploadGiftImage(formData)
+          .then((resp) => {
+          this.uploadedImage = resp.data.url;
+          this.uploaded.emit(resp.data.url);
+          load('success');
+        }).catch(e => {
+          console.log(e);
+          error('error');
+        })
+          .finally(() => {
+          return {
+            abort: () => {
+              abort();
+            },
+          };
+        });
+      }
+    };
     /**
      * Immediately upload new files to the server
      */
@@ -267,7 +292,7 @@ export class SallaFileUpload {
   }
   intiFilePond() {
     FilePond.registerPlugin(FilePondPluginImagePreview, FilePondPluginImageExifOrientation, FilePondPluginFileValidateSize, FilePondPluginImageEdit, FilePondPluginFileValidateType);
-    return FilePond.create(document.querySelector('.s-file-upload-input'), {
+    return FilePond.create(this.fileUploader, {
       files: this.files,
       required: this.required,
       disabled: this.disabled,
@@ -305,13 +330,17 @@ export class SallaFileUpload {
       labelFileWaitingForSize: this.labelFileWaitingForSize,
       beforeRemoveFile: (file_deleted) => new Promise((resolve) => {
         this.remove.emit(file_deleted);
+        setTimeout(() => {
+          // TODO: needs a better way
+          this.host.style.height = '120px !important';
+        }, 1000);
         resolve(true);
       }),
     });
   }
   render() {
     return (h(Host, { class: "s-file-upload" },
-      h("input", { type: "file", class: "s-file-upload-wrapper s-file-upload-input", name: "filepond", accept: "image/png, image/jpeg, image/jpg, image/gif" })));
+      h("input", { type: "file", class: "s-file-upload-wrapper s-file-upload-input", ref: ele => this.fileUploader = ele, name: "filepond", accept: "image/png, image/jpeg, image/jpg, image/gif" })));
   }
   static get is() { return "salla-file-upload"; }
   static get originalStyleUrls() { return {
@@ -321,6 +350,24 @@ export class SallaFileUpload {
     "$": ["salla-file-upload.css"]
   }; }
   static get properties() { return {
+    "uploadedImage": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The uploaded image link or URL"
+      },
+      "attribute": "uploaded-image",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
     "required": {
       "type": "boolean",
       "mutable": false,
@@ -746,7 +793,7 @@ export class SallaFileUpload {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string | {\n    url?: string\n    timeout?: number\n    headers?: { [key: string]: string | boolean | number };\n    process?: string | ServerUrl | ProcessServerConfigFunction | null;\n    revert?: string | ServerUrl | RevertServerConfigFunction | null;\n    restore?: string | ServerUrl | RestoreServerConfigFunction | null;\n    load?: string | ServerUrl | LoadServerConfigFunction | null;\n    fetch?: string | ServerUrl | FetchServerConfigFunction | null;\n    remove?: RemoveServerConfigFunction | null;\n  } | null",
+        "original": "string | {\n    url?: string\n    timeout?: number\n    headers?: { [key: string]: string | boolean | number };\n    process?: string | ServerUrl | ProcessServerConfigFunction | null;\n    revert?: string | ServerUrl | RevertServerConfigFunction | null;\n    restore?: string | ServerUrl | RestoreServerConfigFunction | null;\n    load?: string | ServerUrl | LoadServerConfigFunction | null;\n    fetch?: string | ServerUrl | FetchServerConfigFunction | null;\n    remove?: RemoveServerConfigFunction | null;\n  }",
         "resolved": "string | { url?: string; timeout?: number; headers?: { [key: string]: string | number | boolean; }; process?: string | ServerUrl | ProcessServerConfigFunction; revert?: string | ServerUrl | RevertServerConfigFunction; restore?: string | ServerUrl | RestoreServerConfigFunction; load?: string | ServerUrl | LoadServerConfigFunction; fetch?: string | ServerUrl | FetchServerConfigFunction; remove?: RemoveServerConfigFunction; }",
         "references": {
           "ServerUrl": {
@@ -787,7 +834,7 @@ export class SallaFileUpload {
       },
       "attribute": "server-config",
       "reflect": false,
-      "defaultValue": "null"
+      "defaultValue": "{\n      process: async (_fieldName, file, _metadata, load, error, _progress, abort, _transfer, _options) => {\n        const formData = new FormData();\n        formData.append(\"image_url\", file, file.name);\n        return await salla.product.uploadGiftImage(formData)\n          .then((resp) => {\n            this.uploadedImage = resp.data.url\n            this.uploaded.emit(resp.data.url);\n            load('success')\n          }).catch(e => {\n            console.log(e)\n            error('error')\n          })\n          .finally(() => {\n            return {\n              abort: () => {\n                abort();\n              },\n            };\n          })\n      }\n    }"
     },
     "instantUpload": {
       "type": "boolean",
@@ -1391,6 +1438,21 @@ export class SallaFileUpload {
     "files": {}
   }; }
   static get events() { return [{
+      "method": "uploaded",
+      "name": "uploaded",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event emitted when the file has been uploaded and link to the file has been recieved from the server. Returns string value."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
       "method": "remove",
       "name": "remove",
       "bubbles": true,
@@ -1431,4 +1493,5 @@ export class SallaFileUpload {
       }
     }
   }; }
+  static get elementRef() { return "host"; }
 }

package/dist/collection/components/salla-gifting/salla-gifting.js

@@ -4,7 +4,6 @@
 import anime from 'animejs';
 import { Component, h, Prop, State, Method } from '@stencil/core';
 import Images from '../../assets/svg/images.svg';
-import RightArrow from '../../assets/svg/arrow-right.svg';
 import LeftArrow from '../../assets/svg/arrow-left.svg';
 import Cancel from '../../assets/svg/cancel.svg';
 import GiftSharing from '../../assets/svg/gift-sharing.svg';
@@ -29,13 +28,6 @@ export class SallaGifting {
     salla.lang.onLoaded(() => {
       this.selectImageOrUpload = salla.lang.get('blocks.buy_as_gift.select_image_or_upload');
       this.selectImageForYourGift = salla.lang.get('blocks.buy_as_gift.select_image_for_your_gift');
-      this.step1Elems = document.querySelectorAll('.gift-step-1 .anime-item');
-      this.step2Elems = document.querySelectorAll('.gift-step-2 .anime-item');
-      this.imageCover = document.querySelector('.s-gifting-modal-uploader');
-      this.stepsWrapper = document.querySelector('.steps-wrapper');
-      this.textSelect = document.querySelector('.s-gifting-selectText');
-      this.customTextArea = document.querySelector('.s-gifting-textarea');
-      this.calendarFormGroup = document.querySelector('.s-gifting-calendar');
       this.sectionTitle = salla.lang.get('blocks.buy_as_gift.gift_the_one_you_love');
       this.sectionSubtitle = salla.lang.get('blocks.buy_as_gift.gift_the_one_you_love_message');
       this.sectionBtnText = salla.lang.get('blocks.buy_as_gift.send_as_a_gift');
@@ -129,25 +121,24 @@ export class SallaGifting {
   * Go to the step 2
   */
   async goToStep2() {
-    var _a, _b, _c, _d, _e, _f;
     if (!this.selectedGiftTextOption) {
-      (_a = this.textSelect) === null || _a === void 0 ? void 0 : _a.classList.add('s-form-has-error');
-      (_b = this.customTextArea) === null || _b === void 0 ? void 0 : _b.classList.remove('s-form-has-error');
+      this.textSelect.classList.add('s-form-has-error');
+      this.customTextArea.classList.remove('s-form-has-error');
       return;
     }
     else if (this.selectedGiftTextOption == 'custom' && !this.selectedText) {
-      (_c = this.textSelect) === null || _c === void 0 ? void 0 : _c.classList.remove('s-form-has-error');
-      (_d = this.customTextArea) === null || _d === void 0 ? void 0 : _d.classList.add('s-form-has-error');
+      this.textSelect.classList.remove('s-form-has-error');
+      this.customTextArea.classList.add('s-form-has-error');
       return;
     }
     else {
-      (_e = this.textSelect) === null || _e === void 0 ? void 0 : _e.classList.remove('s-form-has-error');
-      (_f = this.customTextArea) === null || _f === void 0 ? void 0 : _f.classList.remove('s-form-has-error');
+      this.textSelect.classList.remove('s-form-has-error');
+      this.customTextArea.classList.remove('s-form-has-error');
     }
     this.setWrapperHeight(2, 600, 0);
     let stepNextAnime = new anime.timeline();
     stepNextAnime.add({
-      targets: this.step1Elems,
+      targets: this.step1Elems.querySelectorAll('.anime-item'),
       opacity: [1, 0],
       translateX: [0, 50],
       delay: anime.stagger(70),
@@ -160,13 +151,13 @@ export class SallaGifting {
       opacity: [0, 1],
     }, '-=1800')
       .add({
-      targets: this.step2Elems,
+      targets: this.step2Elems.querySelectorAll('.anime-item'),
       opacity: [0, 1],
       translateX: [-50, 0],
       delay: anime.stagger(70),
       duration: 1200,
       complete: () => {
-        this.step2Elems.forEach(item => {
+        this.step2Elems.querySelectorAll('.anime-item').forEach(item => {
           item.classList.remove('opacity-0');
           item.removeAttribute('style');
         });
@@ -179,12 +170,13 @@ export class SallaGifting {
     *
     * Go to the step 1
     */
-  goToStep1() {
+  goToStep1(e) {
+    e.preventDefault();
     let stepBackAnime = new anime.timeline({
       autoplay: false,
     });
     stepBackAnime.add({
-      targets: this.step2Elems,
+      targets: this.step2Elems.querySelectorAll('.anime-item'),
       opacity: [1, 0],
       translateX: [0, -50],
       delay: anime.stagger(70),
@@ -197,13 +189,13 @@ export class SallaGifting {
       opacity: [0, 1],
     }, '-=1800')
       .add({
-      targets: this.step1Elems,
+      targets: this.step1Elems.querySelectorAll('.anime-item'),
       opacity: [0, 1],
       translateX: [50, 0],
       delay: anime.stagger(70),
       duration: 1200,
       complete: () => {
-        this.step1Elems.forEach(item => {
+        this.step1Elems.querySelectorAll('.anime-item').forEach(item => {
           item.classList.remove('opacity-0');
           item.removeAttribute('style');
         });
@@ -219,19 +211,19 @@ export class SallaGifting {
   }
   setPreview(image) {
     var _a, _b;
-    (_a = this.imageCover) === null || _a === void 0 ? void 0 : _a.classList.add('has-bg');
+    (_a = this.uploader) === null || _a === void 0 ? void 0 : _a.classList.add('has-bg');
     var bg = document.querySelector('.filepond-bg') ? document.querySelector('.filepond-bg') : document.createElement('div');
     bg.classList.add('filepond-bg');
     bg.classList.remove('s-hidden');
     bg.style.backgroundImage = "url('" + image.url + "')";
-    (_b = this.imageCover) === null || _b === void 0 ? void 0 : _b.querySelector('.filepond--root').appendChild(bg);
+    (_b = this.uploader) === null || _b === void 0 ? void 0 : _b.querySelector('.filepond--root').appendChild(bg);
     this.uploadedImage = image.url;
     if (!!this.gift && this.gift.gift_images.length) {
       this.setWrapperHeight(1, 150, 0);
     }
   }
   removePreview() {
-    this.imageCover.classList.remove('has-bg');
+    this.uploader.classList.remove('has-bg');
     let bg = document.querySelector('.filepond-bg');
     bg.removeAttribute('style');
     bg.classList.add('s-hidden');
@@ -383,10 +375,10 @@ export class SallaGifting {
                           h("span", null, this.currentStep),
                           "/2")),
                       h("span", null, this.giftDetails)))),
-                h("div", { class: "s-gifting-steps-wrapper steps-wrapper " + this.parentClass },
-                  h("div", { class: "s-gifting-step-one gift-step-1" },
+                h("div", { class: "s-gifting-steps-wrapper " + this.parentClass, ref: el => this.stepsWrapper = el },
+                  h("div", { class: "s-gifting-step-one gift-step-1", ref: el => this.step1Elems = el },
                     h("div", { class: "s-gifting-modal-uploader-title anime-item" }, this.selectImageForYourGift),
-                    h("div", { class: "s-gifting-modal-uploader anime-item" },
+                    h("div", { class: "s-gifting-modal-uploader anime-item", ref: el => this.uploader = el },
                       h("span", { class: "s-gifting-remove-preview", onClick: () => this.removePreview(), innerHTML: Cancel }),
                       this.selectImageOrUpload && h("salla-file-upload", { "instant-upload": true, labelIdle: this.getFilepondPlaceholder(), serverConfig: this.getServerConfig(), onRemove: () => this.handleRemoveImage() }, " ")),
                     h("div", { class: "anime-item" }, !this.uploadedImage && !!this.gift && this.gift.gift_images.length > 0 ?
@@ -394,20 +386,20 @@ export class SallaGifting {
                         h("div", { slot: "items" }, (_a = this.gift) === null || _a === void 0 ? void 0 : _a.gift_images.map((item) => h("img", { class: "s-gifting-image s-gifting-clickable", src: item.url, onClick: () => this.setPreview(item), alt: `${item.id}` }))))
                       : ""),
                     h("div", { class: "anime-item" },
-                      h("div", { class: "s-form-group s-gifting-selectText" },
+                      h("div", { class: "s-form-group s-gifting-selectText", ref: el => this.textSelect = el },
                         h("label", { htmlFor: "gift-text-selection", class: "s-form-label" }, this.selectGiftMessage),
                         h("select", { id: "gift-text-selection", name: "gift-text-selection", class: "s-form-control s-gifting-select", onChange: e => this.toggleGiftText(e) },
                           h("option", { "data-id": null, selected: true }, this.selectGiftMessage), (_b = this.gift) === null || _b === void 0 ? void 0 :
                           _b.gift_texts.map((txt) => h("option", { "data-id": txt.id, value: txt.text, key: txt.id }, txt.text)),
                           h("option", { "data-id": "custom" }, this.giftCustomText))),
-                      h("div", { class: this.showGiftText ? "s-form-group s-gifting-textarea shown" : "s-form-group s-gifting-textarea hide" },
+                      h("div", { class: this.showGiftText ? "s-form-group s-gifting-textarea shown" : "s-form-group s-gifting-textarea hide", ref: (el) => this.customTextArea = el },
                         h("label", { htmlFor: "gift-custom-text", class: "s-form-label" }, this.giftCustomText),
                         h("div", { class: "mt-1" },
                           h("textarea", { onInput: (event) => this.handleTextAreaChange(event), rows: 4, ref: (el) => this.textArea = el, name: "gift-custom-text", id: "gift-custom-text", class: "s-form-control" })))),
                     h("div", { class: "anime-item" },
                       h("salla-button", { color: "primary", width: "wide", onClick: () => this.goToStep2() },
                         h("span", null, this.nextStep)))),
-                  h("div", { class: "s-gifting-step-two gift-step-2" },
+                  h("div", { class: "s-gifting-step-two gift-step-2", ref: el => this.step2Elems = el },
                     h("div", { class: this.errors && this.errors['sender_name'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" },
                       h("label", { htmlFor: "sender_name", class: "s-form-label" }, this.senderNameLabel),
                       h("input", { type: "text", class: "s-form-control", name: "sender_name", id: "sender_name", value: this.senderName, onInput: (event) => this.handleSenderName(event), placeholder: "" }),
@@ -427,12 +419,12 @@ export class SallaGifting {
                           " ",
                           this.sendLater,
                           " "))),
-                    h("div", { class: this.getCalendarClasses() },
+                    h("div", { class: this.getCalendarClasses(), ref: (el) => this.calendarFormGroup = el },
                       h("label", { class: "s-form-label" }, this.selectSendDateAndTime),
                       h("salla-datetime-picker", { value: this.deliveryDate, placeholder: this.selectSendDateAndTime, "enable-time": true, "date-format": "Y-m-d h:i K", onPicked: (event) => this.handleDateTimePicker(event) }),
                       h("span", { class: "s-gifting-calendar-hint" }, this.canNotEditOrderAfterSelectDate)),
                     h("div", { class: "s-gifting-step-two-footer anime-item opacity-0" },
-                      h("a", { href: "#!", innerHTML: this.currentLang == 'ar' ? RightArrow : LeftArrow, onClick: () => this.goToStep1() }),
+                      h("a", { href: "#!", innerHTML: LeftArrow, onClick: (e) => this.goToStep1(e) }),
                       h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' },
                         h("span", null, this.sendGift)))))
               ],
@@ -487,14 +479,6 @@ export class SallaGifting {
     "canNotEditOrderAfterSelectDate": {},
     "sendGift": {},
     "donationRequired": {},
-    "step1Elems": {},
-    "step2Elems": {},
-    "stepsWrapper": {},
-    "textArea": {},
-    "imageCover": {},
-    "textSelect": {},
-    "customTextArea": {},
-    "calendarFormGroup": {},
     "currentStep": {},
     "showCalendar": {},
     "showGiftText": {},

package/dist/collection/components/salla-login-modal/intefaces.js

@@ -0,0 +1,9 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+export var CustomFieldType;
+(function (CustomFieldType) {
+  CustomFieldType["TEXT"] = "text";
+  CustomFieldType["NUMBER"] = "number";
+  CustomFieldType["PHOTO"] = "photo";
+})(CustomFieldType || (CustomFieldType = {}));

package/dist/collection/components/salla-login-modal/salla-login-modal.js

@@ -5,9 +5,11 @@ import { Component, Element, h, Listen, Method, Prop, State } from '@stencil/cor
 import UserIcon from "../../assets/svg/user.svg";
 import PhoneIcon from "../../assets/svg/phone.svg";
 import EmailIcon from "../../assets/svg/mail.svg";
+import CameraIcon from '../../assets/svg/camera.svg';
 import KeyboardArrowRightIcon from "../../assets/svg/keyboard_arrow_right.svg";
 import ArrowRightIcon from "../../assets/svg/arrow-right.svg";
 import Helper from '../../Helpers/Helper';
+import { CustomFieldType } from './intefaces';
 /**
  * @slot footer - The footer of modal
  * @slot before-login-type - placeholder position
@@ -40,6 +42,11 @@ export class SallaLoginModal {
     this.currentTabName = 'home';
     this.regType = 'phone';
     this.translationLoaded = false;
+    this.dragAndDrop = salla.lang.get('common.uploader.drag_and_drop');
+    this.browseFromFiles = salla.lang.get('common.uploader.browse');
+    this.customFields = [];
+    this.customFieldsValues = {};
+    this.uploadedImage = undefined;
     this.typing = (e, submitMethod = null) => {
       const error = e.target.nextElementSibling;
       e.target.classList.remove('s-has-error');
@@ -77,6 +84,7 @@ export class SallaLoginModal {
         phone: regPhone || this.loginTelInput.phone,
         country_code: countryCode,
         verified_by: this.regType,
+        custom_fields: this.customFieldsValues,
       };
       emailValue && (data = Object.assign(Object.assign({}, data), { email: emailValue }));
       this.verifyTab.getCode()
@@ -95,6 +103,8 @@ export class SallaLoginModal {
     salla.lang.onLoaded(() => {
       this.translationLoaded = true;
       this.title = salla.lang.get('blocks.header.login');
+      this.dragAndDrop = salla.lang.get('common.uploader.drag_and_drop');
+      this.browseFromFiles = salla.lang.get('common.uploader.browse');
       this.updateTranslations();
     });
     salla.event.on('login::open', (event) => this.open(event));
@@ -108,7 +118,7 @@ export class SallaLoginModal {
    * @param {CustomEvent|{details:{case:'new_customer'|'authenticated', redirect_url:string|null}}} event
    */
   onVerified(event) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     salla.log('verified', event);
     //there is a case when force login is activated & is new user, it will return case inside error key., so cover it.
     let verifyCase = ((_a = event.detail) === null || _a === void 0 ? void 0 : _a.data.case) || ((_b = event.detail) === null || _b === void 0 ? void 0 : _b.error.case);
@@ -117,6 +127,7 @@ export class SallaLoginModal {
       return;
     }
     if (verifyCase === "new_customer") {
+      this.customFields = ((_d = (_c = event.detail) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.custom_fields) || [];
       return this.showTab(this.registrationTab);
     }
     if (!salla.auth.canRedirect()) {
@@ -194,13 +205,42 @@ export class SallaLoginModal {
   }
   async newUserValidation() {
     const isLogByPhone = this.regType == "phone", isLogByEmail = this.regType == "email", emailValue = this.regEmail.value || (isLogByEmail && this.loginEmail.value), isEmailValid = Helper.isValidEmail(emailValue), isFirstNameValid = this.firstName.value.length > 0, isLastNameValid = this.lastName.value.length > 0, isPhoneValid = await this.regTelInput.isValid() || isLogByPhone && await this.loginTelInput.isValid(), emailValidation = (emailValue && isEmailValid) || (!emailValue && !this.isEmailRequired);
-    if (emailValidation && isPhoneValid && isFirstNameValid && isLastNameValid)
+    // Custom Fields Validation
+    var isCustomFieldValid = true;
+    for (const item of this.customFieldsWrapper.children) {
+      if (item.tagName == "SALLA-FILE-UPLOAD") {
+        const fileUploader = item;
+        this.customFieldsValues[fileUploader.id] = fileUploader.uploadedImage;
+        if (fileUploader.required) {
+          if (!fileUploader.uploadedImage) {
+            isCustomFieldValid = false;
+            const errorMsg = salla.lang.get('common.errors.field_required', { attribute: fileUploader.title });
+            this.validateField(fileUploader, errorMsg);
+          }
+        }
+      }
+      if (item.tagName == "INPUT") {
+        const inputItem = item;
+        this.customFieldsValues[inputItem.id] = inputItem.value;
+        if (inputItem.required) {
+          if (inputItem.value.length == 0) {
+            isCustomFieldValid = false;
+            const errorMsg = salla.lang.get('common.errors.field_required', { attribute: inputItem.title });
+            this.validateField(inputItem, errorMsg);
+          }
+        }
+      }
+    }
+    if (emailValidation && isPhoneValid && isFirstNameValid && isLastNameValid && isCustomFieldValid)
       return;
     !isEmailValid && this.validateField(this.regEmail, this.emailErrorMsg);
     !isFirstNameValid && this.validateField(this.firstName, this.firstNameErrorMsg);
     !isLastNameValid && this.validateField(this.lastName, this.lastNameErrorMsg);
     throw ('Please insert required fields');
   }
+  getFilepondPlaceholder() {
+    return `<div class="s-login-modal-filepond-placeholder"><span class="s-login-modal-filepond-placeholder-icon">${CameraIcon}</span><p class="s-login-modal-filepond-placeholder-text">${this.dragAndDrop}</p> <span class="filepond--label-action">${this.browseFromFiles}</span></div>`;
+  }
   // eslint-disable-next-line @stencil/own-methods-must-be-private
   validateField(field, errorMsg) {
     field.classList.add('s-has-error');
@@ -282,6 +322,20 @@ export class SallaLoginModal {
             h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.email')),
             h("input", { type: "email", ref: el => this.regEmail = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: "your@email.com", class: "s-login-modal-input s-ltr" }),
             h("span", { class: "s-login-modal-error-message" })),
+          h("div", { class: "s-login-modal-custom-fields", ref: el => this.customFieldsWrapper = el }, this.customFields.map((field) => {
+            if (field.type === CustomFieldType.PHOTO) {
+              return [
+                h("label", { class: "s-login-modal-label" }, field.label),
+                h("salla-file-upload", { "instant-upload": true, labelIdle: this.getFilepondPlaceholder(), id: `${field.id}`, title: field.label, required: field.required }),
+                h("span", { class: "s-login-modal-error-message" })
+              ];
+            }
+            return [
+              h("label", { class: "s-login-modal-label" }, field.label),
+              h("input", { type: "text", onKeyDown: e => this.typing(e, this.newUser), onInput: el => field.type == CustomFieldType.NUMBER ? salla.helpers.inputDigitsOnly(el.target) : {}, placeholder: field.description, required: field.required, title: field.label, id: `${field.id}`, class: "s-login-modal-input s-ltr" }),
+              h("span", { class: "s-login-modal-error-message" })
+            ];
+          })),
           h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register')),
           h("slot", { name: "after-registration" })))));
   }
@@ -373,7 +427,11 @@ export class SallaLoginModal {
     "title": {},
     "emailErrorMsg": {},
     "firstNameErrorMsg": {},
-    "lastNameErrorMsg": {}
+    "lastNameErrorMsg": {},
+    "dragAndDrop": {},
+    "browseFromFiles": {},
+    "customFields": {},
+    "uploadedImage": {}
   }; }
   static get methods() { return {
     "open": {