@dialpad/dialtone 9.91.1 → 9.93.0

package/dist/vue3/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"callbar_button_with_popover.vue.js","sources":["../../../../recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-recipe-callbar-button-with-popover\"\n  >\n    <dt-recipe-callbar-button\n      :aria-label=\"ariaLabel\"\n      :disabled=\"disabled\"\n      :active=\"active\"\n      :danger=\"danger\"\n      :button-class=\"buttonClass\"\n      :button-width-size=\"buttonWidthSize\"\n      :text-class=\"textClass\"\n      :inverted-tooltip=\"invertedTooltip\"\n      :show-tooltip=\"showTooltip\"\n      :tooltip-text=\"tooltipText\"\n      class=\"d-recipe-callbar-button-with-popover--main-button\"\n      @click=\"buttonClick\"\n    >\n      <template #icon>\n        <slot name=\"icon\" />\n      </template>\n      <template #tooltip>\n        <slot name=\"tooltip\" />\n      </template>\n      <slot />\n    </dt-recipe-callbar-button>\n    <dt-popover\n      v-if=\"showArrowButton\"\n      :id=\"id\"\n      :modal=\"false\"\n      :open=\"open\"\n      :placement=\"placement\"\n      :initial-focus-element=\"initialFocusElement\"\n      :show-close-button=\"showCloseButton\"\n      :offset=\"offset\"\n      padding=\"none\"\n      class=\"d-recipe-callbar-button-with-popover__popover-wrapper\"\n      :dialog-class=\"['d-recipe-callbar-button-with-popover__popover', contentClass]\"\n      header-class=\"d-d-flex d-ai-center d-fw-normal d-px12\"\n      v-bind=\"$attrs\"\n      :open-popover=\"showPopover\"\n      @opened=\"onModalIsOpened\"\n    >\n      <template #anchor>\n        <dt-button\n          circle\n          importance=\"clear\"\n          size=\"lg\"\n          :class=\"['d-recipe-callbar-button-with-popover__arrow',\n                   { 'd-recipe-callbar-button-with-popover__arrow--large': !isCompactMode }]\"\n          width=\"2rem\"\n          :aria-label=\"arrowButtonLabel\"\n          :active=\"open\"\n          @click=\"arrowClick\"\n        >\n          <template #icon>\n            <dt-icon-chevron-up\n              class=\"d-recipe-callbar-button-with-popover__arrow-icon\"\n              size=\"200\"\n            />\n          </template>\n        </dt-button>\n      </template>\n      <template #content>\n        <slot name=\"content\" />\n      </template>\n      <template #headerContent>\n        <slot name=\"headerContent\" />\n      </template>\n      <template #footerContent>\n        <slot name=\"footerContent\" />\n      </template>\n    </dt-popover>\n  </div>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\nimport { DtIconChevronUp } from '@dialpad/dialtone-icons/vue3';\nimport { DtRecipeCallbarButton, CALLBAR_BUTTON_VALID_WIDTH_SIZE } from '../callbar_button';\nimport utils, { warnIfUnmounted } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeCallbarButtonWithPopover',\n\n  components: { DtRecipeCallbarButton, DtPopover, DtButton, DtIconChevronUp },\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () {\n        return utils.getUniqueString();\n      },\n    },\n\n    /**\n     * Aria label for the button. If empty, it takes its value from the default slot.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n      validator: (label) => {\n        return label || this.$slots.default;\n      },\n    },\n\n    /**\n     * Aria label for the arrow. Cannot be empty.\n     */\n    arrowButtonLabel: {\n      type: String,\n      required: true,\n      validator: (label) => {\n        return !!label;\n      },\n    },\n\n    /**\n     * The direction the popover displays relative to the anchor.\n     * @values 'bottom', 'bottom-start', 'bottom-end',\n     *         'right', 'right-start', 'right-end',\n     *         'left', 'left-start', 'left-end',\n     *         'top', 'top-start', 'top-end'\n     * @default 'top'\n     */\n    placement: {\n      type: String,\n      default: 'top',\n    },\n\n    /**\n     *  Displaces the content box from its anchor element\n     *  by the specified number of pixels.\n     *  <a\n     *    class=\"d-link\"\n     *    href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     *    target=\"_blank\"\n     *  >\n     *    Tippy.js docs\n     *  </a>\n     */\n    offset: {\n      type: Array,\n      default: () => [0, 16],\n    },\n\n    /**\n     * The element that is focused when the popover is opened. This can be an\n     * HTMLElement within the popover, a string starting with '#' which will\n     * find the element by ID. 'first' which will automatically focus\n     * the first element, or 'dialog' which will focus the dialog window itself.\n     * If the dialog is modal this prop cannot be 'none'.\n     */\n    initialFocusElement: {\n      type: String,\n      default: 'first',\n    },\n\n    /**\n     * Determines visibility for close button\n     */\n    showCloseButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Determines whether the button should be disabled\n     * default is false.\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Forces showing the arrow, even if the button is disabled.\n     * default is false\n     * @values true, false\n     */\n    forceShowArrow: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have danger styling\n     * default is false.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    danger: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * We need this declaration because of how Vue3 informs the component about a listener.\n     * Spoiler alert: it doesn't.\n     * Vue3 intends to work as a real pub-sub, meaning the publisher has not a clue of who the subscribers are.\n     * This makes it impossible from the regular declaration (emits: ['click']) to check whether\n     * we actually have a click handler or not.\n     * We're hacking it by adding an onClick prop: https://github.com/vuejs/core/issues/5220\n    */\n    /* eslint-disable-next-line vue/no-unused-properties */\n    onClick: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * Additional class name for the button wrapper element.\n     */\n    buttonClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the button text.\n     */\n    textClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /*\n     * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.\n     */\n    buttonWidthSize: {\n      type: String,\n      default: 'xl',\n      validator: size => CALLBAR_BUTTON_VALID_WIDTH_SIZE.includes(size),\n    },\n\n    /**\n     * Additional class name for the popover content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * To auto open the modal popover.\n     */\n    openPopover: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the tooltip has an inverted background color.\n     * @values true, false\n     */\n    invertedTooltip: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Use this if you would like to manually override the logic for when the tooltip shows.\n     * Otherwise it will just show on hover/focus.\n     * @values null, true, false\n     */\n    showTooltip: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * The message that displays in the tooltip. This will be overridden by the tooltip slot.\n     */\n    tooltipText: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when the arrow is clicked\n     */\n    'arrow-click',\n\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Emitted when modal popover is opened or closed.\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      open: false,\n    };\n  },\n\n  computed: {\n    showArrowButton () {\n      return this.forceShowArrow || !this.disabled;\n    },\n\n    isCompactMode () {\n      return this.buttonWidthSize === 'sm' || this.buttonWidthSize === 'md';\n    },\n\n    showPopover () {\n      if (!this.openPopover || this.open) {\n        this.syncOpenState();\n        return false;\n      }\n\n      return this.toggleOpen();\n    },\n  },\n\n  mounted () {\n    warnIfUnmounted(this.$el, this.$options.name);\n  },\n\n  methods: {\n    arrowClick (ev) {\n      this.$emit('arrow-click', ev);\n      return this.toggleOpen();\n    },\n\n    toggleOpen () {\n      return (this.open = !this.open);\n    },\n\n    syncOpenState () {\n      this.open = this.openPopover;\n    },\n\n    buttonClick (ev) {\n      // If no listener for the click event, the button click opens the popover\n      // the same as if the arrow was clicked.\n      if (!this.$props.onClick) {\n        this.arrowClick(ev);\n      } else {\n        this.$emit('click', ev);\n      }\n    },\n\n    onModalIsOpened (isOpened) {\n      this.open = isOpened;\n      this.$emit('opened', isOpened);\n    },\n  },\n\n};\n</script>\n"],"names":["this","_openBlock","_createElementBlock","_createVNode","_renderSlot","_withCtx","_createBlock","_mergeProps","_normalizeClass","_createCommentVNode"],"mappings":"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"}
+{"version":3,"file":"callbar_button_with_popover.vue.js","sources":["../../../../recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-recipe-callbar-button-with-popover\"\n  >\n    <dt-recipe-callbar-button\n      :aria-label=\"ariaLabel\"\n      :disabled=\"disabled\"\n      :active=\"active\"\n      :danger=\"danger\"\n      :button-class=\"buttonClass\"\n      :button-width-size=\"buttonWidthSize\"\n      :text-class=\"textClass\"\n      :inverted-tooltip=\"invertedTooltip\"\n      :show-tooltip=\"showTooltip\"\n      :tooltip-text=\"tooltipText\"\n      class=\"d-recipe-callbar-button-with-popover--main-button\"\n      @click=\"buttonClick\"\n    >\n      <template #icon>\n        <slot name=\"icon\" />\n      </template>\n      <template #tooltip>\n        <slot name=\"tooltip\" />\n      </template>\n      <slot />\n    </dt-recipe-callbar-button>\n    <dt-popover\n      v-if=\"showArrowButton\"\n      :id=\"id\"\n      :modal=\"false\"\n      :open=\"open\"\n      :placement=\"placement\"\n      :initial-focus-element=\"initialFocusElement\"\n      :show-close-button=\"showCloseButton\"\n      :offset=\"offset\"\n      padding=\"none\"\n      class=\"d-recipe-callbar-button-with-popover__popover-wrapper\"\n      :dialog-class=\"['d-recipe-callbar-button-with-popover__popover', contentClass]\"\n      v-bind=\"$attrs\"\n      :open-popover=\"showPopover\"\n      @opened=\"onModalIsOpened\"\n    >\n      <template #anchor>\n        <dt-button\n          circle\n          importance=\"clear\"\n          size=\"lg\"\n          :class=\"['d-recipe-callbar-button-with-popover__arrow',\n                   { 'd-recipe-callbar-button-with-popover__arrow--large': !isCompactMode }]\"\n          width=\"2rem\"\n          :aria-label=\"arrowButtonLabel\"\n          :active=\"open\"\n          @click=\"arrowClick\"\n        >\n          <template #icon>\n            <dt-icon-chevron-up\n              class=\"d-recipe-callbar-button-with-popover__arrow-icon\"\n              size=\"200\"\n            />\n          </template>\n        </dt-button>\n      </template>\n      <template #content>\n        <slot name=\"content\" />\n      </template>\n      <template #headerContent>\n        <slot name=\"headerContent\" />\n      </template>\n      <template #footerContent>\n        <slot name=\"footerContent\" />\n      </template>\n    </dt-popover>\n  </div>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\nimport { DtIconChevronUp } from '@dialpad/dialtone-icons/vue3';\nimport { DtRecipeCallbarButton, CALLBAR_BUTTON_VALID_WIDTH_SIZE } from '../callbar_button';\nimport utils, { warnIfUnmounted } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeCallbarButtonWithPopover',\n\n  components: { DtRecipeCallbarButton, DtPopover, DtButton, DtIconChevronUp },\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () {\n        return utils.getUniqueString();\n      },\n    },\n\n    /**\n     * Aria label for the button. If empty, it takes its value from the default slot.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n      validator: (label) => {\n        return label || this.$slots.default;\n      },\n    },\n\n    /**\n     * Aria label for the arrow. Cannot be empty.\n     */\n    arrowButtonLabel: {\n      type: String,\n      required: true,\n      validator: (label) => {\n        return !!label;\n      },\n    },\n\n    /**\n     * The direction the popover displays relative to the anchor.\n     * @values 'bottom', 'bottom-start', 'bottom-end',\n     *         'right', 'right-start', 'right-end',\n     *         'left', 'left-start', 'left-end',\n     *         'top', 'top-start', 'top-end'\n     * @default 'top'\n     */\n    placement: {\n      type: String,\n      default: 'top',\n    },\n\n    /**\n     *  Displaces the content box from its anchor element\n     *  by the specified number of pixels.\n     *  <a\n     *    class=\"d-link\"\n     *    href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     *    target=\"_blank\"\n     *  >\n     *    Tippy.js docs\n     *  </a>\n     */\n    offset: {\n      type: Array,\n      default: () => [0, 16],\n    },\n\n    /**\n     * The element that is focused when the popover is opened. This can be an\n     * HTMLElement within the popover, a string starting with '#' which will\n     * find the element by ID. 'first' which will automatically focus\n     * the first element, or 'dialog' which will focus the dialog window itself.\n     * If the dialog is modal this prop cannot be 'none'.\n     */\n    initialFocusElement: {\n      type: String,\n      default: 'first',\n    },\n\n    /**\n     * Determines visibility for close button\n     */\n    showCloseButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Determines whether the button should be disabled\n     * default is false.\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Forces showing the arrow, even if the button is disabled.\n     * default is false\n     * @values true, false\n     */\n    forceShowArrow: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have danger styling\n     * default is false.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    danger: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * We need this declaration because of how Vue3 informs the component about a listener.\n     * Spoiler alert: it doesn't.\n     * Vue3 intends to work as a real pub-sub, meaning the publisher has not a clue of who the subscribers are.\n     * This makes it impossible from the regular declaration (emits: ['click']) to check whether\n     * we actually have a click handler or not.\n     * We're hacking it by adding an onClick prop: https://github.com/vuejs/core/issues/5220\n    */\n    /* eslint-disable-next-line vue/no-unused-properties */\n    onClick: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * Additional class name for the button wrapper element.\n     */\n    buttonClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the button text.\n     */\n    textClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /*\n     * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.\n     */\n    buttonWidthSize: {\n      type: String,\n      default: 'xl',\n      validator: size => CALLBAR_BUTTON_VALID_WIDTH_SIZE.includes(size),\n    },\n\n    /**\n     * Additional class name for the popover content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * To auto open the modal popover.\n     */\n    openPopover: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the tooltip has an inverted background color.\n     * @values true, false\n     */\n    invertedTooltip: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Use this if you would like to manually override the logic for when the tooltip shows.\n     * Otherwise it will just show on hover/focus.\n     * @values null, true, false\n     */\n    showTooltip: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * The message that displays in the tooltip. This will be overridden by the tooltip slot.\n     */\n    tooltipText: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when the arrow is clicked\n     */\n    'arrow-click',\n\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Emitted when modal popover is opened or closed.\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      open: false,\n    };\n  },\n\n  computed: {\n    showArrowButton () {\n      return this.forceShowArrow || !this.disabled;\n    },\n\n    isCompactMode () {\n      return this.buttonWidthSize === 'sm' || this.buttonWidthSize === 'md';\n    },\n\n    showPopover () {\n      if (!this.openPopover || this.open) {\n        this.syncOpenState();\n        return false;\n      }\n\n      return this.toggleOpen();\n    },\n  },\n\n  mounted () {\n    warnIfUnmounted(this.$el, this.$options.name);\n  },\n\n  methods: {\n    arrowClick (ev) {\n      this.$emit('arrow-click', ev);\n      return this.toggleOpen();\n    },\n\n    toggleOpen () {\n      return (this.open = !this.open);\n    },\n\n    syncOpenState () {\n      this.open = this.openPopover;\n    },\n\n    buttonClick (ev) {\n      // If no listener for the click event, the button click opens the popover\n      // the same as if the arrow was clicked.\n      if (!this.$props.onClick) {\n        this.arrowClick(ev);\n      } else {\n        this.$emit('click', ev);\n      }\n    },\n\n    onModalIsOpened (isOpened) {\n      this.open = isOpened;\n      this.$emit('opened', isOpened);\n    },\n  },\n\n};\n</script>\n"],"names":["this","_openBlock","_createElementBlock","_createVNode","_renderSlot","_withCtx","_createBlock","_mergeProps","_normalizeClass","_createCommentVNode"],"mappings":";;;;;;;;AAkFA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY,EAAE,uBAAuB,WAAW,UAAU,gBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,EAM3E,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAW;AACT,eAAO,MAAM;MACd;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,UAAU;AACpB,eAAO,SAASA,SAAK,OAAO;AAAA,MAC7B;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAAC,UAAU;AACpB,eAAO,CAAC,CAAC;AAAA,MACV;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS,MAAM,CAAC,GAAG,EAAE;AAAA,IACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASD,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWD,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,UAAQ,gCAAgC,SAAS,IAAI;AAAA,IACjE;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,MAAM;AAAA;EAET;AAAA,EAED,UAAU;AAAA,IACR,kBAAmB;AACjB,aAAO,KAAK,kBAAkB,CAAC,KAAK;AAAA,IACrC;AAAA,IAED,gBAAiB;AACf,aAAO,KAAK,oBAAoB,QAAQ,KAAK,oBAAoB;AAAA,IAClE;AAAA,IAED,cAAe;AACb,UAAI,CAAC,KAAK,eAAe,KAAK,MAAM;AAClC,aAAK,cAAa;AAClB,eAAO;AAAA,MACT;AAEA,aAAO,KAAK;IACb;AAAA,EACF;AAAA,EAED,UAAW;AACT,oBAAgB,KAAK,KAAK,KAAK,SAAS,IAAI;AAAA,EAC7C;AAAA,EAED,SAAS;AAAA,IACP,WAAY,IAAI;AACd,WAAK,MAAM,eAAe,EAAE;AAC5B,aAAO,KAAK;IACb;AAAA,IAED,aAAc;AACZ,aAAQ,KAAK,OAAO,CAAC,KAAK;AAAA,IAC3B;AAAA,IAED,gBAAiB;AACf,WAAK,OAAO,KAAK;AAAA,IAClB;AAAA,IAED,YAAa,IAAI;AAGf,UAAI,CAAC,KAAK,OAAO,SAAS;AACxB,aAAK,WAAW,EAAE;AAAA,aACb;AACL,aAAK,MAAM,SAAS,EAAE;AAAA,MACxB;AAAA,IACD;AAAA,IAED,gBAAiB,UAAU;AACzB,WAAK,OAAO;AACZ,WAAK,MAAM,UAAU,QAAQ;AAAA,IAC9B;AAAA,EACF;AAEH;AAzXI,MAAA,aAAA,EAAA,OAAM,uCAAsC;;;;;;AAD9C,SAAAC,UAAA,GAAAC,mBAuEM,OAvEN,YAuEM;AAAA,IApEJC,YAqB2B,qCAAA;AAAA,MApBxB,cAAY,OAAS;AAAA,MACrB,UAAU,OAAQ;AAAA,MAClB,QAAQ,OAAM;AAAA,MACd,QAAQ,OAAM;AAAA,MACd,gBAAc,OAAW;AAAA,MACzB,qBAAmB,OAAe;AAAA,MAClC,cAAY,OAAS;AAAA,MACrB,oBAAkB,OAAe;AAAA,MACjC,gBAAc,OAAW;AAAA,MACzB,gBAAc,OAAW;AAAA,MAC1B,OAAM;AAAA,MACL,SAAO,SAAW;AAAA;MAER,cACT,MAAoB;AAAA,QAApBC,WAAoB,KAAA,QAAA,MAAA;AAAA;MAEX,iBACT,MAAuB;AAAA,QAAvBA,WAAuB,KAAA,QAAA,SAAA;AAAA;MAtB/B,SAAAC,QAwBM,MAAQ;AAAA,QAARD,WAAQ,KAAA,QAAA,SAAA;AAAA;MAxBd,GAAA;AAAA;IA2BY,SAAe,mBADvBH,aAAAK,YA6Ca,uBA7CbC,WA6Ca;AAAA,MAvEjB,KAAA;AAAA,MA4BO,IAAI,OAAE;AAAA,MACN,OAAO;AAAA,MACP,MAAM,MAAI;AAAA,MACV,WAAW,OAAS;AAAA,MACpB,yBAAuB,OAAmB;AAAA,MAC1C,qBAAmB,OAAe;AAAA,MAClC,QAAQ,OAAM;AAAA,MACf,SAAQ;AAAA,MACR,OAAM;AAAA,MACL,kEAAgE,OAAY,YAAA;AAAA,OACrE,KAAM,QAAA;AAAA,MACb,gBAAc,SAAW;AAAA,MACzB,UAAQ,SAAe;AAAA;MAEb,gBACT,MAiBY;AAAA,QAjBZJ,YAiBY,sBAAA;AAAA,UAhBV,QAAA;AAAA,UACA,YAAW;AAAA,UACX,MAAK;AAAA,UACJ,OA/CXK,eAAA;AAAA,YAAA;AAAA,qEA+C8I,SAAa,cAAA;AAAA,UAAA,CAAA;AAAA,UAEjJ,OAAM;AAAA,UACL,cAAY,OAAgB;AAAA,UAC5B,QAAQ,MAAI;AAAA,UACZ,SAAO,SAAU;AAAA;UAEP,cACT,MAGE;AAAA,YAHFL,YAGE,+BAAA;AAAA,cAFA,OAAM;AAAA,cACN,MAAK;AAAA;;UAzDnB,GAAA;AAAA;;MA8DiB,iBACT,MAAuB;AAAA,QAAvBC,WAAuB,KAAA,QAAA,SAAA;AAAA;MAEd,uBACT,MAA6B;AAAA,QAA7BA,WAA6B,KAAA,QAAA,eAAA;AAAA;MAEpB,uBACT,MAA6B;AAAA,QAA7BA,WAA6B,KAAA,QAAA,eAAA;AAAA;MArErC,GAAA;AAAA,+IAAAK,mBAAA,IAAA,IAAA;AAAA;;;"}

package/dist/vue3/recipes/cards/ivr_node/ivr_node.vue.cjs

@@ -95,8 +95,8 @@ const _sfc_main = {
     nodeIcon() {
       return typeToIcon.get(this.nodeType);
     },
-    headerColor() {
-      const { normal, selected } = ivr_node_constants.IVR_NODE_COLOR_MAPPING[this.nodeType];
+    nodeClass() {
+      const { normal, selected } = ivr_node_constants.IVR_NODE_CLASS_MAPPING[this.nodeType];
       return this.isSelected ? selected : normal;
     },
     isGotoNode() {
@@ -120,7 +120,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon_more_vertical = vue.resolveComponent("dt-icon-more-vertical");
   const _component_dt_dropdown = vue.resolveComponent("dt-dropdown");
   const _component_dt_card = vue.resolveComponent("dt-card");
-  return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ class: "d-recipe-ivr-node" }, vue.toHandlers($options.nodeListeners, true)), [
+  return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+    class: [
+      "d-recipe-ivr-node",
+      $options.nodeClass
+    ]
+  }, vue.toHandlers($options.nodeListeners, true)), [
     $props.dtmfKey ? (vue.openBlock(), vue.createElementBlock("div", {
       key: 0,
       "data-qa": "dt-top-connector-dtmf",
@@ -132,22 +137,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       "data-qa": "dt-top-connector",
       class: vue.normalizeClass(["d-recipe-ivr-node__connector", { "d-recipe-ivr-node__connector--selected": $props.isSelected }])
     }, null, 2)) : vue.createCommentVNode("", true),
-    vue.createVNode(_component_dt_card, {
-      "content-class": "d-bt d-bc-black-300 d-px12 d-pt8 d-pb12",
-      "container-class": [
-        "d-w100p",
-        { "d-ba d-bar8 d-baw4": $props.isSelected },
-        $options.headerColor
-      ],
-      "header-class": [
-        "d-mtn1",
-        "d-bt",
-        "d-btw4",
-        "d-p0",
-        $options.headerColor,
-        { "d-btr4": !$props.isSelected }
-      ]
-    }, {
+    vue.createVNode(_component_dt_card, null, {
       header: vue.withCtx(() => [
         vue.createElementVNode("div", _hoisted_1, [
           vue.createVNode(_component_dt_button, {
@@ -196,7 +186,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         vue.renderSlot(_ctx.$slots, "content")
       ]),
       _: 3
-    }, 8, ["container-class", "header-class"])
+    })
   ], 16);
 }
 const ivr_node = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);

package/dist/vue3/recipes/cards/ivr_node/ivr_node.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ivr_node.vue.cjs","sources":["../../../../recipes/cards/ivr_node/ivr_node.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-recipe-ivr-node\"\n    v-on=\"nodeListeners\"\n  >\n    <div\n      v-if=\"dtmfKey\"\n      data-qa=\"dt-top-connector-dtmf\"\n      class=\"d-recipe-ivr-node__connector d-recipe-ivr-node__connector-dtmf\"\n      :class=\"{ 'd-recipe-ivr-node__connector-dtmf--selected': isSelected }\"\n    >\n      {{ dtmfKey }}\n    </div>\n    <slot\n      v-if=\"$slots.connector\"\n      name=\"connector\"\n    />\n    <div\n      v-if=\"!dtmfKey && !$slots.connector\"\n      data-qa=\"dt-top-connector\"\n      class=\"d-recipe-ivr-node__connector\"\n      :class=\"{ 'd-recipe-ivr-node__connector--selected': isSelected }\"\n    />\n    <dt-card\n      content-class=\"d-bt d-bc-black-300 d-px12 d-pt8 d-pb12\"\n      :container-class=\"[\n        'd-w100p',\n        { 'd-ba d-bar8 d-baw4': isSelected },\n        headerColor,\n      ]\"\n      :header-class=\"[\n        'd-mtn1',\n        'd-bt',\n        'd-btw4',\n        'd-p0',\n        headerColor,\n        { 'd-btr4': !isSelected },\n      ]\"\n    >\n      <template #header>\n        <!-- node label and icon section on left of the header -->\n        <div class=\"d-recipe-ivr-node__header-left\">\n          <dt-button\n            :aria-label=\"nodeType\"\n            importance=\"clear\"\n            kind=\"muted\"\n            data-qa=\"dt-ivr-node-icon\"\n          >\n            <template #icon>\n              <component\n                :is=\"nodeIcon\"\n                size=\"200\"\n                :class=\"['', { 'd-recipe-ivr-node__goto-icon': isGotoNode }]\"\n              />\n            </template>\n          </dt-button>\n          <p\n            class=\"d-recipe-ivr-node__label\"\n            data-qa=\"ivr-node-label\"\n          >\n            {{ nodeLabel }}\n          </p>\n        </div>\n        <!-- node menu for actions like edit, copy, delete -->\n        <dt-dropdown\n          v-model:open=\"isOpen\"\n          placement=\"bottom\"\n        >\n          <template #anchor>\n            <dt-button\n              importance=\"clear\"\n              kind=\"muted\"\n              :aria-label=\"menuButtonAriaLabel\"\n              @click.stop.prevent=\"openMenu\"\n            >\n              <template #icon>\n                <dt-icon-more-vertical size=\"200\" />\n              </template>\n            </dt-button>\n          </template>\n          <template #list=\"{ close }\">\n            <div class=\"d-recipe-ivr-node__dropdown-list\">\n              <slot\n                name=\"menuItems\"\n                :close=\"close\"\n              />\n            </div>\n          </template>\n        </dt-dropdown>\n      </template>\n      <template #content>\n        <slot name=\"content\" />\n      </template>\n    </dt-card>\n  </div>\n</template>\n\n<script>\nimport { DtCard } from '@/components/card';\nimport { DtButton } from '@/components/button';\nimport { DtDropdown } from '@/components/dropdown';\nimport {\n  DtIconKeypad,\n  DtIconDialer,\n  DtIconVolume2,\n  DtIconExpertNode,\n  DtIconBranch,\n  DtIconCallMerge,\n  DtIconChevronsRight,\n  DtIconTransfer,\n  DtIconPhoneHangUp,\n  DtIconMoreVertical,\n} from '@dialpad/dialtone-icons/vue3';\nimport {\n  IVR_NODE_COLOR_MAPPING,\n  IVR_NODE_PROMPT_MENU,\n  IVR_NODE_PROMPT_COLLECT,\n  IVR_NODE_PROMPT_PLAY,\n  IVR_NODE_EXPERT,\n  IVR_NODE_BRANCH,\n  IVR_NODE_GO_TO,\n  IVR_NODE_ASSIGN,\n  IVR_NODE_TRANSFER,\n  IVR_NODE_HANGUP,\n} from './ivr_node_constants';\n\nconst typeToIcon = new Map([\n  [IVR_NODE_PROMPT_MENU, DtIconKeypad],\n  [IVR_NODE_PROMPT_COLLECT, DtIconDialer],\n  [IVR_NODE_PROMPT_PLAY, DtIconVolume2],\n  [IVR_NODE_EXPERT, DtIconExpertNode],\n  [IVR_NODE_BRANCH, DtIconBranch],\n  [IVR_NODE_GO_TO, DtIconCallMerge],\n  [IVR_NODE_ASSIGN, DtIconChevronsRight],\n  [IVR_NODE_TRANSFER, DtIconTransfer],\n  [IVR_NODE_HANGUP, DtIconPhoneHangUp],\n]);\n\nexport default {\n  name: 'DtRecipeIvrNode',\n\n  components: {\n    DtCard,\n    DtButton,\n    DtDropdown,\n    DtIconKeypad,\n    DtIconDialer,\n    DtIconVolume2,\n    DtIconExpertNode,\n    DtIconBranch,\n    DtIconCallMerge,\n    DtIconChevronsRight,\n    DtIconTransfer,\n    DtIconPhoneHangUp,\n    DtIconMoreVertical,\n  },\n\n  props: {\n\n    /**\n     * type of IVR Node.\n     */\n    nodeType: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the node name.\n     */\n\n    nodeLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Selected state of the node\n     */\n    isSelected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Translated aria-label for header menu button\n     */\n    menuButtonAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * DTMF input\n     */\n    dtmfKey: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Add node click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      isOpen: false,\n    };\n  },\n\n  computed: {\n    nodeListeners () {\n      return {\n        click: (e) => this.$emit('click', e),\n      };\n    },\n\n    nodeIcon () {\n      return typeToIcon.get(this.nodeType);\n    },\n\n    headerColor () {\n      const { normal, selected } = IVR_NODE_COLOR_MAPPING[this.nodeType];\n      return this.isSelected ? selected : normal;\n    },\n\n    isGotoNode () {\n      return this.nodeType === IVR_NODE_GO_TO;\n    },\n  },\n\n  methods: {\n    openMenu () {\n      this.isOpen = true;\n    },\n  },\n};\n</script>\n"],"names":["IVR_NODE_PROMPT_MENU","DtIconKeypad","IVR_NODE_PROMPT_COLLECT","DtIconDialer","IVR_NODE_PROMPT_PLAY","DtIconVolume2","IVR_NODE_EXPERT","DtIconExpertNode","IVR_NODE_BRANCH","DtIconBranch","IVR_NODE_GO_TO","DtIconCallMerge","IVR_NODE_ASSIGN","DtIconChevronsRight","IVR_NODE_TRANSFER","DtIconTransfer","IVR_NODE_HANGUP","DtIconPhoneHangUp","DtCard","DtButton","DtDropdown","DtIconMoreVertical","IVR_NODE_COLOR_MAPPING","_createElementBlock","_mergeProps","_toHandlers","_normalizeClass","_createCommentVNode","_renderSlot","_createVNode","_createElementVNode","_createBlock","_resolveDynamicComponent","_toDisplayString","_withModifiers","_withCtx"],"mappings":"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"}
+{"version":3,"file":"ivr_node.vue.cjs","sources":["../../../../recipes/cards/ivr_node/ivr_node.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-recipe-ivr-node',\n      nodeClass,\n    ]\"\n    v-on=\"nodeListeners\"\n  >\n    <div\n      v-if=\"dtmfKey\"\n      data-qa=\"dt-top-connector-dtmf\"\n      class=\"d-recipe-ivr-node__connector d-recipe-ivr-node__connector-dtmf\"\n      :class=\"{ 'd-recipe-ivr-node__connector-dtmf--selected': isSelected }\"\n    >\n      {{ dtmfKey }}\n    </div>\n    <slot\n      v-if=\"$slots.connector\"\n      name=\"connector\"\n    />\n    <div\n      v-if=\"!dtmfKey && !$slots.connector\"\n      data-qa=\"dt-top-connector\"\n      class=\"d-recipe-ivr-node__connector\"\n      :class=\"{ 'd-recipe-ivr-node__connector--selected': isSelected }\"\n    />\n    <dt-card>\n      <template #header>\n        <!-- node label and icon section on left of the header -->\n        <div class=\"d-recipe-ivr-node__header-left\">\n          <dt-button\n            :aria-label=\"nodeType\"\n            importance=\"clear\"\n            kind=\"muted\"\n            data-qa=\"dt-ivr-node-icon\"\n          >\n            <template #icon>\n              <component\n                :is=\"nodeIcon\"\n                size=\"200\"\n                :class=\"['', { 'd-recipe-ivr-node__goto-icon': isGotoNode }]\"\n              />\n            </template>\n          </dt-button>\n          <p\n            class=\"d-recipe-ivr-node__label\"\n            data-qa=\"ivr-node-label\"\n          >\n            {{ nodeLabel }}\n          </p>\n        </div>\n        <!-- node menu for actions like edit, copy, delete -->\n        <dt-dropdown\n          v-model:open=\"isOpen\"\n          placement=\"bottom\"\n        >\n          <template #anchor>\n            <dt-button\n              importance=\"clear\"\n              kind=\"muted\"\n              :aria-label=\"menuButtonAriaLabel\"\n              @click.stop.prevent=\"openMenu\"\n            >\n              <template #icon>\n                <dt-icon-more-vertical size=\"200\" />\n              </template>\n            </dt-button>\n          </template>\n          <template #list=\"{ close }\">\n            <div class=\"d-recipe-ivr-node__dropdown-list\">\n              <slot\n                name=\"menuItems\"\n                :close=\"close\"\n              />\n            </div>\n          </template>\n        </dt-dropdown>\n      </template>\n      <template #content>\n        <slot name=\"content\" />\n      </template>\n    </dt-card>\n  </div>\n</template>\n\n<script>\nimport { DtCard } from '@/components/card';\nimport { DtButton } from '@/components/button';\nimport { DtDropdown } from '@/components/dropdown';\nimport {\n  DtIconKeypad,\n  DtIconDialer,\n  DtIconVolume2,\n  DtIconExpertNode,\n  DtIconBranch,\n  DtIconCallMerge,\n  DtIconChevronsRight,\n  DtIconTransfer,\n  DtIconPhoneHangUp,\n  DtIconMoreVertical,\n} from '@dialpad/dialtone-icons/vue3';\nimport {\n  IVR_NODE_CLASS_MAPPING,\n  IVR_NODE_PROMPT_MENU,\n  IVR_NODE_PROMPT_COLLECT,\n  IVR_NODE_PROMPT_PLAY,\n  IVR_NODE_EXPERT,\n  IVR_NODE_BRANCH,\n  IVR_NODE_GO_TO,\n  IVR_NODE_ASSIGN,\n  IVR_NODE_TRANSFER,\n  IVR_NODE_HANGUP,\n} from './ivr_node_constants';\n\nconst typeToIcon = new Map([\n  [IVR_NODE_PROMPT_MENU, DtIconKeypad],\n  [IVR_NODE_PROMPT_COLLECT, DtIconDialer],\n  [IVR_NODE_PROMPT_PLAY, DtIconVolume2],\n  [IVR_NODE_EXPERT, DtIconExpertNode],\n  [IVR_NODE_BRANCH, DtIconBranch],\n  [IVR_NODE_GO_TO, DtIconCallMerge],\n  [IVR_NODE_ASSIGN, DtIconChevronsRight],\n  [IVR_NODE_TRANSFER, DtIconTransfer],\n  [IVR_NODE_HANGUP, DtIconPhoneHangUp],\n]);\n\nexport default {\n  name: 'DtRecipeIvrNode',\n\n  components: {\n    DtCard,\n    DtButton,\n    DtDropdown,\n    DtIconKeypad,\n    DtIconDialer,\n    DtIconVolume2,\n    DtIconExpertNode,\n    DtIconBranch,\n    DtIconCallMerge,\n    DtIconChevronsRight,\n    DtIconTransfer,\n    DtIconPhoneHangUp,\n    DtIconMoreVertical,\n  },\n\n  props: {\n\n    /**\n     * type of IVR Node.\n     */\n    nodeType: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the node name.\n     */\n\n    nodeLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Selected state of the node\n     */\n    isSelected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Translated aria-label for header menu button\n     */\n    menuButtonAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * DTMF input\n     */\n    dtmfKey: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Add node click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      isOpen: false,\n    };\n  },\n\n  computed: {\n    nodeListeners () {\n      return {\n        click: (e) => this.$emit('click', e),\n      };\n    },\n\n    nodeIcon () {\n      return typeToIcon.get(this.nodeType);\n    },\n\n    nodeClass () {\n      const { normal, selected } = IVR_NODE_CLASS_MAPPING[this.nodeType];\n      return this.isSelected ? selected : normal;\n    },\n\n    isGotoNode () {\n      return this.nodeType === IVR_NODE_GO_TO;\n    },\n  },\n\n  methods: {\n    openMenu () {\n      this.isOpen = true;\n    },\n  },\n};\n</script>\n"],"names":["IVR_NODE_PROMPT_MENU","DtIconKeypad","IVR_NODE_PROMPT_COLLECT","DtIconDialer","IVR_NODE_PROMPT_PLAY","DtIconVolume2","IVR_NODE_EXPERT","DtIconExpertNode","IVR_NODE_BRANCH","DtIconBranch","IVR_NODE_GO_TO","DtIconCallMerge","IVR_NODE_ASSIGN","DtIconChevronsRight","IVR_NODE_TRANSFER","DtIconTransfer","IVR_NODE_HANGUP","DtIconPhoneHangUp","DtCard","DtButton","DtDropdown","DtIconMoreVertical","IVR_NODE_CLASS_MAPPING","_openBlock","_createElementBlock","_mergeProps","_toHandlers","_normalizeClass","_createCommentVNode","_renderSlot","_createVNode","_createElementVNode","_createBlock","_resolveDynamicComponent","_toDisplayString","_withModifiers","_withCtx"],"mappings":"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"}

package/dist/vue3/recipes/cards/ivr_node/ivr_node.vue.js

@@ -1,5 +1,5 @@
 import { DtIconKeypad, DtIconDialer, DtIconVolume2, DtIconExpertNode, DtIconBranch, DtIconCallMerge, DtIconChevronsRight, DtIconTransfer, DtIconPhoneHangUp, DtIconMoreVertical } from "@dialpad/dialtone-icons/vue3";
-import { IVR_NODE_GO_TO, IVR_NODE_PROMPT_MENU, IVR_NODE_PROMPT_COLLECT, IVR_NODE_PROMPT_PLAY, IVR_NODE_EXPERT, IVR_NODE_BRANCH, IVR_NODE_ASSIGN, IVR_NODE_TRANSFER, IVR_NODE_HANGUP, IVR_NODE_COLOR_MAPPING } from "./ivr_node_constants.js";
+import { IVR_NODE_GO_TO, IVR_NODE_PROMPT_MENU, IVR_NODE_PROMPT_COLLECT, IVR_NODE_PROMPT_PLAY, IVR_NODE_EXPERT, IVR_NODE_BRANCH, IVR_NODE_ASSIGN, IVR_NODE_TRANSFER, IVR_NODE_HANGUP, IVR_NODE_CLASS_MAPPING } from "./ivr_node_constants.js";
 import { resolveComponent, openBlock, createElementBlock, mergeProps, toHandlers, normalizeClass, toDisplayString, createCommentVNode, renderSlot, createVNode, withCtx, createElementVNode, createBlock, resolveDynamicComponent, withModifiers } from "vue";
 import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
 import DtCard from "../../../components/card/card.vue.js";
@@ -93,8 +93,8 @@ const _sfc_main = {
     nodeIcon() {
       return typeToIcon.get(this.nodeType);
     },
-    headerColor() {
-      const { normal, selected } = IVR_NODE_COLOR_MAPPING[this.nodeType];
+    nodeClass() {
+      const { normal, selected } = IVR_NODE_CLASS_MAPPING[this.nodeType];
       return this.isSelected ? selected : normal;
     },
     isGotoNode() {
@@ -118,7 +118,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon_more_vertical = resolveComponent("dt-icon-more-vertical");
   const _component_dt_dropdown = resolveComponent("dt-dropdown");
   const _component_dt_card = resolveComponent("dt-card");
-  return openBlock(), createElementBlock("div", mergeProps({ class: "d-recipe-ivr-node" }, toHandlers($options.nodeListeners, true)), [
+  return openBlock(), createElementBlock("div", mergeProps({
+    class: [
+      "d-recipe-ivr-node",
+      $options.nodeClass
+    ]
+  }, toHandlers($options.nodeListeners, true)), [
     $props.dtmfKey ? (openBlock(), createElementBlock("div", {
       key: 0,
       "data-qa": "dt-top-connector-dtmf",
@@ -130,22 +135,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       "data-qa": "dt-top-connector",
       class: normalizeClass(["d-recipe-ivr-node__connector", { "d-recipe-ivr-node__connector--selected": $props.isSelected }])
     }, null, 2)) : createCommentVNode("", true),
-    createVNode(_component_dt_card, {
-      "content-class": "d-bt d-bc-black-300 d-px12 d-pt8 d-pb12",
-      "container-class": [
-        "d-w100p",
-        { "d-ba d-bar8 d-baw4": $props.isSelected },
-        $options.headerColor
-      ],
-      "header-class": [
-        "d-mtn1",
-        "d-bt",
-        "d-btw4",
-        "d-p0",
-        $options.headerColor,
-        { "d-btr4": !$props.isSelected }
-      ]
-    }, {
+    createVNode(_component_dt_card, null, {
       header: withCtx(() => [
         createElementVNode("div", _hoisted_1, [
           createVNode(_component_dt_button, {
@@ -194,7 +184,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         renderSlot(_ctx.$slots, "content")
       ]),
       _: 3
-    }, 8, ["container-class", "header-class"])
+    })
   ], 16);
 }
 const ivr_node = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

package/dist/vue3/recipes/cards/ivr_node/ivr_node.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ivr_node.vue.js","sources":["../../../../recipes/cards/ivr_node/ivr_node.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-recipe-ivr-node\"\n    v-on=\"nodeListeners\"\n  >\n    <div\n      v-if=\"dtmfKey\"\n      data-qa=\"dt-top-connector-dtmf\"\n      class=\"d-recipe-ivr-node__connector d-recipe-ivr-node__connector-dtmf\"\n      :class=\"{ 'd-recipe-ivr-node__connector-dtmf--selected': isSelected }\"\n    >\n      {{ dtmfKey }}\n    </div>\n    <slot\n      v-if=\"$slots.connector\"\n      name=\"connector\"\n    />\n    <div\n      v-if=\"!dtmfKey && !$slots.connector\"\n      data-qa=\"dt-top-connector\"\n      class=\"d-recipe-ivr-node__connector\"\n      :class=\"{ 'd-recipe-ivr-node__connector--selected': isSelected }\"\n    />\n    <dt-card\n      content-class=\"d-bt d-bc-black-300 d-px12 d-pt8 d-pb12\"\n      :container-class=\"[\n        'd-w100p',\n        { 'd-ba d-bar8 d-baw4': isSelected },\n        headerColor,\n      ]\"\n      :header-class=\"[\n        'd-mtn1',\n        'd-bt',\n        'd-btw4',\n        'd-p0',\n        headerColor,\n        { 'd-btr4': !isSelected },\n      ]\"\n    >\n      <template #header>\n        <!-- node label and icon section on left of the header -->\n        <div class=\"d-recipe-ivr-node__header-left\">\n          <dt-button\n            :aria-label=\"nodeType\"\n            importance=\"clear\"\n            kind=\"muted\"\n            data-qa=\"dt-ivr-node-icon\"\n          >\n            <template #icon>\n              <component\n                :is=\"nodeIcon\"\n                size=\"200\"\n                :class=\"['', { 'd-recipe-ivr-node__goto-icon': isGotoNode }]\"\n              />\n            </template>\n          </dt-button>\n          <p\n            class=\"d-recipe-ivr-node__label\"\n            data-qa=\"ivr-node-label\"\n          >\n            {{ nodeLabel }}\n          </p>\n        </div>\n        <!-- node menu for actions like edit, copy, delete -->\n        <dt-dropdown\n          v-model:open=\"isOpen\"\n          placement=\"bottom\"\n        >\n          <template #anchor>\n            <dt-button\n              importance=\"clear\"\n              kind=\"muted\"\n              :aria-label=\"menuButtonAriaLabel\"\n              @click.stop.prevent=\"openMenu\"\n            >\n              <template #icon>\n                <dt-icon-more-vertical size=\"200\" />\n              </template>\n            </dt-button>\n          </template>\n          <template #list=\"{ close }\">\n            <div class=\"d-recipe-ivr-node__dropdown-list\">\n              <slot\n                name=\"menuItems\"\n                :close=\"close\"\n              />\n            </div>\n          </template>\n        </dt-dropdown>\n      </template>\n      <template #content>\n        <slot name=\"content\" />\n      </template>\n    </dt-card>\n  </div>\n</template>\n\n<script>\nimport { DtCard } from '@/components/card';\nimport { DtButton } from '@/components/button';\nimport { DtDropdown } from '@/components/dropdown';\nimport {\n  DtIconKeypad,\n  DtIconDialer,\n  DtIconVolume2,\n  DtIconExpertNode,\n  DtIconBranch,\n  DtIconCallMerge,\n  DtIconChevronsRight,\n  DtIconTransfer,\n  DtIconPhoneHangUp,\n  DtIconMoreVertical,\n} from '@dialpad/dialtone-icons/vue3';\nimport {\n  IVR_NODE_COLOR_MAPPING,\n  IVR_NODE_PROMPT_MENU,\n  IVR_NODE_PROMPT_COLLECT,\n  IVR_NODE_PROMPT_PLAY,\n  IVR_NODE_EXPERT,\n  IVR_NODE_BRANCH,\n  IVR_NODE_GO_TO,\n  IVR_NODE_ASSIGN,\n  IVR_NODE_TRANSFER,\n  IVR_NODE_HANGUP,\n} from './ivr_node_constants';\n\nconst typeToIcon = new Map([\n  [IVR_NODE_PROMPT_MENU, DtIconKeypad],\n  [IVR_NODE_PROMPT_COLLECT, DtIconDialer],\n  [IVR_NODE_PROMPT_PLAY, DtIconVolume2],\n  [IVR_NODE_EXPERT, DtIconExpertNode],\n  [IVR_NODE_BRANCH, DtIconBranch],\n  [IVR_NODE_GO_TO, DtIconCallMerge],\n  [IVR_NODE_ASSIGN, DtIconChevronsRight],\n  [IVR_NODE_TRANSFER, DtIconTransfer],\n  [IVR_NODE_HANGUP, DtIconPhoneHangUp],\n]);\n\nexport default {\n  name: 'DtRecipeIvrNode',\n\n  components: {\n    DtCard,\n    DtButton,\n    DtDropdown,\n    DtIconKeypad,\n    DtIconDialer,\n    DtIconVolume2,\n    DtIconExpertNode,\n    DtIconBranch,\n    DtIconCallMerge,\n    DtIconChevronsRight,\n    DtIconTransfer,\n    DtIconPhoneHangUp,\n    DtIconMoreVertical,\n  },\n\n  props: {\n\n    /**\n     * type of IVR Node.\n     */\n    nodeType: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the node name.\n     */\n\n    nodeLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Selected state of the node\n     */\n    isSelected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Translated aria-label for header menu button\n     */\n    menuButtonAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * DTMF input\n     */\n    dtmfKey: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Add node click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      isOpen: false,\n    };\n  },\n\n  computed: {\n    nodeListeners () {\n      return {\n        click: (e) => this.$emit('click', e),\n      };\n    },\n\n    nodeIcon () {\n      return typeToIcon.get(this.nodeType);\n    },\n\n    headerColor () {\n      const { normal, selected } = IVR_NODE_COLOR_MAPPING[this.nodeType];\n      return this.isSelected ? selected : normal;\n    },\n\n    isGotoNode () {\n      return this.nodeType === IVR_NODE_GO_TO;\n    },\n  },\n\n  methods: {\n    openMenu () {\n      this.isOpen = true;\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_mergeProps","_toHandlers","_normalizeClass","_createCommentVNode","_renderSlot","_createVNode","_createElementVNode","_createBlock","_resolveDynamicComponent","_toDisplayString","_withModifiers","_withCtx"],"mappings":"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"}
+{"version":3,"file":"ivr_node.vue.js","sources":["../../../../recipes/cards/ivr_node/ivr_node.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-recipe-ivr-node',\n      nodeClass,\n    ]\"\n    v-on=\"nodeListeners\"\n  >\n    <div\n      v-if=\"dtmfKey\"\n      data-qa=\"dt-top-connector-dtmf\"\n      class=\"d-recipe-ivr-node__connector d-recipe-ivr-node__connector-dtmf\"\n      :class=\"{ 'd-recipe-ivr-node__connector-dtmf--selected': isSelected }\"\n    >\n      {{ dtmfKey }}\n    </div>\n    <slot\n      v-if=\"$slots.connector\"\n      name=\"connector\"\n    />\n    <div\n      v-if=\"!dtmfKey && !$slots.connector\"\n      data-qa=\"dt-top-connector\"\n      class=\"d-recipe-ivr-node__connector\"\n      :class=\"{ 'd-recipe-ivr-node__connector--selected': isSelected }\"\n    />\n    <dt-card>\n      <template #header>\n        <!-- node label and icon section on left of the header -->\n        <div class=\"d-recipe-ivr-node__header-left\">\n          <dt-button\n            :aria-label=\"nodeType\"\n            importance=\"clear\"\n            kind=\"muted\"\n            data-qa=\"dt-ivr-node-icon\"\n          >\n            <template #icon>\n              <component\n                :is=\"nodeIcon\"\n                size=\"200\"\n                :class=\"['', { 'd-recipe-ivr-node__goto-icon': isGotoNode }]\"\n              />\n            </template>\n          </dt-button>\n          <p\n            class=\"d-recipe-ivr-node__label\"\n            data-qa=\"ivr-node-label\"\n          >\n            {{ nodeLabel }}\n          </p>\n        </div>\n        <!-- node menu for actions like edit, copy, delete -->\n        <dt-dropdown\n          v-model:open=\"isOpen\"\n          placement=\"bottom\"\n        >\n          <template #anchor>\n            <dt-button\n              importance=\"clear\"\n              kind=\"muted\"\n              :aria-label=\"menuButtonAriaLabel\"\n              @click.stop.prevent=\"openMenu\"\n            >\n              <template #icon>\n                <dt-icon-more-vertical size=\"200\" />\n              </template>\n            </dt-button>\n          </template>\n          <template #list=\"{ close }\">\n            <div class=\"d-recipe-ivr-node__dropdown-list\">\n              <slot\n                name=\"menuItems\"\n                :close=\"close\"\n              />\n            </div>\n          </template>\n        </dt-dropdown>\n      </template>\n      <template #content>\n        <slot name=\"content\" />\n      </template>\n    </dt-card>\n  </div>\n</template>\n\n<script>\nimport { DtCard } from '@/components/card';\nimport { DtButton } from '@/components/button';\nimport { DtDropdown } from '@/components/dropdown';\nimport {\n  DtIconKeypad,\n  DtIconDialer,\n  DtIconVolume2,\n  DtIconExpertNode,\n  DtIconBranch,\n  DtIconCallMerge,\n  DtIconChevronsRight,\n  DtIconTransfer,\n  DtIconPhoneHangUp,\n  DtIconMoreVertical,\n} from '@dialpad/dialtone-icons/vue3';\nimport {\n  IVR_NODE_CLASS_MAPPING,\n  IVR_NODE_PROMPT_MENU,\n  IVR_NODE_PROMPT_COLLECT,\n  IVR_NODE_PROMPT_PLAY,\n  IVR_NODE_EXPERT,\n  IVR_NODE_BRANCH,\n  IVR_NODE_GO_TO,\n  IVR_NODE_ASSIGN,\n  IVR_NODE_TRANSFER,\n  IVR_NODE_HANGUP,\n} from './ivr_node_constants';\n\nconst typeToIcon = new Map([\n  [IVR_NODE_PROMPT_MENU, DtIconKeypad],\n  [IVR_NODE_PROMPT_COLLECT, DtIconDialer],\n  [IVR_NODE_PROMPT_PLAY, DtIconVolume2],\n  [IVR_NODE_EXPERT, DtIconExpertNode],\n  [IVR_NODE_BRANCH, DtIconBranch],\n  [IVR_NODE_GO_TO, DtIconCallMerge],\n  [IVR_NODE_ASSIGN, DtIconChevronsRight],\n  [IVR_NODE_TRANSFER, DtIconTransfer],\n  [IVR_NODE_HANGUP, DtIconPhoneHangUp],\n]);\n\nexport default {\n  name: 'DtRecipeIvrNode',\n\n  components: {\n    DtCard,\n    DtButton,\n    DtDropdown,\n    DtIconKeypad,\n    DtIconDialer,\n    DtIconVolume2,\n    DtIconExpertNode,\n    DtIconBranch,\n    DtIconCallMerge,\n    DtIconChevronsRight,\n    DtIconTransfer,\n    DtIconPhoneHangUp,\n    DtIconMoreVertical,\n  },\n\n  props: {\n\n    /**\n     * type of IVR Node.\n     */\n    nodeType: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the node name.\n     */\n\n    nodeLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Selected state of the node\n     */\n    isSelected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Translated aria-label for header menu button\n     */\n    menuButtonAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * DTMF input\n     */\n    dtmfKey: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Add node click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      isOpen: false,\n    };\n  },\n\n  computed: {\n    nodeListeners () {\n      return {\n        click: (e) => this.$emit('click', e),\n      };\n    },\n\n    nodeIcon () {\n      return typeToIcon.get(this.nodeType);\n    },\n\n    nodeClass () {\n      const { normal, selected } = IVR_NODE_CLASS_MAPPING[this.nodeType];\n      return this.isSelected ? selected : normal;\n    },\n\n    isGotoNode () {\n      return this.nodeType === IVR_NODE_GO_TO;\n    },\n  },\n\n  methods: {\n    openMenu () {\n      this.isOpen = true;\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","_toHandlers","_normalizeClass","_createCommentVNode","_renderSlot","_createVNode","_createElementVNode","_createBlock","_resolveDynamicComponent","_toDisplayString","_withModifiers","_withCtx"],"mappings":"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"}

package/dist/vue3/recipes/cards/ivr_node/ivr_node_constants.cjs

@@ -31,34 +31,34 @@ const IVR_NODE_LABELS = {
   [IVR_NODE_HANGUP]: "Hangup",
   [IVR_NODE_ASSIGN]: "Assign"
 };
-const IVR_NODE_COLORS = {
+const IVR_NODE_CLASSES = {
   PROMPT: {
-    normal: "d-bc-blue-200",
-    selected: "d-bc-blue-300"
+    normal: "d-recipe-ivr-node-prompt",
+    selected: "d-recipe-ivr-node-prompt--selected"
   },
   LOGIC: {
-    normal: "d-bc-purple-200",
-    selected: "d-bc-purple-400"
+    normal: "d-recipe-ivr-node-logic",
+    selected: "d-recipe-ivr-node-logic--selected"
   },
   TERMINAL: {
-    normal: "d-bc-red-100",
-    selected: "d-bc-red-200"
+    normal: "d-recipe-ivr-node-terminal",
+    selected: "d-recipe-ivr-node-terminal--selected"
   }
 };
-const IVR_NODE_COLOR_MAPPING = {
-  [IVR_NODE_PROMPT_MENU]: IVR_NODE_COLORS.PROMPT,
-  [IVR_NODE_PROMPT_COLLECT]: IVR_NODE_COLORS.PROMPT,
-  [IVR_NODE_PROMPT_PLAY]: IVR_NODE_COLORS.PROMPT,
-  [IVR_NODE_EXPERT]: IVR_NODE_COLORS.LOGIC,
-  [IVR_NODE_BRANCH]: IVR_NODE_COLORS.LOGIC,
-  [IVR_NODE_GO_TO]: IVR_NODE_COLORS.LOGIC,
-  [IVR_NODE_ASSIGN]: IVR_NODE_COLORS.LOGIC,
-  [IVR_NODE_TRANSFER]: IVR_NODE_COLORS.TERMINAL,
-  [IVR_NODE_HANGUP]: IVR_NODE_COLORS.TERMINAL
+const IVR_NODE_CLASS_MAPPING = {
+  [IVR_NODE_PROMPT_MENU]: IVR_NODE_CLASSES.PROMPT,
+  [IVR_NODE_PROMPT_COLLECT]: IVR_NODE_CLASSES.PROMPT,
+  [IVR_NODE_PROMPT_PLAY]: IVR_NODE_CLASSES.PROMPT,
+  [IVR_NODE_EXPERT]: IVR_NODE_CLASSES.LOGIC,
+  [IVR_NODE_BRANCH]: IVR_NODE_CLASSES.LOGIC,
+  [IVR_NODE_GO_TO]: IVR_NODE_CLASSES.LOGIC,
+  [IVR_NODE_ASSIGN]: IVR_NODE_CLASSES.LOGIC,
+  [IVR_NODE_TRANSFER]: IVR_NODE_CLASSES.TERMINAL,
+  [IVR_NODE_HANGUP]: IVR_NODE_CLASSES.TERMINAL
 };
 exports.IVR_NODE_ASSIGN = IVR_NODE_ASSIGN;
 exports.IVR_NODE_BRANCH = IVR_NODE_BRANCH;
-exports.IVR_NODE_COLOR_MAPPING = IVR_NODE_COLOR_MAPPING;
+exports.IVR_NODE_CLASS_MAPPING = IVR_NODE_CLASS_MAPPING;
 exports.IVR_NODE_EXPERT = IVR_NODE_EXPERT;
 exports.IVR_NODE_GO_TO = IVR_NODE_GO_TO;
 exports.IVR_NODE_HANGUP = IVR_NODE_HANGUP;

package/dist/vue3/recipes/cards/ivr_node/ivr_node_constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ivr_node_constants.cjs","sources":["../../../../recipes/cards/ivr_node/ivr_node_constants.js"],"sourcesContent":["export const IVR_NODE_PROMPT_MENU = 'promptmenu';\nexport const IVR_NODE_PROMPT_COLLECT = 'promptcollect';\nexport const IVR_NODE_PROMPT_PLAY = 'promptplay';\nexport const IVR_NODE_EXPERT = 'gotoexpert';\nexport const IVR_NODE_GO_TO = 'goto';\nexport const IVR_NODE_BRANCH = 'branch';\nexport const IVR_NODE_TRANSFER = 'transfer';\nexport const IVR_NODE_HANGUP = 'hangup';\nexport const IVR_NODE_ASSIGN = 'assign';\n\nexport const IVR_NODE_ICON_TYPES = {\n  [IVR_NODE_PROMPT_MENU]: 'keypad',\n  [IVR_NODE_PROMPT_COLLECT]: 'dialer',\n  [IVR_NODE_PROMPT_PLAY]: 'volume-2',\n  [IVR_NODE_EXPERT]: 'expert-node',\n  [IVR_NODE_BRANCH]: 'branch',\n  [IVR_NODE_GO_TO]: 'call-merge',\n  [IVR_NODE_ASSIGN]: 'chevrons-right',\n  [IVR_NODE_TRANSFER]: 'transfer',\n  [IVR_NODE_HANGUP]: 'phone-hang-up',\n};\n\nexport const IVR_NODE_LABELS = {\n  [IVR_NODE_PROMPT_MENU]: 'Menu',\n  [IVR_NODE_PROMPT_COLLECT]: 'Collect',\n  [IVR_NODE_PROMPT_PLAY]: 'Play',\n  [IVR_NODE_EXPERT]: 'Expert',\n  [IVR_NODE_BRANCH]: 'Branch',\n  [IVR_NODE_GO_TO]: 'Go-to',\n  [IVR_NODE_TRANSFER]: 'Transfer',\n  [IVR_NODE_HANGUP]: 'Hangup',\n  [IVR_NODE_ASSIGN]: 'Assign',\n};\n\nconst IVR_NODE_COLORS = {\n  PROMPT: {\n    normal: 'd-bc-blue-200',\n    selected: 'd-bc-blue-300',\n  },\n  LOGIC: {\n    normal: 'd-bc-purple-200',\n    selected: 'd-bc-purple-400',\n  },\n  TERMINAL: {\n    normal: 'd-bc-red-100',\n    selected: 'd-bc-red-200',\n  },\n};\n\nexport const IVR_NODE_COLOR_MAPPING = {\n  [IVR_NODE_PROMPT_MENU]: IVR_NODE_COLORS.PROMPT,\n  [IVR_NODE_PROMPT_COLLECT]: IVR_NODE_COLORS.PROMPT,\n  [IVR_NODE_PROMPT_PLAY]: IVR_NODE_COLORS.PROMPT,\n  [IVR_NODE_EXPERT]: IVR_NODE_COLORS.LOGIC,\n  [IVR_NODE_BRANCH]: IVR_NODE_COLORS.LOGIC,\n  [IVR_NODE_GO_TO]: IVR_NODE_COLORS.LOGIC,\n  [IVR_NODE_ASSIGN]: IVR_NODE_COLORS.LOGIC,\n  [IVR_NODE_TRANSFER]: IVR_NODE_COLORS.TERMINAL,\n  [IVR_NODE_HANGUP]: IVR_NODE_COLORS.TERMINAL,\n};\n"],"names":[],"mappings":";;AAAY,MAAC,uBAAuB;AACxB,MAAC,0BAA0B;AAC3B,MAAC,uBAAuB;AACxB,MAAC,kBAAkB;AACnB,MAAC,iBAAiB;AAClB,MAAC,kBAAkB;AACnB,MAAC,oBAAoB;AACrB,MAAC,kBAAkB;AACnB,MAAC,kBAAkB;AAEnB,MAAC,sBAAsB;AAAA,EACjC,CAAC,oBAAoB,GAAG;AAAA,EACxB,CAAC,uBAAuB,GAAG;AAAA,EAC3B,CAAC,oBAAoB,GAAG;AAAA,EACxB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,cAAc,GAAG;AAAA,EAClB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,iBAAiB,GAAG;AAAA,EACrB,CAAC,eAAe,GAAG;AACrB;AAEY,MAAC,kBAAkB;AAAA,EAC7B,CAAC,oBAAoB,GAAG;AAAA,EACxB,CAAC,uBAAuB,GAAG;AAAA,EAC3B,CAAC,oBAAoB,GAAG;AAAA,EACxB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,cAAc,GAAG;AAAA,EAClB,CAAC,iBAAiB,GAAG;AAAA,EACrB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,eAAe,GAAG;AACrB;AAEA,MAAM,kBAAkB;AAAA,EACtB,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,EACX;AAAA,EACD,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,UAAU;AAAA,EACX;AAAA,EACD,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,EACX;AACH;AAEY,MAAC,yBAAyB;AAAA,EACpC,CAAC,oBAAoB,GAAG,gBAAgB;AAAA,EACxC,CAAC,uBAAuB,GAAG,gBAAgB;AAAA,EAC3C,CAAC,oBAAoB,GAAG,gBAAgB;AAAA,EACxC,CAAC,eAAe,GAAG,gBAAgB;AAAA,EACnC,CAAC,eAAe,GAAG,gBAAgB;AAAA,EACnC,CAAC,cAAc,GAAG,gBAAgB;AAAA,EAClC,CAAC,eAAe,GAAG,gBAAgB;AAAA,EACnC,CAAC,iBAAiB,GAAG,gBAAgB;AAAA,EACrC,CAAC,eAAe,GAAG,gBAAgB;AACrC;;;;;;;;;;;;;"}
+{"version":3,"file":"ivr_node_constants.cjs","sources":["../../../../recipes/cards/ivr_node/ivr_node_constants.js"],"sourcesContent":["export const IVR_NODE_PROMPT_MENU = 'promptmenu';\nexport const IVR_NODE_PROMPT_COLLECT = 'promptcollect';\nexport const IVR_NODE_PROMPT_PLAY = 'promptplay';\nexport const IVR_NODE_EXPERT = 'gotoexpert';\nexport const IVR_NODE_GO_TO = 'goto';\nexport const IVR_NODE_BRANCH = 'branch';\nexport const IVR_NODE_TRANSFER = 'transfer';\nexport const IVR_NODE_HANGUP = 'hangup';\nexport const IVR_NODE_ASSIGN = 'assign';\n\nexport const IVR_NODE_ICON_TYPES = {\n  [IVR_NODE_PROMPT_MENU]: 'keypad',\n  [IVR_NODE_PROMPT_COLLECT]: 'dialer',\n  [IVR_NODE_PROMPT_PLAY]: 'volume-2',\n  [IVR_NODE_EXPERT]: 'expert-node',\n  [IVR_NODE_BRANCH]: 'branch',\n  [IVR_NODE_GO_TO]: 'call-merge',\n  [IVR_NODE_ASSIGN]: 'chevrons-right',\n  [IVR_NODE_TRANSFER]: 'transfer',\n  [IVR_NODE_HANGUP]: 'phone-hang-up',\n};\n\nexport const IVR_NODE_LABELS = {\n  [IVR_NODE_PROMPT_MENU]: 'Menu',\n  [IVR_NODE_PROMPT_COLLECT]: 'Collect',\n  [IVR_NODE_PROMPT_PLAY]: 'Play',\n  [IVR_NODE_EXPERT]: 'Expert',\n  [IVR_NODE_BRANCH]: 'Branch',\n  [IVR_NODE_GO_TO]: 'Go-to',\n  [IVR_NODE_TRANSFER]: 'Transfer',\n  [IVR_NODE_HANGUP]: 'Hangup',\n  [IVR_NODE_ASSIGN]: 'Assign',\n};\n\nconst IVR_NODE_CLASSES = {\n  PROMPT: {\n    normal: 'd-recipe-ivr-node-prompt',\n    selected: 'd-recipe-ivr-node-prompt--selected',\n  },\n  LOGIC: {\n    normal: 'd-recipe-ivr-node-logic',\n    selected: 'd-recipe-ivr-node-logic--selected',\n  },\n  TERMINAL: {\n    normal: 'd-recipe-ivr-node-terminal',\n    selected: 'd-recipe-ivr-node-terminal--selected',\n  },\n};\n\nexport const IVR_NODE_CLASS_MAPPING = {\n  [IVR_NODE_PROMPT_MENU]: IVR_NODE_CLASSES.PROMPT,\n  [IVR_NODE_PROMPT_COLLECT]: IVR_NODE_CLASSES.PROMPT,\n  [IVR_NODE_PROMPT_PLAY]: IVR_NODE_CLASSES.PROMPT,\n  [IVR_NODE_EXPERT]: IVR_NODE_CLASSES.LOGIC,\n  [IVR_NODE_BRANCH]: IVR_NODE_CLASSES.LOGIC,\n  [IVR_NODE_GO_TO]: IVR_NODE_CLASSES.LOGIC,\n  [IVR_NODE_ASSIGN]: IVR_NODE_CLASSES.LOGIC,\n  [IVR_NODE_TRANSFER]: IVR_NODE_CLASSES.TERMINAL,\n  [IVR_NODE_HANGUP]: IVR_NODE_CLASSES.TERMINAL,\n};\n"],"names":[],"mappings":";;AAAY,MAAC,uBAAuB;AACxB,MAAC,0BAA0B;AAC3B,MAAC,uBAAuB;AACxB,MAAC,kBAAkB;AACnB,MAAC,iBAAiB;AAClB,MAAC,kBAAkB;AACnB,MAAC,oBAAoB;AACrB,MAAC,kBAAkB;AACnB,MAAC,kBAAkB;AAEnB,MAAC,sBAAsB;AAAA,EACjC,CAAC,oBAAoB,GAAG;AAAA,EACxB,CAAC,uBAAuB,GAAG;AAAA,EAC3B,CAAC,oBAAoB,GAAG;AAAA,EACxB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,cAAc,GAAG;AAAA,EAClB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,iBAAiB,GAAG;AAAA,EACrB,CAAC,eAAe,GAAG;AACrB;AAEY,MAAC,kBAAkB;AAAA,EAC7B,CAAC,oBAAoB,GAAG;AAAA,EACxB,CAAC,uBAAuB,GAAG;AAAA,EAC3B,CAAC,oBAAoB,GAAG;AAAA,EACxB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,cAAc,GAAG;AAAA,EAClB,CAAC,iBAAiB,GAAG;AAAA,EACrB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,eAAe,GAAG;AACrB;AAEA,MAAM,mBAAmB;AAAA,EACvB,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,EACX;AAAA,EACD,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,UAAU;AAAA,EACX;AAAA,EACD,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,EACX;AACH;AAEY,MAAC,yBAAyB;AAAA,EACpC,CAAC,oBAAoB,GAAG,iBAAiB;AAAA,EACzC,CAAC,uBAAuB,GAAG,iBAAiB;AAAA,EAC5C,CAAC,oBAAoB,GAAG,iBAAiB;AAAA,EACzC,CAAC,eAAe,GAAG,iBAAiB;AAAA,EACpC,CAAC,eAAe,GAAG,iBAAiB;AAAA,EACpC,CAAC,cAAc,GAAG,iBAAiB;AAAA,EACnC,CAAC,eAAe,GAAG,iBAAiB;AAAA,EACpC,CAAC,iBAAiB,GAAG,iBAAiB;AAAA,EACtC,CAAC,eAAe,GAAG,iBAAiB;AACtC;;;;;;;;;;;;;"}

package/dist/vue3/recipes/cards/ivr_node/ivr_node_constants.js

@@ -29,35 +29,35 @@ const IVR_NODE_LABELS = {
   [IVR_NODE_HANGUP]: "Hangup",
   [IVR_NODE_ASSIGN]: "Assign"
 };
-const IVR_NODE_COLORS = {
+const IVR_NODE_CLASSES = {
   PROMPT: {
-    normal: "d-bc-blue-200",
-    selected: "d-bc-blue-300"
+    normal: "d-recipe-ivr-node-prompt",
+    selected: "d-recipe-ivr-node-prompt--selected"
   },
   LOGIC: {
-    normal: "d-bc-purple-200",
-    selected: "d-bc-purple-400"
+    normal: "d-recipe-ivr-node-logic",
+    selected: "d-recipe-ivr-node-logic--selected"
   },
   TERMINAL: {
-    normal: "d-bc-red-100",
-    selected: "d-bc-red-200"
+    normal: "d-recipe-ivr-node-terminal",
+    selected: "d-recipe-ivr-node-terminal--selected"
   }
 };
-const IVR_NODE_COLOR_MAPPING = {
-  [IVR_NODE_PROMPT_MENU]: IVR_NODE_COLORS.PROMPT,
-  [IVR_NODE_PROMPT_COLLECT]: IVR_NODE_COLORS.PROMPT,
-  [IVR_NODE_PROMPT_PLAY]: IVR_NODE_COLORS.PROMPT,
-  [IVR_NODE_EXPERT]: IVR_NODE_COLORS.LOGIC,
-  [IVR_NODE_BRANCH]: IVR_NODE_COLORS.LOGIC,
-  [IVR_NODE_GO_TO]: IVR_NODE_COLORS.LOGIC,
-  [IVR_NODE_ASSIGN]: IVR_NODE_COLORS.LOGIC,
-  [IVR_NODE_TRANSFER]: IVR_NODE_COLORS.TERMINAL,
-  [IVR_NODE_HANGUP]: IVR_NODE_COLORS.TERMINAL
+const IVR_NODE_CLASS_MAPPING = {
+  [IVR_NODE_PROMPT_MENU]: IVR_NODE_CLASSES.PROMPT,
+  [IVR_NODE_PROMPT_COLLECT]: IVR_NODE_CLASSES.PROMPT,
+  [IVR_NODE_PROMPT_PLAY]: IVR_NODE_CLASSES.PROMPT,
+  [IVR_NODE_EXPERT]: IVR_NODE_CLASSES.LOGIC,
+  [IVR_NODE_BRANCH]: IVR_NODE_CLASSES.LOGIC,
+  [IVR_NODE_GO_TO]: IVR_NODE_CLASSES.LOGIC,
+  [IVR_NODE_ASSIGN]: IVR_NODE_CLASSES.LOGIC,
+  [IVR_NODE_TRANSFER]: IVR_NODE_CLASSES.TERMINAL,
+  [IVR_NODE_HANGUP]: IVR_NODE_CLASSES.TERMINAL
 };
 export {
   IVR_NODE_ASSIGN,
   IVR_NODE_BRANCH,
-  IVR_NODE_COLOR_MAPPING,
+  IVR_NODE_CLASS_MAPPING,
   IVR_NODE_EXPERT,
   IVR_NODE_GO_TO,
   IVR_NODE_HANGUP,

package/dist/vue3/recipes/cards/ivr_node/ivr_node_constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"ivr_node_constants.js","sources":["../../../../recipes/cards/ivr_node/ivr_node_constants.js"],"sourcesContent":["export const IVR_NODE_PROMPT_MENU = 'promptmenu';\nexport const IVR_NODE_PROMPT_COLLECT = 'promptcollect';\nexport const IVR_NODE_PROMPT_PLAY = 'promptplay';\nexport const IVR_NODE_EXPERT = 'gotoexpert';\nexport const IVR_NODE_GO_TO = 'goto';\nexport const IVR_NODE_BRANCH = 'branch';\nexport const IVR_NODE_TRANSFER = 'transfer';\nexport const IVR_NODE_HANGUP = 'hangup';\nexport const IVR_NODE_ASSIGN = 'assign';\n\nexport const IVR_NODE_ICON_TYPES = {\n  [IVR_NODE_PROMPT_MENU]: 'keypad',\n  [IVR_NODE_PROMPT_COLLECT]: 'dialer',\n  [IVR_NODE_PROMPT_PLAY]: 'volume-2',\n  [IVR_NODE_EXPERT]: 'expert-node',\n  [IVR_NODE_BRANCH]: 'branch',\n  [IVR_NODE_GO_TO]: 'call-merge',\n  [IVR_NODE_ASSIGN]: 'chevrons-right',\n  [IVR_NODE_TRANSFER]: 'transfer',\n  [IVR_NODE_HANGUP]: 'phone-hang-up',\n};\n\nexport const IVR_NODE_LABELS = {\n  [IVR_NODE_PROMPT_MENU]: 'Menu',\n  [IVR_NODE_PROMPT_COLLECT]: 'Collect',\n  [IVR_NODE_PROMPT_PLAY]: 'Play',\n  [IVR_NODE_EXPERT]: 'Expert',\n  [IVR_NODE_BRANCH]: 'Branch',\n  [IVR_NODE_GO_TO]: 'Go-to',\n  [IVR_NODE_TRANSFER]: 'Transfer',\n  [IVR_NODE_HANGUP]: 'Hangup',\n  [IVR_NODE_ASSIGN]: 'Assign',\n};\n\nconst IVR_NODE_COLORS = {\n  PROMPT: {\n    normal: 'd-bc-blue-200',\n    selected: 'd-bc-blue-300',\n  },\n  LOGIC: {\n    normal: 'd-bc-purple-200',\n    selected: 'd-bc-purple-400',\n  },\n  TERMINAL: {\n    normal: 'd-bc-red-100',\n    selected: 'd-bc-red-200',\n  },\n};\n\nexport const IVR_NODE_COLOR_MAPPING = {\n  [IVR_NODE_PROMPT_MENU]: IVR_NODE_COLORS.PROMPT,\n  [IVR_NODE_PROMPT_COLLECT]: IVR_NODE_COLORS.PROMPT,\n  [IVR_NODE_PROMPT_PLAY]: IVR_NODE_COLORS.PROMPT,\n  [IVR_NODE_EXPERT]: IVR_NODE_COLORS.LOGIC,\n  [IVR_NODE_BRANCH]: IVR_NODE_COLORS.LOGIC,\n  [IVR_NODE_GO_TO]: IVR_NODE_COLORS.LOGIC,\n  [IVR_NODE_ASSIGN]: IVR_NODE_COLORS.LOGIC,\n  [IVR_NODE_TRANSFER]: IVR_NODE_COLORS.TERMINAL,\n  [IVR_NODE_HANGUP]: IVR_NODE_COLORS.TERMINAL,\n};\n"],"names":[],"mappings":"AAAY,MAAC,uBAAuB;AACxB,MAAC,0BAA0B;AAC3B,MAAC,uBAAuB;AACxB,MAAC,kBAAkB;AACnB,MAAC,iBAAiB;AAClB,MAAC,kBAAkB;AACnB,MAAC,oBAAoB;AACrB,MAAC,kBAAkB;AACnB,MAAC,kBAAkB;AAEnB,MAAC,sBAAsB;AAAA,EACjC,CAAC,oBAAoB,GAAG;AAAA,EACxB,CAAC,uBAAuB,GAAG;AAAA,EAC3B,CAAC,oBAAoB,GAAG;AAAA,EACxB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,cAAc,GAAG;AAAA,EAClB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,iBAAiB,GAAG;AAAA,EACrB,CAAC,eAAe,GAAG;AACrB;AAEY,MAAC,kBAAkB;AAAA,EAC7B,CAAC,oBAAoB,GAAG;AAAA,EACxB,CAAC,uBAAuB,GAAG;AAAA,EAC3B,CAAC,oBAAoB,GAAG;AAAA,EACxB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,cAAc,GAAG;AAAA,EAClB,CAAC,iBAAiB,GAAG;AAAA,EACrB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,eAAe,GAAG;AACrB;AAEA,MAAM,kBAAkB;AAAA,EACtB,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,EACX;AAAA,EACD,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,UAAU;AAAA,EACX;AAAA,EACD,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,EACX;AACH;AAEY,MAAC,yBAAyB;AAAA,EACpC,CAAC,oBAAoB,GAAG,gBAAgB;AAAA,EACxC,CAAC,uBAAuB,GAAG,gBAAgB;AAAA,EAC3C,CAAC,oBAAoB,GAAG,gBAAgB;AAAA,EACxC,CAAC,eAAe,GAAG,gBAAgB;AAAA,EACnC,CAAC,eAAe,GAAG,gBAAgB;AAAA,EACnC,CAAC,cAAc,GAAG,gBAAgB;AAAA,EAClC,CAAC,eAAe,GAAG,gBAAgB;AAAA,EACnC,CAAC,iBAAiB,GAAG,gBAAgB;AAAA,EACrC,CAAC,eAAe,GAAG,gBAAgB;AACrC;"}
+{"version":3,"file":"ivr_node_constants.js","sources":["../../../../recipes/cards/ivr_node/ivr_node_constants.js"],"sourcesContent":["export const IVR_NODE_PROMPT_MENU = 'promptmenu';\nexport const IVR_NODE_PROMPT_COLLECT = 'promptcollect';\nexport const IVR_NODE_PROMPT_PLAY = 'promptplay';\nexport const IVR_NODE_EXPERT = 'gotoexpert';\nexport const IVR_NODE_GO_TO = 'goto';\nexport const IVR_NODE_BRANCH = 'branch';\nexport const IVR_NODE_TRANSFER = 'transfer';\nexport const IVR_NODE_HANGUP = 'hangup';\nexport const IVR_NODE_ASSIGN = 'assign';\n\nexport const IVR_NODE_ICON_TYPES = {\n  [IVR_NODE_PROMPT_MENU]: 'keypad',\n  [IVR_NODE_PROMPT_COLLECT]: 'dialer',\n  [IVR_NODE_PROMPT_PLAY]: 'volume-2',\n  [IVR_NODE_EXPERT]: 'expert-node',\n  [IVR_NODE_BRANCH]: 'branch',\n  [IVR_NODE_GO_TO]: 'call-merge',\n  [IVR_NODE_ASSIGN]: 'chevrons-right',\n  [IVR_NODE_TRANSFER]: 'transfer',\n  [IVR_NODE_HANGUP]: 'phone-hang-up',\n};\n\nexport const IVR_NODE_LABELS = {\n  [IVR_NODE_PROMPT_MENU]: 'Menu',\n  [IVR_NODE_PROMPT_COLLECT]: 'Collect',\n  [IVR_NODE_PROMPT_PLAY]: 'Play',\n  [IVR_NODE_EXPERT]: 'Expert',\n  [IVR_NODE_BRANCH]: 'Branch',\n  [IVR_NODE_GO_TO]: 'Go-to',\n  [IVR_NODE_TRANSFER]: 'Transfer',\n  [IVR_NODE_HANGUP]: 'Hangup',\n  [IVR_NODE_ASSIGN]: 'Assign',\n};\n\nconst IVR_NODE_CLASSES = {\n  PROMPT: {\n    normal: 'd-recipe-ivr-node-prompt',\n    selected: 'd-recipe-ivr-node-prompt--selected',\n  },\n  LOGIC: {\n    normal: 'd-recipe-ivr-node-logic',\n    selected: 'd-recipe-ivr-node-logic--selected',\n  },\n  TERMINAL: {\n    normal: 'd-recipe-ivr-node-terminal',\n    selected: 'd-recipe-ivr-node-terminal--selected',\n  },\n};\n\nexport const IVR_NODE_CLASS_MAPPING = {\n  [IVR_NODE_PROMPT_MENU]: IVR_NODE_CLASSES.PROMPT,\n  [IVR_NODE_PROMPT_COLLECT]: IVR_NODE_CLASSES.PROMPT,\n  [IVR_NODE_PROMPT_PLAY]: IVR_NODE_CLASSES.PROMPT,\n  [IVR_NODE_EXPERT]: IVR_NODE_CLASSES.LOGIC,\n  [IVR_NODE_BRANCH]: IVR_NODE_CLASSES.LOGIC,\n  [IVR_NODE_GO_TO]: IVR_NODE_CLASSES.LOGIC,\n  [IVR_NODE_ASSIGN]: IVR_NODE_CLASSES.LOGIC,\n  [IVR_NODE_TRANSFER]: IVR_NODE_CLASSES.TERMINAL,\n  [IVR_NODE_HANGUP]: IVR_NODE_CLASSES.TERMINAL,\n};\n"],"names":[],"mappings":"AAAY,MAAC,uBAAuB;AACxB,MAAC,0BAA0B;AAC3B,MAAC,uBAAuB;AACxB,MAAC,kBAAkB;AACnB,MAAC,iBAAiB;AAClB,MAAC,kBAAkB;AACnB,MAAC,oBAAoB;AACrB,MAAC,kBAAkB;AACnB,MAAC,kBAAkB;AAEnB,MAAC,sBAAsB;AAAA,EACjC,CAAC,oBAAoB,GAAG;AAAA,EACxB,CAAC,uBAAuB,GAAG;AAAA,EAC3B,CAAC,oBAAoB,GAAG;AAAA,EACxB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,cAAc,GAAG;AAAA,EAClB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,iBAAiB,GAAG;AAAA,EACrB,CAAC,eAAe,GAAG;AACrB;AAEY,MAAC,kBAAkB;AAAA,EAC7B,CAAC,oBAAoB,GAAG;AAAA,EACxB,CAAC,uBAAuB,GAAG;AAAA,EAC3B,CAAC,oBAAoB,GAAG;AAAA,EACxB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,cAAc,GAAG;AAAA,EAClB,CAAC,iBAAiB,GAAG;AAAA,EACrB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,eAAe,GAAG;AACrB;AAEA,MAAM,mBAAmB;AAAA,EACvB,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,EACX;AAAA,EACD,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,UAAU;AAAA,EACX;AAAA,EACD,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,EACX;AACH;AAEY,MAAC,yBAAyB;AAAA,EACpC,CAAC,oBAAoB,GAAG,iBAAiB;AAAA,EACzC,CAAC,uBAAuB,GAAG,iBAAiB;AAAA,EAC5C,CAAC,oBAAoB,GAAG,iBAAiB;AAAA,EACzC,CAAC,eAAe,GAAG,iBAAiB;AAAA,EACpC,CAAC,eAAe,GAAG,iBAAiB;AAAA,EACpC,CAAC,cAAc,GAAG,iBAAiB;AAAA,EACnC,CAAC,eAAe,GAAG,iBAAiB;AAAA,EACpC,CAAC,iBAAiB,GAAG,iBAAiB;AAAA,EACtC,CAAC,eAAe,GAAG,iBAAiB;AACtC;"}

package/dist/vue3/recipes/chips/grouped_chip/grouped_chip.vue.cjs

@@ -16,7 +16,7 @@ const _sfc_main = {
   }
 };
 const _hoisted_1 = {
-  "data-qa": "grouped-chip",
+  "data-qa": "dt-recipe-grouped-chip",
   class: "d-recipe-grouped-chip"
 };
 const _hoisted_2 = {
@@ -41,7 +41,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     vue.createVNode(_component_dt_chip, {
       "hide-close": true,
       interactive: false,
-      "content-class": "d-fs100",
       size: "xs",
       "grouped-chip": true,
       class: "d-recipe-grouped-chip__content d-recipe-grouped-chip__content-left"
@@ -66,7 +65,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     vue.createVNode(_component_dt_chip, {
       "hide-close": true,
       interactive: false,
-      "content-class": "d-fs100",
       size: "xs",
       "grouped-chip": true,
       class: "d-recipe-grouped-chip__content d-recipe-grouped-chip__content-right"

package/dist/vue3/recipes/chips/grouped_chip/grouped_chip.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"grouped_chip.vue.cjs","sources":["../../../../recipes/chips/grouped_chip/grouped_chip.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"grouped-chip\"\n    class=\"d-recipe-grouped-chip\"\n  >\n    <dt-chip\n      :hide-close=\"true\"\n      :interactive=\"false\"\n      content-class=\"d-fs100\"\n      size=\"xs\"\n      :grouped-chip=\"true\"\n      class=\"d-recipe-grouped-chip__content d-recipe-grouped-chip__content-left\"\n    >\n      <template\n        v-if=\"hasSlotContent($slots.leftIcon)\"\n        #icon\n      >\n        <!-- @slot Slot for left chip icon information -->\n        <div\n          v-if=\"hasSlotContent($slots.leftIcon)\"\n          data-qa=\"left-grouped-chip-icon\"\n        >\n          <slot name=\"leftIcon\" />\n        </div>\n      </template>\n      <template #default>\n        <div\n          v-if=\"hasSlotContent($slots.leftContent)\"\n          data-qa=\"left-grouped-chip-content\"\n        >\n          <!-- @slot Slot for left chip content information -->\n          <slot name=\"leftContent\" />\n        </div>\n      </template>\n    </dt-chip>\n\n    <!-- Right side split chip -->\n    <dt-chip\n      :hide-close=\"true\"\n      :interactive=\"false\"\n      content-class=\"d-fs100\"\n      size=\"xs\"\n      :grouped-chip=\"true\"\n      class=\"d-recipe-grouped-chip__content d-recipe-grouped-chip__content-right\"\n    >\n      <template #icon>\n        <div\n          v-if=\"hasSlotContent($slots.rightIcon)\"\n          data-qa=\"right-grouped-chip-icon\"\n        >\n          <!-- @slot Slot for right chip content information -->\n          <slot name=\"rightIcon\" />\n        </div>\n      </template>\n      <template #default>\n        <div\n          v-if=\"hasSlotContent($slots.rightContent)\"\n          data-qa=\"right-grouped-chip-content\"\n        >\n          <!-- @slot Slot for right chip content information -->\n          <slot name=\"rightContent\" />\n        </div>\n      </template>\n    </dt-chip>\n  </div>\n</template>\n\n<script>\nimport { DtChip } from '@/components/chip';\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeGroupedChip',\n\n  components: {\n    DtChip,\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n"],"names":["DtChip","hasSlotContent","_openBlock","_createElementBlock","_createVNode","_createSlots","_renderSlot","_createCommentVNode","_withCtx"],"mappings":";;;;;;AAuEA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,QAAAA,KAAM;AAAA,EACP;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,gBAAAC,aAAc;AAAA;EAEjB;AACH;;EAjFI,WAAQ;AAAA,EACR,OAAM;;;EAHV,KAAA;AAAA,EAoBU,WAAQ;;;EApBlB,KAAA;AAAA,EA4BU,WAAQ;;;EA5BlB,KAAA;AAAA,EAgDU,WAAQ;;;EAhDlB,KAAA;AAAA,EAyDU,WAAQ;;;;AAxDhB,SAAAC,cAAA,GAAAC,uBA+DM,OA/DN,YA+DM;AAAA,IA3DJC,IAAAA,YA6BU,oBAAA;AAAA,MA5BP,cAAY;AAAA,MACZ,aAAa;AAAA,MACd,iBAAc;AAAA,MACd,MAAK;AAAA,MACJ,gBAAc;AAAA,MACf,OAAM;AAAA,IAXZ,GAAAC,gBAAA;AAAA,MAyBiB,qBACT,MAMM;AAAA,QALE,MAAc,eAAC,KAAM,OAAC,WAAW,KADzCH,IAAAA,aAAAC,IAAAA,mBAMM,OANN,YAMM;AAAA,UADJG,eAA2B,KAAA,QAAA,aAAA;AAAA,cA/BrCC,IAAA,mBAAA,IAAA,IAAA;AAAA;MAAA,GAAA;AAAA;MAcc,MAAc,eAAC,KAAM,OAAC,QAAQ;QAd5C,MAeS;AAAA,QAfT,IAAAC,IAAA,QAkBQ,MAKM;AAAA,UAJE,MAAc,eAAC,KAAM,OAAC,QAAQ,KADtCN,IAAAA,aAAAC,IAAAA,mBAKM,OALN,YAKM;AAAA,YADJG,eAAwB,KAAA,QAAA,UAAA;AAAA,gBAtBlCC,IAAA,mBAAA,IAAA,IAAA;AAAA;QAAA,KAAA;AAAA,UAAA;AAAA;IAqCIH,IAAAA,YA0BU,oBAAA;AAAA,MAzBP,cAAY;AAAA,MACZ,aAAa;AAAA,MACd,iBAAc;AAAA,MACd,MAAK;AAAA,MACJ,gBAAc;AAAA,MACf,OAAM;AAAA;MAEK,kBACT,MAMM;AAAA,QALE,MAAc,eAAC,KAAM,OAAC,SAAS,KADvCF,IAAAA,aAAAC,IAAAA,mBAMM,OANN,YAMM;AAAA,UADJG,eAAyB,KAAA,QAAA,WAAA;AAAA,cAnDnCC,IAAA,mBAAA,IAAA,IAAA;AAAA;MAsDiB,qBACT,MAMM;AAAA,QALE,MAAc,eAAC,KAAM,OAAC,YAAY,KAD1CL,IAAAA,aAAAC,IAAAA,mBAMM,OANN,YAMM;AAAA,UADJG,eAA4B,KAAA,QAAA,cAAA;AAAA,cA5DtCC,IAAA,mBAAA,IAAA,IAAA;AAAA;MAAA,GAAA;AAAA;;;;;"}
+{"version":3,"file":"grouped_chip.vue.cjs","sources":["../../../../recipes/chips/grouped_chip/grouped_chip.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-recipe-grouped-chip\"\n    class=\"d-recipe-grouped-chip\"\n  >\n    <dt-chip\n      :hide-close=\"true\"\n      :interactive=\"false\"\n      size=\"xs\"\n      :grouped-chip=\"true\"\n      class=\"d-recipe-grouped-chip__content d-recipe-grouped-chip__content-left\"\n    >\n      <template\n        v-if=\"hasSlotContent($slots.leftIcon)\"\n        #icon\n      >\n        <!-- @slot Slot for left chip icon information -->\n        <div\n          v-if=\"hasSlotContent($slots.leftIcon)\"\n          data-qa=\"left-grouped-chip-icon\"\n        >\n          <slot name=\"leftIcon\" />\n        </div>\n      </template>\n      <template #default>\n        <div\n          v-if=\"hasSlotContent($slots.leftContent)\"\n          data-qa=\"left-grouped-chip-content\"\n        >\n          <!-- @slot Slot for left chip content information -->\n          <slot name=\"leftContent\" />\n        </div>\n      </template>\n    </dt-chip>\n\n    <!-- Right side split chip -->\n    <dt-chip\n      :hide-close=\"true\"\n      :interactive=\"false\"\n      size=\"xs\"\n      :grouped-chip=\"true\"\n      class=\"d-recipe-grouped-chip__content d-recipe-grouped-chip__content-right\"\n    >\n      <template #icon>\n        <div\n          v-if=\"hasSlotContent($slots.rightIcon)\"\n          data-qa=\"right-grouped-chip-icon\"\n        >\n          <!-- @slot Slot for right chip content information -->\n          <slot name=\"rightIcon\" />\n        </div>\n      </template>\n      <template #default>\n        <div\n          v-if=\"hasSlotContent($slots.rightContent)\"\n          data-qa=\"right-grouped-chip-content\"\n        >\n          <!-- @slot Slot for right chip content information -->\n          <slot name=\"rightContent\" />\n        </div>\n      </template>\n    </dt-chip>\n  </div>\n</template>\n\n<script>\nimport { DtChip } from '@/components/chip';\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeGroupedChip',\n\n  components: {\n    DtChip,\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n"],"names":["DtChip","hasSlotContent","_openBlock","_createElementBlock","_createVNode","_createSlots","_renderSlot","_createCommentVNode","_withCtx"],"mappings":";;;;;;AAqEA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,QAAAA,KAAM;AAAA,EACP;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,gBAAAC,aAAc;AAAA;EAEjB;AACH;;EA/EI,WAAQ;AAAA,EACR,OAAM;;;EAHV,KAAA;AAAA,EAmBU,WAAQ;;;EAnBlB,KAAA;AAAA,EA2BU,WAAQ;;;EA3BlB,KAAA;AAAA,EA8CU,WAAQ;;;EA9ClB,KAAA;AAAA,EAuDU,WAAQ;;;;AAtDhB,SAAAC,cAAA,GAAAC,uBA6DM,OA7DN,YA6DM;AAAA,IAzDJC,IAAAA,YA4BU,oBAAA;AAAA,MA3BP,cAAY;AAAA,MACZ,aAAa;AAAA,MACd,MAAK;AAAA,MACJ,gBAAc;AAAA,MACf,OAAM;AAAA,IAVZ,GAAAC,gBAAA;AAAA,MAwBiB,qBACT,MAMM;AAAA,QALE,MAAc,eAAC,KAAM,OAAC,WAAW,KADzCH,IAAAA,aAAAC,IAAAA,mBAMM,OANN,YAMM;AAAA,UADJG,eAA2B,KAAA,QAAA,aAAA;AAAA,cA9BrCC,IAAA,mBAAA,IAAA,IAAA;AAAA;MAAA,GAAA;AAAA;MAac,MAAc,eAAC,KAAM,OAAC,QAAQ;QAb5C,MAcS;AAAA,QAdT,IAAAC,IAAA,QAiBQ,MAKM;AAAA,UAJE,MAAc,eAAC,KAAM,OAAC,QAAQ,KADtCN,IAAAA,aAAAC,IAAAA,mBAKM,OALN,YAKM;AAAA,YADJG,eAAwB,KAAA,QAAA,UAAA;AAAA,gBArBlCC,IAAA,mBAAA,IAAA,IAAA;AAAA;QAAA,KAAA;AAAA,UAAA;AAAA;IAoCIH,IAAAA,YAyBU,oBAAA;AAAA,MAxBP,cAAY;AAAA,MACZ,aAAa;AAAA,MACd,MAAK;AAAA,MACJ,gBAAc;AAAA,MACf,OAAM;AAAA;MAEK,kBACT,MAMM;AAAA,QALE,MAAc,eAAC,KAAM,OAAC,SAAS,KADvCF,IAAAA,aAAAC,IAAAA,mBAMM,OANN,YAMM;AAAA,UADJG,eAAyB,KAAA,QAAA,WAAA;AAAA,cAjDnCC,IAAA,mBAAA,IAAA,IAAA;AAAA;MAoDiB,qBACT,MAMM;AAAA,QALE,MAAc,eAAC,KAAM,OAAC,YAAY,KAD1CL,IAAAA,aAAAC,IAAAA,mBAMM,OANN,YAMM;AAAA,UADJG,eAA4B,KAAA,QAAA,cAAA;AAAA,cA1DtCC,IAAA,mBAAA,IAAA,IAAA;AAAA;MAAA,GAAA;AAAA;;;;;"}

package/dist/vue3/recipes/chips/grouped_chip/grouped_chip.vue.js

@@ -14,7 +14,7 @@ const _sfc_main = {
   }
 };
 const _hoisted_1 = {
-  "data-qa": "grouped-chip",
+  "data-qa": "dt-recipe-grouped-chip",
   class: "d-recipe-grouped-chip"
 };
 const _hoisted_2 = {
@@ -39,7 +39,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     createVNode(_component_dt_chip, {
       "hide-close": true,
       interactive: false,
-      "content-class": "d-fs100",
       size: "xs",
       "grouped-chip": true,
       class: "d-recipe-grouped-chip__content d-recipe-grouped-chip__content-left"
@@ -64,7 +63,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     createVNode(_component_dt_chip, {
       "hide-close": true,
       interactive: false,
-      "content-class": "d-fs100",
       size: "xs",
       "grouped-chip": true,
       class: "d-recipe-grouped-chip__content d-recipe-grouped-chip__content-right"

package/dist/vue3/recipes/chips/grouped_chip/grouped_chip.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"grouped_chip.vue.js","sources":["../../../../recipes/chips/grouped_chip/grouped_chip.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"grouped-chip\"\n    class=\"d-recipe-grouped-chip\"\n  >\n    <dt-chip\n      :hide-close=\"true\"\n      :interactive=\"false\"\n      content-class=\"d-fs100\"\n      size=\"xs\"\n      :grouped-chip=\"true\"\n      class=\"d-recipe-grouped-chip__content d-recipe-grouped-chip__content-left\"\n    >\n      <template\n        v-if=\"hasSlotContent($slots.leftIcon)\"\n        #icon\n      >\n        <!-- @slot Slot for left chip icon information -->\n        <div\n          v-if=\"hasSlotContent($slots.leftIcon)\"\n          data-qa=\"left-grouped-chip-icon\"\n        >\n          <slot name=\"leftIcon\" />\n        </div>\n      </template>\n      <template #default>\n        <div\n          v-if=\"hasSlotContent($slots.leftContent)\"\n          data-qa=\"left-grouped-chip-content\"\n        >\n          <!-- @slot Slot for left chip content information -->\n          <slot name=\"leftContent\" />\n        </div>\n      </template>\n    </dt-chip>\n\n    <!-- Right side split chip -->\n    <dt-chip\n      :hide-close=\"true\"\n      :interactive=\"false\"\n      content-class=\"d-fs100\"\n      size=\"xs\"\n      :grouped-chip=\"true\"\n      class=\"d-recipe-grouped-chip__content d-recipe-grouped-chip__content-right\"\n    >\n      <template #icon>\n        <div\n          v-if=\"hasSlotContent($slots.rightIcon)\"\n          data-qa=\"right-grouped-chip-icon\"\n        >\n          <!-- @slot Slot for right chip content information -->\n          <slot name=\"rightIcon\" />\n        </div>\n      </template>\n      <template #default>\n        <div\n          v-if=\"hasSlotContent($slots.rightContent)\"\n          data-qa=\"right-grouped-chip-content\"\n        >\n          <!-- @slot Slot for right chip content information -->\n          <slot name=\"rightContent\" />\n        </div>\n      </template>\n    </dt-chip>\n  </div>\n</template>\n\n<script>\nimport { DtChip } from '@/components/chip';\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeGroupedChip',\n\n  components: {\n    DtChip,\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n"],"names":["_openBlock","_createElementBlock","_createVNode","_createSlots","_renderSlot","_createCommentVNode","_withCtx"],"mappings":";;;;AAuEA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;EAEH;AACH;;EAjFI,WAAQ;AAAA,EACR,OAAM;;;EAHV,KAAA;AAAA,EAoBU,WAAQ;;;EApBlB,KAAA;AAAA,EA4BU,WAAQ;;;EA5BlB,KAAA;AAAA,EAgDU,WAAQ;;;EAhDlB,KAAA;AAAA,EAyDU,WAAQ;;;;AAxDhB,SAAAA,UAAA,GAAAC,mBA+DM,OA/DN,YA+DM;AAAA,IA3DJC,YA6BU,oBAAA;AAAA,MA5BP,cAAY;AAAA,MACZ,aAAa;AAAA,MACd,iBAAc;AAAA,MACd,MAAK;AAAA,MACJ,gBAAc;AAAA,MACf,OAAM;AAAA,IAXZ,GAAAC,YAAA;AAAA,MAyBiB,iBACT,MAMM;AAAA,QALE,MAAc,eAAC,KAAM,OAAC,WAAW,KADzCH,aAAAC,mBAMM,OANN,YAMM;AAAA,UADJG,WAA2B,KAAA,QAAA,aAAA;AAAA,cA/BrCC,mBAAA,IAAA,IAAA;AAAA;MAAA,GAAA;AAAA;MAcc,MAAc,eAAC,KAAM,OAAC,QAAQ;QAd5C,MAeS;AAAA,QAfT,IAAAC,QAkBQ,MAKM;AAAA,UAJE,MAAc,eAAC,KAAM,OAAC,QAAQ,KADtCN,aAAAC,mBAKM,OALN,YAKM;AAAA,YADJG,WAAwB,KAAA,QAAA,UAAA;AAAA,gBAtBlCC,mBAAA,IAAA,IAAA;AAAA;QAAA,KAAA;AAAA,UAAA;AAAA;IAqCIH,YA0BU,oBAAA;AAAA,MAzBP,cAAY;AAAA,MACZ,aAAa;AAAA,MACd,iBAAc;AAAA,MACd,MAAK;AAAA,MACJ,gBAAc;AAAA,MACf,OAAM;AAAA;MAEK,cACT,MAMM;AAAA,QALE,MAAc,eAAC,KAAM,OAAC,SAAS,KADvCF,aAAAC,mBAMM,OANN,YAMM;AAAA,UADJG,WAAyB,KAAA,QAAA,WAAA;AAAA,cAnDnCC,mBAAA,IAAA,IAAA;AAAA;MAsDiB,iBACT,MAMM;AAAA,QALE,MAAc,eAAC,KAAM,OAAC,YAAY,KAD1CL,aAAAC,mBAMM,OANN,YAMM;AAAA,UADJG,WAA4B,KAAA,QAAA,cAAA;AAAA,cA5DtCC,mBAAA,IAAA,IAAA;AAAA;MAAA,GAAA;AAAA;;;;"}
+{"version":3,"file":"grouped_chip.vue.js","sources":["../../../../recipes/chips/grouped_chip/grouped_chip.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-recipe-grouped-chip\"\n    class=\"d-recipe-grouped-chip\"\n  >\n    <dt-chip\n      :hide-close=\"true\"\n      :interactive=\"false\"\n      size=\"xs\"\n      :grouped-chip=\"true\"\n      class=\"d-recipe-grouped-chip__content d-recipe-grouped-chip__content-left\"\n    >\n      <template\n        v-if=\"hasSlotContent($slots.leftIcon)\"\n        #icon\n      >\n        <!-- @slot Slot for left chip icon information -->\n        <div\n          v-if=\"hasSlotContent($slots.leftIcon)\"\n          data-qa=\"left-grouped-chip-icon\"\n        >\n          <slot name=\"leftIcon\" />\n        </div>\n      </template>\n      <template #default>\n        <div\n          v-if=\"hasSlotContent($slots.leftContent)\"\n          data-qa=\"left-grouped-chip-content\"\n        >\n          <!-- @slot Slot for left chip content information -->\n          <slot name=\"leftContent\" />\n        </div>\n      </template>\n    </dt-chip>\n\n    <!-- Right side split chip -->\n    <dt-chip\n      :hide-close=\"true\"\n      :interactive=\"false\"\n      size=\"xs\"\n      :grouped-chip=\"true\"\n      class=\"d-recipe-grouped-chip__content d-recipe-grouped-chip__content-right\"\n    >\n      <template #icon>\n        <div\n          v-if=\"hasSlotContent($slots.rightIcon)\"\n          data-qa=\"right-grouped-chip-icon\"\n        >\n          <!-- @slot Slot for right chip content information -->\n          <slot name=\"rightIcon\" />\n        </div>\n      </template>\n      <template #default>\n        <div\n          v-if=\"hasSlotContent($slots.rightContent)\"\n          data-qa=\"right-grouped-chip-content\"\n        >\n          <!-- @slot Slot for right chip content information -->\n          <slot name=\"rightContent\" />\n        </div>\n      </template>\n    </dt-chip>\n  </div>\n</template>\n\n<script>\nimport { DtChip } from '@/components/chip';\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeGroupedChip',\n\n  components: {\n    DtChip,\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n"],"names":["_openBlock","_createElementBlock","_createVNode","_createSlots","_renderSlot","_createCommentVNode","_withCtx"],"mappings":";;;;AAqEA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;EAEH;AACH;;EA/EI,WAAQ;AAAA,EACR,OAAM;;;EAHV,KAAA;AAAA,EAmBU,WAAQ;;;EAnBlB,KAAA;AAAA,EA2BU,WAAQ;;;EA3BlB,KAAA;AAAA,EA8CU,WAAQ;;;EA9ClB,KAAA;AAAA,EAuDU,WAAQ;;;;AAtDhB,SAAAA,UAAA,GAAAC,mBA6DM,OA7DN,YA6DM;AAAA,IAzDJC,YA4BU,oBAAA;AAAA,MA3BP,cAAY;AAAA,MACZ,aAAa;AAAA,MACd,MAAK;AAAA,MACJ,gBAAc;AAAA,MACf,OAAM;AAAA,IAVZ,GAAAC,YAAA;AAAA,MAwBiB,iBACT,MAMM;AAAA,QALE,MAAc,eAAC,KAAM,OAAC,WAAW,KADzCH,aAAAC,mBAMM,OANN,YAMM;AAAA,UADJG,WAA2B,KAAA,QAAA,aAAA;AAAA,cA9BrCC,mBAAA,IAAA,IAAA;AAAA;MAAA,GAAA;AAAA;MAac,MAAc,eAAC,KAAM,OAAC,QAAQ;QAb5C,MAcS;AAAA,QAdT,IAAAC,QAiBQ,MAKM;AAAA,UAJE,MAAc,eAAC,KAAM,OAAC,QAAQ,KADtCN,aAAAC,mBAKM,OALN,YAKM;AAAA,YADJG,WAAwB,KAAA,QAAA,UAAA;AAAA,gBArBlCC,mBAAA,IAAA,IAAA;AAAA;QAAA,KAAA;AAAA,UAAA;AAAA;IAoCIH,YAyBU,oBAAA;AAAA,MAxBP,cAAY;AAAA,MACZ,aAAa;AAAA,MACd,MAAK;AAAA,MACJ,gBAAc;AAAA,MACf,OAAM;AAAA;MAEK,cACT,MAMM;AAAA,QALE,MAAc,eAAC,KAAM,OAAC,SAAS,KADvCF,aAAAC,mBAMM,OANN,YAMM;AAAA,UADJG,WAAyB,KAAA,QAAA,WAAA;AAAA,cAjDnCC,mBAAA,IAAA,IAAA;AAAA;MAoDiB,iBACT,MAMM;AAAA,QALE,MAAc,eAAC,KAAM,OAAC,YAAY,KAD1CL,aAAAC,mBAMM,OANN,YAMM;AAAA,UADJG,WAA4B,KAAA,QAAA,cAAA;AAAA,cA1DtCC,mBAAA,IAAA,IAAA;AAAA;MAAA,GAAA;AAAA;;;;"}

package/dist/vue3/recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue.cjs

@@ -609,7 +609,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           modelValue: $data.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $data.value = $event),
           class: "d-recipe-combobox-multi-select__input",
-          "input-class": [$props.inputClass, { "d-fc-transparent": $data.hideInputText }],
+          "input-class": [
+            $props.inputClass,
+            {
+              "d-recipe-combobox-multi-select__input--hidden": $data.hideInputText
+            }
+          ],
           "input-wrapper-class": $props.inputWrapperClass,
           "aria-label": $props.label,
           label: $props.labelVisible ? $props.label : "",