@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            :aria-label=\"ariaLabel\"\n            :class=\"['d-recipe-feed-item-pill__button', toggleableClass, buttonClass]\"\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';\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     * Aria label for feed pill\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\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    };\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\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","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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"}