npm - @dialpad/dialtone-vue - Versions diffs - 3.223.0-next.2 → 3.223.0-next.4 - Mend

@dialpad/dialtone-vue 3.223.0-next.2 → 3.223.0-next.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (423) hide show

package/dist/lib/emoji/emoji.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"emoji.js","names":[],"sources":["../../../components/Emoji/Emoji.vue"],"sourcesContent":["<template>\n <span :class=\"['d-emoji d-icon', emojiSize]\">\n <dt-skeleton\n v-show=\"imgLoading && showSkeleton\"\n :offset=\"0\"\n :class=\"['d-icon', emojiSize]\"\n :shape-option=\"{ shape: 'circle', size: '100%' }\"\n />\n <img\n v-show=\"!imgLoading\"\n ref=\"emojiImg\"\n :class=\"['d-icon', emojiSize, imgClass]\"\n :aria-label=\"emojiLabel\"\n :alt=\"emojiAlt\"\n :title=\"emojiLabel\"\n :src=\"emojiSrc\"\n @load=\"imageLoaded\"\n @error=\"imageErrored\"\n >\n </span>\n</template>\n\n<script>\nimport { ICON_SIZE_MODIFIERS } from '@/components/Icon';\nimport {\n codeToEmojiData,\n stringToUnicode,\n emojiImageUrlSmall,\n emojiFileExtensionSmall,\n emojiImageUrlLarge,\n emojiFileExtensionLarge,\n} from '@/common/emoji';\nimport { DtSkeleton } from '@/components/Skeleton';\n\n/*\n Renders an emoji from a shortcode such as :smile: or unicode character such as 😄\n * @see https://dialtone.dialpad.com/components/emoji.html\n /\nexport default {\n name: 'DtEmoji',\n\n components: {\n DtSkeleton,\n },\n\n props: {\n /\n Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.\n * <a class=\"d-link\" href=\"https://emojipedia.org/joypixels/\" target=\"_blank\">JoyPixels</a>\n * for all supported shortcode/unicode or the docs for setting up custom emojis.\n /\n code: {\n type: String,\n required: true,\n },\n\n /\n The size of the emoji. Can be any of the icon size utility classes from\n * <a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/icon.html\" target=\"_blank\"> Dialpad Icon Size</a>\n * @values 100, 200, 300, 400, 500, 600, 700, 800\n /\n size: {\n type: String,\n default: '500',\n validator: (~~t) => Object.keys(~~ICON_SIZE_MODIFIERS)~~.includes(t)~~,\n },\n\n /\n Additional class name for the emoji img element.\n * Can accept String, Object, and Array, i.e. has the\n * same API as Vue's built-in handling of the class attribute.\n /\n imgClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n\n * Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will\n * be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the\n * getEmojiData() function\n /\n ariaLabel: {\n type: String,\n default: null,\n },\n\n /\n Shows a skeleton loader while the emoji asset is loading.\n * @values true, false\n */\n showSkeleton: {\n type: Boolean,\n default: true,\n },\n },\n\n data () {\n return {\n emojiData: null,\n imgLoading: false,\n };\n },\n\n computed: {\n emojiDataValid () {\n return !!this.emojiData;\n },\n\n emojiSrc () {\n if (!this.emojiDataValid) { return 'invalid'; }\n\n // custom emoji\n if (this.emojiData?.custom) {\n return this.emojiData.image;\n }\n\n if (['100', '200'].includes(this.size)) {\n return emojiImageUrlSmall + this.emojiData.key + emojiFileExtensionSmall;\n } else {\n return emojiImageUrlLarge + this.emojiData.key + emojiFileExtensionLarge;\n }\n },\n\n emojiAlt () {\n if (!this.emojiDataValid) { return undefined; }\n return this.emojiData.unicode_output ? stringToUnicode(this.emojiData.unicode_output) : this.emojiData.name;\n },\n\n emojiLabel () {\n if (!this.emojiDataValid) { return 'Invalid Emoji'; }\n return this.ariaLabel ? this.ariaLabel : this.emojiData.name;\n },\n\n emojiSize () {\n return ICON_SIZE_MODIFIERS[this.size];\n },\n },\n\n watch: {\n code: {\n handler: function () {\n this.getEmojiData();\n },\n\n immediate: true,\n },\n\n emojiSrc: {\n handler: async function () {\n this.imgLoading = true;\n },\n\n immediate: true,\n },\n },\n\n methods: {\n getEmojiData () {\n this.emojiData = codeToEmojiData(this.code);\n },\n\n imageLoaded () {\n this.imgLoading = false;\n },\n\n imageErrored () {\n this.imgLoading = false;\n },\n },\n};\n</script>\n"],"mappings":"~~;;;;;;AAsCA~~,IAAK,IAAU;CACb,MAAM;CAEN,YAAY,EACV,YAAA,GACD;CAED,OAAO;EAML,MAAM;GACJ,MAAM;GACN,UAAU;GACX;EAOD,MAAM;GACJ,MAAM;~~GACN~~,SAAS;GACT,~~YAAY~~,~~MAAM~~,~~OAAO,KAAK,~~EAAoB~~,CAAC,SAAS,EAAE~~;~~GAC/D~~;EAOD,UAAU;GACR,MAAM;IAAC;IAAQ;IAAQ;IAAM;GAC7B,SAAS;GACV;EAQD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAMD,cAAc;GACZ,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO;GACL,WAAW;GACX,YAAY;GACb;;CAGH,UAAU;EACR,iBAAkB;AAChB,UAAO,CAAC,CAAC,KAAK;;EAGhB,WAAY;AAWR,UAVG,KAAK,iBAGN,KAAK,WAAW,SACX,KAAK,UAAU,QAGpB,CAAC,OAAO,MAAM,CAAC,SAAS,KAAK,KAAK,~~GAC7B~~,IAAqB,KAAK,UAAU,MAAM,IAE1C,IAAqB,KAAK,UAAU,MAAM,IAVhB;;EAcrC,WAAY;AACL,YAAK,eACV,QAAO,KAAK,UAAU,iBAAiB,EAAgB,KAAK,UAAU,eAAc,GAAI,KAAK,UAAU;;EAGzG,aAAc;AAEZ,UADK,KAAK,iBACH,KAAK,YAAY,KAAK,YAAY,KAAK,UAAU,OADrB;;EAIrC,YAAa;AACX,UAAO,EAAoB,KAAK;;EAEnC;CAED,OAAO;EACL,MAAM;GACJ,SAAS,WAAY;AACnB,SAAK,cAAc;;GAGrB,WAAW;GACZ;EAED,UAAU;GACR,SAAS,iBAAkB;AACzB,SAAK,aAAa;;GAGpB,WAAW;GACZ;EACF;CAED,SAAS;EACP,eAAgB;AACd,QAAK,YAAY,EAAgB,KAAK,KAAK;;EAG7C,cAAe;AACb,QAAK,aAAa;;EAGpB,eAAgB;AACd,QAAK,aAAa;;EAErB;CACF;;;;;;;;~~aA1KC~~,EAkBO,QAAA,EAlBA,OAAK,EAAA,CAAA,kBAAqB,EAAA,UAAS,CAAA,EAAA,EAAA,CAAA,EACxC,EAKE,GAAA;EAHC,QAAQ;EACR,OAAK,EAAA,CAAA,UAAa,EAAA,UAAS,CAAA;EAC3B,gBAAc;GAAA,OAAA;GAAA,MAAA;GAAiC;8BAHxC,EAAA,cAAc,EAAA,aAAY,CAAA,CAAA,EAAA,EAKpC,EAUC,OAAA;EARC,KAAI;EACH,OAAK,EAAA;GAAA;GAAa,EAAA;GAAW,EAAA;GAAQ,CAAA;EACrC,cAAY,EAAA;EACZ,KAAK,EAAA;EACL,OAAO,EAAA;EACP,KAAK,EAAA;EACL,QAAI,EAAA,OAAA,EAAA,MAAA,GAAA,MAAE,EAAA,eAAA,EAAA,YAAA,GAAA,EAAW;EACjB,SAAK,EAAA,OAAA,EAAA,MAAA,GAAA,MAAE,EAAA,gBAAA,EAAA,aAAA,GAAA,EAAY;wBARX,EAAA,WAAU,CAAA,CAAA,CAAA,EAAA,EAAA"}
1	+ {"version":3,"file":"emoji.js","names":[],"sources":["../../../components/Emoji/Emoji.vue"],"sourcesContent":["<template>\n <span :class=\"['d-emoji d-icon', emojiSize]\">\n <dt-skeleton\n v-show=\"imgLoading && showSkeleton\"\n :offset=\"0\"\n :class=\"['d-icon', emojiSize]\"\n :shape-option=\"{ shape: 'circle', size: '100%' }\"\n />\n <img\n v-show=\"!imgLoading\"\n ref=\"emojiImg\"\n :class=\"['d-icon', emojiSize, imgClass]\"\n :aria-label=\"emojiLabel\"\n :alt=\"emojiAlt\"\n :title=\"emojiLabel\"\n :src=\"emojiSrc\"\n @load=\"imageLoaded\"\n @error=\"imageErrored\"\n >\n </span>\n</template>\n\n<script>\nimport { ICON_SIZE_MODIFIERS } from '@/components/Icon';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport {\n codeToEmojiData,\n stringToUnicode,\n emojiImageUrlSmall,\n emojiFileExtensionSmall,\n emojiImageUrlLarge,\n emojiFileExtensionLarge,\n} from '@/common/emoji';\nimport { DtSkeleton } from '@/components/Skeleton';\n\n/*\n Renders an emoji from a shortcode such as :smile: or unicode character such as 😄\n * @see https://dialtone.dialpad.com/components/emoji.html\n /\nexport default {\n name: 'DtEmoji',\n\n components: {\n DtSkeleton,\n },\n\n props: {\n /\n Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.\n * <a class=\"d-link\" href=\"https://emojipedia.org/joypixels/\" target=\"_blank\">JoyPixels</a>\n * for all supported shortcode/unicode or the docs for setting up custom emojis.\n /\n code: {\n type: String,\n required: true,\n },\n\n /\n The size of the emoji. Can be any of the icon size utility classes from\n * <a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/icon.html\" target=\"_blank\"> Dialpad Icon Size</a>\n * @values 100, 200, 300, 400, 500, 600, 700, 800\n /\n size: {\n type: [String, Number],\n default: 500,\n validator: ordinalSizeValidator(ICON_SIZE_MODIFIERS),\n },\n\n /\n Additional class name for the emoji img element.\n * Can accept String, Object, and Array, i.e. has the\n * same API as Vue's built-in handling of the class attribute.\n /\n imgClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n\n * Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will\n * be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the\n * getEmojiData() function\n /\n ariaLabel: {\n type: String,\n default: null,\n },\n\n /\n Shows a skeleton loader while the emoji asset is loading.\n * @values true, false\n */\n showSkeleton: {\n type: Boolean,\n default: true,\n },\n },\n\n data () {\n return {\n emojiData: null,\n imgLoading: false,\n };\n },\n\n computed: {\n emojiDataValid () {\n return !!this.emojiData;\n },\n\n emojiSrc () {\n if (!this.emojiDataValid) { return 'invalid'; }\n\n // custom emoji\n if (this.emojiData?.custom) {\n return this.emojiData.image;\n }\n\n if (['100', '200'].includes(String(this.size))) {\n return emojiImageUrlSmall + this.emojiData.key + emojiFileExtensionSmall;\n } else {\n return emojiImageUrlLarge + this.emojiData.key + emojiFileExtensionLarge;\n }\n },\n\n emojiAlt () {\n if (!this.emojiDataValid) { return undefined; }\n return this.emojiData.unicode_output ? stringToUnicode(this.emojiData.unicode_output) : this.emojiData.name;\n },\n\n emojiLabel () {\n if (!this.emojiDataValid) { return 'Invalid Emoji'; }\n return this.ariaLabel ? this.ariaLabel : this.emojiData.name;\n },\n\n emojiSize () {\n return ICON_SIZE_MODIFIERS[this.size];\n },\n },\n\n watch: {\n code: {\n handler: function () {\n this.getEmojiData();\n },\n\n immediate: true,\n },\n\n emojiSrc: {\n handler: async function () {\n this.imgLoading = true;\n },\n\n immediate: true,\n },\n },\n\n methods: {\n getEmojiData () {\n this.emojiData = codeToEmojiData(this.code);\n },\n\n imageLoaded () {\n this.imgLoading = false;\n },\n\n imageErrored () {\n this.imgLoading = false;\n },\n },\n};\n</script>\n"],"mappings":";;;;;;;AAuCA,IAAK,IAAU;CACb,MAAM;CAEN,YAAY,EACV,YAAA,GACD;CAED,OAAO;EAML,MAAM;GACJ,MAAM;GACN,UAAU;GACX;EAOD,MAAM;GACJ,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT,WAAW,EAAqB,EAAoB;GACrD;EAOD,UAAU;GACR,MAAM;IAAC;IAAQ;IAAQ;IAAM;GAC7B,SAAS;GACV;EAQD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAMD,cAAc;GACZ,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO;GACL,WAAW;GACX,YAAY;GACb;;CAGH,UAAU;EACR,iBAAkB;AAChB,UAAO,CAAC,CAAC,KAAK;;EAGhB,WAAY;AAWR,UAVG,KAAK,iBAGN,KAAK,WAAW,SACX,KAAK,UAAU,QAGpB,CAAC,OAAO,MAAM,CAAC,SAAS,OAAO,KAAK,KAAK,CAAC,GACrC,IAAqB,KAAK,UAAU,MAAM,IAE1C,IAAqB,KAAK,UAAU,MAAM,IAVhB;;EAcrC,WAAY;AACL,YAAK,eACV,QAAO,KAAK,UAAU,iBAAiB,EAAgB,KAAK,UAAU,eAAc,GAAI,KAAK,UAAU;;EAGzG,aAAc;AAEZ,UADK,KAAK,iBACH,KAAK,YAAY,KAAK,YAAY,KAAK,UAAU,OADrB;;EAIrC,YAAa;AACX,UAAO,EAAoB,KAAK;;EAEnC;CAED,OAAO;EACL,MAAM;GACJ,SAAS,WAAY;AACnB,SAAK,cAAc;;GAGrB,WAAW;GACZ;EAED,UAAU;GACR,SAAS,iBAAkB;AACzB,SAAK,aAAa;;GAGpB,WAAW;GACZ;EACF;CAED,SAAS;EACP,eAAgB;AACd,QAAK,YAAY,EAAgB,KAAK,KAAK;;EAG7C,cAAe;AACb,QAAK,aAAa;;EAGpB,eAAgB;AACd,QAAK,aAAa;;EAErB;CACF;;;;;;;;aA3KC,EAkBO,QAAA,EAlBA,OAAK,EAAA,CAAA,kBAAqB,EAAA,UAAS,CAAA,EAAA,EAAA,CAAA,EACxC,EAKE,GAAA;EAHC,QAAQ;EACR,OAAK,EAAA,CAAA,UAAa,EAAA,UAAS,CAAA;EAC3B,gBAAc;GAAA,OAAA;GAAA,MAAA;GAAiC;8BAHxC,EAAA,cAAc,EAAA,aAAY,CAAA,CAAA,EAAA,EAKpC,EAUC,OAAA;EARC,KAAI;EACH,OAAK,EAAA;GAAA;GAAa,EAAA;GAAW,EAAA;GAAQ,CAAA;EACrC,cAAY,EAAA;EACZ,KAAK,EAAA;EACL,OAAO,EAAA;EACP,KAAK,EAAA;EACL,QAAI,EAAA,OAAA,EAAA,MAAA,GAAA,MAAE,EAAA,eAAA,EAAA,YAAA,GAAA,EAAW;EACjB,SAAK,EAAA,OAAA,EAAA,MAAA,GAAA,MAAE,EAAA,gBAAA,EAAA,aAAA,GAAA,EAAY;wBARX,EAAA,WAAU,CAAA,CAAA,CAAA,EAAA,EAAA"}

package/dist/lib/emoji-text-wrapper/emoji-text-wrapper.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/emoji/index.cjs`),t=require(`../icon/icon-constants.cjs`),n=require(`../emoji/emoji.cjs`);let r=require(`vue`);var i=(0,r.h)((0,r.resolveDynamicComponent)(null)).type,a={name:`DtEmojiTextWrapper`,components:{DtEmoji:n.default},props:{elementType:{type:String,default:`div`},size:{type:String,default:`500`,validator:e=>Object.keys(t.ICON_SIZE_MODIFIERS).includes(e)}},data(){return{loadingEmojiJson:!0}},async created(){this.loadingEmojiJson=!1},methods:{replaceDtEmojis(e,t){if(!e.length)return t;let i=e.map(e=>e.replace(/\*/g,`\\*`)),a=RegExp(`(${i.join(`|`)})`,`g`);return t.split(a).filter(e=>e.trim()!==``).map(t=>e.includes(t)?(0,r.h)(n.default,{code:t,size:this.size}):(0,r.h)(`span`,{class:`d-emoji-text-wrapper__text`},t))},searchVNodes(e){if(!e)return;if(typeof e==`string`)return this.searchCodes(e);if(e.type===i)return e;if(typeof e.type==`symbol`)return this.searchCodes(e.children);if(e.props?.innerHTML)return this.searchVNodes(e.props.innerHTML);let t=Array.isArray(e.children)?e.children:[e.children];return(0,r.h)(e.type,e.props,t.map(e=>this.searchVNodes(e)))},replaceVueComponentVNodeContent(){},searchCodes(t){let n=e.findShortCodes(t),r=e.findEmojis(t),i=[...n,...r];return i.length===0?t:this.replaceDtEmojis(i,t)}},render(){let e=this.$slots.default?this.$slots.default():[];return(0,r.h)(this.elementType,{"data-qa":`emoji-text-wrapper`,class:`d-emoji-text-wrapper`},this.loadingEmojiJson?e:e.map(e=>this.searchVNodes(e)))}};exports.default=a;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/validators/index.cjs`),t=require(`../../common/emoji/index.cjs`),n=require(`../icon/icon-constants.cjs`),r=require(`../emoji/emoji.cjs`);let i=require(`vue`);var a=(0,i.h)((0,i.resolveDynamicComponent)(null)).type,o={name:`DtEmojiTextWrapper`,components:{DtEmoji:r.default},props:{elementType:{type:String,default:`div`},size:{type:[String,Number],default:500,validator:e.ordinalSizeValidator(n.ICON_SIZE_MODIFIERS)}},data(){return{loadingEmojiJson:!0}},async created(){this.loadingEmojiJson=!1},methods:{replaceDtEmojis(e,t){if(!e.length)return t;let n=e.map(e=>e.replace(/\*/g,`\\*`)),a=RegExp(`(${n.join(`|`)})`,`g`);return t.split(a).filter(e=>e.trim()!==``).map(t=>e.includes(t)?(0,i.h)(r.default,{code:t,size:this.size}):(0,i.h)(`span`,{class:`d-emoji-text-wrapper__text`},t))},searchVNodes(e){if(!e)return;if(typeof e==`string`)return this.searchCodes(e);if(e.type===a)return e;if(typeof e.type==`symbol`)return this.searchCodes(e.children);if(e.props?.innerHTML)return this.searchVNodes(e.props.innerHTML);let t=Array.isArray(e.children)?e.children:[e.children];return(0,i.h)(e.type,e.props,t.map(e=>this.searchVNodes(e)))},replaceVueComponentVNodeContent(){},searchCodes(e){let n=t.findShortCodes(e),r=t.findEmojis(e),i=[...n,...r];return i.length===0?e:this.replaceDtEmojis(i,e)}},render(){let e=this.$slots.default?this.$slots.default():[];return(0,i.h)(this.elementType,{"data-qa":`emoji-text-wrapper`,class:`d-emoji-text-wrapper`},this.loadingEmojiJson?e:e.map(e=>this.searchVNodes(e)))}};exports.default=o;
 //# sourceMappingURL=emoji-text-wrapper.cjs.map

package/dist/lib/emoji-text-wrapper/emoji-text-wrapper.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"emoji-text-wrapper.cjs","names":[],"sources":["../../../components/EmojiTextWrapper/EmojiTextWrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../Emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { h, resolveDynamicComponent } from 'vue';\nimport { ICON_SIZE_MODIFIERS } from '@/components/Icon/IconConstants';\n\nconst COMMENT_TYPE = h(resolveDynamicComponent(null)).type;\n\n/*\n Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n /\nexport default {\n name: 'DtEmojiTextWrapper',\n\n components: {\n DtEmoji,\n },\n\n props: {\n /\n Element type (tag name) to use for the wrapper.\n /\n elementType: {\n type: String,\n default: 'div',\n },\n\n /\n The icon size to render the emojis at.\n * @values 100, 200, 300, 400, 500, 600, 700, 800\n /\n size: {\n type: String,\n default: '500',\n validator: (~~t) => Object.keys(~~ICON_SIZE_MODIFIERS)~~.includes(t)~~,\n },\n },\n\n data () {\n return {\n loadingEmojiJson: true,\n };\n },\n\n async created () {\n this.loadingEmojiJson = false;\n },\n\n methods: {\n /\n Replaces the valid codes from the text content with a DtEmoji component.\n * @returns {Array<VNode\|string>}\n /\n replaceDtEmojis (replaceList, textContent) {\n if (!replaceList.length) return textContent;\n // Escape the asterisk to avoid breaking the regex for the asterisk emoji\n const escapedReplaceList = replaceList.map(item =>\n item.replace(/\\/g, '\\\\'),\n );\n\n const regexp = new RegExp(`(${escapedReplaceList.join('\|')})`, 'g');\n const items = textContent.split(regexp);\n\n return items\n .filter(item => item.trim() !== '')\n .map((item) => {\n if (replaceList.includes(item)) {\n return h(DtEmoji, { code: item, size: this.size });\n }\n return h('span', { class: 'd-emoji-text-wrapper__text' }, item);\n });\n },\n\n /\n Recursively search the Vue virtual DOM to find text\n * @param VNode\n * @returns {VNode\|}\n /\n searchVNodes (VNode) {\n if (!VNode) return;\n if (typeof VNode === 'string') return this.searchCodes(VNode);\n if (VNode.type === COMMENT_TYPE) return VNode;\n if (typeof VNode.type === 'symbol') return this.searchCodes(VNode.children);\n if (VNode.props?.innerHTML) return this.searchVNodes(VNode.props.innerHTML);\n\n const children = Array.isArray(VNode.children) ? VNode.children : [VNode.children];\n return h(VNode.type, VNode.props, children.map(VNodeChild => this.searchVNodes(VNodeChild)));\n },\n\n // TODO: Find a way to crawl vue components\n replaceVueComponentVNodeContent () {\n //\n },\n\n /*\n Find codes in text.\n * @param textContent string\n * @returns {Array<VNode\|string>\|string}\n */\n searchCodes (textContent) {\n const shortcodes = findShortCodes(textContent);\n const emojis = findEmojis(textContent);\n\n const replaceList = [...shortcodes, ...emojis];\n if (replaceList.length === 0) return textContent;\n return this.replaceDtEmojis(replaceList, textContent);\n },\n },\n\n render () {\n const defaultSlotContent = this.$slots.default ? this.$slots.default() : [];\n return h(\n this.elementType,\n {\n 'data-qa': 'emoji-text-wrapper',\n class: 'd-emoji-text-wrapper',\n },\n this.loadingEmojiJson\n ? defaultSlotContent\n : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n );\n },\n};\n</script>\n"],"mappings":"~~gRAMA~~,IAAM,GAAA,EAAA,EAAA,IAAA,EAAA,EAAA,yBAAyC,KAAK,CAAC,CAAC,KAMjD,EAAU,CACb,KAAM,qBAEN,WAAY,CACV,QAAA,EAAA,QACD,CAED,MAAO,CAIL,YAAa,CACX,KAAM,OACN,QAAS,MACV,CAMD,KAAM,CACJ,KAAM,~~OACN~~,~~QAAS~~,~~MACT~~,~~UAAY~~,~~GAAM~~,~~OAAO~~,~~KAAK~~,EAAA,~~oBAAoB~~,~~CAAC~~,~~SAAS~~,~~EAAE~~,~~CAC/D,~~CACF,CAED,MAAQ,CACN,MAAO,CACL,iBAAkB,GACnB,EAGH,MAAM,SAAW,CACf,KAAK,iBAAmB,IAG1B,QAAS,CAKP,gBAAiB,EAAa,EAAa,CACzC,GAAI,CAAC,EAAY,OAAQ,OAAO,EAEhC,IAAM,EAAqB,EAAY,IAAI,GACzC,EAAK,QAAQ,MAAO,MAAM,CAC3B,CAEK,EAAa,OAAO,IAAI,EAAmB,KAAK,IAAI,CAAC,GAAI,IAAI,CAGnE,OAFc,EAAY,MAAM,EAAO,CAGpC,OAAO,GAAQ,EAAK,MAAK,GAAM,GAAE,CACjC,IAAK,GACA,EAAY,SAAS,EAAK,EAC5B,EAAA,EAAA,GAAS,EAAA,QAAS,CAAE,KAAM,EAAM,KAAM,KAAK,KAAM,CAAC,EAEpD,EAAA,EAAA,GAAS,OAAQ,CAAE,MAAO,6BAA8B,CAAE,EAAK,CAC/D,EAQN,aAAc,EAAO,CACnB,GAAI,CAAC,EAAO,OACZ,GAAI,OAAO,GAAU,SAAU,OAAO,KAAK,YAAY,EAAM,CAC7D,GAAI,EAAM,OAAS,EAAc,OAAO,EACxC,GAAI,OAAO,EAAM,MAAS,SAAU,OAAO,KAAK,YAAY,EAAM,SAAS,CAC3E,GAAI,EAAM,OAAO,UAAW,OAAO,KAAK,aAAa,EAAM,MAAM,UAAU,CAE3E,IAAM,EAAW,MAAM,QAAQ,EAAM,SAAQ,CAAI,EAAM,SAAW,CAAC,EAAM,SAAS,CAClF,OAAA,EAAA,EAAA,GAAS,EAAM,KAAM,EAAM,MAAO,EAAS,IAAI,GAAc,KAAK,aAAa,EAAW,CAAC,CAAC,EAI9F,iCAAmC,GASnC,YAAa,EAAa,CACxB,IAAM,EAAa,EAAA,eAAe,EAAY,CACxC,EAAS,EAAA,WAAW,EAAY,CAEhC,EAAc,CAAC,GAAG,EAAY,GAAG,EAAO,CAE9C,OADI,EAAY,SAAW,EAAU,EAC9B,KAAK,gBAAgB,EAAa,EAAY,EAExD,CAED,QAAU,CACR,IAAM,EAAqB,KAAK,OAAO,QAAU,KAAK,OAAO,SAAQ,CAAI,EAAE,CAC3E,OAAA,EAAA,EAAA,GACE,KAAK,YACL,CACE,UAAW,qBACX,MAAO,uBACR,CACD,KAAK,iBACD,EACA,EAAmB,IAAI,GAAS,KAAK,aAAa,EAAM,CAAC,CAC9D,EAEJ"}
1	+ {"version":3,"file":"emoji-text-wrapper.cjs","names":[],"sources":["../../../components/EmojiTextWrapper/EmojiTextWrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../Emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { h, resolveDynamicComponent } from 'vue';\nimport { ICON_SIZE_MODIFIERS } from '@/components/Icon/IconConstants';\nimport { ordinalSizeValidator } from '@/common/validators';\n\nconst COMMENT_TYPE = h(resolveDynamicComponent(null)).type;\n\n/*\n Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n /\nexport default {\n name: 'DtEmojiTextWrapper',\n\n components: {\n DtEmoji,\n },\n\n props: {\n /\n Element type (tag name) to use for the wrapper.\n /\n elementType: {\n type: String,\n default: 'div',\n },\n\n /\n The icon size to render the emojis at.\n * @values 100, 200, 300, 400, 500, 600, 700, 800\n /\n size: {\n type: [String, Number],\n default: 500,\n validator: ordinalSizeValidator(ICON_SIZE_MODIFIERS),\n },\n },\n\n data () {\n return {\n loadingEmojiJson: true,\n };\n },\n\n async created () {\n this.loadingEmojiJson = false;\n },\n\n methods: {\n /\n Replaces the valid codes from the text content with a DtEmoji component.\n * @returns {Array<VNode\|string>}\n /\n replaceDtEmojis (replaceList, textContent) {\n if (!replaceList.length) return textContent;\n // Escape the asterisk to avoid breaking the regex for the asterisk emoji\n const escapedReplaceList = replaceList.map(item =>\n item.replace(/\\/g, '\\\\'),\n );\n\n const regexp = new RegExp(`(${escapedReplaceList.join('\|')})`, 'g');\n const items = textContent.split(regexp);\n\n return items\n .filter(item => item.trim() !== '')\n .map((item) => {\n if (replaceList.includes(item)) {\n return h(DtEmoji, { code: item, size: this.size });\n }\n return h('span', { class: 'd-emoji-text-wrapper__text' }, item);\n });\n },\n\n /\n Recursively search the Vue virtual DOM to find text\n * @param VNode\n * @returns {VNode\|}\n /\n searchVNodes (VNode) {\n if (!VNode) return;\n if (typeof VNode === 'string') return this.searchCodes(VNode);\n if (VNode.type === COMMENT_TYPE) return VNode;\n if (typeof VNode.type === 'symbol') return this.searchCodes(VNode.children);\n if (VNode.props?.innerHTML) return this.searchVNodes(VNode.props.innerHTML);\n\n const children = Array.isArray(VNode.children) ? VNode.children : [VNode.children];\n return h(VNode.type, VNode.props, children.map(VNodeChild => this.searchVNodes(VNodeChild)));\n },\n\n // TODO: Find a way to crawl vue components\n replaceVueComponentVNodeContent () {\n //\n },\n\n /*\n Find codes in text.\n * @param textContent string\n * @returns {Array<VNode\|string>\|string}\n */\n searchCodes (textContent) {\n const shortcodes = findShortCodes(textContent);\n const emojis = findEmojis(textContent);\n\n const replaceList = [...shortcodes, ...emojis];\n if (replaceList.length === 0) return textContent;\n return this.replaceDtEmojis(replaceList, textContent);\n },\n },\n\n render () {\n const defaultSlotContent = this.$slots.default ? this.$slots.default() : [];\n return h(\n this.elementType,\n {\n 'data-qa': 'emoji-text-wrapper',\n class: 'd-emoji-text-wrapper',\n },\n this.loadingEmojiJson\n ? defaultSlotContent\n : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n );\n },\n};\n</script>\n"],"mappings":"+TAOA,IAAM,GAAA,EAAA,EAAA,IAAA,EAAA,EAAA,yBAAyC,KAAK,CAAC,CAAC,KAMjD,EAAU,CACb,KAAM,qBAEN,WAAY,CACV,QAAA,EAAA,QACD,CAED,MAAO,CAIL,YAAa,CACX,KAAM,OACN,QAAS,MACV,CAMD,KAAM,CACJ,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,IACT,UAAW,EAAA,qBAAqB,EAAA,oBAAoB,CACrD,CACF,CAED,MAAQ,CACN,MAAO,CACL,iBAAkB,GACnB,EAGH,MAAM,SAAW,CACf,KAAK,iBAAmB,IAG1B,QAAS,CAKP,gBAAiB,EAAa,EAAa,CACzC,GAAI,CAAC,EAAY,OAAQ,OAAO,EAEhC,IAAM,EAAqB,EAAY,IAAI,GACzC,EAAK,QAAQ,MAAO,MAAM,CAC3B,CAEK,EAAa,OAAO,IAAI,EAAmB,KAAK,IAAI,CAAC,GAAI,IAAI,CAGnE,OAFc,EAAY,MAAM,EAAO,CAGpC,OAAO,GAAQ,EAAK,MAAK,GAAM,GAAE,CACjC,IAAK,GACA,EAAY,SAAS,EAAK,EAC5B,EAAA,EAAA,GAAS,EAAA,QAAS,CAAE,KAAM,EAAM,KAAM,KAAK,KAAM,CAAC,EAEpD,EAAA,EAAA,GAAS,OAAQ,CAAE,MAAO,6BAA8B,CAAE,EAAK,CAC/D,EAQN,aAAc,EAAO,CACnB,GAAI,CAAC,EAAO,OACZ,GAAI,OAAO,GAAU,SAAU,OAAO,KAAK,YAAY,EAAM,CAC7D,GAAI,EAAM,OAAS,EAAc,OAAO,EACxC,GAAI,OAAO,EAAM,MAAS,SAAU,OAAO,KAAK,YAAY,EAAM,SAAS,CAC3E,GAAI,EAAM,OAAO,UAAW,OAAO,KAAK,aAAa,EAAM,MAAM,UAAU,CAE3E,IAAM,EAAW,MAAM,QAAQ,EAAM,SAAQ,CAAI,EAAM,SAAW,CAAC,EAAM,SAAS,CAClF,OAAA,EAAA,EAAA,GAAS,EAAM,KAAM,EAAM,MAAO,EAAS,IAAI,GAAc,KAAK,aAAa,EAAW,CAAC,CAAC,EAI9F,iCAAmC,GASnC,YAAa,EAAa,CACxB,IAAM,EAAa,EAAA,eAAe,EAAY,CACxC,EAAS,EAAA,WAAW,EAAY,CAEhC,EAAc,CAAC,GAAG,EAAY,GAAG,EAAO,CAE9C,OADI,EAAY,SAAW,EAAU,EAC9B,KAAK,gBAAgB,EAAa,EAAY,EAExD,CAED,QAAU,CACR,IAAM,EAAqB,KAAK,OAAO,QAAU,KAAK,OAAO,SAAQ,CAAI,EAAE,CAC3E,OAAA,EAAA,EAAA,GACE,KAAK,YACL,CACE,UAAW,qBACX,MAAO,uBACR,CACD,KAAK,iBACD,EACA,EAAmB,IAAI,GAAS,KAAK,aAAa,EAAM,CAAC,CAC9D,EAEJ"}

package/dist/lib/emoji-text-wrapper/emoji-text-wrapper.js CHANGED Viewed

@@ -1,20 +1,21 @@
-import { findEmojis as e, findShortCodes as t } from "../../common/emoji/index.js";
-import { ICON_SIZE_MODIFIERS as n } from "../icon/icon-constants.js";
-import r from "../emoji/emoji.js";
-import { h as i, resolveDynamicComponent as a } from "vue";
+import { ordinalSizeValidator as e } from "../../common/validators/index.js";
+import { findEmojis as t, findShortCodes as n } from "../../common/emoji/index.js";
+import { ICON_SIZE_MODIFIERS as r } from "../icon/icon-constants.js";
+import i from "../emoji/emoji.js";
+import { h as a, resolveDynamicComponent as o } from "vue";
 //#region components/EmojiTextWrapper/EmojiTextWrapper.vue
-var o = i(a(null)).type, s = {
+var s = a(o(null)).type, c = {
 	name: "DtEmojiTextWrapper",
-	components: { DtEmoji: r },
+	components: { DtEmoji: i },
 	props: {
 		elementType: {
 			type: String,
 			default: "div"
 		},
 		size: {
-			type: String,
-			default: "500",
-			validator: (e) => Object.keys(n).includes(e)
+			type: [String, Number],
+			default: 500,
+			validator: e(r)
 		}
 	},
 	data() {
@@ -26,36 +27,36 @@ var o = i(a(null)).type, s = {
 	methods: {
 		replaceDtEmojis(e, t) {
 			if (!e.length) return t;
-			let n = e.map((e) => e.replace(/\*/g, "\\*")), a = RegExp(`(${n.join("|")})`, "g");
-			return t.split(a).filter((e) => e.trim() !== "").map((t) => e.includes(t) ? i(r, {
+			let n = e.map((e) => e.replace(/\*/g, "\\*")), r = RegExp(`(${n.join("|")})`, "g");
+			return t.split(r).filter((e) => e.trim() !== "").map((t) => e.includes(t) ? a(i, {
 				code: t,
 				size: this.size
-			}) : i("span", { class: "d-emoji-text-wrapper__text" }, t));
+			}) : a("span", { class: "d-emoji-text-wrapper__text" }, t));
 		},
 		searchVNodes(e) {
 			if (!e) return;
 			if (typeof e == "string") return this.searchCodes(e);
-			if (e.type === o) return e;
+			if (e.type === s) return e;
 			if (typeof e.type == "symbol") return this.searchCodes(e.children);
 			if (e.props?.innerHTML) return this.searchVNodes(e.props.innerHTML);
 			let t = Array.isArray(e.children) ? e.children : [e.children];
-			return i(e.type, e.props, t.map((e) => this.searchVNodes(e)));
+			return a(e.type, e.props, t.map((e) => this.searchVNodes(e)));
 		},
 		replaceVueComponentVNodeContent() {},
-		searchCodes(n) {
-			let r = t(n), i = e(n), a = [...r, ...i];
-			return a.length === 0 ? n : this.replaceDtEmojis(a, n);
+		searchCodes(e) {
+			let r = n(e), i = t(e), a = [...r, ...i];
+			return a.length === 0 ? e : this.replaceDtEmojis(a, e);
 		}
 	},
 	render() {
 		let e = this.$slots.default ? this.$slots.default() : [];
-		return i(this.elementType, {
+		return a(this.elementType, {
 			"data-qa": "emoji-text-wrapper",
 			class: "d-emoji-text-wrapper"
 		}, this.loadingEmojiJson ? e : e.map((e) => this.searchVNodes(e)));
 	}
 };
 //#endregion
-export { s as default };
+export { c as default };
 //# sourceMappingURL=emoji-text-wrapper.js.map

package/dist/lib/emoji-text-wrapper/emoji-text-wrapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"emoji-text-wrapper.js","names":[],"sources":["../../../components/EmojiTextWrapper/EmojiTextWrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../Emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { h, resolveDynamicComponent } from 'vue';\nimport { ICON_SIZE_MODIFIERS } from '@/components/Icon/IconConstants';\n\nconst COMMENT_TYPE = h(resolveDynamicComponent(null)).type;\n\n/*\n Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n /\nexport default {\n name: 'DtEmojiTextWrapper',\n\n components: {\n DtEmoji,\n },\n\n props: {\n /\n Element type (tag name) to use for the wrapper.\n /\n elementType: {\n type: String,\n default: 'div',\n },\n\n /\n The icon size to render the emojis at.\n * @values 100, 200, 300, 400, 500, 600, 700, 800\n /\n size: {\n type: String,\n default: '500',\n validator: (~~t) => Object.keys(~~ICON_SIZE_MODIFIERS)~~.includes(t)~~,\n },\n },\n\n data () {\n return {\n loadingEmojiJson: true,\n };\n },\n\n async created () {\n this.loadingEmojiJson = false;\n },\n\n methods: {\n /\n Replaces the valid codes from the text content with a DtEmoji component.\n * @returns {Array<VNode\|string>}\n /\n replaceDtEmojis (replaceList, textContent) {\n if (!replaceList.length) return textContent;\n // Escape the asterisk to avoid breaking the regex for the asterisk emoji\n const escapedReplaceList = replaceList.map(item =>\n item.replace(/\\/g, '\\\\'),\n );\n\n const regexp = new RegExp(`(${escapedReplaceList.join('\|')})`, 'g');\n const items = textContent.split(regexp);\n\n return items\n .filter(item => item.trim() !== '')\n .map((item) => {\n if (replaceList.includes(item)) {\n return h(DtEmoji, { code: item, size: this.size });\n }\n return h('span', { class: 'd-emoji-text-wrapper__text' }, item);\n });\n },\n\n /\n Recursively search the Vue virtual DOM to find text\n * @param VNode\n * @returns {VNode\|}\n /\n searchVNodes (VNode) {\n if (!VNode) return;\n if (typeof VNode === 'string') return this.searchCodes(VNode);\n if (VNode.type === COMMENT_TYPE) return VNode;\n if (typeof VNode.type === 'symbol') return this.searchCodes(VNode.children);\n if (VNode.props?.innerHTML) return this.searchVNodes(VNode.props.innerHTML);\n\n const children = Array.isArray(VNode.children) ? VNode.children : [VNode.children];\n return h(VNode.type, VNode.props, children.map(VNodeChild => this.searchVNodes(VNodeChild)));\n },\n\n // TODO: Find a way to crawl vue components\n replaceVueComponentVNodeContent () {\n //\n },\n\n /*\n Find codes in text.\n * @param textContent string\n * @returns {Array<VNode\|string>\|string}\n */\n searchCodes (textContent) {\n const shortcodes = findShortCodes(textContent);\n const emojis = findEmojis(textContent);\n\n const replaceList = [...shortcodes, ...emojis];\n if (replaceList.length === 0) return textContent;\n return this.replaceDtEmojis(replaceList, textContent);\n },\n },\n\n render () {\n const defaultSlotContent = this.$slots.default ? this.$slots.default() : [];\n return h(\n this.elementType,\n {\n 'data-qa': 'emoji-text-wrapper',\n class: 'd-emoji-text-wrapper',\n },\n this.loadingEmojiJson\n ? defaultSlotContent\n : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n );\n },\n};\n</script>\n"],"mappings":"~~;;;;;AAMA~~,IAAM,IAAe,EAAE,EAAwB,KAAK,CAAC,CAAC,MAMjD,IAAU;CACb,MAAM;CAEN,YAAY,EACV,SAAA,GACD;CAED,OAAO;EAIL,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM;~~GACN~~,SAAS;GACT,~~YAAY~~,~~MAAM~~,~~OAAO,KAAK,~~EAAoB~~,CAAC,SAAS,EAAE~~;~~GAC/D~~;EACF;CAED,OAAQ;AACN,SAAO,EACL,kBAAkB,IACnB;;CAGH,MAAM,UAAW;AACf,OAAK,mBAAmB;;CAG1B,SAAS;EAKP,gBAAiB,GAAa,GAAa;AACzC,OAAI,CAAC,EAAY,OAAQ,QAAO;GAEhC,IAAM,IAAqB,EAAY,KAAI,MACzC,EAAK,QAAQ,OAAO,MAAM,CAC3B,EAEK,IAAa,OAAO,IAAI,EAAmB,KAAK,IAAI,CAAC,IAAI,IAAI;AAGnE,UAFc,EAAY,MAAM,EAAO,CAGpC,QAAO,MAAQ,EAAK,MAAK,KAAM,GAAE,CACjC,KAAK,MACA,EAAY,SAAS,EAAK,GACrB,EAAE,GAAS;IAAE,MAAM;IAAM,MAAM,KAAK;IAAM,CAAC,GAE7C,EAAE,QAAQ,EAAE,OAAO,8BAA8B,EAAE,EAAK,CAC/D;;EAQN,aAAc,GAAO;AACnB,OAAI,CAAC,EAAO;AACZ,OAAI,OAAO,KAAU,SAAU,QAAO,KAAK,YAAY,EAAM;AAC7D,OAAI,EAAM,SAAS,EAAc,QAAO;AACxC,OAAI,OAAO,EAAM,QAAS,SAAU,QAAO,KAAK,YAAY,EAAM,SAAS;AAC3E,OAAI,EAAM,OAAO,UAAW,QAAO,KAAK,aAAa,EAAM,MAAM,UAAU;GAE3E,IAAM,IAAW,MAAM,QAAQ,EAAM,SAAQ,GAAI,EAAM,WAAW,CAAC,EAAM,SAAS;AAClF,UAAO,EAAE,EAAM,MAAM,EAAM,OAAO,EAAS,KAAI,MAAc,KAAK,aAAa,EAAW,CAAC,CAAC;;EAI9F,kCAAmC;EASnC,YAAa,GAAa;GACxB,IAAM,IAAa,EAAe,EAAY,EACxC,IAAS,EAAW,EAAY,EAEhC,IAAc,CAAC,GAAG,GAAY,GAAG,EAAO;AAE9C,UADI,EAAY,WAAW,IAAU,IAC9B,KAAK,gBAAgB,GAAa,EAAY;;EAExD;CAED,SAAU;EACR,IAAM,IAAqB,KAAK,OAAO,UAAU,KAAK,OAAO,SAAQ,GAAI,EAAE;AAC3E,SAAO,EACL,KAAK,aACL;GACE,WAAW;GACX,OAAO;GACR,EACD,KAAK,mBACD,IACA,EAAmB,KAAI,MAAS,KAAK,aAAa,EAAM,CAAC,CAC9D;;CAEJ"}
1	+ {"version":3,"file":"emoji-text-wrapper.js","names":[],"sources":["../../../components/EmojiTextWrapper/EmojiTextWrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../Emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { h, resolveDynamicComponent } from 'vue';\nimport { ICON_SIZE_MODIFIERS } from '@/components/Icon/IconConstants';\nimport { ordinalSizeValidator } from '@/common/validators';\n\nconst COMMENT_TYPE = h(resolveDynamicComponent(null)).type;\n\n/*\n Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n /\nexport default {\n name: 'DtEmojiTextWrapper',\n\n components: {\n DtEmoji,\n },\n\n props: {\n /\n Element type (tag name) to use for the wrapper.\n /\n elementType: {\n type: String,\n default: 'div',\n },\n\n /\n The icon size to render the emojis at.\n * @values 100, 200, 300, 400, 500, 600, 700, 800\n /\n size: {\n type: [String, Number],\n default: 500,\n validator: ordinalSizeValidator(ICON_SIZE_MODIFIERS),\n },\n },\n\n data () {\n return {\n loadingEmojiJson: true,\n };\n },\n\n async created () {\n this.loadingEmojiJson = false;\n },\n\n methods: {\n /\n Replaces the valid codes from the text content with a DtEmoji component.\n * @returns {Array<VNode\|string>}\n /\n replaceDtEmojis (replaceList, textContent) {\n if (!replaceList.length) return textContent;\n // Escape the asterisk to avoid breaking the regex for the asterisk emoji\n const escapedReplaceList = replaceList.map(item =>\n item.replace(/\\/g, '\\\\'),\n );\n\n const regexp = new RegExp(`(${escapedReplaceList.join('\|')})`, 'g');\n const items = textContent.split(regexp);\n\n return items\n .filter(item => item.trim() !== '')\n .map((item) => {\n if (replaceList.includes(item)) {\n return h(DtEmoji, { code: item, size: this.size });\n }\n return h('span', { class: 'd-emoji-text-wrapper__text' }, item);\n });\n },\n\n /\n Recursively search the Vue virtual DOM to find text\n * @param VNode\n * @returns {VNode\|}\n /\n searchVNodes (VNode) {\n if (!VNode) return;\n if (typeof VNode === 'string') return this.searchCodes(VNode);\n if (VNode.type === COMMENT_TYPE) return VNode;\n if (typeof VNode.type === 'symbol') return this.searchCodes(VNode.children);\n if (VNode.props?.innerHTML) return this.searchVNodes(VNode.props.innerHTML);\n\n const children = Array.isArray(VNode.children) ? VNode.children : [VNode.children];\n return h(VNode.type, VNode.props, children.map(VNodeChild => this.searchVNodes(VNodeChild)));\n },\n\n // TODO: Find a way to crawl vue components\n replaceVueComponentVNodeContent () {\n //\n },\n\n /*\n Find codes in text.\n * @param textContent string\n * @returns {Array<VNode\|string>\|string}\n */\n searchCodes (textContent) {\n const shortcodes = findShortCodes(textContent);\n const emojis = findEmojis(textContent);\n\n const replaceList = [...shortcodes, ...emojis];\n if (replaceList.length === 0) return textContent;\n return this.replaceDtEmojis(replaceList, textContent);\n },\n },\n\n render () {\n const defaultSlotContent = this.$slots.default ? this.$slots.default() : [];\n return h(\n this.elementType,\n {\n 'data-qa': 'emoji-text-wrapper',\n class: 'd-emoji-text-wrapper',\n },\n this.loadingEmojiJson\n ? defaultSlotContent\n : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n );\n },\n};\n</script>\n"],"mappings":";;;;;;AAOA,IAAM,IAAe,EAAE,EAAwB,KAAK,CAAC,CAAC,MAMjD,IAAU;CACb,MAAM;CAEN,YAAY,EACV,SAAA,GACD;CAED,OAAO;EAIL,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT,WAAW,EAAqB,EAAoB;GACrD;EACF;CAED,OAAQ;AACN,SAAO,EACL,kBAAkB,IACnB;;CAGH,MAAM,UAAW;AACf,OAAK,mBAAmB;;CAG1B,SAAS;EAKP,gBAAiB,GAAa,GAAa;AACzC,OAAI,CAAC,EAAY,OAAQ,QAAO;GAEhC,IAAM,IAAqB,EAAY,KAAI,MACzC,EAAK,QAAQ,OAAO,MAAM,CAC3B,EAEK,IAAa,OAAO,IAAI,EAAmB,KAAK,IAAI,CAAC,IAAI,IAAI;AAGnE,UAFc,EAAY,MAAM,EAAO,CAGpC,QAAO,MAAQ,EAAK,MAAK,KAAM,GAAE,CACjC,KAAK,MACA,EAAY,SAAS,EAAK,GACrB,EAAE,GAAS;IAAE,MAAM;IAAM,MAAM,KAAK;IAAM,CAAC,GAE7C,EAAE,QAAQ,EAAE,OAAO,8BAA8B,EAAE,EAAK,CAC/D;;EAQN,aAAc,GAAO;AACnB,OAAI,CAAC,EAAO;AACZ,OAAI,OAAO,KAAU,SAAU,QAAO,KAAK,YAAY,EAAM;AAC7D,OAAI,EAAM,SAAS,EAAc,QAAO;AACxC,OAAI,OAAO,EAAM,QAAS,SAAU,QAAO,KAAK,YAAY,EAAM,SAAS;AAC3E,OAAI,EAAM,OAAO,UAAW,QAAO,KAAK,aAAa,EAAM,MAAM,UAAU;GAE3E,IAAM,IAAW,MAAM,QAAQ,EAAM,SAAQ,GAAI,EAAM,WAAW,CAAC,EAAM,SAAS;AAClF,UAAO,EAAE,EAAM,MAAM,EAAM,OAAO,EAAS,KAAI,MAAc,KAAK,aAAa,EAAW,CAAC,CAAC;;EAI9F,kCAAmC;EASnC,YAAa,GAAa;GACxB,IAAM,IAAa,EAAe,EAAY,EACxC,IAAS,EAAW,EAAY,EAEhC,IAAc,CAAC,GAAG,GAAY,GAAG,EAAO;AAE9C,UADI,EAAY,WAAW,IAAU,IAC9B,KAAK,gBAAgB,GAAa,EAAY;;EAExD;CAED,SAAU;EACR,IAAM,IAAqB,KAAK,OAAO,UAAU,KAAK,OAAO,SAAQ,GAAI,EAAE;AAC3E,SAAO,EACL,KAAK,aACL;GACE,WAAW;GACX,OAAO;GACR,EACD,KAAK,mBACD,IACA,EAAmB,KAAI,MAAS,KAAK,aAAa,EAAM,CAAC,CAC9D;;CAEJ"}

package/dist/lib/empty-state/empty-state.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../text/text.cjs`),n=require(`../stack/stack.cjs`),r=require(`./empty-state-constants.cjs`);let i=require(`vue`);var a=Object.assign({name:`DtEmptyState`},{__name:`EmptyState`,props:{size:{type:[String,Number],default:400,validator:e=>Object.keys(r.EMPTY_STATE_SIZE_MODIFIERS).includes(String(e))},headerText:{type:String,required:!0},bodyText:{type:String,default:null},illustrationClass:{type:[String,Array,Object],default:``},iconClass:{type:[String,Array,Object],default:``},bodyClass:{type:[String,Array,Object],default:``}},setup(a){let o=(0,i.useSlots)(),s=a,c=(0,i.computed)(()=>e.hasSlotContent(o.icon)),l=(0,i.computed)(()=>e.hasSlotContent(o.illustration)),u=(0,i.computed)(()=>c.value&&(!l.value||p.value)),d=(0,i.computed)(()=>l.value&&!p.value),f=(0,i.computed)(()=>String(s.size)),p=(0,i.computed)(()=>f.value===`sm`||f.value===`200`),m=(0,i.computed)(()=>r.EMPTY_STATE_SIZE_MODIFIERS[f.value]),h=(0,i.computed)(()=>[`d-empty-state`,m.value]),g=(0,i.computed)(()=>r.EMPTY_STATE_CONTENT_SIZE_MODIFIERS[f.value]),_=(0,i.computed)(()=>r.EMPTY_STATE_HEADLINE_SIZES[f.value]),v=(0,i.computed)(()=>r.EMPTY_STATE_HEADLINE_DENSITIES[f.value]),y=(0,i.computed)(()=>r.EMPTY_STATE_BODY_SIZES[f.value]),b=(0,i.computed)(()=>r.EMPTY_STATE_BODY_DENSITIES[f.value]);return(0,i.onMounted)(()=>{!s.bodyText&&!e.hasSlotContent(o.body)&&console.error(`DtEmptyState: You should provide either bodyText or content on body slot.`)}),(r,s)=>((0,i.openBlock)(),(0,i.createBlock)((0,i.unref)(n.default),{class:(0,i.normalizeClass)(h.value)},{default:(0,i.withCtx)(()=>[d.value?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,{key:0,class:(0,i.normalizeClass)([`d-empty-state__illustration`,a.illustrationClass])},[(0,i.renderSlot)(r.$slots,`illustration`)],2)):(0,i.createCommentVNode)(``,!0),u.value?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,{key:1,class:(0,i.normalizeClass)([`d-empty-state__icon`,a.iconClass])},[(0,i.renderSlot)(r.$slots,`icon`,{iconSize:`800`})],2)):(0,i.createCommentVNode)(``,!0),(0,i.createVNode)((0,i.unref)(n.default),{gap:`150`,class:(0,i.normalizeClass)([`d-empty-state__content`,g.value])},{default:(0,i.withCtx)(()=>[(0,i.createVNode)((0,i.unref)(t.default),{kind:`headline`,size:_.value,density:v.value,wrap:`balance`,as:`div`,class:`d-empty-state__header-text`},{default:(0,i.withCtx)(()=>[(0,i.createTextVNode)((0,i.toDisplayString)(a.headerText),1)]),_:1},8,[`size`,`density`]),a.bodyText?((0,i.openBlock)(),(0,i.createBlock)((0,i.unref)(t.default),{key:0,kind:`body`,size:y.value,density:b.value,tone:`secondary`,wrap:`balance`,as:`p`,class:`d-empty-state__body-text`},{default:(0,i.withCtx)(()=>[(0,i.createTextVNode)((0,i.toDisplayString)(a.bodyText),1)]),_:1},8,[`size`,`density`])):(0,i.createCommentVNode)(``,!0)]),_:1},8,[`class`]),(0,i.unref)(e.hasSlotContent)((0,i.unref)(o).body)?((0,i.openBlock)(),(0,i.createElementBlock)(`div`,{key:2,class:(0,i.normalizeClass)(a.bodyClass)},[(0,i.renderSlot)(r.$slots,`body`)],2)):(0,i.createCommentVNode)(``,!0)]),_:3},8,[`class`]))}});exports.default=a;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/validators/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../text/text.cjs`),r=require(`../stack/stack.cjs`),i=require(`./empty-state-constants.cjs`);let a=require(`vue`);var o=Object.assign({name:`DtEmptyState`},{__name:`EmptyState`,props:{size:{type:[String,Number],default:400,validator:e.ordinalSizeValidator(i.EMPTY_STATE_SIZE_MODIFIERS)},headerText:{type:String,required:!0},bodyText:{type:String,default:null},illustrationClass:{type:[String,Array,Object],default:``},iconClass:{type:[String,Array,Object],default:``},bodyClass:{type:[String,Array,Object],default:``}},setup(e){let o=(0,a.useSlots)(),s=e,c=(0,a.computed)(()=>t.hasSlotContent(o.icon)),l=(0,a.computed)(()=>t.hasSlotContent(o.illustration)),u=(0,a.computed)(()=>c.value&&(!l.value||p.value)),d=(0,a.computed)(()=>l.value&&!p.value),f=(0,a.computed)(()=>String(s.size)),p=(0,a.computed)(()=>f.value===`sm`||f.value===`200`),m=(0,a.computed)(()=>i.EMPTY_STATE_SIZE_MODIFIERS[f.value]),h=(0,a.computed)(()=>[`d-empty-state`,m.value]),g=(0,a.computed)(()=>i.EMPTY_STATE_CONTENT_SIZE_MODIFIERS[f.value]),_=(0,a.computed)(()=>i.EMPTY_STATE_HEADLINE_SIZES[f.value]),v=(0,a.computed)(()=>i.EMPTY_STATE_HEADLINE_DENSITIES[f.value]),y=(0,a.computed)(()=>i.EMPTY_STATE_BODY_SIZES[f.value]),b=(0,a.computed)(()=>i.EMPTY_STATE_BODY_DENSITIES[f.value]);return(0,a.onMounted)(()=>{!s.bodyText&&!t.hasSlotContent(o.body)&&console.error(`DtEmptyState: You should provide either bodyText or content on body slot.`)}),(i,s)=>((0,a.openBlock)(),(0,a.createBlock)((0,a.unref)(r.default),{class:(0,a.normalizeClass)(h.value)},{default:(0,a.withCtx)(()=>[d.value?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:0,class:(0,a.normalizeClass)([`d-empty-state__illustration`,e.illustrationClass])},[(0,a.renderSlot)(i.$slots,`illustration`)],2)):(0,a.createCommentVNode)(``,!0),u.value?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:1,class:(0,a.normalizeClass)([`d-empty-state__icon`,e.iconClass])},[(0,a.renderSlot)(i.$slots,`icon`,{iconSize:`800`})],2)):(0,a.createCommentVNode)(``,!0),(0,a.createVNode)((0,a.unref)(r.default),{gap:`150`,class:(0,a.normalizeClass)([`d-empty-state__content`,g.value])},{default:(0,a.withCtx)(()=>[(0,a.createVNode)((0,a.unref)(n.default),{kind:`headline`,size:_.value,density:v.value,wrap:`balance`,as:`div`,class:`d-empty-state__header-text`},{default:(0,a.withCtx)(()=>[(0,a.createTextVNode)((0,a.toDisplayString)(e.headerText),1)]),_:1},8,[`size`,`density`]),e.bodyText?((0,a.openBlock)(),(0,a.createBlock)((0,a.unref)(n.default),{key:0,kind:`body`,size:y.value,density:b.value,tone:`secondary`,wrap:`balance`,as:`p`,class:`d-empty-state__body-text`},{default:(0,a.withCtx)(()=>[(0,a.createTextVNode)((0,a.toDisplayString)(e.bodyText),1)]),_:1},8,[`size`,`density`])):(0,a.createCommentVNode)(``,!0)]),_:1},8,[`class`]),(0,a.unref)(t.hasSlotContent)((0,a.unref)(o).body)?((0,a.openBlock)(),(0,a.createElementBlock)(`div`,{key:2,class:(0,a.normalizeClass)(e.bodyClass)},[(0,a.renderSlot)(i.$slots,`body`)],2)):(0,a.createCommentVNode)(``,!0)]),_:3},8,[`class`]))}});exports.default=o;
 //# sourceMappingURL=empty-state.cjs.map

package/dist/lib/empty-state/empty-state.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"empty-state.cjs","names":[],"sources":["../../../components/EmptyState/EmptyState.vue"],"sourcesContent":["<template>\n <dt-stack\n :class=\"emptyStateClasses\"\n >\n <span\n v-if=\"showIllustration\"\n :class=\"['d-empty-state__illustration', illustrationClass]\"\n >\n <!-- @slot Slot for the illustration. Displays when size is 'lg' or 'md'. Overrides icon. -->\n <slot name=\"illustration\" />\n </span>\n\n <span\n v-if=\"showIcon\"\n :class=\"['d-empty-state__icon', iconClass]\"\n >\n <!-- @slot Slot for the icon. Displayed if illustration is not provided. -->\n <slot\n name=\"icon\"\n :icon-size=\"'800'\"\n />\n </span>\n\n <dt-stack\n gap=\"150\"\n :class=\"['d-empty-state__content', contentClass]\"\n >\n <dt-text\n kind=\"headline\"\n :size=\"headlineSize\"\n :density=\"headlineDensity\"\n wrap=\"balance\"\n as=\"div\"\n class=\"d-empty-state__header-text\"\n >\n {{ headerText }}\n </dt-text>\n\n <dt-text\n v-if=\"bodyText\"\n kind=\"body\"\n :size=\"bodySize\"\n :density=\"bodyDensity\"\n tone=\"secondary\"\n wrap=\"balance\"\n as=\"p\"\n class=\"d-empty-state__body-text\"\n >\n {{ bodyText }}\n </dt-text>\n </dt-stack>\n\n <div\n v-if=\"hasSlotContent(slots.body)\"\n :class=\"bodyClass\"\n >\n <slot name=\"body\" />\n </div>\n </dt-stack>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { DtStack } from '@/components/Stack';\nimport { DtText } from '@/components/Text';\nimport { hasSlotContent } from '@/common/utils';\nimport {\n EMPTY_STATE_BODY_DENSITIES,\n EMPTY_STATE_BODY_SIZES,\n EMPTY_STATE_CONTENT_SIZE_MODIFIERS,\n EMPTY_STATE_HEADLINE_DENSITIES,\n EMPTY_STATE_HEADLINE_SIZES,\n EMPTY_STATE_SIZE_MODIFIERS,\n} from './EmptyStateConstants.js';\n\ndefineOptions({\n name: 'DtEmptyState',\n});\n\nconst slots = useSlots();\n\nconst props = defineProps({\n /*\n The empty state size.\n * @values 200, 300, 400\n /\n size: {\n type: [String, Number],\n default: 400,\n validator: (~~s) => Object.keys(~~EMPTY_STATE_SIZE_MODIFIERS)~~.includes(String(s))~~,\n },\n\n /\n Header text\n * @type {String}\n /\n headerText: {\n type: String,\n required: true,\n },\n\n /\n Body text\n * @type {String}\n /\n bodyText: {\n type: String,\n default: null,\n },\n\n /\n Additional class name for the illustration wrapper element.\n /\n illustrationClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional class name for the icon wrapper element.\n /\n iconClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional class name for the body slot wrapper element.\n /\n bodyClass: {\n type: [String, Array, Object],\n default: '',\n },\n});\n\nconst hasIcon = computed(() => {\n return hasSlotContent(slots.icon);\n});\nconst hasIllustration = computed(() => hasSlotContent(slots.illustration));\n\n/\n Icon will be shown in lg and md size only if illustration is not provided\n * Icon will always be shown in sm size\n /\nconst showIcon = computed(() => hasIcon.value && (!hasIllustration.value \|\| isSmallSize.value));\n\n/\n Illustration will always be shown in lg and md size\n * Illustration will not be shown in sm size\n */\nconst showIllustration = computed(() => hasIllustration.value && !isSmallSize.value);\n\nconst sizeKey = computed(() => String(props.size));\nconst isSmallSize = computed(() => sizeKey.value === 'sm' \|\| sizeKey.value === '200');\n\nconst sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[sizeKey.value]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst contentClass = computed(() => EMPTY_STATE_CONTENT_SIZE_MODIFIERS[sizeKey.value]);\n\nconst headlineSize = computed(() => EMPTY_STATE_HEADLINE_SIZES[sizeKey.value]);\nconst headlineDensity = computed(() => EMPTY_STATE_HEADLINE_DENSITIES[sizeKey.value]);\n\nconst bodySize = computed(() => EMPTY_STATE_BODY_SIZES[sizeKey.value]);\nconst bodyDensity = computed(() => EMPTY_STATE_BODY_DENSITIES[sizeKey.value]);\n\nonMounted(() => {\n if (!props.bodyText && !hasSlotContent(slots.body)) {\n console.error('DtEmptyState: You should provide either bodyText or content on body slot.');\n }\n});\n</script>\n"],"mappings":"~~ytBA+EA~~,IAAM,GAAA,EAAA,EAAA,WAAkB,CAElB,EAAQ,EAsDR,GAAA,EAAA,EAAA,cACG,EAAA,eAAe,EAAM,KAAK,CACjC,CACI,GAAA,EAAA,EAAA,cAAiC,EAAA,eAAe,EAAM,aAAa,CAAC,CAMpE,GAAA,EAAA,EAAA,cAA0B,EAAQ,QAAU,CAAC,EAAgB,OAAS,EAAY,OAAO,CAMzF,GAAA,EAAA,EAAA,cAAkC,EAAgB,OAAS,CAAC,EAAY,MAAM,CAE9E,GAAA,EAAA,EAAA,cAAyB,OAAO,EAAM,KAAK,CAAC,CAC5C,GAAA,EAAA,EAAA,cAA6B,EAAQ,QAAU,MAAQ,EAAQ,QAAU,MAAM,CAE/E,GAAA,EAAA,EAAA,cAA2B,EAAA,2BAA2B,EAAQ,OAAO,CAErE,GAAA,EAAA,EAAA,cAAmC,CAAC,gBAAiB,EAAU,MAAM,CAAC,CAEtE,GAAA,EAAA,EAAA,cAA8B,EAAA,mCAAmC,EAAQ,OAAO,CAEhF,GAAA,EAAA,EAAA,cAA8B,EAAA,2BAA2B,EAAQ,OAAO,CACxE,GAAA,EAAA,EAAA,cAAiC,EAAA,+BAA+B,EAAQ,OAAO,CAE/E,GAAA,EAAA,EAAA,cAA0B,EAAA,uBAAuB,EAAQ,OAAO,CAChE,GAAA,EAAA,EAAA,cAA6B,EAAA,2BAA2B,EAAQ,OAAO,QAE7E,EAAA,EAAA,eAAgB,CACV,CAAC,EAAM,UAAY,CAAC,EAAA,eAAe,EAAM,KAAK,EAChD,QAAQ,MAAM,4EAA4E,EAE5F,~~yDAjHW~~,EAAA,QAAA,CAAA,CAxDR,OAAA,EAAA,EAAA,gBAAO,EAAA,MAAiB,CAAA,CAAA,2BAQlB,CALC,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAKD,OAAA,OAJJ,OAAA,EAAA,EAAA,gBAAK,CAAA,8BAAkC,EAAA,kBAAiB,CAAA,oBAG7B,EAAA,OAAA,eAAA,CAAA,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAItB,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAQD,OAAA,OAPJ,OAAA,EAAA,EAAA,gBAAK,CAAA,sBAA0B,EAAA,UAAS,CAAA,oBAMvC,EAAA,OAAA,OAAA,CADC,SAAW,MAAK,CAAA,CAAA,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,+BA+BV,EAAA,QAAA,CAAA,CA1BT,IAAI,MACH,OAAA,EAAA,EAAA,gBAAK,CAAA,yBAA6B,EAAA,MAAY,CAAA,6BAWrC,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CARR,KAAK,WACJ,KAAM,EAAA,MACN,QAAS,EAAA,MACV,KAAK,UACL,GAAG,MACH,MAAM,yDAEU,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAb,EAAA,WAAU,CAAA,EAAA,CAAA,CAAA,4BAIP,EAAA,WAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAUE,EAAA,QAAA,CAAA,OATR,KAAK,OACJ,KAAM,EAAA,MACN,QAAS,EAAA,MACV,KAAK,YACL,KAAK,UACL,GAAG,IACH,MAAM,uDAEQ,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAX,EAAA,SAAQ,CAAA,EAAA,CAAA,CAAA,6FAKP,EAAA,eAAc,EAAA,EAAA,EAAA,OAAC,EAAK,CAAC,KAAI,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAI3B,MAAA,OAHH,OAAA,EAAA,EAAA,gBAAO,EAAA,UAAS,oBAEG,EAAA,OAAA,OAAA,CAAA,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA"}
1	+ {"version":3,"file":"empty-state.cjs","names":[],"sources":["../../../components/EmptyState/EmptyState.vue"],"sourcesContent":["<template>\n <dt-stack\n :class=\"emptyStateClasses\"\n >\n <span\n v-if=\"showIllustration\"\n :class=\"['d-empty-state__illustration', illustrationClass]\"\n >\n <!-- @slot Slot for the illustration. Displays when size is 'lg' or 'md'. Overrides icon. -->\n <slot name=\"illustration\" />\n </span>\n\n <span\n v-if=\"showIcon\"\n :class=\"['d-empty-state__icon', iconClass]\"\n >\n <!-- @slot Slot for the icon. Displayed if illustration is not provided. -->\n <slot\n name=\"icon\"\n :icon-size=\"'800'\"\n />\n </span>\n\n <dt-stack\n gap=\"150\"\n :class=\"['d-empty-state__content', contentClass]\"\n >\n <dt-text\n kind=\"headline\"\n :size=\"headlineSize\"\n :density=\"headlineDensity\"\n wrap=\"balance\"\n as=\"div\"\n class=\"d-empty-state__header-text\"\n >\n {{ headerText }}\n </dt-text>\n\n <dt-text\n v-if=\"bodyText\"\n kind=\"body\"\n :size=\"bodySize\"\n :density=\"bodyDensity\"\n tone=\"secondary\"\n wrap=\"balance\"\n as=\"p\"\n class=\"d-empty-state__body-text\"\n >\n {{ bodyText }}\n </dt-text>\n </dt-stack>\n\n <div\n v-if=\"hasSlotContent(slots.body)\"\n :class=\"bodyClass\"\n >\n <slot name=\"body\" />\n </div>\n </dt-stack>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { DtStack } from '@/components/Stack';\nimport { DtText } from '@/components/Text';\nimport { hasSlotContent } from '@/common/utils';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport {\n EMPTY_STATE_BODY_DENSITIES,\n EMPTY_STATE_BODY_SIZES,\n EMPTY_STATE_CONTENT_SIZE_MODIFIERS,\n EMPTY_STATE_HEADLINE_DENSITIES,\n EMPTY_STATE_HEADLINE_SIZES,\n EMPTY_STATE_SIZE_MODIFIERS,\n} from './EmptyStateConstants.js';\n\ndefineOptions({\n name: 'DtEmptyState',\n});\n\nconst slots = useSlots();\n\nconst props = defineProps({\n /*\n The empty state size.\n * @values 200, 300, 400\n /\n size: {\n type: [String, Number],\n default: 400,\n validator: ordinalSizeValidator(EMPTY_STATE_SIZE_MODIFIERS),\n },\n\n /\n Header text\n * @type {String}\n /\n headerText: {\n type: String,\n required: true,\n },\n\n /\n Body text\n * @type {String}\n /\n bodyText: {\n type: String,\n default: null,\n },\n\n /\n Additional class name for the illustration wrapper element.\n /\n illustrationClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional class name for the icon wrapper element.\n /\n iconClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional class name for the body slot wrapper element.\n /\n bodyClass: {\n type: [String, Array, Object],\n default: '',\n },\n});\n\nconst hasIcon = computed(() => {\n return hasSlotContent(slots.icon);\n});\nconst hasIllustration = computed(() => hasSlotContent(slots.illustration));\n\n/\n Icon will be shown in lg and md size only if illustration is not provided\n * Icon will always be shown in sm size\n /\nconst showIcon = computed(() => hasIcon.value && (!hasIllustration.value \|\| isSmallSize.value));\n\n/\n Illustration will always be shown in lg and md size\n * Illustration will not be shown in sm size\n */\nconst showIllustration = computed(() => hasIllustration.value && !isSmallSize.value);\n\nconst sizeKey = computed(() => String(props.size));\nconst isSmallSize = computed(() => sizeKey.value === 'sm' \|\| sizeKey.value === '200');\n\nconst sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[sizeKey.value]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst contentClass = computed(() => EMPTY_STATE_CONTENT_SIZE_MODIFIERS[sizeKey.value]);\n\nconst headlineSize = computed(() => EMPTY_STATE_HEADLINE_SIZES[sizeKey.value]);\nconst headlineDensity = computed(() => EMPTY_STATE_HEADLINE_DENSITIES[sizeKey.value]);\n\nconst bodySize = computed(() => EMPTY_STATE_BODY_SIZES[sizeKey.value]);\nconst bodyDensity = computed(() => EMPTY_STATE_BODY_DENSITIES[sizeKey.value]);\n\nonMounted(() => {\n if (!props.bodyText && !hasSlotContent(slots.body)) {\n console.error('DtEmptyState: You should provide either bodyText or content on body slot.');\n }\n});\n</script>\n"],"mappings":"4vBAgFA,IAAM,GAAA,EAAA,EAAA,WAAkB,CAElB,EAAQ,EAsDR,GAAA,EAAA,EAAA,cACG,EAAA,eAAe,EAAM,KAAK,CACjC,CACI,GAAA,EAAA,EAAA,cAAiC,EAAA,eAAe,EAAM,aAAa,CAAC,CAMpE,GAAA,EAAA,EAAA,cAA0B,EAAQ,QAAU,CAAC,EAAgB,OAAS,EAAY,OAAO,CAMzF,GAAA,EAAA,EAAA,cAAkC,EAAgB,OAAS,CAAC,EAAY,MAAM,CAE9E,GAAA,EAAA,EAAA,cAAyB,OAAO,EAAM,KAAK,CAAC,CAC5C,GAAA,EAAA,EAAA,cAA6B,EAAQ,QAAU,MAAQ,EAAQ,QAAU,MAAM,CAE/E,GAAA,EAAA,EAAA,cAA2B,EAAA,2BAA2B,EAAQ,OAAO,CAErE,GAAA,EAAA,EAAA,cAAmC,CAAC,gBAAiB,EAAU,MAAM,CAAC,CAEtE,GAAA,EAAA,EAAA,cAA8B,EAAA,mCAAmC,EAAQ,OAAO,CAEhF,GAAA,EAAA,EAAA,cAA8B,EAAA,2BAA2B,EAAQ,OAAO,CACxE,GAAA,EAAA,EAAA,cAAiC,EAAA,+BAA+B,EAAQ,OAAO,CAE/E,GAAA,EAAA,EAAA,cAA0B,EAAA,uBAAuB,EAAQ,OAAO,CAChE,GAAA,EAAA,EAAA,cAA6B,EAAA,2BAA2B,EAAQ,OAAO,QAE7E,EAAA,EAAA,eAAgB,CACV,CAAC,EAAM,UAAY,CAAC,EAAA,eAAe,EAAM,KAAK,EAChD,QAAQ,MAAM,4EAA4E,EAE5F,yDAlHW,EAAA,QAAA,CAAA,CAxDR,OAAA,EAAA,EAAA,gBAAO,EAAA,MAAiB,CAAA,CAAA,2BAQlB,CALC,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAKD,OAAA,OAJJ,OAAA,EAAA,EAAA,gBAAK,CAAA,8BAAkC,EAAA,kBAAiB,CAAA,oBAG7B,EAAA,OAAA,eAAA,CAAA,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAItB,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAQD,OAAA,OAPJ,OAAA,EAAA,EAAA,gBAAK,CAAA,sBAA0B,EAAA,UAAS,CAAA,oBAMvC,EAAA,OAAA,OAAA,CADC,SAAW,MAAK,CAAA,CAAA,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,+BA+BV,EAAA,QAAA,CAAA,CA1BT,IAAI,MACH,OAAA,EAAA,EAAA,gBAAK,CAAA,yBAA6B,EAAA,MAAY,CAAA,6BAWrC,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CARR,KAAK,WACJ,KAAM,EAAA,MACN,QAAS,EAAA,MACV,KAAK,UACL,GAAG,MACH,MAAM,yDAEU,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAb,EAAA,WAAU,CAAA,EAAA,CAAA,CAAA,4BAIP,EAAA,WAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAUE,EAAA,QAAA,CAAA,OATR,KAAK,OACJ,KAAM,EAAA,MACN,QAAS,EAAA,MACV,KAAK,YACL,KAAK,UACL,GAAG,IACH,MAAM,uDAEQ,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAX,EAAA,SAAQ,CAAA,EAAA,CAAA,CAAA,6FAKP,EAAA,eAAc,EAAA,EAAA,EAAA,OAAC,EAAK,CAAC,KAAI,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAI3B,MAAA,OAHH,OAAA,EAAA,EAAA,gBAAO,EAAA,UAAS,oBAEG,EAAA,OAAA,OAAA,CAAA,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA"}

package/dist/lib/empty-state/empty-state.js CHANGED Viewed

@@ -1,16 +1,17 @@
-import { hasSlotContent as e } from "../../common/utils/index.js";
-import t from "../text/text.js";
-import n from "../stack/stack.js";
-import { EMPTY_STATE_BODY_DENSITIES as r, EMPTY_STATE_BODY_SIZES as i, EMPTY_STATE_CONTENT_SIZE_MODIFIERS as a, EMPTY_STATE_HEADLINE_DENSITIES as o, EMPTY_STATE_HEADLINE_SIZES as s, EMPTY_STATE_SIZE_MODIFIERS as c } from "./empty-state-constants.js";
-import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createTextVNode as p, createVNode as m, normalizeClass as h, onMounted as g, openBlock as _, renderSlot as v, toDisplayString as y, unref as b, useSlots as x, withCtx as S } from "vue";
+import { ordinalSizeValidator as e } from "../../common/validators/index.js";
+import { hasSlotContent as t } from "../../common/utils/index.js";
+import n from "../text/text.js";
+import r from "../stack/stack.js";
+import { EMPTY_STATE_BODY_DENSITIES as i, EMPTY_STATE_BODY_SIZES as a, EMPTY_STATE_CONTENT_SIZE_MODIFIERS as o, EMPTY_STATE_HEADLINE_DENSITIES as s, EMPTY_STATE_HEADLINE_SIZES as c, EMPTY_STATE_SIZE_MODIFIERS as l } from "./empty-state-constants.js";
+import { computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createTextVNode as m, createVNode as h, normalizeClass as g, onMounted as _, openBlock as v, renderSlot as y, toDisplayString as b, unref as x, useSlots as S, withCtx as C } from "vue";
 //#region components/EmptyState/EmptyState.vue
-var C = /* @__PURE__ */ Object.assign({ name: "DtEmptyState" }, {
+var w = /* @__PURE__ */ Object.assign({ name: "DtEmptyState" }, {
 	__name: "EmptyState",
 	props: {
 		size: {
 			type: [String, Number],
 			default: 400,
-			validator: (e) => Object.keys(c).includes(String(e))
+			validator: e(l)
 		},
 		headerText: {
 			type: String,
@@ -45,25 +46,25 @@ var C = /* @__PURE__ */ Object.assign({ name: "DtEmptyState" }, {
 			default: ""
 		}
 	},
-	setup(C) {
-		let w = x(), T = C, E = l(() => e(w.icon)), D = l(() => e(w.illustration)), O = l(() => E.value && (!D.value || j.value)), k = l(() => D.value && !j.value), A = l(() => String(T.size)), j = l(() => A.value === "sm" || A.value === "200"), M = l(() => c[A.value]), N = l(() => ["d-empty-state", M.value]), P = l(() => a[A.value]), F = l(() => s[A.value]), I = l(() => o[A.value]), L = l(() => i[A.value]), R = l(() => r[A.value]);
-		return g(() => {
-			!T.bodyText && !e(w.body) && console.error("DtEmptyState: You should provide either bodyText or content on body slot.");
-		}), (r, i) => (_(), u(b(n), { class: h(N.value) }, {
-			default: S(() => [
-				k.value ? (_(), f("span", {
+	setup(e) {
+		let w = S(), T = e, E = u(() => t(w.icon)), D = u(() => t(w.illustration)), O = u(() => E.value && (!D.value || j.value)), k = u(() => D.value && !j.value), A = u(() => String(T.size)), j = u(() => A.value === "sm" || A.value === "200"), M = u(() => l[A.value]), N = u(() => ["d-empty-state", M.value]), P = u(() => o[A.value]), F = u(() => c[A.value]), I = u(() => s[A.value]), L = u(() => a[A.value]), R = u(() => i[A.value]);
+		return _(() => {
+			!T.bodyText && !t(w.body) && console.error("DtEmptyState: You should provide either bodyText or content on body slot.");
+		}), (i, a) => (v(), d(x(r), { class: g(N.value) }, {
+			default: C(() => [
+				k.value ? (v(), p("span", {
 					key: 0,
-					class: h(["d-empty-state__illustration", C.illustrationClass])
-				}, [v(r.$slots, "illustration")], 2)) : d("", !0),
-				O.value ? (_(), f("span", {
+					class: g(["d-empty-state__illustration", e.illustrationClass])
+				}, [y(i.$slots, "illustration")], 2)) : f("", !0),
+				O.value ? (v(), p("span", {
 					key: 1,
-					class: h(["d-empty-state__icon", C.iconClass])
-				}, [v(r.$slots, "icon", { iconSize: "800" })], 2)) : d("", !0),
-				m(b(n), {
+					class: g(["d-empty-state__icon", e.iconClass])
+				}, [y(i.$slots, "icon", { iconSize: "800" })], 2)) : f("", !0),
+				h(x(r), {
 					gap: "150",
-					class: h(["d-empty-state__content", P.value])
+					class: g(["d-empty-state__content", P.value])
 				}, {
-					default: S(() => [m(b(t), {
+					default: C(() => [h(x(n), {
 						kind: "headline",
 						size: F.value,
 						density: I.value,
@@ -71,9 +72,9 @@ var C = /* @__PURE__ */ Object.assign({ name: "DtEmptyState" }, {
 						as: "div",
 						class: "d-empty-state__header-text"
 					}, {
-						default: S(() => [p(y(C.headerText), 1)]),
+						default: C(() => [m(b(e.headerText), 1)]),
 						_: 1
-					}, 8, ["size", "density"]), C.bodyText ? (_(), u(b(t), {
+					}, 8, ["size", "density"]), e.bodyText ? (v(), d(x(n), {
 						key: 0,
 						kind: "body",
 						size: L.value,
@@ -83,21 +84,21 @@ var C = /* @__PURE__ */ Object.assign({ name: "DtEmptyState" }, {
 						as: "p",
 						class: "d-empty-state__body-text"
 					}, {
-						default: S(() => [p(y(C.bodyText), 1)]),
+						default: C(() => [m(b(e.bodyText), 1)]),
 						_: 1
-					}, 8, ["size", "density"])) : d("", !0)]),
+					}, 8, ["size", "density"])) : f("", !0)]),
 					_: 1
 				}, 8, ["class"]),
-				b(e)(b(w).body) ? (_(), f("div", {
+				x(t)(x(w).body) ? (v(), p("div", {
 					key: 2,
-					class: h(C.bodyClass)
-				}, [v(r.$slots, "body")], 2)) : d("", !0)
+					class: g(e.bodyClass)
+				}, [y(i.$slots, "body")], 2)) : f("", !0)
 			]),
 			_: 3
 		}, 8, ["class"]));
 	}
 });
 //#endregion
-export { C as default };
+export { w as default };
 //# sourceMappingURL=empty-state.js.map

package/dist/lib/empty-state/empty-state.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"empty-state.js","names":[],"sources":["../../../components/EmptyState/EmptyState.vue"],"sourcesContent":["<template>\n <dt-stack\n :class=\"emptyStateClasses\"\n >\n <span\n v-if=\"showIllustration\"\n :class=\"['d-empty-state__illustration', illustrationClass]\"\n >\n <!-- @slot Slot for the illustration. Displays when size is 'lg' or 'md'. Overrides icon. -->\n <slot name=\"illustration\" />\n </span>\n\n <span\n v-if=\"showIcon\"\n :class=\"['d-empty-state__icon', iconClass]\"\n >\n <!-- @slot Slot for the icon. Displayed if illustration is not provided. -->\n <slot\n name=\"icon\"\n :icon-size=\"'800'\"\n />\n </span>\n\n <dt-stack\n gap=\"150\"\n :class=\"['d-empty-state__content', contentClass]\"\n >\n <dt-text\n kind=\"headline\"\n :size=\"headlineSize\"\n :density=\"headlineDensity\"\n wrap=\"balance\"\n as=\"div\"\n class=\"d-empty-state__header-text\"\n >\n {{ headerText }}\n </dt-text>\n\n <dt-text\n v-if=\"bodyText\"\n kind=\"body\"\n :size=\"bodySize\"\n :density=\"bodyDensity\"\n tone=\"secondary\"\n wrap=\"balance\"\n as=\"p\"\n class=\"d-empty-state__body-text\"\n >\n {{ bodyText }}\n </dt-text>\n </dt-stack>\n\n <div\n v-if=\"hasSlotContent(slots.body)\"\n :class=\"bodyClass\"\n >\n <slot name=\"body\" />\n </div>\n </dt-stack>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { DtStack } from '@/components/Stack';\nimport { DtText } from '@/components/Text';\nimport { hasSlotContent } from '@/common/utils';\nimport {\n EMPTY_STATE_BODY_DENSITIES,\n EMPTY_STATE_BODY_SIZES,\n EMPTY_STATE_CONTENT_SIZE_MODIFIERS,\n EMPTY_STATE_HEADLINE_DENSITIES,\n EMPTY_STATE_HEADLINE_SIZES,\n EMPTY_STATE_SIZE_MODIFIERS,\n} from './EmptyStateConstants.js';\n\ndefineOptions({\n name: 'DtEmptyState',\n});\n\nconst slots = useSlots();\n\nconst props = defineProps({\n /*\n The empty state size.\n * @values 200, 300, 400\n /\n size: {\n type: [String, Number],\n default: 400,\n validator: (~~s) => Object.keys(~~EMPTY_STATE_SIZE_MODIFIERS)~~.includes(String(s))~~,\n },\n\n /\n Header text\n * @type {String}\n /\n headerText: {\n type: String,\n required: true,\n },\n\n /\n Body text\n * @type {String}\n /\n bodyText: {\n type: String,\n default: null,\n },\n\n /\n Additional class name for the illustration wrapper element.\n /\n illustrationClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional class name for the icon wrapper element.\n /\n iconClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional class name for the body slot wrapper element.\n /\n bodyClass: {\n type: [String, Array, Object],\n default: '',\n },\n});\n\nconst hasIcon = computed(() => {\n return hasSlotContent(slots.icon);\n});\nconst hasIllustration = computed(() => hasSlotContent(slots.illustration));\n\n/\n Icon will be shown in lg and md size only if illustration is not provided\n * Icon will always be shown in sm size\n /\nconst showIcon = computed(() => hasIcon.value && (!hasIllustration.value \|\| isSmallSize.value));\n\n/\n Illustration will always be shown in lg and md size\n * Illustration will not be shown in sm size\n */\nconst showIllustration = computed(() => hasIllustration.value && !isSmallSize.value);\n\nconst sizeKey = computed(() => String(props.size));\nconst isSmallSize = computed(() => sizeKey.value === 'sm' \|\| sizeKey.value === '200');\n\nconst sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[sizeKey.value]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst contentClass = computed(() => EMPTY_STATE_CONTENT_SIZE_MODIFIERS[sizeKey.value]);\n\nconst headlineSize = computed(() => EMPTY_STATE_HEADLINE_SIZES[sizeKey.value]);\nconst headlineDensity = computed(() => EMPTY_STATE_HEADLINE_DENSITIES[sizeKey.value]);\n\nconst bodySize = computed(() => EMPTY_STATE_BODY_SIZES[sizeKey.value]);\nconst bodyDensity = computed(() => EMPTY_STATE_BODY_DENSITIES[sizeKey.value]);\n\nonMounted(() => {\n if (!props.bodyText && !hasSlotContent(slots.body)) {\n console.error('DtEmptyState: You should provide either bodyText or content on body slot.');\n }\n});\n</script>\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+EA~~,IAAM,IAAQ,GAAU,EAElB,IAAQ,GAsDR,IAAU,QACP,EAAe,EAAM,KAAK,CACjC,EACI,IAAkB,QAAe,EAAe,EAAM,aAAa,CAAC,EAMpE,IAAW,QAAe,EAAQ,UAAU,CAAC,EAAgB,SAAS,EAAY,OAAO,EAMzF,IAAmB,QAAe,EAAgB,SAAS,CAAC,EAAY,MAAM,EAE9E,IAAU,QAAe,OAAO,EAAM,KAAK,CAAC,EAC5C,IAAc,QAAe,EAAQ,UAAU,QAAQ,EAAQ,UAAU,MAAM,EAE/E,IAAY,QAAe,EAA2B,EAAQ,OAAO,EAErE,IAAoB,QAAe,CAAC,iBAAiB,EAAU,MAAM,CAAC,EAEtE,IAAe,QAAe,EAAmC,EAAQ,OAAO,EAEhF,IAAe,QAAe,EAA2B,EAAQ,OAAO,EACxE,IAAkB,QAAe,EAA+B,EAAQ,OAAO,EAE/E,IAAW,QAAe,EAAuB,EAAQ,OAAO,EAChE,IAAc,QAAe,EAA2B,EAAQ,OAAO;SAE7E,QAAgB;AACd,GAAI,CAAC,EAAM,YAAY,CAAC,EAAe,EAAM,KAAK,IAChD,QAAQ,MAAM,4EAA4E;IAE5F,~~kBA1KA~~,EAyDW,EAAA,EAAA,EAAA,EAxDR,OAAK,EAAE,EAAA,MAAiB,EAAA,EAAA;oBAQlB;IALC,EAAA,SAAA,GAAA,EADR,EAMO,QAAA;;KAJJ,OAAK,EAAA,CAAA,+BAAkC,EAAA,kBAAiB,CAAA;QAGzD,EAA4B,EAAA,QAAA,eAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;IAItB,EAAA,SAAA,GAAA,EADR,EASO,QAAA;;KAPJ,OAAK,EAAA,CAAA,uBAA0B,EAAA,UAAS,CAAA;QAGzC,EAGE,EAAA,QAAA,QAAA,EADC,UAAW,OAAK,CAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;IAIrB,EA2BW,EAAA,EAAA,EAAA;KA1BT,KAAI;KACH,OAAK,EAAA,CAAA,0BAA6B,EAAA,MAAY,CAAA;;sBAWrC,CATV,EASU,EAAA,EAAA,EAAA;MARR,MAAK;MACJ,MAAM,EAAA;MACN,SAAS,EAAA;MACV,MAAK;MACL,IAAG;MACH,OAAM;;uBAEU,CAAA,EAAA,EAAb,EAAA,WAAU,EAAA,EAAA,CAAA,CAAA;;iCAIP,EAAA,YAAA,GAAA,EADR,EAWU,EAAA,EAAA,EAAA;;MATR,MAAK;MACJ,MAAM,EAAA;MACN,SAAS,EAAA;MACV,MAAK;MACL,MAAK;MACL,IAAG;MACH,OAAM;;uBAEQ,CAAA,EAAA,EAAX,EAAA,SAAQ,EAAA,EAAA,CAAA,CAAA;;;;;IAKP,EAAA,EAAc,CAAC,EAAA,EAAK,CAAC,KAAI,IAAA,GAAA,EADjC,EAKM,OAAA;;KAHH,OAAK,EAAE,EAAA,UAAS;QAEjB,EAAoB,EAAA,QAAA,OAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA"}
1	+ {"version":3,"file":"empty-state.js","names":[],"sources":["../../../components/EmptyState/EmptyState.vue"],"sourcesContent":["<template>\n <dt-stack\n :class=\"emptyStateClasses\"\n >\n <span\n v-if=\"showIllustration\"\n :class=\"['d-empty-state__illustration', illustrationClass]\"\n >\n <!-- @slot Slot for the illustration. Displays when size is 'lg' or 'md'. Overrides icon. -->\n <slot name=\"illustration\" />\n </span>\n\n <span\n v-if=\"showIcon\"\n :class=\"['d-empty-state__icon', iconClass]\"\n >\n <!-- @slot Slot for the icon. Displayed if illustration is not provided. -->\n <slot\n name=\"icon\"\n :icon-size=\"'800'\"\n />\n </span>\n\n <dt-stack\n gap=\"150\"\n :class=\"['d-empty-state__content', contentClass]\"\n >\n <dt-text\n kind=\"headline\"\n :size=\"headlineSize\"\n :density=\"headlineDensity\"\n wrap=\"balance\"\n as=\"div\"\n class=\"d-empty-state__header-text\"\n >\n {{ headerText }}\n </dt-text>\n\n <dt-text\n v-if=\"bodyText\"\n kind=\"body\"\n :size=\"bodySize\"\n :density=\"bodyDensity\"\n tone=\"secondary\"\n wrap=\"balance\"\n as=\"p\"\n class=\"d-empty-state__body-text\"\n >\n {{ bodyText }}\n </dt-text>\n </dt-stack>\n\n <div\n v-if=\"hasSlotContent(slots.body)\"\n :class=\"bodyClass\"\n >\n <slot name=\"body\" />\n </div>\n </dt-stack>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { DtStack } from '@/components/Stack';\nimport { DtText } from '@/components/Text';\nimport { hasSlotContent } from '@/common/utils';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport {\n EMPTY_STATE_BODY_DENSITIES,\n EMPTY_STATE_BODY_SIZES,\n EMPTY_STATE_CONTENT_SIZE_MODIFIERS,\n EMPTY_STATE_HEADLINE_DENSITIES,\n EMPTY_STATE_HEADLINE_SIZES,\n EMPTY_STATE_SIZE_MODIFIERS,\n} from './EmptyStateConstants.js';\n\ndefineOptions({\n name: 'DtEmptyState',\n});\n\nconst slots = useSlots();\n\nconst props = defineProps({\n /*\n The empty state size.\n * @values 200, 300, 400\n /\n size: {\n type: [String, Number],\n default: 400,\n validator: ordinalSizeValidator(EMPTY_STATE_SIZE_MODIFIERS),\n },\n\n /\n Header text\n * @type {String}\n /\n headerText: {\n type: String,\n required: true,\n },\n\n /\n Body text\n * @type {String}\n /\n bodyText: {\n type: String,\n default: null,\n },\n\n /\n Additional class name for the illustration wrapper element.\n /\n illustrationClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional class name for the icon wrapper element.\n /\n iconClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional class name for the body slot wrapper element.\n /\n bodyClass: {\n type: [String, Array, Object],\n default: '',\n },\n});\n\nconst hasIcon = computed(() => {\n return hasSlotContent(slots.icon);\n});\nconst hasIllustration = computed(() => hasSlotContent(slots.illustration));\n\n/\n Icon will be shown in lg and md size only if illustration is not provided\n * Icon will always be shown in sm size\n /\nconst showIcon = computed(() => hasIcon.value && (!hasIllustration.value \|\| isSmallSize.value));\n\n/\n Illustration will always be shown in lg and md size\n * Illustration will not be shown in sm size\n */\nconst showIllustration = computed(() => hasIllustration.value && !isSmallSize.value);\n\nconst sizeKey = computed(() => String(props.size));\nconst isSmallSize = computed(() => sizeKey.value === 'sm' \|\| sizeKey.value === '200');\n\nconst sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[sizeKey.value]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst contentClass = computed(() => EMPTY_STATE_CONTENT_SIZE_MODIFIERS[sizeKey.value]);\n\nconst headlineSize = computed(() => EMPTY_STATE_HEADLINE_SIZES[sizeKey.value]);\nconst headlineDensity = computed(() => EMPTY_STATE_HEADLINE_DENSITIES[sizeKey.value]);\n\nconst bodySize = computed(() => EMPTY_STATE_BODY_SIZES[sizeKey.value]);\nconst bodyDensity = computed(() => EMPTY_STATE_BODY_DENSITIES[sizeKey.value]);\n\nonMounted(() => {\n if (!props.bodyText && !hasSlotContent(slots.body)) {\n console.error('DtEmptyState: You should provide either bodyText or content on body slot.');\n }\n});\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgFA,IAAM,IAAQ,GAAU,EAElB,IAAQ,GAsDR,IAAU,QACP,EAAe,EAAM,KAAK,CACjC,EACI,IAAkB,QAAe,EAAe,EAAM,aAAa,CAAC,EAMpE,IAAW,QAAe,EAAQ,UAAU,CAAC,EAAgB,SAAS,EAAY,OAAO,EAMzF,IAAmB,QAAe,EAAgB,SAAS,CAAC,EAAY,MAAM,EAE9E,IAAU,QAAe,OAAO,EAAM,KAAK,CAAC,EAC5C,IAAc,QAAe,EAAQ,UAAU,QAAQ,EAAQ,UAAU,MAAM,EAE/E,IAAY,QAAe,EAA2B,EAAQ,OAAO,EAErE,IAAoB,QAAe,CAAC,iBAAiB,EAAU,MAAM,CAAC,EAEtE,IAAe,QAAe,EAAmC,EAAQ,OAAO,EAEhF,IAAe,QAAe,EAA2B,EAAQ,OAAO,EACxE,IAAkB,QAAe,EAA+B,EAAQ,OAAO,EAE/E,IAAW,QAAe,EAAuB,EAAQ,OAAO,EAChE,IAAc,QAAe,EAA2B,EAAQ,OAAO;SAE7E,QAAgB;AACd,GAAI,CAAC,EAAM,YAAY,CAAC,EAAe,EAAM,KAAK,IAChD,QAAQ,MAAM,4EAA4E;IAE5F,kBA3KA,EAyDW,EAAA,EAAA,EAAA,EAxDR,OAAK,EAAE,EAAA,MAAiB,EAAA,EAAA;oBAQlB;IALC,EAAA,SAAA,GAAA,EADR,EAMO,QAAA;;KAJJ,OAAK,EAAA,CAAA,+BAAkC,EAAA,kBAAiB,CAAA;QAGzD,EAA4B,EAAA,QAAA,eAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;IAItB,EAAA,SAAA,GAAA,EADR,EASO,QAAA;;KAPJ,OAAK,EAAA,CAAA,uBAA0B,EAAA,UAAS,CAAA;QAGzC,EAGE,EAAA,QAAA,QAAA,EADC,UAAW,OAAK,CAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;IAIrB,EA2BW,EAAA,EAAA,EAAA;KA1BT,KAAI;KACH,OAAK,EAAA,CAAA,0BAA6B,EAAA,MAAY,CAAA;;sBAWrC,CATV,EASU,EAAA,EAAA,EAAA;MARR,MAAK;MACJ,MAAM,EAAA;MACN,SAAS,EAAA;MACV,MAAK;MACL,IAAG;MACH,OAAM;;uBAEU,CAAA,EAAA,EAAb,EAAA,WAAU,EAAA,EAAA,CAAA,CAAA;;iCAIP,EAAA,YAAA,GAAA,EADR,EAWU,EAAA,EAAA,EAAA;;MATR,MAAK;MACJ,MAAM,EAAA;MACN,SAAS,EAAA;MACV,MAAK;MACL,MAAK;MACL,IAAG;MACH,OAAM;;uBAEQ,CAAA,EAAA,EAAX,EAAA,SAAQ,EAAA,EAAA,CAAA,CAAA;;;;;IAKP,EAAA,EAAc,CAAC,EAAA,EAAK,CAAC,KAAI,IAAA,GAAA,EADjC,EAKM,OAAA;;KAHH,OAAK,EAAE,EAAA,UAAS;QAEjB,EAAoB,EAAA,QAAA,OAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA"}

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

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/constants/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../../mode_constants-CzYJW9ua.cjs`),r=require(`../button/button-constants.cjs`),i=require(`../../localization/index.cjs`),a=require(`../button/button.cjs`),o=require(`../checkbox/checkbox.cjs`),s=require(`../checkbox-group/checkbox-group.cjs`),c=require(`../list-item/list-item.cjs`),l=require(`../stack/stack.cjs`),u=require(`../popover/popover-constants.cjs`),d=require(`../popover/popover.cjs`),f=require(`../dropdown/dropdown.cjs`);let p=require(`vue`),m=require(`@dialpad/dialtone-icons/vue`);var h={name:`DtFilterPill`,components:{DtCheckboxGroup:s.default,DtCheckbox:o.default,DtPopover:d.default,DtButton:a.default,DtIconClose:m.DtIconClose,DtIconChevronDown:m.DtIconChevronDown,DtDropdown:f.default,DtListItem:c.default,DtStack:l.default},props:{useDropdown:{type:Boolean,default:!1},deferSelection:{type:Boolean,default:!1},modelValue:{type:Array,default:()=>[]},startTooltipText:{type:String,default:``},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},showClear:{type:Boolean,default:!0},label:{type:String,default:void 0},endTooltipText:{type:String,default:``},popoverAppendTo:{type:[e.HTML_ELEMENT_TYPE,String],default:`body`,validator:e=>u.POPOVER_APPEND_TO_VALUES.includes(e)||e instanceof HTMLElement},popoverFallbackPlacements:{type:Array,default:()=>[`auto`]},popoverMaxHeight:{type:String,default:``},popoverMaxWidth:{type:String,default:``},popoverPadding:{type:String,default:`large`,validator:e=>Object.keys(u.POPOVER_PADDING_CLASSES).some(t=>t===e)},popoverPlacement:{type:String,default:`bottom-start`},labelClass:{type:[String,Array,Object],default:``},popoverContentClass:{type:[String,Array,Object],default:``},popoverHeaderClass:{type:[String,Array,Object],default:``},popoverFooterClass:{type:[String,Array,Object],default:``},popoverDialogClass:{type:[String,Array,Object],default:``},dropdownListClass:{type:[String,Array,Object],default:``},contentMode:n.t,size:{type:[String,Number],default:200,validator:e=>Object.keys(r.BUTTON_SIZE_MODIFIERS).includes(String(e))}},emits:[`clear`,`open`,`update:modelValue`,`apply`],data(){return{isOpen:!1,i18n:new i.DialtoneLocalization,filters:this.modelValue,pendingFilters:null}},computed:{overlayComponent(){return this.useDropdown?`dt-dropdown`:`dt-popover`},overlayProps(){let e={"append-to":this.popoverAppendTo,"fallback-placements":this.popoverFallbackPlacements,"max-height":this.popoverMaxHeight,"max-width":this.popoverMaxWidth,modal:!0,placement:this.popoverPlacement};return this.useDropdown?e[`list-class`]=this.dropdownListClass:(e.padding=this.popoverPadding,e[`content-class`]=this.popoverContentClass,e[`header-wrapper-class`]=this.popoverHeaderClass,e[`footer-wrapper-class`]=this.popoverFooterClass,e[`dialog-class`]=this.popoverDialogClass),e},buttonKind(){return this.isActive&&!this.disabled?`default`:`muted`},resolvedStartTooltipText(){return this.readOnly?this.startTooltipText||this.i18n.$t(`DIALTONE_FILTER_PILL_READ_ONLY_TOOLTIP`):this.startTooltipText},clearButtonAriaLabel(){return this.endTooltipText||this.i18n.$t(`DIALTONE_FILTER_PILL_CLEAR_BUTTON_LABEL`)},clearButtonTitle(){if(!this.endTooltipText)return this.clearButtonAriaLabel},activeFilters(){return this.filters.filter(e=>e.active).map(e=>e.name)},activeFilterList(){return this.activeFilters.length===this.filters.length&&this.filters.length>1?`All`:this.activeFilters[0]??``},activeFilterOverflow(){return this.activeFilters.length<=1||this.activeFilters.length===this.filters.length&&this.filters.length>1?``:`+`+(this.activeFilters.length-1)},isActive(){return this.activeFilterList.length>0},hasClear(){return!this.readOnly&&this.showClear&&this.activeFilterList.length>0},displayFilters(){return this.deferSelection&&this.pendingFilters?this.pendingFilters:this.filters},pendingActiveFilters(){return this.pendingFilters?this.pendingFilters.filter(e=>e.active).map(e=>e.name):[]},cancelButtonLabel(){return this.i18n.$t(`DIALTONE_FILTER_PILL_CANCEL_BUTTON_LABEL`)},applyButtonLabel(){return this.i18n.$t(`DIALTONE_FILTER_PILL_APPLY_BUTTON_LABEL`)},clearIconSize(){return String(this.size)===`100`?`100`:r.BUTTON_ICON_SIZES[String(this.size)]}},watch:{isOpen(e){this.$emit(`open`,e),this.deferSelection&&(e?this.pendingFilters=JSON.parse(JSON.stringify(this.filters)):this.pendingFilters=null)},filters:{deep:!0,handler(e){this.$emit(`update:modelValue`,e)}}},mounted(){this.modelValue?.length||this.$slots.content&&this.$slots.content()||console.warn(`Please provide content through the v-model or the "content" slot.`),this.deferSelection&&this.useDropdown&&console.warn(`deferSelection has no effect when useDropdown is true.`)},methods:{clearFilter(e){this.filters.forEach(e=>delete e.active),this.$emit(`clear`,e)},openPopover(){this.readOnly||(this.isOpen=!0)},selectFilter(e,t){this.filters.forEach(t=>{t.active=t===e}),t()},applySelection(){this.pendingFilters&&(this.filters.forEach((e,t)=>{this.pendingFilters[t]?e.active=this.pendingFilters[t].active:delete e.active}),this.$emit(`apply`),this.isOpen=!1)},cancelSelection(){this.isOpen=!1}}},g=[`title`,`textContent`],_=[`title`,`textContent`],v=[`title`,`textContent`];function y(e,t,n,r,i,a){let o=(0,p.resolveComponent)(`dt-icon-chevron-down`),s=(0,p.resolveComponent)(`dt-button`),c=(0,p.resolveComponent)(`dt-checkbox`),l=(0,p.resolveComponent)(`dt-checkbox-group`),u=(0,p.resolveComponent)(`dt-stack`),d=(0,p.resolveComponent)(`dt-list-item`),f=(0,p.resolveComponent)(`dt-icon-close`),m=(0,p.resolveDirective)(`dt-tooltip`);return(0,p.openBlock)(),(0,p.createElementBlock)(`div`,{class:(0,p.normalizeClass)([`d-filter-pill`,{"d-filter-pill--read-only":n.readOnly}]),"data-qa":`dt-filter-pill`},[((0,p.openBlock)(),(0,p.createBlock)((0,p.resolveDynamicComponent)(a.overlayComponent),(0,p.mergeProps)({open:i.isOpen,"onUpdate:open":t[0]||(t[0]=e=>i.isOpen=e)},a.overlayProps,{"content-mode":n.contentMode}),(0,p.createSlots)({anchor:(0,p.withCtx)(t=>[(0,p.withDirectives)(((0,p.openBlock)(),(0,p.createBlock)(s,(0,p.mergeProps)(n.useDropdown?t:t.attrs,{active:a.isActive,"aria-disabled":n.readOnly||void 0,class:[`d-filter-pill__primary`,{"d-filter-pill--selected":a.isActive}],disabled:n.disabled,kind:a.buttonKind,size:n.size,"data-qa":`dt-filter-pill__button`,importance:`outlined`,onClick:a.openPopover,onKeydown:(0,p.withKeys)((0,p.withModifiers)(a.openPopover,[`prevent`]),[`up`,`down`])}),(0,p.createSlots)({default:(0,p.withCtx)(()=>[(0,p.createElementVNode)(`span`,{class:(0,p.normalizeClass)([`d-filter-pill__label`,n.labelClass])},[(0,p.renderSlot)(e.$slots,`default`,{label:n.label,filters:i.filters,activeFilters:a.activeFilters,activeFilterList:a.activeFilterList,activeFilterOverflow:a.activeFilterOverflow},()=>[(0,p.createElementVNode)(`span`,{class:`d-filter-pill__label-start`,title:n.label,textContent:(0,p.toDisplayString)(n.label)},null,8,g),a.activeFilterList?((0,p.openBlock)(),(0,p.createElementBlock)(`span`,{key:0,class:`d-filter-pill__label-end`,title:a.activeFilterList,textContent:(0,p.toDisplayString)(a.activeFilterList)},null,8,_)):(0,p.createCommentVNode)(``,!0),a.activeFilterOverflow?((0,p.openBlock)(),(0,p.createElementBlock)(`span`,{key:1,class:`d-filter-pill__label-end-overflow`,title:`plus ${a.activeFilters.length-1} others`,textContent:(0,p.toDisplayString)(a.activeFilterOverflow)},null,8,v)):(0,p.createCommentVNode)(``,!0)])],2)]),_:2},[e.$slots.startIcon?{name:`startIcon`,fn:(0,p.withCtx)(({iconSize:t})=>[(0,p.renderSlot)(e.$slots,`startIcon`,{iconSize:t})]),key:`0`}:void 0,n.readOnly?void 0:{name:`endIcon`,fn:(0,p.withCtx)(({iconSize:e})=>[(0,p.createVNode)(o,{size:e,class:`d-filter-pill__icon`,"data-qa":`dt-filter-pill__icon`},null,8,[`size`])]),key:`1`}]),1040,[`active`,`aria-disabled`,`class`,`disabled`,`kind`,`size`,`onClick`,`onKeydown`])),[[m,a.resolvedStartTooltipText]])]),_:2},[n.useDropdown?void 0:{name:`content`,fn:(0,p.withCtx)(({close:t})=>[(0,p.renderSlot)(e.$slots,`content`,{close:t,apply:a.applySelection,cancel:a.cancelSelection,pendingFilters:i.pendingFilters},()=>[n.modelValue?.length?((0,p.openBlock)(),(0,p.createBlock)(l,{key:0,"model-value":n.deferSelection?a.pendingActiveFilters:a.activeFilters,"aria-label":n.label,name:n.label||`filter-pill`},{default:(0,p.withCtx)(()=>[((0,p.openBlock)(!0),(0,p.createElementBlock)(p.Fragment,null,(0,p.renderList)(a.displayFilters,e=>((0,p.openBlock)(),(0,p.createBlock)(c,{key:e.name,label:e.name,value:e.name,"onUpdate:modelValue":t=>e.active=t},null,8,[`label`,`value`,`onUpdate:modelValue`]))),128))]),_:1},8,[`model-value`,`aria-label`,`name`])):(0,p.createCommentVNode)(``,!0)])]),key:`0`},!n.useDropdown&&e.$slots.headerContent?{name:`headerContent`,fn:(0,p.withCtx)(({close:t})=>[(0,p.renderSlot)(e.$slots,`headerContent`,{close:t})]),key:`1`}:void 0,!n.useDropdown&&(n.deferSelection||e.$slots.footerContent)?{name:`footerContent`,fn:(0,p.withCtx)(({close:t})=>[(0,p.renderSlot)(e.$slots,`footerContent`,{close:t,apply:a.applySelection,cancel:a.cancelSelection},()=>[n.deferSelection?((0,p.openBlock)(),(0,p.createBlock)(u,{key:0,direction:`row`,gap:`400`,justify:`end`,"data-qa":`dt-filter-pill__deferred-footer`},{default:(0,p.withCtx)(()=>[(0,p.createVNode)(s,{importance:`clear`,kind:`muted`,size:200,"data-qa":`dt-filter-pill__cancel-button`,onClick:a.cancelSelection},{default:(0,p.withCtx)(()=>[(0,p.createTextVNode)((0,p.toDisplayString)(a.cancelButtonLabel),1)]),_:1},8,[`onClick`]),(0,p.createVNode)(s,{importance:`primary`,size:200,"data-qa":`dt-filter-pill__apply-button`,onClick:a.applySelection},{default:(0,p.withCtx)(()=>[(0,p.createTextVNode)((0,p.toDisplayString)(a.applyButtonLabel),1)]),_:1},8,[`onClick`])]),_:1})):(0,p.createCommentVNode)(``,!0)])]),key:`2`}:void 0,n.useDropdown?{name:`list`,fn:(0,p.withCtx)(({close:t})=>[(0,p.renderSlot)(e.$slots,`content`,{close:t},()=>[((0,p.openBlock)(!0),(0,p.createElementBlock)(p.Fragment,null,(0,p.renderList)(i.filters,e=>((0,p.openBlock)(),(0,p.createBlock)(d,{key:e.name,role:`menuitem`,"navigation-type":`arrow-keys`,selected:e.active,onClick:n=>a.selectFilter(e,t)},{default:(0,p.withCtx)(()=>[(0,p.createTextVNode)((0,p.toDisplayString)(e.name),1)]),_:2},1032,[`selected`,`onClick`]))),128))])]),key:`3`}:void 0]),1040,[`open`,`content-mode`])),a.hasClear?(0,p.withDirectives)(((0,p.openBlock)(),(0,p.createBlock)(s,{key:0,active:a.isActive,"aria-label":a.clearButtonAriaLabel,class:(0,p.normalizeClass)([`d-filter-pill__clear`,{"d-filter-pill__clear--selected":a.isActive}]),disabled:n.disabled,kind:a.buttonKind,size:n.size,title:a.clearButtonTitle,"data-qa":`dt-filter-pill__clear-button`,importance:`outlined`,onClick:a.clearFilter},{icon:(0,p.withCtx)(()=>[(0,p.createVNode)(f,{size:a.clearIconSize},null,8,[`size`])]),_:1},8,[`active`,`aria-label`,`class`,`disabled`,`kind`,`size`,`title`,`onClick`])),[[m,n.endTooltipText]]):(0,p.createCommentVNode)(``,!0)],2)}var b=t.t(h,[[`render`,y]]);exports.default=b;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/constants/index.cjs`),t=require(`../../common/validators/index.cjs`),n=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),r=require(`../../mode_constants-CzYJW9ua.cjs`),i=require(`../button/button-constants.cjs`),a=require(`../../localization/index.cjs`),o=require(`../button/button.cjs`),s=require(`../checkbox/checkbox.cjs`),c=require(`../checkbox-group/checkbox-group.cjs`),l=require(`../list-item/list-item.cjs`),u=require(`../stack/stack.cjs`),d=require(`../popover/popover-constants.cjs`),f=require(`../popover/popover.cjs`),p=require(`../dropdown/dropdown.cjs`);let m=require(`vue`),h=require(`@dialpad/dialtone-icons/vue`);var g={name:`DtFilterPill`,components:{DtCheckboxGroup:c.default,DtCheckbox:s.default,DtPopover:f.default,DtButton:o.default,DtIconClose:h.DtIconClose,DtIconChevronDown:h.DtIconChevronDown,DtDropdown:p.default,DtListItem:l.default,DtStack:u.default},props:{useDropdown:{type:Boolean,default:!1},deferSelection:{type:Boolean,default:!1},modelValue:{type:Array,default:()=>[]},startTooltipText:{type:String,default:``},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},showClear:{type:Boolean,default:!0},label:{type:String,default:void 0},endTooltipText:{type:String,default:``},popoverAppendTo:{type:[e.HTML_ELEMENT_TYPE,String],default:`body`,validator:e=>d.POPOVER_APPEND_TO_VALUES.includes(e)||e instanceof HTMLElement},popoverFallbackPlacements:{type:Array,default:()=>[`auto`]},popoverMaxHeight:{type:String,default:``},popoverMaxWidth:{type:String,default:``},popoverPadding:{type:String,default:`large`,validator:e=>Object.keys(d.POPOVER_PADDING_CLASSES).some(t=>t===e)},popoverPlacement:{type:String,default:`bottom-start`},labelClass:{type:[String,Array,Object],default:``},popoverContentClass:{type:[String,Array,Object],default:``},popoverHeaderClass:{type:[String,Array,Object],default:``},popoverFooterClass:{type:[String,Array,Object],default:``},popoverDialogClass:{type:[String,Array,Object],default:``},dropdownListClass:{type:[String,Array,Object],default:``},contentMode:r.t,size:{type:[String,Number],default:200,validator:t.ordinalSizeValidator(i.BUTTON_SIZE_MODIFIERS)}},emits:[`clear`,`open`,`update:modelValue`,`apply`],data(){return{isOpen:!1,i18n:new a.DialtoneLocalization,filters:this.modelValue,pendingFilters:null}},computed:{overlayComponent(){return this.useDropdown?`dt-dropdown`:`dt-popover`},overlayProps(){let e={"append-to":this.popoverAppendTo,"fallback-placements":this.popoverFallbackPlacements,"max-height":this.popoverMaxHeight,"max-width":this.popoverMaxWidth,modal:!0,placement:this.popoverPlacement};return this.useDropdown?e[`list-class`]=this.dropdownListClass:(e.padding=this.popoverPadding,e[`content-class`]=this.popoverContentClass,e[`header-wrapper-class`]=this.popoverHeaderClass,e[`footer-wrapper-class`]=this.popoverFooterClass,e[`dialog-class`]=this.popoverDialogClass),e},buttonKind(){return this.isActive&&!this.disabled?`default`:`muted`},resolvedStartTooltipText(){return this.readOnly?this.startTooltipText||this.i18n.$t(`DIALTONE_FILTER_PILL_READ_ONLY_TOOLTIP`):this.startTooltipText},clearButtonAriaLabel(){return this.endTooltipText||this.i18n.$t(`DIALTONE_FILTER_PILL_CLEAR_BUTTON_LABEL`)},clearButtonTitle(){if(!this.endTooltipText)return this.clearButtonAriaLabel},activeFilters(){return this.filters.filter(e=>e.active).map(e=>e.name)},activeFilterList(){return this.activeFilters.length===this.filters.length&&this.filters.length>1?`All`:this.activeFilters[0]??``},activeFilterOverflow(){return this.activeFilters.length<=1||this.activeFilters.length===this.filters.length&&this.filters.length>1?``:`+`+(this.activeFilters.length-1)},isActive(){return this.activeFilterList.length>0},hasClear(){return!this.readOnly&&this.showClear&&this.activeFilterList.length>0},displayFilters(){return this.deferSelection&&this.pendingFilters?this.pendingFilters:this.filters},pendingActiveFilters(){return this.pendingFilters?this.pendingFilters.filter(e=>e.active).map(e=>e.name):[]},cancelButtonLabel(){return this.i18n.$t(`DIALTONE_FILTER_PILL_CANCEL_BUTTON_LABEL`)},applyButtonLabel(){return this.i18n.$t(`DIALTONE_FILTER_PILL_APPLY_BUTTON_LABEL`)},clearIconSize(){return String(this.size)===`100`?`100`:i.BUTTON_ICON_SIZES[String(this.size)]}},watch:{isOpen(e){this.$emit(`open`,e),this.deferSelection&&(e?this.pendingFilters=JSON.parse(JSON.stringify(this.filters)):this.pendingFilters=null)},filters:{deep:!0,handler(e){this.$emit(`update:modelValue`,e)}}},mounted(){this.modelValue?.length||this.$slots.content&&this.$slots.content()||console.warn(`Please provide content through the v-model or the "content" slot.`),this.deferSelection&&this.useDropdown&&console.warn(`deferSelection has no effect when useDropdown is true.`)},methods:{clearFilter(e){this.filters.forEach(e=>delete e.active),this.$emit(`clear`,e)},openPopover(){this.readOnly||(this.isOpen=!0)},selectFilter(e,t){this.filters.forEach(t=>{t.active=t===e}),t()},applySelection(){this.pendingFilters&&(this.filters.forEach((e,t)=>{this.pendingFilters[t]?e.active=this.pendingFilters[t].active:delete e.active}),this.$emit(`apply`),this.isOpen=!1)},cancelSelection(){this.isOpen=!1}}},_=[`title`,`textContent`],v=[`title`,`textContent`],y=[`title`,`textContent`];function b(e,t,n,r,i,a){let o=(0,m.resolveComponent)(`dt-icon-chevron-down`),s=(0,m.resolveComponent)(`dt-button`),c=(0,m.resolveComponent)(`dt-checkbox`),l=(0,m.resolveComponent)(`dt-checkbox-group`),u=(0,m.resolveComponent)(`dt-stack`),d=(0,m.resolveComponent)(`dt-list-item`),f=(0,m.resolveComponent)(`dt-icon-close`),p=(0,m.resolveDirective)(`dt-tooltip`);return(0,m.openBlock)(),(0,m.createElementBlock)(`div`,{class:(0,m.normalizeClass)([`d-filter-pill`,{"d-filter-pill--read-only":n.readOnly}]),"data-qa":`dt-filter-pill`},[((0,m.openBlock)(),(0,m.createBlock)((0,m.resolveDynamicComponent)(a.overlayComponent),(0,m.mergeProps)({open:i.isOpen,"onUpdate:open":t[0]||(t[0]=e=>i.isOpen=e)},a.overlayProps,{"content-mode":n.contentMode}),(0,m.createSlots)({anchor:(0,m.withCtx)(t=>[(0,m.withDirectives)(((0,m.openBlock)(),(0,m.createBlock)(s,(0,m.mergeProps)(n.useDropdown?t:t.attrs,{active:a.isActive,"aria-disabled":n.readOnly||void 0,class:[`d-filter-pill__primary`,{"d-filter-pill--selected":a.isActive}],disabled:n.disabled,kind:a.buttonKind,size:n.size,"data-qa":`dt-filter-pill__button`,importance:`outlined`,onClick:a.openPopover,onKeydown:(0,m.withKeys)((0,m.withModifiers)(a.openPopover,[`prevent`]),[`up`,`down`])}),(0,m.createSlots)({default:(0,m.withCtx)(()=>[(0,m.createElementVNode)(`span`,{class:(0,m.normalizeClass)([`d-filter-pill__label`,n.labelClass])},[(0,m.renderSlot)(e.$slots,`default`,{label:n.label,filters:i.filters,activeFilters:a.activeFilters,activeFilterList:a.activeFilterList,activeFilterOverflow:a.activeFilterOverflow},()=>[(0,m.createElementVNode)(`span`,{class:`d-filter-pill__label-start`,title:n.label,textContent:(0,m.toDisplayString)(n.label)},null,8,_),a.activeFilterList?((0,m.openBlock)(),(0,m.createElementBlock)(`span`,{key:0,class:`d-filter-pill__label-end`,title:a.activeFilterList,textContent:(0,m.toDisplayString)(a.activeFilterList)},null,8,v)):(0,m.createCommentVNode)(``,!0),a.activeFilterOverflow?((0,m.openBlock)(),(0,m.createElementBlock)(`span`,{key:1,class:`d-filter-pill__label-end-overflow`,title:`plus ${a.activeFilters.length-1} others`,textContent:(0,m.toDisplayString)(a.activeFilterOverflow)},null,8,y)):(0,m.createCommentVNode)(``,!0)])],2)]),_:2},[e.$slots.startIcon?{name:`startIcon`,fn:(0,m.withCtx)(({iconSize:t})=>[(0,m.renderSlot)(e.$slots,`startIcon`,{iconSize:t})]),key:`0`}:void 0,n.readOnly?void 0:{name:`endIcon`,fn:(0,m.withCtx)(({iconSize:e})=>[(0,m.createVNode)(o,{size:e,class:`d-filter-pill__icon`,"data-qa":`dt-filter-pill__icon`},null,8,[`size`])]),key:`1`}]),1040,[`active`,`aria-disabled`,`class`,`disabled`,`kind`,`size`,`onClick`,`onKeydown`])),[[p,a.resolvedStartTooltipText]])]),_:2},[n.useDropdown?void 0:{name:`content`,fn:(0,m.withCtx)(({close:t})=>[(0,m.renderSlot)(e.$slots,`content`,{close:t,apply:a.applySelection,cancel:a.cancelSelection,pendingFilters:i.pendingFilters},()=>[n.modelValue?.length?((0,m.openBlock)(),(0,m.createBlock)(l,{key:0,"model-value":n.deferSelection?a.pendingActiveFilters:a.activeFilters,"aria-label":n.label,name:n.label||`filter-pill`},{default:(0,m.withCtx)(()=>[((0,m.openBlock)(!0),(0,m.createElementBlock)(m.Fragment,null,(0,m.renderList)(a.displayFilters,e=>((0,m.openBlock)(),(0,m.createBlock)(c,{key:e.name,label:e.name,value:e.name,"onUpdate:modelValue":t=>e.active=t},null,8,[`label`,`value`,`onUpdate:modelValue`]))),128))]),_:1},8,[`model-value`,`aria-label`,`name`])):(0,m.createCommentVNode)(``,!0)])]),key:`0`},!n.useDropdown&&e.$slots.headerContent?{name:`headerContent`,fn:(0,m.withCtx)(({close:t})=>[(0,m.renderSlot)(e.$slots,`headerContent`,{close:t})]),key:`1`}:void 0,!n.useDropdown&&(n.deferSelection||e.$slots.footerContent)?{name:`footerContent`,fn:(0,m.withCtx)(({close:t})=>[(0,m.renderSlot)(e.$slots,`footerContent`,{close:t,apply:a.applySelection,cancel:a.cancelSelection},()=>[n.deferSelection?((0,m.openBlock)(),(0,m.createBlock)(u,{key:0,direction:`row`,gap:`400`,justify:`end`,"data-qa":`dt-filter-pill__deferred-footer`},{default:(0,m.withCtx)(()=>[(0,m.createVNode)(s,{importance:`clear`,kind:`muted`,size:200,"data-qa":`dt-filter-pill__cancel-button`,onClick:a.cancelSelection},{default:(0,m.withCtx)(()=>[(0,m.createTextVNode)((0,m.toDisplayString)(a.cancelButtonLabel),1)]),_:1},8,[`onClick`]),(0,m.createVNode)(s,{importance:`primary`,size:200,"data-qa":`dt-filter-pill__apply-button`,onClick:a.applySelection},{default:(0,m.withCtx)(()=>[(0,m.createTextVNode)((0,m.toDisplayString)(a.applyButtonLabel),1)]),_:1},8,[`onClick`])]),_:1})):(0,m.createCommentVNode)(``,!0)])]),key:`2`}:void 0,n.useDropdown?{name:`list`,fn:(0,m.withCtx)(({close:t})=>[(0,m.renderSlot)(e.$slots,`content`,{close:t},()=>[((0,m.openBlock)(!0),(0,m.createElementBlock)(m.Fragment,null,(0,m.renderList)(i.filters,e=>((0,m.openBlock)(),(0,m.createBlock)(d,{key:e.name,role:`menuitem`,"navigation-type":`arrow-keys`,selected:e.active,onClick:n=>a.selectFilter(e,t)},{default:(0,m.withCtx)(()=>[(0,m.createTextVNode)((0,m.toDisplayString)(e.name),1)]),_:2},1032,[`selected`,`onClick`]))),128))])]),key:`3`}:void 0]),1040,[`open`,`content-mode`])),a.hasClear?(0,m.withDirectives)(((0,m.openBlock)(),(0,m.createBlock)(s,{key:0,active:a.isActive,"aria-label":a.clearButtonAriaLabel,class:(0,m.normalizeClass)([`d-filter-pill__clear`,{"d-filter-pill__clear--selected":a.isActive}]),disabled:n.disabled,kind:a.buttonKind,size:n.size,title:a.clearButtonTitle,"data-qa":`dt-filter-pill__clear-button`,importance:`outlined`,onClick:a.clearFilter},{icon:(0,m.withCtx)(()=>[(0,m.createVNode)(f,{size:a.clearIconSize},null,8,[`size`])]),_:1},8,[`active`,`aria-label`,`class`,`disabled`,`kind`,`size`,`title`,`onClick`])),[[p,n.endTooltipText]]):(0,m.createCommentVNode)(``,!0)],2)}var x=n.t(g,[[`render`,b]]);exports.default=x;
 //# sourceMappingURL=filter-pill.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"filter-pill.cjs","names":[],"sources":["../../../components/FilterPill/FilterPill.vue"],"sourcesContent":["<template>\n <div\n :class=\"[\n 'd-filter-pill',\n { 'd-filter-pill--read-only': readOnly },\n ]\"\n data-qa=\"dt-filter-pill\"\n >\n <component\n :is=\"overlayComponent\"\n v-model:open=\"isOpen\"\n v-bind=\"overlayProps\"\n :content-mode=\"contentMode\"\n >\n <template #anchor=\"slotData\">\n <dt-button\n v-dt-tooltip=\"resolvedStartTooltipText\"\n v-bind=\"useDropdown ? slotData : slotData.attrs\"\n :active=\"isActive\"\n :aria-disabled=\"readOnly \|\| undefined\"\n :class=\"[\n 'd-filter-pill__primary',\n {\n 'd-filter-pill--selected': isActive,\n },\n ]\"\n :disabled=\"disabled\"\n :kind=\"buttonKind\"\n :size=\"size\"\n data-qa=\"dt-filter-pill__button\"\n importance=\"outlined\"\n @click=\"openPopover\"\n @keydown.up.down.prevent=\"openPopover\"\n >\n <template\n v-if=\"$slots.startIcon\"\n #startIcon=\"{ iconSize }\"\n >\n <!-- @slot Icon displayed before the label -->\n <slot\n name=\"startIcon\"\n :icon-size=\"iconSize\"\n />\n </template>\n <span :class=\"['d-filter-pill__label', labelClass]\">\n <!-- @slot Allows you to customize the label slot -->\n <slot\n :label=\"label\"\n :filters=\"filters\"\n :active-filters=\"activeFilters\"\n :active-filter-list=\"activeFilterList\"\n :active-filter-overflow=\"activeFilterOverflow\"\n >\n <span\n class=\"d-filter-pill__label-start\"\n :title=\"label\"\n v-text=\"label\"\n />\n <span\n v-if=\"activeFilterList\"\n class=\"d-filter-pill__label-end\"\n :title=\"activeFilterList\"\n v-text=\"activeFilterList\"\n />\n <span\n v-if=\"activeFilterOverflow\"\n class=\"d-filter-pill__label-end-overflow\"\n :title=\"`plus ${activeFilters.length - 1} others`\"\n v-text=\"activeFilterOverflow\"\n />\n </slot>\n </span>\n <template\n v-if=\"!readOnly\"\n #endIcon=\"{ iconSize }\"\n >\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\n v-if=\"!useDropdown\"\n #content=\"{ close }\"\n >\n <!-- @slot Allows you to override the popover content, only use this if you need custom behavior -->\n <slot\n :close=\"close\"\n :apply=\"applySelection\"\n :cancel=\"cancelSelection\"\n :pending-filters=\"pendingFilters\"\n name=\"content\"\n >\n <dt-checkbox-group\n v-if=\"modelValue?.length\"\n :model-value=\"deferSelection ? pendingActiveFilters : activeFilters\"\n :aria-label=\"label\"\n :name=\"label \|\| 'filter-pill'\"\n >\n <dt-checkbox\n v-for=\"filter in displayFilters\"\n :key=\"filter.name\"\n :label=\"filter.name\"\n :value=\"filter.name\"\n @update:model-value=\"($event) => filter.active = $event\"\n />\n </dt-checkbox-group>\n </slot>\n </template>\n <template\n v-if=\"!useDropdown && $slots.headerContent\"\n #headerContent=\"{ close }\"\n >\n <!-- @slot Allows you to customize the popover header -->\n <slot\n name=\"headerContent\"\n :close=\"close\"\n />\n </template>\n <template\n v-if=\"!useDropdown && (deferSelection \|\| $slots.footerContent)\"\n #footerContent=\"{ close }\"\n >\n <!-- @slot Allows you to customize the popover footer. Receives { close, apply, cancel } bindings. -->\n <slot\n name=\"footerContent\"\n :close=\"close\"\n :apply=\"applySelection\"\n :cancel=\"cancelSelection\"\n >\n <dt-stack\n v-if=\"deferSelection\"\n direction=\"row\"\n gap=\"400\"\n justify=\"end\"\n data-qa=\"dt-filter-pill__deferred-footer\"\n >\n <dt-button\n importance=\"clear\"\n kind=\"muted\"\n :size=\"200\"\n data-qa=\"dt-filter-pill__cancel-button\"\n @click=\"cancelSelection\"\n >\n {{ cancelButtonLabel }}\n </dt-button>\n <dt-button\n importance=\"primary\"\n :size=\"200\"\n data-qa=\"dt-filter-pill__apply-button\"\n @click=\"applySelection\"\n >\n {{ applyButtonLabel }}\n </dt-button>\n </dt-stack>\n </slot>\n </template>\n <template\n v-if=\"useDropdown\"\n #list=\"{ close }\"\n >\n <!-- @slot Allows you to override the dropdown content -->\n <slot\n :close=\"close\"\n name=\"content\"\n >\n <dt-list-item\n v-for=\"filter in filters\"\n :key=\"filter.name\"\n role=\"menuitem\"\n navigation-type=\"arrow-keys\"\n :selected=\"filter.active\"\n @click=\"selectFilter(filter, close)\"\n >\n {{ filter.name }}\n </dt-list-item>\n </slot>\n </template>\n </component>\n <dt-button\n v-if=\"hasClear\"\n v-dt-tooltip=\"endTooltipText\"\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>\n <dt-icon-close :size=\"clearIconSize\" />\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 { HTML_ELEMENT_TYPE } from '@/common/constants';\nimport { CONTENT_MODE_PROP } from '@/common/mode_constants';\nimport { BUTTON_SIZE_MODIFIERS, BUTTON_ICON_SIZES, DtButton } from '@/components/Button';\nimport { DtIconChevronDown, DtIconClose } from '@dialpad/dialtone-icons/vue';\nimport { DialtoneLocalization } from '@/localization';\nimport { DtCheckbox } from '@/components/Checkbox';\nimport { DtCheckboxGroup } from '@/components/CheckboxGroup';\nimport { DtDropdown } from '@/components/Dropdown';\nimport { DtListItem } from '@/components/ListItem';\nimport { DtStack } from '@/components/Stack';\n\nexport default {\n name: 'DtFilterPill',\n\n components: {\n DtCheckboxGroup,\n DtCheckbox,\n DtPopover,\n DtButton,\n DtIconClose,\n DtIconChevronDown,\n DtDropdown,\n DtListItem,\n DtStack,\n },\n\n props: {\n /*\n When true, uses DtDropdown instead of DtPopover as the overlay.\n * Provides keyboard navigation (arrow keys) for list items.\n * Default content renders DtListItem elements (single-select)\n * instead of checkboxes (multi-select).\n /\n useDropdown: {\n type: Boolean,\n default: false,\n },\n\n /\n When true, checkbox changes are held in a pending state until the user\n * clicks Apply. Cancel or closing the popover discards pending changes.\n * Only applies to popover mode (not useDropdown).\n /\n deferSelection: {\n type: Boolean,\n default: false,\n },\n\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 HTML disabled attribute\n /\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /\n When true, the pill cannot be interacted with but does not\n * receive disabled visual styling. Adds `d-filter-pill--read-only`\n * class and hides the chevron icon. The clear button is suppressed\n * and the tooltip falls back to a read-only message when\n * startTooltipText is not provided.\n /\n readOnly: {\n type: Boolean,\n default: false,\n },\n\n /\n Shows the clear button when a filter is active\n * @values true, false\n /\n showClear: {\n type: Boolean,\n default: true,\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 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: [HTML_ELEMENT_TYPE, 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 Additional CSS class(es) applied to the label wrapper element.\n /\n labelClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional CSS class(es) applied to the popover content area.\n * Only applies when useDropdown is false.\n /\n popoverContentClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional CSS class(es) applied to the outer popover header element (`d-popover__header`).\n * Only applies when useDropdown is false.\n /\n popoverHeaderClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional CSS class(es) applied to the outer popover footer element (`d-popover__footer`).\n * Only applies when useDropdown is false.\n /\n popoverFooterClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional CSS class(es) applied to the popover dialog element.\n * Only applies when useDropdown is false.\n /\n popoverDialogClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional CSS class(es) applied to the dropdown list wrapper.\n * Only applies when useDropdown is true.\n /\n dropdownListClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Applies a color mode to the positioned content element.\n * @values light, dark, invert\n /\n contentMode: CONTENT_MODE_PROP,\n\n /\n The size of the button.\n * @values 100, 200, 300, 400, 500\n /\n size: {\n type: [String, Number],\n default: 200,\n validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(String(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 Emitted when deferred selection is applied\n \n @event apply\n */\n 'apply',\n ],\n\n data () {\n return {\n isOpen: false,\n i18n: new DialtoneLocalization(),\n filters: this.modelValue,\n pendingFilters: null,\n };\n },\n\n computed: {\n overlayComponent () {\n return this.useDropdown ? 'dt-dropdown' : 'dt-popover';\n },\n\n overlayProps () {\n const props = {\n 'append-to': this.popoverAppendTo,\n 'fallback-placements': this.popoverFallbackPlacements,\n 'max-height': this.popoverMaxHeight,\n 'max-width': this.popoverMaxWidth,\n modal: true,\n placement: this.popoverPlacement,\n };\n if (this.useDropdown) {\n props['list-class'] = this.dropdownListClass;\n } else {\n props.padding = this.popoverPadding;\n props['content-class'] = this.popoverContentClass;\n props['header-wrapper-class'] = this.popoverHeaderClass;\n props['footer-wrapper-class'] = this.popoverFooterClass;\n props['dialog-class'] = this.popoverDialogClass;\n }\n return props;\n },\n\n buttonKind () {\n return (this.isActive && !this.disabled) ? 'default' : 'muted';\n },\n\n resolvedStartTooltipText () {\n if (this.readOnly) return this.startTooltipText \|\| this.i18n.$t('DIALTONE_FILTER_PILL_READ_ONLY_TOOLTIP');\n return this.startTooltipText;\n },\n\n clearButtonAriaLabel () {\n return this.endTooltipText \|\| this.i18n.$t('DIALTONE_FILTER_PILL_CLEAR_BUTTON_LABEL');\n },\n\n clearButtonTitle () {\n if (this.endTooltipText) 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 === this.filters.length && this.filters.length > 1) {\n return 'All';\n }\n\n return this.activeFilters[0] ?? '';\n },\n\n activeFilterOverflow () {\n if (this.activeFilters.length <= 1) return '';\n if (this.activeFilters.length === this.filters.length && this.filters.length > 1) return '';\n\n return '+' + (this.activeFilters.length - 1);\n },\n\n isActive () {\n return this.activeFilterList.length > 0;\n },\n\n hasClear () {\n return !this.readOnly && this.showClear && this.activeFilterList.length > 0;\n },\n\n displayFilters () {\n return (this.deferSelection && this.pendingFilters) ? this.pendingFilters : this.filters;\n },\n\n pendingActiveFilters () {\n if (!this.pendingFilters) return [];\n return this.pendingFilters.filter(f => f.active).map(f => f.name);\n },\n\n cancelButtonLabel () {\n return this.i18n.$t('DIALTONE_FILTER_PILL_CANCEL_BUTTON_LABEL');\n },\n\n applyButtonLabel () {\n return this.i18n.$t('DIALTONE_FILTER_PILL_APPLY_BUTTON_LABEL');\n },\n\n clearIconSize () {\n if (String(this.size) === '100') return '100';\n return BUTTON_ICON_SIZES[String(this.size)];\n },\n },\n\n watch: {\n isOpen (isOpen) {\n this.$emit('open', isOpen);\n if (this.deferSelection) {\n if (isOpen) {\n this.pendingFilters = JSON.parse(JSON.stringify(this.filters));\n } else {\n this.pendingFilters = null;\n }\n }\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 if (this.deferSelection && this.useDropdown) {\n console.warn('deferSelection has no effect when useDropdown is true.');\n }\n },\n\n methods: {\n clearFilter ($event) {\n this.filters.forEach(filter => delete filter.active);\n this.$emit('clear', $event)\n },\n\n openPopover () {\n if (this.readOnly) return;\n this.isOpen = true;\n },\n\n selectFilter (selectedFilter, close) {\n this.filters.forEach(filter => {\n filter.active = filter === selectedFilter;\n });\n close();\n },\n\n applySelection () {\n if (!this.pendingFilters) return;\n this.filters.forEach((filter, i) => {\n if (this.pendingFilters[i]) {\n filter.active = this.pendingFilters[i].active;\n } else {\n delete filter.active;\n }\n });\n this.$emit('apply');\n this.isOpen = false;\n },\n\n cancelSelection () {\n this.isOpen = false;\n },\n },\n};\n</script>\n"],"mappings":"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"}
1	+ {"version":3,"file":"filter-pill.cjs","names":[],"sources":["../../../components/FilterPill/FilterPill.vue"],"sourcesContent":["<template>\n <div\n :class=\"[\n 'd-filter-pill',\n { 'd-filter-pill--read-only': readOnly },\n ]\"\n data-qa=\"dt-filter-pill\"\n >\n <component\n :is=\"overlayComponent\"\n v-model:open=\"isOpen\"\n v-bind=\"overlayProps\"\n :content-mode=\"contentMode\"\n >\n <template #anchor=\"slotData\">\n <dt-button\n v-dt-tooltip=\"resolvedStartTooltipText\"\n v-bind=\"useDropdown ? slotData : slotData.attrs\"\n :active=\"isActive\"\n :aria-disabled=\"readOnly \|\| undefined\"\n :class=\"[\n 'd-filter-pill__primary',\n {\n 'd-filter-pill--selected': isActive,\n },\n ]\"\n :disabled=\"disabled\"\n :kind=\"buttonKind\"\n :size=\"size\"\n data-qa=\"dt-filter-pill__button\"\n importance=\"outlined\"\n @click=\"openPopover\"\n @keydown.up.down.prevent=\"openPopover\"\n >\n <template\n v-if=\"$slots.startIcon\"\n #startIcon=\"{ iconSize }\"\n >\n <!-- @slot Icon displayed before the label -->\n <slot\n name=\"startIcon\"\n :icon-size=\"iconSize\"\n />\n </template>\n <span :class=\"['d-filter-pill__label', labelClass]\">\n <!-- @slot Allows you to customize the label slot -->\n <slot\n :label=\"label\"\n :filters=\"filters\"\n :active-filters=\"activeFilters\"\n :active-filter-list=\"activeFilterList\"\n :active-filter-overflow=\"activeFilterOverflow\"\n >\n <span\n class=\"d-filter-pill__label-start\"\n :title=\"label\"\n v-text=\"label\"\n />\n <span\n v-if=\"activeFilterList\"\n class=\"d-filter-pill__label-end\"\n :title=\"activeFilterList\"\n v-text=\"activeFilterList\"\n />\n <span\n v-if=\"activeFilterOverflow\"\n class=\"d-filter-pill__label-end-overflow\"\n :title=\"`plus ${activeFilters.length - 1} others`\"\n v-text=\"activeFilterOverflow\"\n />\n </slot>\n </span>\n <template\n v-if=\"!readOnly\"\n #endIcon=\"{ iconSize }\"\n >\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\n v-if=\"!useDropdown\"\n #content=\"{ close }\"\n >\n <!-- @slot Allows you to override the popover content, only use this if you need custom behavior -->\n <slot\n :close=\"close\"\n :apply=\"applySelection\"\n :cancel=\"cancelSelection\"\n :pending-filters=\"pendingFilters\"\n name=\"content\"\n >\n <dt-checkbox-group\n v-if=\"modelValue?.length\"\n :model-value=\"deferSelection ? pendingActiveFilters : activeFilters\"\n :aria-label=\"label\"\n :name=\"label \|\| 'filter-pill'\"\n >\n <dt-checkbox\n v-for=\"filter in displayFilters\"\n :key=\"filter.name\"\n :label=\"filter.name\"\n :value=\"filter.name\"\n @update:model-value=\"($event) => filter.active = $event\"\n />\n </dt-checkbox-group>\n </slot>\n </template>\n <template\n v-if=\"!useDropdown && $slots.headerContent\"\n #headerContent=\"{ close }\"\n >\n <!-- @slot Allows you to customize the popover header -->\n <slot\n name=\"headerContent\"\n :close=\"close\"\n />\n </template>\n <template\n v-if=\"!useDropdown && (deferSelection \|\| $slots.footerContent)\"\n #footerContent=\"{ close }\"\n >\n <!-- @slot Allows you to customize the popover footer. Receives { close, apply, cancel } bindings. -->\n <slot\n name=\"footerContent\"\n :close=\"close\"\n :apply=\"applySelection\"\n :cancel=\"cancelSelection\"\n >\n <dt-stack\n v-if=\"deferSelection\"\n direction=\"row\"\n gap=\"400\"\n justify=\"end\"\n data-qa=\"dt-filter-pill__deferred-footer\"\n >\n <dt-button\n importance=\"clear\"\n kind=\"muted\"\n :size=\"200\"\n data-qa=\"dt-filter-pill__cancel-button\"\n @click=\"cancelSelection\"\n >\n {{ cancelButtonLabel }}\n </dt-button>\n <dt-button\n importance=\"primary\"\n :size=\"200\"\n data-qa=\"dt-filter-pill__apply-button\"\n @click=\"applySelection\"\n >\n {{ applyButtonLabel }}\n </dt-button>\n </dt-stack>\n </slot>\n </template>\n <template\n v-if=\"useDropdown\"\n #list=\"{ close }\"\n >\n <!-- @slot Allows you to override the dropdown content -->\n <slot\n :close=\"close\"\n name=\"content\"\n >\n <dt-list-item\n v-for=\"filter in filters\"\n :key=\"filter.name\"\n role=\"menuitem\"\n navigation-type=\"arrow-keys\"\n :selected=\"filter.active\"\n @click=\"selectFilter(filter, close)\"\n >\n {{ filter.name }}\n </dt-list-item>\n </slot>\n </template>\n </component>\n <dt-button\n v-if=\"hasClear\"\n v-dt-tooltip=\"endTooltipText\"\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>\n <dt-icon-close :size=\"clearIconSize\" />\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 { HTML_ELEMENT_TYPE } from '@/common/constants';\nimport { CONTENT_MODE_PROP } from '@/common/mode_constants';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport { BUTTON_SIZE_MODIFIERS, BUTTON_ICON_SIZES, DtButton } from '@/components/Button';\nimport { DtIconChevronDown, DtIconClose } from '@dialpad/dialtone-icons/vue';\nimport { DialtoneLocalization } from '@/localization';\nimport { DtCheckbox } from '@/components/Checkbox';\nimport { DtCheckboxGroup } from '@/components/CheckboxGroup';\nimport { DtDropdown } from '@/components/Dropdown';\nimport { DtListItem } from '@/components/ListItem';\nimport { DtStack } from '@/components/Stack';\n\nexport default {\n name: 'DtFilterPill',\n\n components: {\n DtCheckboxGroup,\n DtCheckbox,\n DtPopover,\n DtButton,\n DtIconClose,\n DtIconChevronDown,\n DtDropdown,\n DtListItem,\n DtStack,\n },\n\n props: {\n /*\n When true, uses DtDropdown instead of DtPopover as the overlay.\n * Provides keyboard navigation (arrow keys) for list items.\n * Default content renders DtListItem elements (single-select)\n * instead of checkboxes (multi-select).\n /\n useDropdown: {\n type: Boolean,\n default: false,\n },\n\n /\n When true, checkbox changes are held in a pending state until the user\n * clicks Apply. Cancel or closing the popover discards pending changes.\n * Only applies to popover mode (not useDropdown).\n /\n deferSelection: {\n type: Boolean,\n default: false,\n },\n\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 HTML disabled attribute\n /\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /\n When true, the pill cannot be interacted with but does not\n * receive disabled visual styling. Adds `d-filter-pill--read-only`\n * class and hides the chevron icon. The clear button is suppressed\n * and the tooltip falls back to a read-only message when\n * startTooltipText is not provided.\n /\n readOnly: {\n type: Boolean,\n default: false,\n },\n\n /\n Shows the clear button when a filter is active\n * @values true, false\n /\n showClear: {\n type: Boolean,\n default: true,\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 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: [HTML_ELEMENT_TYPE, 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 Additional CSS class(es) applied to the label wrapper element.\n /\n labelClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional CSS class(es) applied to the popover content area.\n * Only applies when useDropdown is false.\n /\n popoverContentClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional CSS class(es) applied to the outer popover header element (`d-popover__header`).\n * Only applies when useDropdown is false.\n /\n popoverHeaderClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional CSS class(es) applied to the outer popover footer element (`d-popover__footer`).\n * Only applies when useDropdown is false.\n /\n popoverFooterClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional CSS class(es) applied to the popover dialog element.\n * Only applies when useDropdown is false.\n /\n popoverDialogClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional CSS class(es) applied to the dropdown list wrapper.\n * Only applies when useDropdown is true.\n /\n dropdownListClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Applies a color mode to the positioned content element.\n * @values light, dark, invert\n /\n contentMode: CONTENT_MODE_PROP,\n\n /\n The size of the button.\n * @values 100, 200, 300, 400, 500\n /\n size: {\n type: [String, Number],\n default: 200,\n validator: ordinalSizeValidator(BUTTON_SIZE_MODIFIERS),\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 Emitted when deferred selection is applied\n \n @event apply\n */\n 'apply',\n ],\n\n data () {\n return {\n isOpen: false,\n i18n: new DialtoneLocalization(),\n filters: this.modelValue,\n pendingFilters: null,\n };\n },\n\n computed: {\n overlayComponent () {\n return this.useDropdown ? 'dt-dropdown' : 'dt-popover';\n },\n\n overlayProps () {\n const props = {\n 'append-to': this.popoverAppendTo,\n 'fallback-placements': this.popoverFallbackPlacements,\n 'max-height': this.popoverMaxHeight,\n 'max-width': this.popoverMaxWidth,\n modal: true,\n placement: this.popoverPlacement,\n };\n if (this.useDropdown) {\n props['list-class'] = this.dropdownListClass;\n } else {\n props.padding = this.popoverPadding;\n props['content-class'] = this.popoverContentClass;\n props['header-wrapper-class'] = this.popoverHeaderClass;\n props['footer-wrapper-class'] = this.popoverFooterClass;\n props['dialog-class'] = this.popoverDialogClass;\n }\n return props;\n },\n\n buttonKind () {\n return (this.isActive && !this.disabled) ? 'default' : 'muted';\n },\n\n resolvedStartTooltipText () {\n if (this.readOnly) return this.startTooltipText \|\| this.i18n.$t('DIALTONE_FILTER_PILL_READ_ONLY_TOOLTIP');\n return this.startTooltipText;\n },\n\n clearButtonAriaLabel () {\n return this.endTooltipText \|\| this.i18n.$t('DIALTONE_FILTER_PILL_CLEAR_BUTTON_LABEL');\n },\n\n clearButtonTitle () {\n if (this.endTooltipText) 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 === this.filters.length && this.filters.length > 1) {\n return 'All';\n }\n\n return this.activeFilters[0] ?? '';\n },\n\n activeFilterOverflow () {\n if (this.activeFilters.length <= 1) return '';\n if (this.activeFilters.length === this.filters.length && this.filters.length > 1) return '';\n\n return '+' + (this.activeFilters.length - 1);\n },\n\n isActive () {\n return this.activeFilterList.length > 0;\n },\n\n hasClear () {\n return !this.readOnly && this.showClear && this.activeFilterList.length > 0;\n },\n\n displayFilters () {\n return (this.deferSelection && this.pendingFilters) ? this.pendingFilters : this.filters;\n },\n\n pendingActiveFilters () {\n if (!this.pendingFilters) return [];\n return this.pendingFilters.filter(f => f.active).map(f => f.name);\n },\n\n cancelButtonLabel () {\n return this.i18n.$t('DIALTONE_FILTER_PILL_CANCEL_BUTTON_LABEL');\n },\n\n applyButtonLabel () {\n return this.i18n.$t('DIALTONE_FILTER_PILL_APPLY_BUTTON_LABEL');\n },\n\n clearIconSize () {\n if (String(this.size) === '100') return '100';\n return BUTTON_ICON_SIZES[String(this.size)];\n },\n },\n\n watch: {\n isOpen (isOpen) {\n this.$emit('open', isOpen);\n if (this.deferSelection) {\n if (isOpen) {\n this.pendingFilters = JSON.parse(JSON.stringify(this.filters));\n } else {\n this.pendingFilters = null;\n }\n }\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 if (this.deferSelection && this.useDropdown) {\n console.warn('deferSelection has no effect when useDropdown is true.');\n }\n },\n\n methods: {\n clearFilter ($event) {\n this.filters.forEach(filter => delete filter.active);\n this.$emit('clear', $event)\n },\n\n openPopover () {\n if (this.readOnly) return;\n this.isOpen = true;\n },\n\n selectFilter (selectedFilter, close) {\n this.filters.forEach(filter => {\n filter.active = filter === selectedFilter;\n });\n close();\n },\n\n applySelection () {\n if (!this.pendingFilters) return;\n this.filters.forEach((filter, i) => {\n if (this.pendingFilters[i]) {\n filter.active = this.pendingFilters[i].active;\n } else {\n delete filter.active;\n }\n });\n this.$emit('apply');\n this.isOpen = false;\n },\n\n cancelSelection () {\n this.isOpen = false;\n },\n },\n};\n</script>\n"],"mappings":"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"}