@dialpad/dialtone/dist/vue3/lib/feed-item-pill/feed-item-pill.cjs.map

Dialpad's Dialtone design system monorepo

{"version":3,"file":"feed-item-pill.cjs","names":[],"sources":["../../../recipes/conversation_view/feed_item_pill/feed_item_pill.vue"],"sourcesContent":["<template>\n  <div :class=\"['d-recipe-feed-item-pill__border', borderClass, wrapperClass]\">\n    <div class=\"d-recipe-feed-item-pill__wrapper\">\n      <dt-collapsible :open=\"expanded\">\n        <template #anchor>\n          <button\n            data-qa=\"dt-recipe-feed-item-pill\"\n            :class=\"['d-recipe-feed-item-pill__button', toggleableClass, buttonClass]\"\n            :aria-label=\"anchorTitle\"\n            :title=\"anchorTitle\"\n            @focusin=\"hover = true\"\n            @focusout=\"hover = false\"\n            @mouseenter=\"hover = true\"\n            @mouseleave=\"hover = false\"\n            @click=\"onClick\"\n          >\n            <dt-item-layout\n              class=\"d-recipe-feed-item-pill__layout\"\n              unstyled\n            >\n              <slot name=\"title\">\n                <span class=\"d-recipe-feed-item-pill__title\">{{ title }}</span>\n              </slot>\n              <template #left>\n                <div\n                  class=\"d-recipe-feed-item-pill__icon\"\n                  data-qa=\"dt-recipe-feed-item-pill__icon\"\n                >\n                  <component\n                    :is=\"toggleIcon\"\n                    v-if=\"showChevronIcon\"\n                    size=\"300\"\n                  />\n                  <!-- @slot Slot for left icon, icon-size slot prop defaults to '300' -->\n                  <slot\n                    v-else\n                    name=\"leftIcon\"\n                    :icon-size=\"'300'\"\n                  />\n                </div>\n              </template>\n              <template\n                v-if=\"$slots.subtitle\"\n                #subtitle\n              >\n                <div class=\"d-recipe-feed-item-pill__subtitle\">\n                  <slot name=\"subtitle\" />\n                </div>\n              </template>\n              <template\n                v-if=\"$slots.bottom\"\n                #bottom\n              >\n                <div class=\"d-recipe-feed-item-pill__bottom\">\n                  <slot name=\"bottom\" />\n                </div>\n              </template>\n              <template\n                v-if=\"$slots.right\"\n                #right\n              >\n                <div class=\"d-recipe-feed-item-pill__right\">\n                  <slot name=\"right\" />\n                </div>\n              </template>\n            </dt-item-layout>\n          </button>\n        </template>\n        <template\n          v-if=\"$slots.content\"\n          #content\n        >\n          <div class=\"d-recipe-feed-item-pill__content\">\n            <slot name=\"content\" />\n          </div>\n        </template>\n      </dt-collapsible>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { FEED_ITEM_PILL_BORDER_COLORS } from './feed_item_pill_constants';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtCollapsible } from '@/components/collapsible';\nimport { DtIconChevronDown, DtIconChevronRight } from '@dialpad/dialtone-icons/vue3';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeFeedItemPill',\n\n  components: { DtItemLayout, DtCollapsible },\n\n  props: {\n    /**\n     * Bolded primary text\n     */\n    title: {\n      type: String,\n      default: () => '',\n    },\n\n    /**\n     * Additional styling around the pill\n     */\n    wrapperClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional styling for the pill\n     */\n    buttonClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Sets whether the pill can be toggled (Icon changing on hover, expanding and collapsing, pointer)\n     */\n    toggleable: {\n      type: Boolean,\n      default: () => true,\n    },\n\n    defaultToggled: {\n      type: Boolean,\n      default: () => false,\n    },\n\n    /**\n     * Callbox border color\n     * @values default, ai, critical\n     */\n    borderColor: {\n      type: String,\n      default: 'default',\n      validator: (color) => Object.keys(FEED_ITEM_PILL_BORDER_COLORS).includes(color),\n    },\n  },\n\n  data () {\n    return {\n      hover: false,\n      expanded: this.defaultToggled,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    toggleIcon () {\n      return this.expanded ? DtIconChevronDown : DtIconChevronRight;\n    },\n\n    showChevronIcon () {\n      return this.toggleable && this.hover;\n    },\n\n    toggleableClass () {\n      return this.toggleable ? 'd-recipe-feed-item-pill--toggleable' : '';\n    },\n\n    borderClass () {\n      return FEED_ITEM_PILL_BORDER_COLORS[this.borderColor];\n    },\n\n    anchorTitle () {\n      return this.i18n.$t('DIALTONE_FEED_ITEM_PILL_ARIA_LABEL');\n    },\n  },\n\n  methods: {\n    onClick () {\n      if (!this.toggleable) return;\n\n      this.expanded = !this.expanded;\n    },\n  },\n};\n</script>\n"],"mappings":"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"}