npm - @dialpad/dialtone-vue - Versions diffs - 3.219.0 → 3.220.0-next.1 - Mend

@dialpad/dialtone-vue 3.219.0 → 3.220.0-next.1

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 (948) hide show

package/dist/{attachment_carousel-CouFqFMw.js → attachment_carousel-1qxTI-NN.js} RENAMED Viewed

@@ -4,7 +4,7 @@ import n from "./lib/button/button.js";
 import r from "./lib/image-viewer/image-viewer.js";
 import i from "./lib/progress-circle/progress-circle.js";
 import { Fragment as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, openBlock as d, renderList as f, resolveComponent as p, resolveDynamicComponent as m, vShow as h, withCtx as g, withDirectives as _ } from "vue";
-import { DtIconArrowLeft as v, DtIconArrowRight as y, DtIconClose as b } from "@dialpad/dialtone-icons/vue3";
+import { DtIconArrowLeft as v, DtIconArrowRight as y, DtIconClose as b } from "@dialpad/dialtone-icons/vue";
 //#region recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue
 var x = {
 	compatConfig: { MODE: 3 },
@@ -58,7 +58,7 @@ function T(e, t, n, r, i, a) {
 		tabindex: "0",
 		class: "d-recipe-attachment-carousel__image-close-button",
 		circle: "",
-		size: "xs",
+		size: 100,
 		importance: "clear",
 		"aria-label": a.closeButtonTitle,
 		title: a.closeButtonTitle,
@@ -163,7 +163,7 @@ function A(e, t, n, r, i, l) {
 			"aria-label": i.i18n.$t("DIALTONE_ATTACHMENT_CAROUSEL_LEFT_ARROW_ARIA_LABEL"),
 			class: "d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--left",
 			circle: "",
-			size: "xs",
+			size: 100,
 			importance: "clear",
 			onClick: l.leftScroll
 		}, {
@@ -175,7 +175,7 @@ function A(e, t, n, r, i, l) {
 			"aria-label": i.i18n.$t("DIALTONE_ATTACHMENT_CAROUSEL_RIGHT_ARROW_ARIA_LABEL"),
 			class: "d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--right",
 			circle: "",
-			size: "xs",
+			size: 100,
 			importance: "clear",
 			onClick: l.rightScroll
 		}, {
@@ -188,4 +188,4 @@ var j = /* @__PURE__ */ e(O, [["render", A]]);
 //#endregion
 export { j as t };
-//# sourceMappingURL=attachment_carousel-CouFqFMw.js.map
+//# sourceMappingURL=attachment_carousel-1qxTI-NN.js.map

package/dist/attachment_carousel-1qxTI-NN.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"attachment_carousel-1qxTI-NN.js","names":[],"sources":["../recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue","../recipes/conversation_view/attachment_carousel/attachment_carousel.vue"],"sourcesContent":["<template>\n <li\n class=\"d-recipe-attachment-carousel__image\"\n >\n <dt-image-viewer\n image-button-class=\"d-recipe-attachment-carousel__image-viewer\"\n :image-src=\"mediaItem.path\"\n :image-alt=\"mediaItem.altText\"\n :aria-label=\"i18n.$t('DIALTONE_IMAGE_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL')\"\n />\n\n \n <div\n class=\"d-recipe-attachment-carousel__image-top-right\"\n >\n <span\n class=\"d-recipe-attachment-carousel__image-progress-bar\"\n >\n <dt-progress-circle\n v-if=\"mediaItem.isUploading\"\n kind=\"brand\"\n size=\"400\"\n :progress=\"mediaItem.progress\"\n :aria-label=\"i18n.$t('DIALTONE_IMAGE_CAROUSEL_PROGRESS_BAR_ARIA_LABEL')\"\n />\n </span>\n <dt-button\n :id=\"`closeButton-${index}`\"\n tabindex=\"0\"\n class=\"d-recipe-attachment-carousel__image-close-button\"\n circle\n :size=\"100\"\n importance=\"clear\"\n :aria-label=\"closeButtonTitle\"\n :title=\"closeButtonTitle\"\n @click=\"removeMediaItem(index)\"\n >\n <template #icon>\n <dt-icon-close\n size=\"200\"\n />\n </template>\n </dt-button>\n </div>\n </li>\n</template>\n\n<script>\nimport { DtImageViewer } from '@/components/image_viewer';\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue';\nimport { DialtoneLocalization } from '@/localization';\n\nimport { DtProgressCircle } from '@/components/progress_circle';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtImageCarousel',\n\n components: {\n DtImageViewer,\n DtButton,\n DtIconClose,\n DtProgressCircle,\n },\n\n props: {\n mediaItem: {\n type: Object,\n required: true,\n },\n\n index: {\n type: Number,\n required: true,\n },\n },\n\n emits: [\n /**\n * Emitted when media close button is clicked to remove the image\n *\n * @event remove-media\n * @type {Number}\n */\n 'remove-media',\n ],\n\n data () {\n return {\n i18n: new DialtoneLocalization(),\n };\n },\n\n computed: {\n closeButtonTitle () {\n return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n },\n },\n\n methods: {\n removeMediaItem (index) {\n this.$emit('remove-media', index);\n },\n },\n};\n</script>\n","<template>\n <div\n class=\"d-recipe-attachment-carousel\"\n role=\"presentation\"\n >\n <ul\n v-if=\"mediaList.length > 0\"\n ref=\"carousel\"\n class=\"d-recipe-attachment-carousel__media-list\"\n @scroll=\"handleScroll\"\n >\n \n <component\n :is=\"mediaComponent(mediaItem.type)\"\n v-for=\"(mediaItem, index) in filteredMediaList\"\n :key=\"`media-${index}`\"\n :index=\"index\"\n :media-item=\"mediaItem\"\n @remove-media=\"removeMediaItem(index)\"\n @focusin=\"onItemFocus\"\n />\n </ul>\n\n \n <dt-button\n v-show=\"showLeftArrow\"\n tabindex=\"-1\"\n :aria-label=\"i18n.$t('DIALTONE_ATTACHMENT_CAROUSEL_LEFT_ARROW_ARIA_LABEL')\"\n class=\"d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--left\"\n circle\n :size=\"100\"\n importance=\"clear\"\n @click=\"leftScroll\"\n >\n <template #icon>\n <dt-icon-arrow-left\n size=\"100\"\n />\n </template>\n </dt-button>\n <dt-button\n v-show=\"showRightArrow\"\n tabindex=\"-1\"\n :aria-label=\"i18n.$t('DIALTONE_ATTACHMENT_CAROUSEL_RIGHT_ARROW_ARIA_LABEL')\"\n class=\"d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--right\"\n circle\n :size=\"100\"\n importance=\"clear\"\n @click=\"rightScroll\"\n >\n <template #icon>\n <dt-icon-arrow-right\n size=\"100\"\n />\n </template>\n </dt-button>\n </div>\n</template>\n\n<script>\nimport { DtIconArrowRight, DtIconArrowLeft } from '@dialpad/dialtone-icons/vue';\nimport { DtButton } from '@/components/button';\nimport { DialtoneLocalization } from '@/localization';\n\nimport DtImageCarousel from './media_components/image_carousel.vue';\n\nconst MEDIA_ITEM_WIDTH = 64;\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtRecipeAttachmentCarousel',\n\n components: {\n DtButton,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtImageCarousel,\n },\n\n /* inheritAttrs: false is generally an option we want to set on library\n components. This allows any attributes passed in that are not recognized\n as props to be passed down to another element or component using v-bind:$attrs\n more info: https://vuejs.org/v2/api/#inheritAttrs */\n // inheritAttrs: false,\n\n props: {\n /**\n * media - object array of media objects\n * @type {Array}\n *\n * Object: {\n * path: String,\n * altText: String | null,\n * }\n */\n mediaList: {\n type: Array,\n default: () => [],\n },\n },\n\n emits: [\n /**\n * Emitted when popover is shown or hidden\n *\n * @event remove-media\n * @type {Number}\n */\n 'remove-media',\n ],\n\n data () {\n return {\n showCloseButton: {},\n showRightArrow: true,\n showLeftArrow: false,\n isMounted: false,\n i18n: new DialtoneLocalization(),\n };\n },\n\n computed: {\n filteredMediaList () {\n return this.mediaList.filter((mediaItem) => mediaItem.type === 'image' || mediaItem.type === 'video');\n },\n },\n\n mounted: function () {\n this.showLeftArrow = this.$refs.carousel.scrollLeft > 0;\n this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth;\n },\n\n methods: {\n onItemFocus (e) {\n e.currentTarget.scrollIntoView({ behavior: 'smooth' });\n },\n\n mediaComponent (type) {\n switch (type) {\n case 'image':\n return 'dt-image-carousel';\n default:\n // unknown media type\n return null;\n }\n },\n\n removeMediaItem (index) {\n // make sure the carousel arrows is updated. 64 is the width of each media item\n this.showRightArrow = this.$refs.carousel.scrollWidth > (this.$refs.carousel.clientWidth + MEDIA_ITEM_WIDTH);\n this.$emit('remove-media', index);\n },\n\n closeButton (val, index) {\n this.showCloseButton[index] = val;\n },\n\n handleScroll () {\n const carousel = this.$refs.carousel;\n this.showLeftArrow = carousel.scrollLeft > 0;\n this.showRightArrow = !((carousel.scrollLeft + carousel.clientWidth) === carousel.scrollWidth);\n },\n\n leftScroll () {\n this.$refs.carousel.scrollTo({\n left: this.$refs.carousel.scrollLeft - 100,\n behavior: 'smooth',\n });\n },\n\n rightScroll () {\n this.$refs.carousel.scrollTo({\n left: this.$refs.carousel.scrollLeft + 100,\n behavior: 'smooth',\n });\n },\n },\n};\n</script>\n"],"mappings":"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"}

package/dist/attachment_carousel-wnZS3vEt.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ require(`./chunk-Bmb41Sf3.cjs`);const e=require(`./_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`./localization/index.cjs`),n=require(`./lib/button/button.cjs`),r=require(`./lib/image-viewer/image-viewer.cjs`),i=require(`./lib/progress-circle/progress-circle.cjs`);let a=require(`vue`),o=require(`@dialpad/dialtone-icons/vue`);var s={compatConfig:{MODE:3},name:`DtImageCarousel`,components:{DtImageViewer:r.default,DtButton:n.default,DtIconClose:o.DtIconClose,DtProgressCircle:i.default},props:{mediaItem:{type:Object,required:!0},index:{type:Number,required:!0}},emits:[`remove-media`],data(){return{i18n:new t.DialtoneLocalization}},computed:{closeButtonTitle(){return this.i18n.$t(`DIALTONE_CLOSE_BUTTON`)}},methods:{removeMediaItem(e){this.$emit(`remove-media`,e)}}},c={class:`d-recipe-attachment-carousel__image`},l={class:`d-recipe-attachment-carousel__image-top-right`},u={class:`d-recipe-attachment-carousel__image-progress-bar`};function d(e,t,n,r,i,o){let s=(0,a.resolveComponent)(`dt-image-viewer`),d=(0,a.resolveComponent)(`dt-progress-circle`),f=(0,a.resolveComponent)(`dt-icon-close`),p=(0,a.resolveComponent)(`dt-button`);return(0,a.openBlock)(),(0,a.createElementBlock)(`li`,c,[(0,a.createVNode)(s,{"image-button-class":`d-recipe-attachment-carousel__image-viewer`,"image-src":n.mediaItem.path,"image-alt":n.mediaItem.altText,"aria-label":i.i18n.$t(`DIALTONE_IMAGE_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL`)},null,8,[`image-src`,`image-alt`,`aria-label`]),(0,a.createElementVNode)(`div`,l,[(0,a.createElementVNode)(`span`,u,[n.mediaItem.isUploading?((0,a.openBlock)(),(0,a.createBlock)(d,{key:0,kind:`brand`,size:`400`,progress:n.mediaItem.progress,"aria-label":i.i18n.$t(`DIALTONE_IMAGE_CAROUSEL_PROGRESS_BAR_ARIA_LABEL`)},null,8,[`progress`,`aria-label`])):(0,a.createCommentVNode)(``,!0)]),(0,a.createVNode)(p,{id:`closeButton-${n.index}`,tabindex:`0`,class:`d-recipe-attachment-carousel__image-close-button`,circle:``,size:100,importance:`clear`,"aria-label":o.closeButtonTitle,title:o.closeButtonTitle,onClick:t[0]\|\|(t[0]=e=>o.removeMediaItem(n.index))},{icon:(0,a.withCtx)(()=>[(0,a.createVNode)(f,{size:`200`})]),_:1},8,[`id`,`aria-label`,`title`])])])}var f=e.t(s,[[`render`,d]]),p=64,m={compatConfig:{MODE:3},name:`DtRecipeAttachmentCarousel`,components:{DtButton:n.default,DtIconArrowRight:o.DtIconArrowRight,DtIconArrowLeft:o.DtIconArrowLeft,DtImageCarousel:f},props:{mediaList:{type:Array,default:()=>[]}},emits:[`remove-media`],data(){return{showCloseButton:{},showRightArrow:!0,showLeftArrow:!1,isMounted:!1,i18n:new t.DialtoneLocalization}},computed:{filteredMediaList(){return this.mediaList.filter(e=>e.type===`image`\|\|e.type===`video`)}},mounted:function(){this.showLeftArrow=this.$refs.carousel.scrollLeft>0,this.showRightArrow=this.$refs.carousel.scrollWidth>this.$refs.carousel.clientWidth},methods:{onItemFocus(e){e.currentTarget.scrollIntoView({behavior:`smooth`})},mediaComponent(e){switch(e){case`image`:return`dt-image-carousel`;default:return null}},removeMediaItem(e){this.showRightArrow=this.$refs.carousel.scrollWidth>this.$refs.carousel.clientWidth+p,this.$emit(`remove-media`,e)},closeButton(e,t){this.showCloseButton[t]=e},handleScroll(){let e=this.$refs.carousel;this.showLeftArrow=e.scrollLeft>0,this.showRightArrow=e.scrollLeft+e.clientWidth!==e.scrollWidth},leftScroll(){this.$refs.carousel.scrollTo({left:this.$refs.carousel.scrollLeft-100,behavior:`smooth`})},rightScroll(){this.$refs.carousel.scrollTo({left:this.$refs.carousel.scrollLeft+100,behavior:`smooth`})}}},h={class:`d-recipe-attachment-carousel`,role:`presentation`};function g(e,t,n,r,i,o){let s=(0,a.resolveComponent)(`dt-icon-arrow-left`),c=(0,a.resolveComponent)(`dt-button`),l=(0,a.resolveComponent)(`dt-icon-arrow-right`);return(0,a.openBlock)(),(0,a.createElementBlock)(`div`,h,[n.mediaList.length>0?((0,a.openBlock)(),(0,a.createElementBlock)(`ul`,{key:0,ref:`carousel`,class:`d-recipe-attachment-carousel__media-list`,onScroll:t[0]\|\|(t[0]=(...e)=>o.handleScroll&&o.handleScroll(...e))},[((0,a.openBlock)(!0),(0,a.createElementBlock)(a.Fragment,null,(0,a.renderList)(o.filteredMediaList,(e,t)=>((0,a.openBlock)(),(0,a.createBlock)((0,a.resolveDynamicComponent)(o.mediaComponent(e.type)),{key:`media-${t}`,index:t,"media-item":e,onRemoveMedia:e=>o.removeMediaItem(t),onFocusin:o.onItemFocus},null,40,[`index`,`media-item`,`onRemoveMedia`,`onFocusin`]))),128))],544)):(0,a.createCommentVNode)(``,!0),(0,a.withDirectives)((0,a.createVNode)(c,{tabindex:`-1`,"aria-label":i.i18n.$t(`DIALTONE_ATTACHMENT_CAROUSEL_LEFT_ARROW_ARIA_LABEL`),class:`d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--left`,circle:``,size:100,importance:`clear`,onClick:o.leftScroll},{icon:(0,a.withCtx)(()=>[(0,a.createVNode)(s,{size:`100`})]),_:1},8,[`aria-label`,`onClick`]),[[a.vShow,i.showLeftArrow]]),(0,a.withDirectives)((0,a.createVNode)(c,{tabindex:`-1`,"aria-label":i.i18n.$t(`DIALTONE_ATTACHMENT_CAROUSEL_RIGHT_ARROW_ARIA_LABEL`),class:`d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--right`,circle:``,size:100,importance:`clear`,onClick:o.rightScroll},{icon:(0,a.withCtx)(()=>[(0,a.createVNode)(l,{size:`100`})]),_:1},8,[`aria-label`,`onClick`]),[[a.vShow,i.showRightArrow]])])}var _=e.t(m,[[`render`,g]]);Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return _}});
2	+ //# sourceMappingURL=attachment_carousel-wnZS3vEt.cjs.map

package/dist/attachment_carousel-wnZS3vEt.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"attachment_carousel-wnZS3vEt.cjs","names":[],"sources":["../recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue","../recipes/conversation_view/attachment_carousel/attachment_carousel.vue"],"sourcesContent":["<template>\n <li\n class=\"d-recipe-attachment-carousel__image\"\n >\n <dt-image-viewer\n image-button-class=\"d-recipe-attachment-carousel__image-viewer\"\n :image-src=\"mediaItem.path\"\n :image-alt=\"mediaItem.altText\"\n :aria-label=\"i18n.$t('DIALTONE_IMAGE_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL')\"\n />\n\n \n <div\n class=\"d-recipe-attachment-carousel__image-top-right\"\n >\n <span\n class=\"d-recipe-attachment-carousel__image-progress-bar\"\n >\n <dt-progress-circle\n v-if=\"mediaItem.isUploading\"\n kind=\"brand\"\n size=\"400\"\n :progress=\"mediaItem.progress\"\n :aria-label=\"i18n.$t('DIALTONE_IMAGE_CAROUSEL_PROGRESS_BAR_ARIA_LABEL')\"\n />\n </span>\n <dt-button\n :id=\"`closeButton-${index}`\"\n tabindex=\"0\"\n class=\"d-recipe-attachment-carousel__image-close-button\"\n circle\n :size=\"100\"\n importance=\"clear\"\n :aria-label=\"closeButtonTitle\"\n :title=\"closeButtonTitle\"\n @click=\"removeMediaItem(index)\"\n >\n <template #icon>\n <dt-icon-close\n size=\"200\"\n />\n </template>\n </dt-button>\n </div>\n </li>\n</template>\n\n<script>\nimport { DtImageViewer } from '@/components/image_viewer';\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue';\nimport { DialtoneLocalization } from '@/localization';\n\nimport { DtProgressCircle } from '@/components/progress_circle';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtImageCarousel',\n\n components: {\n DtImageViewer,\n DtButton,\n DtIconClose,\n DtProgressCircle,\n },\n\n props: {\n mediaItem: {\n type: Object,\n required: true,\n },\n\n index: {\n type: Number,\n required: true,\n },\n },\n\n emits: [\n /**\n * Emitted when media close button is clicked to remove the image\n *\n * @event remove-media\n * @type {Number}\n */\n 'remove-media',\n ],\n\n data () {\n return {\n i18n: new DialtoneLocalization(),\n };\n },\n\n computed: {\n closeButtonTitle () {\n return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n },\n },\n\n methods: {\n removeMediaItem (index) {\n this.$emit('remove-media', index);\n },\n },\n};\n</script>\n","<template>\n <div\n class=\"d-recipe-attachment-carousel\"\n role=\"presentation\"\n >\n <ul\n v-if=\"mediaList.length > 0\"\n ref=\"carousel\"\n class=\"d-recipe-attachment-carousel__media-list\"\n @scroll=\"handleScroll\"\n >\n \n <component\n :is=\"mediaComponent(mediaItem.type)\"\n v-for=\"(mediaItem, index) in filteredMediaList\"\n :key=\"`media-${index}`\"\n :index=\"index\"\n :media-item=\"mediaItem\"\n @remove-media=\"removeMediaItem(index)\"\n @focusin=\"onItemFocus\"\n />\n </ul>\n\n \n <dt-button\n v-show=\"showLeftArrow\"\n tabindex=\"-1\"\n :aria-label=\"i18n.$t('DIALTONE_ATTACHMENT_CAROUSEL_LEFT_ARROW_ARIA_LABEL')\"\n class=\"d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--left\"\n circle\n :size=\"100\"\n importance=\"clear\"\n @click=\"leftScroll\"\n >\n <template #icon>\n <dt-icon-arrow-left\n size=\"100\"\n />\n </template>\n </dt-button>\n <dt-button\n v-show=\"showRightArrow\"\n tabindex=\"-1\"\n :aria-label=\"i18n.$t('DIALTONE_ATTACHMENT_CAROUSEL_RIGHT_ARROW_ARIA_LABEL')\"\n class=\"d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--right\"\n circle\n :size=\"100\"\n importance=\"clear\"\n @click=\"rightScroll\"\n >\n <template #icon>\n <dt-icon-arrow-right\n size=\"100\"\n />\n </template>\n </dt-button>\n </div>\n</template>\n\n<script>\nimport { DtIconArrowRight, DtIconArrowLeft } from '@dialpad/dialtone-icons/vue';\nimport { DtButton } from '@/components/button';\nimport { DialtoneLocalization } from '@/localization';\n\nimport DtImageCarousel from './media_components/image_carousel.vue';\n\nconst MEDIA_ITEM_WIDTH = 64;\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtRecipeAttachmentCarousel',\n\n components: {\n DtButton,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtImageCarousel,\n },\n\n /* inheritAttrs: false is generally an option we want to set on library\n components. This allows any attributes passed in that are not recognized\n as props to be passed down to another element or component using v-bind:$attrs\n more info: https://vuejs.org/v2/api/#inheritAttrs */\n // inheritAttrs: false,\n\n props: {\n /**\n * media - object array of media objects\n * @type {Array}\n *\n * Object: {\n * path: String,\n * altText: String | null,\n * }\n */\n mediaList: {\n type: Array,\n default: () => [],\n },\n },\n\n emits: [\n /**\n * Emitted when popover is shown or hidden\n *\n * @event remove-media\n * @type {Number}\n */\n 'remove-media',\n ],\n\n data () {\n return {\n showCloseButton: {},\n showRightArrow: true,\n showLeftArrow: false,\n isMounted: false,\n i18n: new DialtoneLocalization(),\n };\n },\n\n computed: {\n filteredMediaList () {\n return this.mediaList.filter((mediaItem) => mediaItem.type === 'image' || mediaItem.type === 'video');\n },\n },\n\n mounted: function () {\n this.showLeftArrow = this.$refs.carousel.scrollLeft > 0;\n this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth;\n },\n\n methods: {\n onItemFocus (e) {\n e.currentTarget.scrollIntoView({ behavior: 'smooth' });\n },\n\n mediaComponent (type) {\n switch (type) {\n case 'image':\n return 'dt-image-carousel';\n default:\n // unknown media type\n return null;\n }\n },\n\n removeMediaItem (index) {\n // make sure the carousel arrows is updated. 64 is the width of each media item\n this.showRightArrow = this.$refs.carousel.scrollWidth > (this.$refs.carousel.clientWidth + MEDIA_ITEM_WIDTH);\n this.$emit('remove-media', index);\n },\n\n closeButton (val, index) {\n this.showCloseButton[index] = val;\n },\n\n handleScroll () {\n const carousel = this.$refs.carousel;\n this.showLeftArrow = carousel.scrollLeft > 0;\n this.showRightArrow = !((carousel.scrollLeft + carousel.clientWidth) === carousel.scrollWidth);\n },\n\n leftScroll () {\n this.$refs.carousel.scrollTo({\n left: this.$refs.carousel.scrollLeft - 100,\n behavior: 'smooth',\n });\n },\n\n rightScroll () {\n this.$refs.carousel.scrollTo({\n left: this.$refs.carousel.scrollLeft + 100,\n behavior: 'smooth',\n });\n },\n },\n};\n</script>\n"],"mappings":"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"}

package/dist/{combobox-DgClbLOg.js → combobox-BQBKrDTW.js} RENAMED Viewed

@@ -1,19 +1,20 @@
-import { getUniqueString as e, hasSlotContent as t } from "./common/utils/index.js";
-import { t as n } from "./_plugin-vue_export-helper-BTgDAbhb.js";
-import r from "./common/mixins/keyboard-list-navigation.js";
-import i from "./lib/combobox/combobox-loading-list.js";
-import a from "./lib/combobox/combobox-empty-list.js";
-import { COMBOBOX_LABEL_SIZES as o } from "./lib/combobox/combobox-constants.js";
-import { createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, mergeProps as d, normalizeProps as f, openBlock as p, renderSlot as m, resolveComponent as h, withCtx as g, withKeys as _, withModifiers as v } from "vue";
+import { COMPONENT_SIZES as e } from "./common/constants/sizes.js";
+import { getUniqueString as t, hasSlotContent as n } from "./common/utils/index.js";
+import { t as r } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import i from "./common/mixins/keyboard-list-navigation.js";
+import a from "./lib/combobox/combobox-loading-list.js";
+import o from "./lib/combobox/combobox-empty-list.js";
+import { COMBOBOX_LABEL_SIZES as s } from "./lib/combobox/combobox-constants.js";
+import { createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, mergeProps as f, normalizeProps as p, openBlock as m, renderSlot as h, resolveComponent as g, withCtx as _, withKeys as v, withModifiers as y } from "vue";
 //#region components/combobox/combobox.vue
-var y = {
+var b = {
 	compatConfig: { MODE: 3 },
 	name: "DtCombobox",
 	components: {
-		ComboboxLoadingList: i,
-		ComboboxEmptyList: a
+		ComboboxLoadingList: a,
+		ComboboxEmptyList: o
 	},
-	mixins: [r({
+	mixins: [i({
 		indexKey: "highlightIndex",
 		idKey: "highlightId",
 		listElementKey: "getListElement",
@@ -27,14 +28,14 @@ var y = {
 			type: String,
 			required: !0
 		},
-		labelVisible: {
+		showLabel: {
 			type: Boolean,
 			default: !0
 		},
 		size: {
-			type: String,
+			type: [String, Number],
 			default: null,
-			validator: (e) => Object.values(o).includes(e)
+			validator: (t) => t === null || Object.values(s).includes(t) || Object.keys(e).includes(String(t))
 		},
 		description: {
 			type: String,
@@ -43,7 +44,7 @@ var y = {
 		listId: {
 			type: String,
 			default() {
-				return e();
+				return t();
 			}
 		},
 		onBeginningOfList: {
@@ -96,14 +97,14 @@ var y = {
 	data() {
 		return {
 			outsideRenderedListRef: null,
-			hasSlotContent: t
+			hasSlotContent: n
 		};
 	},
 	computed: {
 		inputProps() {
 			return {
 				label: this.label,
-				labelVisible: this.labelVisible,
+				showLabel: this.showLabel,
 				size: this.size,
 				description: this.description,
 				role: "combobox",
@@ -192,38 +193,38 @@ var y = {
 			this.$slots.emptyListItem || this.emptyList && !this.emptyStateMessage && console.error("Invalid props: you must pass both props emptyList and emptyStateMessage to show the\n      empty message.");
 		}
 	}
-}, b = { "data-qa": "dt-combobox-input-wrapper" };
-function x(e, t, n, r, i, a) {
-	let o = h("combobox-loading-list"), y = h("combobox-empty-list");
-	return p(), l("div", { onKeydown: [
-		t[3] || (t[3] = _(v((e) => a.onKeyValidation(e, "onEscapeKey"), ["stop"]), ["esc"])),
-		t[4] || (t[4] = _(v((e) => a.onKeyValidation(e, "onEnterKey"), ["exact"]), ["enter"])),
-		t[5] || (t[5] = _(v((e) => a.onKeyValidation(e, "onUpKey"), ["stop", "prevent"]), ["up"])),
-		t[6] || (t[6] = _(v((e) => a.onKeyValidation(e, "onDownKey"), ["stop", "prevent"]), ["down"])),
-		t[7] || (t[7] = _(v((e) => a.onKeyValidation(e, "onHomeKey"), ["stop", "prevent"]), ["home"])),
-		t[8] || (t[8] = _(v((e) => a.onKeyValidation(e, "onEndKey"), ["stop", "prevent"]), ["end"]))
-	] }, [u("div", b, [m(e.$slots, "input", { inputProps: a.inputProps })]), n.showList ? (p(), l("div", {
+}, x = { "data-qa": "dt-combobox-input-wrapper" };
+function S(e, t, n, r, i, a) {
+	let o = g("combobox-loading-list"), s = g("combobox-empty-list");
+	return m(), u("div", { onKeydown: [
+		t[3] || (t[3] = v(y((e) => a.onKeyValidation(e, "onEscapeKey"), ["stop"]), ["esc"])),
+		t[4] || (t[4] = v(y((e) => a.onKeyValidation(e, "onEnterKey"), ["exact"]), ["enter"])),
+		t[5] || (t[5] = v(y((e) => a.onKeyValidation(e, "onUpKey"), ["stop", "prevent"]), ["up"])),
+		t[6] || (t[6] = v(y((e) => a.onKeyValidation(e, "onDownKey"), ["stop", "prevent"]), ["down"])),
+		t[7] || (t[7] = v(y((e) => a.onKeyValidation(e, "onHomeKey"), ["stop", "prevent"]), ["home"])),
+		t[8] || (t[8] = v(y((e) => a.onKeyValidation(e, "onEndKey"), ["stop", "prevent"]), ["end"]))
+	] }, [d("div", x, [h(e.$slots, "input", { inputProps: a.inputProps })]), n.showList ? (m(), u("div", {
 		key: 0,
 		ref: "listWrapper",
 		"data-qa": "dt-combobox-list-wrapper",
 		onMouseleave: t[0] || (t[0] = (...e) => a.clearHighlightIndex && a.clearHighlightIndex(...e)),
 		onFocusout: t[1] || (t[1] = (...e) => a.clearHighlightIndex && a.clearHighlightIndex(...e)),
 		onMousemoveCapture: t[2] || (t[2] = (...e) => a.onMouseHighlight && a.onMouseHighlight(...e))
-	}, [n.loading && !n.listRenderedOutside ? (p(), s(o, f(d({ key: 0 }, a.listProps)), null, 16)) : n.emptyList && (n.emptyStateMessage || i.hasSlotContent(e.$slots.emptyListItem)) && !n.listRenderedOutside ? (p(), s(y, d({ key: 1 }, a.listProps, {
+	}, [n.loading && !n.listRenderedOutside ? (m(), c(o, p(f({ key: 0 }, a.listProps)), null, 16)) : n.emptyList && (n.emptyStateMessage || i.hasSlotContent(e.$slots.emptyListItem)) && !n.listRenderedOutside ? (m(), c(s, f({ key: 1 }, a.listProps, {
 		message: n.emptyStateMessage,
 		"item-class": n.emptyStateClass
 	}), {
-		default: g(() => [m(e.$slots, "emptyListItem")]),
+		default: _(() => [h(e.$slots, "emptyListItem")]),
 		_: 3
-	}, 16, ["message", "item-class"])) : m(e.$slots, "list", {
+	}, 16, ["message", "item-class"])) : h(e.$slots, "list", {
 		key: 2,
 		listProps: a.listProps,
 		opened: a.onOpen,
 		clearHighlightIndex: a.clearHighlightIndex
-	})], 544)) : c("", !0)], 32);
+	})], 544)) : l("", !0)], 32);
 }
-var S = /* @__PURE__ */ n(y, [["render", x]]);
+var C = /* @__PURE__ */ r(b, [["render", S]]);
 //#endregion
-export { S as t };
+export { C as t };
-//# sourceMappingURL=combobox-DgClbLOg.js.map
+//# sourceMappingURL=combobox-BQBKrDTW.js.map

package/dist/combobox-BQBKrDTW.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"combobox-BQBKrDTW.js","names":[],"sources":["../components/combobox/combobox.vue"],"sourcesContent":["\n<template>\n <div\n @keydown.esc.stop=\"onKeyValidation($event, 'onEscapeKey')\"\n @keydown.enter.exact=\"onKeyValidation($event, 'onEnterKey')\"\n @keydown.up.stop.prevent=\"onKeyValidation($event, 'onUpKey')\"\n @keydown.down.stop.prevent=\"onKeyValidation($event, 'onDownKey')\"\n @keydown.home.stop.prevent=\"onKeyValidation($event, 'onHomeKey')\"\n @keydown.end.stop.prevent=\"onKeyValidation($event, 'onEndKey')\"\n >\n <div data-qa=\"dt-combobox-input-wrapper\">\n \n <slot\n name=\"input\"\n :input-props=\"inputProps\"\n />\n </div>\n\n <div\n v-if=\"showList\"\n ref=\"listWrapper\"\n data-qa=\"dt-combobox-list-wrapper\"\n @mouseleave=\"clearHighlightIndex\"\n @focusout=\"clearHighlightIndex\"\n @mousemove.capture=\"onMouseHighlight\"\n >\n <combobox-loading-list\n v-if=\"loading && !listRenderedOutside\"\n v-bind=\"listProps\"\n />\n <combobox-empty-list\n v-else-if=\"emptyList && (emptyStateMessage || hasSlotContent($slots.emptyListItem)) && !listRenderedOutside\"\n v-bind=\"listProps\"\n :message=\"emptyStateMessage\"\n :item-class=\"emptyStateClass\"\n >\n <slot name=\"emptyListItem\" />\n </combobox-empty-list>\n \n <slot\n v-else\n name=\"list\"\n :list-props=\"listProps\"\n :opened=\"onOpen\"\n :clear-highlight-index=\"clearHighlightIndex\"\n />\n </div>\n </div>\n</template>\n\n<script>\nimport ComboboxLoadingList from './combobox_loading-list.vue';\nimport ComboboxEmptyList from './combobox_empty-list.vue';\nimport { DtKeyboardListNavigationMixin } from '@/common/mixins';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { COMBOBOX_LABEL_SIZES } from '@/components/combobox';\nimport { COMPONENT_SIZES } from '@/common/constants';\n\n/**\n * A combobox is a semantic component that displays an input element combined with a listbox,\n * which enables the user to select items from the list.\n * @see https://dialtone.dialpad.com/components/combobox.html\n */\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtCombobox',\n\n components: {\n ComboboxLoadingList,\n ComboboxEmptyList,\n },\n\n mixins: [\n DtKeyboardListNavigationMixin({\n indexKey: 'highlightIndex',\n idKey: 'highlightId',\n listElementKey: 'getListElement',\n afterHighlightMethod: 'afterHighlight',\n beginningOfListMethod: 'beginningOfListMethod',\n endOfListMethod: 'endOfListMethod',\n activeItemKey: 'activeItemEl',\n }),\n ],\n\n props: {\n /**\n * String to use for the input label.\n */\n label: {\n type: String,\n required: true,\n },\n\n /**\n * Determines visibility of input label.\n * @values true, false\n */\n showLabel: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Size of the input.\n * @values 100, 200, 300, 400, 500\n */\n size: {\n type: [String, Number],\n default: null,\n validator: (t) => t === null\n || Object.values(COMBOBOX_LABEL_SIZES).includes(t)\n || Object.keys(COMPONENT_SIZES).includes(String(t)),\n },\n\n /**\n * Description for the input\n */\n description: {\n type: String,\n default: '',\n },\n\n /**\n * Sets an ID on the list element of the component. Used by several aria attributes\n * as well as when deriving the IDs for each item.\n */\n listId: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /**\n * A method that will be called when the selection goes past the beginning of the list.\n */\n onBeginningOfList: {\n type: Function,\n default: null,\n },\n\n /**\n * A method that will be called when the selection goes past the end of the list.\n */\n onEndOfList: {\n type: Function,\n default: null,\n },\n\n /**\n * Determines when to show the list element and also controls the aria-expanded attribute.\n * @values true, false\n */\n showList: {\n type: Boolean,\n default: false,\n },\n\n /**\n * If the list is rendered outside the component, like when using popover as the list wrapper.\n * @values true, false\n */\n listRenderedOutside: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Determines when to show the skeletons and also controls aria-busy attribute.\n * @values true, false\n */\n loading: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.\n * @values true, false\n */\n emptyList: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Message to show when the list is empty\n */\n emptyStateMessage: {\n type: String,\n default: '',\n },\n\n /**\n * Additional class name for the empty list element.\n * Can accept all of: String, Object, and Array, i.e. has the\n * same api as Vue's built-in handling of the class attribute.\n */\n emptyStateClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * Programmatically click on the active list item element when a selection\n * comes from keyboard navigation, i.e. pressing the \"Enter\" key.\n * @values true, false\n */\n clickOnSelect: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Event fired when item selected\n *\n * @event select\n * @type {Number}\n */\n 'select',\n\n /**\n * Event fired when pressing escape\n *\n * @event escape\n */\n 'escape',\n\n /**\n * Event fired when the highlight changes\n *\n * @event highlight\n * @type {Number}\n */\n 'highlight',\n\n /**\n * Event fired when list is shown or hidden\n *\n * @event opened\n * @type {Boolean}\n */\n 'opened',\n ],\n\n data () {\n return {\n // If the list is rendered at the root, rather than as a child\n // of this component, this is the ref to that dom element. Set\n // by the onOpen method.\n outsideRenderedListRef: null,\n hasSlotContent,\n };\n },\n\n computed: {\n inputProps () {\n return {\n label: this.label,\n showLabel: this.showLabel,\n size: this.size,\n description: this.description,\n role: 'combobox',\n 'aria-label': this.label,\n 'aria-expanded': this.showList.toString(),\n 'aria-owns': this.listId,\n 'aria-haspopup': 'listbox',\n 'aria-activedescendant': this.activeItemId,\n 'aria-controls': this.listId,\n };\n },\n\n listProps () {\n return {\n role: 'listbox',\n id: this.listId,\n // The list has to be positioned relatively so that the auto-scroll can\n // calculate the correct offset for the list items.\n class: 'd-ps-relative',\n 'aria-label': this.label,\n };\n },\n\n beginningOfListMethod () {\n return this.onBeginningOfList || this.jumpToEnd;\n },\n\n endOfListMethod () {\n return this.onEndOfList || this.jumpToBeginning;\n },\n\n activeItemId () {\n if (!this.showList || this.highlightIndex < 0 || this.loading) {\n return;\n }\n return this.highlightId;\n },\n\n activeItemEl () {\n if (!this.highlightId) return '';\n return this.getListElement().querySelector('#' + this.highlightId);\n },\n },\n\n watch: {\n showList (showList) {\n // When the list's visibility changes reset the highlight index.\n\n if (!this.listRenderedOutside) {\n this.setInitialHighlightIndex();\n this.$emit('opened', showList);\n }\n\n if (!showList && this.outsideRenderedListRef) {\n this.outsideRenderedListRef.removeEventListener('mousemove', this.onMouseHighlight);\n this.outsideRenderedListRef = null;\n }\n },\n\n loading () {\n this.$nextTick(() => {\n this.setInitialHighlightIndex();\n });\n },\n\n $props: {\n deep: true,\n immediate: true,\n handler () {\n this.validateEmptyListProps();\n },\n },\n },\n\n created () {\n this.validateEmptyListProps();\n },\n\n methods: {\n onMouseHighlight (e) {\n if (this.loading) return;\n\n const liElement = e.target.closest('li');\n\n if (liElement && this.highlightId !== liElement.id) {\n this.setHighlightId(liElement.id);\n }\n },\n\n getListElement () {\n return this.outsideRenderedListRef ?? this.$refs.listWrapper?.querySelector(`#${this.listId}`);\n },\n\n clearHighlightIndex () {\n if (this.showList) {\n this.setHighlightIndex(-1);\n }\n },\n\n afterHighlight () {\n if (this.loading) return;\n this.$emit('highlight', this.highlightIndex);\n },\n\n onEnterKey () {\n if (this.loading || this.emptyList) return;\n\n if (this.highlightIndex >= 0) {\n this.$emit('select', this.highlightIndex);\n\n if (this.clickOnSelect) {\n this.activeItemEl?.click();\n }\n }\n },\n\n onEscapeKey () {\n this.$emit('escape');\n },\n\n onOpen (open, contentRef) {\n this.outsideRenderedListRef = contentRef;\n this.outsideRenderedListRef?.addEventListener('mousemove', this.onMouseHighlight);\n this.$emit('opened', open);\n\n if (open) {\n this.setInitialHighlightIndex();\n }\n },\n\n onKeyValidation (e, eventHandler) {\n if (!this.showList || !this.getListElement()) return;\n\n this[eventHandler](e);\n },\n\n setInitialHighlightIndex () {\n if (!this.showList) return;\n this.$nextTick(() => {\n // When the list's is shown, reset the highlight index.\n // If the list is loading, set to -1\n this.setHighlightIndex(this.loading ? -1 : 0);\n });\n },\n\n validateEmptyListProps () {\n if (this.$slots.emptyListItem) { return; }\n\n if (this.emptyList && !this.emptyStateMessage) {\n console.error(`Invalid props: you must pass both props emptyList and emptyStateMessage to show the\n empty message.`);\n }\n },\n },\n};\n</script>\n"],"mappings":"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"}

package/dist/combobox-Da7wBh3G.cjs ADDED Viewed

@@ -0,0 +1,3 @@
+require(`./chunk-Bmb41Sf3.cjs`);const e=require(`./common/constants/sizes.cjs`),t=require(`./common/utils/index.cjs`),n=require(`./_plugin-vue_export-helper-D8jCH6HB.cjs`),r=require(`./common/mixins/keyboard-list-navigation.cjs`),i=require(`./lib/combobox/combobox-loading-list.cjs`),a=require(`./lib/combobox/combobox-empty-list.cjs`),o=require(`./lib/combobox/combobox-constants.cjs`);let s=require(`vue`);var c={compatConfig:{MODE:3},name:`DtCombobox`,components:{ComboboxLoadingList:i.default,ComboboxEmptyList:a.default},mixins:[r.default({indexKey:`highlightIndex`,idKey:`highlightId`,listElementKey:`getListElement`,afterHighlightMethod:`afterHighlight`,beginningOfListMethod:`beginningOfListMethod`,endOfListMethod:`endOfListMethod`,activeItemKey:`activeItemEl`})],props:{label:{type:String,required:!0},showLabel:{type:Boolean,default:!0},size:{type:[String,Number],default:null,validator:t=>t===null||Object.values(o.COMBOBOX_LABEL_SIZES).includes(t)||Object.keys(e.COMPONENT_SIZES).includes(String(t))},description:{type:String,default:``},listId:{type:String,default(){return t.getUniqueString()}},onBeginningOfList:{type:Function,default:null},onEndOfList:{type:Function,default:null},showList:{type:Boolean,default:!1},listRenderedOutside:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},emptyList:{type:Boolean,default:!1},emptyStateMessage:{type:String,default:``},emptyStateClass:{type:[String,Object,Array],default:``},clickOnSelect:{type:Boolean,default:!1}},emits:[`select`,`escape`,`highlight`,`opened`],data(){return{outsideRenderedListRef:null,hasSlotContent:t.hasSlotContent}},computed:{inputProps(){return{label:this.label,showLabel:this.showLabel,size:this.size,description:this.description,role:`combobox`,"aria-label":this.label,"aria-expanded":this.showList.toString(),"aria-owns":this.listId,"aria-haspopup":`listbox`,"aria-activedescendant":this.activeItemId,"aria-controls":this.listId}},listProps(){return{role:`listbox`,id:this.listId,class:`d-ps-relative`,"aria-label":this.label}},beginningOfListMethod(){return this.onBeginningOfList||this.jumpToEnd},endOfListMethod(){return this.onEndOfList||this.jumpToBeginning},activeItemId(){if(!(!this.showList||this.highlightIndex<0||this.loading))return this.highlightId},activeItemEl(){return this.highlightId?this.getListElement().querySelector(`#`+this.highlightId):``}},watch:{showList(e){this.listRenderedOutside||(this.setInitialHighlightIndex(),this.$emit(`opened`,e)),!e&&this.outsideRenderedListRef&&(this.outsideRenderedListRef.removeEventListener(`mousemove`,this.onMouseHighlight),this.outsideRenderedListRef=null)},loading(){this.$nextTick(()=>{this.setInitialHighlightIndex()})},$props:{deep:!0,immediate:!0,handler(){this.validateEmptyListProps()}}},created(){this.validateEmptyListProps()},methods:{onMouseHighlight(e){if(this.loading)return;let t=e.target.closest(`li`);t&&this.highlightId!==t.id&&this.setHighlightId(t.id)},getListElement(){return this.outsideRenderedListRef??this.$refs.listWrapper?.querySelector(`#${this.listId}`)},clearHighlightIndex(){this.showList&&this.setHighlightIndex(-1)},afterHighlight(){this.loading||this.$emit(`highlight`,this.highlightIndex)},onEnterKey(){this.loading||this.emptyList||this.highlightIndex>=0&&(this.$emit(`select`,this.highlightIndex),this.clickOnSelect&&this.activeItemEl?.click())},onEscapeKey(){this.$emit(`escape`)},onOpen(e,t){this.outsideRenderedListRef=t,this.outsideRenderedListRef?.addEventListener(`mousemove`,this.onMouseHighlight),this.$emit(`opened`,e),e&&this.setInitialHighlightIndex()},onKeyValidation(e,t){!this.showList||!this.getListElement()||this[t](e)},setInitialHighlightIndex(){this.showList&&this.$nextTick(()=>{this.setHighlightIndex(this.loading?-1:0)})},validateEmptyListProps(){this.$slots.emptyListItem||this.emptyList&&!this.emptyStateMessage&&console.error(`Invalid props: you must pass both props emptyList and emptyStateMessage to show the
+      empty message.`)}}},l={"data-qa":`dt-combobox-input-wrapper`};function u(e,t,n,r,i,a){let o=(0,s.resolveComponent)(`combobox-loading-list`),c=(0,s.resolveComponent)(`combobox-empty-list`);return(0,s.openBlock)(),(0,s.createElementBlock)(`div`,{onKeydown:[t[3]||(t[3]=(0,s.withKeys)((0,s.withModifiers)(e=>a.onKeyValidation(e,`onEscapeKey`),[`stop`]),[`esc`])),t[4]||(t[4]=(0,s.withKeys)((0,s.withModifiers)(e=>a.onKeyValidation(e,`onEnterKey`),[`exact`]),[`enter`])),t[5]||(t[5]=(0,s.withKeys)((0,s.withModifiers)(e=>a.onKeyValidation(e,`onUpKey`),[`stop`,`prevent`]),[`up`])),t[6]||(t[6]=(0,s.withKeys)((0,s.withModifiers)(e=>a.onKeyValidation(e,`onDownKey`),[`stop`,`prevent`]),[`down`])),t[7]||(t[7]=(0,s.withKeys)((0,s.withModifiers)(e=>a.onKeyValidation(e,`onHomeKey`),[`stop`,`prevent`]),[`home`])),t[8]||(t[8]=(0,s.withKeys)((0,s.withModifiers)(e=>a.onKeyValidation(e,`onEndKey`),[`stop`,`prevent`]),[`end`]))]},[(0,s.createElementVNode)(`div`,l,[(0,s.renderSlot)(e.$slots,`input`,{inputProps:a.inputProps})]),n.showList?((0,s.openBlock)(),(0,s.createElementBlock)(`div`,{key:0,ref:`listWrapper`,"data-qa":`dt-combobox-list-wrapper`,onMouseleave:t[0]||(t[0]=(...e)=>a.clearHighlightIndex&&a.clearHighlightIndex(...e)),onFocusout:t[1]||(t[1]=(...e)=>a.clearHighlightIndex&&a.clearHighlightIndex(...e)),onMousemoveCapture:t[2]||(t[2]=(...e)=>a.onMouseHighlight&&a.onMouseHighlight(...e))},[n.loading&&!n.listRenderedOutside?((0,s.openBlock)(),(0,s.createBlock)(o,(0,s.normalizeProps)((0,s.mergeProps)({key:0},a.listProps)),null,16)):n.emptyList&&(n.emptyStateMessage||i.hasSlotContent(e.$slots.emptyListItem))&&!n.listRenderedOutside?((0,s.openBlock)(),(0,s.createBlock)(c,(0,s.mergeProps)({key:1},a.listProps,{message:n.emptyStateMessage,"item-class":n.emptyStateClass}),{default:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`emptyListItem`)]),_:3},16,[`message`,`item-class`])):(0,s.renderSlot)(e.$slots,`list`,{key:2,listProps:a.listProps,opened:a.onOpen,clearHighlightIndex:a.clearHighlightIndex})],544)):(0,s.createCommentVNode)(``,!0)],32)}var d=n.t(c,[[`render`,u]]);Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return d}});
+//# sourceMappingURL=combobox-Da7wBh3G.cjs.map

package/dist/combobox-Da7wBh3G.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"combobox-Da7wBh3G.cjs","names":[],"sources":["../components/combobox/combobox.vue"],"sourcesContent":["\n<template>\n <div\n @keydown.esc.stop=\"onKeyValidation($event, 'onEscapeKey')\"\n @keydown.enter.exact=\"onKeyValidation($event, 'onEnterKey')\"\n @keydown.up.stop.prevent=\"onKeyValidation($event, 'onUpKey')\"\n @keydown.down.stop.prevent=\"onKeyValidation($event, 'onDownKey')\"\n @keydown.home.stop.prevent=\"onKeyValidation($event, 'onHomeKey')\"\n @keydown.end.stop.prevent=\"onKeyValidation($event, 'onEndKey')\"\n >\n <div data-qa=\"dt-combobox-input-wrapper\">\n \n <slot\n name=\"input\"\n :input-props=\"inputProps\"\n />\n </div>\n\n <div\n v-if=\"showList\"\n ref=\"listWrapper\"\n data-qa=\"dt-combobox-list-wrapper\"\n @mouseleave=\"clearHighlightIndex\"\n @focusout=\"clearHighlightIndex\"\n @mousemove.capture=\"onMouseHighlight\"\n >\n <combobox-loading-list\n v-if=\"loading && !listRenderedOutside\"\n v-bind=\"listProps\"\n />\n <combobox-empty-list\n v-else-if=\"emptyList && (emptyStateMessage || hasSlotContent($slots.emptyListItem)) && !listRenderedOutside\"\n v-bind=\"listProps\"\n :message=\"emptyStateMessage\"\n :item-class=\"emptyStateClass\"\n >\n <slot name=\"emptyListItem\" />\n </combobox-empty-list>\n \n <slot\n v-else\n name=\"list\"\n :list-props=\"listProps\"\n :opened=\"onOpen\"\n :clear-highlight-index=\"clearHighlightIndex\"\n />\n </div>\n </div>\n</template>\n\n<script>\nimport ComboboxLoadingList from './combobox_loading-list.vue';\nimport ComboboxEmptyList from './combobox_empty-list.vue';\nimport { DtKeyboardListNavigationMixin } from '@/common/mixins';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { COMBOBOX_LABEL_SIZES } from '@/components/combobox';\nimport { COMPONENT_SIZES } from '@/common/constants';\n\n/**\n * A combobox is a semantic component that displays an input element combined with a listbox,\n * which enables the user to select items from the list.\n * @see https://dialtone.dialpad.com/components/combobox.html\n */\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtCombobox',\n\n components: {\n ComboboxLoadingList,\n ComboboxEmptyList,\n },\n\n mixins: [\n DtKeyboardListNavigationMixin({\n indexKey: 'highlightIndex',\n idKey: 'highlightId',\n listElementKey: 'getListElement',\n afterHighlightMethod: 'afterHighlight',\n beginningOfListMethod: 'beginningOfListMethod',\n endOfListMethod: 'endOfListMethod',\n activeItemKey: 'activeItemEl',\n }),\n ],\n\n props: {\n /**\n * String to use for the input label.\n */\n label: {\n type: String,\n required: true,\n },\n\n /**\n * Determines visibility of input label.\n * @values true, false\n */\n showLabel: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Size of the input.\n * @values 100, 200, 300, 400, 500\n */\n size: {\n type: [String, Number],\n default: null,\n validator: (t) => t === null\n || Object.values(COMBOBOX_LABEL_SIZES).includes(t)\n || Object.keys(COMPONENT_SIZES).includes(String(t)),\n },\n\n /**\n * Description for the input\n */\n description: {\n type: String,\n default: '',\n },\n\n /**\n * Sets an ID on the list element of the component. Used by several aria attributes\n * as well as when deriving the IDs for each item.\n */\n listId: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /**\n * A method that will be called when the selection goes past the beginning of the list.\n */\n onBeginningOfList: {\n type: Function,\n default: null,\n },\n\n /**\n * A method that will be called when the selection goes past the end of the list.\n */\n onEndOfList: {\n type: Function,\n default: null,\n },\n\n /**\n * Determines when to show the list element and also controls the aria-expanded attribute.\n * @values true, false\n */\n showList: {\n type: Boolean,\n default: false,\n },\n\n /**\n * If the list is rendered outside the component, like when using popover as the list wrapper.\n * @values true, false\n */\n listRenderedOutside: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Determines when to show the skeletons and also controls aria-busy attribute.\n * @values true, false\n */\n loading: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.\n * @values true, false\n */\n emptyList: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Message to show when the list is empty\n */\n emptyStateMessage: {\n type: String,\n default: '',\n },\n\n /**\n * Additional class name for the empty list element.\n * Can accept all of: String, Object, and Array, i.e. has the\n * same api as Vue's built-in handling of the class attribute.\n */\n emptyStateClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * Programmatically click on the active list item element when a selection\n * comes from keyboard navigation, i.e. pressing the \"Enter\" key.\n * @values true, false\n */\n clickOnSelect: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Event fired when item selected\n *\n * @event select\n * @type {Number}\n */\n 'select',\n\n /**\n * Event fired when pressing escape\n *\n * @event escape\n */\n 'escape',\n\n /**\n * Event fired when the highlight changes\n *\n * @event highlight\n * @type {Number}\n */\n 'highlight',\n\n /**\n * Event fired when list is shown or hidden\n *\n * @event opened\n * @type {Boolean}\n */\n 'opened',\n ],\n\n data () {\n return {\n // If the list is rendered at the root, rather than as a child\n // of this component, this is the ref to that dom element. Set\n // by the onOpen method.\n outsideRenderedListRef: null,\n hasSlotContent,\n };\n },\n\n computed: {\n inputProps () {\n return {\n label: this.label,\n showLabel: this.showLabel,\n size: this.size,\n description: this.description,\n role: 'combobox',\n 'aria-label': this.label,\n 'aria-expanded': this.showList.toString(),\n 'aria-owns': this.listId,\n 'aria-haspopup': 'listbox',\n 'aria-activedescendant': this.activeItemId,\n 'aria-controls': this.listId,\n };\n },\n\n listProps () {\n return {\n role: 'listbox',\n id: this.listId,\n // The list has to be positioned relatively so that the auto-scroll can\n // calculate the correct offset for the list items.\n class: 'd-ps-relative',\n 'aria-label': this.label,\n };\n },\n\n beginningOfListMethod () {\n return this.onBeginningOfList || this.jumpToEnd;\n },\n\n endOfListMethod () {\n return this.onEndOfList || this.jumpToBeginning;\n },\n\n activeItemId () {\n if (!this.showList || this.highlightIndex < 0 || this.loading) {\n return;\n }\n return this.highlightId;\n },\n\n activeItemEl () {\n if (!this.highlightId) return '';\n return this.getListElement().querySelector('#' + this.highlightId);\n },\n },\n\n watch: {\n showList (showList) {\n // When the list's visibility changes reset the highlight index.\n\n if (!this.listRenderedOutside) {\n this.setInitialHighlightIndex();\n this.$emit('opened', showList);\n }\n\n if (!showList && this.outsideRenderedListRef) {\n this.outsideRenderedListRef.removeEventListener('mousemove', this.onMouseHighlight);\n this.outsideRenderedListRef = null;\n }\n },\n\n loading () {\n this.$nextTick(() => {\n this.setInitialHighlightIndex();\n });\n },\n\n $props: {\n deep: true,\n immediate: true,\n handler () {\n this.validateEmptyListProps();\n },\n },\n },\n\n created () {\n this.validateEmptyListProps();\n },\n\n methods: {\n onMouseHighlight (e) {\n if (this.loading) return;\n\n const liElement = e.target.closest('li');\n\n if (liElement && this.highlightId !== liElement.id) {\n this.setHighlightId(liElement.id);\n }\n },\n\n getListElement () {\n return this.outsideRenderedListRef ?? this.$refs.listWrapper?.querySelector(`#${this.listId}`);\n },\n\n clearHighlightIndex () {\n if (this.showList) {\n this.setHighlightIndex(-1);\n }\n },\n\n afterHighlight () {\n if (this.loading) return;\n this.$emit('highlight', this.highlightIndex);\n },\n\n onEnterKey () {\n if (this.loading || this.emptyList) return;\n\n if (this.highlightIndex >= 0) {\n this.$emit('select', this.highlightIndex);\n\n if (this.clickOnSelect) {\n this.activeItemEl?.click();\n }\n }\n },\n\n onEscapeKey () {\n this.$emit('escape');\n },\n\n onOpen (open, contentRef) {\n this.outsideRenderedListRef = contentRef;\n this.outsideRenderedListRef?.addEventListener('mousemove', this.onMouseHighlight);\n this.$emit('opened', open);\n\n if (open) {\n this.setInitialHighlightIndex();\n }\n },\n\n onKeyValidation (e, eventHandler) {\n if (!this.showList || !this.getListElement()) return;\n\n this[eventHandler](e);\n },\n\n setInitialHighlightIndex () {\n if (!this.showList) return;\n this.$nextTick(() => {\n // When the list's is shown, reset the highlight index.\n // If the list is loading, set to -1\n this.setHighlightIndex(this.loading ? -1 : 0);\n });\n },\n\n validateEmptyListProps () {\n if (this.$slots.emptyListItem) { return; }\n\n if (this.emptyList && !this.emptyStateMessage) {\n console.error(`Invalid props: you must pass both props emptyList and emptyStateMessage to show the\n empty message.`);\n }\n },\n },\n};\n</script>\n"],"mappings":"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"}

package/dist/common/composables/useIndicatorAnimation.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../../chunk-Bmb41Sf3.cjs`);let e=require(`vue`);function t(t,n,r){let i={indicator:null,hideNative:null},a=200,o=`ease`,s=!1;(0,e.onMounted)(()=>{let i=typeof t==`function`?t():(0,e.unref)(t),c=i?.$el\|\|i;if(!c)return;let l=getComputedStyle(c);a=parseInt(l.getPropertyValue(n),10)\|\|200,o=l.getPropertyValue(r).trim()\|\|`ease`;let u=typeof window.matchMedia==`function`&&window.matchMedia(`(prefers-reduced-motion: reduce)`).matches;s=typeof c.animate==`function`&&!u}),(0,e.onBeforeUnmount)(()=>{u()});function c(n){if(!s)return null;let r=typeof t==`function`?t():(0,e.unref)(t),i=(r?.$el\|\|r)?.querySelector(n);if(!i)return null;let a=getComputedStyle(i);return{rect:i.getBoundingClientRect(),style:{borderColor:a.borderColor,borderWidth:a.borderWidth,backgroundColor:a.backgroundColor},el:i}}function l({oldRect:e,newEl:t,orientation:n,hideProps:r,indicatorExtra:c={},pseudoElement:l}){if(!s)return;u();let d=t.getBoundingClientRect(),f=n===`vertical`,p=f?d.width:d.height;if(Math.abs(f?e.left-d.left:e.top-d.top)>p/2)return;let m=f?e.top+e.height/2-(d.top+d.height/2):e.left+e.width/2-(d.left+d.width/2);if(m===0)return;let h=f?`0 ${m}px`:`${m}px 0`,g=f?`1 ${e.height/d.height}`:`${e.width/d.width} 1`,_={duration:a,easing:o};i.hideNative=t.animate([r,r],{..._,fill:`forwards`}),i.indicator=t.animate([{translate:h,scale:g,...c},{translate:`0 0`,scale:`1 1`,...c}],{..._,pseudoElement:l}),i.indicator.onfinish=()=>{i.hideNative?.cancel()}}function u(){i.indicator&&(i.indicator.onfinish=null,i.indicator.cancel()),i.hideNative&&(i.hideNative.onfinish=null,i.hideNative.cancel())}function d(){return s}return{animate:l,cancel:u,canAnimate:d,snapshot:c}}exports.useIndicatorAnimation=t;
2	+ //# sourceMappingURL=useIndicatorAnimation.cjs.map

package/dist/common/composables/useIndicatorAnimation.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useIndicatorAnimation.cjs","names":[],"sources":["../../../common/composables/useIndicatorAnimation.js"],"sourcesContent":["import { onMounted, onBeforeUnmount, unref } from 'vue';\n\n/**\n * Composable for \"traveling indicator\" animations.\n * Uses FLIP technique + Web Animations API to slide a selection indicator\n * (pseudo-element) from the old selected element to the new one.\n *\n * @param {import('vue').Ref|Function} containerRef - template ref or getter for the container element\n * @param {string} durationVar - CSS variable name for duration (e.g. '--tab-indicator-duration')\n * @param {string} easingVar - CSS variable name for easing (e.g. '--tab-indicator-easing')\n */\nexport function useIndicatorAnimation (containerRef, durationVar, easingVar) {\n const state = { indicator: null, hideNative: null };\n let duration = 200;\n let easing = 'ease';\n let supported = false;\n\n onMounted(() => {\n const el = typeof containerRef === 'function' ? containerRef() : unref(containerRef);\n const resolvedEl = el?.$el || el;\n if (!resolvedEl) return;\n\n // Cache config from CSS custom properties\n const style = getComputedStyle(resolvedEl);\n duration = parseInt(style.getPropertyValue(durationVar), 10) || 200;\n easing = style.getPropertyValue(easingVar).trim() || 'ease';\n\n // Feature detection: WAAPI + prefers-reduced-motion\n const prefersReducedMotion = typeof window.matchMedia === 'function' &&\n window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n supported = typeof resolvedEl.animate === 'function' && !prefersReducedMotion;\n });\n\n onBeforeUnmount(() => { cancel(); });\n\n /**\n * Capture a snapshot of an element's position and computed style.\n * @param {string} selector - CSS selector to find the element within the container\n * @returns {{ rect: DOMRect, style: CSSStyleDeclaration, el: HTMLElement }|null}\n */\n function snapshot (selector) {\n if (!supported) return null;\n const container = typeof containerRef === 'function' ? containerRef() : unref(containerRef);\n const containerEl = container?.$el || container;\n const el = containerEl?.querySelector(selector);\n if (!el) return null;\n const cs = getComputedStyle(el);\n return {\n rect: el.getBoundingClientRect(),\n style: { borderColor: cs.borderColor, borderWidth: cs.borderWidth, backgroundColor: cs.backgroundColor },\n el,\n };\n }\n\n /**\n * Animate an indicator from oldRect to newEl's current position.\n * @param {object} options\n * @param {DOMRect} options.oldRect - bounding rect of the previously selected element\n * @param {HTMLElement} options.newEl - the newly selected element\n * @param {string} options.orientation - 'horizontal' or 'vertical'\n * @param {object} options.hideProps - properties to suppress on newEl during animation\n * @param {object} [options.indicatorExtra] - additional CSS properties for the indicator pseudo\n * @param {string} options.pseudoElement - '::before' or '::after'\n */\n function animate ({ oldRect, newEl, orientation, hideProps, indicatorExtra = {}, pseudoElement }) {\n if (!supported) return;\n cancel();\n\n const newRect = newEl.getBoundingClientRect();\n const isVertical = orientation === 'vertical';\n\n // Skip if elements are on different rows/columns (e.g. wrapped tabs).\n // Use half the element's cross-axis size as threshold — items on the same\n // row/column may differ slightly due to sub-pixel rounding or varying widths.\n const crossAxisSize = isVertical ? newRect.width : newRect.height;\n const crossAxisDelta = isVertical\n ? Math.abs(oldRect.left - newRect.left)\n : Math.abs(oldRect.top - newRect.top);\n if (crossAxisDelta > crossAxisSize / 2) return;\n\n // Center-to-center delta so scale from center aligns both edges\n const delta = isVertical\n ? (oldRect.top + oldRect.height / 2) - (newRect.top + newRect.height / 2)\n : (oldRect.left + oldRect.width / 2) - (newRect.left + newRect.width / 2);\n if (delta === 0) return;\n\n const from = isVertical ? `0 ${delta}px` : `${delta}px 0`;\n const scale = isVertical\n ? `1 ${oldRect.height / newRect.height}`\n : `${oldRect.width / newRect.width} 1`;\n\n const opts = { duration, easing };\n state.hideNative = newEl.animate(\n [hideProps, hideProps], { ...opts, fill: 'forwards' },\n );\n state.indicator = newEl.animate(\n [{ translate: from, scale, ...indicatorExtra },\n { translate: '0 0', scale: '1 1', ...indicatorExtra }],\n { ...opts, pseudoElement },\n );\n state.indicator.onfinish = () => { state.hideNative?.cancel(); };\n }\n\n function cancel () {\n if (state.indicator) {\n state.indicator.onfinish = null;\n state.indicator.cancel();\n }\n if (state.hideNative) {\n state.hideNative.onfinish = null;\n state.hideNative.cancel();\n }\n }\n\n function canAnimate () {\n return supported;\n }\n\n return { animate, cancel, canAnimate, snapshot };\n}\n"],"mappings":"4HAWA,SAAgB,EAAuB,EAAc,EAAa,EAAW,CAC3E,IAAM,EAAQ,CAAE,UAAW,KAAM,WAAY,KAAM,CAC/C,EAAW,IACX,EAAS,OACT,EAAY,IAEhB,EAAA,EAAA,eAAgB,CACd,IAAM,EAAK,OAAO,GAAiB,WAAa,GAAc,EAAA,EAAA,EAAA,OAAS,EAAa,CAC9E,EAAa,GAAI,KAAO,EAC9B,GAAI,CAAC,EAAY,OAGjB,IAAM,EAAQ,iBAAiB,EAAW,CAC1C,EAAW,SAAS,EAAM,iBAAiB,EAAY,CAAE,GAAG,EAAI,IAChE,EAAS,EAAM,iBAAiB,EAAU,CAAC,MAAM,EAAI,OAGrD,IAAM,EAAuB,OAAO,OAAO,YAAe,YACxD,OAAO,WAAW,mCAAmC,CAAC,QACxD,EAAY,OAAO,EAAW,SAAY,YAAc,CAAC,GACzD,EAEF,EAAA,EAAA,qBAAsB,CAAE,GAAQ,EAAI,CAOpC,SAAS,EAAU,EAAU,CAC3B,GAAI,CAAC,EAAW,OAAO,KACvB,IAAM,EAAY,OAAO,GAAiB,WAAa,GAAc,EAAA,EAAA,EAAA,OAAS,EAAa,CAErF,GADc,GAAW,KAAO,IACd,cAAc,EAAS,CAC/C,GAAI,CAAC,EAAI,OAAO,KAChB,IAAM,EAAK,iBAAiB,EAAG,CAC/B,MAAO,CACL,KAAM,EAAG,uBAAuB,CAChC,MAAO,CAAE,YAAa,EAAG,YAAa,YAAa,EAAG,YAAa,gBAAiB,EAAG,gBAAiB,CACxG,KACD,CAaH,SAAS,EAAS,CAAE,UAAS,QAAO,cAAa,YAAW,iBAAiB,EAAE,CAAE,iBAAiB,CAChG,GAAI,CAAC,EAAW,OAChB,GAAQ,CAER,IAAM,EAAU,EAAM,uBAAuB,CACvC,EAAa,IAAgB,WAK7B,EAAgB,EAAa,EAAQ,MAAQ,EAAQ,OAI3D,GAFI,KAAK,IADc,EACV,EAAQ,KAAO,EAAQ,KACvB,EAAQ,IAAM,EAAQ,IAAI,CAClB,EAAgB,EAAG,OAGxC,IAAM,EAAQ,EACT,EAAQ,IAAM,EAAQ,OAAS,GAAM,EAAQ,IAAM,EAAQ,OAAS,GACpE,EAAQ,KAAO,EAAQ,MAAQ,GAAM,EAAQ,KAAO,EAAQ,MAAQ,GACzE,GAAI,IAAU,EAAG,OAEjB,IAAM,EAAO,EAAa,KAAK,EAAM,IAAM,GAAG,EAAM,MAC9C,EAAQ,EACV,KAAK,EAAQ,OAAS,EAAQ,SAC9B,GAAG,EAAQ,MAAQ,EAAQ,MAAM,IAE/B,EAAO,CAAE,WAAU,SAAQ,CACjC,EAAM,WAAa,EAAM,QACvB,CAAC,EAAW,EAAU,CAAE,CAAE,GAAG,EAAM,KAAM,WAAY,CACtD,CACD,EAAM,UAAY,EAAM,QACtB,CAAC,CAAE,UAAW,EAAM,QAAO,GAAG,EAAgB,CAC5C,CAAE,UAAW,MAAO,MAAO,MAAO,GAAG,EAAgB,CAAC,CACxD,CAAE,GAAG,EAAM,gBAAe,CAC3B,CACD,EAAM,UAAU,aAAiB,CAAE,EAAM,YAAY,QAAQ,EAG/D,SAAS,GAAU,CACb,EAAM,YACR,EAAM,UAAU,SAAW,KAC3B,EAAM,UAAU,QAAQ,EAEtB,EAAM,aACR,EAAM,WAAW,SAAW,KAC5B,EAAM,WAAW,QAAQ,EAI7B,SAAS,GAAc,CACrB,OAAO,EAGT,MAAO,CAAE,UAAS,SAAQ,aAAY,WAAU"}

package/dist/common/composables/useIndicatorAnimation.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+export function useIndicatorAnimation(containerRef: import('vue').Ref | Function, durationVar: string, easingVar: string): {
+    animate: ({ oldRect, newEl, orientation, hideProps, indicatorExtra, pseudoElement }: {
+        oldRect: DOMRect;
+        newEl: HTMLElement;
+        orientation: string;
+        hideProps: object;
+        indicatorExtra?: object | undefined;
+        pseudoElement: string;
+    }) => void;
+    cancel: () => void;
+    canAnimate: () => boolean;
+    snapshot: (selector: string) => {
+        rect: DOMRect;
+        style: CSSStyleDeclaration;
+        el: HTMLElement;
+    } | null;
+};
+//# sourceMappingURL=useIndicatorAnimation.d.ts.map

package/dist/common/composables/useIndicatorAnimation.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useIndicatorAnimation.d.ts","sourceRoot":"","sources":["../../../common/composables/useIndicatorAnimation.js"],"names":[],"mappings":"AAWA,oDAJW,OAAO,KAAK,EAAE,GAAG,WAAS,eAC1B,MAAM,aACN,MAAM;yFAgDZ;QAAyB,OAAO,EAAxB,OAAO;QACc,KAAK,EAA1B,WAAW;QACK,WAAW,EAA3B,MAAM;QACU,SAAS,EAAzB,MAAM;QACW,cAAc;QACf,aAAa,EAA7B,MAAM;KAChB;;;yBA1BU,MAAM,KACJ;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,mBAAmB,CAAC;QAAC,EAAE,EAAE,WAAW,CAAA;KAAE,GAAC,IAAI;EAiFjF"}

package/dist/common/composables/useIndicatorAnimation.js ADDED Viewed

@@ -0,0 +1,78 @@
+import { onBeforeUnmount as e, onMounted as t, unref as n } from "vue";
+//#region common/composables/useIndicatorAnimation.js
+function r(r, i, a) {
+	let o = {
+		indicator: null,
+		hideNative: null
+	}, s = 200, c = "ease", l = !1;
+	t(() => {
+		let e = typeof r == "function" ? r() : n(r), t = e?.$el || e;
+		if (!t) return;
+		let o = getComputedStyle(t);
+		s = parseInt(o.getPropertyValue(i), 10) || 200, c = o.getPropertyValue(a).trim() || "ease";
+		let u = typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		l = typeof t.animate == "function" && !u;
+	}), e(() => {
+		f();
+	});
+	function u(e) {
+		if (!l) return null;
+		let t = typeof r == "function" ? r() : n(r), i = (t?.$el || t)?.querySelector(e);
+		if (!i) return null;
+		let a = getComputedStyle(i);
+		return {
+			rect: i.getBoundingClientRect(),
+			style: {
+				borderColor: a.borderColor,
+				borderWidth: a.borderWidth,
+				backgroundColor: a.backgroundColor
+			},
+			el: i
+		};
+	}
+	function d({ oldRect: e, newEl: t, orientation: n, hideProps: r, indicatorExtra: i = {}, pseudoElement: a }) {
+		if (!l) return;
+		f();
+		let u = t.getBoundingClientRect(), d = n === "vertical", p = d ? u.width : u.height;
+		if (Math.abs(d ? e.left - u.left : e.top - u.top) > p / 2) return;
+		let m = d ? e.top + e.height / 2 - (u.top + u.height / 2) : e.left + e.width / 2 - (u.left + u.width / 2);
+		if (m === 0) return;
+		let h = d ? `0 ${m}px` : `${m}px 0`, g = d ? `1 ${e.height / u.height}` : `${e.width / u.width} 1`, _ = {
+			duration: s,
+			easing: c
+		};
+		o.hideNative = t.animate([r, r], {
+			..._,
+			fill: "forwards"
+		}), o.indicator = t.animate([{
+			translate: h,
+			scale: g,
+			...i
+		}, {
+			translate: "0 0",
+			scale: "1 1",
+			...i
+		}], {
+			..._,
+			pseudoElement: a
+		}), o.indicator.onfinish = () => {
+			o.hideNative?.cancel();
+		};
+	}
+	function f() {
+		o.indicator && (o.indicator.onfinish = null, o.indicator.cancel()), o.hideNative && (o.hideNative.onfinish = null, o.hideNative.cancel());
+	}
+	function p() {
+		return l;
+	}
+	return {
+		animate: d,
+		cancel: f,
+		canAnimate: p,
+		snapshot: u
+	};
+}
+//#endregion
+export { r as useIndicatorAnimation };
+//# sourceMappingURL=useIndicatorAnimation.js.map

package/dist/common/composables/useIndicatorAnimation.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useIndicatorAnimation.js","names":[],"sources":["../../../common/composables/useIndicatorAnimation.js"],"sourcesContent":["import { onMounted, onBeforeUnmount, unref } from 'vue';\n\n/**\n * Composable for \"traveling indicator\" animations.\n * Uses FLIP technique + Web Animations API to slide a selection indicator\n * (pseudo-element) from the old selected element to the new one.\n *\n * @param {import('vue').Ref|Function} containerRef - template ref or getter for the container element\n * @param {string} durationVar - CSS variable name for duration (e.g. '--tab-indicator-duration')\n * @param {string} easingVar - CSS variable name for easing (e.g. '--tab-indicator-easing')\n */\nexport function useIndicatorAnimation (containerRef, durationVar, easingVar) {\n const state = { indicator: null, hideNative: null };\n let duration = 200;\n let easing = 'ease';\n let supported = false;\n\n onMounted(() => {\n const el = typeof containerRef === 'function' ? containerRef() : unref(containerRef);\n const resolvedEl = el?.$el || el;\n if (!resolvedEl) return;\n\n // Cache config from CSS custom properties\n const style = getComputedStyle(resolvedEl);\n duration = parseInt(style.getPropertyValue(durationVar), 10) || 200;\n easing = style.getPropertyValue(easingVar).trim() || 'ease';\n\n // Feature detection: WAAPI + prefers-reduced-motion\n const prefersReducedMotion = typeof window.matchMedia === 'function' &&\n window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n supported = typeof resolvedEl.animate === 'function' && !prefersReducedMotion;\n });\n\n onBeforeUnmount(() => { cancel(); });\n\n /**\n * Capture a snapshot of an element's position and computed style.\n * @param {string} selector - CSS selector to find the element within the container\n * @returns {{ rect: DOMRect, style: CSSStyleDeclaration, el: HTMLElement }|null}\n */\n function snapshot (selector) {\n if (!supported) return null;\n const container = typeof containerRef === 'function' ? containerRef() : unref(containerRef);\n const containerEl = container?.$el || container;\n const el = containerEl?.querySelector(selector);\n if (!el) return null;\n const cs = getComputedStyle(el);\n return {\n rect: el.getBoundingClientRect(),\n style: { borderColor: cs.borderColor, borderWidth: cs.borderWidth, backgroundColor: cs.backgroundColor },\n el,\n };\n }\n\n /**\n * Animate an indicator from oldRect to newEl's current position.\n * @param {object} options\n * @param {DOMRect} options.oldRect - bounding rect of the previously selected element\n * @param {HTMLElement} options.newEl - the newly selected element\n * @param {string} options.orientation - 'horizontal' or 'vertical'\n * @param {object} options.hideProps - properties to suppress on newEl during animation\n * @param {object} [options.indicatorExtra] - additional CSS properties for the indicator pseudo\n * @param {string} options.pseudoElement - '::before' or '::after'\n */\n function animate ({ oldRect, newEl, orientation, hideProps, indicatorExtra = {}, pseudoElement }) {\n if (!supported) return;\n cancel();\n\n const newRect = newEl.getBoundingClientRect();\n const isVertical = orientation === 'vertical';\n\n // Skip if elements are on different rows/columns (e.g. wrapped tabs).\n // Use half the element's cross-axis size as threshold — items on the same\n // row/column may differ slightly due to sub-pixel rounding or varying widths.\n const crossAxisSize = isVertical ? newRect.width : newRect.height;\n const crossAxisDelta = isVertical\n ? Math.abs(oldRect.left - newRect.left)\n : Math.abs(oldRect.top - newRect.top);\n if (crossAxisDelta > crossAxisSize / 2) return;\n\n // Center-to-center delta so scale from center aligns both edges\n const delta = isVertical\n ? (oldRect.top + oldRect.height / 2) - (newRect.top + newRect.height / 2)\n : (oldRect.left + oldRect.width / 2) - (newRect.left + newRect.width / 2);\n if (delta === 0) return;\n\n const from = isVertical ? `0 ${delta}px` : `${delta}px 0`;\n const scale = isVertical\n ? `1 ${oldRect.height / newRect.height}`\n : `${oldRect.width / newRect.width} 1`;\n\n const opts = { duration, easing };\n state.hideNative = newEl.animate(\n [hideProps, hideProps], { ...opts, fill: 'forwards' },\n );\n state.indicator = newEl.animate(\n [{ translate: from, scale, ...indicatorExtra },\n { translate: '0 0', scale: '1 1', ...indicatorExtra }],\n { ...opts, pseudoElement },\n );\n state.indicator.onfinish = () => { state.hideNative?.cancel(); };\n }\n\n function cancel () {\n if (state.indicator) {\n state.indicator.onfinish = null;\n state.indicator.cancel();\n }\n if (state.hideNative) {\n state.hideNative.onfinish = null;\n state.hideNative.cancel();\n }\n }\n\n function canAnimate () {\n return supported;\n }\n\n return { animate, cancel, canAnimate, snapshot };\n}\n"],"mappings":";;AAWA,SAAgB,EAAuB,GAAc,GAAa,GAAW;CAC3E,IAAM,IAAQ;EAAE,WAAW;EAAM,YAAY;EAAM,EAC/C,IAAW,KACX,IAAS,QACT,IAAY;AAkBhB,CAhBA,QAAgB;EACd,IAAM,IAAK,OAAO,KAAiB,aAAa,GAAc,GAAG,EAAM,EAAa,EAC9E,IAAa,GAAI,OAAO;AAC9B,MAAI,CAAC,EAAY;EAGjB,IAAM,IAAQ,iBAAiB,EAAW;AAE1C,EADA,IAAW,SAAS,EAAM,iBAAiB,EAAY,EAAE,GAAG,IAAI,KAChE,IAAS,EAAM,iBAAiB,EAAU,CAAC,MAAM,IAAI;EAGrD,IAAM,IAAuB,OAAO,OAAO,cAAe,cACxD,OAAO,WAAW,mCAAmC,CAAC;AACxD,MAAY,OAAO,EAAW,WAAY,cAAc,CAAC;GACzD,EAEF,QAAsB;AAAE,KAAQ;GAAI;CAOpC,SAAS,EAAU,GAAU;AAC3B,MAAI,CAAC,EAAW,QAAO;EACvB,IAAM,IAAY,OAAO,KAAiB,aAAa,GAAc,GAAG,EAAM,EAAa,EAErF,KADc,GAAW,OAAO,IACd,cAAc,EAAS;AAC/C,MAAI,CAAC,EAAI,QAAO;EAChB,IAAM,IAAK,iBAAiB,EAAG;AAC/B,SAAO;GACL,MAAM,EAAG,uBAAuB;GAChC,OAAO;IAAE,aAAa,EAAG;IAAa,aAAa,EAAG;IAAa,iBAAiB,EAAG;IAAiB;GACxG;GACD;;CAaH,SAAS,EAAS,EAAE,YAAS,UAAO,gBAAa,cAAW,oBAAiB,EAAE,EAAE,oBAAiB;AAChG,MAAI,CAAC,EAAW;AAChB,KAAQ;EAER,IAAM,IAAU,EAAM,uBAAuB,EACvC,IAAa,MAAgB,YAK7B,IAAgB,IAAa,EAAQ,QAAQ,EAAQ;AAI3D,MAFI,KAAK,IADc,IACV,EAAQ,OAAO,EAAQ,OACvB,EAAQ,MAAM,EAAQ,IAAI,GAClB,IAAgB,EAAG;EAGxC,IAAM,IAAQ,IACT,EAAQ,MAAM,EAAQ,SAAS,KAAM,EAAQ,MAAM,EAAQ,SAAS,KACpE,EAAQ,OAAO,EAAQ,QAAQ,KAAM,EAAQ,OAAO,EAAQ,QAAQ;AACzE,MAAI,MAAU,EAAG;EAEjB,IAAM,IAAO,IAAa,KAAK,EAAM,MAAM,GAAG,EAAM,OAC9C,IAAQ,IACV,KAAK,EAAQ,SAAS,EAAQ,WAC9B,GAAG,EAAQ,QAAQ,EAAQ,MAAM,KAE/B,IAAO;GAAE;GAAU;GAAQ;AASjC,EARA,EAAM,aAAa,EAAM,QACvB,CAAC,GAAW,EAAU,EAAE;GAAE,GAAG;GAAM,MAAM;GAAY,CACtD,EACD,EAAM,YAAY,EAAM,QACtB,CAAC;GAAE,WAAW;GAAM;GAAO,GAAG;GAAgB,EAC5C;GAAE,WAAW;GAAO,OAAO;GAAO,GAAG;GAAgB,CAAC,EACxD;GAAE,GAAG;GAAM;GAAe,CAC3B,EACD,EAAM,UAAU,iBAAiB;AAAE,KAAM,YAAY,QAAQ;;;CAG/D,SAAS,IAAU;AAKjB,EAJI,EAAM,cACR,EAAM,UAAU,WAAW,MAC3B,EAAM,UAAU,QAAQ,GAEtB,EAAM,eACR,EAAM,WAAW,WAAW,MAC5B,EAAM,WAAW,QAAQ;;CAI7B,SAAS,IAAc;AACrB,SAAO;;AAGT,QAAO;EAAE;EAAS;EAAQ;EAAY;EAAU"}

package/dist/common/constants/index.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e={ERROR:`error`,WARNING:`warning`,SUCCESS:`success`},t={LARGE:`lg`,EXTRA_LARGE:`xl`},n={xs:``,sm:``,md:``,lg:`d-description--lg`,xl:`d-description--xl`},r={xs:`d-label--xs`,sm:`d-label--sm`,md:``,lg:`d-label--lg`,xl:`d-label--xl`},i={esc:`Esc`,escape:`Escape`,tab:`Tab`,enter:`Enter`,space:`Space`,spacebar:`Spacebar`,up:`Up`,arrowup:`ArrowUp`,left:`Left`,arrowleft:`ArrowLeft`,right:`Right`,arrowright:`ArrowRight`,down:`Down`,arrowdown:`ArrowDown`,home:`Home`,end:`End`},a=e.ERROR,o=`dt`,s={VALIDATION_MESSAGE_TYPES:e,DESCRIPTION_SIZE_TYPES:t,DEFAULT_VALIDATION_MESSAGE_TYPE:a,DEFAULT_PREFIX:`dt`};exports.DEFAULT_PREFIX=o,exports.DEFAULT_VALIDATION_MESSAGE_TYPE=a,exports.DESCRIPTION_SIZE_MODIFIERS=n,exports.DESCRIPTION_SIZE_TYPES=t,exports.EVENT_KEYNAMES=i,exports.LABEL_SIZE_MODIFIERS=r,exports.VALIDATION_MESSAGE_TYPES=e,exports.default=s;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`./sizes.cjs`);var t={CRITICAL:`critical`,WARNING:`warning`,POSITIVE:`positive`},n={LARGE:`lg`,EXTRA_LARGE:`xl`},r={100:`d-description--xs`,200:`d-description--sm`,300:``,400:`d-description--lg`,500:`d-description--xl`,xs:`d-description--xs`,sm:`d-description--sm`,md:``,lg:`d-description--lg`,xl:`d-description--xl`},i={100:`d-label--xs`,200:`d-label--sm`,300:``,400:`d-label--lg`,500:`d-label--xl`,xs:`d-label--xs`,sm:`d-label--sm`,md:``,lg:`d-label--lg`,xl:`d-label--xl`},a={esc:`Esc`,escape:`Escape`,tab:`Tab`,enter:`Enter`,space:`Space`,spacebar:`Spacebar`,up:`Up`,arrowup:`ArrowUp`,left:`Left`,arrowleft:`ArrowLeft`,right:`Right`,arrowright:`ArrowRight`,down:`Down`,arrowdown:`ArrowDown`,home:`Home`,end:`End`},o=t.CRITICAL,s=`dt`,c={VALIDATION_MESSAGE_TYPES:t,DESCRIPTION_SIZE_TYPES:n,DEFAULT_VALIDATION_MESSAGE_TYPE:o,DEFAULT_PREFIX:`dt`};exports.COMPONENT_SIZES=e.COMPONENT_SIZES,exports.DEFAULT_PREFIX=s,exports.DEFAULT_VALIDATION_MESSAGE_TYPE=o,exports.DESCRIPTION_SIZE_MODIFIERS=r,exports.DESCRIPTION_SIZE_TYPES=n,exports.EVENT_KEYNAMES=a,exports.LABEL_SIZE_MODIFIERS=i,exports.TEXT_HEADLINE_SIZES=e.TEXT_HEADLINE_SIZES,exports.VALIDATION_MESSAGE_TYPES=t,exports.default=c;
 //# sourceMappingURL=index.cjs.map

package/dist/common/constants/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","names":[],"sources":["../../../common/constants/index.js"],"sourcesContent":["/* TODO: Move and sort these in a constants directory\n\nExample:\n constants/\n forms.js\n defaults.js\n ...\n/\n\n// Types of messages, also dictates what is the current state of the input.\nexport const VALIDATION_MESSAGE_TYPES = {\n ~~ERROR~~: '~~error~~',\n WARNING: 'warning',\n ~~SUCCESS~~: '~~success~~',\n};\n\n// Description size variants\nexport const DESCRIPTION_SIZE_TYPES = {\n LARGE: 'lg',\n EXTRA_LARGE: 'xl',\n};\n\n// Description size variants\nexport const DESCRIPTION_SIZE_MODIFIERS = {\n xs: '',\n sm: '',\n md: '',\n lg: 'd-description--lg',\n xl: 'd-description--xl',\n};\n\n// Label size variants\nexport const LABEL_SIZE_MODIFIERS = {\n xs: 'd-label--xs',\n sm: 'd-label--sm',\n md: '',\n lg: 'd-label--lg',\n xl: 'd-label--xl',\n};\n\nexport const EVENT_KEYNAMES = {\n esc: 'Esc',\n escape: 'Escape',\n tab: 'Tab',\n enter: 'Enter',\n space: 'Space',\n spacebar: 'Spacebar',\n up: 'Up',\n arrowup: 'ArrowUp',\n left: 'Left',\n arrowleft: 'ArrowLeft',\n right: 'Right',\n arrowright: 'ArrowRight',\n down: 'Down',\n arrowdown: 'ArrowDown',\n home: 'Home',\n end: 'End',\n};\n\n/\n * Any string message or message object in the messages prop that do not specify\n * a 'type' attributes will default to 'DEFAULT_MESSAGE_TYPE'.\n */\nexport const DEFAULT_VALIDATION_MESSAGE_TYPE = VALIDATION_MESSAGE_TYPES.~~ERROR~~;\n\n// Default prefix used for ids\nexport const DEFAULT_PREFIX = 'dt';\n\nexport default {\n VALIDATION_MESSAGE_TYPES,\n DESCRIPTION_SIZE_TYPES,\n DEFAULT_VALIDATION_MESSAGE_TYPE,\n DEFAULT_PREFIX,\n};\n"],"mappings":"~~+FAUA~~,IAAa,EAA2B,CACtC,~~MAAO~~,~~QACP~~,QAAS,UACT,~~QAAS~~,~~UACV~~,CAGY,EAAyB,CACpC,MAAO,KACP,YAAa,KACd,CAGY,EAA6B,~~CACxC~~,GAAI,~~GACJ~~,GAAI,~~GACJ~~,GAAI,GACJ,GAAI,oBACJ,GAAI,oBACL,CAGY,EAAuB,~~CAClC~~,GAAI,cACJ,GAAI,cACJ,GAAI,GACJ,GAAI,cACJ,GAAI,cACL,CAEY,EAAiB,CAC5B,IAAK,MACL,OAAQ,SACR,IAAK,MACL,MAAO,QACP,MAAO,QACP,SAAU,WACV,GAAI,KACJ,QAAS,UACT,KAAM,OACN,UAAW,YACX,MAAO,QACP,WAAY,aACZ,KAAM,OACN,UAAW,YACX,KAAM,OACN,IAAK,MACN,CAMY,EAAkC,EAAyB,~~MAG3D~~,EAAiB,~~KAE9B~~,EAAe,CACb,2BACA,yBACA,kCACA,eAAA,KACD"}
1	+ {"version":3,"file":"index.cjs","names":[],"sources":["../../../common/constants/index.js"],"sourcesContent":["/* TODO: Move and sort these in a constants directory\n\nExample:\n constants/\n forms.js\n defaults.js\n ...\n/\n\n// Types of messages, also dictates what is the current state of the input.\nexport const VALIDATION_MESSAGE_TYPES = {\n CRITICAL: 'critical',\n WARNING: 'warning',\n POSITIVE: 'positive',\n};\n\n// Description size variants\nexport const DESCRIPTION_SIZE_TYPES = {\n LARGE: 'lg',\n EXTRA_LARGE: 'xl',\n};\n\n// Description size variants\nexport const DESCRIPTION_SIZE_MODIFIERS = {\n // Numeric (preferred)\n 100: 'd-description--xs',\n 200: 'd-description--sm',\n 300: '',\n 400: 'd-description--lg',\n 500: 'd-description--xl',\n // T-shirt aliases (deprecated)\n xs: 'd-description--xs',\n sm: 'd-description--sm',\n md: '',\n lg: 'd-description--lg',\n xl: 'd-description--xl',\n};\n\n// Label size variants\nexport const LABEL_SIZE_MODIFIERS = {\n // Numeric (preferred)\n 100: 'd-label--xs',\n 200: 'd-label--sm',\n 300: '',\n 400: 'd-label--lg',\n 500: 'd-label--xl',\n // T-shirt aliases (deprecated)\n xs: 'd-label--xs',\n sm: 'd-label--sm',\n md: '',\n lg: 'd-label--lg',\n xl: 'd-label--xl',\n};\n\nexport const EVENT_KEYNAMES = {\n esc: 'Esc',\n escape: 'Escape',\n tab: 'Tab',\n enter: 'Enter',\n space: 'Space',\n spacebar: 'Spacebar',\n up: 'Up',\n arrowup: 'ArrowUp',\n left: 'Left',\n arrowleft: 'ArrowLeft',\n right: 'Right',\n arrowright: 'ArrowRight',\n down: 'Down',\n arrowdown: 'ArrowDown',\n home: 'Home',\n end: 'End',\n};\n\n/\n * Any string message or message object in the messages prop that do not specify\n * a 'type' attributes will default to 'DEFAULT_MESSAGE_TYPE'.\n */\nexport const DEFAULT_VALIDATION_MESSAGE_TYPE = VALIDATION_MESSAGE_TYPES.CRITICAL;\n\n// Default prefix used for ids\nexport const DEFAULT_PREFIX = 'dt';\n\n// Component size scale\nexport { COMPONENT_SIZES, TEXT_HEADLINE_SIZES } from './sizes.js';\n\nexport default {\n VALIDATION_MESSAGE_TYPES,\n DESCRIPTION_SIZE_TYPES,\n DEFAULT_VALIDATION_MESSAGE_TYPE,\n DEFAULT_PREFIX,\n};\n"],"mappings":"8HAUA,IAAa,EAA2B,CACtC,SAAU,WACV,QAAS,UACT,SAAU,WACX,CAGY,EAAyB,CACpC,MAAO,KACP,YAAa,KACd,CAGY,EAA6B,CAExC,IAAK,oBACL,IAAK,oBACL,IAAK,GACL,IAAK,oBACL,IAAK,oBAEL,GAAI,oBACJ,GAAI,oBACJ,GAAI,GACJ,GAAI,oBACJ,GAAI,oBACL,CAGY,EAAuB,CAElC,IAAK,cACL,IAAK,cACL,IAAK,GACL,IAAK,cACL,IAAK,cAEL,GAAI,cACJ,GAAI,cACJ,GAAI,GACJ,GAAI,cACJ,GAAI,cACL,CAEY,EAAiB,CAC5B,IAAK,MACL,OAAQ,SACR,IAAK,MACL,MAAO,QACP,MAAO,QACP,SAAU,WACV,GAAI,KACJ,QAAS,UACT,KAAM,OACN,UAAW,YACX,MAAO,QACP,WAAY,aACZ,KAAM,OACN,UAAW,YACX,KAAM,OACN,IAAK,MACN,CAMY,EAAkC,EAAyB,SAG3D,EAAiB,KAK9B,EAAe,CACb,2BACA,yBACA,kCACA,eAAA,KACD"}

package/dist/common/constants/index.d.ts CHANGED Viewed

@@ -1,31 +1,36 @@
 export namespace VALIDATION_MESSAGE_TYPES {
-    let ERROR: string;
+    let CRITICAL: string;
     let WARNING: string;
-    let SUCCESS: string;
+    let POSITIVE: string;
 }
 export namespace DESCRIPTION_SIZE_TYPES {
     let LARGE: string;
     let EXTRA_LARGE: string;
 }
-export namespace DESCRIPTION_SIZE_MODIFIERS {
-    let xs: string;
-    let sm: string;
-    let md: string;
-    let lg: string;
-    let xl: string;
-}
-export namespace LABEL_SIZE_MODIFIERS {
-    let xs_1: string;
-    export { xs_1 as xs };
-    let sm_1: string;
-    export { sm_1 as sm };
-    let md_1: string;
-    export { md_1 as md };
-    let lg_1: string;
-    export { lg_1 as lg };
-    let xl_1: string;
-    export { xl_1 as xl };
-}
+export const DESCRIPTION_SIZE_MODIFIERS: {
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+export const LABEL_SIZE_MODIFIERS: {
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
 export namespace EVENT_KEYNAMES {
     let esc: string;
     let escape: string;
@@ -53,4 +58,5 @@ declare namespace _default {
     export { DEFAULT_PREFIX };
 }
 export default _default;
+export { COMPONENT_SIZES, TEXT_HEADLINE_SIZES } from './sizes.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/common/constants/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../common/constants/index.js"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DA~~,~~qDAA8E~~;~~AAG9E~~,6BAA8B,IAAI,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../common/constants/index.js"],"names":[],"mappings":";;;;;;;;;AAuBA;;;;;;;;;;;EAaE;AAGF;;;;;;;;;;;EAaE;;;;;;;;;;;;;;;;;;;AAyBF,qDAAiF;AAGjF,6BAA8B,IAAI,CAAC"}