@designcrowd/fe-shared-lib 1.5.21-BestLogoIcons-3 → 1.5.21

package/.storybook-static/assets/PublishBrandPageModal.stories-Dqobvq-n.js

@@ -0,0 +1,273 @@
+import{d as re,c as i,o as n,e as l,f as d,b as g,t as c,g as _,h as m,x as y,a as b,y as L,F as de,r as ue,z as me,n as ce}from"./iframe-C86bI_2U.js";import{B as T}from"./Button-DtVlr_q3.js";import{_ as X}from"./_plugin-vue_export-helper-DlAUqK2U.js";import{M as he}from"./Modal-BQrpXSGA.js";import{T as be}from"./TextInput-JK1M0hv6.js";import{a as ge,D as pe}from"./DropdownItem-CDX_V6Mi.js";import{T as we}from"./TextCopyField-B04vTGbG.js";import{S as fe}from"./SellDomainNameSearchWithResults-BttjI4PH.js";import{S as ye}from"./SellDomainNameListModal-ByK_ak0A.js";import{b as Pe}from"./brand-crowd-api.client-DiPM1Wo-.js";import{E as ve,s as De}from"./event-constants-CMO9VQVu.js";import{t as u,s as Me}from"./SellDomainNameListSearchResult-By0IpIM_.js";import"./ButtonPrimary-DG9wNod9.js";import"./Icon-8mZGP41G.js";import"./FormControl.mixin-_gXRExB7.js";import"./index-Bw-gCGc_.js";import"./api-lSJGRrF2.js";import"./Loader-D61Ki9P1.js";import"./Picture-Cq76CaoK.js";import"./Price-DKOwLeD0.js";const xe={class:"tw-bg-white tw-border tw-border-grayscale-500 tw-rounded tw-p-4"},Se={class:"tw-flex tw-flex-row tw-items-center"},Ce={class:"tw-flex tw-flex-col tw-mx-auto tw-max-w-1/3 tw-text-center tw-align-top tw-px-2"},Be=["src"],Le={class:"tw-flex tw-flex-col tw-px-2 tw-w-full"},ke={class:"tw-flex tw-flex-col md:tw-flex-row tw-text-center md:tw-text-left tw-items-center"},_e={class:"tw-flex tw-flex-col tw-w-full md:tw-grow tw-text-left"},Te={class:"tw-flex tw-flex-col md:tw-flex-row tw-gap-2"},Ve={key:0,class:"tw-text-xs tw-h-4 tw-w-fit tw-text-primary-500 tw-border tw-border-solid tw-border-primary-500 tw-rounded-full tw-px-2 tw-font-sans tw-uppercase"},Ne={class:"tw-mt-2 md:tw-mt-0 tw-text-grayscale-600 tw-text-sm"},Ee={class:"desktop-cta tw-mt-2"},qe={key:0,class:"tw-w-full md:tw-w-auto md:tw-justify-end md:tw-pl-4 desktop-cta"},Ie={class:"tw-mt-2 tw-px-2 tw-flex tw-flex-col tw-w-full"},Ae={class:"mobile-cta"},We={key:0,class:"tw-w-full md:tw-w-auto md:tw-justify-end md:tw-pl-4 mobile-cta tw-mt-2"},Z=re({__name:"PublishBrandPageCard",props:{title:{type:String,default:""},description:{type:String,default:""},imgUrl:{type:Boolean,default:!0},isDesignCom:{type:Boolean,default:!1},hasSearchButton:{type:Boolean,default:!0},searchButtonLabel:{type:String,default:()=>"Search"},pillLabel:{type:String,default:null}},emits:["on-show-domain-list-modal"],setup(a,{emit:r}){const s=r,o=()=>{s("on-show-domain-list-modal")};return(t,e)=>(n(),i("div",xe,[l("div",Se,[l("div",Ce,[l("img",{src:a.imgUrl,alt:"icon",class:"md:tw-max-w-full"},null,8,Be)]),l("div",Le,[l("div",ke,[l("div",_e,[l("div",Te,[l("p",{class:g(["tw-font-bold tw-text-sm",{"tw-text-grayscale-800":a.isDesignCom}])},c(a.title),3),a.pillLabel?(n(),i("span",Ve,c(a.pillLabel),1)):d("",!0)]),l("p",Ne,c(a.description),1),l("div",Ee,[_(t.$slots,"slug",{},void 0,!0)])]),a.hasSearchButton?(n(),i("div",qe,[m(T,{label:a.searchButtonLabel,class:g(["tw-flex tw-items-center tw-justify-center md:tw-ml-2 tw-mt-2 md:tw-mt-0 tw-font-sans tw-font-bold tw-transition-colors tw-duration-300 tw-text-sm tw-w-full tw-rounded tw-cursor-pointer tw-w-full md:tw-w-24",{"tw-uppercase":!a.isDesignCom}]),"data-test-brand-page-search-button":"",variant:"primary",size:"small-medium",onOnClick:o},null,8,["label","class"])])):d("",!0)])])]),l("div",Ie,[l("div",Ae,[_(t.$slots,"slug",{},void 0,!0)]),a.hasSearchButton?(n(),i("div",We,[m(T,{label:a.searchButtonLabel,class:g(["tw-flex tw-items-center tw-justify-center md:tw-ml-2 tw-mt-2 md:tw-mt-0 tw-font-sans tw-font-bold tw-transition-colors tw-duration-300 tw-text-sm tw-w-full tw-rounded tw-cursor-pointer tw-w-full md:tw-w-24",{"tw-uppercase":!a.isDesignCom}]),"data-test-brand-page-search-button":"",variant:"primary",size:"small-medium","full-width":!0,onOnClick:o},null,8,["label","class"])])):d("",!0)])]))}}),$=X(Z,[["__scopeId","data-v-e04c7b1b"]]);Z.__docgenInfo={exportName:"default",displayName:"PublishBrandPageCard",description:"",tags:{},props:[{name:"title",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"description",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"imgUrl",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"isDesignCom",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"hasSearchButton",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"searchButtonLabel",type:{name:"string"},defaultValue:{func:!0,value:"() => 'Search'"}},{name:"pillLabel",type:{name:"string"},defaultValue:{func:!1,value:"null"}}],events:[{name:"on-show-domain-list-modal"}],slots:[{name:"slug"}],sourceFiles:["/Users/jamesjoung/repo/fe-shared-lib/src/experiences/components/PublishBrandPageModal/PublishBrandPageCard.vue"]};const k={SMALL:640,LARGE:1024},Oe={data(){return{isMobile:!1,isLargerThanMobile:!1,isDesktop:!1}},mounted(){this.checkWindowWidth(),window.addEventListener("resize",this.checkWindowWidth)},unmounted(){window.removeEventListener("resize",this.checkWindowWidth)},methods:{checkWindowWidth(){this.isMobile=window.innerWidth<k.SMALL,this.isLargerThanMobile=window.innerWidth>k.SMALL,this.isDesktop=window.innerWidth>=k.LARGE}}},C={slug:"slug",purchased:"purchased"},Re="https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/publish/dcom-free-url.svg",Ue="https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/publish/bc-free-url.svg",ee={components:{Modal:he,TextInput:be,Dropdown:pe,DropdownItem:ge,Button:T,TextCopyField:we,SellDomainNameSearchWithResults:fe,SellDomainNameListModal:ye,PublishBrandPageCard:$},mixins:[Oe],props:{radioValue:{type:String,required:!0,default:C.slug},domains:{type:Array,required:!0,default:void 0},brandPageBaseUrl:{type:String,required:!0,default:void 0},brandPageSlug:{type:String,required:!0,default:void 0},customDomain:{type:Object,required:!1,default:void 0},brandPageUrl:{type:String,required:!0,default:void 0},slugValidationError:{type:String,required:!0,default:void 0},brandPageDisplayName:{type:String,required:!0,default:void 0},errorMessage:{type:String,required:!1,default:void 0},publishErrorMessage:{type:String,required:!1,default:void 0},visible:{type:Boolean,required:!0},isPublished:{type:Boolean,required:!0},isPublishing:{type:Boolean,required:!0,default:!1},isBusy:{type:Boolean,required:!0,default:!1},shouldPublish:{type:Boolean,required:!0,default:!1},isDesignCom:{type:Boolean,required:!0,default:!1},showRadioButtons:{type:Boolean,required:!0,default:!1},showModalBackgroundImage:{type:Boolean,required:!0,default:!1},isSearchDomainListModalVisible:{type:Boolean,required:!0,default:!1},isBrandPageSlugEditMode:{type:Boolean,required:!0,default:!1},businessName:{type:String,required:!1,default:""},isCustomDomainActive:{type:Boolean,required:!0,default:!1},designDraftToken:{type:String,required:!1,default:void 0},brandPageType:{type:String,required:!0,default:""}},emits:["close-modal","radio-button-changed","copy-url-click","internal-publish-brand-page","on-select-domain","on-brand-page-url-click","on-view-more-domains","on-slug-changed"],setup(){return{tr:u,sitePublishedLabel:u("publishBrandPageModal.sitePublishedLabel"),freePublishCardTitleLabel:u("publishBrandPageModal.freePublishCardTitleLabel"),freePublishCardDescriptionLabel:u("publishBrandPageModal.freePublishCardDescriptionLabel"),slugInputPlaceholderYourNameLabel:u("publishBrandPageModal.slugInputPlaceholderYourNameLabel"),slugInputPlaceholderYourBusinessNameLabel:u("publishBrandPageModal.slugInputPlaceholderYourBusinessNameLabel"),freeDomainLabel:u("publishBrandPageModal.freeDomainLabel"),purchasedDomainLabel:u("publishBrandPageModal.purchasedDomainLabel"),setUrlLabel:u("publishBrandPageModal.setUrlLabel"),publishLabel:u("publishBrandPageModal.publishLabel"),viewMoreDomainLabel:u("publishBrandPageModal.viewMoreDomainLabel"),copyLabel:u("publishBrandPageModal.copyLabel"),copySuccessLabel:u("publishBrandPageModal.copySuccessLabel"),hasAlreadyPurchasedDomainCloseButtonLabel:u("publishBrandPageModal.hasAlreadyPurchasedDomainCloseButtonLabel"),publishedSuccessDescriptionLabel:u("publishBrandPageModal.publishedSuccessDescriptionLabel"),selectDomainDropdownPlaceholder:u("publishBrandPageModal.selectDomainDropdownPlaceholder")}},data(){return{DOMAIN_TYPES:C,domainTypeValue:this.radioValue,internalSlug:this.brandPageSlug,selectedCustomDomain:this.customDomain,userCurrency:void 0,isModalVisible:!1,isLoading:!1,previousSearchText:"",domainNameItems:void 0,sitePublishedModal:De,searchText:this.brandPageSlug||this.businessName||""}},computed:{firstTimePublishHeaderLabel(){return this.tr("publishBrandPageModal.firstTimePublishHeaderLabel",{brandPageDisplayName:this.brandPageDisplayName})},publishSuccessLabel(){return this.tr("publishBrandPageModal.publishSuccessLabel",{brandPageDisplayName:this.brandPageDisplayName})},viewMyWebsiteLabel(){return this.tr("publishBrandPageModal.viewMyWebsiteLabel",{brandPageDisplayName:this.brandPageDisplayName})},allowPublish(){return this.domainTypeValue===C.slug?this.internalSlug&&!this.slugValidationError:this.selectedCustomDomain},hasPurchasedDomains(){return this.domains&&this.domains.length>0},slugErrorMessage(){return this.slugValidationError?this.slugValidationError:this.publishErrorMessage},isNotPublished(){return!this.isPublished||!this.shouldPublish},isSlugEditMode(){return this.isPublished&&this.shouldPublish&&this.isBrandPageSlugEditMode},iconUrl(){return this.isDesignCom?Re:Ue},isInputEnabled(){return this.isPublishing||this.domainTypeValue===C.purchased},isPublishingDisabled(){return!this.allowPublish||this.isPublishing},getPlaceHolder(){return this.brandPageType==="brandContact"?this.slugInputPlaceholderYourNameLabel:this.slugInputPlaceholderYourBusinessNameLabel}},watch:{brandPageSlug(a){this.internalSlug=a},isSearchDomainListModalVisible(a){this.isModalVisible=a,(this.searchText||this.internalSlug)&&this.searchDomainName()},customDomain(a){this.selectedCustomDomain=a}},mounted(){this.internalSlug=this.brandPageSlug,this.isModalVisible=this.isSearchDomainListModalVisible},methods:{onDomainTypeRadioButtonClick(a){this.domainTypeValue=a,this.closePurchasedDomainDropdown(),this.$emit("radio-button-changed",a)},onCloseModal(){this.$emit("close-modal"),this.$emit("on-hide-domain-modal")},onCopyUrlClick(){this.$emit("copy-url-clicked")},onSlugChanged(a){this.searchText=a,this.$emit("on-slug-changed",a)},onPublish(){this.$emit("internal-publish-brand-page",this.internalSlug,this.selectedCustomDomain)},onBrandPageUrlClick(){this.$emit("on-brand-page-url-click")},onViewMore(){this.$emit("on-show-domain-modal"),this.searchText&&this.searchDomainName(!0)},onSearchTextChanged(a){this.searchText=a,this.$emit("on-change-search",a)},onSelectPurchasedDomain(a){this.selectedCustomDomain=a,this.$emit("on-select-domain",a),this.closePurchasedDomainDropdown()},closePurchasedDomainDropdown(){var a;(a=this.$refs.dropdown)!=null&&a.hideMenu&&this.$refs.dropdown.hideMenu()},onSellDomainNameListCloseModal(){this.$emit("on-hide-domain-modal")},onBuyNowClick(){this.$emit("on-buy-now-clicked")},async searchDomainName(a){this.isLoading=!0;let r="";this.searchText&&(r=this.cleanText(this.searchText)),this.previousSearchText=this.searchText;try{const s={keyword:r,isUserTriggered:a,userText:this.brandPageSlug};this.designDraftToken&&(s.designDraftToken=this.designDraftToken),s.domainSearchLocation=this.sitePublishedModal,window.dispatchEvent(new CustomEvent(ve.DomainSearchEvent,{detail:s}));const o=await Pe.searchDomainNamesByKeywordAsync(s);if(!o){this.domainNameItems=[];return}this.domainNameItems=o.items,this.userCurrency=o.currency}catch{this.domainNameItems=[]}finally{this.isLoading=!1}},cleanText(a){return a.replace(/[^\p{L}\p{N}\-.]+/gu,"").toLowerCase()}}},je={class:"publish-bp--container"},ze={key:0,class:"tw-text-center tw-font-bold tw-mb-8 tw-mt-8 tw-text-4xl"},Ye={key:1,class:"tw-text-center tw-font-bold tw-mb-8 tw-mt-8"},Fe={class:"tw-font-bold tw-text-black tw-mb-2 tw-text-4xl"},He={key:0,class:"tw-text-grayscale-600 tw-mb-8"},Ge={key:1,class:"tw-text-grayscale-600 tw-mb-8 tw-font-normal"},Ke=["checked","value"],Qe={key:1,for:"domain-type",class:"tw-font-sans tw-w-full tw-text-grayscale-600 tw-text-sm tw-cursor-pointer tw-ml-2"},Je={class:"tw-inline-block tw-rounded-full"},Xe={key:1,class:"tw-mt-4"},Ze={class:"tw-flex tw-flex-col md:tw-flex-row tw-justify-between"},$e={key:0,class:"tw-mt-2 tw-text-sm tw-text-left tw-text-error-500 tw-font-normal"},ea={key:1},aa={key:0,class:"tw-mt-2 tw-text-sm tw-text-left tw-text-error-500 tw-font-normal"},ta={key:2,class:"tw-mt-4"},sa={key:0},na=["checked","value"],ia={for:"domain-type",class:"tw-font-sans tw-w-full tw-text-grayscale-600 tw-text-sm tw-cursor-pointer tw-ml-2"},la={class:"tw-inline-block tw-rounded-full"},oa={class:"tw-mt-4 domain-dropdown"},ra={key:0,class:"tw-mt-2 tw-text-sm tw-text-left tw-text-error-500 tw-font-normal"},da={key:1,class:"tw-font-sans"},ua={key:0,class:"tw-mb-6 tw-text-left"},ma={class:"tw-mb-6"};function ca(a,r,s,o,t,e){const V=b("TextInput"),f=b("Button"),ae=b("PublishBrandPageCard"),te=b("DropdownItem"),se=b("Dropdown"),ne=b("SellDomainNameSearchWithResults"),ie=b("TextCopyField"),le=b("Modal"),oe=b("SellDomainNameListModal");return n(),i("div",je,[m(le,{classes:"publish-bp--modal tw-px-2 md:tw-px-8","close-on-esc":"",visible:s.visible,"hide-scrollbar":!1,"show-modal-background-image":s.showModalBackgroundImage,"content-classes":s.isBusy?["tw-overflow-y-hidden"]:[],onCloseModal:e.onCloseModal},{header:y(()=>[e.isNotPublished||e.isSlugEditMode?(n(),i("div",ze,[l("span",null,c(e.firstTimePublishHeaderLabel),1)])):d("",!0),s.isPublished&&!e.isSlugEditMode?(n(),i("div",Ye,[l("p",Fe,c(o.sitePublishedLabel),1),e.hasPurchasedDomains||s.isCustomDomainActive?(n(),i("p",He,c(e.publishSuccessLabel),1)):(n(),i("p",Ge,c(o.publishedSuccessDescriptionLabel),1))])):d("",!0)]),default:y(()=>[e.isNotPublished||e.isSlugEditMode?(n(),i("div",{key:0,class:g({"tw-mb-8":!e.hasPurchasedDomains})},[e.isSlugEditMode?d("",!0):(n(),i("div",{key:0,class:"tw-flex tw-items-center tw-mr-2 tw-mb-1",onClick:r[0]||(r[0]=h=>e.onDomainTypeRadioButtonClick(t.DOMAIN_TYPES.slug))},[s.showRadioButtons?(n(),i("input",{key:0,type:"radio",class:"tw-w-6 tw-h-8 tw-cursor-pointer tw-mb-0",style:{"accent-color":"rgb(242 27 63)"},name:"domainTypeValue",checked:t.domainTypeValue===t.DOMAIN_TYPES.slug,value:t.domainTypeValue===t.DOMAIN_TYPES.slug},null,8,Ke)):d("",!0),!s.isPublished&&e.hasPurchasedDomains?(n(),i("label",Qe,[l("span",Je,c(o.freeDomainLabel),1)])):d("",!0)])),e.isNotPublished||e.isSlugEditMode?(n(),i("div",Xe,[e.hasPurchasedDomains?(n(),i("div",ea,[m(V,{modelValue:t.internalSlug,"onUpdate:modelValue":r[2]||(r[2]=h=>t.internalSlug=h),"element-classes":"tw-mb-0 !tw-rounded-l-none tw-text-lg","prefix-text":`${s.brandPageBaseUrl}/`,error:!!s.slugValidationError,disabled:e.isInputEnabled,placeholder:e.getPlaceHolder,"data-test-brand-page-slug-input":"",attrs:{"data-test-set-url-text-field":""},onInput:e.onSlugChanged},null,8,["modelValue","prefix-text","error","disabled","placeholder","onInput"]),e.slugErrorMessage?(n(),i("div",aa,c(e.slugErrorMessage),1)):d("",!0)])):(n(),L(ae,{key:0,"img-url":e.iconUrl,title:o.freePublishCardTitleLabel,description:o.freePublishCardDescriptionLabel,"is-design-com":s.isDesignCom,"has-search-button":!1},{slug:y(()=>[l("div",Ze,[l("div",null,[m(V,{modelValue:t.internalSlug,"onUpdate:modelValue":r[1]||(r[1]=h=>t.internalSlug=h),"element-classes":"tw-mb-0 !tw-rounded-l-none tw-text-md tw-w-1/3","prefix-text":`${s.brandPageBaseUrl}/`,error:!!s.slugValidationError,disabled:e.isInputEnabled,placeholder:e.getPlaceHolder,"data-test-brand-page-slug-input":"",attrs:{"data-test-set-url-text-field":""},onInput:e.onSlugChanged},null,8,["modelValue","prefix-text","error","disabled","placeholder","onInput"]),e.slugErrorMessage?(n(),i("div",$e,c(e.slugErrorMessage),1)):d("",!0)]),m(f,{label:o.publishLabel,disabled:e.isPublishingDisabled,class:g(["tw-flex tw-items-center tw-justify-center md:tw-ml-2 tw-mt-2 md:tw-mt-0 tw-font-sans tw-font-bold tw-transition-colors tw-duration-300 tw-text-sm tw-w-full tw-rounded tw-cursor-pointer tw-w-full md:tw-w-24",{"tw-uppercase":!s.isDesignCom}]),"data-test-brand-page-publish-button":"",variant:"primary",size:"small-medium","full-width":a.isMobile,onOnClick:e.onPublish},null,8,["label","disabled","full-width","class","onOnClick"])])]),_:1},8,["img-url","title","description","is-design-com"]))])):d("",!0),e.isNotPublished||!e.isSlugEditMode?(n(),i("div",ta,[s.showRadioButtons?(n(),i("div",sa,[l("div",{class:"tw-flex tw-items-center tw-mr-2 tw-mb-1",onClick:r[3]||(r[3]=h=>e.onDomainTypeRadioButtonClick(t.DOMAIN_TYPES.purchased))},[l("input",{type:"radio",class:"tw-w-6 tw-h-8 tw-cursor-pointer tw-mb-0",style:{"accent-color":"rgb(242 27 63)"},name:"domainTypeValue",checked:t.domainTypeValue===t.DOMAIN_TYPES.purchased,value:t.domainTypeValue===t.DOMAIN_TYPES.purchased},null,8,na),l("label",ia,[l("span",la,c(o.purchasedDomainLabel),1)])]),l("div",oa,[s.domains?(n(),L(se,{key:0,ref:"dropdown","element-classes":{"tw-h-12":!0},"menu-element-classes":"tw-w-full",disabled:t.domainTypeValue===t.DOMAIN_TYPES.slug,class:g({"tw-text-grayscale-600 tw-font-normal":!t.selectedCustomDomain}),title:t.selectedCustomDomain&&t.selectedCustomDomain.domainName||o.selectDomainDropdownPlaceholder},{default:y(()=>[(n(!0),i(de,null,ue(s.domains,h=>(n(),L(te,{key:h.domainName,class:"tw-font-bold tw-break-all tw-flex tw-gap-2 tw-text-black",onClick:ba=>e.onSelectPurchasedDomain(h)},{default:y(()=>[me(c(h.domainName),1)]),_:2},1032,["onClick"]))),128))]),_:1},8,["disabled","class","title"])):d("",!0)]),s.errorMessage?(n(),i("div",ra,c(s.errorMessage),1)):d("",!0)])):d("",!0),e.hasPurchasedDomains?d("",!0):_(a.$slots,"recommended",{key:1},void 0,!0)])):d("",!0),e.hasPurchasedDomains?(n(),i("div",{key:3,class:"tw-font-sans tw-text-center",style:ce(a.isMobile?"padding-left: 1.5rem; padding-right: 1.5rem;":"")},[m(f,{label:e.isSlugEditMode?o.setUrlLabel:o.publishLabel,variant:s.isDesignCom?"primary":"primary-with-icon",icon:"chevron-right-wide",disabled:e.isPublishingDisabled,class:"tw-my-4","full-width":a.isMobile,"data-test-brand-page-publish-button":"",onOnClick:e.onPublish},null,8,["label","variant","disabled","full-width","onOnClick"]),m(f,{label:o.hasAlreadyPurchasedDomainCloseButtonLabel,variant:"no-border",size:"large",class:"tw-my-4","full-width":a.isMobile,onOnClick:e.onCloseModal},null,8,["label","full-width","onOnClick"])],4)):d("",!0)],2)):(n(),i("div",da,[!s.isCustomDomainActive&&!e.hasPurchasedDomains?(n(),i("div",ua,[l("div",ma,[m(ne,{"is-design-com":s.isDesignCom,"initial-search-term":t.searchText,currency:t.userCurrency,"display-result-limit":4,"domain-search-location":t.sitePublishedModal,onOnChangeSearch:e.onSearchTextChanged,onOnBuyNowClick:e.onBuyNowClick},null,8,["is-design-com","initial-search-term","currency","domain-search-location","onOnChangeSearch","onOnBuyNowClick"])]),m(f,{label:o.viewMoreDomainLabel,variant:"no-border",size:"small-medium",class:"tw-text-center",onOnClick:e.onViewMore},null,8,["label","onOnClick"])])):d("",!0),l("div",{class:g(["tw-px-4 tw-text-center",{"lg:tw-px-20":e.hasPurchasedDomains}])},[m(ie,{"button-variant":"secondary",text:s.brandPageUrl,"default-copy-button-text":o.copyLabel,"copied-button-text":o.copySuccessLabel,"data-test-brand-page-copy-input":"",onOnClick:e.onCopyUrlClick},null,8,["text","default-copy-button-text","copied-button-text","onOnClick"]),m(f,{label:e.viewMyWebsiteLabel,variant:s.isDesignCom?"primary":"primary-with-icon",icon:"chevron-right-wide",size:"medium","icon-view-box":"0 0 24 24",class:"tw-my-4",target:"_blank",rel:"noopener noreferrer",url:s.brandPageUrl,"full-width":a.isMobile,onOnClick:e.onBrandPageUrlClick},null,8,["label","variant","url","full-width","onOnClick"])],2)]))]),_:3},8,["visible","show-modal-background-image","content-classes","onCloseModal"]),m(oe,{modelValue:t.searchText,"onUpdate:modelValue":r[4]||(r[4]=h=>t.searchText=h),currency:t.userCurrency,"is-busy":t.isLoading,"is-design-com":s.isDesignCom,"domain-name-items":t.domainNameItems,"previous-search-text":t.previousSearchText,visible:t.isModalVisible,"domain-search-location":t.sitePublishedModal,onCloseModal:e.onSellDomainNameListCloseModal,onSearch:r[5]||(r[5]=h=>e.searchDomainName(!0))},null,8,["modelValue","currency","is-busy","is-design-com","domain-name-items","previous-search-text","visible","domain-search-location","onCloseModal"])])}const p=X(ee,[["render",ca],["__scopeId","data-v-db0c0d1a"]]);ee.__docgenInfo={exportName:"default",displayName:"PublishBrandPageModal",description:"",tags:{},props:[{name:"radioValue",type:{name:"string"},required:!0,defaultValue:{func:!1,value:"DOMAIN_TYPES.slug"}},{name:"domains",type:{name:"array"},required:!0,defaultValue:{func:!1,value:"undefined"}},{name:"brandPageBaseUrl",type:{name:"string"},required:!0,defaultValue:{func:!1,value:"undefined"}},{name:"brandPageSlug",type:{name:"string"},required:!0,defaultValue:{func:!1,value:"undefined"}},{name:"customDomain",type:{name:"object"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"brandPageUrl",type:{name:"string"},required:!0,defaultValue:{func:!1,value:"undefined"}},{name:"slugValidationError",type:{name:"string"},required:!0,defaultValue:{func:!1,value:"undefined"}},{name:"brandPageDisplayName",type:{name:"string"},required:!0,defaultValue:{func:!1,value:"undefined"}},{name:"errorMessage",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"publishErrorMessage",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"visible",type:{name:"boolean"},required:!0},{name:"isPublished",type:{name:"boolean"},required:!0},{name:"isPublishing",type:{name:"boolean"},required:!0,defaultValue:{func:!1,value:"false"}},{name:"isBusy",type:{name:"boolean"},required:!0,defaultValue:{func:!1,value:"false"}},{name:"shouldPublish",type:{name:"boolean"},required:!0,defaultValue:{func:!1,value:"false"}},{name:"isDesignCom",type:{name:"boolean"},required:!0,defaultValue:{func:!1,value:"false"}},{name:"showRadioButtons",type:{name:"boolean"},required:!0,defaultValue:{func:!1,value:"false"}},{name:"showModalBackgroundImage",type:{name:"boolean"},required:!0,defaultValue:{func:!1,value:"false"}},{name:"isSearchDomainListModalVisible",type:{name:"boolean"},required:!0,defaultValue:{func:!1,value:"false"}},{name:"isBrandPageSlugEditMode",type:{name:"boolean"},required:!0,defaultValue:{func:!1,value:"false"}},{name:"businessName",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"''"}},{name:"isCustomDomainActive",type:{name:"boolean"},required:!0,defaultValue:{func:!1,value:"false"}},{name:"designDraftToken",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"brandPageType",type:{name:"string"},required:!0,defaultValue:{func:!1,value:"''"}}],events:[{name:"close-modal"},{name:"radio-button-changed",type:{names:["undefined"]}},{name:"copy-url-click"},{name:"internal-publish-brand-page",type:{names:["undefined"]},properties:[{type:{names:["undefined"]},name:"<anonymous1>"}]},{name:"on-select-domain",type:{names:["undefined"]}},{name:"on-brand-page-url-click"},{name:"on-view-more-domains"},{name:"on-slug-changed",type:{names:["undefined"]}},{name:"on-hide-domain-modal"},{name:"copy-url-clicked"},{name:"on-show-domain-modal"},{name:"on-change-search",type:{names:["undefined"]}},{name:"on-buy-now-clicked"}],slots:[{name:"recommended"}],sourceFiles:["/Users/jamesjoung/repo/fe-shared-lib/src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.vue","/Users/jamesjoung/repo/fe-shared-lib/src/experiences/mixins/mediaQueryMixin.js"]};const B=[{domainName:"brandcrowdqa.co",created:"2024-07-26T01:42:17.477",updated:null,isAutoRenewEnabled:!0,isRegistrationComplete:!1,status:"Inactive"},{domainName:"doggers.info",created:"2024-07-26T01:44:22.257",updated:null,isAutoRenewEnabled:!0,isRegistrationComplete:!1,status:"Active"},{domainName:"yourstories.live",created:"2024-08-20T00:39:25.193",updated:null,isAutoRenewEnabled:!0,isRegistrationComplete:!1,status:"Registration Started"}],qa={title:"Components/PublishBrandPageModal",component:p},ha="en-US",w=async()=>{await Me(ha)},P=()=>({components:{PublishBrandPageModal:p},data(){return{domains:B,show:!1}},methods:{},template:`
+      <PublishBrandPageModal
+        visible
+        :is-published="false"
+        :is-search-domain-list-modal-visible="false"
+        should-publish
+        :domains="domains"
+        brand-page-display-name='Website' 
+        brand-page-base-url="https://brand.site/" 
+        radio-value="slug"
+        :show-radio-buttons="domains.length > 0"
+      />
+    `});P.loaders=[w];const v=()=>({components:{PublishBrandPageModal:p},data(){return{domains:B,domainType:"purchased",customDomain:{domainName:"doggers.info",created:"2024-07-26T01:44:22.257",updated:null,isAutoRenewEnabled:!0,isRegistrationComplete:!1,status:"Active"}}},methods:{onRadioButtonChanged(a){this.domainType=a}},template:`
+      <PublishBrandPageModal
+        visible
+        :is-published="false"
+        should-publish
+        :domains="domains"
+        :custom-domain="customDomain"
+        brand-page-display-name='Website'
+        brand-page-base-url="https://brand.site/"
+        radio-value="purchased"
+        :show-radio-buttons="domains.length > 0"
+        @radio-button-changed="onRadioButtonChanged"
+      />
+    `});v.loaders=[w];const D=()=>({components:{PublishBrandPageModal:p},data(){return{domains:B}},methods:{},template:`
+      <PublishBrandPageModal
+        visible
+        is-brand-page-slug-edit-mode
+        is-published
+        should-publish
+        :domains="domains"
+        brand-page-display-name='Website'
+        brand-page-base-url="https://brand.site/"
+        brand-page-slug='test-slug' 
+        :show-radio-buttons="domains.length > 0"
+      />
+    `});D.loaders=[w];const M=()=>({components:{PublishBrandPageModal:p},data(){return{domains:B}},methods:{},template:`
+      <PublishBrandPageModal
+        visible
+        is-published
+        should-publish
+        :domains="domains"
+        brand-page-display-name='Website' 
+        brand-page-base-url="https://brand.site/" 
+        radio-value="slug"
+        brand-page-url="https://brand.site/brandname"
+      />
+    `});M.loaders=[w];const x=()=>({components:{PublishBrandPageModal:p},data(){return{domains:[]}},methods:{},template:`
+      <PublishBrandPageModal
+        visible
+        is-design-com
+        is-published
+        should-publish
+        :domains="domains"
+        brand-page-display-name='Website' 
+        brand-page-slug='test-slug' 
+        brand-page-base-url="https://brand.site/" 
+        radio-value="slug"
+        brand-page-url="https://brand.site/test-slug"
+      />
+  `});x.loaders=[w];const S=()=>({components:{PublishBrandPageModal:p,Card:$},data(){return{domains:[],isSearchDomainListModalVisible:!1,isDesignCom:!1}},methods:{onHideDomainListModal(){this.isSearchDomainListModalVisible=!1},onShowDomainListModal(){this.isSearchDomainListModalVisible=!0}},template:`
+      <PublishBrandPageModal
+        visible
+        should-publish
+        :domains="domains"
+        brand-page-display-name='Website' 
+        brand-page-base-url="https://brand.site/" 
+        radio-value="slug"
+        brand-page-url="https://brand.site/brandname"
+        :show-radio-buttons="domains.length > 0"
+        :is-search-domain-list-modal-visible="isSearchDomainListModalVisible"
+        @on-hide-domain-modal="onHideDomainListModal"
+      >
+        <template #recommended>
+            <Card
+              :imgUrl="'https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/addon/add-ons-domain-name.svg'"
+              title="Custom Domain"
+              description="Make it easy for customers to find you with a domain that matches your business"
+              :is-design-com="isDesignCom"
+              :has-search-button="true"
+              :show-label="true"
+            />
+        </template>
+      </PublishBrandPageModal>
+    `});S.loaders=[w];var N,E,q;P.parameters={...P.parameters,docs:{...(N=P.parameters)==null?void 0:N.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      PublishBrandPageModal
+    },
+    data() {
+      return {
+        domains,
+        show: false
+      };
+    },
+    methods: {},
+    template: \`
+      <PublishBrandPageModal
+        visible
+        :is-published="false"
+        :is-search-domain-list-modal-visible="false"
+        should-publish
+        :domains="domains"
+        brand-page-display-name='Website' 
+        brand-page-base-url="https://brand.site/" 
+        radio-value="slug"
+        :show-radio-buttons="domains.length > 0"
+      />
+    \`
+  };
+}`,...(q=(E=P.parameters)==null?void 0:E.docs)==null?void 0:q.source}}};var I,A,W;v.parameters={...v.parameters,docs:{...(I=v.parameters)==null?void 0:I.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      PublishBrandPageModal
+    },
+    data() {
+      return {
+        domains,
+        domainType: 'purchased',
+        customDomain: {
+          domainName: 'doggers.info',
+          created: '2024-07-26T01:44:22.257',
+          updated: null,
+          isAutoRenewEnabled: true,
+          isRegistrationComplete: false,
+          status: 'Active'
+        }
+      };
+    },
+    methods: {
+      onRadioButtonChanged(val) {
+        this.domainType = val;
+      }
+    },
+    template: \`
+      <PublishBrandPageModal
+        visible
+        :is-published="false"
+        should-publish
+        :domains="domains"
+        :custom-domain="customDomain"
+        brand-page-display-name='Website'
+        brand-page-base-url="https://brand.site/"
+        radio-value="purchased"
+        :show-radio-buttons="domains.length > 0"
+        @radio-button-changed="onRadioButtonChanged"
+      />
+    \`
+  };
+}`,...(W=(A=v.parameters)==null?void 0:A.docs)==null?void 0:W.source}}};var O,R,U;D.parameters={...D.parameters,docs:{...(O=D.parameters)==null?void 0:O.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      PublishBrandPageModal
+    },
+    data() {
+      return {
+        domains
+      };
+    },
+    methods: {},
+    template: \`
+      <PublishBrandPageModal
+        visible
+        is-brand-page-slug-edit-mode
+        is-published
+        should-publish
+        :domains="domains"
+        brand-page-display-name='Website'
+        brand-page-base-url="https://brand.site/"
+        brand-page-slug='test-slug' 
+        :show-radio-buttons="domains.length > 0"
+      />
+    \`
+  };
+}`,...(U=(R=D.parameters)==null?void 0:R.docs)==null?void 0:U.source}}};var j,z,Y;M.parameters={...M.parameters,docs:{...(j=M.parameters)==null?void 0:j.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      PublishBrandPageModal
+    },
+    data() {
+      return {
+        domains
+      };
+    },
+    methods: {},
+    template: \`
+      <PublishBrandPageModal
+        visible
+        is-published
+        should-publish
+        :domains="domains"
+        brand-page-display-name='Website' 
+        brand-page-base-url="https://brand.site/" 
+        radio-value="slug"
+        brand-page-url="https://brand.site/brandname"
+      />
+    \`
+  };
+}`,...(Y=(z=M.parameters)==null?void 0:z.docs)==null?void 0:Y.source}}};var F,H,G;x.parameters={...x.parameters,docs:{...(F=x.parameters)==null?void 0:F.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      PublishBrandPageModal
+    },
+    data() {
+      return {
+        domains: []
+      };
+    },
+    methods: {},
+    template: \`
+      <PublishBrandPageModal
+        visible
+        is-design-com
+        is-published
+        should-publish
+        :domains="domains"
+        brand-page-display-name='Website' 
+        brand-page-slug='test-slug' 
+        brand-page-base-url="https://brand.site/" 
+        radio-value="slug"
+        brand-page-url="https://brand.site/test-slug"
+      />
+  \`
+  };
+}`,...(G=(H=x.parameters)==null?void 0:H.docs)==null?void 0:G.source}}};var K,Q,J;S.parameters={...S.parameters,docs:{...(K=S.parameters)==null?void 0:K.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      PublishBrandPageModal,
+      Card
+    },
+    data() {
+      return {
+        domains: [],
+        isSearchDomainListModalVisible: false,
+        isDesignCom: false
+      };
+    },
+    methods: {
+      onHideDomainListModal() {
+        this.isSearchDomainListModalVisible = false;
+      },
+      onShowDomainListModal() {
+        this.isSearchDomainListModalVisible = true;
+      }
+    },
+    template: \`
+      <PublishBrandPageModal
+        visible
+        should-publish
+        :domains="domains"
+        brand-page-display-name='Website' 
+        brand-page-base-url="https://brand.site/" 
+        radio-value="slug"
+        brand-page-url="https://brand.site/brandname"
+        :show-radio-buttons="domains.length > 0"
+        :is-search-domain-list-modal-visible="isSearchDomainListModalVisible"
+        @on-hide-domain-modal="onHideDomainListModal"
+      >
+        <template #recommended>
+            <Card
+              :imgUrl="'https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/addon/add-ons-domain-name.svg'"
+              title="Custom Domain"
+              description="Make it easy for customers to find you with a domain that matches your business"
+              :is-design-com="isDesignCom"
+              :has-search-button="true"
+              :show-label="true"
+            />
+        </template>
+      </PublishBrandPageModal>
+    \`
+  };
+}`,...(J=(Q=S.parameters)==null?void 0:Q.docs)==null?void 0:J.source}}};const Ia=["NotPublishedWithPurchasedDomains","PublishWithSelectedDomain","SetSlug","Published","PublishedNoDomains","Free"];export{S as Free,P as NotPublishedWithPurchasedDomains,v as PublishWithSelectedDomain,M as Published,x as PublishedNoDomains,D as SetSlug,Ia as __namedExportsOrder,qa as default};

package/.storybook-static/assets/SearchBar.stories-_wPX3-Rl.js

@@ -0,0 +1,12 @@
+import{B as i}from"./ButtonPrimary-DG9wNod9.js";import{c as p,e as r,h as u,x as m,a as h,o as f,z as _,t as B}from"./iframe-C86bI_2U.js";import{_ as S}from"./_plugin-vue_export-helper-DlAUqK2U.js";const s={components:{ButtonPrimary:i},props:{label:{type:String,required:!0},placeholder:{type:String,required:!0},searchInputDisabled:{type:Boolean,required:!1,default:!1}},methods:{onClick(){this.$emit("click")}}},b={class:"tw-flex"},g=["placeholder","disabled"];function y(x,w,a,k,q,c){const d=h("ButtonPrimary");return f(),p("div",b,[r("input",{type:"text",placeholder:a.placeholder,disabled:a.searchInputDisabled,style:{"padding-top":"9px","padding-bottom":"9px"},class:"tw-grow tw-rounded tw-bg-white tw-border-grayscale-500 !tw-rounded-r-none"},null,8,g),r("div",null,[u(d,{class:"tw-flex-none tw-p-1","rounded-left":!1,rounded:!1,"rounded-right":!0,"on-click":c.onClick},{default:m(()=>[_(B(a.label),1)]),_:1},8,["on-click"])])])}const l=S(s,[["render",y]]);s.__docgenInfo={exportName:"default",displayName:"SearchBar",description:"",tags:{},props:[{name:"label",type:{name:"string"},required:!0},{name:"placeholder",type:{name:"string"},required:!0},{name:"searchInputDisabled",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}}],events:[{name:"click"}],sourceFiles:["/Users/jamesjoung/repo/fe-shared-lib/src/atoms/components/SearchBar/SearchBar.vue"]};const D={title:"Components/Search Bar",component:l},e=()=>({components:{SearchBar:l},template:`
+      <SearchBar label="Search" placeholder="Business name"/>
+    `});e.story={name:"SearchBar"};var t,n,o;e.parameters={...e.parameters,docs:{...(t=e.parameters)==null?void 0:t.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      SearchBar
+    },
+    template: \`
+      <SearchBar label="Search" placeholder="Business name"/>
+    \`
+  };
+}`,...(o=(n=e.parameters)==null?void 0:n.docs)==null?void 0:o.source}}};const I=["Sample"];export{e as Sample,I as __namedExportsOrder,D as default};

package/.storybook-static/assets/Select-Dw-zvSUg.css

@@ -0,0 +1 @@
+fieldset[disabled] .select[data-v-655dfb44]{pointer-events:none}.select__spinner[data-v-655dfb44]{position:absolute;top:50%;right:0;transform:translateY(-50%);width:40px;height:38px;display:block}.select__spinner[data-v-655dfb44]:before,.select__spinner[data-v-655dfb44]:after{position:absolute;content:"";top:50%;left:50%;margin:-8px 0 0 -8px;width:16px;height:16px;border-radius:100%;border-color:#41b883 transparent transparent;border-style:solid;border-width:2px;box-shadow:0 0 0 1px transparent}.select__spinner[data-v-655dfb44]:before{animation:spinning-655dfb44 2.4s cubic-bezier(.41,.26,.2,.62);animation-iteration-count:infinite}.select__spinner[data-v-655dfb44]:after{animation:spinning-655dfb44 2.4s cubic-bezier(.51,.09,.21,.8);animation-iteration-count:infinite}.select__loading-enter-active[data-v-655dfb44],.select__loading-leave-active[data-v-655dfb44]{transition:opacity .4s ease-in-out;opacity:1}.select__loading-enter[data-v-655dfb44],.select__loading-leave-active[data-v-655dfb44]{opacity:0}.select[data-v-655dfb44],.select__input[data-v-655dfb44],.select__value[data-v-655dfb44]{font-family:inherit;font-size:16px;touch-action:manipulation}.select[data-v-655dfb44]{box-sizing:content-box;display:block;position:relative;width:100%;min-height:50px;text-align:left;color:#000;align-items:center}.select[data-v-655dfb44] [data-v-655dfb44]{box-sizing:border-box}.select[data-v-655dfb44]:focus{outline:none}.select--disabled[data-v-655dfb44]{background:#ededed;pointer-events:none;opacity:.6}.select--active[data-v-655dfb44]{z-index:50}.select--active:not(.select--above) .select__current[data-v-655dfb44],.select--active:not(.select--above) .select__input[data-v-655dfb44],.select--active:not(.select--above) .select__tags[data-v-655dfb44]{border-bottom-left-radius:0;border-bottom-right-radius:0}.select--active .select__caret[data-v-655dfb44]{transform:rotate(180deg)}.select--above.select--active .select__current[data-v-655dfb44],.select--above.select--active .select__input[data-v-655dfb44],.select--above.select--active .select__tags[data-v-655dfb44]{border-top-left-radius:0;border-top-right-radius:0}.select__input[data-v-655dfb44],.select__value[data-v-655dfb44]{position:relative;display:inline-block;min-height:20px;border:none;border-radius:5px;background:#fff;width:100%;transition:border .1s ease;box-sizing:border-box;vertical-align:top}.select__input[data-v-655dfb44]::-moz-placeholder{color:#35495e}.select__input[data-v-655dfb44]::placeholder{color:#35495e}.select__tag~.select__input[data-v-655dfb44],.select__tag~.select__value[data-v-655dfb44]{width:auto}.select__input[data-v-655dfb44]:hover,.select__value[data-v-655dfb44]:hover{border-color:#cfcfcf}.select__input[data-v-655dfb44]:focus,.select__value[data-v-655dfb44]:focus{border-color:#a8a8a8;outline:none}.select__tags[data-v-655dfb44]{min-height:48px;display:flex;align-items:center;padding:4px 40px 4px 16px;border-radius:5px;background:#fff}.select__tags input[data-v-655dfb44]{padding:0}.select__caret[data-v-655dfb44]{line-height:16px;display:block;position:absolute;box-sizing:border-box;width:40px;height:38px;right:1px;top:5px;padding:4px 8px;margin:0;text-decoration:none;text-align:center;cursor:pointer;transition:transform .2s ease}.select__caret[data-v-655dfb44]:before{position:relative;right:0;top:65%;color:#999;margin-top:50%;border-style:solid;border-width:5px 5px 0 5px;border-color:#999999 transparent transparent transparent;content:""}.select__placeholder[data-v-655dfb44]{color:#adadad;display:flex;align-items:center}.select__content-wrapper[data-v-655dfb44]{position:absolute;display:block;background:#fff;width:100%;max-height:240px;overflow:auto;border:1px solid #d0d0d0;border-top:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px;z-index:50;-webkit-overflow-scrolling:touch}.select__content[data-v-655dfb44]{list-style:none;display:inline-block;padding:0;margin:0;min-width:100%;vertical-align:top}.select--above .select__content-wrapper[data-v-655dfb44]{bottom:100%;border-radius:5px 5px 0 0;border-bottom:none;border-top:1px solid #d0d0d0}.select__content[data-v-655dfb44]::webkit-scrollbar{display:none}.select__element[data-v-655dfb44]{display:block}.select__option[data-v-655dfb44]{display:block;padding:12px;min-height:40px;line-height:16px;text-decoration:none;text-transform:none;vertical-align:middle;position:relative;cursor:pointer;white-space:nowrap;color:#4b545d}.select__option[data-v-655dfb44]:after{top:0;right:0;position:absolute;line-height:40px;padding-right:12px;padding-left:20px;font-size:13px}.select__option--highlight[data-v-655dfb44]{background:#f3f3f3;outline:none;color:#000}.select__option--highlight[data-v-655dfb44]:after{content:attr(data-select);background:#f3f3f3;color:silver}.select__option--selected[data-v-655dfb44]{background:#f3f3f3;color:#000;font-weight:700}.select__option--selected[data-v-655dfb44]:after{content:attr(data-selected);color:silver;background:inherit}.select__option--selected.select__option--highlight[data-v-655dfb44]:after{content:attr(data-deselect)}.select--disabled .select__current[data-v-655dfb44],.select--disabled .select__caret[data-v-655dfb44]{color:#a6a6a6}.select__option--disabled[data-v-655dfb44]{background:#ededed!important;color:#a6a6a6!important;cursor:text;pointer-events:none}.select__item[data-v-655dfb44]{display:flex;align-items:center}.select__item__text[data-v-655dfb44]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-enter-active[data-v-655dfb44],.select-leave-active[data-v-655dfb44]{transition:all .15s ease}.select-enter[data-v-655dfb44],.select-leave-active[data-v-655dfb44]{opacity:0}.select__strong[data-v-655dfb44]{margin-bottom:8px;line-height:20px;display:inline-block;vertical-align:top}[dir=rtl] .select[data-v-655dfb44]{text-align:right}[dir=rtl] .select__caret[data-v-655dfb44]{right:auto;left:1px}[dir=rtl] .select__tags[data-v-655dfb44]{padding:8px 8px 0 40px}[dir=rtl] .select__content[data-v-655dfb44]{text-align:right}[dir=rtl] .select__option[data-v-655dfb44]:after{right:auto;left:0}[dir=rtl] .select__clear[data-v-655dfb44]{right:auto;left:12px}[dir=rtl] .select__spinner[data-v-655dfb44]{right:auto;left:1px}@keyframes spinning-655dfb44{0%{transform:rotate(0)}to{transform:rotate(2turn)}}

package/.storybook-static/assets/Select.stories-BWINGxdY.js

@@ -0,0 +1,108 @@
+import{c as r,g as o,f as h,e as a,h as L,x as B,T as j,G as u,C as s,n as g,b as y,o as d,A as v,B as S,z as w,t as M,F as A,r as F}from"./iframe-C86bI_2U.js";import{_ as T}from"./_plugin-vue_export-helper-DlAUqK2U.js";function c(e){return e===0?!1:Array.isArray(e)&&e.length===0?!0:!e}function I(e){return(...t)=>!e(...t)}function R(e,t){let n;switch(e){case void 0:n="undefined";break;case null:n="null";break;case!1:n="false";break;default:n=e}return n.toString().toLowerCase().indexOf(t.trim())!==-1}function K(e,t,n,b){return e.filter(V=>R(b(V,n),t))}const N={data(){return{search:"",isOpen:!1,preferredOpenDirection:"below",optimizedHeight:this.maxHeight}},props:{isInternalSearch:{type:Boolean,default:!0},options:{type:Array,required:!0},modelValue:{type:[String,Object],default:null},trackBy:{type:String,default:null},label:{type:String},imageUrlField:{type:String,default:null},isSearchable:{type:Boolean,default:!0},shouldHideSelected:{type:Boolean,default:!1},placeholder:{type:String,default:"Select option"},shouldAllowEmpty:{type:Boolean,default:!0},shouldResetAfter:{type:Boolean,default:!1},shouldCloseOnSelect:{type:Boolean,default:!0},customLabel:{type:Function,default(e,t){return c(e)?"":t?e[t]:e}},shouldAllowCustom:{type:Boolean,default:!1},customPlaceholder:{type:String,default:"Press enter to create option"},customPosition:{type:String,default:"top"},id:{default:null},optionsLimit:{type:Number,default:1e3},shouldPreserveSearch:{type:Boolean,default:!1},shouldPreselectFirst:{type:Boolean,default:!1},shouldPreventAutofocus:{type:Boolean,default:!1},isDisabled:{type:Boolean,default:!1}},mounted(){this.shouldPreselectFirst&&!this.modelValue&&this.options.length&&this.select(this.filteredOptions[0])},computed:{filteredOptions(){const e=this.search||"",t=e.toLowerCase().trim();let n=this.options.concat();return this.isInternalSearch&&(n=K(n,t,this.label,this.customLabel)),n=this.shouldHideSelected?n.filter(I(this.isOptionSelected)):n,this.shouldAllowCustom&&t.length&&!this.isExistingOption(t)&&(this.customPosition==="bottom"?n.push({isCustom:!0,label:e}):n.unshift({isCustom:!0,label:e})),n.slice(0,this.optionsLimit)},valueKey(){return this.modelValue?this.trackBy?this.modelValue[this.trackBy]:this.modelValue:null},optionKeys(){return this.options.map(e=>this.customLabel(e,this.label).toString().toLowerCase())},exactMatchOption(){if(!this.search)return null;const e=this.search.toLowerCase().trim();return this.filteredOptions.find(t=>this.customLabel(t,this.label).toString().toLowerCase()===e)},hasExactMatch(){return!!this.exactMatchOption}},watch:{search(){this.$emit("search-change",this.search,this.id)}},methods:{updateSearch(e){this.search=e},isExistingOption(e){return this.options?this.optionKeys.indexOf(e)>-1:!1},getOptionKey(e){return this.trackBy?e[this.trackBy]:e},isOptionSelected(e){return this.valueKey===this.getOptionKey(e)},getOptionLabel(e){if(c(e))return"";if(e.isCustom)return e.label;const t=this.customLabel(e,this.label);return c(t)?"":t},getOptionImageUrl(e){if(this.imageUrlField&&!c(e))return e[this.imageUrlField]??void 0},select(e,t){if(!(this.isDisabled||e.$isDisabled)&&!(t==="Tab"&&!this.pointerDirty)){if(e.isCustom)this.$emit("custom",e.label,this.id),this.search="",this.shouldCloseOnSelect&&this.deactivate();else{if(this.isOptionSelected(e)){t!=="Tab"&&this.removeElement(e);return}this.$emit("update:modelValue",e,this.id)}this.shouldCloseOnSelect&&this.deactivate()}},removeElement(e,t=!0){if(!(this.isDisabled||e.$isDisabled)){if(!this.shouldAllowEmpty&&this.modelValue){this.deactivate();return}this.$emit("update:modelValue",null,this.id),this.$emit("remove",e,this.id),this.shouldCloseOnSelect&&t&&this.deactivate()}},async activate(){this.isOpen||this.isDisabled||(this.adjustPosition(),this.isOpen=!0,this.isSearchable?(this.shouldPreserveSearch||(this.search=""),this.shouldPreventAutofocus||await this.$nextTick(()=>this.$refs.search&&this.$refs.search.focus())):this.shouldPreventAutofocus||typeof this.$el<"u"&&this.$el.focus(),this.$emit("open",this.id))},deactivate(){this.isOpen&&(this.isOpen=!1,this.isSearchable?this.isSearchEmpty()&&this.$refs.search.blur():typeof this.$el<"u"&&this.$el.blur(),this.shouldPreserveSearch||(this.search=""),this.$emit("close",this.modelValue,this.id))},toggle(){this.isOpen?this.deactivate():this.activate()},isSearchEmpty(){return this.$refs.search!==null&&typeof this.$refs.search<"u"},shouldOpenBelow(){const e=this.$el.getBoundingClientRect().top,t=window.innerHeight-this.$el.getBoundingClientRect().bottom;return t>this.maxHeight||t>e||this.openDirection==="below"||this.openDirection==="bottom"},adjustPosition(){if(typeof window>"u")return;const e=this.$el.getBoundingClientRect().top,t=window.innerHeight-this.$el.getBoundingClientRect().bottom;this.shouldOpenBelow()?(this.preferredOpenDirection="below",this.optimizedHeight=Math.min(t-40,this.maxHeight)):(this.preferredOpenDirection="above",this.optimizedHeight=Math.min(e-40,this.maxHeight))}}},U={data(){return{pointer:0,pointerDirty:!1}},props:{shouldShowPointer:{type:Boolean,default:!0},optionHeight:{type:Number,default:40},shouldCloseOnSelect:{type:Boolean,default:!0}},computed:{pointerPosition(){return this.pointer*this.optionHeight},visibleElements(){return this.optimizedHeight/this.optionHeight}},watch:{filteredOptions(){this.pointerAdjust()},isOpen(){this.pointerDirty=!1},pointer(){this.$refs.search&&this.$refs.search.setAttribute("aria-activedescendant",`${this.id}-${this.pointer.toString()}`)}},methods:{isOptionHighlighted(e){return e===this.pointer&&this.shouldShowPointer},addPointerElement({key:e}="Enter"){this.filteredOptions.length>0&&this.select(this.filteredOptions[this.pointer],e),this.pointerReset()},shouldScrollDown(){return this.$refs.list.scrollTop<=this.pointerPosition-(this.visibleElements-1)*this.optionHeight},shouldScrollUp(){return this.$refs.list.scrollTop>=this.pointerPosition},pointerForward(){this.pointer<this.filteredOptions.length-1&&(this.pointer+=1,this.shouldScrollDown()&&(this.$refs.list.scrollTop=this.pointerPosition-(this.visibleElements-1)*this.optionHeight)),this.pointerDirty=!0},pointerBackward(){this.pointer>0&&(this.pointer-=1,this.shouldScrollUp()&&(this.$refs.list.scrollTop=this.pointerPosition)),this.pointerDirty=!0},pointerReset(){this.shouldCloseOnSelect&&(this.pointer=0,this.$refs.list&&(this.$refs.list.scrollTop=0))},pointerAdjust(){this.pointer>=this.filteredOptions.length-1&&(this.pointer=this.filteredOptions.length?this.filteredOptions.length-1:0)},pointerSet(e){this.pointer=e,this.pointerDirty=!0}}},H={mixins:[N,U],props:{name:{type:String,default:""},selectLabel:{type:String,default:void 0},selectedLabel:{type:String,default:void 0},deselectLabel:{type:String,default:void 0},shouldShowLabels:{type:Boolean,default:!0},maxHeight:{type:Number,default:300},isLoading:{type:Boolean,default:!1},openDirection:{type:String,default:""},shouldShowNoResults:{type:Boolean,default:!0},tabindex:{type:Number,default:0},shouldSelectExactMatchOnBlur:{type:Boolean,default:!1},isInvalid:{type:Boolean,default:!1}},computed:{isValueVisible(){return this.isSearchable&&this.isOpen?!1:!!this.modelValue},isPlaceholderVisible(){return this.isSearchable&&this.isOpen?!1:!this.modelValue},deselectLabelText(){return this.shouldShowLabels?this.deselectLabel:""},selectLabelText(){return this.shouldShowLabels?this.selectLabel:""},selectedLabelText(){return this.shouldShowLabels?this.selectedLabel:""},inputStyle(){return this.isSearchable?this.isOpen?{width:"100%"}:{width:"0",position:"absolute",padding:"0"}:""},contentStyle(){return this.options.length?{display:"inline-block"}:{display:"block"}},isAbove(){return this.openDirection==="above"||this.openDirection==="top"?!0:this.openDirection==="below"||this.openDirection==="bottom"?!1:this.preferredOpenDirection==="above"}},watch:{isOpen(e){if(e&&this.modelValue){const t=document.getElementById(this.getListId(this.modelValue));t&&this.$nextTick(()=>{t.scrollIntoView({behavior:"instant",block:"nearest",inline:"nearest"})})}}},methods:{onBlur(){this.shouldSelectExactMatchOnBlur&&this.hasExactMatch&&(this.isOptionSelected(this.exactMatchOption)||this.select(this.exactMatchOption,this.getOptionKey(this.exactMatchOption))),this.deactivate()},getListId(e){return`${this.id}-${this.getOptionKey(e)}`}}},z=["aria-owns","tabindex"],q={class:"select__spinner"},G=["name","value"],W=["id","aria-controls","disabled","placeholder","tabindex","value"],Y=["id"],J=["id","role"],Q=["data-deselect","data-select","data-selected","onFocus","onClick","onMouseenter"],X={class:"select__item"},Z={key:0},_=["src"],ee={class:"select__item__text"},te={class:"select__option"};function ie(e,t,n,b,V,l){return d(),r("div",{"aria-owns":`listbox-${e.id}`,class:y([{"select--active":e.isOpen,"select--disabled":e.isDisabled,"select--above":l.isAbove},"select"]),tabindex:e.isSearchable?-1:n.tabindex,onBlur:t[12]||(t[12]=i=>e.isSearchable?!1:e.deactivate()),onFocus:t[13]||(t[13]=(...i)=>e.activate&&e.activate(...i)),onKeydown:[t[14]||(t[14]=u(s((...i)=>e.pointerForward&&e.pointerForward(...i),["self","prevent"]),["down"])),t[15]||(t[15]=u(s((...i)=>e.pointerBackward&&e.pointerBackward(...i),["self","prevent"]),["up"])),t[16]||(t[16]=u(s(i=>e.addPointerElement(i),["stop","self"]),["enter","tab"]))],onKeyup:t[17]||(t[17]=u((...i)=>e.deactivate&&e.deactivate(...i),["esc"]))},[n.isLoading?h("",!0):o(e.$slots,"caret",{key:0,toggle:e.toggle},()=>[a("div",{class:"select__caret",onMousedown:t[0]||(t[0]=s((...i)=>e.toggle&&e.toggle(...i),["prevent","stop"]))},null,32)],!0),o(e.$slots,"clear",{search:e.search},void 0,!0),a("div",{ref:"tags",class:y(["select__tags tw-text-grayscale-600 tw-border tw-border-solid",{"tw-border-grayscale-500 focus:tw-border-grayscale-600":!n.isInvalid,"tw-border-error-500 focus:tw-border-error-600":n.isInvalid}])},[L(j,{name:"select__loading"},{default:B(()=>[o(e.$slots,"loading",{},()=>[v(a("div",q,null,512),[[S,n.isLoading]])],!0)]),_:3}),a("input",{name:n.name,value:e.valueKey,hidden:""},null,8,G),e.isSearchable?(d(),r("input",{key:0,id:e.id,ref:"search","aria-controls":`listbox-${e.id}`,disabled:e.isDisabled,placeholder:e.placeholder,style:g(l.inputStyle),tabindex:n.tabindex,value:e.search,class:"select__input",spellcheck:"false",autocomplete:"one-time-code",type:"text",onInput:t[1]||(t[1]=s(i=>e.updateSearch(i.target.value),["stop"])),onBlur:t[2]||(t[2]=s((...i)=>l.onBlur&&l.onBlur(...i),["prevent"])),onFocus:t[3]||(t[3]=s((...i)=>e.activate&&e.activate(...i),["prevent"])),onKeyup:t[4]||(t[4]=u((...i)=>e.deactivate&&e.deactivate(...i),["esc"])),onKeydown:[t[5]||(t[5]=u(s((...i)=>e.pointerForward&&e.pointerForward(...i),["prevent"]),["down"])),t[6]||(t[6]=u(s((...i)=>e.pointerBackward&&e.pointerBackward(...i),["prevent"]),["up"])),t[7]||(t[7]=u(s(i=>e.addPointerElement(i),["prevent","stop","self"]),["enter"]))]},null,44,W)):h("",!0),l.isValueVisible?(d(),r("span",{key:1,class:"select__value",onMousedown:t[8]||(t[8]=s((...i)=>e.toggle&&e.toggle(...i),["prevent"]))},[o(e.$slots,"label",{option:e.modelValue},()=>[w(M(e.modelValue),1)],!0)],32)):h("",!0),l.isPlaceholderVisible?(d(),r("span",{key:2,class:"select__placeholder",onMousedown:t[9]||(t[9]=s((...i)=>e.toggle&&e.toggle(...i),["prevent"]))},[o(e.$slots,"placeholder",{},()=>[w(M(e.placeholder),1)],!0)],32)):h("",!0)],2),L(j,{name:"select"},{default:B(()=>[v(a("div",{ref:"list",style:g({maxHeight:`${e.optimizedHeight}px`}),class:"select__content-wrapper",tabindex:"-1",onFocus:t[10]||(t[10]=(...i)=>e.activate&&e.activate(...i)),onMousedown:t[11]||(t[11]=s(()=>{},["prevent"]))},[a("ul",{id:`listbox-${e.id}`,style:g(l.contentStyle),class:"select__content",role:"listbox"},[o(e.$slots,"beforeList",{},void 0,!0),(d(!0),r(A,null,F(e.filteredOptions,(i,p)=>(d(),r("li",{id:l.getListId(i),key:p,role:i&&i.$isDisabled?null:"option",class:"select__element"},[i&&i.$isDisabled?h("",!0):(d(),r("span",{key:0,class:y([{"select__option--highlight":e.isOptionHighlighted(p),"select__option--selected":e.isOptionSelected(i)},"select__option"]),"data-deselect":l.deselectLabelText,"data-select":i&&i.isCustom?e.customPlaceholder:l.selectLabelText,"data-selected":l.selectedLabelText,onFocus:O=>e.select(i),onClick:s(O=>e.select(i),["stop"]),onMouseenter:s(O=>e.pointerSet(p),["self"])},[o(e.$slots,"option",{index:p,option:i,search:e.search},()=>[a("span",X,[e.getOptionImageUrl(i)?(d(),r("span",Z,[a("img",{class:"tw-mr-1",height:"24",width:"30",src:e.getOptionImageUrl(i),alt:""},null,8,_)])):h("",!0),a("span",ee,M(e.getOptionLabel(i)),1)])],!0)],42,Q))],8,J))),128)),v(a("li",null,[a("span",te,[o(e.$slots,"noResult",{search:e.search},()=>[t[18]||(t[18]=w("No results"))],!0)])],512),[[S,n.shouldShowNoResults&&e.filteredOptions.length===0&&e.search&&!n.isLoading]]),o(e.$slots,"afterList",{},void 0,!0)],12,Y)],36),[[S,e.isOpen]])]),_:3})],42,z)}const x=T(H,[["render",ie],["__scopeId","data-v-655dfb44"]]);H.__docgenInfo={exportName:"default",displayName:"Select",description:"",tags:{},props:[{name:"isInternalSearch",mixin:{name:"selectMixin",path:"selectMixin.js"},type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"options",mixin:{name:"selectMixin",path:"selectMixin.js"},type:{name:"array"},required:!0},{name:"modelValue",mixin:{name:"selectMixin",path:"selectMixin.js"},type:{name:"string|object"},defaultValue:{func:!1,value:"null"}},{name:"trackBy",mixin:{name:"selectMixin",path:"selectMixin.js"},type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"label",mixin:{name:"selectMixin",path:"selectMixin.js"},type:{name:"string"}},{name:"imageUrlField",mixin:{name:"selectMixin",path:"selectMixin.js"},type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"isSearchable",mixin:{name:"selectMixin",path:"selectMixin.js"},type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"shouldHideSelected",mixin:{name:"selectMixin",path:"selectMixin.js"},type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"placeholder",mixin:{name:"selectMixin",path:"selectMixin.js"},type:{name:"string"},defaultValue:{func:!1,value:"'Select option'"}},{name:"shouldAllowEmpty",mixin:{name:"selectMixin",path:"selectMixin.js"},type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"shouldResetAfter",mixin:{name:"selectMixin",path:"selectMixin.js"},type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"shouldCloseOnSelect",mixin:{name:"selectMixin",path:"selectMixin.js"},type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"customLabel",mixin:{name:"selectMixin",path:"selectMixin.js"},type:{name:"func"},defaultValue:{func:!0,value:`function(option, label) {
+  if (isEmpty(option)) return '';
+  return label ? option[label] : option;
+}`}},{name:"shouldAllowCustom",mixin:{name:"selectMixin",path:"selectMixin.js"},type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"customPlaceholder",mixin:{name:"selectMixin",path:"selectMixin.js"},type:{name:"string"},defaultValue:{func:!1,value:"'Press enter to create option'"}},{name:"customPosition",mixin:{name:"selectMixin",path:"selectMixin.js"},type:{name:"string"},defaultValue:{func:!1,value:"'top'"}},{name:"id",mixin:{name:"selectMixin",path:"selectMixin.js"},type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"optionsLimit",mixin:{name:"selectMixin",path:"selectMixin.js"},type:{name:"number"},defaultValue:{func:!1,value:"1000"}},{name:"shouldPreserveSearch",mixin:{name:"selectMixin",path:"selectMixin.js"},type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"shouldPreselectFirst",mixin:{name:"selectMixin",path:"selectMixin.js"},type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"shouldPreventAutofocus",mixin:{name:"selectMixin",path:"selectMixin.js"},type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"isDisabled",mixin:{name:"selectMixin",path:"selectMixin.js"},type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"shouldShowPointer",mixin:{name:"pointerMixin",path:"pointerMixin.js"},type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"optionHeight",mixin:{name:"pointerMixin",path:"pointerMixin.js"},type:{name:"number"},defaultValue:{func:!1,value:"40"}},{name:"name",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"selectLabel",type:{name:"string"},defaultValue:{func:!1,value:"undefined"}},{name:"selectedLabel",type:{name:"string"},defaultValue:{func:!1,value:"undefined"}},{name:"deselectLabel",type:{name:"string"},defaultValue:{func:!1,value:"undefined"}},{name:"shouldShowLabels",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"maxHeight",type:{name:"number"},defaultValue:{func:!1,value:"300"}},{name:"isLoading",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"openDirection",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"shouldShowNoResults",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"tabindex",type:{name:"number"},defaultValue:{func:!1,value:"0"}},{name:"shouldSelectExactMatchOnBlur",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"isInvalid",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}}],events:[{name:"search-change",mixin:{name:"selectMixin",path:"selectMixin.js"},type:{names:["undefined"]},properties:[{type:{names:["undefined"]},name:"<anonymous1>"}]},{name:"custom",mixin:{name:"selectMixin",path:"selectMixin.js"},type:{names:["undefined"]},properties:[{type:{names:["undefined"]},name:"<anonymous1>"}]},{name:"update:modelValue",mixin:{name:"selectMixin",path:"selectMixin.js"},type:{names:["undefined"]},properties:[{type:{names:["undefined"]},name:"<anonymous1>"}]},{name:"remove",mixin:{name:"selectMixin",path:"selectMixin.js"},type:{names:["undefined"]},properties:[{type:{names:["undefined"]},name:"<anonymous1>"}]},{name:"open",mixin:{name:"selectMixin",path:"selectMixin.js"},type:{names:["undefined"]}},{name:"close",mixin:{name:"selectMixin",path:"selectMixin.js"},type:{names:["undefined"]},properties:[{type:{names:["undefined"]},name:"<anonymous1>"}]}],slots:[{name:"caret",scoped:!0,bindings:[{name:"toggle",title:"binding"}]},{name:"clear",scoped:!0,bindings:[{name:"search",title:"binding"}]},{name:"loading"},{name:"label",scoped:!0,bindings:[{name:"option",title:"binding"}]},{name:"placeholder"},{name:"beforeList"},{name:"option",scoped:!0,bindings:[{name:"index",title:"binding"},{name:"option",title:"binding"},{name:"search",title:"binding"}]},{name:"noResult",scoped:!0,bindings:[{name:"search",title:"binding"}]},{name:"afterList"}],sourceFiles:["/Users/jamesjoung/repo/fe-shared-lib/src/atoms/components/Select/Select.vue","/Users/jamesjoung/repo/fe-shared-lib/src/atoms/components/Select/pointerMixin.js","/Users/jamesjoung/repo/fe-shared-lib/src/atoms/components/Select/selectMixin.js"]};const le={title:"Components/Select",component:x,args:{isLoading:!1,isSearchable:!0,shouldAllowCustom:!0,shouldCloseOnSelect:!0,isDisabled:!1,deselectLabel:void 0,selectLabel:void 0,customPosition:void 0,optionHeight:void 0,shouldHideSelected:void 0,shouldShowPointer:void 0,shouldPreserveSearch:void 0,optionsLimit:void 0,openDirection:void 0,maxHeight:void 0,customPlaceholder:void 0,id:void 0,shouldPreselectFirst:void 0,shouldPreventAutofocus:void 0,name:void 0,shouldShowLabels:void 0,customLabel:void 0,isInternalSearch:void 0,label:void 0,shouldAllowEmpty:void 0,selectedLabel:void 0,shouldPreventAutoFocus:void 0,shouldResetAfter:void 0,shouldShowNoResults:void 0,options:["Luke Skywalker","Princess Leia Organa","Han Solo","Darth Vader","Obi-Wan Kenobi","Yoda","Chewbacca","R2-D2","C-3PO","Emperor Palpatine"]},argTypes:{customPosition:{type:"string",control:{type:"select",options:["top","bottom"]}},openDirection:{type:"string",control:{type:"select",options:["top","bottom"]}}}},m=(e,{argTypes:t})=>({components:{Select:x},props:Object.keys(t),setup(){return{args:e}},data:()=>({internalValue:""}),watch:{value(n){this.internalValue=n}},template:`
+          <Select
+              v-model="internalValue"
+              v-bind="args"
+              @custom="add"
+          />
+        `,methods:{add(n){this.internalValue=n,this.args.options.push(n)}}}),f=(e,{argTypes:t})=>({components:{Select:x},props:Object.keys(t),setup(){return{args:e}},data:()=>({internalValue:""}),watch:{value(n){this.internalValue=n}},template:`
+          <Select
+              v-model="internalValue"
+              v-bind="args"
+              @custom="add"
+          >
+            <template v-slot:label="{option}">
+              <div class="tw-m-1 tw-bg-info-300">
+                {{ option }}
+              </div>
+            </template>
+            <template v-slot:option="{option}">
+              <div class="tw-italic tw-text-success-500">
+                {{ option }}
+              </div>
+            </template>
+          </Select>
+        `,methods:{add(n){this.internalValue=n,this.args.options.push(n)}}});var P,$,D;m.parameters={...m.parameters,docs:{...(P=m.parameters)==null?void 0:P.docs,source:{originalSource:`(args, {
+  argTypes
+}) => {
+  return {
+    components: {
+      Select
+    },
+    props: Object.keys(argTypes),
+    setup() {
+      return {
+        args
+      };
+    },
+    data: () => ({
+      internalValue: ''
+    }),
+    watch: {
+      value(v) {
+        this.internalValue = v;
+      }
+    },
+    template: \`
+          <Select
+              v-model="internalValue"
+              v-bind="args"
+              @custom="add"
+          />
+        \`,
+    methods: {
+      add(value) {
+        this.internalValue = value;
+        this.args.options.push(value);
+      }
+    }
+  };
+}`,...(D=($=m.parameters)==null?void 0:$.docs)==null?void 0:D.source}}};var k,C,E;f.parameters={...f.parameters,docs:{...(k=f.parameters)==null?void 0:k.docs,source:{originalSource:`(args, {
+  argTypes
+}) => {
+  return {
+    components: {
+      Select
+    },
+    props: Object.keys(argTypes),
+    setup() {
+      return {
+        args
+      };
+    },
+    data: () => ({
+      internalValue: ''
+    }),
+    watch: {
+      value(v) {
+        this.internalValue = v;
+      }
+    },
+    template: \`
+          <Select
+              v-model="internalValue"
+              v-bind="args"
+              @custom="add"
+          >
+            <template v-slot:label="{option}">
+              <div class="tw-m-1 tw-bg-info-300">
+                {{ option }}
+              </div>
+            </template>
+            <template v-slot:option="{option}">
+              <div class="tw-italic tw-text-success-500">
+                {{ option }}
+              </div>
+            </template>
+          </Select>
+        \`,
+    methods: {
+      add(value) {
+        this.internalValue = value;
+        this.args.options.push(value);
+      }
+    }
+  };
+}`,...(E=(C=f.parameters)==null?void 0:C.docs)==null?void 0:E.source}}};const ae=["Basic","CustomOptionValues"];export{m as Basic,f as CustomOptionValues,ae as __namedExportsOrder,le as default};

package/.storybook-static/assets/SellDomainNameList.fixtures-LC6fjr_b.js

@@ -0,0 +1 @@
+const e=[...Array(3).keys()].map(()=>[{domainName:"notloic.fr",price:"0.00",currency:"usd",checkoutUrl:"#"},{domainName:"shadyloic.fr",price:"18.00",costPrice:"12.00",currency:"usd",checkoutUrl:"#"},{domainName:"badloic.fr",price:"18.00",costPrice:"12.00",currency:"usd",checkoutUrl:"#"},{domainName:"flirtyloic.fr",price:"18.00",costPrice:"12.00",currency:"usd",checkoutUrl:"#"}]).reduce((c,r)=>c.concat(r),[]);export{e as d};

package/.storybook-static/assets/SellDomainNameListModal-ByK_ak0A.js

@@ -0,0 +1 @@
+import{M as f}from"./Modal-BQrpXSGA.js";import{S,a as y,t as r}from"./SellDomainNameListSearchResult-By0IpIM_.js";import{y as n,x as s,a as t,o as l,f as m}from"./iframe-C86bI_2U.js";import{_ as p}from"./_plugin-vue_export-helper-DlAUqK2U.js";const d={components:{Modal:f,SellDomainNameSearch:y,SellDomainNameSearchResult:S},props:{currency:{type:Object,required:!0},domainNameItems:{type:Array,required:!1,default:void 0},headerSubtitle:{type:String,default:null},headerTitle:{type:String,default:null},isBusy:{type:Boolean,required:!0},previousSearchText:{type:String,required:!0},modelValue:{type:String,required:!1,default:void 0},visible:{type:Boolean,required:!0},isDesignCom:{type:Boolean,required:!1,default:!1},domainSearchLocation:{type:String,default:void 0}},emits:["close-modal","input","search"],setup(){return{domainSearchHeaderTitle:r("sellDomainNameListModal.domainSearchHeaderTitle"),domainSearchHeaderSubtitle:r("sellDomainNameListModal.domainSearchHeaderSubtitle")}},methods:{onSearch(){this.$emit("search")},onCloseModal(){this.$emit("close-modal")},onSearchTextInputChange(i){this.$emit("update:model-value",i)}}};function b(i,g,e,o,v,a){const u=t("SellDomainNameSearch"),c=t("SellDomainNameSearchResult"),h=t("Modal");return l(),n(h,{classes:"sell-domain-name-list-modal--modal tw-text-black","close-on-esc":"","full-screen-breakpoint":"md",visible:e.visible,"hide-scrollbar":!1,"show-modal-background-image":!1,"content-classes":e.isBusy?["tw-overflow-y-hidden"]:[],onCloseModal:a.onCloseModal},{header:s(()=>[e.visible?(l(),n(u,{key:0,"is-design-com":e.isDesignCom,"header-title":e.headerTitle||o.domainSearchHeaderTitle,"header-subtitle":e.headerSubtitle||o.domainSearchHeaderSubtitle,"initial-search-term":e.modelValue,onOnSearch:a.onSearch,onOnSearchTextInputChange:a.onSearchTextInputChange},null,8,["is-design-com","header-title","header-subtitle","initial-search-term","onOnSearch","onOnSearchTextInputChange"])):m("",!0)]),default:s(()=>[e.visible?(l(),n(c,{key:0,"is-design-com":e.isDesignCom,"previous-search-text":e.previousSearchText,"is-busy":e.isBusy,"domain-name-items":e.domainNameItems,currency:e.currency,"domain-search-location":e.domainSearchLocation},null,8,["is-design-com","previous-search-text","is-busy","domain-name-items","currency","domain-search-location"])):m("",!0)]),_:1},8,["visible","content-classes","onCloseModal"])}const C=p(d,[["render",b],["__scopeId","data-v-cb4915d5"]]);d.__docgenInfo={exportName:"default",displayName:"SellDomainNameListModal",description:"",tags:{},props:[{name:"currency",type:{name:"object"},required:!0},{name:"domainNameItems",type:{name:"array"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"headerSubtitle",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"headerTitle",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"isBusy",type:{name:"boolean"},required:!0},{name:"previousSearchText",type:{name:"string"},required:!0},{name:"modelValue",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"undefined"}},{name:"visible",type:{name:"boolean"},required:!0},{name:"isDesignCom",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"domainSearchLocation",type:{name:"string"},defaultValue:{func:!1,value:"undefined"}}],events:[{name:"close-modal"},{name:"input"},{name:"search"},{name:"update:model-value",type:{names:["undefined"]}}],sourceFiles:["/Users/jamesjoung/repo/fe-shared-lib/src/experiences/components/SellDomainNameListModal/SellDomainNameListModal.vue"]};export{C as S};

package/.storybook-static/assets/SellDomainNameListModal-CdfyEX1a.css

@@ -0,0 +1 @@
+@media (max-width: 640px){[data-v-cb4915d5] .sell-domain-name-list-modal--modal{height:90vh;width:90vw}}@media (min-width: 640px){[data-v-cb4915d5] .sell-domain-name-list-modal--modal{height:70vh;width:100%}}

package/.storybook-static/assets/SellDomainNameListModal.stories-DrL8w2AY.js

@@ -0,0 +1,71 @@
+import{d}from"./SellDomainNameList.fixtures-LC6fjr_b.js";import{S as o}from"./SellDomainNameListModal-ByK_ak0A.js";import"./Modal-BQrpXSGA.js";import"./Icon-8mZGP41G.js";import"./iframe-C86bI_2U.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./SellDomainNameListSearchResult-By0IpIM_.js";import"./Button-DtVlr_q3.js";import"./ButtonPrimary-DG9wNod9.js";import"./TextInput-JK1M0hv6.js";import"./FormControl.mixin-_gXRExB7.js";import"./Loader-D61Ki9P1.js";import"./Picture-Cq76CaoK.js";import"./Price-DKOwLeD0.js";import"./event-constants-CMO9VQVu.js";const M={title:"Components/SellDomainNameListModal",component:o},e=()=>({components:{SellDomainNameListModal:o},data(){return{domainNamesFixture:d,isBusy:!1,currency:{id:1,name:"United State Dollars",iso4127Code:"USD",symbol:"$",abbreviation:"US"}}},methods:{onSearch(a){console.log("onSearch",a),this.isBusy=!0,setTimeout(()=>{this.isBusy=!1},1e3)}},template:`
+        <div>
+          <SellDomainNameListModal :visible="true" :currency="currency" :domain-name-items="domainNamesFixture" :is-busy="isBusy" @search="onSearch"/>
+        </div>
+      `}),n=()=>({components:{SellDomainNameListModal:o},data(){return{domainNamesFixture:d,isBusy:!0,currency:{id:1,name:"United State Dollars",iso4127Code:"USD",symbol:"$",abbreviation:"US"}}},methods:{onSearch(a){console.log(`onSearch: ignored ${a}`)}},template:`
+        <div>
+          <SellDomainNameListModal :visible="true" :currency="currency" :domain-name-items="domainNamesFixture" :is-busy="isBusy" @search="onSearch"/>
+        </div>
+      `});var r,i,s;e.parameters={...e.parameters,docs:{...(r=e.parameters)==null?void 0:r.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      SellDomainNameListModal
+    },
+    data() {
+      return {
+        domainNamesFixture,
+        isBusy: false,
+        currency: {
+          id: 1,
+          name: 'United State Dollars',
+          iso4127Code: 'USD',
+          symbol: '$',
+          abbreviation: 'US'
+        }
+      };
+    },
+    methods: {
+      onSearch(payload) {
+        console.log('onSearch', payload);
+        this.isBusy = true;
+        setTimeout(() => {
+          this.isBusy = false;
+        }, 1000);
+      }
+    },
+    template: \`
+        <div>
+          <SellDomainNameListModal :visible="true" :currency="currency" :domain-name-items="domainNamesFixture" :is-busy="isBusy" @search="onSearch"/>
+        </div>
+      \`
+  };
+}`,...(s=(i=e.parameters)==null?void 0:i.docs)==null?void 0:s.source}}};var t,m,l;n.parameters={...n.parameters,docs:{...(t=n.parameters)==null?void 0:t.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      SellDomainNameListModal
+    },
+    data() {
+      return {
+        domainNamesFixture,
+        isBusy: true,
+        currency: {
+          id: 1,
+          name: 'United State Dollars',
+          iso4127Code: 'USD',
+          symbol: '$',
+          abbreviation: 'US'
+        }
+      };
+    },
+    methods: {
+      onSearch(payload) {
+        console.log(\`onSearch: ignored \${payload}\`);
+      }
+    },
+    template: \`
+        <div>
+          <SellDomainNameListModal :visible="true" :currency="currency" :domain-name-items="domainNamesFixture" :is-busy="isBusy" @search="onSearch"/>
+        </div>
+      \`
+  };
+}`,...(l=(m=n.parameters)==null?void 0:m.docs)==null?void 0:l.source}}};const f=["Sample","SampleLoading"];export{e as Sample,n as SampleLoading,f as __namedExportsOrder,M as default};

package/.storybook-static/assets/SellDomainNameListSearchResult-1WuAKfzI.css

@@ -0,0 +1 @@
+[data-v-6b766d48] .c-sell-domain-name-list--button{min-width:7rem}