npm - @dialpad/dialtone - Versions diffs - 9.77.0 → 9.78.0 - Mend

@dialpad/dialtone 9.77.0 → 9.78.0

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

package/dist/vue2/components/split_button/split_button.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"split_button.vue.cjs","sources":["../../../components/split_button/split_button.vue"],"sourcesContent":["<template>\n <span\n data-qa=\"dt-split-button\"\n class=\"d-split-btn\"\n :style=\"{ width }\"\n >\n <split-button-alpha\n v-bind=\"alphaButtonProps\"\n ref=\"alphaButton\"\n @click.native=\"$emit('alpha-clicked')\"\n >\n <template #icon=\"{ size: iconSize }\">\n <!-- @slot Alpha (left) button icon slot -->\n <slot\n name=\"alphaIcon\"\n :size=\"iconSize\"\n />\n </template>\n <!-- @slot Default content slot -->\n <slot name=\"default\" />\n </split-button-alpha>\n <!-- @slot Omega (right) content slot, overrides omega button styling and functionality completely -->\n <slot name=\"omega\">\n <dt-dropdown\n v-if=\"$slots.dropdownList\"\n :placement=\"dropdownPlacement\"\n @click=\"isDropdownOpen = true\"\n @opened=\"open => isDropdownOpen = open\"\n >\n <template #anchor=\"attrs\">\n <split-button-omega\n v-bind=\"{ ...attrs, ...omegaButtonProps }\"\n :active=\"isDropdownOpen\"\n @click.native=\"$emit('omega-clicked')\"\n >\n <template #icon=\"{ size: iconSize }\">\n <!-- @slot Omega (right) button icon slot -->\n <slot\n name=\"omegaIcon\"\n :size=\"iconSize\"\n />\n </template>\n </split-button-omega>\n </template>\n <template #list=\"{ close }\">\n <!-- @slot Built-in dropdown content slot, use of dt-list-item is highly recommended here. -->\n <slot\n name=\"dropdownList\"\n :close=\"close\"\n />\n </template>\n </dt-dropdown>\n\n <split-button-omega\n v-else\n v-bind=\"omegaButtonProps\"\n @click.native=\"$emit('omega-clicked')\"\n >\n <template #icon=\"{ size: iconSize }\">\n <!-- @slot Omega (right) button icon slot -->\n <slot\n name=\"omegaIcon\"\n :size=\"iconSize\"\n />\n </template>\n </split-button-omega>\n </slot>\n </span>\n</template>\n\n<script>\nimport {\n BUTTON_IMPORTANCE_MODIFIERS,\n BUTTON_KIND_MODIFIERS,\n BUTTON_SIZE_MODIFIERS,\n ICON_POSITION_MODIFIERS,\n} from '@/components/button';\nimport SplitButtonAlpha from './split_button-alpha.vue';\nimport SplitButtonOmega from './split_button-omega.vue';\nimport { DtDropdown } from '@/components/dropdown';\n\nexport default {\n name: 'DtSplitButton',\n\n components: {\n SplitButtonOmega,\n DtDropdown,\n SplitButtonAlpha,\n },\n\n inheritAttrs: false,\n\n props: {\n /*\n Determines whether the alpha button should have active styling\n * @values true, false\n /\n alphaActive: {\n type: Boolean,\n default: false,\n },\n\n /\n Descriptive label for the alpha button\n /\n alphaAriaLabel: {\n type: String,\n default: null,\n },\n\n /\n The position of the icon slot within the alpha button.\n * @values left, right, top, bottom\n /\n alphaIconPosition: {\n type: String,\n default: 'left',\n validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n },\n\n /\n Used to customize the alpha label container\n /\n alphaLabelClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Whether the alpha button should display a loading animation or not.\n * @values true, false\n /\n alphaLoading: {\n type: Boolean,\n default: false,\n },\n\n /\n Text shown in tooltip when you hover the alpha button,\n * required if no content is passed to default slot\n /\n alphaTooltipText: {\n type: String,\n default: undefined,\n },\n\n /\n Determines whether a screenreader reads live updates of\n * the button content to the user while the button\n * is in focus.\n * @values true, false\n /\n assertiveOnFocus: {\n type: Boolean,\n default: false,\n },\n\n /\n HTML button disabled attribute\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\">\n * (Reference)\n * </a>\n * @values true, false\n /\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /\n The direction the dropdown displays relative to the anchor.\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 dropdownPlacement: {\n type: String,\n default: 'bottom-end',\n },\n\n /\n The fill and outline of the button associated with its visual importance.\n * @values clear, outlined, primary\n /\n importance: {\n type: String,\n default: 'primary',\n validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n },\n\n /\n The color of the button.\n * @values default, muted, danger, inverted\n /\n kind: {\n type: String,\n default: 'default',\n validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n },\n\n /\n Determines whether the omega button should have active styling\n * @values true, false\n /\n omegaActive: {\n type: Boolean,\n default: false,\n },\n\n /\n Descriptive label for the omega button\n /\n omegaAriaLabel: {\n type: String,\n default: null,\n },\n\n /\n Element ID, useful in case you need to reference the button\n * as an external anchor for popover\n /\n omegaId: {\n type: String,\n default: undefined,\n },\n\n /\n Text shown in tooltip when you hover the omega button,\n * required as it is an icon only button\n /\n omegaTooltipText: {\n type: String,\n default: undefined,\n },\n\n /\n The size of the button.\n * @values xs, sm, md, lg, xl\n /\n size: {\n type: String,\n default: 'md',\n validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n },\n\n /\n Button width, accepts\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n * CSS width attribute\n * </a>\n * values\n /\n width: {\n type: String,\n default: null,\n },\n },\n\n emits: [\n /\n Native alpha button click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'alpha-clicked',\n\n /\n Native omega button click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'omega-clicked',\n ],\n\n data () {\n return {\n isDropdownOpen: false,\n };\n },\n\n computed: {\n alphaButtonProps () {\n return {\n active: this.alphaActive,\n ariaLabel: this.alphaAriaLabel,\n assertiveOnFocus: this.assertiveOnFocus,\n disabled: this.disabled,\n iconPosition: this.alphaIconPosition,\n labelClass: this.alphaLabelClass,\n loading: this.alphaLoading,\n importance: this.importance,\n kind: this.kind,\n size: this.size,\n tooltipText: this.alphaTooltipText,\n class: this.$attrs.class,\n };\n },\n\n omegaButtonProps () {\n return {\n id: this.omegaId,\n active: this.omegaActive,\n ariaLabel: this.omegaAriaLabel,\n disabled: this.disabled,\n importance: this.importance,\n kind: this.kind,\n size: this.size,\n tooltipText: this.omegaTooltipText,\n class: this.$attrs.class,\n };\n },\n\n defaultSlotHasContent () {\n return this.$scopedSlots.default && this.$scopedSlots.default() && this.$scopedSlots.default()[0]?.text?.trim();\n },\n\n omegaSlotIsSet () {\n return this.$scopedSlots.omega && this.$scopedSlots.omega();\n },\n },\n\n created () {\n this.validateProps();\n },\n\n updated () {\n this.validateProps();\n },\n\n methods: {\n validateProps () {\n this.validateAlphaButtonProps();\n this.validateOmegaButtonProps();\n },\n\n validateAlphaButtonProps () {\n if (this.defaultSlotHasContent) return;\n\n // This can't be a computed prop due to reactivity issues.\n const isAlphaIconSet = this.$refs.alphaButton?.$scopedSlots.icon && this.$refs.alphaButton.$scopedSlots.icon();\n\n if (isAlphaIconSet && !this.alphaTooltipText) {\n console.warn('alpha-tooltip-text prop must be set if alpha button has an icon only');\n }\n },\n\n validateOmegaButtonProps () {\n if (this.omegaSlotIsSet) return;\n\n if (!this.omegaTooltipText) {\n console.warn('omega-tooltip-text prop is required as it is an icon-only button');\n }\n },\n },\n};\n</script>\n"],"names":["SplitButtonOmega","DtDropdown","SplitButtonAlpha","ICON_POSITION_MODIFIERS","BUTTON_IMPORTANCE_MODIFIERS","BUTTON_KIND_MODIFIERS","BUTTON_SIZE_MODIFIERS"],"mappings":"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"}
1	+ {"version":3,"file":"split_button.vue.cjs","sources":["../../../components/split_button/split_button.vue"],"sourcesContent":["<template>\n <span\n data-qa=\"dt-split-button\"\n class=\"d-split-btn\"\n :style=\"{ width }\"\n >\n <split-button-alpha\n v-bind=\"alphaButtonProps\"\n ref=\"alphaButton\"\n @click.native=\"$emit('alpha-clicked')\"\n >\n <template #icon=\"{ size: iconSize }\">\n <!-- @slot Alpha (left) button icon slot -->\n <slot\n name=\"alphaIcon\"\n :size=\"iconSize\"\n />\n </template>\n <!-- @slot Default content slot -->\n <slot name=\"default\" />\n </split-button-alpha>\n <!-- @slot Omega (right) content slot, overrides omega button styling and functionality completely -->\n <slot name=\"omega\">\n <dt-dropdown\n v-if=\"$slots.dropdownList\"\n :placement=\"dropdownPlacement\"\n @click=\"isDropdownOpen = true\"\n @opened=\"open => isDropdownOpen = open\"\n >\n <template #anchor=\"attrs\">\n <split-button-omega\n v-bind=\"{ ...attrs, ...omegaButtonProps }\"\n :active=\"isDropdownOpen\"\n @click.native=\"$emit('omega-clicked')\"\n >\n <template #icon=\"{ size: iconSize }\">\n <!-- @slot Omega (right) button icon slot -->\n <slot\n name=\"omegaIcon\"\n :size=\"iconSize\"\n />\n </template>\n </split-button-omega>\n </template>\n <template #list=\"{ close }\">\n <!-- @slot Built-in dropdown content slot, use of dt-list-item is highly recommended here. -->\n <slot\n name=\"dropdownList\"\n :close=\"close\"\n />\n </template>\n </dt-dropdown>\n\n <split-button-omega\n v-else\n v-bind=\"omegaButtonProps\"\n @click.native=\"$emit('omega-clicked')\"\n >\n <template #icon=\"{ size: iconSize }\">\n <!-- @slot Omega (right) button icon slot -->\n <slot\n name=\"omegaIcon\"\n :size=\"iconSize\"\n />\n </template>\n </split-button-omega>\n </slot>\n </span>\n</template>\n\n<script>\nimport {\n BUTTON_IMPORTANCE_MODIFIERS,\n BUTTON_KIND_MODIFIERS,\n BUTTON_SIZE_MODIFIERS,\n ICON_POSITION_MODIFIERS,\n} from '@/components/button';\nimport SplitButtonAlpha from './split_button-alpha.vue';\nimport SplitButtonOmega from './split_button-omega.vue';\nimport { DtDropdown } from '@/components/dropdown';\nimport { warnIfUnmounted } from '@/common/utils';\n\nexport default {\n name: 'DtSplitButton',\n\n components: {\n SplitButtonOmega,\n DtDropdown,\n SplitButtonAlpha,\n },\n\n inheritAttrs: false,\n\n props: {\n /*\n Determines whether the alpha button should have active styling\n * @values true, false\n /\n alphaActive: {\n type: Boolean,\n default: false,\n },\n\n /\n Descriptive label for the alpha button\n /\n alphaAriaLabel: {\n type: String,\n default: null,\n },\n\n /\n The position of the icon slot within the alpha button.\n * @values left, right, top, bottom\n /\n alphaIconPosition: {\n type: String,\n default: 'left',\n validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n },\n\n /\n Used to customize the alpha label container\n /\n alphaLabelClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Whether the alpha button should display a loading animation or not.\n * @values true, false\n /\n alphaLoading: {\n type: Boolean,\n default: false,\n },\n\n /\n Text shown in tooltip when you hover the alpha button,\n * required if no content is passed to default slot\n /\n alphaTooltipText: {\n type: String,\n default: undefined,\n },\n\n /\n Determines whether a screenreader reads live updates of\n * the button content to the user while the button\n * is in focus.\n * @values true, false\n /\n assertiveOnFocus: {\n type: Boolean,\n default: false,\n },\n\n /\n HTML button disabled attribute\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\">\n * (Reference)\n * </a>\n * @values true, false\n /\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /\n The direction the dropdown displays relative to the anchor.\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 dropdownPlacement: {\n type: String,\n default: 'bottom-end',\n },\n\n /\n The fill and outline of the button associated with its visual importance.\n * @values clear, outlined, primary\n /\n importance: {\n type: String,\n default: 'primary',\n validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n },\n\n /\n The color of the button.\n * @values default, muted, danger, inverted\n /\n kind: {\n type: String,\n default: 'default',\n validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n },\n\n /\n Determines whether the omega button should have active styling\n * @values true, false\n /\n omegaActive: {\n type: Boolean,\n default: false,\n },\n\n /\n Descriptive label for the omega button\n /\n omegaAriaLabel: {\n type: String,\n default: null,\n },\n\n /\n Element ID, useful in case you need to reference the button\n * as an external anchor for popover\n /\n omegaId: {\n type: String,\n default: undefined,\n },\n\n /\n Text shown in tooltip when you hover the omega button,\n * required as it is an icon only button\n /\n omegaTooltipText: {\n type: String,\n default: undefined,\n },\n\n /\n The size of the button.\n * @values xs, sm, md, lg, xl\n /\n size: {\n type: String,\n default: 'md',\n validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n },\n\n /\n Button width, accepts\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n * CSS width attribute\n * </a>\n * values\n /\n width: {\n type: String,\n default: null,\n },\n },\n\n emits: [\n /\n Native alpha button click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'alpha-clicked',\n\n /\n Native omega button click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'omega-clicked',\n ],\n\n data () {\n return {\n isDropdownOpen: false,\n };\n },\n\n computed: {\n alphaButtonProps () {\n return {\n active: this.alphaActive,\n ariaLabel: this.alphaAriaLabel,\n assertiveOnFocus: this.assertiveOnFocus,\n disabled: this.disabled,\n iconPosition: this.alphaIconPosition,\n labelClass: this.alphaLabelClass,\n loading: this.alphaLoading,\n importance: this.importance,\n kind: this.kind,\n size: this.size,\n tooltipText: this.alphaTooltipText,\n class: this.$attrs.class,\n };\n },\n\n omegaButtonProps () {\n return {\n id: this.omegaId,\n active: this.omegaActive,\n ariaLabel: this.omegaAriaLabel,\n disabled: this.disabled,\n importance: this.importance,\n kind: this.kind,\n size: this.size,\n tooltipText: this.omegaTooltipText,\n class: this.$attrs.class,\n };\n },\n\n defaultSlotHasContent () {\n return this.$scopedSlots.default && this.$scopedSlots.default() && this.$scopedSlots.default()[0]?.text?.trim();\n },\n\n omegaSlotIsSet () {\n return this.$scopedSlots.omega && this.$scopedSlots.omega();\n },\n },\n\n created () {\n this.validateProps();\n },\n\n updated () {\n this.validateProps();\n },\n\n mounted () {\n warnIfUnmounted(this.$el, this.$options.name);\n },\n\n methods: {\n validateProps () {\n this.validateAlphaButtonProps();\n this.validateOmegaButtonProps();\n },\n\n validateAlphaButtonProps () {\n if (this.defaultSlotHasContent) return;\n\n // This can't be a computed prop due to reactivity issues.\n const isAlphaIconSet = this.$refs.alphaButton?.$scopedSlots.icon && this.$refs.alphaButton.$scopedSlots.icon();\n\n if (isAlphaIconSet && !this.alphaTooltipText) {\n console.warn('alpha-tooltip-text prop must be set if alpha button has an icon only');\n }\n },\n\n validateOmegaButtonProps () {\n if (this.omegaSlotIsSet) return;\n\n if (!this.omegaTooltipText) {\n console.warn('omega-tooltip-text prop is required as it is an icon-only button');\n }\n },\n },\n};\n</script>\n"],"names":["SplitButtonOmega","DtDropdown","SplitButtonAlpha","ICON_POSITION_MODIFIERS","BUTTON_IMPORTANCE_MODIFIERS","BUTTON_KIND_MODIFIERS","BUTTON_SIZE_MODIFIERS","warnIfUnmounted"],"mappings":"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"}

package/dist/vue2/components/split_button/split_button.vue.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import SplitButtonAlpha from "./split_button-alpha.vue.js";
 import SplitButtonOmega from "./split_button-omega.vue.js";
+import { warnIfUnmounted } from "../../common/utils.js";
 import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
 import DtDropdown from "../dropdown/dropdown.vue.js";
 import { ICON_POSITION_MODIFIERS, BUTTON_IMPORTANCE_MODIFIERS, BUTTON_KIND_MODIFIERS, BUTTON_SIZE_MODIFIERS } from "../button/button_constants.js";
@@ -223,6 +224,9 @@ const _sfc_main = {
   updated() {
     this.validateProps();
   },
+  mounted() {
+    warnIfUnmounted(this.$el, this.$options.name);
+  },
   methods: {
     validateProps() {
       this.validateAlphaButtonProps();

package/dist/vue2/components/split_button/split_button.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"split_button.vue.js","sources":["../../../components/split_button/split_button.vue"],"sourcesContent":["<template>\n <span\n data-qa=\"dt-split-button\"\n class=\"d-split-btn\"\n :style=\"{ width }\"\n >\n <split-button-alpha\n v-bind=\"alphaButtonProps\"\n ref=\"alphaButton\"\n @click.native=\"$emit('alpha-clicked')\"\n >\n <template #icon=\"{ size: iconSize }\">\n <!-- @slot Alpha (left) button icon slot -->\n <slot\n name=\"alphaIcon\"\n :size=\"iconSize\"\n />\n </template>\n <!-- @slot Default content slot -->\n <slot name=\"default\" />\n </split-button-alpha>\n <!-- @slot Omega (right) content slot, overrides omega button styling and functionality completely -->\n <slot name=\"omega\">\n <dt-dropdown\n v-if=\"$slots.dropdownList\"\n :placement=\"dropdownPlacement\"\n @click=\"isDropdownOpen = true\"\n @opened=\"open => isDropdownOpen = open\"\n >\n <template #anchor=\"attrs\">\n <split-button-omega\n v-bind=\"{ ...attrs, ...omegaButtonProps }\"\n :active=\"isDropdownOpen\"\n @click.native=\"$emit('omega-clicked')\"\n >\n <template #icon=\"{ size: iconSize }\">\n <!-- @slot Omega (right) button icon slot -->\n <slot\n name=\"omegaIcon\"\n :size=\"iconSize\"\n />\n </template>\n </split-button-omega>\n </template>\n <template #list=\"{ close }\">\n <!-- @slot Built-in dropdown content slot, use of dt-list-item is highly recommended here. -->\n <slot\n name=\"dropdownList\"\n :close=\"close\"\n />\n </template>\n </dt-dropdown>\n\n <split-button-omega\n v-else\n v-bind=\"omegaButtonProps\"\n @click.native=\"$emit('omega-clicked')\"\n >\n <template #icon=\"{ size: iconSize }\">\n <!-- @slot Omega (right) button icon slot -->\n <slot\n name=\"omegaIcon\"\n :size=\"iconSize\"\n />\n </template>\n </split-button-omega>\n </slot>\n </span>\n</template>\n\n<script>\nimport {\n BUTTON_IMPORTANCE_MODIFIERS,\n BUTTON_KIND_MODIFIERS,\n BUTTON_SIZE_MODIFIERS,\n ICON_POSITION_MODIFIERS,\n} from '@/components/button';\nimport SplitButtonAlpha from './split_button-alpha.vue';\nimport SplitButtonOmega from './split_button-omega.vue';\nimport { DtDropdown } from '@/components/dropdown';\n\nexport default {\n name: 'DtSplitButton',\n\n components: {\n SplitButtonOmega,\n DtDropdown,\n SplitButtonAlpha,\n },\n\n inheritAttrs: false,\n\n props: {\n /*\n Determines whether the alpha button should have active styling\n * @values true, false\n /\n alphaActive: {\n type: Boolean,\n default: false,\n },\n\n /\n Descriptive label for the alpha button\n /\n alphaAriaLabel: {\n type: String,\n default: null,\n },\n\n /\n The position of the icon slot within the alpha button.\n * @values left, right, top, bottom\n /\n alphaIconPosition: {\n type: String,\n default: 'left',\n validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n },\n\n /\n Used to customize the alpha label container\n /\n alphaLabelClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Whether the alpha button should display a loading animation or not.\n * @values true, false\n /\n alphaLoading: {\n type: Boolean,\n default: false,\n },\n\n /\n Text shown in tooltip when you hover the alpha button,\n * required if no content is passed to default slot\n /\n alphaTooltipText: {\n type: String,\n default: undefined,\n },\n\n /\n Determines whether a screenreader reads live updates of\n * the button content to the user while the button\n * is in focus.\n * @values true, false\n /\n assertiveOnFocus: {\n type: Boolean,\n default: false,\n },\n\n /\n HTML button disabled attribute\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\">\n * (Reference)\n * </a>\n * @values true, false\n /\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /\n The direction the dropdown displays relative to the anchor.\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 dropdownPlacement: {\n type: String,\n default: 'bottom-end',\n },\n\n /\n The fill and outline of the button associated with its visual importance.\n * @values clear, outlined, primary\n /\n importance: {\n type: String,\n default: 'primary',\n validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n },\n\n /\n The color of the button.\n * @values default, muted, danger, inverted\n /\n kind: {\n type: String,\n default: 'default',\n validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n },\n\n /\n Determines whether the omega button should have active styling\n * @values true, false\n /\n omegaActive: {\n type: Boolean,\n default: false,\n },\n\n /\n Descriptive label for the omega button\n /\n omegaAriaLabel: {\n type: String,\n default: null,\n },\n\n /\n Element ID, useful in case you need to reference the button\n * as an external anchor for popover\n /\n omegaId: {\n type: String,\n default: undefined,\n },\n\n /\n Text shown in tooltip when you hover the omega button,\n * required as it is an icon only button\n /\n omegaTooltipText: {\n type: String,\n default: undefined,\n },\n\n /\n The size of the button.\n * @values xs, sm, md, lg, xl\n /\n size: {\n type: String,\n default: 'md',\n validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n },\n\n /\n Button width, accepts\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n * CSS width attribute\n * </a>\n * values\n /\n width: {\n type: String,\n default: null,\n },\n },\n\n emits: [\n /\n Native alpha button click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'alpha-clicked',\n\n /\n Native omega button click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'omega-clicked',\n ],\n\n data () {\n return {\n isDropdownOpen: false,\n };\n },\n\n computed: {\n alphaButtonProps () {\n return {\n active: this.alphaActive,\n ariaLabel: this.alphaAriaLabel,\n assertiveOnFocus: this.assertiveOnFocus,\n disabled: this.disabled,\n iconPosition: this.alphaIconPosition,\n labelClass: this.alphaLabelClass,\n loading: this.alphaLoading,\n importance: this.importance,\n kind: this.kind,\n size: this.size,\n tooltipText: this.alphaTooltipText,\n class: this.$attrs.class,\n };\n },\n\n omegaButtonProps () {\n return {\n id: this.omegaId,\n active: this.omegaActive,\n ariaLabel: this.omegaAriaLabel,\n disabled: this.disabled,\n importance: this.importance,\n kind: this.kind,\n size: this.size,\n tooltipText: this.omegaTooltipText,\n class: this.$attrs.class,\n };\n },\n\n defaultSlotHasContent () {\n return this.$scopedSlots.default && this.$scopedSlots.default() && this.$scopedSlots.default()[0]?.text?.trim();\n },\n\n omegaSlotIsSet () {\n return this.$scopedSlots.omega && this.$scopedSlots.omega();\n },\n },\n\n created () {\n this.validateProps();\n },\n\n updated () {\n this.validateProps();\n },\n\n methods: {\n validateProps () {\n this.validateAlphaButtonProps();\n this.validateOmegaButtonProps();\n },\n\n validateAlphaButtonProps () {\n if (this.defaultSlotHasContent) return;\n\n // This can't be a computed prop due to reactivity issues.\n const isAlphaIconSet = this.$refs.alphaButton?.$scopedSlots.icon && this.$refs.alphaButton.$scopedSlots.icon();\n\n if (isAlphaIconSet && !this.alphaTooltipText) {\n console.warn('alpha-tooltip-text prop must be set if alpha button has an icon only');\n }\n },\n\n validateOmegaButtonProps () {\n if (this.omegaSlotIsSet) return;\n\n if (!this.omegaTooltipText) {\n console.warn('omega-tooltip-text prop is required as it is an icon-only button');\n }\n },\n },\n};\n</script>\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"split_button.vue.js","sources":["../../../components/split_button/split_button.vue"],"sourcesContent":["<template>\n <span\n data-qa=\"dt-split-button\"\n class=\"d-split-btn\"\n :style=\"{ width }\"\n >\n <split-button-alpha\n v-bind=\"alphaButtonProps\"\n ref=\"alphaButton\"\n @click.native=\"$emit('alpha-clicked')\"\n >\n <template #icon=\"{ size: iconSize }\">\n <!-- @slot Alpha (left) button icon slot -->\n <slot\n name=\"alphaIcon\"\n :size=\"iconSize\"\n />\n </template>\n <!-- @slot Default content slot -->\n <slot name=\"default\" />\n </split-button-alpha>\n <!-- @slot Omega (right) content slot, overrides omega button styling and functionality completely -->\n <slot name=\"omega\">\n <dt-dropdown\n v-if=\"$slots.dropdownList\"\n :placement=\"dropdownPlacement\"\n @click=\"isDropdownOpen = true\"\n @opened=\"open => isDropdownOpen = open\"\n >\n <template #anchor=\"attrs\">\n <split-button-omega\n v-bind=\"{ ...attrs, ...omegaButtonProps }\"\n :active=\"isDropdownOpen\"\n @click.native=\"$emit('omega-clicked')\"\n >\n <template #icon=\"{ size: iconSize }\">\n <!-- @slot Omega (right) button icon slot -->\n <slot\n name=\"omegaIcon\"\n :size=\"iconSize\"\n />\n </template>\n </split-button-omega>\n </template>\n <template #list=\"{ close }\">\n <!-- @slot Built-in dropdown content slot, use of dt-list-item is highly recommended here. -->\n <slot\n name=\"dropdownList\"\n :close=\"close\"\n />\n </template>\n </dt-dropdown>\n\n <split-button-omega\n v-else\n v-bind=\"omegaButtonProps\"\n @click.native=\"$emit('omega-clicked')\"\n >\n <template #icon=\"{ size: iconSize }\">\n <!-- @slot Omega (right) button icon slot -->\n <slot\n name=\"omegaIcon\"\n :size=\"iconSize\"\n />\n </template>\n </split-button-omega>\n </slot>\n </span>\n</template>\n\n<script>\nimport {\n BUTTON_IMPORTANCE_MODIFIERS,\n BUTTON_KIND_MODIFIERS,\n BUTTON_SIZE_MODIFIERS,\n ICON_POSITION_MODIFIERS,\n} from '@/components/button';\nimport SplitButtonAlpha from './split_button-alpha.vue';\nimport SplitButtonOmega from './split_button-omega.vue';\nimport { DtDropdown } from '@/components/dropdown';\nimport { warnIfUnmounted } from '@/common/utils';\n\nexport default {\n name: 'DtSplitButton',\n\n components: {\n SplitButtonOmega,\n DtDropdown,\n SplitButtonAlpha,\n },\n\n inheritAttrs: false,\n\n props: {\n /*\n Determines whether the alpha button should have active styling\n * @values true, false\n /\n alphaActive: {\n type: Boolean,\n default: false,\n },\n\n /\n Descriptive label for the alpha button\n /\n alphaAriaLabel: {\n type: String,\n default: null,\n },\n\n /\n The position of the icon slot within the alpha button.\n * @values left, right, top, bottom\n /\n alphaIconPosition: {\n type: String,\n default: 'left',\n validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n },\n\n /\n Used to customize the alpha label container\n /\n alphaLabelClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Whether the alpha button should display a loading animation or not.\n * @values true, false\n /\n alphaLoading: {\n type: Boolean,\n default: false,\n },\n\n /\n Text shown in tooltip when you hover the alpha button,\n * required if no content is passed to default slot\n /\n alphaTooltipText: {\n type: String,\n default: undefined,\n },\n\n /\n Determines whether a screenreader reads live updates of\n * the button content to the user while the button\n * is in focus.\n * @values true, false\n /\n assertiveOnFocus: {\n type: Boolean,\n default: false,\n },\n\n /\n HTML button disabled attribute\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\">\n * (Reference)\n * </a>\n * @values true, false\n /\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /\n The direction the dropdown displays relative to the anchor.\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 dropdownPlacement: {\n type: String,\n default: 'bottom-end',\n },\n\n /\n The fill and outline of the button associated with its visual importance.\n * @values clear, outlined, primary\n /\n importance: {\n type: String,\n default: 'primary',\n validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n },\n\n /\n The color of the button.\n * @values default, muted, danger, inverted\n /\n kind: {\n type: String,\n default: 'default',\n validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n },\n\n /\n Determines whether the omega button should have active styling\n * @values true, false\n /\n omegaActive: {\n type: Boolean,\n default: false,\n },\n\n /\n Descriptive label for the omega button\n /\n omegaAriaLabel: {\n type: String,\n default: null,\n },\n\n /\n Element ID, useful in case you need to reference the button\n * as an external anchor for popover\n /\n omegaId: {\n type: String,\n default: undefined,\n },\n\n /\n Text shown in tooltip when you hover the omega button,\n * required as it is an icon only button\n /\n omegaTooltipText: {\n type: String,\n default: undefined,\n },\n\n /\n The size of the button.\n * @values xs, sm, md, lg, xl\n /\n size: {\n type: String,\n default: 'md',\n validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n },\n\n /\n Button width, accepts\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n * CSS width attribute\n * </a>\n * values\n /\n width: {\n type: String,\n default: null,\n },\n },\n\n emits: [\n /\n Native alpha button click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'alpha-clicked',\n\n /\n Native omega button click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'omega-clicked',\n ],\n\n data () {\n return {\n isDropdownOpen: false,\n };\n },\n\n computed: {\n alphaButtonProps () {\n return {\n active: this.alphaActive,\n ariaLabel: this.alphaAriaLabel,\n assertiveOnFocus: this.assertiveOnFocus,\n disabled: this.disabled,\n iconPosition: this.alphaIconPosition,\n labelClass: this.alphaLabelClass,\n loading: this.alphaLoading,\n importance: this.importance,\n kind: this.kind,\n size: this.size,\n tooltipText: this.alphaTooltipText,\n class: this.$attrs.class,\n };\n },\n\n omegaButtonProps () {\n return {\n id: this.omegaId,\n active: this.omegaActive,\n ariaLabel: this.omegaAriaLabel,\n disabled: this.disabled,\n importance: this.importance,\n kind: this.kind,\n size: this.size,\n tooltipText: this.omegaTooltipText,\n class: this.$attrs.class,\n };\n },\n\n defaultSlotHasContent () {\n return this.$scopedSlots.default && this.$scopedSlots.default() && this.$scopedSlots.default()[0]?.text?.trim();\n },\n\n omegaSlotIsSet () {\n return this.$scopedSlots.omega && this.$scopedSlots.omega();\n },\n },\n\n created () {\n this.validateProps();\n },\n\n updated () {\n this.validateProps();\n },\n\n mounted () {\n warnIfUnmounted(this.$el, this.$options.name);\n },\n\n methods: {\n validateProps () {\n this.validateAlphaButtonProps();\n this.validateOmegaButtonProps();\n },\n\n validateAlphaButtonProps () {\n if (this.defaultSlotHasContent) return;\n\n // This can't be a computed prop due to reactivity issues.\n const isAlphaIconSet = this.$refs.alphaButton?.$scopedSlots.icon && this.$refs.alphaButton.$scopedSlots.icon();\n\n if (isAlphaIconSet && !this.alphaTooltipText) {\n console.warn('alpha-tooltip-text prop must be set if alpha button has an icon only');\n }\n },\n\n validateOmegaButtonProps () {\n if (this.omegaSlotIsSet) return;\n\n if (!this.omegaTooltipText) {\n console.warn('omega-tooltip-text prop is required as it is an icon-only button');\n }\n },\n },\n};\n</script>\n"],"names":[],"mappings":"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"}

package/dist/vue2/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue.cjs CHANGED Viewed

@@ -202,6 +202,9 @@ const _sfc_main = {
       return this.toggleOpen();
     }
   },
+  mounted() {
+    common_utils.warnIfUnmounted(this.$el, this.$options.name);
+  },
   methods: {
     arrowClick(ev) {
       this.$emit("arrow-click", ev);

package/dist/vue2/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"callbar_button_with_popover.vue.cjs","sources":["../../../../recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue"],"sourcesContent":["<template>\n <div\n class=\"dt-recipe--callbar-button-with-popover\"\n >\n <dt-recipe-callbar-button\n :aria-label=\"ariaLabel\"\n :disabled=\"disabled\"\n :active=\"active\"\n :danger=\"danger\"\n :button-class=\"buttonClass\"\n :button-width-size=\"buttonWidthSize\"\n :text-class=\"textClass\"\n class=\"dt-recipe--callbar-button-with-popover--main-button\"\n @click=\"buttonClick\"\n >\n <slot\n slot=\"icon\"\n name=\"icon\"\n />\n <slot\n slot=\"tooltip\"\n name=\"tooltip\"\n />\n <slot />\n </dt-recipe-callbar-button>\n <dt-popover\n v-if=\"showArrowButton\"\n :id=\"id\"\n :modal=\"false\"\n :open=\"open\"\n :placement=\"placement\"\n :initial-focus-element=\"initialFocusElement\"\n :show-close-button=\"showCloseButton\"\n :offset=\"offset\"\n padding=\"none\"\n class=\"dt-recipe--callbar-button-with-popover--popover-wrapper\"\n :dialog-class=\"['dt-recipe--callbar-button-with-popover--popover', contentClass]\"\n header-class=\"d-d-flex d-ai-center d-fw-normal d-px12\"\n v-bind=\"$attrs\"\n :open-popover=\"showPopover\"\n @opened=\"onModalIsOpened\"\n >\n <template #anchor>\n <dt-button\n circle\n importance=\"clear\"\n size=\"lg\"\n :class=\"['dt-recipe--callbar-button-with-popover--arrow',\n { 'dt-recipe--callbar-button-with-popover--arrow--large': !isCompactMode }]\"\n width=\"2rem\"\n :aria-label=\"arrowButtonLabel\"\n :active=\"open\"\n @click=\"arrowClick\"\n >\n <template #icon>\n <dt-icon-chevron-up\n class=\"dt-recipe--callbar-button-with-popover--arrow__icon\"\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n <slot\n slot=\"content\"\n name=\"content\"\n />\n <slot\n slot=\"headerContent\"\n name=\"headerContent\"\n />\n <slot\n slot=\"footerContent\"\n name=\"footerContent\"\n />\n </dt-popover>\n </div>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\nimport { DtIconChevronUp } from '@dialpad/dialtone-icons/vue2';\nimport { DtRecipeCallbarButton, CALLBAR_BUTTON_VALID_WIDTH_SIZE } from '../callbar_button';\nimport utils from '@/common/utils';\n\nexport default {\n name: 'DtRecipeCallbarButtonWithPopover',\n\n components: { DtRecipeCallbarButton, DtPopover, DtButton, DtIconChevronUp },\n\n /* inheritAttrs: false is generally an option we want to set on library\n components. This allows any attributes passed in that are not recognized\n as props to be passed down to another element or component using v-bind:$attrs\n more info: https://vuejs.org/v2/api/#inheritAttrs /\n inheritAttrs: false,\n\n props: {\n /\n Id for the item.\n /\n id: {\n type: String,\n default () {\n return utils.getUniqueString();\n },\n },\n\n /\n Aria label for the button. If empty, it takes its value from the default slot.\n /\n ariaLabel: {\n type: String,\n default: null,\n validator: (label) => {\n return label \|\| this.$slots.default;\n },\n },\n\n /\n Aria label for the arrow. Cannot be empty.\n /\n arrowButtonLabel: {\n type: String,\n required: true,\n validator: (label) => {\n return !!label;\n },\n },\n\n /\n The direction the popover displays relative to the anchor.\n * @values 'bottom', 'bottom-start', 'bottom-end',\n * 'right', 'right-start', 'right-end',\n * 'left', 'left-start', 'left-end',\n * 'top', 'top-start', 'top-end'\n * @default 'top'\n /\n placement: {\n type: String,\n default: 'top',\n },\n\n /\n Displaces the content box from its anchor element\n * by the specified number of pixels.\n * <a\n * class=\"d-link\"\n * href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n * target=\"_blank\"\n * >\n * Tippy.js docs\n * </a>\n /\n offset: {\n type: Array,\n default: () => [0, 16],\n },\n\n /\n The element that is focused when the popover is opened. This can be an\n * HTMLElement within the popover, a string starting with '#' which will\n * find the element by ID. 'first' which will automatically focus\n * the first element, or 'dialog' which will focus the dialog window itself.\n * If the dialog is modal this prop cannot be 'none'.\n /\n initialFocusElement: {\n type: String,\n default: 'first',\n },\n\n /\n Determines visibility for close button\n /\n showCloseButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Determines whether the button should be disabled\n * default is false.\n * @values true, false\n /\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /\n Forces showing the arrow, even if the button is disabled.\n * default is false\n * @values true, false\n /\n forceShowArrow: {\n type: Boolean,\n default: false,\n },\n\n /\n Determines whether the button should have active styling\n * default is false.\n * @values true, false\n * @see https://dialtone.dialpad.com/components/button/\n /\n active: {\n type: Boolean,\n default: false,\n },\n\n /\n Determines whether the button should have danger styling\n * default is false.\n * @values true, false\n * @see https://dialtone.dialpad.com/components/button/\n /\n danger: {\n type: Boolean,\n default: false,\n },\n\n /\n Additional class name for the button wrapper element.\n /\n buttonClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional class name for the button text.\n /\n textClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.\n /\n buttonWidthSize: {\n type: String,\n default: 'xl',\n validator: size => CALLBAR_BUTTON_VALID_WIDTH_SIZE.includes(size),\n },\n\n /\n Additional class name for the popover content wrapper element.\n /\n contentClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n To auto open the modal popover.\n /\n openPopover: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /\n Emitted when the arrow is clicked\n /\n 'arrow-click',\n\n /\n Native click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'click',\n\n /\n Emitted when modal popover is opened or closed.\n /\n 'opened',\n ],\n\n data () {\n return {\n open: false,\n };\n },\n\n computed: {\n showArrowButton () {\n return this.forceShowArrow \|\| !this.disabled;\n },\n\n isCompactMode () {\n return this.buttonWidthSize === 'sm' \|\| this.buttonWidthSize === 'md';\n },\n\n showPopover () {\n if (!this.openPopover \|\| this.open) {\n this.syncOpenState();\n return false;\n }\n\n return this.toggleOpen();\n },\n },\n\n methods: {\n arrowClick (ev) {\n this.$emit('arrow-click', ev);\n return this.toggleOpen();\n },\n\n toggleOpen () {\n return (this.open = !this.open);\n },\n\n syncOpenState () {\n this.open = this.openPopover;\n },\n\n buttonClick (ev) {\n // If no listener for the click event, the button click opens the popover\n // the same as if the arrow was clicked.\n if (!this.$listeners.click) {\n this.arrowClick(ev);\n } else {\n this.$emit('click', ev);\n }\n },\n\n onModalIsOpened (isOpened) {\n this.open = isOpened;\n this.$emit('opened', isOpened);\n },\n },\n\n};\n</script>\n\n<style lang=\"less\">\n.dt-recipe--callbar-button-with-popover--arrow {\n margin-top: var(--dt-space-350-negative);\n margin-left: calc(var(--dt-space-300-negative) 5);\n width: var(--dt-size-500);\n height: var(--dt-size-500);\n padding: var(--dt-space-400);\n border-radius: var(--dt-size-300);\n\n &.d-btn--active {\n background: var(--dt-color-surface-moderate-opaque);\n }\n\n &--large {\n margin-left: var(--dt-space-550-negative);\n }\n\n &__icon {\n color: var(--dt-color-black-800);\n }\n}\n\n.dt-recipe--callbar-button-with-popover--popover {\n .d-popover__header {\n background: var(--dt-color-surface-contrast);\n color: var(--dt-color-foreground-primary-inverted);\n\n .d-btn {\n color: var(--dt-color-foreground-primary-inverted);\n }\n }\n}\n\n.dt-recipe--callbar-button-with-popover--button .d-tab--selected::after,\n.dt-recipe--callbar-button-with-popover--button .d-tab--selected:hover::after {\n --tab--bgc: var(--dt-color-surface-contrast);\n}\n.dt-recipe--callbar-button-with-popover--button .tab-group {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.dt-recipe--callbar-button-with-popover--button .tab-content {\n flex: 1 1 100%;\n overflow-y: auto;\n}\n\n.dt-recipe--callbar-button-with-popover {\n display: flex;\n align-items: center;\n}\n</style>\n"],"names":["DtRecipeCallbarButton","DtPopover","DtButton","DtIconChevronUp","utils","this","CALLBAR_BUTTON_VALID_WIDTH_SIZE"],"mappings":"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"}
1	+ {"version":3,"file":"callbar_button_with_popover.vue.cjs","sources":["../../../../recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue"],"sourcesContent":["<template>\n <div\n class=\"dt-recipe--callbar-button-with-popover\"\n >\n <dt-recipe-callbar-button\n :aria-label=\"ariaLabel\"\n :disabled=\"disabled\"\n :active=\"active\"\n :danger=\"danger\"\n :button-class=\"buttonClass\"\n :button-width-size=\"buttonWidthSize\"\n :text-class=\"textClass\"\n class=\"dt-recipe--callbar-button-with-popover--main-button\"\n @click=\"buttonClick\"\n >\n <slot\n slot=\"icon\"\n name=\"icon\"\n />\n <slot\n slot=\"tooltip\"\n name=\"tooltip\"\n />\n <slot />\n </dt-recipe-callbar-button>\n <dt-popover\n v-if=\"showArrowButton\"\n :id=\"id\"\n :modal=\"false\"\n :open=\"open\"\n :placement=\"placement\"\n :initial-focus-element=\"initialFocusElement\"\n :show-close-button=\"showCloseButton\"\n :offset=\"offset\"\n padding=\"none\"\n class=\"dt-recipe--callbar-button-with-popover--popover-wrapper\"\n :dialog-class=\"['dt-recipe--callbar-button-with-popover--popover', contentClass]\"\n header-class=\"d-d-flex d-ai-center d-fw-normal d-px12\"\n v-bind=\"$attrs\"\n :open-popover=\"showPopover\"\n @opened=\"onModalIsOpened\"\n >\n <template #anchor>\n <dt-button\n circle\n importance=\"clear\"\n size=\"lg\"\n :class=\"['dt-recipe--callbar-button-with-popover--arrow',\n { 'dt-recipe--callbar-button-with-popover--arrow--large': !isCompactMode }]\"\n width=\"2rem\"\n :aria-label=\"arrowButtonLabel\"\n :active=\"open\"\n @click=\"arrowClick\"\n >\n <template #icon>\n <dt-icon-chevron-up\n class=\"dt-recipe--callbar-button-with-popover--arrow__icon\"\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n <slot\n slot=\"content\"\n name=\"content\"\n />\n <slot\n slot=\"headerContent\"\n name=\"headerContent\"\n />\n <slot\n slot=\"footerContent\"\n name=\"footerContent\"\n />\n </dt-popover>\n </div>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\nimport { DtIconChevronUp } from '@dialpad/dialtone-icons/vue2';\nimport { DtRecipeCallbarButton, CALLBAR_BUTTON_VALID_WIDTH_SIZE } from '../callbar_button';\nimport utils, { warnIfUnmounted } from '@/common/utils';\n\nexport default {\n name: 'DtRecipeCallbarButtonWithPopover',\n\n components: { DtRecipeCallbarButton, DtPopover, DtButton, DtIconChevronUp },\n\n /* inheritAttrs: false is generally an option we want to set on library\n components. This allows any attributes passed in that are not recognized\n as props to be passed down to another element or component using v-bind:$attrs\n more info: https://vuejs.org/v2/api/#inheritAttrs /\n inheritAttrs: false,\n\n props: {\n /\n Id for the item.\n /\n id: {\n type: String,\n default () {\n return utils.getUniqueString();\n },\n },\n\n /\n Aria label for the button. If empty, it takes its value from the default slot.\n /\n ariaLabel: {\n type: String,\n default: null,\n validator: (label) => {\n return label \|\| this.$slots.default;\n },\n },\n\n /\n Aria label for the arrow. Cannot be empty.\n /\n arrowButtonLabel: {\n type: String,\n required: true,\n validator: (label) => {\n return !!label;\n },\n },\n\n /\n The direction the popover displays relative to the anchor.\n * @values 'bottom', 'bottom-start', 'bottom-end',\n * 'right', 'right-start', 'right-end',\n * 'left', 'left-start', 'left-end',\n * 'top', 'top-start', 'top-end'\n * @default 'top'\n /\n placement: {\n type: String,\n default: 'top',\n },\n\n /\n Displaces the content box from its anchor element\n * by the specified number of pixels.\n * <a\n * class=\"d-link\"\n * href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n * target=\"_blank\"\n * >\n * Tippy.js docs\n * </a>\n /\n offset: {\n type: Array,\n default: () => [0, 16],\n },\n\n /\n The element that is focused when the popover is opened. This can be an\n * HTMLElement within the popover, a string starting with '#' which will\n * find the element by ID. 'first' which will automatically focus\n * the first element, or 'dialog' which will focus the dialog window itself.\n * If the dialog is modal this prop cannot be 'none'.\n /\n initialFocusElement: {\n type: String,\n default: 'first',\n },\n\n /\n Determines visibility for close button\n /\n showCloseButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Determines whether the button should be disabled\n * default is false.\n * @values true, false\n /\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /\n Forces showing the arrow, even if the button is disabled.\n * default is false\n * @values true, false\n /\n forceShowArrow: {\n type: Boolean,\n default: false,\n },\n\n /\n Determines whether the button should have active styling\n * default is false.\n * @values true, false\n * @see https://dialtone.dialpad.com/components/button/\n /\n active: {\n type: Boolean,\n default: false,\n },\n\n /\n Determines whether the button should have danger styling\n * default is false.\n * @values true, false\n * @see https://dialtone.dialpad.com/components/button/\n /\n danger: {\n type: Boolean,\n default: false,\n },\n\n /\n Additional class name for the button wrapper element.\n /\n buttonClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional class name for the button text.\n /\n textClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.\n /\n buttonWidthSize: {\n type: String,\n default: 'xl',\n validator: size => CALLBAR_BUTTON_VALID_WIDTH_SIZE.includes(size),\n },\n\n /\n Additional class name for the popover content wrapper element.\n /\n contentClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n To auto open the modal popover.\n /\n openPopover: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /\n Emitted when the arrow is clicked\n /\n 'arrow-click',\n\n /\n Native click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'click',\n\n /\n Emitted when modal popover is opened or closed.\n /\n 'opened',\n ],\n\n data () {\n return {\n open: false,\n };\n },\n\n computed: {\n showArrowButton () {\n return this.forceShowArrow \|\| !this.disabled;\n },\n\n isCompactMode () {\n return this.buttonWidthSize === 'sm' \|\| this.buttonWidthSize === 'md';\n },\n\n showPopover () {\n if (!this.openPopover \|\| this.open) {\n this.syncOpenState();\n return false;\n }\n\n return this.toggleOpen();\n },\n },\n\n mounted () {\n warnIfUnmounted(this.$el, this.$options.name);\n },\n\n methods: {\n arrowClick (ev) {\n this.$emit('arrow-click', ev);\n return this.toggleOpen();\n },\n\n toggleOpen () {\n return (this.open = !this.open);\n },\n\n syncOpenState () {\n this.open = this.openPopover;\n },\n\n buttonClick (ev) {\n // If no listener for the click event, the button click opens the popover\n // the same as if the arrow was clicked.\n if (!this.$listeners.click) {\n this.arrowClick(ev);\n } else {\n this.$emit('click', ev);\n }\n },\n\n onModalIsOpened (isOpened) {\n this.open = isOpened;\n this.$emit('opened', isOpened);\n },\n },\n\n};\n</script>\n\n<style lang=\"less\">\n.dt-recipe--callbar-button-with-popover--arrow {\n margin-top: var(--dt-space-350-negative);\n margin-left: calc(var(--dt-space-300-negative) 5);\n width: var(--dt-size-500);\n height: var(--dt-size-500);\n padding: var(--dt-space-400);\n border-radius: var(--dt-size-300);\n\n &.d-btn--active {\n background: var(--dt-color-surface-moderate-opaque);\n }\n\n &--large {\n margin-left: var(--dt-space-550-negative);\n }\n\n &__icon {\n color: var(--dt-color-black-800);\n }\n}\n\n.dt-recipe--callbar-button-with-popover--popover {\n .d-popover__header {\n background: var(--dt-color-surface-contrast);\n color: var(--dt-color-foreground-primary-inverted);\n\n .d-btn {\n color: var(--dt-color-foreground-primary-inverted);\n }\n }\n}\n\n.dt-recipe--callbar-button-with-popover--button .d-tab--selected::after,\n.dt-recipe--callbar-button-with-popover--button .d-tab--selected:hover::after {\n --tab--bgc: var(--dt-color-surface-contrast);\n}\n.dt-recipe--callbar-button-with-popover--button .tab-group {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.dt-recipe--callbar-button-with-popover--button .tab-content {\n flex: 1 1 100%;\n overflow-y: auto;\n}\n\n.dt-recipe--callbar-button-with-popover {\n display: flex;\n align-items: center;\n}\n</style>\n"],"names":["DtRecipeCallbarButton","DtPopover","DtButton","DtIconChevronUp","utils","this","CALLBAR_BUTTON_VALID_WIDTH_SIZE","warnIfUnmounted"],"mappings":"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"}

package/dist/vue2/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { DtIconChevronUp } from "@dialpad/dialtone-icons/vue2";
-import utils from "../../../common/utils.js";
+import utils, { warnIfUnmounted } from "../../../common/utils.js";
 /* empty css                                 */
 import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
 import DtRecipeCallbarButton from "../callbar_button/callbar_button.vue.js";
@@ -201,6 +201,9 @@ const _sfc_main = {
       return this.toggleOpen();
     }
   },
+  mounted() {
+    warnIfUnmounted(this.$el, this.$options.name);
+  },
   methods: {
     arrowClick(ev) {
       this.$emit("arrow-click", ev);

package/dist/vue2/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"callbar_button_with_popover.vue.js","sources":["../../../../recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue"],"sourcesContent":["<template>\n <div\n class=\"dt-recipe--callbar-button-with-popover\"\n >\n <dt-recipe-callbar-button\n :aria-label=\"ariaLabel\"\n :disabled=\"disabled\"\n :active=\"active\"\n :danger=\"danger\"\n :button-class=\"buttonClass\"\n :button-width-size=\"buttonWidthSize\"\n :text-class=\"textClass\"\n class=\"dt-recipe--callbar-button-with-popover--main-button\"\n @click=\"buttonClick\"\n >\n <slot\n slot=\"icon\"\n name=\"icon\"\n />\n <slot\n slot=\"tooltip\"\n name=\"tooltip\"\n />\n <slot />\n </dt-recipe-callbar-button>\n <dt-popover\n v-if=\"showArrowButton\"\n :id=\"id\"\n :modal=\"false\"\n :open=\"open\"\n :placement=\"placement\"\n :initial-focus-element=\"initialFocusElement\"\n :show-close-button=\"showCloseButton\"\n :offset=\"offset\"\n padding=\"none\"\n class=\"dt-recipe--callbar-button-with-popover--popover-wrapper\"\n :dialog-class=\"['dt-recipe--callbar-button-with-popover--popover', contentClass]\"\n header-class=\"d-d-flex d-ai-center d-fw-normal d-px12\"\n v-bind=\"$attrs\"\n :open-popover=\"showPopover\"\n @opened=\"onModalIsOpened\"\n >\n <template #anchor>\n <dt-button\n circle\n importance=\"clear\"\n size=\"lg\"\n :class=\"['dt-recipe--callbar-button-with-popover--arrow',\n { 'dt-recipe--callbar-button-with-popover--arrow--large': !isCompactMode }]\"\n width=\"2rem\"\n :aria-label=\"arrowButtonLabel\"\n :active=\"open\"\n @click=\"arrowClick\"\n >\n <template #icon>\n <dt-icon-chevron-up\n class=\"dt-recipe--callbar-button-with-popover--arrow__icon\"\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n <slot\n slot=\"content\"\n name=\"content\"\n />\n <slot\n slot=\"headerContent\"\n name=\"headerContent\"\n />\n <slot\n slot=\"footerContent\"\n name=\"footerContent\"\n />\n </dt-popover>\n </div>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\nimport { DtIconChevronUp } from '@dialpad/dialtone-icons/vue2';\nimport { DtRecipeCallbarButton, CALLBAR_BUTTON_VALID_WIDTH_SIZE } from '../callbar_button';\nimport utils from '@/common/utils';\n\nexport default {\n name: 'DtRecipeCallbarButtonWithPopover',\n\n components: { DtRecipeCallbarButton, DtPopover, DtButton, DtIconChevronUp },\n\n /* inheritAttrs: false is generally an option we want to set on library\n components. This allows any attributes passed in that are not recognized\n as props to be passed down to another element or component using v-bind:$attrs\n more info: https://vuejs.org/v2/api/#inheritAttrs /\n inheritAttrs: false,\n\n props: {\n /\n Id for the item.\n /\n id: {\n type: String,\n default () {\n return utils.getUniqueString();\n },\n },\n\n /\n Aria label for the button. If empty, it takes its value from the default slot.\n /\n ariaLabel: {\n type: String,\n default: null,\n validator: (label) => {\n return label \|\| this.$slots.default;\n },\n },\n\n /\n Aria label for the arrow. Cannot be empty.\n /\n arrowButtonLabel: {\n type: String,\n required: true,\n validator: (label) => {\n return !!label;\n },\n },\n\n /\n The direction the popover displays relative to the anchor.\n * @values 'bottom', 'bottom-start', 'bottom-end',\n * 'right', 'right-start', 'right-end',\n * 'left', 'left-start', 'left-end',\n * 'top', 'top-start', 'top-end'\n * @default 'top'\n /\n placement: {\n type: String,\n default: 'top',\n },\n\n /\n Displaces the content box from its anchor element\n * by the specified number of pixels.\n * <a\n * class=\"d-link\"\n * href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n * target=\"_blank\"\n * >\n * Tippy.js docs\n * </a>\n /\n offset: {\n type: Array,\n default: () => [0, 16],\n },\n\n /\n The element that is focused when the popover is opened. This can be an\n * HTMLElement within the popover, a string starting with '#' which will\n * find the element by ID. 'first' which will automatically focus\n * the first element, or 'dialog' which will focus the dialog window itself.\n * If the dialog is modal this prop cannot be 'none'.\n /\n initialFocusElement: {\n type: String,\n default: 'first',\n },\n\n /\n Determines visibility for close button\n /\n showCloseButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Determines whether the button should be disabled\n * default is false.\n * @values true, false\n /\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /\n Forces showing the arrow, even if the button is disabled.\n * default is false\n * @values true, false\n /\n forceShowArrow: {\n type: Boolean,\n default: false,\n },\n\n /\n Determines whether the button should have active styling\n * default is false.\n * @values true, false\n * @see https://dialtone.dialpad.com/components/button/\n /\n active: {\n type: Boolean,\n default: false,\n },\n\n /\n Determines whether the button should have danger styling\n * default is false.\n * @values true, false\n * @see https://dialtone.dialpad.com/components/button/\n /\n danger: {\n type: Boolean,\n default: false,\n },\n\n /\n Additional class name for the button wrapper element.\n /\n buttonClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional class name for the button text.\n /\n textClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.\n /\n buttonWidthSize: {\n type: String,\n default: 'xl',\n validator: size => CALLBAR_BUTTON_VALID_WIDTH_SIZE.includes(size),\n },\n\n /\n Additional class name for the popover content wrapper element.\n /\n contentClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n To auto open the modal popover.\n /\n openPopover: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /\n Emitted when the arrow is clicked\n /\n 'arrow-click',\n\n /\n Native click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'click',\n\n /\n Emitted when modal popover is opened or closed.\n /\n 'opened',\n ],\n\n data () {\n return {\n open: false,\n };\n },\n\n computed: {\n showArrowButton () {\n return this.forceShowArrow \|\| !this.disabled;\n },\n\n isCompactMode () {\n return this.buttonWidthSize === 'sm' \|\| this.buttonWidthSize === 'md';\n },\n\n showPopover () {\n if (!this.openPopover \|\| this.open) {\n this.syncOpenState();\n return false;\n }\n\n return this.toggleOpen();\n },\n },\n\n methods: {\n arrowClick (ev) {\n this.$emit('arrow-click', ev);\n return this.toggleOpen();\n },\n\n toggleOpen () {\n return (this.open = !this.open);\n },\n\n syncOpenState () {\n this.open = this.openPopover;\n },\n\n buttonClick (ev) {\n // If no listener for the click event, the button click opens the popover\n // the same as if the arrow was clicked.\n if (!this.$listeners.click) {\n this.arrowClick(ev);\n } else {\n this.$emit('click', ev);\n }\n },\n\n onModalIsOpened (isOpened) {\n this.open = isOpened;\n this.$emit('opened', isOpened);\n },\n },\n\n};\n</script>\n\n<style lang=\"less\">\n.dt-recipe--callbar-button-with-popover--arrow {\n margin-top: var(--dt-space-350-negative);\n margin-left: calc(var(--dt-space-300-negative) 5);\n width: var(--dt-size-500);\n height: var(--dt-size-500);\n padding: var(--dt-space-400);\n border-radius: var(--dt-size-300);\n\n &.d-btn--active {\n background: var(--dt-color-surface-moderate-opaque);\n }\n\n &--large {\n margin-left: var(--dt-space-550-negative);\n }\n\n &__icon {\n color: var(--dt-color-black-800);\n }\n}\n\n.dt-recipe--callbar-button-with-popover--popover {\n .d-popover__header {\n background: var(--dt-color-surface-contrast);\n color: var(--dt-color-foreground-primary-inverted);\n\n .d-btn {\n color: var(--dt-color-foreground-primary-inverted);\n }\n }\n}\n\n.dt-recipe--callbar-button-with-popover--button .d-tab--selected::after,\n.dt-recipe--callbar-button-with-popover--button .d-tab--selected:hover::after {\n --tab--bgc: var(--dt-color-surface-contrast);\n}\n.dt-recipe--callbar-button-with-popover--button .tab-group {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.dt-recipe--callbar-button-with-popover--button .tab-content {\n flex: 1 1 100%;\n overflow-y: auto;\n}\n\n.dt-recipe--callbar-button-with-popover {\n display: flex;\n align-items: center;\n}\n</style>\n"],"names":["this"],"mappings":"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"}
1	+ {"version":3,"file":"callbar_button_with_popover.vue.js","sources":["../../../../recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue"],"sourcesContent":["<template>\n <div\n class=\"dt-recipe--callbar-button-with-popover\"\n >\n <dt-recipe-callbar-button\n :aria-label=\"ariaLabel\"\n :disabled=\"disabled\"\n :active=\"active\"\n :danger=\"danger\"\n :button-class=\"buttonClass\"\n :button-width-size=\"buttonWidthSize\"\n :text-class=\"textClass\"\n class=\"dt-recipe--callbar-button-with-popover--main-button\"\n @click=\"buttonClick\"\n >\n <slot\n slot=\"icon\"\n name=\"icon\"\n />\n <slot\n slot=\"tooltip\"\n name=\"tooltip\"\n />\n <slot />\n </dt-recipe-callbar-button>\n <dt-popover\n v-if=\"showArrowButton\"\n :id=\"id\"\n :modal=\"false\"\n :open=\"open\"\n :placement=\"placement\"\n :initial-focus-element=\"initialFocusElement\"\n :show-close-button=\"showCloseButton\"\n :offset=\"offset\"\n padding=\"none\"\n class=\"dt-recipe--callbar-button-with-popover--popover-wrapper\"\n :dialog-class=\"['dt-recipe--callbar-button-with-popover--popover', contentClass]\"\n header-class=\"d-d-flex d-ai-center d-fw-normal d-px12\"\n v-bind=\"$attrs\"\n :open-popover=\"showPopover\"\n @opened=\"onModalIsOpened\"\n >\n <template #anchor>\n <dt-button\n circle\n importance=\"clear\"\n size=\"lg\"\n :class=\"['dt-recipe--callbar-button-with-popover--arrow',\n { 'dt-recipe--callbar-button-with-popover--arrow--large': !isCompactMode }]\"\n width=\"2rem\"\n :aria-label=\"arrowButtonLabel\"\n :active=\"open\"\n @click=\"arrowClick\"\n >\n <template #icon>\n <dt-icon-chevron-up\n class=\"dt-recipe--callbar-button-with-popover--arrow__icon\"\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n <slot\n slot=\"content\"\n name=\"content\"\n />\n <slot\n slot=\"headerContent\"\n name=\"headerContent\"\n />\n <slot\n slot=\"footerContent\"\n name=\"footerContent\"\n />\n </dt-popover>\n </div>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\nimport { DtIconChevronUp } from '@dialpad/dialtone-icons/vue2';\nimport { DtRecipeCallbarButton, CALLBAR_BUTTON_VALID_WIDTH_SIZE } from '../callbar_button';\nimport utils, { warnIfUnmounted } from '@/common/utils';\n\nexport default {\n name: 'DtRecipeCallbarButtonWithPopover',\n\n components: { DtRecipeCallbarButton, DtPopover, DtButton, DtIconChevronUp },\n\n /* inheritAttrs: false is generally an option we want to set on library\n components. This allows any attributes passed in that are not recognized\n as props to be passed down to another element or component using v-bind:$attrs\n more info: https://vuejs.org/v2/api/#inheritAttrs /\n inheritAttrs: false,\n\n props: {\n /\n Id for the item.\n /\n id: {\n type: String,\n default () {\n return utils.getUniqueString();\n },\n },\n\n /\n Aria label for the button. If empty, it takes its value from the default slot.\n /\n ariaLabel: {\n type: String,\n default: null,\n validator: (label) => {\n return label \|\| this.$slots.default;\n },\n },\n\n /\n Aria label for the arrow. Cannot be empty.\n /\n arrowButtonLabel: {\n type: String,\n required: true,\n validator: (label) => {\n return !!label;\n },\n },\n\n /\n The direction the popover displays relative to the anchor.\n * @values 'bottom', 'bottom-start', 'bottom-end',\n * 'right', 'right-start', 'right-end',\n * 'left', 'left-start', 'left-end',\n * 'top', 'top-start', 'top-end'\n * @default 'top'\n /\n placement: {\n type: String,\n default: 'top',\n },\n\n /\n Displaces the content box from its anchor element\n * by the specified number of pixels.\n * <a\n * class=\"d-link\"\n * href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n * target=\"_blank\"\n * >\n * Tippy.js docs\n * </a>\n /\n offset: {\n type: Array,\n default: () => [0, 16],\n },\n\n /\n The element that is focused when the popover is opened. This can be an\n * HTMLElement within the popover, a string starting with '#' which will\n * find the element by ID. 'first' which will automatically focus\n * the first element, or 'dialog' which will focus the dialog window itself.\n * If the dialog is modal this prop cannot be 'none'.\n /\n initialFocusElement: {\n type: String,\n default: 'first',\n },\n\n /\n Determines visibility for close button\n /\n showCloseButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Determines whether the button should be disabled\n * default is false.\n * @values true, false\n /\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /\n Forces showing the arrow, even if the button is disabled.\n * default is false\n * @values true, false\n /\n forceShowArrow: {\n type: Boolean,\n default: false,\n },\n\n /\n Determines whether the button should have active styling\n * default is false.\n * @values true, false\n * @see https://dialtone.dialpad.com/components/button/\n /\n active: {\n type: Boolean,\n default: false,\n },\n\n /\n Determines whether the button should have danger styling\n * default is false.\n * @values true, false\n * @see https://dialtone.dialpad.com/components/button/\n /\n danger: {\n type: Boolean,\n default: false,\n },\n\n /\n Additional class name for the button wrapper element.\n /\n buttonClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional class name for the button text.\n /\n textClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.\n /\n buttonWidthSize: {\n type: String,\n default: 'xl',\n validator: size => CALLBAR_BUTTON_VALID_WIDTH_SIZE.includes(size),\n },\n\n /\n Additional class name for the popover content wrapper element.\n /\n contentClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n To auto open the modal popover.\n /\n openPopover: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /\n Emitted when the arrow is clicked\n /\n 'arrow-click',\n\n /\n Native click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'click',\n\n /\n Emitted when modal popover is opened or closed.\n /\n 'opened',\n ],\n\n data () {\n return {\n open: false,\n };\n },\n\n computed: {\n showArrowButton () {\n return this.forceShowArrow \|\| !this.disabled;\n },\n\n isCompactMode () {\n return this.buttonWidthSize === 'sm' \|\| this.buttonWidthSize === 'md';\n },\n\n showPopover () {\n if (!this.openPopover \|\| this.open) {\n this.syncOpenState();\n return false;\n }\n\n return this.toggleOpen();\n },\n },\n\n mounted () {\n warnIfUnmounted(this.$el, this.$options.name);\n },\n\n methods: {\n arrowClick (ev) {\n this.$emit('arrow-click', ev);\n return this.toggleOpen();\n },\n\n toggleOpen () {\n return (this.open = !this.open);\n },\n\n syncOpenState () {\n this.open = this.openPopover;\n },\n\n buttonClick (ev) {\n // If no listener for the click event, the button click opens the popover\n // the same as if the arrow was clicked.\n if (!this.$listeners.click) {\n this.arrowClick(ev);\n } else {\n this.$emit('click', ev);\n }\n },\n\n onModalIsOpened (isOpened) {\n this.open = isOpened;\n this.$emit('opened', isOpened);\n },\n },\n\n};\n</script>\n\n<style lang=\"less\">\n.dt-recipe--callbar-button-with-popover--arrow {\n margin-top: var(--dt-space-350-negative);\n margin-left: calc(var(--dt-space-300-negative) 5);\n width: var(--dt-size-500);\n height: var(--dt-size-500);\n padding: var(--dt-space-400);\n border-radius: var(--dt-size-300);\n\n &.d-btn--active {\n background: var(--dt-color-surface-moderate-opaque);\n }\n\n &--large {\n margin-left: var(--dt-space-550-negative);\n }\n\n &__icon {\n color: var(--dt-color-black-800);\n }\n}\n\n.dt-recipe--callbar-button-with-popover--popover {\n .d-popover__header {\n background: var(--dt-color-surface-contrast);\n color: var(--dt-color-foreground-primary-inverted);\n\n .d-btn {\n color: var(--dt-color-foreground-primary-inverted);\n }\n }\n}\n\n.dt-recipe--callbar-button-with-popover--button .d-tab--selected::after,\n.dt-recipe--callbar-button-with-popover--button .d-tab--selected:hover::after {\n --tab--bgc: var(--dt-color-surface-contrast);\n}\n.dt-recipe--callbar-button-with-popover--button .tab-group {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.dt-recipe--callbar-button-with-popover--button .tab-content {\n flex: 1 1 100%;\n overflow-y: auto;\n}\n\n.dt-recipe--callbar-button-with-popover {\n display: flex;\n align-items: center;\n}\n</style>\n"],"names":["this"],"mappings":"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"}

package/dist/vue2/types/common/utils/index.d.ts CHANGED Viewed

@@ -15,6 +15,7 @@ export function isURL(input: string): boolean;
 export function isEmailAddress(input: string): boolean;
 export function safeConcatStrings(elements: any[]): string;
 export function capitalizeFirstLetter(str: string, locale?: string): string;
+export function warnIfUnmounted(componentRef: HTMLElement, componentName: string): void;
 export namespace htmlFragment {
     let name: string;
     let functional: boolean;

package/dist/vue2/types/common/utils/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../common/utils/index.js"],"names":[],"mappings":"AAqBA,yDAEC;AASD,mDAJW,MAAM,OAWhB;AAiBD,kCAHW,MAAM,GACL,MAAM,CASjB;AAOD,kCAHW,MAAM,GACJ,MAAM,CAIlB;AAED,mDAeC;AAED,qEAQC;AAOD,0EAgBC;AAED,yFAMC;AAED,0DAEC;AAsDD,4DAGC;AASD,yCAJY,WAAW,GACX,MAAM,CAejB;AA0ED,gDAJW,MAAM,cACN,MAAM,GACJ,MAAM,CAuBlB;AAoBD,qCAHW,MAAM,GAAC,MAAM,GACX,OAAO,CAMnB;AAOD,6BAHW,MAAM,GACJ,OAAO,CAMnB;AAOD,sCAHW,MAAM,GACJ,OAAO,CAKnB;AAQD,2DAEC;AAQD,2CAJW,MAAM,WACN,MAAM,UAKhB;;;;;~~IApOC~~,uCAOC;;AAGI,8CAIN;AAOM,oDAFM,MAAM,CAOlB;AAOM,oDAFM,MAAM,CAMlB;AAmID,+BAQE"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../common/utils/index.js"],"names":[],"mappings":"AAqBA,yDAEC;AASD,mDAJW,MAAM,OAWhB;AAiBD,kCAHW,MAAM,GACL,MAAM,CASjB;AAOD,kCAHW,MAAM,GACJ,MAAM,CAIlB;AAED,mDAeC;AAED,qEAQC;AAOD,0EAgBC;AAED,yFAMC;AAED,0DAEC;AAsDD,4DAGC;AASD,yCAJY,WAAW,GACX,MAAM,CAejB;AA0ED,gDAJW,MAAM,cACN,MAAM,GACJ,MAAM,CAuBlB;AAoBD,qCAHW,MAAM,GAAC,MAAM,GACX,OAAO,CAMnB;AAOD,6BAHW,MAAM,GACJ,OAAO,CAMnB;AAOD,sCAHW,MAAM,GACJ,OAAO,CAKnB;AAQD,2DAEC;AAQD,2CAJW,MAAM,WACN,MAAM,UAKhB;AAOD,8CAHW,WAAW,iBACX,MAAM,QAOhB;;;;;IAhPC,uCAOC;;AAGI,8CAIN;AAOM,oDAFM,MAAM,CAOlB;AAOM,oDAFM,MAAM,CAMlB;AAmID,+BAQE"}

package/dist/vue2/types/components/dropdown/dropdown.vue.d.ts CHANGED Viewed

@@ -58,10 +58,10 @@ declare const _default: import('vue').DefineComponent<{
         default: string;
     };
     appendTo: {
-        type: (StringConstructor | {
+        type: ({
             new (): HTMLElement;
             prototype: HTMLElement;
-        })[];
+        } | StringConstructor)[];
         default: string;
         validator: (appendTo: unknown) => boolean;
     };
@@ -257,10 +257,10 @@ declare const _default: import('vue').DefineComponent<{
         default: string;
     };
     appendTo: {
-        type: (StringConstructor | {
+        type: ({
             new (): HTMLElement;
             prototype: HTMLElement;
-        })[];
+        } | StringConstructor)[];
         default: string;
         validator: (appendTo: unknown) => boolean;
     };

package/dist/vue2/types/components/emoji_picker/modules/emoji_selector.vue.d.ts CHANGED Viewed

@@ -28,6 +28,7 @@ declare const _default: import('vue').DefineComponent<{
         default: () => never[];
     };
 }, {}, {
+    tabLabelsRefs: never[];
     emojiRefs: never[];
     emojiFilteredRefs: never[];
     isFiltering: boolean;

package/dist/vue2/types/components/modal/modal.vue.d.ts CHANGED Viewed

@@ -72,10 +72,10 @@ declare const _default: import('vue').DefineComponent<{
         default: boolean;
     };
     initialFocusElement: {
-        type: (StringConstructor | {
+        type: ({
             new (): HTMLElement;
             prototype: HTMLElement;
-        })[];
+        } | StringConstructor)[];
         default: string;
         validator: (initialFocusElement: unknown) => any;
     };
@@ -234,10 +234,10 @@ declare const _default: import('vue').DefineComponent<{
         default: boolean;
     };
     initialFocusElement: {
-        type: (StringConstructor | {
+        type: ({
             new (): HTMLElement;
             prototype: HTMLElement;
-        })[];
+        } | StringConstructor)[];
         default: string;
         validator: (initialFocusElement: unknown) => any;
     };

package/dist/vue2/types/components/tooltip/tooltip.vue.d.ts CHANGED Viewed

@@ -26,10 +26,10 @@ declare const _default: import('vue').DefineComponent<{
         validator: (sticky: unknown) => boolean;
     };
     appendTo: {
-        type: (StringConstructor | {
+        type: ({
             new (): HTMLElement;
             prototype: HTMLElement;
-        })[];
+        } | StringConstructor)[];
         default: string;
         validator: (appendTo: unknown) => boolean;
     };
@@ -193,10 +193,10 @@ declare const _default: import('vue').DefineComponent<{
         validator: (sticky: unknown) => boolean;
     };
     appendTo: {
-        type: (StringConstructor | {
+        type: ({
             new (): HTMLElement;
             prototype: HTMLElement;
-        })[];
+        } | StringConstructor)[];
         default: string;
         validator: (appendTo: unknown) => boolean;
     };

package/dist/vue2/types/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue.d.ts CHANGED Viewed

@@ -83,10 +83,10 @@ declare const _default: import('vue').DefineComponent<{
         default: string;
     };
     appendTo: {
-        type: (StringConstructor | {
+        type: ({
             new (): HTMLElement;
             prototype: HTMLElement;
-        })[];
+        } | StringConstructor)[];
         default: string;
         validator: (appendTo: unknown) => boolean;
     };
@@ -230,10 +230,10 @@ declare const _default: import('vue').DefineComponent<{
         default: string;
     };
     appendTo: {
-        type: (StringConstructor | {
+        type: ({
             new (): HTMLElement;
             prototype: HTMLElement;
-        })[];
+        } | StringConstructor)[];
         default: string;
         validator: (appendTo: unknown) => boolean;
     };

package/dist/vue3/common/utils.cjs CHANGED Viewed

@@ -194,6 +194,12 @@ function safeConcatStrings(elements) {
 function capitalizeFirstLetter(str, locale = "en-US") {
   return str.replace(new RegExp("^\\p{CWU}", "u"), (char) => char.toLocaleUpperCase(locale));
 }
+function warnIfUnmounted(componentRef, componentName) {
+  if (!componentRef || !(componentRef instanceof HTMLElement) || !(document == null ? void 0 : document.body)) return;
+  if (!document.body.contains(componentRef)) {
+    console.warn(`The ${componentName} component is not attached to the document body. This may cause issues.`);
+  }
+}
 const utils = {
   getUniqueString,
   getRandomElement,
@@ -241,4 +247,5 @@ exports.kebabCaseToPascalCase = kebabCaseToPascalCase;
 exports.linkRegex = linkRegex;
 exports.pascalCaseToKebabCase = pascalCaseToKebabCase;
 exports.safeConcatStrings = safeConcatStrings;
+exports.warnIfUnmounted = warnIfUnmounted;
 //# sourceMappingURL=utils.cjs.map

package/dist/vue3/common/utils.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.cjs","sources":["../../common/utils/index.js"],"sourcesContent":["import {\n DEFAULT_PREFIX,\n DEFAULT_VALIDATION_MESSAGE_TYPE,\n VALIDATION_MESSAGE_TYPES,\n} from '../constants';\nimport {\n h,\n Comment,\n Text,\n} from 'vue';\n\nlet UNIQUE_ID_COUNTER = 0;\nlet TIMER;\n\n// selector to find focusable not hidden inputs\nconst FOCUSABLE_SELECTOR_NOT_HIDDEN = 'input:not([type=hidden]):not(:disabled)';\n// selector to find focusable not disables elements\nconst FOCUSABLE_SELECTOR_NOT_DISABLED = 'select:not(:disabled),textarea:not(:disabled),button:not(:disabled)';\n// // selector to find focusable not hidden and disabled elements\nconst FOCUSABLE_SELECTOR_NOT_HIDDEN_DISABLED = `${FOCUSABLE_SELECTOR_NOT_HIDDEN},${FOCUSABLE_SELECTOR_NOT_DISABLED}`;\n// selector to find focusable elements\nconst FOCUSABLE_SELECTOR = `a,frame,iframe,${FOCUSABLE_SELECTOR_NOT_HIDDEN_DISABLED},[tabindex]`;\n\nconst scheduler = typeof setImmediate === 'function' ? setImmediate : setTimeout;\n\nexport function getUniqueString (prefix = DEFAULT_PREFIX) {\n return `${prefix}${UNIQUE_ID_COUNTER++}`;\n}\n\n/\n Returns a random element from array\n * @param array - the array to return a random element from\n * @param {string} seed - use a string to seed the randomization, so it returns the same element each time\n * based on that string.\n * @returns {} - the random element\n /\nexport function getRandomElement (array, seed) {\n if (seed) {\n const hash = javaHashCode(seed);\n return array[Math.abs(hash) % array.length];\n } else {\n return array[getRandomInt(array.length)];\n }\n}\n\n/*\n Returns a hash code for a string.\n * (Compatible to Java's String.hashCode())\n * We use this algo to be in sync with android.\n \n The hash code for a string object is computed as\n * s[0]31^(n-1) + s[1]31^(n-2) + ... + s[n-1]\n * using number arithmetic, where s[i] is the i th character\n * of the given string, n is the length of the string,\n * and ^ indicates exponentiation.\n * (The hash value of the empty string is zero.)\n \n @param {string} str a string\n * @return {number} a hash code value for the given string.\n /\nexport function javaHashCode (str) {\n let h;\n for (let i = 0; i < str.length; i++) {\n h = Math.imul(31, h) + str.charCodeAt(i) \| 0;\n }\n\n return h;\n}\n\n/\n Generate a random integer\n * @param {number} max - max range of integer to generate\n * @returns {number} randomly generated integer between 0 and max\n /\nexport function getRandomInt (max) {\n return Math.floor(Math.random() max);\n}\n\nexport function formatMessages (messages) {\n if (!messages) {\n return [];\n }\n\n return messages.map(message => {\n if (typeof message === 'string') {\n return {\n message,\n type: DEFAULT_VALIDATION_MESSAGE_TYPE,\n };\n }\n\n return message;\n });\n}\n\nexport function filterFormattedMessages (formattedMessages) {\n const validationState = getValidationState(formattedMessages);\n\n if (!formattedMessages \|\| !validationState) {\n return [];\n }\n\n return formattedMessages.filter(message => !!message.message && message.type === validationState);\n}\n\n/\n The priority order of message types is as flows: 'error' > 'warning' > 'success'.\n * If any message of type 'error' is present in messages, the input state is considered\n * to be 'error', then 'warning' and lastly 'success'.\n /\nexport function getValidationState (formattedMessages) {\n if (!formattedMessages) {\n return null;\n }\n\n if (hasFormattedMessageOfType(formattedMessages, VALIDATION_MESSAGE_TYPES.ERROR)) {\n return VALIDATION_MESSAGE_TYPES.ERROR;\n }\n if (hasFormattedMessageOfType(formattedMessages, VALIDATION_MESSAGE_TYPES.WARNING)) {\n return VALIDATION_MESSAGE_TYPES.WARNING;\n }\n if (hasFormattedMessageOfType(formattedMessages, VALIDATION_MESSAGE_TYPES.SUCCESS)) {\n return VALIDATION_MESSAGE_TYPES.SUCCESS;\n }\n\n return null;\n}\n\nexport function hasFormattedMessageOfType (formattedMessages, messageType) {\n if (!formattedMessages \|\| !messageType) {\n return false;\n }\n\n return formattedMessages.some(message => message?.type === messageType);\n}\n\nexport function findFirstFocusableNode (element) {\n return element?.querySelector(FOCUSABLE_SELECTOR);\n}\n\n/ html-fragment component:\n * To render html without wrapping in another element as when using v-html.\n * props: html\n /\nexport const htmlFragment = (props) => {\n return h('div', { innerHTML: props.html });\n};\n\nexport const flushPromises = () => {\n return new Promise((resolve) => {\n scheduler(resolve);\n });\n};\n\n/\n It is very cumbersome to check if a slot is empty in vue 3. Copied this method from the following thread\n https://github.com/vuejs/core/issues/4733. There is an RFC to fix this but not yet being worked on.\n https://github.com/vuejs/rfcs/discussions/453\n/\nexport function hasSlotContent (slot, slotProps = {}) {\n if (!slot) return false;\n\n // eslint-disable-next-line complexity\n return slot(slotProps).some((vnode) => {\n if (vnode.type === Comment) return false;\n\n if (Array.isArray(vnode.children) && !vnode.children.length) return false;\n\n return (\n vnode.type !== Text \|\|\n (typeof vnode.children === 'string' && vnode.children.trim() !== '')\n );\n });\n}\n\n/\n Transform a string from kebab-case to PascalCase\n * @param string\n * @returns {string}\n /\nexport const kebabCaseToPascalCase = (string) => {\n return string?.toLowerCase()\n .split('-')\n .map(word => word.charAt(0).toUpperCase() + word.slice(1))\n .join('');\n};\n\n/\n Transform a string from PascalCase to kebab-case\n * @param string\n * @returns {string}\n /\nexport const pascalCaseToKebabCase = (string) => {\n return string\n .replace(/\\.?([A-Z0-9]+)/g, (x, y) => '-' + y.toLowerCase())\n .replace(/^-/, '');\n};\n\nexport const extractVueListeners = (attrs) => {\n const listeners = Object.entries(attrs)\n .filter(([key]) => key.startsWith('on'));\n return Object.fromEntries(listeners);\n};\n\n/\n* Set's a global timer to debounce the execution of a function.\n* @param { object } func - the function that is going to be called after timeout\n* @param { number } [timeout=300] timeout\n* /\nexport function debounce (func, timeout = 300) {\n clearTimeout(TIMER);\n TIMER = setTimeout(func, timeout);\n}\n\n/\n Checks if the element is out of the viewport\n * https://gomakethings.com/how-to-check-if-any-part-of-an-element-is-out-of-the-viewport-with-vanilla-js/\n * @param {HTMLElement} element The element to check\n * @return {Object} A set of booleans for each side of the element\n /\n\nexport function isOutOfViewPort (element) {\n const bounding = element.getBoundingClientRect();\n\n const isOut = {\n top: bounding.top < 0,\n left: bounding.left < 0,\n bottom: bounding.bottom > (window.innerHeight \|\| document.documentElement.clientHeight),\n right: bounding.right > (window.innerWidth \|\| document.documentElement.clientWidth),\n };\n isOut.any = Object.values(isOut).some(val => val);\n isOut.all = Object.values(isOut).every(val => val);\n return isOut;\n}\n\n// match valid characters for a domain name followed by a dot, e.g. \"dialpad.\"\nconst domainNameRegex = /(?:(?:[^\\s!@#$%^&()_=+[\\]{}\\\\\|;:'\",.<>/?]+)\\.)/;\n\n// match valid TLDs for a hostname (outdated list from ~2017)\nconst tldRegerx = new RegExp(\n '(?:' +\n 'com\|ru\|org\|net\|de\|jp\|uk\|br\|it\|pl\|fr\|in\|au\|ir\|info\|nl\|cn\|es\|cz\|kr\|ca\|eu\|ua\|co\|gr\|' +\n 'za\|ro\|biz\|ch\|se\|tw\|mx\|vn\|hu\|be\|tr\|at\|dk\|tv\|me\|ar\|sk\|no\|us\|fi\|id\|cl\|xyz\|io\|pt\|by\|' +\n 'il\|ie\|nz\|kz\|hk\|lt\|cc\|my\|sg\|club\|bg\|edu\|рф\|pk\|su\|top\|th\|hr\|rs\|pe\|pro\|si\|az\|lv\|pw\|' +\n 'ae\|ph\|online\|ng\|ee\|ws\|ve\|cat' +\n ')',\n);\n\n// match valid IPv4 addresses, e.g. \"192.158.1.38\"\nconst ipv4Regex = new RegExp(\n '(?:(?:[0-9]\|[1-9]\\\\d\|1\\\\d{2}\|2[0-4]\\\\d\|25[0-5])\\\\.){3}' +\n '(?:[0-9]\|[1-9]\\\\d\|1\\\\d{2}\|2[0-4]\\\\d\|25[0-5])',\n);\n\n// match hostnames OR IPv4 addresses, e.g. \"dialpad.com\" or \"192.158.1.38\"\nconst hostnameOrIpRegex = new RegExp(\n '(?:' +\n [\n [\n domainNameRegex.source,\n tldRegerx.source,\n ].join('+'),\n ipv4Regex.source,\n ].join('\|') +\n ')',\n);\n\n// match URL paths, e.g. \"/news\"\nconst urlPathRegex = /(?:(?:[;/][^#?<>\\s])?)/;\n\n// match URL queries and fragments, e.g. \"?cache=1&new=true\" or \"#heading1\"\nconst urlQueryOrFragmentRegex = /(?:(?:\\?[^#<>\\s]+)?(?:#[^<>\\s]+)?)/;\n\n// match complete hostnames or IPv4 addresses without a protocol and with optional\n// URL paths, queries and fragments e.g. \"dialpad.com/news?cache=1#heading1\"\nconst urlWithoutProtocolRegex = new RegExp(\n '\\\\b' +\n [\n hostnameOrIpRegex.source,\n urlPathRegex.source,\n urlQueryOrFragmentRegex.source,\n '(?!\\\\w)',\n ].join('+'),\n);\n\n// match complete hostnames with protocols and optional URL paths, queries and fragments,\n// e.g. \"ws://localhost:9011\" or \"https://dialpad.com/news?cache=1#heading1\"\nconst urlWithProtocolRegex = /\\b[a-z\\d.-]+:\\/\\/[^<>\\s]+/;\n\n// match email addresses with an optional \"mailto:\" prefix and URL queries, e.g.\n// \"hey@dialpad.com\" or \"mailto:hey@dialpad.com?subject=Hi&body=Hey%20there\"\nconst emailAddressRegex = new RegExp(\n '(?:mailto:)?' +\n '[a-z0-9!#$%&\\'+/=?^_`{\|}~-]+(?:\\\\.[a-z0-9!#$%&\\'+/=?^_`{\|}~-]+)@' +\n [\n hostnameOrIpRegex.source,\n urlQueryOrFragmentRegex.source,\n ].join('+') +\n '(?!\\\\w)',\n);\n\n/*\n Match phone numbers, e.g. \"765-8813\", \"(778) 765-8813\" or \"+17787658813\".\n * @param {number} minLength\n * @param {number} maxLength\n * @returns {RegExp}\n /\nexport function getPhoneNumberRegex (minLength = 7, maxLength = 15) {\n // Some older browser versions don't support lookbehind, so provide a RegExp\n // version without it. It fails just one test case, so IMO it's still good\n // enough to use. https://caniuse.com/js-regexp-lookbehind\n try {\n return new RegExp(\n '(?:^\|(?<=\\\\W))' +\n '(?![\\\\s\\\\-])\\\\+?(?:[0-9()\\\\- \\\\t]' +\n `{${minLength},${maxLength}}` +\n ')(?=\\\\b)(?=\\\\W(?=\\\\W\|$)\|\\\\s\|$)',\n );\n } catch (e) {\n // eslint-disable-next-line no-console\n console.warn('This browser doesn\\'t support regex lookahead/lookbehind');\n }\n\n return new RegExp(\n '(?![\\\\s\\\\-])\\\\+?(?:[0-9()\\\\- \\\\t]' +\n `{${minLength},${maxLength}}` +\n ')(?=\\\\b)(?=\\\\W(?=\\\\W\|$)\|\\\\s\|$)',\n );\n}\n\nconst phoneNumberRegex = getPhoneNumberRegex();\n\n// match all link types\nexport const linkRegex = new RegExp(\n [\n urlWithoutProtocolRegex.source,\n urlWithProtocolRegex.source,\n emailAddressRegex.source,\n phoneNumberRegex.source,\n ].join('\|'),\n 'gi',\n);\n\n/\n Check if a string is a phone number. Validates only exact matches.\n * @param {string\|number} input\n * @returns {boolean}\n /\nexport function isPhoneNumber (input) {\n if (!input \|\| (!['string', 'number'].includes(typeof input))) return false;\n input = input.toString();\n return phoneNumberRegex.exec(input)?.[0] === input;\n}\n\n/\n Check if a string is an URL. Validates only exact matches.\n * @param {string} input\n * @returns {boolean}\n /\nexport function isURL (input) {\n if (!input \|\| typeof input !== 'string') return false;\n return urlWithoutProtocolRegex.exec(input)?.[0] === input \|\|\n urlWithProtocolRegex.exec(input)?.[0] === input;\n}\n\n/\n Check if a string is an email address. Validates only exact matches.\n * @param {string} input\n * @returns {boolean}\n /\nexport function isEmailAddress (input) {\n if (!input \|\| typeof input !== 'string') return false;\n return emailAddressRegex.exec(input)?.[0] === input;\n}\n\n/\n Concatenate a string removing null or undefined elements\n * avoiding parsing them as string with template strings\n * @param {Array} elements\n * @returns {String}\n /\nexport function safeConcatStrings (elements) {\n return elements.filter(str => !!str).join(' ');\n}\n\n/\n Locale safe function to capitalize the first letter of a string.\n * @param {string} str the string to capitalize the first letter of\n * @param {string} locale a string representing the locale to be used. Defaults to 'en-US'\n * @returns The passed in string with the first letter capitalized\n */\nexport function capitalizeFirstLetter (str, locale = 'en-US') {\n return str.replace(/^\\p{CWU}/u, char => char.toLocaleUpperCase(locale));\n}\n\nexport default {\n getUniqueString,\n getRandomElement,\n getRandomInt,\n formatMessages,\n filterFormattedMessages,\n hasFormattedMessageOfType,\n getValidationState,\n htmlFragment,\n flushPromises,\n kebabCaseToPascalCase,\n extractVueListeners,\n debounce,\n isOutOfViewPort,\n getPhoneNumberRegex,\n linkRegex,\n isEmailAddress,\n isPhoneNumber,\n isURL,\n safeConcatStrings,\n capitalizeFirstLetter,\n};\n"],"names":["DEFAULT_PREFIX","DEFAULT_VALIDATION_MESSAGE_TYPE","VALIDATION_MESSAGE_TYPES","h","Comment","Text"],"mappings":"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"}
1	+ {"version":3,"file":"utils.cjs","sources":["../../common/utils/index.js"],"sourcesContent":["import {\n DEFAULT_PREFIX,\n DEFAULT_VALIDATION_MESSAGE_TYPE,\n VALIDATION_MESSAGE_TYPES,\n} from '../constants';\nimport {\n h,\n Comment,\n Text,\n} from 'vue';\n\nlet UNIQUE_ID_COUNTER = 0;\nlet TIMER;\n\n// selector to find focusable not hidden inputs\nconst FOCUSABLE_SELECTOR_NOT_HIDDEN = 'input:not([type=hidden]):not(:disabled)';\n// selector to find focusable not disables elements\nconst FOCUSABLE_SELECTOR_NOT_DISABLED = 'select:not(:disabled),textarea:not(:disabled),button:not(:disabled)';\n// // selector to find focusable not hidden and disabled elements\nconst FOCUSABLE_SELECTOR_NOT_HIDDEN_DISABLED = `${FOCUSABLE_SELECTOR_NOT_HIDDEN},${FOCUSABLE_SELECTOR_NOT_DISABLED}`;\n// selector to find focusable elements\nconst FOCUSABLE_SELECTOR = `a,frame,iframe,${FOCUSABLE_SELECTOR_NOT_HIDDEN_DISABLED},[tabindex]`;\n\nconst scheduler = typeof setImmediate === 'function' ? setImmediate : setTimeout;\n\nexport function getUniqueString (prefix = DEFAULT_PREFIX) {\n return `${prefix}${UNIQUE_ID_COUNTER++}`;\n}\n\n/\n Returns a random element from array\n * @param array - the array to return a random element from\n * @param {string} seed - use a string to seed the randomization, so it returns the same element each time\n * based on that string.\n * @returns {} - the random element\n /\nexport function getRandomElement (array, seed) {\n if (seed) {\n const hash = javaHashCode(seed);\n return array[Math.abs(hash) % array.length];\n } else {\n return array[getRandomInt(array.length)];\n }\n}\n\n/*\n Returns a hash code for a string.\n * (Compatible to Java's String.hashCode())\n * We use this algo to be in sync with android.\n \n The hash code for a string object is computed as\n * s[0]31^(n-1) + s[1]31^(n-2) + ... + s[n-1]\n * using number arithmetic, where s[i] is the i th character\n * of the given string, n is the length of the string,\n * and ^ indicates exponentiation.\n * (The hash value of the empty string is zero.)\n \n @param {string} str a string\n * @return {number} a hash code value for the given string.\n /\nexport function javaHashCode (str) {\n let h;\n for (let i = 0; i < str.length; i++) {\n h = Math.imul(31, h) + str.charCodeAt(i) \| 0;\n }\n\n return h;\n}\n\n/\n Generate a random integer\n * @param {number} max - max range of integer to generate\n * @returns {number} randomly generated integer between 0 and max\n /\nexport function getRandomInt (max) {\n return Math.floor(Math.random() max);\n}\n\nexport function formatMessages (messages) {\n if (!messages) {\n return [];\n }\n\n return messages.map(message => {\n if (typeof message === 'string') {\n return {\n message,\n type: DEFAULT_VALIDATION_MESSAGE_TYPE,\n };\n }\n\n return message;\n });\n}\n\nexport function filterFormattedMessages (formattedMessages) {\n const validationState = getValidationState(formattedMessages);\n\n if (!formattedMessages \|\| !validationState) {\n return [];\n }\n\n return formattedMessages.filter(message => !!message.message && message.type === validationState);\n}\n\n/\n The priority order of message types is as flows: 'error' > 'warning' > 'success'.\n * If any message of type 'error' is present in messages, the input state is considered\n * to be 'error', then 'warning' and lastly 'success'.\n /\nexport function getValidationState (formattedMessages) {\n if (!formattedMessages) {\n return null;\n }\n\n if (hasFormattedMessageOfType(formattedMessages, VALIDATION_MESSAGE_TYPES.ERROR)) {\n return VALIDATION_MESSAGE_TYPES.ERROR;\n }\n if (hasFormattedMessageOfType(formattedMessages, VALIDATION_MESSAGE_TYPES.WARNING)) {\n return VALIDATION_MESSAGE_TYPES.WARNING;\n }\n if (hasFormattedMessageOfType(formattedMessages, VALIDATION_MESSAGE_TYPES.SUCCESS)) {\n return VALIDATION_MESSAGE_TYPES.SUCCESS;\n }\n\n return null;\n}\n\nexport function hasFormattedMessageOfType (formattedMessages, messageType) {\n if (!formattedMessages \|\| !messageType) {\n return false;\n }\n\n return formattedMessages.some(message => message?.type === messageType);\n}\n\nexport function findFirstFocusableNode (element) {\n return element?.querySelector(FOCUSABLE_SELECTOR);\n}\n\n/ html-fragment component:\n * To render html without wrapping in another element as when using v-html.\n * props: html\n /\nexport const htmlFragment = (props) => {\n return h('div', { innerHTML: props.html });\n};\n\nexport const flushPromises = () => {\n return new Promise((resolve) => {\n scheduler(resolve);\n });\n};\n\n/\n It is very cumbersome to check if a slot is empty in vue 3. Copied this method from the following thread\n https://github.com/vuejs/core/issues/4733. There is an RFC to fix this but not yet being worked on.\n https://github.com/vuejs/rfcs/discussions/453\n/\nexport function hasSlotContent (slot, slotProps = {}) {\n if (!slot) return false;\n\n // eslint-disable-next-line complexity\n return slot(slotProps).some((vnode) => {\n if (vnode.type === Comment) return false;\n\n if (Array.isArray(vnode.children) && !vnode.children.length) return false;\n\n return (\n vnode.type !== Text \|\|\n (typeof vnode.children === 'string' && vnode.children.trim() !== '')\n );\n });\n}\n\n/\n Transform a string from kebab-case to PascalCase\n * @param string\n * @returns {string}\n /\nexport const kebabCaseToPascalCase = (string) => {\n return string?.toLowerCase()\n .split('-')\n .map(word => word.charAt(0).toUpperCase() + word.slice(1))\n .join('');\n};\n\n/\n Transform a string from PascalCase to kebab-case\n * @param string\n * @returns {string}\n /\nexport const pascalCaseToKebabCase = (string) => {\n return string\n .replace(/\\.?([A-Z0-9]+)/g, (x, y) => '-' + y.toLowerCase())\n .replace(/^-/, '');\n};\n\nexport const extractVueListeners = (attrs) => {\n const listeners = Object.entries(attrs)\n .filter(([key]) => key.startsWith('on'));\n return Object.fromEntries(listeners);\n};\n\n/\n* Set's a global timer to debounce the execution of a function.\n* @param { object } func - the function that is going to be called after timeout\n* @param { number } [timeout=300] timeout\n* /\nexport function debounce (func, timeout = 300) {\n clearTimeout(TIMER);\n TIMER = setTimeout(func, timeout);\n}\n\n/\n Checks if the element is out of the viewport\n * https://gomakethings.com/how-to-check-if-any-part-of-an-element-is-out-of-the-viewport-with-vanilla-js/\n * @param {HTMLElement} element The element to check\n * @return {Object} A set of booleans for each side of the element\n /\n\nexport function isOutOfViewPort (element) {\n const bounding = element.getBoundingClientRect();\n\n const isOut = {\n top: bounding.top < 0,\n left: bounding.left < 0,\n bottom: bounding.bottom > (window.innerHeight \|\| document.documentElement.clientHeight),\n right: bounding.right > (window.innerWidth \|\| document.documentElement.clientWidth),\n };\n isOut.any = Object.values(isOut).some(val => val);\n isOut.all = Object.values(isOut).every(val => val);\n return isOut;\n}\n\n// match valid characters for a domain name followed by a dot, e.g. \"dialpad.\"\nconst domainNameRegex = /(?:(?:[^\\s!@#$%^&()_=+[\\]{}\\\\\|;:'\",.<>/?]+)\\.)/;\n\n// match valid TLDs for a hostname (outdated list from ~2017)\nconst tldRegerx = new RegExp(\n '(?:' +\n 'com\|ru\|org\|net\|de\|jp\|uk\|br\|it\|pl\|fr\|in\|au\|ir\|info\|nl\|cn\|es\|cz\|kr\|ca\|eu\|ua\|co\|gr\|' +\n 'za\|ro\|biz\|ch\|se\|tw\|mx\|vn\|hu\|be\|tr\|at\|dk\|tv\|me\|ar\|sk\|no\|us\|fi\|id\|cl\|xyz\|io\|pt\|by\|' +\n 'il\|ie\|nz\|kz\|hk\|lt\|cc\|my\|sg\|club\|bg\|edu\|рф\|pk\|su\|top\|th\|hr\|rs\|pe\|pro\|si\|az\|lv\|pw\|' +\n 'ae\|ph\|online\|ng\|ee\|ws\|ve\|cat' +\n ')',\n);\n\n// match valid IPv4 addresses, e.g. \"192.158.1.38\"\nconst ipv4Regex = new RegExp(\n '(?:(?:[0-9]\|[1-9]\\\\d\|1\\\\d{2}\|2[0-4]\\\\d\|25[0-5])\\\\.){3}' +\n '(?:[0-9]\|[1-9]\\\\d\|1\\\\d{2}\|2[0-4]\\\\d\|25[0-5])',\n);\n\n// match hostnames OR IPv4 addresses, e.g. \"dialpad.com\" or \"192.158.1.38\"\nconst hostnameOrIpRegex = new RegExp(\n '(?:' +\n [\n [\n domainNameRegex.source,\n tldRegerx.source,\n ].join('+'),\n ipv4Regex.source,\n ].join('\|') +\n ')',\n);\n\n// match URL paths, e.g. \"/news\"\nconst urlPathRegex = /(?:(?:[;/][^#?<>\\s])?)/;\n\n// match URL queries and fragments, e.g. \"?cache=1&new=true\" or \"#heading1\"\nconst urlQueryOrFragmentRegex = /(?:(?:\\?[^#<>\\s]+)?(?:#[^<>\\s]+)?)/;\n\n// match complete hostnames or IPv4 addresses without a protocol and with optional\n// URL paths, queries and fragments e.g. \"dialpad.com/news?cache=1#heading1\"\nconst urlWithoutProtocolRegex = new RegExp(\n '\\\\b' +\n [\n hostnameOrIpRegex.source,\n urlPathRegex.source,\n urlQueryOrFragmentRegex.source,\n '(?!\\\\w)',\n ].join('+'),\n);\n\n// match complete hostnames with protocols and optional URL paths, queries and fragments,\n// e.g. \"ws://localhost:9011\" or \"https://dialpad.com/news?cache=1#heading1\"\nconst urlWithProtocolRegex = /\\b[a-z\\d.-]+:\\/\\/[^<>\\s]+/;\n\n// match email addresses with an optional \"mailto:\" prefix and URL queries, e.g.\n// \"hey@dialpad.com\" or \"mailto:hey@dialpad.com?subject=Hi&body=Hey%20there\"\nconst emailAddressRegex = new RegExp(\n '(?:mailto:)?' +\n '[a-z0-9!#$%&\\'+/=?^_`{\|}~-]+(?:\\\\.[a-z0-9!#$%&\\'+/=?^_`{\|}~-]+)@' +\n [\n hostnameOrIpRegex.source,\n urlQueryOrFragmentRegex.source,\n ].join('+') +\n '(?!\\\\w)',\n);\n\n/*\n Match phone numbers, e.g. \"765-8813\", \"(778) 765-8813\" or \"+17787658813\".\n * @param {number} minLength\n * @param {number} maxLength\n * @returns {RegExp}\n /\nexport function getPhoneNumberRegex (minLength = 7, maxLength = 15) {\n // Some older browser versions don't support lookbehind, so provide a RegExp\n // version without it. It fails just one test case, so IMO it's still good\n // enough to use. https://caniuse.com/js-regexp-lookbehind\n try {\n return new RegExp(\n '(?:^\|(?<=\\\\W))' +\n '(?![\\\\s\\\\-])\\\\+?(?:[0-9()\\\\- \\\\t]' +\n `{${minLength},${maxLength}}` +\n ')(?=\\\\b)(?=\\\\W(?=\\\\W\|$)\|\\\\s\|$)',\n );\n } catch (e) {\n // eslint-disable-next-line no-console\n console.warn('This browser doesn\\'t support regex lookahead/lookbehind');\n }\n\n return new RegExp(\n '(?![\\\\s\\\\-])\\\\+?(?:[0-9()\\\\- \\\\t]' +\n `{${minLength},${maxLength}}` +\n ')(?=\\\\b)(?=\\\\W(?=\\\\W\|$)\|\\\\s\|$)',\n );\n}\n\nconst phoneNumberRegex = getPhoneNumberRegex();\n\n// match all link types\nexport const linkRegex = new RegExp(\n [\n urlWithoutProtocolRegex.source,\n urlWithProtocolRegex.source,\n emailAddressRegex.source,\n phoneNumberRegex.source,\n ].join('\|'),\n 'gi',\n);\n\n/\n Check if a string is a phone number. Validates only exact matches.\n * @param {string\|number} input\n * @returns {boolean}\n /\nexport function isPhoneNumber (input) {\n if (!input \|\| (!['string', 'number'].includes(typeof input))) return false;\n input = input.toString();\n return phoneNumberRegex.exec(input)?.[0] === input;\n}\n\n/\n Check if a string is an URL. Validates only exact matches.\n * @param {string} input\n * @returns {boolean}\n /\nexport function isURL (input) {\n if (!input \|\| typeof input !== 'string') return false;\n return urlWithoutProtocolRegex.exec(input)?.[0] === input \|\|\n urlWithProtocolRegex.exec(input)?.[0] === input;\n}\n\n/\n Check if a string is an email address. Validates only exact matches.\n * @param {string} input\n * @returns {boolean}\n /\nexport function isEmailAddress (input) {\n if (!input \|\| typeof input !== 'string') return false;\n return emailAddressRegex.exec(input)?.[0] === input;\n}\n\n/\n Concatenate a string removing null or undefined elements\n * avoiding parsing them as string with template strings\n * @param {Array} elements\n * @returns {String}\n /\nexport function safeConcatStrings (elements) {\n return elements.filter(str => !!str).join(' ');\n}\n\n/\n Locale safe function to capitalize the first letter of a string.\n * @param {string} str the string to capitalize the first letter of\n * @param {string} locale a string representing the locale to be used. Defaults to 'en-US'\n * @returns The passed in string with the first letter capitalized\n /\nexport function capitalizeFirstLetter (str, locale = 'en-US') {\n return str.replace(/^\\p{CWU}/u, char => char.toLocaleUpperCase(locale));\n}\n\n/\n Warns if the component is not mounted properly. Useful for tests.\n * @param {HTMLElement} componentRef - the component reference\n * @param {string} componentName - the component name\n */\nexport function warnIfUnmounted (componentRef, componentName) {\n if (!componentRef \|\| !(componentRef instanceof HTMLElement) \|\| !document?.body) return;\n if (!document.body.contains(componentRef)) {\n console.warn(`The ${componentName} component is not attached to the document body. This may cause issues.`);\n }\n}\n\nexport default {\n getUniqueString,\n getRandomElement,\n getRandomInt,\n formatMessages,\n filterFormattedMessages,\n hasFormattedMessageOfType,\n getValidationState,\n htmlFragment,\n flushPromises,\n kebabCaseToPascalCase,\n extractVueListeners,\n debounce,\n isOutOfViewPort,\n getPhoneNumberRegex,\n linkRegex,\n isEmailAddress,\n isPhoneNumber,\n isURL,\n safeConcatStrings,\n capitalizeFirstLetter,\n};\n"],"names":["DEFAULT_PREFIX","DEFAULT_VALIDATION_MESSAGE_TYPE","VALIDATION_MESSAGE_TYPES","h","Comment","Text"],"mappings":"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"}

package/dist/vue3/common/utils.js CHANGED Viewed

@@ -192,6 +192,12 @@ function safeConcatStrings(elements) {
 function capitalizeFirstLetter(str, locale = "en-US") {
   return str.replace(new RegExp("^\\p{CWU}", "u"), (char) => char.toLocaleUpperCase(locale));
 }
+function warnIfUnmounted(componentRef, componentName) {
+  if (!componentRef || !(componentRef instanceof HTMLElement) || !(document == null ? void 0 : document.body)) return;
+  if (!document.body.contains(componentRef)) {
+    console.warn(`The ${componentName} component is not attached to the document body. This may cause issues.`);
+  }
+}
 const utils = {
   getUniqueString,
   getRandomElement,
@@ -239,6 +245,7 @@ export {
   kebabCaseToPascalCase,
   linkRegex,
   pascalCaseToKebabCase,
-  safeConcatStrings
+  safeConcatStrings,
+  warnIfUnmounted
 };
 //# sourceMappingURL=utils.js.map