@dialpad/dialtone/dist/vue3/lib/banner/banner.cjs

Dialpad's Dialtone design system monorepo

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("../../common/mixins/modal.cjs"),a=require("../../common/utils/index.cjs"),u=require("../../common/mixins/sr-only-close-button.cjs"),e=require("vue"),b=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),m=require("../notice/notice-icon.cjs"),f=require("../notice/notice-content.cjs"),g=require("../notice/notice-action.cjs"),_=require("../notice/notice-constants.cjs"),y={compatConfig:{MODE:3},name:"DtBanner",components:{DtNoticeIcon:m.default,DtNoticeContent:f.default,DtNoticeAction:g.default},mixins:[c.default,u.default],props:{titleId:{type:String,default(){return a.default.getUniqueString()}},contentId:{type:String,default(){return a.default.getUniqueString()}},title:{type:String,default:""},important:{type:Boolean,default:!1},pinned:{type:Boolean,default:!1},kind:{type:String,default:"base",validate(t){return _.NOTICE_KINDS.includes(t)}},closeButtonProps:{type:Object,default:()=>({})},hideClose:{type:Boolean,default:!1},hideIcon:{type:Boolean,default:!1},hideAction:{type:Boolean,default:!1},dialogClass:{type:String,default:""},backgroundImage:{type:String,default:""},backgroundSize:{type:String,default:"cover"}},emits:["close"],computed:{role(){return this.important?"alertdialog":"status"},bannerClass(){return["d-banner",{error:"d-banner--error",info:"d-banner--info",success:"d-banner--success",warning:"d-banner--warning",base:"d-banner--base"}[this.kind],{"d-banner--important":this.important,"d-banner--pinned":this.pinned}]},bannerBackgroundImage(){return this.backgroundImage===""?null:`background-image: url(${this.backgroundImage});
              background-size: ${this.backgroundSize};`}},mounted(){this.important&&this.focusFirstElement()},methods:{trapFocus(t){this.important&&this.focusTrappedTabPress(t)}}},h=["role","aria-labelledby","aria-describedby"];function p(t,i,n,k,S,o){const r=e.resolveComponent("dt-notice-icon"),d=e.resolveComponent("dt-notice-content"),s=e.resolveComponent("dt-notice-action");return e.openBlock(),e.createElementBlock("aside",{class:e.normalizeClass(o.bannerClass),style:e.normalizeStyle(o.bannerBackgroundImage),onKeydown:i[1]||(i[1]=e.withKeys((...l)=>o.trapFocus&&o.trapFocus(...l),["tab"]))},[e.createElementVNode("div",{class:e.normalizeClass(["d-banner__dialog",n.dialogClass]),role:o.role,"aria-labelledby":n.titleId,"aria-describedby":n.contentId},[n.hideIcon?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(r,{key:0,kind:n.kind},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"icon")]),_:3},8,["kind"])),e.createVNode(d,{"title-id":n.titleId,"content-id":n.contentId,title:n.title},{titleOverride:e.withCtx(()=>[e.renderSlot(t.$slots,"titleOverride")]),default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["title-id","content-id","title"]),e.createVNode(s,{"hide-action":n.hideAction,"hide-close":n.hideClose,"close-button-props":n.closeButtonProps,"visually-hidden-close":t.visuallyHiddenClose,"visually-hidden-close-label":t.visuallyHiddenCloseLabel,onClose:i[0]||(i[0]=l=>t.$emit("close"))},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"action")]),_:3},8,["hide-action","hide-close","close-button-props","visually-hidden-close","visually-hidden-close-label"])],10,h)],38)}const C=b._(y,[["render",p]]);exports.default=C;
//# sourceMappingURL=banner.cjs.map