@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","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"],"names":["_sfc_main","DtItemLayout","DtCollapsible","color","FEED_ITEM_PILL_BORDER_COLORS","DialtoneLocalization","DtIconChevronDown","DtIconChevronRight","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_createElementBlock","_normalizeClass","$options","$props","_createElementVNode","_createVNode","_component_dt_collapsible","$data","_createSlots","args","_component_dt_item_layout","_hoisted_4","_createBlock","_resolveDynamicComponent","_renderSlot","_ctx","_withCtx","_toDisplayString"],"mappings":"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"}