UNPKG

@dialpad/dialtone-vue

Version:

Vue component library for Dialpad's design system Dialtone

3 lines (2 loc) 4.85 kB
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@dialpad/dialtone-icons/vue2"),o=require("./message-input-button.cjs"),l=require("../../localization/index.cjs"),r=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),u=require("../stack/stack.cjs"),s=require("../button/button.cjs"),c=require("../input/input.cjs"),p=require("../popover/popover.cjs"),_={name:"MessageInputLink",components:{DtPopover:p.default,DtInput:c.default,DtButton:s.default,DtStack:u.default,DtIconLink2:a.DtIconLink2,DtRecipeMessageInputButton:o.default},props:{open:{type:Boolean,default:!1},linkButtonOptions:{type:Object,required:!0},isSelectionActive:{type:Function,default:()=>{}}},emits:["set-link","remove-link","opened"],data(){return{linkText:"",linkInput:"",isOpen:!1,i18n:new l.DialtoneLocalization}},computed:{anchorButtonLabel(){return this.i18n.$ta("DIALTONE_MESSAGE_INPUT_LINK_BUTTON_LABEL")},textInputLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_TEXT_LABEL")},linkInputLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_LINK_LABEL")},linkInputPlaceHolder(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_LINK_PLACEHOLDER")},removeButtonLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_REMOVE_LABEL")},cancelButtonLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_CANCEL_LABEL")},confirmButtonLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_CONFIRM_LABEL")}},watch:{open:{immediate:!0,handler(i){this.isOpen=i}}},methods:{setInitialValues(i,t){this.linkText=i,this.linkInput=t}}};var k=function(){var t=this,n=t._self._c;return n("dt-popover",{attrs:{open:t.isOpen,placement:"bottom-start","content-class":"d-recipe-message-input__link-popover","data-qa":"dt-message-input-link-popover","show-close-button":!1},on:{opened:function(e){return t.$emit("opened",e)}},scopedSlots:t._u([{key:"anchor",fn:function(){return[n("dt-recipe-message-input-button",{attrs:{"aria-label":t.anchorButtonLabel["aria-label"],"tooltip-text":t.anchorButtonLabel["tooltip-text"],"keyboard-shortcut-text":t.linkButtonOptions.keyboardShortcutText,"data-qa":"message-input-link-btn","is-active":t.isSelectionActive("link")},on:{click:function(e){t.isOpen=!0}},scopedSlots:t._u([{key:"icon",fn:function(){return[n("dt-icon-link2",{staticClass:"d-recipe-message-input__button-stack-icon",attrs:{size:"200"}})]},proxy:!0}])})]},proxy:!0},{key:"content",fn:function(){return[n("dt-stack",{attrs:{gap:"500"}},[n("div",{staticClass:"d-recipe-message-input__link-dialog-title"},[t._v(" "+t._s(t.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_DIALOG_TITLE"))+" ")]),n("dt-input",{attrs:{"input-aria-label":t.textInputLabel,size:"xs","data-qa":"dt-message-input-link-text-input",label:t.textInputLabel,"input-wrapper-class":"d-recipe-message-input__link-input"},on:{click:function(e){e.stopPropagation()},focus:function(e){e.stopPropagation()},keydown:function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"enter",13,e.key,"Enter")?null:t.$emit("set-link",t.linkText,t.linkInput)}},nativeOn:{click:function(e){e.stopPropagation()}},model:{value:t.linkText,callback:function(e){t.linkText=e},expression:"linkText"}}),n("dt-input",{attrs:{"input-aria-label":t.linkInputLabel,size:"xs","data-qa":"dt-message-input-link-input",placeholder:t.linkInputPlaceHolder,label:t.linkInputLabel,"input-wrapper-class":"d-recipe-message-input__link-input"},on:{click:function(e){e.stopPropagation()},focus:function(e){e.stopPropagation()},keydown:function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"enter",13,e.key,"Enter")?null:t.$emit("set-link",t.linkText,t.linkInput)}},nativeOn:{click:function(e){e.stopPropagation()}},model:{value:t.linkInput,callback:function(e){t.linkInput=e},expression:"linkInput"}}),n("dt-stack",{staticClass:"d-recipe-message-input__link-dialog-buttons",attrs:{direction:"row"}},[n("dt-button",{attrs:{"aria-label":t.removeButtonLabel,title:t.removeButtonLabel,importance:"clear",kind:"danger",size:"md","data-qa":"dt-message-input-link-remove-btn"},on:{click:function(e){return t.$emit("remove-link",t.linkText,t.linkInput)}}},[t._v(" "+t._s(t.removeButtonLabel)+" ")]),n("dt-stack",{attrs:{direction:"row",gap:"400"}},[n("dt-button",{attrs:{"aria-label":t.cancelButtonLabel,title:t.cancelButtonLabel,importance:"clear",kind:"muted",size:"md","data-qa":"dt-message-input-link-cancel-btn"},on:{click:function(e){t.isOpen=!1}}},[t._v(" "+t._s(t.cancelButtonLabel)+" ")]),n("dt-button",{attrs:{size:"md","aria-label":t.confirmButtonLabel,title:t.confirmButtonLabel,"data-qa":"dt-message-input-link-confirm-btn"},on:{click:function(e){return t.$emit("set-link",t.linkText,t.linkInput)}}},[t._v(" "+t._s(t.confirmButtonLabel)+" ")])],1)],1)],1)]},proxy:!0}])})},d=[],L=r.n(_,k,d);const b=L.exports;exports.default=b; //# sourceMappingURL=message-input-link.cjs.map