@ikas/storefront 6.1.0-beta.166 → 6.1.0-beta.168

package/build/components/checkout/components/form-item/index.js

@@ -1 +1 @@
-import*as e from"react";import{runInAction as t}from"mobx";import{observer as n}from"mobx-react-lite";import o,{FormItemType as a}from"./model.js";import r from"./caret-down.js";import l from"./style.module.scss.js";import"@ikas/storefront-config";import{useTranslation as i}from"../../../../utils/i18n.js";import u from"react-tooltip";import{PhoneNumberInput as c}from"../phone-number-input/index.js";var s=n((function(n){var r=i().t,s=e.useState((function(){return new o(n)})),p=s[0],E=s[1];return e.useEffect((function(){u.rebuild()}),[]),e.useEffect((function(){t((function(){p.type=n.type}))}),[n.type]),e.useEffect((function(){t((function(){p.inputType=n.inputType}))}),[n.inputType]),e.useEffect((function(){t((function(){p.inputMode=n.inputMode}))}),[n.inputMode]),e.useEffect((function(){t((function(){p.value=n.value}))}),[n.value]),e.useEffect((function(){t((function(){p.options=n.options}))}),[n.options]),e.useEffect((function(){t((function(){p.label=n.label}))}),[n.label]),e.useEffect((function(){t((function(){p.hasError=n.hasError}))}),[n.hasError]),e.useEffect((function(){t((function(){p.errorText=n.errorText}))}),[n.errorText]),e.useEffect((function(){t((function(){p.errorText=n.errorText}))}),[n.errorText]),e.useEffect((function(){t((function(){p.textAreaPlaceholder=n.textAreaPlaceholder}))}),[n.textAreaPlaceholder]),e.useEffect((function(){t((function(){p.rightContent=n.rightContent}))}),[n.rightContent]),e.useEffect((function(){t((function(){p.disabled=n.disabled||!1}))}),[n.disabled]),e.useEffect((function(){t((function(){p.isLoading=n.isLoading||!1}))}),[n.isLoading]),e.useEffect((function(){t((function(){p.disableResize=n.disableResize}))}),[n.disableResize]),e.useEffect((function(){t((function(){E(new o(n))}))}),[n.onChange]),e.useEffect((function(){!p.country&&n.currentCountryCode&&p.onCountryChange(n.currentCountryCode)}),[n.currentCountryCode]),e.createElement("div",{className:p.formItemStyle,style:n.style},e.createElement("div",{className:l.FormItemWrapper},e.createElement("div",{className:l.FormItemInputWrapper},e.createElement("div",{className:p.labelStyle},p.label),p.type===a.TEXT&&e.createElement(m,{vm:p,type:p.inputType,disabled:p.disabled,required:n.required,pattern:n.pattern,autocomplete:n.autocomplete,name:n.name,placeholder:n.placeholder,autocapitalize:n.autocapitalize,autocorrect:n.autocorrect,spellcheck:n.spellcheck}),p.type===a.TEL&&e.createElement(c,{key:n.currentCountryCode||"1",disabled:p.disabled,defaultCountry:n.currentCountryCode,placeholder:r("checkout-page:enterPhoneNumber"),value:p.value?p.value:"",onChange:p.onPhoneChange}),p.type===a.TEXT_AREA&&e.createElement(d,{vm:p,name:n.name}),p.type===a.SELECT&&e.createElement(f,{vm:p,autocomplete:n.autocomplete,name:n.name})),!!p.hasError&&e.createElement("div",{className:l.ErrorMsg},p.errorText||""),!!n.tooltipText&&e.createElement("div",{className:l.FormItemTooltipContainer,"data-tip":n.tooltipText,"data-event":"touchstart focus mouseover","data-event-off":"mouseout"},"?"),!!p.rightContent&&e.createElement("div",{className:l.RightContent},p.rightContent)))})),m=n((function(t){var n=t.vm,o=t.name,a=t.autocomplete,r=t.type,l=t.pattern,i=t.required,u=t.disabled,c=t.placeholder,s=t.autocapitalize,m=t.autocorrect,d=t.spellcheck;return e.createElement("input",{required:i,type:r||"text",name:o,pattern:l,disabled:u,autoComplete:a,inputMode:n.inputMode||"text",className:n.inputStyle,value:n.value,onChange:n.onValueChange,placeholder:n.isFocused?c:void 0,onFocus:n.handleOnFocus,onBlur:n.handleOnBlur,autoCapitalize:s,autoCorrect:m,spellCheck:d})})),d=n((function(t){var n,o=t.vm,a=t.name;return e.createElement(e.Fragment,null,e.createElement("textarea",{style:{resize:o.disableResize?"none":"initial"},name:a,value:o.value,disabled:o.disabled,onChange:o.onTextAreaValueChange,placeholder:o.textAreaPlaceholder||"",maxLength:o.maxLength}),o.maxLength&&e.createElement("div",{className:l.TextareaInfo},(null===(n=o.value)||void 0===n?void 0:n.length)||0," / ",o.maxLength))})),f=n((function(t){var n,o=t.vm,a=t.autocomplete,i=t.name;return e.createElement(e.Fragment,null,e.createElement("select",{name:i,className:o.inputStyle,disabled:o.isLoading||o.disabled,autoComplete:a,onChange:o.onSelectChange},!o.value&&e.createElement("option",{selected:!0,disabled:!0,key:-1}),null===(n=o.options)||void 0===n?void 0:n.map((function(t,n){return e.createElement("option",{key:n+t.value,value:t.label,selected:o.value===t.value},t.label)}))),e.createElement("div",{className:l.ArrowContainer},!o.isLoading&&e.createElement(r,null),o.isLoading&&e.createElement("div",{className:l.Loader})))}));export{s as FormItem};
+import*as e from"react";import{runInAction as t}from"mobx";import{observer as n}from"mobx-react-lite";import a,{FormItemType as o}from"./model.js";import r from"./caret-down.js";import l from"./style.module.scss.js";import"@ikas/storefront-config";import{useTranslation as i}from"../../../../utils/i18n.js";import u from"react-tooltip";import{PhoneNumberInput as c}from"../phone-number-input/index.js";var s=n((function(n){var r=i().t,s=e.useState((function(){return new a(n)})),p=s[0],E=s[1];return e.useEffect((function(){u.rebuild()}),[]),e.useEffect((function(){t((function(){p.type=n.type}))}),[n.type]),e.useEffect((function(){t((function(){p.inputType=n.inputType}))}),[n.inputType]),e.useEffect((function(){t((function(){p.inputMode=n.inputMode}))}),[n.inputMode]),e.useEffect((function(){t((function(){p.value=n.value}))}),[n.value]),e.useEffect((function(){t((function(){p.options=n.options}))}),[n.options]),e.useEffect((function(){t((function(){p.label=n.label}))}),[n.label]),e.useEffect((function(){t((function(){p.hasError=n.hasError}))}),[n.hasError]),e.useEffect((function(){t((function(){p.errorText=n.errorText}))}),[n.errorText]),e.useEffect((function(){t((function(){p.errorText=n.errorText}))}),[n.errorText]),e.useEffect((function(){t((function(){p.textAreaPlaceholder=n.textAreaPlaceholder}))}),[n.textAreaPlaceholder]),e.useEffect((function(){t((function(){p.rightContent=n.rightContent}))}),[n.rightContent]),e.useEffect((function(){t((function(){p.disabled=n.disabled||!1}))}),[n.disabled]),e.useEffect((function(){t((function(){p.isLoading=n.isLoading||!1}))}),[n.isLoading]),e.useEffect((function(){t((function(){p.disableResize=n.disableResize}))}),[n.disableResize]),e.useEffect((function(){t((function(){E(new a(n))}))}),[n.onChange]),e.useEffect((function(){!p.country&&n.currentCountryCode&&p.onCountryChange(n.currentCountryCode)}),[n.currentCountryCode]),e.createElement("div",{className:p.formItemStyle,style:n.style},e.createElement("div",{className:l.FormItemWrapper},e.createElement("div",{className:l.FormItemInputWrapper},e.createElement("label",{className:p.labelStyle,id:n.name+"-label"},p.label),p.type===o.TEXT&&e.createElement(m,{vm:p,type:p.inputType,disabled:p.disabled,required:n.required,pattern:n.pattern,autocomplete:n.autocomplete,name:n.name,placeholder:n.placeholder,autocapitalize:n.autocapitalize,autocorrect:n.autocorrect,spellcheck:n.spellcheck,ariaLabelledBy:n.name+"-label"}),p.type===o.TEL&&e.createElement(c,{key:n.currentCountryCode||"1",disabled:p.disabled,defaultCountry:n.currentCountryCode,placeholder:r("checkout-page:enterPhoneNumber"),value:p.value?p.value:"",onChange:p.onPhoneChange}),p.type===o.TEXT_AREA&&e.createElement(d,{vm:p,name:n.name}),p.type===o.SELECT&&e.createElement(f,{vm:p,autocomplete:n.autocomplete,name:n.name})),!!p.hasError&&e.createElement("div",{className:l.ErrorMsg},p.errorText||""),!!n.tooltipText&&e.createElement("div",{className:l.FormItemTooltipContainer,"data-tip":n.tooltipText,"data-event":"touchstart focus mouseover","data-event-off":"mouseout"},"?"),!!p.rightContent&&e.createElement("div",{className:l.RightContent},p.rightContent)))})),m=n((function(t){var n=t.vm,a=t.name,o=t.autocomplete,r=t.type,l=t.pattern,i=t.required,u=t.disabled,c=t.placeholder,s=t.autocapitalize,m=t.autocorrect,d=t.spellcheck,f=t.ariaLabelledBy;return e.createElement("input",{id:a,required:i,type:r||"text",name:a,pattern:l,disabled:u,autoComplete:o,inputMode:n.inputMode||"text",className:n.inputStyle,defaultValue:n.value,onChange:n.onValueChange,placeholder:n.isFocused?c:void 0,onFocus:n.handleOnFocus,onBlur:n.handleOnBlur,autoCapitalize:s,autoCorrect:m,spellCheck:d,"aria-labelledby":f})})),d=n((function(t){var n,a=t.vm,o=t.name;return e.createElement(e.Fragment,null,e.createElement("textarea",{style:{resize:a.disableResize?"none":"initial"},name:o,defaultValue:a.value,disabled:a.disabled,onChange:a.onTextAreaValueChange,placeholder:a.textAreaPlaceholder||"",maxLength:a.maxLength}),a.maxLength&&e.createElement("div",{className:l.TextareaInfo},(null===(n=a.value)||void 0===n?void 0:n.length)||0," / ",a.maxLength))})),f=n((function(t){var n,a=t.vm,o=t.autocomplete,i=t.name;return e.createElement(e.Fragment,null,e.createElement("select",{name:i,className:a.inputStyle,disabled:a.isLoading||a.disabled,autoComplete:o,onChange:a.onSelectChange},!a.value&&e.createElement("option",{selected:!0,disabled:!0,key:-1}),null===(n=a.options)||void 0===n?void 0:n.map((function(t,n){return e.createElement("option",{key:n+t.value,value:t.label,selected:a.value===t.value},t.label)}))),e.createElement("div",{className:l.ArrowContainer},!a.isLoading&&e.createElement(r,null),a.isLoading&&e.createElement("div",{className:l.Loader})))}));export{s as FormItem};

package/build/components/checkout/components/form-item/style.module.scss.js

@@ -1 +1 @@
-import e from'./../../../../ext/style-inject/dist/style-inject.es.js';var t={FormSectionTitle:"style-module_FormSectionTitle__VB-M-",Title:"style-module_Title__vKJBI",WithSubTitle:"style-module_WithSubTitle__D0bIa",SubTitle:"style-module_SubTitle__QOgiQ",Grid:"style-module_Grid__zW07u",Grid2:"style-module_Grid2__ngFn-",Grid3:"style-module_Grid3__WkRIF",FormItem:"style-module_FormItem__Uk50U",FormItemWrapper:"style-module_FormItemWrapper__7lb91",RightContent:"style-module_RightContent__mPnNX",FormItemInputWrapper:"style-module_FormItemInputWrapper__-bMzj",FieldLabel:"style-module_FieldLabel__FLtYi",FieldLabelTop:"style-module_FieldLabelTop__-neJm",Bottom:"style-module_Bottom__Syp-M",Error:"style-module_Error__TxUpM",WithTooltip:"style-module_WithTooltip__vErQH",ArrowContainer:"style-module_ArrowContainer__4GCN2",ErrorMsg:"style-module_ErrorMsg__AL-SH",fadeInFromRight:"style-module_fadeInFromRight__jtf8N",PhoneError:"style-module_PhoneError__Jl0Ig",FormItemTooltipContainer:"style-module_FormItemTooltipContainer__Het-k",TextareaInfo:"style-module_TextareaInfo__MkOI-",Loader:"style-module_Loader__2Juf8",load8:"style-module_load8__GVBWV"};e('.style-module_FormSectionTitle__VB-M- {\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.style-module_FormSectionTitle__VB-M- .style-module_Title__vKJBI {\n  flex: 1 1 auto;\n  padding-bottom: 16px;\n  color: var(--checkout-primary-text-color);\n  font-size: 20px;\n  line-height: 32px;\n}\n.style-module_FormSectionTitle__VB-M- .style-module_Title__vKJBI.style-module_WithSubTitle__D0bIa {\n  line-height: auto;\n  padding-bottom: 0;\n}\n\n.style-module_SubTitle__QOgiQ {\n  color: var(--checkout-secondary-text-color);\n  font-size: 14px;\n  padding-bottom: 16px;\n  padding-top: 2px;\n}\n\n.style-module_Grid__zW07u {\n  display: grid;\n  grid-gap: 16px;\n  grid-template-columns: 1fr;\n}\n.style-module_Grid__zW07u.style-module_Grid2__ngFn- {\n  grid-template-columns: repeat(2, 1fr);\n}\n.style-module_Grid__zW07u.style-module_Grid3__WkRIF {\n  grid-template-columns: repeat(3, 1fr);\n}\n@media only screen and (max-width: 768px) {\n  .style-module_Grid__zW07u {\n    grid-template-columns: 1fr !important;\n  }\n}\n\n@keyframes style-module_fadeInFromRight__jtf8N {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.style-module_FormItem__Uk50U {\n  width: 100%;\n}\n.style-module_FormItemWrapper__7lb91 {\n  width: 100%;\n  position: relative;\n}\n.style-module_FormItemWrapper__7lb91 .style-module_RightContent__mPnNX {\n  position: absolute;\n  height: 100%;\n  top: 0;\n  right: 0;\n}\n.style-module_FormItemInputWrapper__-bMzj {\n  position: relative;\n  width: 100%;\n}\n.style-module_FormItemInputWrapper__-bMzj div.style-module_FieldLabel__FLtYi {\n  color: var(--checkout-secondary-text-color);\n  position: absolute;\n  top: 0;\n  left: 17px;\n  width: 100%;\n  z-index: 1;\n  user-select: none;\n  pointer-events: none;\n  touch-action: none;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  transition: transform 0.1s;\n  transform: translateY(18px);\n  font-size: 0.85em;\n  line-height: 22px;\n}\n.style-module_FormItemInputWrapper__-bMzj div.style-module_FieldLabelTop__-neJm {\n  transform: translateY(8px);\n  font-size: 0.7em;\n}\n.style-module_FormItemInputWrapper__-bMzj input,\n.style-module_FormItemInputWrapper__-bMzj select,\n.style-module_FormItemInputWrapper__-bMzj textarea {\n  border: 1px solid var(--checkout-border-color);\n  background-color: var(--checkout-primary-bg-color);\n  color: var(--checkout-primary-text-color);\n  background-clip: padding-box;\n  border-radius: 8px;\n  display: block;\n  width: 100%;\n  height: 56px;\n  padding: 8px 16px;\n  outline: none;\n  transition: padding 0.1s, border-color 0.5s, box-shadow 0.5s;\n  box-shadow: 0 0 0 1px transparent;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n}\n.style-module_FormItemInputWrapper__-bMzj input:focus,\n.style-module_FormItemInputWrapper__-bMzj select:focus,\n.style-module_FormItemInputWrapper__-bMzj textarea:focus {\n  box-shadow: 0 0 0 1px var(--checkout-button-bg-color);\n  border-color: var(--checkout-button-bg-color);\n}\n.style-module_FormItemInputWrapper__-bMzj input.style-module_Bottom__Syp-M,\n.style-module_FormItemInputWrapper__-bMzj select.style-module_Bottom__Syp-M,\n.style-module_FormItemInputWrapper__-bMzj textarea.style-module_Bottom__Syp-M {\n  padding-top: 1.2em;\n  padding-bottom: 0.2em;\n}\n.style-module_FormItemInputWrapper__-bMzj input.style-module_Error__TxUpM,\n.style-module_FormItemInputWrapper__-bMzj select.style-module_Error__TxUpM,\n.style-module_FormItemInputWrapper__-bMzj textarea.style-module_Error__TxUpM {\n  box-shadow: 0 0 0 1px var(--checkout-error-color);\n  border-color: var(--checkout-error-color);\n}\n.style-module_FormItemInputWrapper__-bMzj input.style-module_WithTooltip__vErQH,\n.style-module_FormItemInputWrapper__-bMzj select.style-module_WithTooltip__vErQH,\n.style-module_FormItemInputWrapper__-bMzj textarea.style-module_WithTooltip__vErQH {\n  padding-right: 40px;\n}\n.style-module_FormItemInputWrapper__-bMzj input::-ms-expand,\n.style-module_FormItemInputWrapper__-bMzj select::-ms-expand,\n.style-module_FormItemInputWrapper__-bMzj textarea::-ms-expand {\n  display: none;\n}\n.style-module_FormItemInputWrapper__-bMzj input::placeholder,\n.style-module_FormItemInputWrapper__-bMzj select::placeholder,\n.style-module_FormItemInputWrapper__-bMzj textarea::placeholder {\n  color: var(--checkout-secondary-text-color) !important;\n}\n.style-module_FormItemInputWrapper__-bMzj textarea {\n  min-height: 120px;\n}\n.style-module_FormItemInputWrapper__-bMzj .style-module_ArrowContainer__4GCN2 {\n  position: absolute;\n  right: 1px;\n  padding-right: 0.5em;\n  top: 1px;\n  height: calc(100% - 2px);\n  display: flex;\n  align-items: center;\n  color: var(--checkout-secondary-text-color);\n  background-color: var(--checkout-primary-bg-color);\n  z-index: 2;\n  border-radius: 6px;\n  width: 25px;\n}\n.style-module_FormItemInputWrapper__-bMzj .PhoneInput {\n  display: flex;\n  align-items: center;\n}\n.style-module_FormItemInputWrapper__-bMzj .PhoneInputInput {\n  padding-left: 64px;\n}\n.style-module_FormItemInputWrapper__-bMzj .PhoneInputInput:disabled {\n  color: var(--checkout-button-disabled-text-color) !important;\n  background-color: var(--checkout-button-disabled-bg-color) !important;\n}\n.style-module_FormItemInputWrapper__-bMzj .PhoneInputInput::placeholder {\n  color: var(--checkout-secondary-text-color) !important;\n  font-size: 14px !important;\n}\n.style-module_FormItemInputWrapper__-bMzj .PhoneInputCountry {\n  position: absolute;\n  align-self: stretch;\n  display: flex;\n  align-items: center;\n  top: 26px;\n  left: 16px;\n}\n.style-module_FormItemInputWrapper__-bMzj .PhoneInputCountrySelect {\n  border: none;\n  display: inline-flex;\n  width: 60px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  z-index: 1;\n  border: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n.style-module_FormItemInputWrapper__-bMzj .PhoneInputCountryIcon {\n  width: 1.5em;\n  height: 1em;\n}\n.style-module_FormItemInputWrapper__-bMzj .PhoneInputCountrySelectArrow {\n  display: block;\n  content: "";\n  width: 0.3em;\n  height: 0.3em;\n  margin-left: 0.35em;\n  border-style: solid;\n  border-color: inherit;\n  border-top-width: 0;\n  border-bottom-width: 1px;\n  border-left-width: 0;\n  border-right-width: 1px;\n  transform: rotate(45deg);\n  opacity: 0.45;\n}\n.style-module_FormItemInputWrapper__-bMzj .PhoneInputCountryIconImg {\n  width: 24px;\n}\n.style-module_FormItem__Uk50U .style-module_ErrorMsg__AL-SH {\n  color: var(--checkout-error-color);\n  font-size: 12px;\n  margin-top: 8px;\n  animation-name: style-module_fadeInFromRight__jtf8N;\n  animation-duration: 0.3s;\n}\n.style-module_FormItem__Uk50U.style-module_PhoneError__Jl0Ig input {\n  box-shadow: 0 0 0 1px var(--checkout-error-color) !important;\n  border-color: var(--checkout-error-color) !important;\n}\n\n.style-module_FormItemWrapper__7lb91 {\n  position: relative;\n}\n\n.style-module_FormItemTooltipContainer__Het-k {\n  width: 16px;\n  height: 16px;\n  border-radius: 100%;\n  color: white;\n  background-color: var(--checkout-secondary-text-color);\n  position: absolute;\n  top: 20px;\n  right: 16px;\n  margin: auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 12px !important;\n  line-height: 16px !important;\n  cursor: pointer;\n}\n\n.style-module_TextareaInfo__MkOI- {\n  text-align: right;\n}\n\n.style-module_Loader__2Juf8,\n.style-module_Loader__2Juf8:after {\n  border-radius: 50%;\n  width: 0.9em;\n  height: 0.9em;\n}\n\n.style-module_Loader__2Juf8 {\n  font-size: 12px;\n  position: relative;\n  text-indent: -9999em;\n  border-top: 0.13em solid rgba(255, 255, 255, 0.2);\n  border-right: 0.13em solid rgba(255, 255, 255, 0.2);\n  border-bottom: 0.13em solid rgba(255, 255, 255, 0.2);\n  border-left: 0.13em solid var(--checkout-button-bg-color);\n  -webkit-transform: translateZ(0);\n  -ms-transform: translateZ(0);\n  transform: translateZ(0);\n  -webkit-animation: style-module_load8__GVBWV 1.1s infinite linear;\n  animation: style-module_load8__GVBWV 1.1s infinite linear;\n}\n\n@-webkit-keyframes style-module_load8__GVBWV {\n  0% {\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg);\n  }\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n@keyframes style-module_load8__GVBWV {\n  0% {\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg);\n  }\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}');export{t as default};
+import e from'./../../../../ext/style-inject/dist/style-inject.es.js';var t={FormSectionTitle:"style-module_FormSectionTitle__VB-M-",Title:"style-module_Title__vKJBI",WithSubTitle:"style-module_WithSubTitle__D0bIa",SubTitle:"style-module_SubTitle__QOgiQ",Grid:"style-module_Grid__zW07u",Grid2:"style-module_Grid2__ngFn-",Grid3:"style-module_Grid3__WkRIF",FormItem:"style-module_FormItem__Uk50U",FormItemWrapper:"style-module_FormItemWrapper__7lb91",RightContent:"style-module_RightContent__mPnNX",FormItemInputWrapper:"style-module_FormItemInputWrapper__-bMzj",FieldLabel:"style-module_FieldLabel__FLtYi",FieldLabelTop:"style-module_FieldLabelTop__-neJm",Bottom:"style-module_Bottom__Syp-M",Error:"style-module_Error__TxUpM",WithTooltip:"style-module_WithTooltip__vErQH",ArrowContainer:"style-module_ArrowContainer__4GCN2",ErrorMsg:"style-module_ErrorMsg__AL-SH",fadeInFromRight:"style-module_fadeInFromRight__jtf8N",PhoneError:"style-module_PhoneError__Jl0Ig",FormItemTooltipContainer:"style-module_FormItemTooltipContainer__Het-k",TextareaInfo:"style-module_TextareaInfo__MkOI-",Loader:"style-module_Loader__2Juf8",load8:"style-module_load8__GVBWV"};e('.style-module_FormSectionTitle__VB-M- {\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.style-module_FormSectionTitle__VB-M- .style-module_Title__vKJBI {\n  flex: 1 1 auto;\n  padding-bottom: 16px;\n  color: var(--checkout-primary-text-color);\n  font-size: 20px;\n  line-height: 32px;\n}\n.style-module_FormSectionTitle__VB-M- .style-module_Title__vKJBI.style-module_WithSubTitle__D0bIa {\n  line-height: auto;\n  padding-bottom: 0;\n}\n\n.style-module_SubTitle__QOgiQ {\n  color: var(--checkout-secondary-text-color);\n  font-size: 14px;\n  padding-bottom: 16px;\n  padding-top: 2px;\n}\n\n.style-module_Grid__zW07u {\n  display: grid;\n  grid-gap: 16px;\n  grid-template-columns: 1fr;\n}\n.style-module_Grid__zW07u.style-module_Grid2__ngFn- {\n  grid-template-columns: repeat(2, 1fr);\n}\n.style-module_Grid__zW07u.style-module_Grid3__WkRIF {\n  grid-template-columns: repeat(3, 1fr);\n}\n@media only screen and (max-width: 768px) {\n  .style-module_Grid__zW07u {\n    grid-template-columns: 1fr !important;\n  }\n}\n\n@keyframes style-module_fadeInFromRight__jtf8N {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.style-module_FormItem__Uk50U {\n  width: 100%;\n}\n.style-module_FormItemWrapper__7lb91 {\n  width: 100%;\n  position: relative;\n}\n.style-module_FormItemWrapper__7lb91 .style-module_RightContent__mPnNX {\n  position: absolute;\n  height: 100%;\n  top: 0;\n  right: 0;\n}\n.style-module_FormItemInputWrapper__-bMzj {\n  position: relative;\n  width: 100%;\n}\n.style-module_FormItemInputWrapper__-bMzj label.style-module_FieldLabel__FLtYi {\n  color: var(--checkout-secondary-text-color);\n  position: absolute;\n  top: 0;\n  left: 17px;\n  width: 100%;\n  z-index: 1;\n  user-select: none;\n  pointer-events: none;\n  touch-action: none;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  transition: transform 0.1s;\n  transform: translateY(18px);\n  font-size: 0.85em;\n  line-height: 22px;\n}\n.style-module_FormItemInputWrapper__-bMzj label.style-module_FieldLabelTop__-neJm {\n  transform: translateY(8px);\n  font-size: 0.7em;\n}\n.style-module_FormItemInputWrapper__-bMzj input,\n.style-module_FormItemInputWrapper__-bMzj select,\n.style-module_FormItemInputWrapper__-bMzj textarea {\n  border: 1px solid var(--checkout-border-color);\n  background-color: var(--checkout-primary-bg-color);\n  color: var(--checkout-primary-text-color);\n  background-clip: padding-box;\n  border-radius: 8px;\n  display: block;\n  width: 100%;\n  height: 56px;\n  padding: 8px 16px;\n  outline: none;\n  transition: padding 0.1s, border-color 0.5s, box-shadow 0.5s;\n  box-shadow: 0 0 0 1px transparent;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n}\n.style-module_FormItemInputWrapper__-bMzj input:focus,\n.style-module_FormItemInputWrapper__-bMzj select:focus,\n.style-module_FormItemInputWrapper__-bMzj textarea:focus {\n  box-shadow: 0 0 0 1px var(--checkout-button-bg-color);\n  border-color: var(--checkout-button-bg-color);\n}\n.style-module_FormItemInputWrapper__-bMzj input.style-module_Bottom__Syp-M,\n.style-module_FormItemInputWrapper__-bMzj select.style-module_Bottom__Syp-M,\n.style-module_FormItemInputWrapper__-bMzj textarea.style-module_Bottom__Syp-M {\n  padding-top: 1.2em;\n  padding-bottom: 0.2em;\n}\n.style-module_FormItemInputWrapper__-bMzj input.style-module_Error__TxUpM,\n.style-module_FormItemInputWrapper__-bMzj select.style-module_Error__TxUpM,\n.style-module_FormItemInputWrapper__-bMzj textarea.style-module_Error__TxUpM {\n  box-shadow: 0 0 0 1px var(--checkout-error-color);\n  border-color: var(--checkout-error-color);\n}\n.style-module_FormItemInputWrapper__-bMzj input.style-module_WithTooltip__vErQH,\n.style-module_FormItemInputWrapper__-bMzj select.style-module_WithTooltip__vErQH,\n.style-module_FormItemInputWrapper__-bMzj textarea.style-module_WithTooltip__vErQH {\n  padding-right: 40px;\n}\n.style-module_FormItemInputWrapper__-bMzj input::-ms-expand,\n.style-module_FormItemInputWrapper__-bMzj select::-ms-expand,\n.style-module_FormItemInputWrapper__-bMzj textarea::-ms-expand {\n  display: none;\n}\n.style-module_FormItemInputWrapper__-bMzj input::placeholder,\n.style-module_FormItemInputWrapper__-bMzj select::placeholder,\n.style-module_FormItemInputWrapper__-bMzj textarea::placeholder {\n  color: var(--checkout-secondary-text-color) !important;\n}\n.style-module_FormItemInputWrapper__-bMzj textarea {\n  min-height: 120px;\n}\n.style-module_FormItemInputWrapper__-bMzj .style-module_ArrowContainer__4GCN2 {\n  position: absolute;\n  right: 1px;\n  padding-right: 0.5em;\n  top: 1px;\n  height: calc(100% - 2px);\n  display: flex;\n  align-items: center;\n  color: var(--checkout-secondary-text-color);\n  background-color: var(--checkout-primary-bg-color);\n  z-index: 2;\n  border-radius: 6px;\n  width: 25px;\n}\n.style-module_FormItemInputWrapper__-bMzj .PhoneInput {\n  display: flex;\n  align-items: center;\n}\n.style-module_FormItemInputWrapper__-bMzj .PhoneInputInput {\n  padding-left: 64px;\n}\n.style-module_FormItemInputWrapper__-bMzj .PhoneInputInput:disabled {\n  color: var(--checkout-button-disabled-text-color) !important;\n  background-color: var(--checkout-button-disabled-bg-color) !important;\n}\n.style-module_FormItemInputWrapper__-bMzj .PhoneInputInput::placeholder {\n  color: var(--checkout-secondary-text-color) !important;\n  font-size: 14px !important;\n}\n.style-module_FormItemInputWrapper__-bMzj .PhoneInputCountry {\n  position: absolute;\n  align-self: stretch;\n  display: flex;\n  align-items: center;\n  top: 26px;\n  left: 16px;\n}\n.style-module_FormItemInputWrapper__-bMzj .PhoneInputCountrySelect {\n  border: none;\n  display: inline-flex;\n  width: 60px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  z-index: 1;\n  border: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n.style-module_FormItemInputWrapper__-bMzj .PhoneInputCountryIcon {\n  width: 1.5em;\n  height: 1em;\n}\n.style-module_FormItemInputWrapper__-bMzj .PhoneInputCountrySelectArrow {\n  display: block;\n  content: "";\n  width: 0.3em;\n  height: 0.3em;\n  margin-left: 0.35em;\n  border-style: solid;\n  border-color: inherit;\n  border-top-width: 0;\n  border-bottom-width: 1px;\n  border-left-width: 0;\n  border-right-width: 1px;\n  transform: rotate(45deg);\n  opacity: 0.45;\n}\n.style-module_FormItemInputWrapper__-bMzj .PhoneInputCountryIconImg {\n  width: 24px;\n}\n.style-module_FormItem__Uk50U .style-module_ErrorMsg__AL-SH {\n  color: var(--checkout-error-color);\n  font-size: 12px;\n  margin-top: 8px;\n  animation-name: style-module_fadeInFromRight__jtf8N;\n  animation-duration: 0.3s;\n}\n.style-module_FormItem__Uk50U.style-module_PhoneError__Jl0Ig input {\n  box-shadow: 0 0 0 1px var(--checkout-error-color) !important;\n  border-color: var(--checkout-error-color) !important;\n}\n\n.style-module_FormItemWrapper__7lb91 {\n  position: relative;\n}\n\n.style-module_FormItemTooltipContainer__Het-k {\n  width: 16px;\n  height: 16px;\n  border-radius: 100%;\n  color: white;\n  background-color: var(--checkout-secondary-text-color);\n  position: absolute;\n  top: 20px;\n  right: 16px;\n  margin: auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 12px !important;\n  line-height: 16px !important;\n  cursor: pointer;\n}\n\n.style-module_TextareaInfo__MkOI- {\n  text-align: right;\n}\n\n.style-module_Loader__2Juf8,\n.style-module_Loader__2Juf8:after {\n  border-radius: 50%;\n  width: 0.9em;\n  height: 0.9em;\n}\n\n.style-module_Loader__2Juf8 {\n  font-size: 12px;\n  position: relative;\n  text-indent: -9999em;\n  border-top: 0.13em solid rgba(255, 255, 255, 0.2);\n  border-right: 0.13em solid rgba(255, 255, 255, 0.2);\n  border-bottom: 0.13em solid rgba(255, 255, 255, 0.2);\n  border-left: 0.13em solid var(--checkout-button-bg-color);\n  -webkit-transform: translateZ(0);\n  -ms-transform: translateZ(0);\n  transform: translateZ(0);\n  -webkit-animation: style-module_load8__GVBWV 1.1s infinite linear;\n  animation: style-module_load8__GVBWV 1.1s infinite linear;\n}\n\n@-webkit-keyframes style-module_load8__GVBWV {\n  0% {\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg);\n  }\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n@keyframes style-module_load8__GVBWV {\n  0% {\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg);\n  }\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}');export{t as default};

package/build/components/checkout/components/phone-number-input/index.js

@@ -1 +1 @@
-import{__awaiter as e,__generator as t}from'./../../../../ext/tslib/tslib.es6.js';import*as a from"react";import{observer as r}from"mobx-react-lite";import n,{isSupportedCountry as l,formatIncompletePhoneNumber as o,getCountryCallingCode as s,parseIncompletePhoneNumber as c}from"libphonenumber-js";import u from"./get-countries.js";import i from"./style.module.scss.js";var m=r((function(r){var m=r.defaultCountry,v=r.disabled,f=void 0!==v&&v,d=r.placeholder,g=r.value,p=r.onChange,b=a.useState([]),E=b[0],h=b[1],y=a.useState(m||"TR"),N=y[0],C=y[1],S=a.useState(""),F=S[0],j=S[1];a.useEffect((function(){x();var e=N;if("KK"===e&&(e="TR"),l(e)||(e="US"),g){var t=n(g);t&&t.country&&(e=t.country),j(o(g,e))}else k(e);C(e)}),[m]);var x=function(){return e(void 0,void 0,void 0,(function(){var e;return t(this,(function(t){switch(t.label){case 0:return[4,u()];case 1:return e=t.sent(),h(e),[2]}}))}))},k=function(e){var t=s(e);j("+".concat(t))},w=function(e){return o(e,N)};return a.createElement(a.Fragment,null,a.createElement("div",{className:i.SelectFlag},a.createElement("div",{className:i.FlagContainer},a.createElement("div",{className:i.Flag},a.createElement("img",{className:i.FlagImage,alt:N,src:"https://cdn.myikas.com/sf/assets/flags/3x2/".concat(N,".svg")}),a.createElement("div",{className:i.Arrow})),a.createElement("select",{className:i.Select,value:N,onChange:function(e){if(e.target.value){var t=e.target.value;C(t),k(t)}},disabled:f},E.map((function(e){return a.createElement("option",{key:e.value,value:e.value},e.label)}))))),a.createElement("input",{type:"tel",autoComplete:"tel",className:i.Input,value:F,onChange:function(e){var t=E.find((function(t){var a;return t.value===(null===(a=n(e.target.value))||void 0===a?void 0:a.country)}));t&&C(t.value);var a=w(e.target.value);j(a),p(a?c(a):e.target.value)},placeholder:d,disabled:f}))}));export{m as PhoneNumberInput};
+import{__awaiter as e,__generator as t}from'./../../../../ext/tslib/tslib.es6.js';import*as a from"react";import{observer as r}from"mobx-react-lite";import l,{isSupportedCountry as n,formatIncompletePhoneNumber as o,getCountryCallingCode as s,parseIncompletePhoneNumber as u}from"libphonenumber-js";import c from"./get-countries.js";import i from"./style.module.scss.js";var m=r((function(r){var m=r.defaultCountry,v=r.disabled,f=void 0!==v&&v,d=r.placeholder,g=r.value,p=r.onChange,b=a.useState([]),E=b[0],h=b[1],y=a.useState(m||"TR"),N=y[0],C=y[1],S=a.useState(""),F=S[0],j=S[1];a.useEffect((function(){x();var e=N;if("KK"===e&&(e="TR"),n(e)||(e="US"),g){var t=l(g);t&&t.country&&(e=t.country),j(o(g,e))}else k(e);C(e)}),[m]);var x=function(){return e(void 0,void 0,void 0,(function(){var e;return t(this,(function(t){switch(t.label){case 0:return[4,c()];case 1:return e=t.sent(),h(e),[2]}}))}))},k=function(e){var t=s(e);j("+".concat(t))},w=function(e){return o(e,N)};return a.createElement(a.Fragment,null,a.createElement("div",{className:i.SelectFlag},a.createElement("div",{className:i.FlagContainer},a.createElement("div",{className:i.Flag},a.createElement("img",{className:i.FlagImage,alt:N,src:"https://cdn.myikas.com/sf/assets/flags/3x2/".concat(N,".svg")}),a.createElement("div",{className:i.Arrow})),a.createElement("select",{className:i.Select,value:N,onChange:function(e){if(e.target.value){var t=e.target.value;C(t),k(t)}},disabled:f},E.map((function(e){return a.createElement("option",{key:e.value,value:e.value},e.label)}))))),a.createElement("input",{type:"tel",autoComplete:"tel",className:i.Input,defaultValue:F,onChange:function(e){var t=E.find((function(t){var a;return t.value===(null===(a=l(e.target.value))||void 0===a?void 0:a.country)}));t&&C(t.value);var a=w(e.target.value);j(a),p(a?u(a):e.target.value)},placeholder:d,disabled:f}))}));export{m as PhoneNumberInput};

package/build/components/checkout/steps/step-info/index.js

@@ -1 +1 @@
-import*as e from"react";import{observer as t}from"mobx-react-lite";import{FormItem as o}from"../../components/form-item/index.js";import{FormItemType as i,FormItemInputMode as n}from"../../components/form-item/model.js";import{Button as r}from"../../components/button/index.js";import{Checkbox as s}from"../../components/checkbox/index.js";import c from"../../components/error/index.js";import m from"../../styles/common.module.scss.js";import l from"../../components/customer-addresses/index.js";import a from"../../components/customer-addresses/model.js";import"@ikas/storefront-config";import{useTranslation as p}from"../../../../utils/i18n.js";var d=t((function(t){var d,u,h=t.vm,g=p().t,f=e.useCallback((function(e){h.checkout.customer&&(h.checkout.customer.email=e?e.trim():e)}),[h,h.checkout,h.checkout.customer]),k=e.useMemo((function(){return h.isDigitalOnly?new a(h,"billing"):new a(h,"shipping")}),[h]);return e.createElement("div",null,e.createElement(c,{vm:h}),!h.checkout.hasCustomer&&e.createElement("div",{style:{marginTop:"8px",marginBottom:"40px"}},e.createElement("div",{className:m.FormSectionTitle},e.createElement("div",{className:m.Title},g("checkout-page:contactInfo"))),e.createElement(o,{name:"email",type:i.TEXT,inputMode:n.EMAIL,label:g("checkout-page:email"),autocomplete:"email",value:(null===(d=h.checkout.customer)||void 0===d?void 0:d.email)||"",onChange:f,hasError:h.isErrorsVisible&&!h.checkout.hasValidCustomerEmail,errorText:g("checkout-page:emailError"),tooltipText:g("checkout-page:guestEmailTooltip"),autocapitalize:"off",autocorrect:"off",spellcheck:"false"}),e.createElement(s,{value:(null===(u=h.checkout.customer)||void 0===u?void 0:u.notificationsAccepted)||!1,label:g("checkout-page:customerConsentCta"),onChange:h.setCustomerConsentGranted})),e.createElement(l,{vm:k}),h.isShowBillingAddressOnShippingStep&&"address"===h.deliveryMethod&&!h.isDigitalOnly&&e.createElement(s,{value:!h.useDifferentAddress,hasError:h.isErrorsVisible&&!h.isTermsAndConditionsChecked,label:g("checkout-page:useShippingForBilling"),onChange:function(e){return h.setUseDifferentAddress(!e,!0)}}),h.isShowBillingAddressOnShippingStep&&(h.useDifferentAddress||"in-store"===h.deliveryMethod)&&e.createElement(l,{vm:new a(h,"billing"),showBillingAddressOnShippingStep:!0}),!k.editingCustomerAddress&&e.createElement(r,{style:{width:"100%",marginTop:h.store.customerStore.customer&&!h.isShowBillingAddressOnShippingStep?"0px":"32px"},text:"address"!==h.deliveryMethod||h.isDigitalOnly?g("checkout-page:actions.continueWithPayment"):g("checkout-page:actions.continueWithShipping"),isLoading:h.isStepLoading,onClick:h.isDigitalOnly?h.onProceedToDigitalOnlyPaymentClick:h.onProceedToShippingClick}))}));export{d as default};
+import*as e from"react";import{observer as t}from"mobx-react-lite";import{FormItem as o}from"../../components/form-item/index.js";import{FormItemType as i,FormItemInputMode as n}from"../../components/form-item/model.js";import{Button as r}from"../../components/button/index.js";import{Checkbox as s}from"../../components/checkbox/index.js";import c from"../../components/error/index.js";import m from"../../styles/common.module.scss.js";import l from"../../components/customer-addresses/index.js";import a from"../../components/customer-addresses/model.js";import"@ikas/storefront-config";import{useTranslation as p}from"../../../../utils/i18n.js";var d=t((function(t){var d,u,h=t.vm,g=p().t,f=e.useCallback((function(e){h.checkout.customer&&(h.checkout.customer.email=e?e.trim():e)}),[h,h.checkout,h.checkout.customer]),k=e.useMemo((function(){return h.isDigitalOnly?new a(h,"billing"):new a(h,"shipping")}),[h]);return e.createElement("div",null,e.createElement(c,{vm:h}),!h.checkout.hasCustomer&&e.createElement("div",{style:{marginTop:"8px",marginBottom:"40px"}},e.createElement("div",{className:m.FormSectionTitle},e.createElement("div",{className:m.Title},g("checkout-page:contactInfo"))),e.createElement(o,{name:"email",type:i.TEXT,inputMode:n.EMAIL,label:g("checkout-page:email"),autocomplete:"shipping email",value:(null===(d=h.checkout.customer)||void 0===d?void 0:d.email)||"",onChange:f,hasError:h.isErrorsVisible&&!h.checkout.hasValidCustomerEmail,errorText:g("checkout-page:emailError"),tooltipText:g("checkout-page:guestEmailTooltip"),autocapitalize:"off",autocorrect:"off",spellcheck:"false"}),e.createElement(s,{value:(null===(u=h.checkout.customer)||void 0===u?void 0:u.notificationsAccepted)||!1,label:g("checkout-page:customerConsentCta"),onChange:h.setCustomerConsentGranted})),e.createElement(l,{vm:k}),h.isShowBillingAddressOnShippingStep&&"address"===h.deliveryMethod&&!h.isDigitalOnly&&e.createElement(s,{value:!h.useDifferentAddress,hasError:h.isErrorsVisible&&!h.isTermsAndConditionsChecked,label:g("checkout-page:useShippingForBilling"),onChange:function(e){return h.setUseDifferentAddress(!e,!0)}}),h.isShowBillingAddressOnShippingStep&&(h.useDifferentAddress||"in-store"===h.deliveryMethod)&&e.createElement(l,{vm:new a(h,"billing"),showBillingAddressOnShippingStep:!0}),!k.editingCustomerAddress&&e.createElement(r,{style:{width:"100%",marginTop:h.store.customerStore.customer&&!h.isShowBillingAddressOnShippingStep?"0px":"32px"},text:"address"!==h.deliveryMethod||h.isDigitalOnly?g("checkout-page:actions.continueWithPayment"):g("checkout-page:actions.continueWithShipping"),isLoading:h.isStepLoading,onClick:h.isDigitalOnly?h.onProceedToDigitalOnlyPaymentClick:h.onProceedToShippingClick}))}));export{d as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikas/storefront",
-  "version": "6.1.0-beta.166",
+  "version": "6.1.0-beta.168",
   "description": "Storefront functionality for ikas storefront themes.",
   "author": "ikas",
   "license": "ISC",
@@ -22,11 +22,11 @@
     "swiper": "11.0.6"
   },
   "devDependencies": {
-    "@ikas/storefront-api": "^6.1.0-beta.166",
-    "@ikas/storefront-config": "^6.1.0-beta.166",
-    "@ikas/storefront-model-functions": "^6.1.0-beta.166",
-    "@ikas/storefront-models": "^6.1.0-beta.166",
-    "@ikas/storefront-providers": "^6.1.0-beta.166",
+    "@ikas/storefront-api": "^6.1.0-beta.168",
+    "@ikas/storefront-config": "^6.1.0-beta.168",
+    "@ikas/storefront-model-functions": "^6.1.0-beta.168",
+    "@ikas/storefront-models": "^6.1.0-beta.168",
+    "@ikas/storefront-providers": "^6.1.0-beta.168",
     "@ikas/localized-address": "1.0.0-beta.6",
     "@adyen/adyen-web": "^5.57.0",
     "@rollup/plugin-commonjs": "^22.0.0",
@@ -61,11 +61,11 @@
   },
   "peerDependencies": {
     "@ikas/localized-address": "1.0.0-beta.6",
-    "@ikas/storefront-api": "^6.1.0-beta.166",
-    "@ikas/storefront-config": "^6.1.0-beta.166",
-    "@ikas/storefront-model-functions": "^6.1.0-beta.166",
-    "@ikas/storefront-models": "^6.1.0-beta.166",
-    "@ikas/storefront-providers": "^6.1.0-beta.166",
+    "@ikas/storefront-api": "^6.1.0-beta.168",
+    "@ikas/storefront-config": "^6.1.0-beta.168",
+    "@ikas/storefront-model-functions": "^6.1.0-beta.168",
+    "@ikas/storefront-models": "^6.1.0-beta.168",
+    "@ikas/storefront-providers": "^6.1.0-beta.168",
     "mobx": "^6.1.3",
     "mobx-react-lite": "^3.1.5",
     "next": "12.2.0",