@dialpad/dialtone/dist/vue2/components/banner/banner.vue.cjs.map

Dialpad's Dialtone design system monorepo

{"version":3,"file":"banner.vue.cjs","sources":["../../../components/banner/banner.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->\n<template>\n  <aside\n    :class=\"bannerClass\"\n    :style=\"bannerBackgroundImage\"\n    @keydown.tab=\"trapFocus\"\n  >\n    <div\n      class=\"d-banner__dialog\"\n      :class=\"dialogClass\"\n      :role=\"role\"\n      :aria-labelledby=\"titleId\"\n      :aria-describedby=\"contentId\"\n    >\n      <dt-notice-icon\n        v-if=\"!hideIcon\"\n        :kind=\"kind\"\n        v-on=\"$listeners\"\n      >\n        <!-- @slot Slot for custom icon -->\n        <slot name=\"icon\" />\n      </dt-notice-icon>\n      <dt-notice-content\n        :title-id=\"titleId\"\n        :content-id=\"contentId\"\n        :title=\"title\"\n        v-on=\"$listeners\"\n      >\n        <template #titleOverride>\n          <!-- eslint-disable-next-line max-len -->\n          <!-- @slot Allows you to override the title, only use this if you need to override with something other than text. Otherwise use the \"title\" prop. -->\n          <slot name=\"titleOverride\" />\n        </template>\n        <!-- @slot the main textual content of the banner -->\n        <slot />\n      </dt-notice-content>\n      <dt-notice-action\n        :hide-action=\"hideAction\"\n        :hide-close=\"hideClose\"\n        :close-button-props=\"closeButtonProps\"\n        :visually-hidden-close=\"visuallyHiddenClose\"\n        :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n        v-on=\"$listeners\"\n      >\n        <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n        <slot name=\"action\" />\n      </dt-notice-action>\n    </div>\n  </aside>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport Modal from '@/common/mixins/modal';\nimport utils from '@/common/utils';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\n/**\n * Banners are a type of notice, delivering system and engagement messaging.\n * These are highly intrusive notices and should be used sparingly and appropriately.\n * @see https://dialtone.dialpad.com/components/banner.html\n */\nexport default {\n  name: 'DtBanner',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  mixins: [Modal, SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * This will also change the aria role from status to alertdialog.\n     * and will modally trap the keyboard focus in the dialog as soon as it displays.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Pins the banner to the top of the window and pushes all app content down.\n     * @values true, false\n     */\n    pinned: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Severity level of the notice, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Props for the notice close button.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Inner dialog class\n     */\n    dialogClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Banner background image\n     */\n    backgroundImage: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Background image size, follows the background-size CSS property values\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-size\" target=\"_blank\">\n     *   CSS background-sizes\n     * </a>\n     */\n    backgroundSize: {\n      type: String,\n      default: 'cover',\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n  ],\n\n  computed: {\n    role () {\n      return this.important ? 'alertdialog' : 'status';\n    },\n\n    bannerClass () {\n      const kindClasses = {\n        error: 'd-banner--error',\n        info: 'd-banner--info',\n        success: 'd-banner--success',\n        warning: 'd-banner--warning',\n        base: 'd-banner--base',\n      };\n\n      return [\n        'd-banner',\n        kindClasses[this.kind],\n        {\n          'd-banner--important': this.important,\n          'd-banner--pinned': this.pinned,\n        },\n      ];\n    },\n\n    bannerBackgroundImage () {\n      if (this.backgroundImage === '') return null;\n\n      return `background-image: url(${this.backgroundImage});\n              background-size: ${this.backgroundSize};`;\n    },\n  },\n\n  mounted () {\n    if (this.important) {\n      this.focusFirstElement();\n    }\n  },\n\n  methods: {\n    trapFocus (e) {\n      if (this.important) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n  },\n};\n</script>\n"],"names":["DtNoticeIcon","DtNoticeContent","DtNoticeAction","Modal","SrOnlyCloseButtonMixin","utils","NOTICE_KINDS"],"mappings":";;;;;;;;;;AA8DA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,cAAAA,YAAA;AAAA,IACA,iBAAAC,eAAA;AAAA,IACA,gBAAAC,cAAA;AAAA,EACA;AAAA,EAEA,QAAA,CAAAC,MAAA,SAAAC,4BAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAAC,qBAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAAA,qBAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA,MAAA;AACA,eAAAC,iBAAA,aAAA,SAAA,IAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,OAAA;AACA,aAAA,KAAA,YAAA,gBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,YAAA,cAAA;AAAA,QACA,OAAA;AAAA,QACA,MAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,MAAA;AAAA,MACA;AAEA,aAAA;AAAA,QACA;AAAA,QACA,YAAA,KAAA,IAAA;AAAA,QACA;AAAA,UACA,uBAAA,KAAA;AAAA,UACA,oBAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,wBAAA;AACA,UAAA,KAAA,oBAAA,GAAA,QAAA;AAEA,aAAA,yBAAA,KAAA,eAAA;AAAA,iCACA,KAAA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,QAAA,KAAA,WAAA;AACA,WAAA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA,GAAA;AACA,UAAA,KAAA,WAAA;AACA,aAAA,qBAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}