@dialpad/dialtone-vue 3.210.0 → 3.211.0-next.2

package/dist/lib/feed-item-row/feed-item-row.js

@@ -1,8 +1,8 @@
 import { DEFAULT_FEED_ROW_STATE as c, FEED_ROW_STATE_BACKGROUND_COLOR as _ } from "./feed-item-row-constants.js";
-import k from "../../common/mixins/modal.js";
+import S from "../../common/mixins/modal.js";
 import { DtIconUser as C } from "@dialpad/dialtone-icons/vue3";
 import { hasSlotContent as D } from "../../common/utils/index.js";
-import { resolveComponent as r, openBlock as a, createBlock as h, mergeProps as T, toHandlers as b, withCtx as n, createElementVNode as d, createElementBlock as o, renderSlot as i, toDisplayString as l, createCommentVNode as s, withDirectives as u, createVNode as f, vShow as p, createSlots as E } from "vue";
+import { resolveComponent as r, openBlock as a, createBlock as h, mergeProps as T, toHandlers as E, withCtx as n, createElementVNode as d, createElementBlock as o, renderSlot as i, toDisplayString as l, createCommentVNode as s, withDirectives as u, createVNode as f, vShow as p, createSlots as b } from "vue";
 import { _ as F } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 import I from "../badge/badge.js";
 import B from "../list-item/list-item.js";
@@ -18,7 +18,7 @@ const q = {
     DtBadge: I,
     DtIconUser: C
   },
-  mixins: [k],
+  mixins: [S],
   inheritAttrs: !1,
   props: {
     /**
@@ -199,15 +199,15 @@ const q = {
   class: "d-recipe-feed-item-row__menu"
 };
 function G(e, K, t, x, J, m) {
-  const w = r("dt-icon-user"), v = r("dt-avatar"), y = r("dt-badge"), g = r("dt-lazy-show"), A = r("dt-list-item");
-  return a(), h(A, T({
+  const w = r("dt-icon-user"), v = r("dt-avatar"), y = r("dt-badge"), g = r("dt-lazy-show"), k = r("dt-list-item");
+  return a(), h(k, T({
     ref: "FeedItemRef",
     "navigation-type": "none"
   }, e.$attrs, {
     class: m.listItemClasses,
     "data-qa": "dt-recipe-feed-item-row"
-  }, b(m.feedListeners)), {
-    left: n(() => [
+  }, E(m.feedListeners)), {
+    start: n(() => [
       t.showHeader ? (a(), o("div", O, [
         i(e.$slots, "avatar", {}, () => [
           f(v, {
@@ -215,11 +215,11 @@ function G(e, K, t, x, J, m) {
             "image-src": t.avatarImageUrl,
             "image-alt": "",
             seed: t.avatarSeed
-          }, E({ _: 2 }, [
+          }, b({ _: 2 }, [
             t.noInitials ? {
               name: "icon",
-              fn: n(({ iconSize: S }) => [
-                f(w, { size: S }, null, 8, ["size"])
+              fn: n(({ iconSize: A }) => [
+                f(w, { size: A }, null, 8, ["size"])
               ]),
               key: "0"
             } : void 0
@@ -234,7 +234,7 @@ function G(e, K, t, x, J, m) {
         [p, t.isActive]
       ])
     ]),
-    bottom: n(() => [
+    blockEnd: n(() => [
       e.$slots.reactions ? (a(), o("div", P, [
         i(e.$slots, "reactions")
       ])) : s("", !0),

package/dist/lib/feed-item-row/feed-item-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"feed-item-row.js","sources":["../../../recipes/conversation_view/feed_item_row/feed_item_row.vue"],"sourcesContent":["<template>\n  <dt-list-item\n    ref=\"FeedItemRef\"\n    navigation-type=\"none\"\n    v-bind=\"$attrs\"\n    :class=\"listItemClasses\"\n    data-qa=\"dt-recipe-feed-item-row\"\n    v-on=\"feedListeners\"\n  >\n    <!-- Avatar or time -->\n    <template #left>\n      <div\n        v-if=\"showHeader\"\n        class=\"d-recipe-feed-item-row__avatar-container\"\n      >\n        <!-- @slot Slot to contain the avatar, overrides avatar props. -->\n        <slot\n          name=\"avatar\"\n        >\n          <dt-avatar\n            :full-name=\"displayName\"\n            :image-src=\"avatarImageUrl\"\n            image-alt=\"\"\n            :seed=\"avatarSeed\"\n          >\n            <template\n              v-if=\"noInitials\"\n              #icon=\"{ iconSize }\"\n            >\n              <dt-icon-user\n                :size=\"iconSize\"\n              />\n            </template>\n          </dt-avatar>\n        </slot>\n      </div>\n      <!-- show time instead of avatar when headers not present -->\n      <span\n        v-if=\"!showHeader\"\n        v-show=\"isActive\"\n        class=\"d-recipe-feed-item-row__left-time\"\n        data-qa=\"dt-recipe-feed-item-row--left-time\"\n      >\n        {{ shortTime }}\n      </span>\n    </template>\n\n    <article class=\"d-recipe-feed-item-row__content\">\n      <!-- Feed Item -->\n      <div\n        v-if=\"showHeader\"\n        data-qa=\"dt-recipe-feed-item-row--header\"\n        class=\"d-recipe-feed-item-row__header\"\n      >\n        <!-- @slot Slot for display name -->\n        <slot name=\"displayName\">\n          <p class=\"d-recipe-feed-item-row__header-name\">\n            {{ displayName }}\n          </p>\n        </slot>\n        <time\n          class=\"d-recipe-feed-item-row__header-time\"\n        >\n          {{ time }}\n        </time>\n        <dt-badge\n          v-if=\"labelText\"\n          :text=\"labelText\"\n        />\n      </div>\n      <!-- @slot Default content slot for feed item row -->\n      <span\n        data-qa=\"dt-recipe-feed-item-row--content\"\n      >\n        <slot />\n      </span>\n      <div\n        v-if=\"hasAttachmentContent\"\n        data-qa=\"dt-recipe-feed-item-row--attachment\"\n        class=\"d-recipe-feed-item-row__attachment\"\n      >\n        <slot name=\"attachment\" />\n      </div>\n    </article>\n\n    <template #bottom>\n      <!-- Reactions -->\n      <div\n        v-if=\"$slots.reactions\"\n        class=\"d-recipe-feed-item-row__reactions\"\n        data-qa=\"dt-recipe-feed-item-row--reactions\"\n      >\n        <!-- @slot Slot for reactions row component -->\n        <slot name=\"reactions\" />\n      </div>\n\n      <!-- Threading -->\n      <div\n        v-if=\"$slots.threading\"\n        class=\"d-recipe-feed-item-row__threading\"\n      >\n        <!-- @slot Slot for threading row component -->\n        <slot name=\"threading\" />\n      </div>\n\n      <!-- Action menu -->\n      <div\n        v-show=\"isActive\"\n        data-qa=\"dt-recipe-feed-item-row--menu\"\n        class=\"d-recipe-feed-item-row__menu\"\n      >\n        <dt-lazy-show\n          :appear=\"true\"\n          transition=\"fade\"\n          :show=\"isActive\"\n        >\n          <!-- @slot Slot for actions hover menu component -->\n          <slot name=\"menu\" />\n        </dt-lazy-show>\n      </div>\n    </template>\n  </dt-list-item>\n</template>\n\n<script>\nimport { DEFAULT_FEED_ROW_STATE, FEED_ROW_STATE_BACKGROUND_COLOR } from './feed_item_row_constants.js';\nimport { DtAvatar } from '@/components/avatar';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtListItem } from '@/components/list_item';\nimport { DtBadge } from '@/components/badge';\nimport Modal from '@/common/mixins/modal';\nimport { DtIconUser } from '@dialpad/dialtone-icons/vue3';\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeFeedItemRow',\n\n  components: {\n    DtAvatar,\n    DtLazyShow,\n    DtListItem,\n    DtBadge,\n    DtIconUser,\n  },\n\n  mixins: [Modal],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Show avatar, show header text or dont show left time and vice versa\n     */\n    showHeader: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Optional avatar image url.\n     * If not provided it will use extracted initials from displayName.\n     */\n    avatarImageUrl: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The display name of the sender\n     */\n    displayName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Initials will never be shown. Instead it will show a \"User\" icon.\n     */\n    noInitials: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * time string displayed as is.\n     * Shown on the header when showHeader is true\n     */\n    time: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * short time string without AM/PM displayed as is.\n     * Shown on the left of feed item when showHeader is false and isActive is true\n     */\n    shortTime: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * A label displayed next to the displayName. Will not show if empty.\n     */\n    labelText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * displays a darkened background on the row.\n     */\n    isActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * state for the feed item row. Can be normal, searched & error\n     */\n    state: {\n      type: String,\n      default: DEFAULT_FEED_ROW_STATE,\n      validator: state => Object.keys(FEED_ROW_STATE_BACKGROUND_COLOR).includes(state),\n    },\n  },\n\n  emits: [\n    /**\n     * Fires when hovered over feed row\n     *\n     * @event hover\n     * @type {Boolean}\n     */\n    'hover',\n\n    /**\n     * Fires when focused over feed row\n     *\n     * @event focus\n     * @type {Boolean}\n     */\n    'focus',\n\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n  ],\n\n  data () {\n    return {\n      transitionActive: false,\n    };\n  },\n\n  computed: {\n    feedListeners () {\n      return {\n        mouseenter: () => this.setHover(true),\n        mouseleave: () => this.setHover(false),\n        focusin: () => this.setFocus(true),\n        focusout: () => this.setFocus(false),\n        transitionend: () => this.transitionComplete(),\n        keydown: event => {\n          switch (event.code) {\n            case 'Tab':\n              this.trapFocus(event);\n              break;\n          }\n          this.$emit('keydown', event);\n        },\n      };\n    },\n\n    listItemClasses () {\n      return [\n        'd-recipe-feed-item-row',\n        { 'd-recipe-feed-item-row--active': this.isActive && this.state === DEFAULT_FEED_ROW_STATE },\n        { 'd-recipe-feed-item-row__state-transition': this.transitionActive },\n        FEED_ROW_STATE_BACKGROUND_COLOR[this.state],\n\n      ];\n    },\n\n    hasAttachmentContent () {\n      return hasSlotContent(this.$slots.attachment);\n    },\n  },\n\n  watch: {\n    state: {\n      immediate: true,\n      handler: function (newState) {\n        if (newState !== DEFAULT_FEED_ROW_STATE) {\n          this.transitionActive = true;\n        }\n      },\n    },\n  },\n\n  methods: {\n    transitionComplete () {\n      if (this.state === DEFAULT_FEED_ROW_STATE) {\n        this.transitionActive = false;\n      }\n    },\n\n    trapFocus (e) {\n      this.focusTrappedTabPress(e);\n    },\n\n    setFocus (bool) {\n      this.$emit('focus', bool);\n    },\n\n    setHover (bool) {\n      this.$emit('hover', bool);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtAvatar","DtLazyShow","DtListItem","DtBadge","DtIconUser","Modal","DEFAULT_FEED_ROW_STATE","state","FEED_ROW_STATE_BACKGROUND_COLOR","event","hasSlotContent","newState","bool","_hoisted_2","_hoisted_4","_hoisted_5","_hoisted_6","_openBlock","_createBlock","_component_dt_list_item","_mergeProps","_ctx","$options","_toHandlers","$props","_createElementBlock","_hoisted_1","_renderSlot","_createVNode","_component_dt_avatar","_withCtx","iconSize","_component_dt_icon_user","_hoisted_8","_hoisted_9","_withDirectives","_createElementVNode","_hoisted_10","_component_dt_lazy_show","_hoisted_3","_toDisplayString","_component_dt_badge","_hoisted_7"],"mappings":"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"}
+{"version":3,"file":"feed-item-row.js","sources":["../../../recipes/conversation_view/feed_item_row/feed_item_row.vue"],"sourcesContent":["<template>\n  <dt-list-item\n    ref=\"FeedItemRef\"\n    navigation-type=\"none\"\n    v-bind=\"$attrs\"\n    :class=\"listItemClasses\"\n    data-qa=\"dt-recipe-feed-item-row\"\n    v-on=\"feedListeners\"\n  >\n    <!-- Avatar or time -->\n    <template #start>\n      <div\n        v-if=\"showHeader\"\n        class=\"d-recipe-feed-item-row__avatar-container\"\n      >\n        <!-- @slot Slot to contain the avatar, overrides avatar props. -->\n        <slot\n          name=\"avatar\"\n        >\n          <dt-avatar\n            :full-name=\"displayName\"\n            :image-src=\"avatarImageUrl\"\n            image-alt=\"\"\n            :seed=\"avatarSeed\"\n          >\n            <template\n              v-if=\"noInitials\"\n              #icon=\"{ iconSize }\"\n            >\n              <dt-icon-user\n                :size=\"iconSize\"\n              />\n            </template>\n          </dt-avatar>\n        </slot>\n      </div>\n      <!-- show time instead of avatar when headers not present -->\n      <span\n        v-if=\"!showHeader\"\n        v-show=\"isActive\"\n        class=\"d-recipe-feed-item-row__left-time\"\n        data-qa=\"dt-recipe-feed-item-row--left-time\"\n      >\n        {{ shortTime }}\n      </span>\n    </template>\n\n    <article class=\"d-recipe-feed-item-row__content\">\n      <!-- Feed Item -->\n      <div\n        v-if=\"showHeader\"\n        data-qa=\"dt-recipe-feed-item-row--header\"\n        class=\"d-recipe-feed-item-row__header\"\n      >\n        <!-- @slot Slot for display name -->\n        <slot name=\"displayName\">\n          <p class=\"d-recipe-feed-item-row__header-name\">\n            {{ displayName }}\n          </p>\n        </slot>\n        <time\n          class=\"d-recipe-feed-item-row__header-time\"\n        >\n          {{ time }}\n        </time>\n        <dt-badge\n          v-if=\"labelText\"\n          :text=\"labelText\"\n        />\n      </div>\n      <!-- @slot Default content slot for feed item row -->\n      <span\n        data-qa=\"dt-recipe-feed-item-row--content\"\n      >\n        <slot />\n      </span>\n      <div\n        v-if=\"hasAttachmentContent\"\n        data-qa=\"dt-recipe-feed-item-row--attachment\"\n        class=\"d-recipe-feed-item-row__attachment\"\n      >\n        <slot name=\"attachment\" />\n      </div>\n    </article>\n\n    <template #blockEnd>\n      <!-- Reactions -->\n      <div\n        v-if=\"$slots.reactions\"\n        class=\"d-recipe-feed-item-row__reactions\"\n        data-qa=\"dt-recipe-feed-item-row--reactions\"\n      >\n        <!-- @slot Slot for reactions row component -->\n        <slot name=\"reactions\" />\n      </div>\n\n      <!-- Threading -->\n      <div\n        v-if=\"$slots.threading\"\n        class=\"d-recipe-feed-item-row__threading\"\n      >\n        <!-- @slot Slot for threading row component -->\n        <slot name=\"threading\" />\n      </div>\n\n      <!-- Action menu -->\n      <div\n        v-show=\"isActive\"\n        data-qa=\"dt-recipe-feed-item-row--menu\"\n        class=\"d-recipe-feed-item-row__menu\"\n      >\n        <dt-lazy-show\n          :appear=\"true\"\n          transition=\"fade\"\n          :show=\"isActive\"\n        >\n          <!-- @slot Slot for actions hover menu component -->\n          <slot name=\"menu\" />\n        </dt-lazy-show>\n      </div>\n    </template>\n  </dt-list-item>\n</template>\n\n<script>\nimport { DEFAULT_FEED_ROW_STATE, FEED_ROW_STATE_BACKGROUND_COLOR } from './feed_item_row_constants.js';\nimport { DtAvatar } from '@/components/avatar';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtListItem } from '@/components/list_item';\nimport { DtBadge } from '@/components/badge';\nimport Modal from '@/common/mixins/modal';\nimport { DtIconUser } from '@dialpad/dialtone-icons/vue3';\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeFeedItemRow',\n\n  components: {\n    DtAvatar,\n    DtLazyShow,\n    DtListItem,\n    DtBadge,\n    DtIconUser,\n  },\n\n  mixins: [Modal],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Show avatar, show header text or dont show left time and vice versa\n     */\n    showHeader: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Optional avatar image url.\n     * If not provided it will use extracted initials from displayName.\n     */\n    avatarImageUrl: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The display name of the sender\n     */\n    displayName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Initials will never be shown. Instead it will show a \"User\" icon.\n     */\n    noInitials: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * time string displayed as is.\n     * Shown on the header when showHeader is true\n     */\n    time: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * short time string without AM/PM displayed as is.\n     * Shown on the left of feed item when showHeader is false and isActive is true\n     */\n    shortTime: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * A label displayed next to the displayName. Will not show if empty.\n     */\n    labelText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * displays a darkened background on the row.\n     */\n    isActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * state for the feed item row. Can be normal, searched & error\n     */\n    state: {\n      type: String,\n      default: DEFAULT_FEED_ROW_STATE,\n      validator: state => Object.keys(FEED_ROW_STATE_BACKGROUND_COLOR).includes(state),\n    },\n  },\n\n  emits: [\n    /**\n     * Fires when hovered over feed row\n     *\n     * @event hover\n     * @type {Boolean}\n     */\n    'hover',\n\n    /**\n     * Fires when focused over feed row\n     *\n     * @event focus\n     * @type {Boolean}\n     */\n    'focus',\n\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n  ],\n\n  data () {\n    return {\n      transitionActive: false,\n    };\n  },\n\n  computed: {\n    feedListeners () {\n      return {\n        mouseenter: () => this.setHover(true),\n        mouseleave: () => this.setHover(false),\n        focusin: () => this.setFocus(true),\n        focusout: () => this.setFocus(false),\n        transitionend: () => this.transitionComplete(),\n        keydown: event => {\n          switch (event.code) {\n            case 'Tab':\n              this.trapFocus(event);\n              break;\n          }\n          this.$emit('keydown', event);\n        },\n      };\n    },\n\n    listItemClasses () {\n      return [\n        'd-recipe-feed-item-row',\n        { 'd-recipe-feed-item-row--active': this.isActive && this.state === DEFAULT_FEED_ROW_STATE },\n        { 'd-recipe-feed-item-row__state-transition': this.transitionActive },\n        FEED_ROW_STATE_BACKGROUND_COLOR[this.state],\n\n      ];\n    },\n\n    hasAttachmentContent () {\n      return hasSlotContent(this.$slots.attachment);\n    },\n  },\n\n  watch: {\n    state: {\n      immediate: true,\n      handler: function (newState) {\n        if (newState !== DEFAULT_FEED_ROW_STATE) {\n          this.transitionActive = true;\n        }\n      },\n    },\n  },\n\n  methods: {\n    transitionComplete () {\n      if (this.state === DEFAULT_FEED_ROW_STATE) {\n        this.transitionActive = false;\n      }\n    },\n\n    trapFocus (e) {\n      this.focusTrappedTabPress(e);\n    },\n\n    setFocus (bool) {\n      this.$emit('focus', bool);\n    },\n\n    setHover (bool) {\n      this.$emit('hover', bool);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtAvatar","DtLazyShow","DtListItem","DtBadge","DtIconUser","Modal","DEFAULT_FEED_ROW_STATE","state","FEED_ROW_STATE_BACKGROUND_COLOR","event","hasSlotContent","newState","bool","_hoisted_2","_hoisted_4","_hoisted_5","_hoisted_6","_openBlock","_createBlock","_component_dt_list_item","_mergeProps","_ctx","$options","_toHandlers","$props","_createElementBlock","_hoisted_1","_renderSlot","_createVNode","_component_dt_avatar","_withCtx","iconSize","_component_dt_icon_user","_hoisted_8","_hoisted_9","_withDirectives","_createElementVNode","_hoisted_10","_component_dt_lazy_show","_hoisted_3","_toDisplayString","_component_dt_badge","_hoisted_7"],"mappings":"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"}

package/dist/lib/filter-pill/filter-pill.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("@dialpad/dialtone-icons/vue3"),x=require("../../localization/index.cjs"),e=require("vue"),k=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),T=require("../button/button.cjs"),g=require("../popover/popover.cjs"),C=require("../checkbox/checkbox.cjs"),y=require("../checkbox-group/checkbox-group.cjs"),B=require("../button/button-constants.cjs"),p=require("../popover/popover-constants.cjs"),S={name:"DtFilterPill",components:{DtCheckboxGroup:y.default,DtCheckbox:C.default,DtPopover:g.default,DtButton:T.default,DtIconClose:u.DtIconClose,DtIconChevronDown:u.DtIconChevronDown},inheritAttrs:!1,props:{modelValue:{type:Array,default:()=>[]},startTooltipText:{type:String,default:""},alphaTooltipText:{type:String,default:void 0},disabled:{type:Boolean,default:!1},hideClear:{type:Boolean,default:!1},label:{type:String,default:void 0},endTooltipText:{type:String,default:""},omegaTooltipText:{type:String,default:void 0},popoverAppendTo:{type:[HTMLElement,String],default:"body",validator:t=>p.POPOVER_APPEND_TO_VALUES.includes(t)||t instanceof HTMLElement},popoverFallbackPlacements:{type:Array,default:()=>["auto"]},popoverMaxHeight:{type:String,default:""},popoverMaxWidth:{type:String,default:""},popoverPadding:{type:String,default:"large",validator:t=>Object.keys(p.POPOVER_PADDING_CLASSES).some(i=>i===t)},popoverPlacement:{type:String,default:"bottom-start"},size:{type:String,default:"sm",validator:t=>Object.keys(B.BUTTON_SIZE_MODIFIERS).includes(t)}},emits:["clear","open","update:modelValue"],data(){return{isOpen:!1,i18n:new x.DialtoneLocalization,filters:this.modelValue}},computed:{buttonKind(){return this.isActive?"default":"muted"},resolvedStartTooltipText(){return this.alphaTooltipText??this.startTooltipText},resolvedEndTooltipText(){return this.omegaTooltipText??this.endTooltipText},clearButtonAriaLabel(){return this.resolvedEndTooltipText||this.i18n.$t("DIALTONE_FILTER_PILL_CLEAR_BUTTON_LABEL")},clearButtonTitle(){if(!this.resolvedEndTooltipText)return this.clearButtonAriaLabel},activeFilters(){return this.filters.filter(t=>t.active).map(t=>t.name)},activeFilterList(){return this.activeFilters.length<=2?this.activeFilters.join(", "):this.activeFilters.slice(0,2).join(", ")+", + "+(this.activeFilters.length-2)},isActive(){return this.activeFilterList.length>0},hasClear(){return!this.hideClear&&this.activeFilterList.length>0}},watch:{isOpen(t){this.$emit("open",t)},filters:{deep:!0,handler(t){this.$emit("update:modelValue",t)}}},mounted(){var t;(t=this.modelValue)!=null&&t.length||this.$slots.content&&this.$slots.content()||console.warn('Please provide content through the v-model or the "content" slot.')},methods:{clearFilter(t){this.filters.forEach(i=>delete i.active),this.$emit("clear",t)}}},E={class:"d-filter-pill","data-qa":"dt-filter-pill"},D={class:"d-filter-pill__label"},A=["textContent"],L=["textContent"];function F(t,i,o,V,r,l){const _=e.resolveComponent("dt-icon-chevron-down"),s=e.resolveComponent("dt-button"),h=e.resolveComponent("dt-checkbox"),v=e.resolveComponent("dt-checkbox-group"),m=e.resolveComponent("dt-popover"),f=e.resolveComponent("dt-icon-close"),d=e.resolveDirective("dt-tooltip");return e.openBlock(),e.createElementBlock("div",E,[e.createVNode(m,{open:r.isOpen,"onUpdate:open":i[1]||(i[1]=n=>r.isOpen=n),"append-to":o.popoverAppendTo,"fallback-placements":o.popoverFallbackPlacements,"max-height":o.popoverMaxHeight,"max-width":o.popoverMaxWidth,modal:!1,padding:o.popoverPadding,placement:o.popoverPlacement},{anchor:e.withCtx(({attrs:n})=>[e.withDirectives((e.openBlock(),e.createBlock(s,e.mergeProps(n,{active:l.isActive,class:["d-filter-pill__primary",{"d-filter-pill--selected":l.isActive,"d-filter-pill__primary--has-clear":l.hasClear}],disabled:o.disabled,kind:l.buttonKind,size:o.size,"data-qa":"dt-filter-pill__button",importance:"outlined",onClick:i[0]||(i[0]=a=>r.isOpen=!0)}),{endIcon:e.withCtx(({iconSize:a})=>[e.createVNode(_,{size:a,class:"d-filter-pill__icon","data-qa":"dt-filter-pill__icon"},null,8,["size"])]),default:e.withCtx(()=>[e.createElementVNode("span",D,[e.renderSlot(t.$slots,"default",{},()=>[e.createElementVNode("span",{class:"d-filter-pill__label-alpha",textContent:e.toDisplayString(o.label)},null,8,A),l.activeFilterList?(e.openBlock(),e.createElementBlock("span",{key:0,class:"d-filter-pill__label-omega",textContent:e.toDisplayString(l.activeFilterList)},null,8,L)):e.createCommentVNode("",!0)])])]),_:3},16,["active","class","disabled","kind","size"])),[[d,l.resolvedStartTooltipText]])]),content:e.withCtx(({close:n})=>[e.renderSlot(t.$slots,"content",{close:n},()=>{var a;return[(a=o.modelValue)!=null&&a.length?(e.openBlock(),e.createBlock(v,{key:0,"selected-values":l.activeFilters,"aria-label":o.label,name:"contact-centers"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.filters,c=>(e.openBlock(),e.createBlock(h,{key:c.name,label:c.name,value:c.name,onInput:b=>c.active=b},null,8,["label","value","onInput"]))),128))]),_:1},8,["selected-values","aria-label"])):e.createCommentVNode("",!0)]})]),_:3},8,["open","append-to","fallback-placements","max-height","max-width","padding","placement"]),l.hasClear?e.withDirectives((e.openBlock(),e.createBlock(s,{key:0,active:l.isActive,"aria-label":l.clearButtonAriaLabel,class:e.normalizeClass(["d-filter-pill__clear",{"d-filter-pill__clear--selected":l.isActive}]),disabled:o.disabled,kind:l.buttonKind,size:o.size,title:l.clearButtonTitle,"data-qa":"dt-filter-pill__clear-button",importance:"outlined",onClick:l.clearFilter},{icon:e.withCtx(({iconSize:n})=>[e.createVNode(f,{size:n},null,8,["size"])]),_:1},8,["active","aria-label","class","disabled","kind","size","title","onClick"])),[[d,l.resolvedEndTooltipText]]):e.createCommentVNode("",!0)])}const P=k._(S,[["render",F]]);exports.default=P;
+//# sourceMappingURL=filter-pill.cjs.map

package/dist/lib/filter-pill/filter-pill.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-pill.cjs","sources":["../../../components/filter_pill/filter_pill.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-filter-pill\"\n    data-qa=\"dt-filter-pill\"\n  >\n    <dt-popover\n      v-model:open=\"isOpen\"\n      :append-to=\"popoverAppendTo\"\n      :fallback-placements=\"popoverFallbackPlacements\"\n      :max-height=\"popoverMaxHeight\"\n      :max-width=\"popoverMaxWidth\"\n      :modal=\"false\"\n      :padding=\"popoverPadding\"\n      :placement=\"popoverPlacement\"\n    >\n      <template #anchor=\"{ attrs }\">\n        <dt-button\n          v-dt-tooltip=\"resolvedStartTooltipText\"\n          v-bind=\"attrs\"\n          :active=\"isActive\"\n          :class=\"[\n            'd-filter-pill__primary',\n            {\n              'd-filter-pill--selected': isActive,\n              'd-filter-pill__primary--has-clear': hasClear,\n            },\n          ]\"\n          :disabled=\"disabled\"\n          :kind=\"buttonKind\"\n          :size=\"size\"\n          data-qa=\"dt-filter-pill__button\"\n          importance=\"outlined\"\n          @click=\"isOpen = true\"\n        >\n          <span class=\"d-filter-pill__label\">\n            <!-- @slot Allows you to override the label behavior -->\n            <slot>\n              <span\n                class=\"d-filter-pill__label-alpha\"\n                v-text=\"label\"\n              />\n              <span\n                v-if=\"activeFilterList\"\n                class=\"d-filter-pill__label-omega\"\n                v-text=\"activeFilterList\"\n              />\n            </slot>\n          </span>\n          <template #endIcon=\"{ iconSize }\">\n            <dt-icon-chevron-down\n              :size=\"iconSize\"\n              class=\"d-filter-pill__icon\"\n              data-qa=\"dt-filter-pill__icon\"\n            />\n          </template>\n        </dt-button>\n      </template>\n      <template #content=\"{ close }\">\n        <!-- @slot Allows you to override the popover content, only use this if you need custom behavior -->\n        <slot\n          :close=\"close\"\n          name=\"content\"\n        >\n          <dt-checkbox-group\n            v-if=\"modelValue?.length\"\n            :selected-values=\"activeFilters\"\n            :aria-label=\"label\"\n            name=\"contact-centers\"\n          >\n            <dt-checkbox\n              v-for=\"filter in filters\"\n              :key=\"filter.name\"\n              :label=\"filter.name\"\n              :value=\"filter.name\"\n              @input=\"($event) => filter.active = $event\"\n            />\n          </dt-checkbox-group>\n        </slot>\n      </template>\n    </dt-popover>\n    <dt-button\n      v-if=\"hasClear\"\n      v-dt-tooltip=\"resolvedEndTooltipText\"\n      :active=\"isActive\"\n      :aria-label=\"clearButtonAriaLabel\"\n      :class=\"[\n        'd-filter-pill__clear',\n        { 'd-filter-pill__clear--selected': isActive },\n      ]\"\n      :disabled=\"disabled\"\n      :kind=\"buttonKind\"\n      :size=\"size\"\n      :title=\"clearButtonTitle\"\n      data-qa=\"dt-filter-pill__clear-button\"\n      importance=\"outlined\"\n      @click=\"clearFilter\"\n    >\n      <template #icon=\"{ iconSize }\">\n        <dt-icon-close :size=\"iconSize\" />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtPopover, POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES } from '@/components/popover';\nimport { BUTTON_SIZE_MODIFIERS, DtButton } from '@/components/button';\nimport { DtIconChevronDown, DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { DialtoneLocalization } from '@/localization';\nimport { DtCheckbox } from '@/components/checkbox';\nimport { DtCheckboxGroup } from '@/components/checkbox_group';\n\nexport default {\n  name: 'DtFilterPill',\n\n  components: {\n    DtCheckboxGroup,\n    DtCheckbox,\n    DtPopover,\n    DtButton,\n    DtIconClose,\n    DtIconChevronDown,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Array of filters to display in the popover,\n     * should be an array of objects with `name` and `active` properties\n     */\n    modelValue: {\n      type: Array,\n      default: () => [],\n    },\n\n    /**\n     * Text shown in tooltip when you hover the start button,\n     * required if no content is passed to default slot\n     */\n    startTooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * @deprecated Use startTooltipText\n     */\n    alphaTooltipText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * HTML disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Toggles the clear button visibility\n     * @values true, false\n     */\n    hideClear: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Label of the button\n     */\n    label: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the end button,\n     * required as it is an icon only button\n     */\n    endTooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * @deprecated Use endTooltipText\n     */\n    omegaTooltipText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Sets the element to which the\n     * <a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/popover.html#vue-api\" target=\"_blank\">popover component</a>\n     *  is going to append to\n     * @values body, parent, root, HTMLElement\n     */\n    popoverAppendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n          (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * If the dropdown does not fit in the direction described by \"popoverPlacement\",\n     * it will attempt to change it's direction to the \"popoverFallbackPlacements\".\n     *\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     * */\n    popoverFallbackPlacements: {\n      type: Array,\n      default: () => {\n        return ['auto'];\n      },\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    popoverMaxHeight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|%|em\n     */\n    popoverMaxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Padding size class for the popover content.\n     * @values none, small, medium, large\n     */\n    popoverPadding: {\n      type: String,\n      default: 'large',\n      validator: (padding) => {\n        return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * The direction the popover displays relative to the anchor.\n     * <a class=\"d-link\" href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\" target=\"_blank\">Tippy.js docs</a>\n     * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end\n     */\n    popoverPlacement: {\n      type: String,\n      default: 'bottom-start',\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'sm',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when clicking the clear button\n     *\n     * @event clear\n     * @type {Boolean | Array}\n     */\n    'clear',\n\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'open',\n\n    /**\n     * Emitted when the active filters change\n     * @type {Array}\n     */\n    'update:modelValue',\n  ],\n\n  data () {\n    return {\n      isOpen: false,\n      i18n: new DialtoneLocalization(),\n      filters: this.modelValue,\n    };\n  },\n\n  computed: {\n    buttonKind () {\n      return this.isActive ? 'default': 'muted';\n    },\n\n    resolvedStartTooltipText () {\n      return this.alphaTooltipText ?? this.startTooltipText;\n    },\n\n    resolvedEndTooltipText () {\n      return this.omegaTooltipText ?? this.endTooltipText;\n    },\n\n    clearButtonAriaLabel () {\n      return this.resolvedEndTooltipText || this.i18n.$t('DIALTONE_FILTER_PILL_CLEAR_BUTTON_LABEL');\n    },\n\n    clearButtonTitle () {\n      if (this.resolvedEndTooltipText) return;\n\n      return this.clearButtonAriaLabel\n    },\n\n    activeFilters () {\n      return this.filters.filter(filter => filter.active).map(filter => filter.name);\n    },\n\n    activeFilterList () {\n      if (this.activeFilters.length <= 2) {\n        return this.activeFilters.join(', ');\n      }\n\n      return this.activeFilters.slice(0, 2).join(', ') + ', + ' + (this.activeFilters.length - 2);\n    },\n\n    isActive () {\n      return this.activeFilterList.length > 0;\n    },\n\n    hasClear () {\n      return !this.hideClear && this.activeFilterList.length > 0;\n    },\n  },\n\n  watch: {\n    isOpen (isOpen) {\n      this.$emit('open', isOpen);\n    },\n\n    filters: {\n      deep: true,\n      handler (filters) {\n        this.$emit('update:modelValue', filters);\n      },\n    },\n  },\n\n  mounted () {\n    if (!(this.modelValue?.length || (this.$slots.content && this.$slots.content()))) {\n      console.warn('Please provide content through the v-model or the \"content\" slot.')\n    }\n  },\n\n  methods: {\n    clearFilter ($event) {\n      this.filters.forEach(filter => delete filter.active);\n      this.$emit('clear', $event)\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtCheckboxGroup","DtCheckbox","DtPopover","DtButton","DtIconClose","DtIconChevronDown","appendTo","POPOVER_APPEND_TO_VALUES","padding","POPOVER_PADDING_CLASSES","item","s","BUTTON_SIZE_MODIFIERS","DialtoneLocalization","filter","isOpen","filters","_a","$event","_hoisted_2","_openBlock","_createElementBlock","_hoisted_1","_createVNode","_component_dt_popover","$data","$props","_withCtx","attrs","_createBlock","_component_dt_button","_mergeProps","$options","iconSize","_component_dt_icon_chevron_down","_createElementVNode","_renderSlot","_ctx","_toDisplayString","close","_component_dt_checkbox_group","_Fragment","_renderList","_component_dt_checkbox","_normalizeClass","_component_dt_icon_close"],"mappings":"ygBAgHKA,EAAU,CACb,KAAM,eAEN,WAAY,CACV,gBAAAC,EAAAA,mBACAC,EAAAA,QACA,UAAAC,EAAAA,QACA,SAAAC,EAAAA,oBACAC,EAAAA,YACA,kBAAAC,EAAAA,mBAGF,aAAc,GAEd,MAAO,CAKL,WAAY,CACV,KAAM,MACN,QAAS,IAAM,CAAA,GAOjB,iBAAkB,CAChB,KAAM,OACN,QAAS,IAMX,iBAAkB,CAChB,KAAM,OACN,QAAS,QAMX,SAAU,CACR,KAAM,QACN,QAAS,IAOX,UAAW,CACT,KAAM,QACN,QAAS,IAMX,MAAO,CACL,KAAM,OACN,QAAS,QAOX,eAAgB,CACd,KAAM,OACN,QAAS,IAMX,iBAAkB,CAChB,KAAM,OACN,QAAS,QASX,gBAAiB,CACf,KAAM,CAAC,YAAa,MAAM,EAC1B,QAAS,OACT,UAAWC,GACFC,EAAAA,yBAAyB,SAASD,CAAQ,GAC9CA,aAAoB,aAc3B,0BAA2B,CACzB,KAAM,MACN,QAAS,IACA,CAAC,MAAM,GAQlB,iBAAkB,CAChB,KAAM,OACN,QAAS,IAOX,gBAAiB,CACf,KAAM,OACN,QAAS,IAOX,eAAgB,CACd,KAAM,OACN,QAAS,QACT,UAAYE,GACH,OAAO,KAAKC,yBAAuB,EAAE,KAAMC,GAASA,IAASF,CAAO,GAS/E,iBAAkB,CAChB,KAAM,OACN,QAAS,gBAOX,KAAM,CACJ,KAAM,OACN,QAAS,KACT,UAAYG,GAAM,OAAO,KAAKC,uBAAqB,EAAE,SAASD,CAAC,IAInE,MAAO,CAOL,QAQA,OAMA,qBAGF,MAAQ,CACN,MAAO,CACL,OAAQ,GACR,KAAM,IAAIE,EAAAA,qBACV,QAAS,KAAK,WAElB,EAEA,SAAU,CACR,YAAc,CACZ,OAAO,KAAK,SAAW,UAAW,OACpC,EAEA,0BAA4B,CAC1B,OAAO,KAAK,kBAAoB,KAAK,gBACvC,EAEA,wBAA0B,CACxB,OAAO,KAAK,kBAAoB,KAAK,cACvC,EAEA,sBAAwB,CACtB,OAAO,KAAK,wBAA0B,KAAK,KAAK,GAAG,yCAAyC,CAC9F,EAEA,kBAAoB,CAClB,GAAI,MAAK,uBAET,OAAO,KAAK,oBACd,EAEA,eAAiB,CACf,OAAO,KAAK,QAAQ,OAAOC,GAAUA,EAAO,MAAM,EAAE,IAAIA,GAAUA,EAAO,IAAI,CAC/E,EAEA,kBAAoB,CAClB,OAAI,KAAK,cAAc,QAAU,EACxB,KAAK,cAAc,KAAK,IAAI,EAG9B,KAAK,cAAc,MAAM,EAAG,CAAC,EAAE,KAAK,IAAI,EAAI,QAAU,KAAK,cAAc,OAAS,EAC3F,EAEA,UAAY,CACV,OAAO,KAAK,iBAAiB,OAAS,CACxC,EAEA,UAAY,CACV,MAAO,CAAC,KAAK,WAAa,KAAK,iBAAiB,OAAS,CAC3D,GAGF,MAAO,CACL,OAAQC,EAAQ,CACd,KAAK,MAAM,OAAQA,CAAM,CAC3B,EAEA,QAAS,CACP,KAAM,GACN,QAASC,EAAS,CAChB,KAAK,MAAM,oBAAqBA,CAAO,CACzC,IAIJ,SAAW,QACHC,EAAA,KAAK,aAAL,MAAAA,EAAiB,QAAW,KAAK,OAAO,SAAW,KAAK,OAAO,QAAO,GAC1E,QAAQ,KAAK,mEAAmE,CAEpF,EAEA,QAAS,CACP,YAAaC,EAAQ,CACnB,KAAK,QAAQ,QAAQJ,GAAU,OAAOA,EAAO,MAAM,EACnD,KAAK,MAAM,QAASI,CAAM,CAC5B,EAEJ,KAzXI,MAAM,gBACN,UAAQ,kBA+BIC,EAAA,CAAA,MAAM,sBAAsB,6UAjC1C,OAAAC,YAAA,EAAAC,qBAoGM,MApGNC,EAoGM,CAhGJC,EAAAA,YA0EaC,EAAA,CAzEH,KAAMC,EAAA,sCAAAA,EAAA,OAAMP,GACnB,YAAWQ,EAAA,gBACX,sBAAqBA,EAAA,0BACrB,aAAYA,EAAA,iBACZ,YAAWA,EAAA,gBACX,MAAO,GACP,QAASA,EAAA,eACT,UAAWA,EAAA,mBAED,OAAMC,EAAAA,QACf,CAuCY,CAxCO,MAAAC,KAAK,iCACxBC,EAAAA,YAuCYC,EAvCZC,EAAAA,WAEUH,EAAK,CACZ,OAAQI,EAAA,SACR,MAAK,qDAAiGA,EAAA,6CAA6DA,EAAA,WAOnK,SAAUN,EAAA,SACV,KAAMM,EAAA,WACN,KAAMN,EAAA,KACP,UAAQ,yBACR,WAAW,WACV,uBAAOD,EAAA,OAAM,OAgBH,QAAOE,EAAAA,QAChB,CAIE,CALkB,SAAAM,KAAQ,CAC5BV,EAAAA,YAIEW,EAAA,CAHC,KAAMD,EACP,MAAM,sBACN,UAAQ,6DAlBZ,IAaO,CAbPE,EAAAA,mBAaO,OAbPhB,EAaO,CAXLiB,EAAAA,WAUOC,sBAVP,IAUO,CATLF,EAAAA,mBAGE,OAAA,CAFA,MAAM,6BACN,YAAAG,EAAAA,gBAAcZ,EAAN,KAAK,aAGPM,EAAA,gCADRX,EAAAA,mBAIE,OAAA,OAFA,MAAM,6BACN,YAAAiB,EAAAA,gBAAyBN,EAAjB,gBAAgB,0GA3BhBA,EAAA,wBAAwB,MAwC/B,QAAOL,EAAAA,QAEhB,CAkBO,CApBa,MAAAY,KAAK,CAEzBH,EAAAA,WAkBOC,EAAA,OAAA,UAAA,CAjBJ,MAAOE,CAAK,EADf,IAAA,OAkBO,QAbGtB,EAAAS,EAAA,aAAA,MAAAT,EAAY,sBADpBY,EAAAA,YAaoBW,EAAA,OAXjB,kBAAiBR,EAAA,cACjB,aAAYN,EAAA,MACb,KAAK,sCAGH,IAAyB,kBAD3BL,EAAAA,mBAMEoB,EAAAA,SAAA,KAAAC,EAAAA,WALiBjB,EAAA,QAAVX,kBADTe,EAAAA,YAMEc,EAAA,CAJC,IAAK7B,EAAO,KACZ,MAAOA,EAAO,KACd,MAAOA,EAAO,KACd,QAAQI,GAAWJ,EAAO,OAASI,8NAOtCc,EAAA,yCADRH,EAAAA,YAoBYC,EAAA,OAjBT,OAAQE,EAAA,SACR,aAAYA,EAAA,qBACZ,MAAKY,EAAAA,eAAA,0DAAgFZ,EAAA,QAAQ,IAI7F,SAAUN,EAAA,SACV,KAAMM,EAAA,WACN,KAAMN,EAAA,KACN,MAAOM,EAAA,iBACR,UAAQ,+BACR,WAAW,WACV,QAAOA,EAAA,cAEG,KAAIL,EAAAA,QACb,CAAkC,CADjB,SAAAM,KAAQ,CACzBV,cAAkCsB,EAAA,CAAlB,KAAMZ,CAAQ,EAAA,KAAA,EAAA,CAAA,MAAA,CAAA,4FAhBlBD,EAAA,sBAAsB"}

package/dist/lib/filter-pill/filter-pill.js

@@ -0,0 +1,346 @@
+import { DtIconChevronDown as S, DtIconClose as E } from "@dialpad/dialtone-icons/vue3";
+import { DialtoneLocalization as F } from "../../localization/index.js";
+import { resolveComponent as n, resolveDirective as P, openBlock as o, createElementBlock as u, createVNode as m, withCtx as r, renderSlot as v, createBlock as p, Fragment as D, renderList as O, createCommentVNode as _, withDirectives as b, mergeProps as B, createElementVNode as T, toDisplayString as g, normalizeClass as z } from "vue";
+import { _ as I } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import V from "../button/button.js";
+import w from "../popover/popover.js";
+import N from "../checkbox/checkbox.js";
+import M from "../checkbox-group/checkbox-group.js";
+import { BUTTON_SIZE_MODIFIERS as R } from "../button/button-constants.js";
+import { POPOVER_PADDING_CLASSES as j, POPOVER_APPEND_TO_VALUES as q } from "../popover/popover-constants.js";
+const H = {
+  name: "DtFilterPill",
+  components: {
+    DtCheckboxGroup: M,
+    DtCheckbox: N,
+    DtPopover: w,
+    DtButton: V,
+    DtIconClose: E,
+    DtIconChevronDown: S
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Array of filters to display in the popover,
+     * should be an array of objects with `name` and `active` properties
+     */
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * Text shown in tooltip when you hover the start button,
+     * required if no content is passed to default slot
+     */
+    startTooltipText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * @deprecated Use startTooltipText
+     */
+    alphaTooltipText: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * HTML disabled attribute
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Toggles the clear button visibility
+     * @values true, false
+     */
+    hideClear: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Label of the button
+     */
+    label: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Text shown in tooltip when you hover the end button,
+     * required as it is an icon only button
+     */
+    endTooltipText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * @deprecated Use endTooltipText
+     */
+    omegaTooltipText: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Sets the element to which the
+     * <a class="d-link" href="https://dialtone.dialpad.com/components/popover.html#vue-api" target="_blank">popover component</a>
+     *  is going to append to
+     * @values body, parent, root, HTMLElement
+     */
+    popoverAppendTo: {
+      type: [HTMLElement, String],
+      default: "body",
+      validator: (e) => q.includes(e) || e instanceof HTMLElement
+    },
+    /**
+     * If the dropdown does not fit in the direction described by "popoverPlacement",
+     * it will attempt to change it's direction to the "popoverFallbackPlacements".
+     *
+     * @values top, top-start, top-end,
+     * right, right-start, right-end,
+     * left, left-start, left-end,
+     * bottom, bottom-start, bottom-end,
+     * auto, auto-start, auto-end
+     * */
+    popoverFallbackPlacements: {
+      type: Array,
+      default: () => ["auto"]
+    },
+    /**
+     * Determines maximum height for the popover before overflow.
+     * Possible units rem|px|em
+     */
+    popoverMaxHeight: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Determines maximum width for the popover before overflow.
+     * Possible units rem|px|%|em
+     */
+    popoverMaxWidth: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Padding size class for the popover content.
+     * @values none, small, medium, large
+     */
+    popoverPadding: {
+      type: String,
+      default: "large",
+      validator: (e) => Object.keys(j).some((i) => i === e)
+    },
+    /**
+     * The direction the popover displays relative to the anchor.
+     * <a class="d-link" href="https://atomiks.github.io/tippyjs/v6/all-props/#placement" target="_blank">Tippy.js docs</a>
+     * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end
+     */
+    popoverPlacement: {
+      type: String,
+      default: "bottom-start"
+    },
+    /**
+     * The size of the button.
+     * @values xs, sm, md, lg, xl
+     */
+    size: {
+      type: String,
+      default: "sm",
+      validator: (e) => Object.keys(R).includes(e)
+    }
+  },
+  emits: [
+    /**
+     * Emitted when clicking the clear button
+     *
+     * @event clear
+     * @type {Boolean | Array}
+     */
+    "clear",
+    /**
+     * Emitted when popover is shown or hidden
+     *
+     * @event opened
+     * @type {Boolean | Array}
+     */
+    "open",
+    /**
+     * Emitted when the active filters change
+     * @type {Array}
+     */
+    "update:modelValue"
+  ],
+  data() {
+    return {
+      isOpen: !1,
+      i18n: new F(),
+      filters: this.modelValue
+    };
+  },
+  computed: {
+    buttonKind() {
+      return this.isActive ? "default" : "muted";
+    },
+    resolvedStartTooltipText() {
+      return this.alphaTooltipText ?? this.startTooltipText;
+    },
+    resolvedEndTooltipText() {
+      return this.omegaTooltipText ?? this.endTooltipText;
+    },
+    clearButtonAriaLabel() {
+      return this.resolvedEndTooltipText || this.i18n.$t("DIALTONE_FILTER_PILL_CLEAR_BUTTON_LABEL");
+    },
+    clearButtonTitle() {
+      if (!this.resolvedEndTooltipText)
+        return this.clearButtonAriaLabel;
+    },
+    activeFilters() {
+      return this.filters.filter((e) => e.active).map((e) => e.name);
+    },
+    activeFilterList() {
+      return this.activeFilters.length <= 2 ? this.activeFilters.join(", ") : this.activeFilters.slice(0, 2).join(", ") + ", + " + (this.activeFilters.length - 2);
+    },
+    isActive() {
+      return this.activeFilterList.length > 0;
+    },
+    hasClear() {
+      return !this.hideClear && this.activeFilterList.length > 0;
+    }
+  },
+  watch: {
+    isOpen(e) {
+      this.$emit("open", e);
+    },
+    filters: {
+      deep: !0,
+      handler(e) {
+        this.$emit("update:modelValue", e);
+      }
+    }
+  },
+  mounted() {
+    var e;
+    (e = this.modelValue) != null && e.length || this.$slots.content && this.$slots.content() || console.warn('Please provide content through the v-model or the "content" slot.');
+  },
+  methods: {
+    clearFilter(e) {
+      this.filters.forEach((i) => delete i.active), this.$emit("clear", e);
+    }
+  }
+}, U = {
+  class: "d-filter-pill",
+  "data-qa": "dt-filter-pill"
+}, K = { class: "d-filter-pill__label" }, G = ["textContent"], W = ["textContent"];
+function Z(e, i, l, J, s, t) {
+  const x = n("dt-icon-chevron-down"), h = n("dt-button"), y = n("dt-checkbox"), k = n("dt-checkbox-group"), C = n("dt-popover"), A = n("dt-icon-close"), f = P("dt-tooltip");
+  return o(), u("div", U, [
+    m(C, {
+      open: s.isOpen,
+      "onUpdate:open": i[1] || (i[1] = (a) => s.isOpen = a),
+      "append-to": l.popoverAppendTo,
+      "fallback-placements": l.popoverFallbackPlacements,
+      "max-height": l.popoverMaxHeight,
+      "max-width": l.popoverMaxWidth,
+      modal: !1,
+      padding: l.popoverPadding,
+      placement: l.popoverPlacement
+    }, {
+      anchor: r(({ attrs: a }) => [
+        b((o(), p(h, B(a, {
+          active: t.isActive,
+          class: [
+            "d-filter-pill__primary",
+            {
+              "d-filter-pill--selected": t.isActive,
+              "d-filter-pill__primary--has-clear": t.hasClear
+            }
+          ],
+          disabled: l.disabled,
+          kind: t.buttonKind,
+          size: l.size,
+          "data-qa": "dt-filter-pill__button",
+          importance: "outlined",
+          onClick: i[0] || (i[0] = (d) => s.isOpen = !0)
+        }), {
+          endIcon: r(({ iconSize: d }) => [
+            m(x, {
+              size: d,
+              class: "d-filter-pill__icon",
+              "data-qa": "dt-filter-pill__icon"
+            }, null, 8, ["size"])
+          ]),
+          default: r(() => [
+            T("span", K, [
+              v(e.$slots, "default", {}, () => [
+                T("span", {
+                  class: "d-filter-pill__label-alpha",
+                  textContent: g(l.label)
+                }, null, 8, G),
+                t.activeFilterList ? (o(), u("span", {
+                  key: 0,
+                  class: "d-filter-pill__label-omega",
+                  textContent: g(t.activeFilterList)
+                }, null, 8, W)) : _("", !0)
+              ])
+            ])
+          ]),
+          _: 3
+        }, 16, ["active", "class", "disabled", "kind", "size"])), [
+          [f, t.resolvedStartTooltipText]
+        ])
+      ]),
+      content: r(({ close: a }) => [
+        v(e.$slots, "content", { close: a }, () => {
+          var d;
+          return [
+            (d = l.modelValue) != null && d.length ? (o(), p(k, {
+              key: 0,
+              "selected-values": t.activeFilters,
+              "aria-label": l.label,
+              name: "contact-centers"
+            }, {
+              default: r(() => [
+                (o(!0), u(D, null, O(s.filters, (c) => (o(), p(y, {
+                  key: c.name,
+                  label: c.name,
+                  value: c.name,
+                  onInput: (L) => c.active = L
+                }, null, 8, ["label", "value", "onInput"]))), 128))
+              ]),
+              _: 1
+            }, 8, ["selected-values", "aria-label"])) : _("", !0)
+          ];
+        })
+      ]),
+      _: 3
+    }, 8, ["open", "append-to", "fallback-placements", "max-height", "max-width", "padding", "placement"]),
+    t.hasClear ? b((o(), p(h, {
+      key: 0,
+      active: t.isActive,
+      "aria-label": t.clearButtonAriaLabel,
+      class: z([
+        "d-filter-pill__clear",
+        { "d-filter-pill__clear--selected": t.isActive }
+      ]),
+      disabled: l.disabled,
+      kind: t.buttonKind,
+      size: l.size,
+      title: t.clearButtonTitle,
+      "data-qa": "dt-filter-pill__clear-button",
+      importance: "outlined",
+      onClick: t.clearFilter
+    }, {
+      icon: r(({ iconSize: a }) => [
+        m(A, { size: a }, null, 8, ["size"])
+      ]),
+      _: 1
+    }, 8, ["active", "aria-label", "class", "disabled", "kind", "size", "title", "onClick"])), [
+      [f, t.resolvedEndTooltipText]
+    ]) : _("", !0)
+  ]);
+}
+const ne = /* @__PURE__ */ I(H, [["render", Z]]);
+export {
+  ne as default
+};
+//# sourceMappingURL=filter-pill.js.map

package/dist/lib/filter-pill/filter-pill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-pill.js","sources":["../../../components/filter_pill/filter_pill.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-filter-pill\"\n    data-qa=\"dt-filter-pill\"\n  >\n    <dt-popover\n      v-model:open=\"isOpen\"\n      :append-to=\"popoverAppendTo\"\n      :fallback-placements=\"popoverFallbackPlacements\"\n      :max-height=\"popoverMaxHeight\"\n      :max-width=\"popoverMaxWidth\"\n      :modal=\"false\"\n      :padding=\"popoverPadding\"\n      :placement=\"popoverPlacement\"\n    >\n      <template #anchor=\"{ attrs }\">\n        <dt-button\n          v-dt-tooltip=\"resolvedStartTooltipText\"\n          v-bind=\"attrs\"\n          :active=\"isActive\"\n          :class=\"[\n            'd-filter-pill__primary',\n            {\n              'd-filter-pill--selected': isActive,\n              'd-filter-pill__primary--has-clear': hasClear,\n            },\n          ]\"\n          :disabled=\"disabled\"\n          :kind=\"buttonKind\"\n          :size=\"size\"\n          data-qa=\"dt-filter-pill__button\"\n          importance=\"outlined\"\n          @click=\"isOpen = true\"\n        >\n          <span class=\"d-filter-pill__label\">\n            <!-- @slot Allows you to override the label behavior -->\n            <slot>\n              <span\n                class=\"d-filter-pill__label-alpha\"\n                v-text=\"label\"\n              />\n              <span\n                v-if=\"activeFilterList\"\n                class=\"d-filter-pill__label-omega\"\n                v-text=\"activeFilterList\"\n              />\n            </slot>\n          </span>\n          <template #endIcon=\"{ iconSize }\">\n            <dt-icon-chevron-down\n              :size=\"iconSize\"\n              class=\"d-filter-pill__icon\"\n              data-qa=\"dt-filter-pill__icon\"\n            />\n          </template>\n        </dt-button>\n      </template>\n      <template #content=\"{ close }\">\n        <!-- @slot Allows you to override the popover content, only use this if you need custom behavior -->\n        <slot\n          :close=\"close\"\n          name=\"content\"\n        >\n          <dt-checkbox-group\n            v-if=\"modelValue?.length\"\n            :selected-values=\"activeFilters\"\n            :aria-label=\"label\"\n            name=\"contact-centers\"\n          >\n            <dt-checkbox\n              v-for=\"filter in filters\"\n              :key=\"filter.name\"\n              :label=\"filter.name\"\n              :value=\"filter.name\"\n              @input=\"($event) => filter.active = $event\"\n            />\n          </dt-checkbox-group>\n        </slot>\n      </template>\n    </dt-popover>\n    <dt-button\n      v-if=\"hasClear\"\n      v-dt-tooltip=\"resolvedEndTooltipText\"\n      :active=\"isActive\"\n      :aria-label=\"clearButtonAriaLabel\"\n      :class=\"[\n        'd-filter-pill__clear',\n        { 'd-filter-pill__clear--selected': isActive },\n      ]\"\n      :disabled=\"disabled\"\n      :kind=\"buttonKind\"\n      :size=\"size\"\n      :title=\"clearButtonTitle\"\n      data-qa=\"dt-filter-pill__clear-button\"\n      importance=\"outlined\"\n      @click=\"clearFilter\"\n    >\n      <template #icon=\"{ iconSize }\">\n        <dt-icon-close :size=\"iconSize\" />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtPopover, POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES } from '@/components/popover';\nimport { BUTTON_SIZE_MODIFIERS, DtButton } from '@/components/button';\nimport { DtIconChevronDown, DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { DialtoneLocalization } from '@/localization';\nimport { DtCheckbox } from '@/components/checkbox';\nimport { DtCheckboxGroup } from '@/components/checkbox_group';\n\nexport default {\n  name: 'DtFilterPill',\n\n  components: {\n    DtCheckboxGroup,\n    DtCheckbox,\n    DtPopover,\n    DtButton,\n    DtIconClose,\n    DtIconChevronDown,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Array of filters to display in the popover,\n     * should be an array of objects with `name` and `active` properties\n     */\n    modelValue: {\n      type: Array,\n      default: () => [],\n    },\n\n    /**\n     * Text shown in tooltip when you hover the start button,\n     * required if no content is passed to default slot\n     */\n    startTooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * @deprecated Use startTooltipText\n     */\n    alphaTooltipText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * HTML disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Toggles the clear button visibility\n     * @values true, false\n     */\n    hideClear: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Label of the button\n     */\n    label: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the end button,\n     * required as it is an icon only button\n     */\n    endTooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * @deprecated Use endTooltipText\n     */\n    omegaTooltipText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Sets the element to which the\n     * <a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/popover.html#vue-api\" target=\"_blank\">popover component</a>\n     *  is going to append to\n     * @values body, parent, root, HTMLElement\n     */\n    popoverAppendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n          (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * If the dropdown does not fit in the direction described by \"popoverPlacement\",\n     * it will attempt to change it's direction to the \"popoverFallbackPlacements\".\n     *\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     * */\n    popoverFallbackPlacements: {\n      type: Array,\n      default: () => {\n        return ['auto'];\n      },\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    popoverMaxHeight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|%|em\n     */\n    popoverMaxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Padding size class for the popover content.\n     * @values none, small, medium, large\n     */\n    popoverPadding: {\n      type: String,\n      default: 'large',\n      validator: (padding) => {\n        return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * The direction the popover displays relative to the anchor.\n     * <a class=\"d-link\" href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\" target=\"_blank\">Tippy.js docs</a>\n     * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end\n     */\n    popoverPlacement: {\n      type: String,\n      default: 'bottom-start',\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'sm',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when clicking the clear button\n     *\n     * @event clear\n     * @type {Boolean | Array}\n     */\n    'clear',\n\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'open',\n\n    /**\n     * Emitted when the active filters change\n     * @type {Array}\n     */\n    'update:modelValue',\n  ],\n\n  data () {\n    return {\n      isOpen: false,\n      i18n: new DialtoneLocalization(),\n      filters: this.modelValue,\n    };\n  },\n\n  computed: {\n    buttonKind () {\n      return this.isActive ? 'default': 'muted';\n    },\n\n    resolvedStartTooltipText () {\n      return this.alphaTooltipText ?? this.startTooltipText;\n    },\n\n    resolvedEndTooltipText () {\n      return this.omegaTooltipText ?? this.endTooltipText;\n    },\n\n    clearButtonAriaLabel () {\n      return this.resolvedEndTooltipText || this.i18n.$t('DIALTONE_FILTER_PILL_CLEAR_BUTTON_LABEL');\n    },\n\n    clearButtonTitle () {\n      if (this.resolvedEndTooltipText) return;\n\n      return this.clearButtonAriaLabel\n    },\n\n    activeFilters () {\n      return this.filters.filter(filter => filter.active).map(filter => filter.name);\n    },\n\n    activeFilterList () {\n      if (this.activeFilters.length <= 2) {\n        return this.activeFilters.join(', ');\n      }\n\n      return this.activeFilters.slice(0, 2).join(', ') + ', + ' + (this.activeFilters.length - 2);\n    },\n\n    isActive () {\n      return this.activeFilterList.length > 0;\n    },\n\n    hasClear () {\n      return !this.hideClear && this.activeFilterList.length > 0;\n    },\n  },\n\n  watch: {\n    isOpen (isOpen) {\n      this.$emit('open', isOpen);\n    },\n\n    filters: {\n      deep: true,\n      handler (filters) {\n        this.$emit('update:modelValue', filters);\n      },\n    },\n  },\n\n  mounted () {\n    if (!(this.modelValue?.length || (this.$slots.content && this.$slots.content()))) {\n      console.warn('Please provide content through the v-model or the \"content\" slot.')\n    }\n  },\n\n  methods: {\n    clearFilter ($event) {\n      this.filters.forEach(filter => delete filter.active);\n      this.$emit('clear', $event)\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtCheckboxGroup","DtCheckbox","DtPopover","DtButton","DtIconClose","DtIconChevronDown","appendTo","POPOVER_APPEND_TO_VALUES","padding","POPOVER_PADDING_CLASSES","item","s","BUTTON_SIZE_MODIFIERS","DialtoneLocalization","filter","isOpen","filters","_a","$event","_hoisted_2","_openBlock","_createElementBlock","_hoisted_1","_createVNode","_component_dt_popover","$data","$props","_withCtx","attrs","_createBlock","_component_dt_button","_mergeProps","$options","iconSize","_component_dt_icon_chevron_down","_createElementVNode","_renderSlot","_ctx","_toDisplayString","close","_component_dt_checkbox_group","_Fragment","_renderList","_component_dt_checkbox","_normalizeClass","_component_dt_icon_close"],"mappings":"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"}

package/dist/lib/filter-pill/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./filter-pill.cjs");exports.DtFilterPill=l.default;
+//# sourceMappingURL=index.cjs.map

package/dist/lib/filter-pill/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/lib/filter-pill/index.js

@@ -0,0 +1,5 @@
+import { default as e } from "./filter-pill.js";
+export {
+  e as DtFilterPill
+};
+//# sourceMappingURL=index.js.map

package/dist/lib/filter-pill/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}