@dialpad/dialtone-vue 2.201.0-next.1 → 2.201.0-next.3

package/dist/lib/mode-island/index.js

@@ -0,0 +1,7 @@
+import { default as r } from "./mode-island.js";
+import { DT_MODE_ISLAND_TYPES as D } from "./mode-island-constants.js";
+export {
+  D as DT_MODE_ISLAND_TYPES,
+  r as DtModeIsland
+};
+//# sourceMappingURL=index.js.map

package/dist/lib/mode-island/index.js.map

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

package/dist/lib/mode-island/mode-island-constants.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={INVERTED:"inverted",LIGHT:"light",DARK:"dark"},t={DT_MODE_ISLAND_TYPES:e};exports.DT_MODE_ISLAND_TYPES=e;exports.default=t;
+//# sourceMappingURL=mode-island-constants.cjs.map

package/dist/lib/mode-island/mode-island-constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mode-island-constants.cjs","sources":["../../../components/mode_island/mode_island_constants.js"],"sourcesContent":["export const DT_MODE_ISLAND_TYPES = {\n  INVERTED: 'inverted',\n  LIGHT: 'light',\n  DARK: 'dark',\n};\n\nexport default {\n  DT_MODE_ISLAND_TYPES,\n};"],"names":["DT_MODE_ISLAND_TYPES","mode_island_constants"],"mappings":"4GAAY,MAACA,EAAuB,CAClC,SAAU,WACV,MAAO,QACP,KAAM,MACR,EAEAC,EAAe,CACb,qBAAAD,CACF"}

package/dist/lib/mode-island/mode-island-constants.js

@@ -0,0 +1,12 @@
+const t = {
+  INVERTED: "inverted",
+  LIGHT: "light",
+  DARK: "dark"
+}, n = {
+  DT_MODE_ISLAND_TYPES: t
+};
+export {
+  t as DT_MODE_ISLAND_TYPES,
+  n as default
+};
+//# sourceMappingURL=mode-island-constants.js.map

package/dist/lib/mode-island/mode-island-constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mode-island-constants.js","sources":["../../../components/mode_island/mode_island_constants.js"],"sourcesContent":["export const DT_MODE_ISLAND_TYPES = {\n  INVERTED: 'inverted',\n  LIGHT: 'light',\n  DARK: 'dark',\n};\n\nexport default {\n  DT_MODE_ISLAND_TYPES,\n};"],"names":["DT_MODE_ISLAND_TYPES","mode_island_constants"],"mappings":"AAAY,MAACA,IAAuB;AAAA,EAClC,UAAU;AAAA,EACV,OAAO;AAAA,EACP,MAAM;AACR,GAEAC,IAAe;AAAA,EACb,sBAAAD;AACF;"}

package/dist/lib/mode-island/mode-island.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./mode-island-constants.cjs"),a=require("./validators.cjs"),r=require("./utils.cjs"),i=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),l={name:"DtModeIsland",provide(){return{dtModeIslandMode:()=>this.computedMode}},inject:{parentModeIslandMode:{from:"dtModeIslandMode",default:null}},inheritAttrs:!1,props:{as:{type:String,default:"div"},mode:{type:String,default:s.DT_MODE_ISLAND_TYPES.INVERTED,validator:a.modeValidator}},data(){return{currentContrast:r.getRootContrast(),contrastObserver:null,modeObserver:null,elementRef:null,calculatedMode:null}},computed:{isInverted(){return this.mode===s.DT_MODE_ISLAND_TYPES.INVERTED},invertedAttribute(){return this.isInverted?"":null},computedMode(){return this.mode===s.DT_MODE_ISLAND_TYPES.LIGHT||this.mode===s.DT_MODE_ISLAND_TYPES.DARK?this.mode:this.mode===s.DT_MODE_ISLAND_TYPES.INVERTED&&this.calculatedMode?this.calculatedMode:this.calculateInvertedMode()}},beforeCreate(){if(this.$attrs&&this.$attrs["data-dt-brand"])throw new Error("[DtModeIsland] The data-dt-brand attribute is not allowed on mode islands. Brand should only be set at the root level.")},mounted(){this.elementRef=this.$el,this.setupContrastObserver(),this.isInverted&&(this.calculatedMode=this.calculateInvertedMode(),this.setupModeObserver()),this.currentContrast=r.getRootContrast()},beforeDestroy(){this.contrastObserver&&(this.contrastObserver.disconnect(),this.contrastObserver=null),this.modeObserver&&(this.modeObserver.disconnect(),this.modeObserver=null)},methods:{calculateInvertedMode(){if(this.parentModeIslandMode){const t=typeof this.parentModeIslandMode=="function"?this.parentModeIslandMode():this.parentModeIslandMode;return r.getOppositeMode(t)}if(this.elementRef){const t=r.findParentMode(this.elementRef);return r.getOppositeMode(t)}return r.getOppositeMode(r.getRootMode())},setupContrastObserver(){this.contrastObserver=new MutationObserver(t=>{for(const e of t)e.type==="attributes"&&e.attributeName==="data-dt-contrast"&&(this.currentContrast=r.getRootContrast())}),this.contrastObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["data-dt-contrast"]})},setupModeObserver(){var o;const t={attributes:!0,attributeFilter:["data-dt-mode"],subtree:!1};this.modeObserver=new MutationObserver(n=>{for(const d of n)d.type==="attributes"&&d.attributeName==="data-dt-mode"&&(this.calculatedMode=this.calculateInvertedMode())}),this.modeObserver.observe(document.documentElement,t);let e=(o=this.elementRef)==null?void 0:o.parentElement;for(;e;)e.hasAttribute("data-dt-mode")&&this.modeObserver.observe(e,t),e=e.parentElement}}};var u=function(){var e=this,o=e._self._c;return o(e.as,e._b({tag:"component",staticClass:"d-mode-island",attrs:{"data-dt-mode":e.computedMode,"data-mode-island-inverted":e.invertedAttribute,"data-dt-contrast":e.currentContrast}},"component",e.$attrs,!1),[e._t("default")],2)},c=[],m=i.n(l,u,c);const h=m.exports;exports.default=h;
+//# sourceMappingURL=mode-island.cjs.map

package/dist/lib/mode-island/mode-island.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mode-island.cjs","sources":["../../../components/mode_island/mode_island.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    class=\"d-mode-island\"\n    v-bind=\"$attrs\"\n    :data-dt-mode=\"computedMode\"\n    :data-mode-island-inverted=\"invertedAttribute\"\n    :data-dt-contrast=\"currentContrast\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_MODE_ISLAND_TYPES } from './mode_island_constants';\nimport { modeValidator } from './validators';\nimport {\n  getOppositeMode,\n  getRootMode,\n  getRootContrast,\n  findParentMode,\n} from './utils';\n\nexport default {\n  name: 'DtModeIsland',\n\n  provide () {\n    return {\n      dtModeIslandMode: () => this.computedMode,\n    };\n  },\n\n  inject: {\n    parentModeIslandMode: {\n      from: 'dtModeIslandMode',\n      default: null,\n    },\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Set this prop to render the mode island as a specific HTML element.\n     * @type {String}\n     * @values div, section, nav, article, aside, header, footer, main\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The mode to apply to the island.\n     * - 'inverted': Opposite of parent or root mode\n     * - 'light': Always light mode\n     * - 'dark': Always dark mode\n     * @type {String}\n     * @values inverted, light, dark\n     */\n    mode: {\n      type: String,\n      default: DT_MODE_ISLAND_TYPES.INVERTED,\n      validator: modeValidator,\n    },\n  },\n\n  data () {\n    return {\n      currentContrast: getRootContrast(),\n      contrastObserver: null,\n      modeObserver: null,\n      elementRef: null,\n      calculatedMode: null, // Store calculated mode as reactive data\n    };\n  },\n\n  computed: {\n    isInverted () {\n      return this.mode === DT_MODE_ISLAND_TYPES.INVERTED;\n    },\n\n    invertedAttribute () {\n      return this.isInverted ? '' : null;\n    },\n\n    computedMode () {\n      // If mode is explicitly light or dark, use it directly\n      if (this.mode === DT_MODE_ISLAND_TYPES.LIGHT || this.mode === DT_MODE_ISLAND_TYPES.DARK) {\n        return this.mode;\n      }\n\n      // If mode is inverted, use the calculated mode if available\n      if (this.mode === DT_MODE_ISLAND_TYPES.INVERTED && this.calculatedMode) {\n        return this.calculatedMode;\n      }\n\n      // Otherwise calculate it now\n      return this.calculateInvertedMode();\n    },\n  },\n\n  beforeCreate () {\n    // Throw error if data-dt-brand is manually set\n    if (this.$attrs && this.$attrs['data-dt-brand']) {\n      throw new Error('[DtModeIsland] The data-dt-brand attribute is not allowed on mode islands. Brand should only be set at the root level.');\n    }\n  },\n\n  mounted () {\n    // Store element reference\n    this.elementRef = this.$el;\n\n    // Setup MutationObserver to watch for contrast changes on root\n    this.setupContrastObserver();\n\n    // Setup MutationObserver to watch for mode changes (only if inverted)\n    if (this.isInverted) {\n      // Initialize the calculated mode\n      this.calculatedMode = this.calculateInvertedMode();\n      this.setupModeObserver();\n    }\n\n    // Initial contrast value\n    this.currentContrast = getRootContrast();\n  },\n\n  beforeDestroy () {\n    // Cleanup observers\n    if (this.contrastObserver) {\n      this.contrastObserver.disconnect();\n      this.contrastObserver = null;\n    }\n    if (this.modeObserver) {\n      this.modeObserver.disconnect();\n      this.modeObserver = null;\n    }\n  },\n\n  methods: {\n    calculateInvertedMode () {\n      // First check if there's a parent mode island\n      if (this.parentModeIslandMode) {\n        const parentMode = typeof this.parentModeIslandMode === 'function'\n          ? this.parentModeIslandMode()\n          : this.parentModeIslandMode;\n        return getOppositeMode(parentMode);\n      }\n\n      // Otherwise, find the nearest parent with data-dt-mode\n      if (this.elementRef) {\n        const parentMode = findParentMode(this.elementRef);\n        return getOppositeMode(parentMode);\n      }\n\n      // Default fallback\n      return getOppositeMode(getRootMode());\n    },\n\n    setupContrastObserver () {\n      this.contrastObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-contrast') {\n            this.currentContrast = getRootContrast();\n          }\n        }\n      });\n\n      this.contrastObserver.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['data-dt-contrast'],\n      });\n    },\n\n    setupModeObserver () {\n      const config = {\n        attributes: true,\n        attributeFilter: ['data-dt-mode'],\n        subtree: false,\n      };\n\n      this.modeObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-mode') {\n            // Recalculate and update the reactive data property\n            this.calculatedMode = this.calculateInvertedMode();\n          }\n        }\n      });\n\n      // Observe root element\n      this.modeObserver.observe(document.documentElement, config);\n\n      // Also observe all parent elements with data-dt-mode\n      let parent = this.elementRef?.parentElement;\n      while (parent) {\n        if (parent.hasAttribute('data-dt-mode')) {\n          this.modeObserver.observe(parent, config);\n        }\n        parent = parent.parentElement;\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DT_MODE_ISLAND_TYPES","modeValidator","getRootContrast","parentMode","getOppositeMode","findParentMode","getRootMode","mutationsList","mutation","config","parent","_a"],"mappings":"0QAwBAA,EAAA,CACA,KAAA,eAEA,SAAA,CACA,MAAA,CACA,iBAAA,IAAA,KAAA,YACA,CACA,EAEA,OAAA,CACA,qBAAA,CACA,KAAA,mBACA,QAAA,IACA,CACA,EAEA,aAAA,GAEA,MAAA,CAMA,GAAA,CACA,KAAA,OACA,QAAA,KACA,EAUA,KAAA,CACA,KAAA,OACA,QAAAC,EAAAA,qBAAA,SACA,UAAAC,EAAAA,aACA,CACA,EAEA,MAAA,CACA,MAAA,CACA,gBAAAC,EAAAA,gBAAA,EACA,iBAAA,KACA,aAAA,KACA,WAAA,KACA,eAAA,IACA,CACA,EAEA,SAAA,CACA,YAAA,CACA,OAAA,KAAA,OAAAF,EAAAA,qBAAA,QACA,EAEA,mBAAA,CACA,OAAA,KAAA,WAAA,GAAA,IACA,EAEA,cAAA,CAEA,OAAA,KAAA,OAAAA,uBAAA,OAAA,KAAA,OAAAA,EAAAA,qBAAA,KACA,KAAA,KAIA,KAAA,OAAAA,EAAAA,qBAAA,UAAA,KAAA,eACA,KAAA,eAIA,KAAA,sBAAA,CACA,CACA,EAEA,cAAA,CAEA,GAAA,KAAA,QAAA,KAAA,OAAA,eAAA,EACA,MAAA,IAAA,MAAA,wHAAA,CAEA,EAEA,SAAA,CAEA,KAAA,WAAA,KAAA,IAGA,KAAA,sBAAA,EAGA,KAAA,aAEA,KAAA,eAAA,KAAA,sBAAA,EACA,KAAA,kBAAA,GAIA,KAAA,gBAAAE,kBAAA,CACA,EAEA,eAAA,CAEA,KAAA,mBACA,KAAA,iBAAA,WAAA,EACA,KAAA,iBAAA,MAEA,KAAA,eACA,KAAA,aAAA,WAAA,EACA,KAAA,aAAA,KAEA,EAEA,QAAA,CACA,uBAAA,CAEA,GAAA,KAAA,qBAAA,CACA,MAAAC,EAAA,OAAA,KAAA,sBAAA,WACA,KAAA,qBAAA,EACA,KAAA,qBACA,OAAAC,EAAAA,gBAAAD,CAAA,CACA,CAGA,GAAA,KAAA,WAAA,CACA,MAAAA,EAAAE,EAAAA,eAAA,KAAA,UAAA,EACA,OAAAD,EAAAA,gBAAAD,CAAA,CACA,CAGA,OAAAC,EAAAA,gBAAAE,EAAAA,aAAA,CACA,EAEA,uBAAA,CACA,KAAA,iBAAA,IAAA,iBAAAC,GAAA,CACA,UAAAC,KAAAD,EACAC,EAAA,OAAA,cAAAA,EAAA,gBAAA,qBACA,KAAA,gBAAAN,kBAAA,EAGA,CAAA,EAEA,KAAA,iBAAA,QAAA,SAAA,gBAAA,CACA,WAAA,GACA,gBAAA,CAAA,kBAAA,CACA,CAAA,CACA,EAEA,mBAAA,OACA,MAAAO,EAAA,CACA,WAAA,GACA,gBAAA,CAAA,cAAA,EACA,QAAA,EACA,EAEA,KAAA,aAAA,IAAA,iBAAAF,GAAA,CACA,UAAAC,KAAAD,EACAC,EAAA,OAAA,cAAAA,EAAA,gBAAA,iBAEA,KAAA,eAAA,KAAA,sBAAA,EAGA,CAAA,EAGA,KAAA,aAAA,QAAA,SAAA,gBAAAC,CAAA,EAGA,IAAAC,GAAAC,EAAA,KAAA,aAAA,YAAAA,EAAA,cACA,KAAAD,GACAA,EAAA,aAAA,cAAA,GACA,KAAA,aAAA,QAAAA,EAAAD,CAAA,EAEAC,EAAAA,EAAA,aAEA,CACA,CACA"}

package/dist/lib/mode-island/mode-island.js

@@ -0,0 +1,124 @@
+import { DT_MODE_ISLAND_TYPES as r } from "./mode-island-constants.js";
+import { modeValidator as i } from "./validators.js";
+import { getRootContrast as s, getOppositeMode as d, findParentMode as l, getRootMode as u } from "./utils.js";
+import { n as c } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+const m = {
+  name: "DtModeIsland",
+  provide() {
+    return {
+      dtModeIslandMode: () => this.computedMode
+    };
+  },
+  inject: {
+    parentModeIslandMode: {
+      from: "dtModeIslandMode",
+      default: null
+    }
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Set this prop to render the mode island as a specific HTML element.
+     * @type {String}
+     * @values div, section, nav, article, aside, header, footer, main
+     */
+    as: {
+      type: String,
+      default: "div"
+    },
+    /**
+     * The mode to apply to the island.
+     * - 'inverted': Opposite of parent or root mode
+     * - 'light': Always light mode
+     * - 'dark': Always dark mode
+     * @type {String}
+     * @values inverted, light, dark
+     */
+    mode: {
+      type: String,
+      default: r.INVERTED,
+      validator: i
+    }
+  },
+  data() {
+    return {
+      currentContrast: s(),
+      contrastObserver: null,
+      modeObserver: null,
+      elementRef: null,
+      calculatedMode: null
+      // Store calculated mode as reactive data
+    };
+  },
+  computed: {
+    isInverted() {
+      return this.mode === r.INVERTED;
+    },
+    invertedAttribute() {
+      return this.isInverted ? "" : null;
+    },
+    computedMode() {
+      return this.mode === r.LIGHT || this.mode === r.DARK ? this.mode : this.mode === r.INVERTED && this.calculatedMode ? this.calculatedMode : this.calculateInvertedMode();
+    }
+  },
+  beforeCreate() {
+    if (this.$attrs && this.$attrs["data-dt-brand"])
+      throw new Error("[DtModeIsland] The data-dt-brand attribute is not allowed on mode islands. Brand should only be set at the root level.");
+  },
+  mounted() {
+    this.elementRef = this.$el, this.setupContrastObserver(), this.isInverted && (this.calculatedMode = this.calculateInvertedMode(), this.setupModeObserver()), this.currentContrast = s();
+  },
+  beforeDestroy() {
+    this.contrastObserver && (this.contrastObserver.disconnect(), this.contrastObserver = null), this.modeObserver && (this.modeObserver.disconnect(), this.modeObserver = null);
+  },
+  methods: {
+    calculateInvertedMode() {
+      if (this.parentModeIslandMode) {
+        const e = typeof this.parentModeIslandMode == "function" ? this.parentModeIslandMode() : this.parentModeIslandMode;
+        return d(e);
+      }
+      if (this.elementRef) {
+        const e = l(this.elementRef);
+        return d(e);
+      }
+      return d(u());
+    },
+    setupContrastObserver() {
+      this.contrastObserver = new MutationObserver((e) => {
+        for (const t of e)
+          t.type === "attributes" && t.attributeName === "data-dt-contrast" && (this.currentContrast = s());
+      }), this.contrastObserver.observe(document.documentElement, {
+        attributes: !0,
+        attributeFilter: ["data-dt-contrast"]
+      });
+    },
+    setupModeObserver() {
+      var o;
+      const e = {
+        attributes: !0,
+        attributeFilter: ["data-dt-mode"],
+        subtree: !1
+      };
+      this.modeObserver = new MutationObserver((a) => {
+        for (const n of a)
+          n.type === "attributes" && n.attributeName === "data-dt-mode" && (this.calculatedMode = this.calculateInvertedMode());
+      }), this.modeObserver.observe(document.documentElement, e);
+      let t = (o = this.elementRef) == null ? void 0 : o.parentElement;
+      for (; t; )
+        t.hasAttribute("data-dt-mode") && this.modeObserver.observe(t, e), t = t.parentElement;
+    }
+  }
+};
+var h = function() {
+  var t = this, o = t._self._c;
+  return o(t.as, t._b({ tag: "component", staticClass: "d-mode-island", attrs: { "data-dt-mode": t.computedMode, "data-mode-island-inverted": t.invertedAttribute, "data-dt-contrast": t.currentContrast } }, "component", t.$attrs, !1), [t._t("default")], 2);
+}, f = [], b = /* @__PURE__ */ c(
+  m,
+  h,
+  f
+);
+const O = b.exports;
+export {
+  O as default
+};
+//# sourceMappingURL=mode-island.js.map

package/dist/lib/mode-island/mode-island.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mode-island.js","sources":["../../../components/mode_island/mode_island.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    class=\"d-mode-island\"\n    v-bind=\"$attrs\"\n    :data-dt-mode=\"computedMode\"\n    :data-mode-island-inverted=\"invertedAttribute\"\n    :data-dt-contrast=\"currentContrast\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_MODE_ISLAND_TYPES } from './mode_island_constants';\nimport { modeValidator } from './validators';\nimport {\n  getOppositeMode,\n  getRootMode,\n  getRootContrast,\n  findParentMode,\n} from './utils';\n\nexport default {\n  name: 'DtModeIsland',\n\n  provide () {\n    return {\n      dtModeIslandMode: () => this.computedMode,\n    };\n  },\n\n  inject: {\n    parentModeIslandMode: {\n      from: 'dtModeIslandMode',\n      default: null,\n    },\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Set this prop to render the mode island as a specific HTML element.\n     * @type {String}\n     * @values div, section, nav, article, aside, header, footer, main\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The mode to apply to the island.\n     * - 'inverted': Opposite of parent or root mode\n     * - 'light': Always light mode\n     * - 'dark': Always dark mode\n     * @type {String}\n     * @values inverted, light, dark\n     */\n    mode: {\n      type: String,\n      default: DT_MODE_ISLAND_TYPES.INVERTED,\n      validator: modeValidator,\n    },\n  },\n\n  data () {\n    return {\n      currentContrast: getRootContrast(),\n      contrastObserver: null,\n      modeObserver: null,\n      elementRef: null,\n      calculatedMode: null, // Store calculated mode as reactive data\n    };\n  },\n\n  computed: {\n    isInverted () {\n      return this.mode === DT_MODE_ISLAND_TYPES.INVERTED;\n    },\n\n    invertedAttribute () {\n      return this.isInverted ? '' : null;\n    },\n\n    computedMode () {\n      // If mode is explicitly light or dark, use it directly\n      if (this.mode === DT_MODE_ISLAND_TYPES.LIGHT || this.mode === DT_MODE_ISLAND_TYPES.DARK) {\n        return this.mode;\n      }\n\n      // If mode is inverted, use the calculated mode if available\n      if (this.mode === DT_MODE_ISLAND_TYPES.INVERTED && this.calculatedMode) {\n        return this.calculatedMode;\n      }\n\n      // Otherwise calculate it now\n      return this.calculateInvertedMode();\n    },\n  },\n\n  beforeCreate () {\n    // Throw error if data-dt-brand is manually set\n    if (this.$attrs && this.$attrs['data-dt-brand']) {\n      throw new Error('[DtModeIsland] The data-dt-brand attribute is not allowed on mode islands. Brand should only be set at the root level.');\n    }\n  },\n\n  mounted () {\n    // Store element reference\n    this.elementRef = this.$el;\n\n    // Setup MutationObserver to watch for contrast changes on root\n    this.setupContrastObserver();\n\n    // Setup MutationObserver to watch for mode changes (only if inverted)\n    if (this.isInverted) {\n      // Initialize the calculated mode\n      this.calculatedMode = this.calculateInvertedMode();\n      this.setupModeObserver();\n    }\n\n    // Initial contrast value\n    this.currentContrast = getRootContrast();\n  },\n\n  beforeDestroy () {\n    // Cleanup observers\n    if (this.contrastObserver) {\n      this.contrastObserver.disconnect();\n      this.contrastObserver = null;\n    }\n    if (this.modeObserver) {\n      this.modeObserver.disconnect();\n      this.modeObserver = null;\n    }\n  },\n\n  methods: {\n    calculateInvertedMode () {\n      // First check if there's a parent mode island\n      if (this.parentModeIslandMode) {\n        const parentMode = typeof this.parentModeIslandMode === 'function'\n          ? this.parentModeIslandMode()\n          : this.parentModeIslandMode;\n        return getOppositeMode(parentMode);\n      }\n\n      // Otherwise, find the nearest parent with data-dt-mode\n      if (this.elementRef) {\n        const parentMode = findParentMode(this.elementRef);\n        return getOppositeMode(parentMode);\n      }\n\n      // Default fallback\n      return getOppositeMode(getRootMode());\n    },\n\n    setupContrastObserver () {\n      this.contrastObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-contrast') {\n            this.currentContrast = getRootContrast();\n          }\n        }\n      });\n\n      this.contrastObserver.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['data-dt-contrast'],\n      });\n    },\n\n    setupModeObserver () {\n      const config = {\n        attributes: true,\n        attributeFilter: ['data-dt-mode'],\n        subtree: false,\n      };\n\n      this.modeObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-mode') {\n            // Recalculate and update the reactive data property\n            this.calculatedMode = this.calculateInvertedMode();\n          }\n        }\n      });\n\n      // Observe root element\n      this.modeObserver.observe(document.documentElement, config);\n\n      // Also observe all parent elements with data-dt-mode\n      let parent = this.elementRef?.parentElement;\n      while (parent) {\n        if (parent.hasAttribute('data-dt-mode')) {\n          this.modeObserver.observe(parent, config);\n        }\n        parent = parent.parentElement;\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DT_MODE_ISLAND_TYPES","modeValidator","getRootContrast","parentMode","getOppositeMode","findParentMode","getRootMode","mutationsList","mutation","config","parent","_a"],"mappings":"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"}

package/dist/lib/mode-island/utils.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});function n(t){return t==="light"?"dark":"light"}function o(){return document.documentElement.getAttribute("data-dt-mode")||"light"}function r(){return document.documentElement.getAttribute("data-dt-contrast")||"default"}function d(t){let e=t==null?void 0:t.parentElement;for(;e&&e!==document.documentElement;){if(e.hasAttribute("data-dt-mode"))return e.getAttribute("data-dt-mode");e=e.parentElement}return o()}const u={getOppositeMode:n,getRootMode:o,getRootContrast:r,findParentMode:d};exports.default=u;exports.findParentMode=d;exports.getOppositeMode=n;exports.getRootContrast=r;exports.getRootMode=o;
+//# sourceMappingURL=utils.cjs.map

package/dist/lib/mode-island/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs","sources":["../../../components/mode_island/utils.js"],"sourcesContent":["/**\n * Get the opposite mode (light <-> dark)\n * @param {string} currentMode - The current mode\n * @returns {string} The opposite mode\n */\nexport function getOppositeMode (currentMode) {\n  return currentMode === 'light' ? 'dark' : 'light';\n}\n\n/**\n * Get the mode from the root HTML element\n * @returns {string} The root mode or 'light' as default\n */\nexport function getRootMode () {\n  const rootMode = document.documentElement.getAttribute('data-dt-mode');\n  return rootMode || 'light';\n}\n\n/**\n * Get the contrast from the root HTML element\n * @returns {string} The root contrast or 'default' as default\n */\nexport function getRootContrast () {\n  const rootContrast = document.documentElement.getAttribute('data-dt-contrast');\n  return rootContrast || 'default';\n}\n\n/**\n * Find the mode from the nearest parent element with data-dt-mode attribute\n * @param {HTMLElement} el - The starting element\n * @returns {string} The parent mode or root mode\n */\nexport function findParentMode (el) {\n  let parent = el?.parentElement;\n  while (parent && parent !== document.documentElement) {\n    if (parent.hasAttribute('data-dt-mode')) {\n      return parent.getAttribute('data-dt-mode');\n    }\n    parent = parent.parentElement;\n  }\n  return getRootMode();\n}\n\nexport default {\n  getOppositeMode,\n  getRootMode,\n  getRootContrast,\n  findParentMode,\n};"],"names":["getOppositeMode","currentMode","getRootMode","getRootContrast","findParentMode","el","parent","utils"],"mappings":"4GAKO,SAASA,EAAiBC,EAAa,CAC5C,OAAOA,IAAgB,QAAU,OAAS,OAC5C,CAMO,SAASC,GAAe,CAE7B,OADiB,SAAS,gBAAgB,aAAa,cAAc,GAClD,OACrB,CAMO,SAASC,GAAmB,CAEjC,OADqB,SAAS,gBAAgB,aAAa,kBAAkB,GACtD,SACzB,CAOO,SAASC,EAAgBC,EAAI,CAClC,IAAIC,EAASD,GAAA,YAAAA,EAAI,cACjB,KAAOC,GAAUA,IAAW,SAAS,iBAAiB,CACpD,GAAIA,EAAO,aAAa,cAAc,EACpC,OAAOA,EAAO,aAAa,cAAc,EAE3CA,EAASA,EAAO,aAClB,CACA,OAAOJ,EAAW,CACpB,CAEA,MAAAK,EAAe,CACb,gBAAAP,EACA,YAAAE,EACA,gBAAAC,EACA,eAAAC,CACF"}

package/dist/lib/mode-island/utils.js

@@ -0,0 +1,32 @@
+function n(t) {
+  return t === "light" ? "dark" : "light";
+}
+function o() {
+  return document.documentElement.getAttribute("data-dt-mode") || "light";
+}
+function r() {
+  return document.documentElement.getAttribute("data-dt-contrast") || "default";
+}
+function d(t) {
+  let e = t == null ? void 0 : t.parentElement;
+  for (; e && e !== document.documentElement; ) {
+    if (e.hasAttribute("data-dt-mode"))
+      return e.getAttribute("data-dt-mode");
+    e = e.parentElement;
+  }
+  return o();
+}
+const u = {
+  getOppositeMode: n,
+  getRootMode: o,
+  getRootContrast: r,
+  findParentMode: d
+};
+export {
+  u as default,
+  d as findParentMode,
+  n as getOppositeMode,
+  r as getRootContrast,
+  o as getRootMode
+};
+//# sourceMappingURL=utils.js.map

package/dist/lib/mode-island/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../components/mode_island/utils.js"],"sourcesContent":["/**\n * Get the opposite mode (light <-> dark)\n * @param {string} currentMode - The current mode\n * @returns {string} The opposite mode\n */\nexport function getOppositeMode (currentMode) {\n  return currentMode === 'light' ? 'dark' : 'light';\n}\n\n/**\n * Get the mode from the root HTML element\n * @returns {string} The root mode or 'light' as default\n */\nexport function getRootMode () {\n  const rootMode = document.documentElement.getAttribute('data-dt-mode');\n  return rootMode || 'light';\n}\n\n/**\n * Get the contrast from the root HTML element\n * @returns {string} The root contrast or 'default' as default\n */\nexport function getRootContrast () {\n  const rootContrast = document.documentElement.getAttribute('data-dt-contrast');\n  return rootContrast || 'default';\n}\n\n/**\n * Find the mode from the nearest parent element with data-dt-mode attribute\n * @param {HTMLElement} el - The starting element\n * @returns {string} The parent mode or root mode\n */\nexport function findParentMode (el) {\n  let parent = el?.parentElement;\n  while (parent && parent !== document.documentElement) {\n    if (parent.hasAttribute('data-dt-mode')) {\n      return parent.getAttribute('data-dt-mode');\n    }\n    parent = parent.parentElement;\n  }\n  return getRootMode();\n}\n\nexport default {\n  getOppositeMode,\n  getRootMode,\n  getRootContrast,\n  findParentMode,\n};"],"names":["getOppositeMode","currentMode","getRootMode","getRootContrast","findParentMode","el","parent","utils"],"mappings":"AAKO,SAASA,EAAiBC,GAAa;AAC5C,SAAOA,MAAgB,UAAU,SAAS;AAC5C;AAMO,SAASC,IAAe;AAE7B,SADiB,SAAS,gBAAgB,aAAa,cAAc,KAClD;AACrB;AAMO,SAASC,IAAmB;AAEjC,SADqB,SAAS,gBAAgB,aAAa,kBAAkB,KACtD;AACzB;AAOO,SAASC,EAAgBC,GAAI;AAClC,MAAIC,IAASD,KAAA,gBAAAA,EAAI;AACjB,SAAOC,KAAUA,MAAW,SAAS,mBAAiB;AACpD,QAAIA,EAAO,aAAa,cAAc;AACpC,aAAOA,EAAO,aAAa,cAAc;AAE3C,IAAAA,IAASA,EAAO;AAAA,EAClB;AACA,SAAOJ,EAAW;AACpB;AAEA,MAAAK,IAAe;AAAA,EACb,iBAAAP;AAAA,EACA,aAAAE;AAAA,EACA,iBAAAC;AAAA,EACA,gBAAAC;AACF;"}

package/dist/lib/mode-island/validators.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("./mode-island-constants.cjs");function e(t){return Object.values(o.DT_MODE_ISLAND_TYPES).includes(t)}const a={modeValidator:e};exports.default=a;exports.modeValidator=e;
+//# sourceMappingURL=validators.cjs.map

package/dist/lib/mode-island/validators.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"validators.cjs","sources":["../../../components/mode_island/validators.js"],"sourcesContent":["import { DT_MODE_ISLAND_TYPES } from './mode_island_constants';\n\nexport function modeValidator (mode) {\n  return Object.values(DT_MODE_ISLAND_TYPES).includes(mode);\n}\n\nexport default {\n  modeValidator,\n};"],"names":["modeValidator","mode","DT_MODE_ISLAND_TYPES","validators"],"mappings":"2JAEO,SAASA,EAAeC,EAAM,CACnC,OAAO,OAAO,OAAOC,EAAAA,oBAAoB,EAAE,SAASD,CAAI,CAC1D,CAEA,MAAAE,EAAe,CACb,cAAAH,CACF"}

package/dist/lib/mode-island/validators.js

@@ -0,0 +1,12 @@
+import { DT_MODE_ISLAND_TYPES as o } from "./mode-island-constants.js";
+function a(t) {
+  return Object.values(o).includes(t);
+}
+const r = {
+  modeValidator: a
+};
+export {
+  r as default,
+  a as modeValidator
+};
+//# sourceMappingURL=validators.js.map

package/dist/lib/mode-island/validators.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validators.js","sources":["../../../components/mode_island/validators.js"],"sourcesContent":["import { DT_MODE_ISLAND_TYPES } from './mode_island_constants';\n\nexport function modeValidator (mode) {\n  return Object.values(DT_MODE_ISLAND_TYPES).includes(mode);\n}\n\nexport default {\n  modeValidator,\n};"],"names":["modeValidator","mode","DT_MODE_ISLAND_TYPES","validators"],"mappings":";AAEO,SAASA,EAAeC,GAAM;AACnC,SAAO,OAAO,OAAOC,CAAoB,EAAE,SAASD,CAAI;AAC1D;AAEA,MAAAE,IAAe;AAAA,EACb,eAAAH;AACF;"}

package/dist/lib/pagination/pagination.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@dialpad/dialtone-icons/vue2"),u=require("../../localization/index.cjs"),l=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),g=require("../button/button.cjs"),h={name:"DtPagination",components:{DtButton:g.default,DtIconChevronLeft:o.DtIconChevronLeft,DtIconChevronRight:o.DtIconChevronRight,DtIconMoreHorizontal:o.DtIconMoreHorizontal},props:{ariaLabel:{type:String,required:!0},totalPages:{type:Number,required:!0},activePage:{type:Number,default:1},maxVisible:{type:Number,default:5},hideEdges:{type:Boolean,default:!1}},emits:["change"],data(){return{currentPage:this.activePage,i18n:new u.DialtoneLocalization}},computed:{isFirstPage(){return this.currentPage===1},isLastPage(){return this.currentPage===this.totalPages},pages(){if(this.maxVisible===0)return[];if(this.totalPages<=this.maxVisible)return this.range(1,this.totalPages);let e=this.maxVisible-1,t=this.totalPages-e+1;if(this.hideEdges&&(e=e+1,t=t-1),this.currentPage<e){const n=[...this.range(1,e),"..."];return this.hideEdges||n.push(this.totalPages),n}if(this.currentPage>t){const n=["...",...this.range(t,this.totalPages)];return this.hideEdges||n.unshift(1),n}const i=this.maxVisible-(3-this.maxVisible%2),a=Math.floor(i/2);let r=this.currentPage-a,s=this.currentPage+a;this.hideEdges&&(r=r-1,s=s+1);const c=["...",...this.range(r,s),"..."];return this.hideEdges?c:[1,...c,this.totalPages]},prevAriaLabel(){return this.isFirstPage?this.i18n.$t("DIALTONE_PAGINATION_FIRST_PAGE"):this.i18n.$t("DIALTONE_PAGINATION_PREVIOUS_PAGE")},nextAriaLabel(){return this.isLastPage?this.i18n.$t("DIALTONE_PAGINATION_LAST_PAGE"):this.i18n.$t("DIALTONE_PAGINATION_NEXT_PAGE")},pageNumberAriaLabel(){return e=>e===this.totalPages?`${this.i18n.$t("DIALTONE_PAGINATION_LAST_PAGE")} ${e}`:`${this.i18n.$t("DIALTONE_PAGINATION_PAGE_NUMBER",{page:e})}`}},watch:{activePage(){this.currentPage=this.activePage},totalPages(e){(this.currentPage>e||this.currentPage<=0)&&(this.currentPage=e)}},methods:{range(e,t){const i=[];e=e>0?e:1;for(let a=e;a<=t;a++)i.push(a);return i},changePage(e){this.currentPage=e,this.$emit("change",this.currentPage)}}};var d=function(){var t=this,i=t._self._c;return i("nav",{directives:[{name:"show",rawName:"v-show",value:t.totalPages>0,expression:"totalPages > 0"}],staticClass:"d-pagination",attrs:{"aria-label":t.ariaLabel}},[i("dt-button",{staticClass:"d-pagination__button",attrs:{"data-qa":"dt-pagination-prev","aria-label":t.prevAriaLabel,kind:"muted",importance:"clear",disabled:t.isFirstPage},on:{click:function(a){return t.changePage(t.currentPage-1)}},scopedSlots:t._u([{key:"icon",fn:function(){return[i("dt-icon-chevron-left",{attrs:{size:"300"}})]},proxy:!0}])}),t._l(t.pages,function(a,r){return i("div",{key:`page-${a}-${r}`,class:{"d-pagination__separator":isNaN(Number(a))}},[isNaN(Number(a))?i("div",{staticClass:"d-pagination__separator-icon",attrs:{"data-qa":"dt-pagination-separator"}},[i("dt-icon-more-horizontal",{attrs:{size:"300"}})],1):i("dt-button",{attrs:{"aria-label":t.pageNumberAriaLabel(a),kind:t.currentPage===a?"default":"muted",importance:t.currentPage===a?"primary":"clear","label-class":""},on:{click:function(s){return t.changePage(a)}}},[t._v(" "+t._s(a)+" ")])],1)}),i("dt-button",{staticClass:"d-pagination__button",attrs:{"data-qa":"dt-pagination-next","aria-label":t.nextAriaLabel,disabled:t.isLastPage,kind:"muted",importance:"clear"},on:{click:function(a){return t.changePage(t.currentPage+1)}},scopedSlots:t._u([{key:"icon",fn:function(){return[i("dt-icon-chevron-right",{attrs:{size:"300"}})]},proxy:!0}])})],2)},P=[],_=l.n(h,d,P);const b=_.exports;exports.default=b;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@dialpad/dialtone-icons/vue2"),u=require("../../localization/index.cjs"),l=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),g=require("../button/button.cjs"),h={name:"DtPagination",components:{DtButton:g.default,DtIconChevronLeft:o.DtIconChevronLeft,DtIconChevronRight:o.DtIconChevronRight,DtIconMoreHorizontal:o.DtIconMoreHorizontal},props:{ariaLabel:{type:String,required:!0},totalPages:{type:Number,required:!0},activePage:{type:Number,default:1},maxVisible:{type:Number,default:5},hideEdges:{type:Boolean,default:!1}},emits:["change"],data(){return{currentPage:this.activePage,i18n:new u.DialtoneLocalization}},computed:{isFirstPage(){return this.currentPage===1},isLastPage(){return this.currentPage===this.totalPages},pages(){if(this.maxVisible===0)return[];if(this.totalPages<=this.maxVisible)return this.range(1,this.totalPages);let e=this.maxVisible-1,t=this.totalPages-e+1;if(this.hideEdges&&(e=e+1,t=t-1),this.currentPage<e){const n=[...this.range(1,e),"..."];return this.hideEdges||n.push(this.totalPages),n}if(this.currentPage>t){const n=["...",...this.range(t,this.totalPages)];return this.hideEdges||n.unshift(1),n}const i=this.maxVisible-(3-this.maxVisible%2),a=Math.floor(i/2);let r=this.currentPage-a,s=this.currentPage+a;this.hideEdges&&(r=r-1,s=s+1);const c=["...",...this.range(r,s),"..."];return this.hideEdges?c:[1,...c,this.totalPages]},prevAriaLabel(){return this.isFirstPage?this.i18n.$t("DIALTONE_PAGINATION_FIRST_PAGE"):this.i18n.$t("DIALTONE_PAGINATION_PREVIOUS_PAGE")},nextAriaLabel(){return this.isLastPage?this.i18n.$t("DIALTONE_PAGINATION_LAST_PAGE"):this.i18n.$t("DIALTONE_PAGINATION_NEXT_PAGE")},pageNumberAriaLabel(){return e=>e===this.totalPages?`${this.i18n.$t("DIALTONE_PAGINATION_LAST_PAGE")} ${e}`:`${this.i18n.$t("DIALTONE_PAGINATION_PAGE_NUMBER",{page:e})}`}},watch:{activePage(){this.currentPage=this.activePage},totalPages(e){(this.currentPage>e||this.currentPage<=0)&&(this.currentPage=e)}},methods:{range(e,t){const i=[];e=e>0?e:1;for(let a=e;a<=t;a++)i.push(a);return i},changePage(e){this.currentPage=e,this.$emit("change",this.currentPage)}}};var d=function(){var t=this,i=t._self._c;return i("nav",{directives:[{name:"show",rawName:"v-show",value:t.totalPages>0,expression:"totalPages > 0"}],staticClass:"d-pagination",attrs:{"aria-label":t.ariaLabel}},[i("dt-button",{staticClass:"d-pagination__button",attrs:{"data-qa":"dt-pagination-prev","aria-label":t.prevAriaLabel,kind:"muted",importance:"clear",disabled:t.isFirstPage},on:{click:function(a){return t.changePage(t.currentPage-1)}},scopedSlots:t._u([{key:"icon",fn:function(){return[i("dt-icon-chevron-left",{attrs:{size:"300"}})]},proxy:!0}])}),t._l(t.pages,function(a,r){return i("div",{key:`page-${a}-${r}`,class:{"d-pagination__separator":isNaN(Number(a))}},[isNaN(Number(a))?i("div",{staticClass:"d-pagination__separator-icon",attrs:{"data-qa":"dt-pagination-separator"}},[i("dt-icon-more-horizontal",{attrs:{size:"300"}})],1):i("dt-button",{staticClass:"d-pagination__item",attrs:{"aria-label":t.pageNumberAriaLabel(a),kind:t.currentPage===a?"default":"muted",importance:t.currentPage===a?"primary":"clear","label-class":"d-pagination__item-label"},on:{click:function(s){return t.changePage(a)}}},[t._v(" "+t._s(a)+" ")])],1)}),i("dt-button",{staticClass:"d-pagination__button",attrs:{"data-qa":"dt-pagination-next","aria-label":t.nextAriaLabel,disabled:t.isLastPage,kind:"muted",importance:"clear"},on:{click:function(a){return t.changePage(t.currentPage+1)}},scopedSlots:t._u([{key:"icon",fn:function(){return[i("dt-icon-chevron-right",{attrs:{size:"300"}})]},proxy:!0}])})],2)},P=[],_=l.n(h,d,P);const b=_.exports;exports.default=b;
 //# sourceMappingURL=pagination.cjs.map

package/dist/lib/pagination/pagination.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.cjs","sources":["../../../components/pagination/pagination.vue"],"sourcesContent":["<template>\n  <nav\n    v-show=\"totalPages > 0\"\n    :aria-label=\"ariaLabel\"\n    class=\"d-pagination\"\n  >\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-prev\"\n      :aria-label=\"prevAriaLabel\"\n      kind=\"muted\"\n      importance=\"clear\"\n      :disabled=\"isFirstPage\"\n      @click=\"changePage(currentPage - 1)\"\n    >\n      <template #icon>\n        <dt-icon-chevron-left\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n    <div\n      v-for=\"(page, index) in pages\"\n      :key=\"`page-${page}-${index}`\"\n      :class=\"{ 'd-pagination__separator': isNaN(Number(page)) }\"\n    >\n      <!-- eslint-disable vue/no-bare-strings-in-template -->\n      <div\n        v-if=\"isNaN(Number(page))\"\n        class=\"d-pagination__separator-icon\"\n        data-qa=\"dt-pagination-separator\"\n      >\n        <dt-icon-more-horizontal\n          size=\"300\"\n        />\n        <!-- … -->\n      </div>\n      <dt-button\n        v-else\n        :aria-label=\"pageNumberAriaLabel(page)\"\n        :kind=\"currentPage === page ? 'default' : 'muted'\"\n        :importance=\"currentPage === page ? 'primary' : 'clear'\"\n        label-class=\"\"\n        @click=\"changePage(page)\"\n      >\n        {{ page }}\n      </dt-button>\n    </div>\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-next\"\n      :aria-label=\"nextAriaLabel\"\n      :disabled=\"isLastPage\"\n      kind=\"muted\"\n      importance=\"clear\"\n      @click=\"changePage(currentPage + 1)\"\n    >\n      <template #icon>\n        <dt-icon-chevron-right\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </nav>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconChevronLeft, DtIconChevronRight, DtIconMoreHorizontal } from '@dialpad/dialtone-icons/vue2';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.\n * @see https://dialtone.dialpad.com/components/pagination.html\n */\nexport default {\n  name: 'DtPagination',\n\n  components: {\n    DtButton,\n    DtIconChevronLeft,\n    DtIconChevronRight,\n    DtIconMoreHorizontal,\n  },\n\n  props: {\n    /**\n     * Descriptive label for the pagination content.\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The total number of the pages\n     */\n    totalPages: {\n      type: Number,\n      required: true,\n    },\n\n    /**\n     * The active current page in the list of pages, defaults to the first page\n     */\n    activePage: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Determines the max pages to be shown in the list. Using an odd number is recommended.\n     * If an even number is given, then it will be rounded down to the nearest odd number to always\n     * keep current page in the middle when current page is in the mid-range.\n     */\n    maxVisible: {\n      type: Number,\n      default: 5,\n    },\n\n    /**\n     * Sometimes you may need to hide start and end page number buttons when moving in between.\n     * This prop will be used to hide the first and last page buttons when not near the edges.\n     * This is useful when your backend does not support offset and you can only use cursor based pagination.\n     */\n    hideEdges: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Page change event\n     *\n     * @event change\n     * @type {Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      currentPage: this.activePage,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    isFirstPage () {\n      return this.currentPage === 1;\n    },\n\n    isLastPage () {\n      return this.currentPage === this.totalPages;\n    },\n\n    // eslint-disable-next-line complexity\n    pages () {\n      if (this.maxVisible === 0) {\n        return [];\n      }\n      if (this.totalPages <= this.maxVisible) {\n        return this.range(1, this.totalPages);\n      }\n\n      let start = this.maxVisible - 1;\n      let end = this.totalPages - start + 1;\n\n      // if hideEdges is true, modify the start and\n      // end to account for the hidden pages\n      if (this.hideEdges) {\n        start = start + 1;\n        end = end - 1;\n      }\n\n      if (this.currentPage < start) {\n        const pages = [...this.range(1, start), '...'];\n        if (!this.hideEdges) {\n          // add last page to the end\n          pages.push(this.totalPages);\n        }\n        return pages;\n      }\n\n      if (this.currentPage > end) {\n        const pages = ['...', ...this.range(end, this.totalPages)];\n        if (!this.hideEdges) {\n          // add first page to the beginning\n          pages.unshift(1);\n        }\n        return pages;\n      }\n\n      // rounding to the nearest odd according to the maxlength to always show the page number in the middle.\n      const total = this.maxVisible - (3 - this.maxVisible % 2);\n      const centerIndex = Math.floor(total / 2);\n      let left = this.currentPage - centerIndex;\n      let right = this.currentPage + centerIndex;\n\n      // if hideEdge is true, modify the left and right to account for the hidden pages\n      if (this.hideEdges) {\n        left = left - 1;\n        right = right + 1;\n      }\n\n      const pages = ['...', ...this.range(left, right), '...'];\n      if (!this.hideEdges) {\n        return [1, ...pages, this.totalPages];\n      }\n      return pages;\n    },\n\n    prevAriaLabel () {\n      return this.isFirstPage ? this.i18n.$t('DIALTONE_PAGINATION_FIRST_PAGE') : this.i18n.$t('DIALTONE_PAGINATION_PREVIOUS_PAGE');\n    },\n\n    nextAriaLabel () {\n      return this.isLastPage ? this.i18n.$t('DIALTONE_PAGINATION_LAST_PAGE') : this.i18n.$t('DIALTONE_PAGINATION_NEXT_PAGE');\n    },\n\n    pageNumberAriaLabel () {\n      return (page) => {\n        return page === this.totalPages ? `${this.i18n.$t('DIALTONE_PAGINATION_LAST_PAGE')} ${page}` : `${this.i18n.$t('DIALTONE_PAGINATION_PAGE_NUMBER', { page })}`;\n      };\n    },\n  },\n\n  watch: {\n    activePage () {\n      this.currentPage = this.activePage;\n    },\n\n    totalPages (pages) {\n      if (this.currentPage > pages || this.currentPage <= 0){\n        this.currentPage = pages;\n      }\n    },\n  },\n\n  methods: {\n    range (from, to) {\n      const range = [];\n      from = from > 0 ? from : 1;\n      for (let i = from; i <= to; i++) {\n        range.push(i);\n      }\n      return range;\n    },\n\n    changePage (page) {\n      this.currentPage = page;\n      this.$emit('change', this.currentPage);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconChevronLeft","DtIconChevronRight","DtIconMoreHorizontal","DialtoneLocalization","start","end","pages","total","centerIndex","left","right","page","from","to","range","i"],"mappings":"gSA2EAA,EAAA,CACA,KAAA,eAEA,WAAA,CACA,SAAAC,EAAAA,QACA,kBAAAC,EAAAA,kBACA,mBAAAC,EAAAA,mBACA,qBAAAC,EAAAA,oBACA,EAEA,MAAA,CAIA,UAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,WAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,WAAA,CACA,KAAA,OACA,QAAA,CACA,EAOA,WAAA,CACA,KAAA,OACA,QAAA,CACA,EAOA,UAAA,CACA,KAAA,QACA,QAAA,EACA,CACA,EAEA,MAAA,CAOA,QACA,EAEA,MAAA,CACA,MAAA,CACA,YAAA,KAAA,WACA,KAAA,IAAAC,EAAAA,oBACA,CACA,EAEA,SAAA,CACA,aAAA,CACA,OAAA,KAAA,cAAA,CACA,EAEA,YAAA,CACA,OAAA,KAAA,cAAA,KAAA,UACA,EAGA,OAAA,CACA,GAAA,KAAA,aAAA,EACA,MAAA,CAAA,EAEA,GAAA,KAAA,YAAA,KAAA,WACA,OAAA,KAAA,MAAA,EAAA,KAAA,UAAA,EAGA,IAAAC,EAAA,KAAA,WAAA,EACAC,EAAA,KAAA,WAAAD,EAAA,EASA,GALA,KAAA,YACAA,EAAAA,EAAA,EACAC,EAAAA,EAAA,GAGA,KAAA,YAAAD,EAAA,CACA,MAAAE,EAAA,CAAA,GAAA,KAAA,MAAA,EAAAF,CAAA,EAAA,KAAA,EACA,OAAA,KAAA,WAEAE,EAAA,KAAA,KAAA,UAAA,EAEAA,CACA,CAEA,GAAA,KAAA,YAAAD,EAAA,CACA,MAAAC,EAAA,CAAA,MAAA,GAAA,KAAA,MAAAD,EAAA,KAAA,UAAA,CAAA,EACA,OAAA,KAAA,WAEAC,EAAA,QAAA,CAAA,EAEAA,CACA,CAGA,MAAAC,EAAA,KAAA,YAAA,EAAA,KAAA,WAAA,GACAC,EAAA,KAAA,MAAAD,EAAA,CAAA,EACA,IAAAE,EAAA,KAAA,YAAAD,EACAE,EAAA,KAAA,YAAAF,EAGA,KAAA,YACAC,EAAAA,EAAA,EACAC,EAAAA,EAAA,GAGA,MAAAJ,EAAA,CAAA,MAAA,GAAA,KAAA,MAAAG,EAAAC,CAAA,EAAA,KAAA,EACA,OAAA,KAAA,UAGAJ,EAFA,CAAA,EAAA,GAAAA,EAAA,KAAA,UAAA,CAGA,EAEA,eAAA,CACA,OAAA,KAAA,YAAA,KAAA,KAAA,GAAA,gCAAA,EAAA,KAAA,KAAA,GAAA,mCAAA,CACA,EAEA,eAAA,CACA,OAAA,KAAA,WAAA,KAAA,KAAA,GAAA,+BAAA,EAAA,KAAA,KAAA,GAAA,+BAAA,CACA,EAEA,qBAAA,CACA,OAAAK,GACAA,IAAA,KAAA,WAAA,GAAA,KAAA,KAAA,GAAA,+BAAA,CAAA,IAAAA,CAAA,GAAA,GAAA,KAAA,KAAA,GAAA,kCAAA,CAAA,KAAAA,CAAA,CAAA,CAAA,EAEA,CACA,EAEA,MAAA,CACA,YAAA,CACA,KAAA,YAAA,KAAA,UACA,EAEA,WAAAL,EAAA,EACA,KAAA,YAAAA,GAAA,KAAA,aAAA,KACA,KAAA,YAAAA,EAEA,CACA,EAEA,QAAA,CACA,MAAAM,EAAAC,EAAA,CACA,MAAAC,EAAA,CAAA,EACAF,EAAAA,EAAA,EAAAA,EAAA,EACA,QAAAG,EAAAH,EAAAG,GAAAF,EAAAE,IACAD,EAAA,KAAAC,CAAA,EAEA,OAAAD,CACA,EAEA,WAAAH,EAAA,CACA,KAAA,YAAAA,EACA,KAAA,MAAA,SAAA,KAAA,WAAA,CACA,CACA,CACA"}
+{"version":3,"file":"pagination.cjs","sources":["../../../components/pagination/pagination.vue"],"sourcesContent":["<template>\n  <nav\n    v-show=\"totalPages > 0\"\n    :aria-label=\"ariaLabel\"\n    class=\"d-pagination\"\n  >\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-prev\"\n      :aria-label=\"prevAriaLabel\"\n      kind=\"muted\"\n      importance=\"clear\"\n      :disabled=\"isFirstPage\"\n      @click=\"changePage(currentPage - 1)\"\n    >\n      <template #icon>\n        <dt-icon-chevron-left\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n    <div\n      v-for=\"(page, index) in pages\"\n      :key=\"`page-${page}-${index}`\"\n      :class=\"{ 'd-pagination__separator': isNaN(Number(page)) }\"\n    >\n      <!-- eslint-disable vue/no-bare-strings-in-template -->\n      <div\n        v-if=\"isNaN(Number(page))\"\n        class=\"d-pagination__separator-icon\"\n        data-qa=\"dt-pagination-separator\"\n      >\n        <dt-icon-more-horizontal\n          size=\"300\"\n        />\n        <!-- … -->\n      </div>\n      <dt-button\n        v-else\n        class=\"d-pagination__item\"\n        :aria-label=\"pageNumberAriaLabel(page)\"\n        :kind=\"currentPage === page ? 'default' : 'muted'\"\n        :importance=\"currentPage === page ? 'primary' : 'clear'\"\n        label-class=\"d-pagination__item-label\"\n        @click=\"changePage(page)\"\n      >\n        {{ page }}\n      </dt-button>\n    </div>\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-next\"\n      :aria-label=\"nextAriaLabel\"\n      :disabled=\"isLastPage\"\n      kind=\"muted\"\n      importance=\"clear\"\n      @click=\"changePage(currentPage + 1)\"\n    >\n      <template #icon>\n        <dt-icon-chevron-right\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </nav>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconChevronLeft, DtIconChevronRight, DtIconMoreHorizontal } from '@dialpad/dialtone-icons/vue2';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.\n * @see https://dialtone.dialpad.com/components/pagination.html\n */\nexport default {\n  name: 'DtPagination',\n\n  components: {\n    DtButton,\n    DtIconChevronLeft,\n    DtIconChevronRight,\n    DtIconMoreHorizontal,\n  },\n\n  props: {\n    /**\n     * Descriptive label for the pagination content.\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The total number of the pages\n     */\n    totalPages: {\n      type: Number,\n      required: true,\n    },\n\n    /**\n     * The active current page in the list of pages, defaults to the first page\n     */\n    activePage: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Determines the max pages to be shown in the list. Using an odd number is recommended.\n     * If an even number is given, then it will be rounded down to the nearest odd number to always\n     * keep current page in the middle when current page is in the mid-range.\n     */\n    maxVisible: {\n      type: Number,\n      default: 5,\n    },\n\n    /**\n     * Sometimes you may need to hide start and end page number buttons when moving in between.\n     * This prop will be used to hide the first and last page buttons when not near the edges.\n     * This is useful when your backend does not support offset and you can only use cursor based pagination.\n     */\n    hideEdges: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Page change event\n     *\n     * @event change\n     * @type {Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      currentPage: this.activePage,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    isFirstPage () {\n      return this.currentPage === 1;\n    },\n\n    isLastPage () {\n      return this.currentPage === this.totalPages;\n    },\n\n    // eslint-disable-next-line complexity\n    pages () {\n      if (this.maxVisible === 0) {\n        return [];\n      }\n      if (this.totalPages <= this.maxVisible) {\n        return this.range(1, this.totalPages);\n      }\n\n      let start = this.maxVisible - 1;\n      let end = this.totalPages - start + 1;\n\n      // if hideEdges is true, modify the start and\n      // end to account for the hidden pages\n      if (this.hideEdges) {\n        start = start + 1;\n        end = end - 1;\n      }\n\n      if (this.currentPage < start) {\n        const pages = [...this.range(1, start), '...'];\n        if (!this.hideEdges) {\n          // add last page to the end\n          pages.push(this.totalPages);\n        }\n        return pages;\n      }\n\n      if (this.currentPage > end) {\n        const pages = ['...', ...this.range(end, this.totalPages)];\n        if (!this.hideEdges) {\n          // add first page to the beginning\n          pages.unshift(1);\n        }\n        return pages;\n      }\n\n      // rounding to the nearest odd according to the maxlength to always show the page number in the middle.\n      const total = this.maxVisible - (3 - this.maxVisible % 2);\n      const centerIndex = Math.floor(total / 2);\n      let left = this.currentPage - centerIndex;\n      let right = this.currentPage + centerIndex;\n\n      // if hideEdge is true, modify the left and right to account for the hidden pages\n      if (this.hideEdges) {\n        left = left - 1;\n        right = right + 1;\n      }\n\n      const pages = ['...', ...this.range(left, right), '...'];\n      if (!this.hideEdges) {\n        return [1, ...pages, this.totalPages];\n      }\n      return pages;\n    },\n\n    prevAriaLabel () {\n      return this.isFirstPage ? this.i18n.$t('DIALTONE_PAGINATION_FIRST_PAGE') : this.i18n.$t('DIALTONE_PAGINATION_PREVIOUS_PAGE');\n    },\n\n    nextAriaLabel () {\n      return this.isLastPage ? this.i18n.$t('DIALTONE_PAGINATION_LAST_PAGE') : this.i18n.$t('DIALTONE_PAGINATION_NEXT_PAGE');\n    },\n\n    pageNumberAriaLabel () {\n      return (page) => {\n        return page === this.totalPages ? `${this.i18n.$t('DIALTONE_PAGINATION_LAST_PAGE')} ${page}` : `${this.i18n.$t('DIALTONE_PAGINATION_PAGE_NUMBER', { page })}`;\n      };\n    },\n  },\n\n  watch: {\n    activePage () {\n      this.currentPage = this.activePage;\n    },\n\n    totalPages (pages) {\n      if (this.currentPage > pages || this.currentPage <= 0){\n        this.currentPage = pages;\n      }\n    },\n  },\n\n  methods: {\n    range (from, to) {\n      const range = [];\n      from = from > 0 ? from : 1;\n      for (let i = from; i <= to; i++) {\n        range.push(i);\n      }\n      return range;\n    },\n\n    changePage (page) {\n      this.currentPage = page;\n      this.$emit('change', this.currentPage);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconChevronLeft","DtIconChevronRight","DtIconMoreHorizontal","DialtoneLocalization","start","end","pages","total","centerIndex","left","right","page","from","to","range","i"],"mappings":"gSA4EAA,EAAA,CACA,KAAA,eAEA,WAAA,CACA,SAAAC,EAAAA,QACA,kBAAAC,EAAAA,kBACA,mBAAAC,EAAAA,mBACA,qBAAAC,EAAAA,oBACA,EAEA,MAAA,CAIA,UAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,WAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,WAAA,CACA,KAAA,OACA,QAAA,CACA,EAOA,WAAA,CACA,KAAA,OACA,QAAA,CACA,EAOA,UAAA,CACA,KAAA,QACA,QAAA,EACA,CACA,EAEA,MAAA,CAOA,QACA,EAEA,MAAA,CACA,MAAA,CACA,YAAA,KAAA,WACA,KAAA,IAAAC,EAAAA,oBACA,CACA,EAEA,SAAA,CACA,aAAA,CACA,OAAA,KAAA,cAAA,CACA,EAEA,YAAA,CACA,OAAA,KAAA,cAAA,KAAA,UACA,EAGA,OAAA,CACA,GAAA,KAAA,aAAA,EACA,MAAA,CAAA,EAEA,GAAA,KAAA,YAAA,KAAA,WACA,OAAA,KAAA,MAAA,EAAA,KAAA,UAAA,EAGA,IAAAC,EAAA,KAAA,WAAA,EACAC,EAAA,KAAA,WAAAD,EAAA,EASA,GALA,KAAA,YACAA,EAAAA,EAAA,EACAC,EAAAA,EAAA,GAGA,KAAA,YAAAD,EAAA,CACA,MAAAE,EAAA,CAAA,GAAA,KAAA,MAAA,EAAAF,CAAA,EAAA,KAAA,EACA,OAAA,KAAA,WAEAE,EAAA,KAAA,KAAA,UAAA,EAEAA,CACA,CAEA,GAAA,KAAA,YAAAD,EAAA,CACA,MAAAC,EAAA,CAAA,MAAA,GAAA,KAAA,MAAAD,EAAA,KAAA,UAAA,CAAA,EACA,OAAA,KAAA,WAEAC,EAAA,QAAA,CAAA,EAEAA,CACA,CAGA,MAAAC,EAAA,KAAA,YAAA,EAAA,KAAA,WAAA,GACAC,EAAA,KAAA,MAAAD,EAAA,CAAA,EACA,IAAAE,EAAA,KAAA,YAAAD,EACAE,EAAA,KAAA,YAAAF,EAGA,KAAA,YACAC,EAAAA,EAAA,EACAC,EAAAA,EAAA,GAGA,MAAAJ,EAAA,CAAA,MAAA,GAAA,KAAA,MAAAG,EAAAC,CAAA,EAAA,KAAA,EACA,OAAA,KAAA,UAGAJ,EAFA,CAAA,EAAA,GAAAA,EAAA,KAAA,UAAA,CAGA,EAEA,eAAA,CACA,OAAA,KAAA,YAAA,KAAA,KAAA,GAAA,gCAAA,EAAA,KAAA,KAAA,GAAA,mCAAA,CACA,EAEA,eAAA,CACA,OAAA,KAAA,WAAA,KAAA,KAAA,GAAA,+BAAA,EAAA,KAAA,KAAA,GAAA,+BAAA,CACA,EAEA,qBAAA,CACA,OAAAK,GACAA,IAAA,KAAA,WAAA,GAAA,KAAA,KAAA,GAAA,+BAAA,CAAA,IAAAA,CAAA,GAAA,GAAA,KAAA,KAAA,GAAA,kCAAA,CAAA,KAAAA,CAAA,CAAA,CAAA,EAEA,CACA,EAEA,MAAA,CACA,YAAA,CACA,KAAA,YAAA,KAAA,UACA,EAEA,WAAAL,EAAA,EACA,KAAA,YAAAA,GAAA,KAAA,aAAA,KACA,KAAA,YAAAA,EAEA,CACA,EAEA,QAAA,CACA,MAAAM,EAAAC,EAAA,CACA,MAAAC,EAAA,CAAA,EACAF,EAAAA,EAAA,EAAAA,EAAA,EACA,QAAAG,EAAAH,EAAAG,GAAAF,EAAAE,IACAD,EAAA,KAAAC,CAAA,EAEA,OAAAD,CACA,EAEA,WAAAH,EAAA,CACA,KAAA,YAAAA,EACA,KAAA,MAAA,SAAA,KAAA,WAAA,CACA,CACA,CACA"}

package/dist/lib/pagination/pagination.js

@@ -1,13 +1,13 @@
-import { DtIconMoreHorizontal as c, DtIconChevronRight as u, DtIconChevronLeft as l } from "@dialpad/dialtone-icons/vue2";
-import { DialtoneLocalization as h } from "../../localization/index.js";
-import { n as g } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import { DtIconMoreHorizontal as c, DtIconChevronRight as l, DtIconChevronLeft as u } from "@dialpad/dialtone-icons/vue2";
+import { DialtoneLocalization as g } from "../../localization/index.js";
+import { n as h } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
 import d from "../button/button.js";
 const P = {
   name: "DtPagination",
   components: {
     DtButton: d,
-    DtIconChevronLeft: l,
-    DtIconChevronRight: u,
+    DtIconChevronLeft: u,
+    DtIconChevronRight: l,
     DtIconMoreHorizontal: c
   },
   props: {
@@ -63,7 +63,7 @@ const P = {
   data() {
     return {
       currentPage: this.activePage,
-      i18n: new h()
+      i18n: new g()
     };
   },
   computed: {
@@ -132,7 +132,7 @@ var _ = function() {
   } }, scopedSlots: t._u([{ key: "icon", fn: function() {
     return [i("dt-icon-chevron-left", { attrs: { size: "300" } })];
   }, proxy: !0 }]) }), t._l(t.pages, function(a, r) {
-    return i("div", { key: `page-${a}-${r}`, class: { "d-pagination__separator": isNaN(Number(a)) } }, [isNaN(Number(a)) ? i("div", { staticClass: "d-pagination__separator-icon", attrs: { "data-qa": "dt-pagination-separator" } }, [i("dt-icon-more-horizontal", { attrs: { size: "300" } })], 1) : i("dt-button", { attrs: { "aria-label": t.pageNumberAriaLabel(a), kind: t.currentPage === a ? "default" : "muted", importance: t.currentPage === a ? "primary" : "clear", "label-class": "" }, on: { click: function(s) {
+    return i("div", { key: `page-${a}-${r}`, class: { "d-pagination__separator": isNaN(Number(a)) } }, [isNaN(Number(a)) ? i("div", { staticClass: "d-pagination__separator-icon", attrs: { "data-qa": "dt-pagination-separator" } }, [i("dt-icon-more-horizontal", { attrs: { size: "300" } })], 1) : i("dt-button", { staticClass: "d-pagination__item", attrs: { "aria-label": t.pageNumberAriaLabel(a), kind: t.currentPage === a ? "default" : "muted", importance: t.currentPage === a ? "primary" : "clear", "label-class": "d-pagination__item-label" }, on: { click: function(s) {
       return t.changePage(a);
     } } }, [t._v(" " + t._s(a) + " ")])], 1);
   }), i("dt-button", { staticClass: "d-pagination__button", attrs: { "data-qa": "dt-pagination-next", "aria-label": t.nextAriaLabel, disabled: t.isLastPage, kind: "muted", importance: "clear" }, on: { click: function(a) {
@@ -140,7 +140,7 @@ var _ = function() {
   } }, scopedSlots: t._u([{ key: "icon", fn: function() {
     return [i("dt-icon-chevron-right", { attrs: { size: "300" } })];
   }, proxy: !0 }]) })], 2);
-}, p = [], m = /* @__PURE__ */ g(
+}, p = [], m = /* @__PURE__ */ h(
   P,
   _,
   p

package/dist/lib/pagination/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sources":["../../../components/pagination/pagination.vue"],"sourcesContent":["<template>\n  <nav\n    v-show=\"totalPages > 0\"\n    :aria-label=\"ariaLabel\"\n    class=\"d-pagination\"\n  >\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-prev\"\n      :aria-label=\"prevAriaLabel\"\n      kind=\"muted\"\n      importance=\"clear\"\n      :disabled=\"isFirstPage\"\n      @click=\"changePage(currentPage - 1)\"\n    >\n      <template #icon>\n        <dt-icon-chevron-left\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n    <div\n      v-for=\"(page, index) in pages\"\n      :key=\"`page-${page}-${index}`\"\n      :class=\"{ 'd-pagination__separator': isNaN(Number(page)) }\"\n    >\n      <!-- eslint-disable vue/no-bare-strings-in-template -->\n      <div\n        v-if=\"isNaN(Number(page))\"\n        class=\"d-pagination__separator-icon\"\n        data-qa=\"dt-pagination-separator\"\n      >\n        <dt-icon-more-horizontal\n          size=\"300\"\n        />\n        <!-- … -->\n      </div>\n      <dt-button\n        v-else\n        :aria-label=\"pageNumberAriaLabel(page)\"\n        :kind=\"currentPage === page ? 'default' : 'muted'\"\n        :importance=\"currentPage === page ? 'primary' : 'clear'\"\n        label-class=\"\"\n        @click=\"changePage(page)\"\n      >\n        {{ page }}\n      </dt-button>\n    </div>\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-next\"\n      :aria-label=\"nextAriaLabel\"\n      :disabled=\"isLastPage\"\n      kind=\"muted\"\n      importance=\"clear\"\n      @click=\"changePage(currentPage + 1)\"\n    >\n      <template #icon>\n        <dt-icon-chevron-right\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </nav>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconChevronLeft, DtIconChevronRight, DtIconMoreHorizontal } from '@dialpad/dialtone-icons/vue2';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.\n * @see https://dialtone.dialpad.com/components/pagination.html\n */\nexport default {\n  name: 'DtPagination',\n\n  components: {\n    DtButton,\n    DtIconChevronLeft,\n    DtIconChevronRight,\n    DtIconMoreHorizontal,\n  },\n\n  props: {\n    /**\n     * Descriptive label for the pagination content.\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The total number of the pages\n     */\n    totalPages: {\n      type: Number,\n      required: true,\n    },\n\n    /**\n     * The active current page in the list of pages, defaults to the first page\n     */\n    activePage: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Determines the max pages to be shown in the list. Using an odd number is recommended.\n     * If an even number is given, then it will be rounded down to the nearest odd number to always\n     * keep current page in the middle when current page is in the mid-range.\n     */\n    maxVisible: {\n      type: Number,\n      default: 5,\n    },\n\n    /**\n     * Sometimes you may need to hide start and end page number buttons when moving in between.\n     * This prop will be used to hide the first and last page buttons when not near the edges.\n     * This is useful when your backend does not support offset and you can only use cursor based pagination.\n     */\n    hideEdges: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Page change event\n     *\n     * @event change\n     * @type {Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      currentPage: this.activePage,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    isFirstPage () {\n      return this.currentPage === 1;\n    },\n\n    isLastPage () {\n      return this.currentPage === this.totalPages;\n    },\n\n    // eslint-disable-next-line complexity\n    pages () {\n      if (this.maxVisible === 0) {\n        return [];\n      }\n      if (this.totalPages <= this.maxVisible) {\n        return this.range(1, this.totalPages);\n      }\n\n      let start = this.maxVisible - 1;\n      let end = this.totalPages - start + 1;\n\n      // if hideEdges is true, modify the start and\n      // end to account for the hidden pages\n      if (this.hideEdges) {\n        start = start + 1;\n        end = end - 1;\n      }\n\n      if (this.currentPage < start) {\n        const pages = [...this.range(1, start), '...'];\n        if (!this.hideEdges) {\n          // add last page to the end\n          pages.push(this.totalPages);\n        }\n        return pages;\n      }\n\n      if (this.currentPage > end) {\n        const pages = ['...', ...this.range(end, this.totalPages)];\n        if (!this.hideEdges) {\n          // add first page to the beginning\n          pages.unshift(1);\n        }\n        return pages;\n      }\n\n      // rounding to the nearest odd according to the maxlength to always show the page number in the middle.\n      const total = this.maxVisible - (3 - this.maxVisible % 2);\n      const centerIndex = Math.floor(total / 2);\n      let left = this.currentPage - centerIndex;\n      let right = this.currentPage + centerIndex;\n\n      // if hideEdge is true, modify the left and right to account for the hidden pages\n      if (this.hideEdges) {\n        left = left - 1;\n        right = right + 1;\n      }\n\n      const pages = ['...', ...this.range(left, right), '...'];\n      if (!this.hideEdges) {\n        return [1, ...pages, this.totalPages];\n      }\n      return pages;\n    },\n\n    prevAriaLabel () {\n      return this.isFirstPage ? this.i18n.$t('DIALTONE_PAGINATION_FIRST_PAGE') : this.i18n.$t('DIALTONE_PAGINATION_PREVIOUS_PAGE');\n    },\n\n    nextAriaLabel () {\n      return this.isLastPage ? this.i18n.$t('DIALTONE_PAGINATION_LAST_PAGE') : this.i18n.$t('DIALTONE_PAGINATION_NEXT_PAGE');\n    },\n\n    pageNumberAriaLabel () {\n      return (page) => {\n        return page === this.totalPages ? `${this.i18n.$t('DIALTONE_PAGINATION_LAST_PAGE')} ${page}` : `${this.i18n.$t('DIALTONE_PAGINATION_PAGE_NUMBER', { page })}`;\n      };\n    },\n  },\n\n  watch: {\n    activePage () {\n      this.currentPage = this.activePage;\n    },\n\n    totalPages (pages) {\n      if (this.currentPage > pages || this.currentPage <= 0){\n        this.currentPage = pages;\n      }\n    },\n  },\n\n  methods: {\n    range (from, to) {\n      const range = [];\n      from = from > 0 ? from : 1;\n      for (let i = from; i <= to; i++) {\n        range.push(i);\n      }\n      return range;\n    },\n\n    changePage (page) {\n      this.currentPage = page;\n      this.$emit('change', this.currentPage);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconChevronLeft","DtIconChevronRight","DtIconMoreHorizontal","DialtoneLocalization","start","end","pages","total","centerIndex","left","right","page","from","to","range","i"],"mappings":"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"}
+{"version":3,"file":"pagination.js","sources":["../../../components/pagination/pagination.vue"],"sourcesContent":["<template>\n  <nav\n    v-show=\"totalPages > 0\"\n    :aria-label=\"ariaLabel\"\n    class=\"d-pagination\"\n  >\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-prev\"\n      :aria-label=\"prevAriaLabel\"\n      kind=\"muted\"\n      importance=\"clear\"\n      :disabled=\"isFirstPage\"\n      @click=\"changePage(currentPage - 1)\"\n    >\n      <template #icon>\n        <dt-icon-chevron-left\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n    <div\n      v-for=\"(page, index) in pages\"\n      :key=\"`page-${page}-${index}`\"\n      :class=\"{ 'd-pagination__separator': isNaN(Number(page)) }\"\n    >\n      <!-- eslint-disable vue/no-bare-strings-in-template -->\n      <div\n        v-if=\"isNaN(Number(page))\"\n        class=\"d-pagination__separator-icon\"\n        data-qa=\"dt-pagination-separator\"\n      >\n        <dt-icon-more-horizontal\n          size=\"300\"\n        />\n        <!-- … -->\n      </div>\n      <dt-button\n        v-else\n        class=\"d-pagination__item\"\n        :aria-label=\"pageNumberAriaLabel(page)\"\n        :kind=\"currentPage === page ? 'default' : 'muted'\"\n        :importance=\"currentPage === page ? 'primary' : 'clear'\"\n        label-class=\"d-pagination__item-label\"\n        @click=\"changePage(page)\"\n      >\n        {{ page }}\n      </dt-button>\n    </div>\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-next\"\n      :aria-label=\"nextAriaLabel\"\n      :disabled=\"isLastPage\"\n      kind=\"muted\"\n      importance=\"clear\"\n      @click=\"changePage(currentPage + 1)\"\n    >\n      <template #icon>\n        <dt-icon-chevron-right\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </nav>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconChevronLeft, DtIconChevronRight, DtIconMoreHorizontal } from '@dialpad/dialtone-icons/vue2';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.\n * @see https://dialtone.dialpad.com/components/pagination.html\n */\nexport default {\n  name: 'DtPagination',\n\n  components: {\n    DtButton,\n    DtIconChevronLeft,\n    DtIconChevronRight,\n    DtIconMoreHorizontal,\n  },\n\n  props: {\n    /**\n     * Descriptive label for the pagination content.\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The total number of the pages\n     */\n    totalPages: {\n      type: Number,\n      required: true,\n    },\n\n    /**\n     * The active current page in the list of pages, defaults to the first page\n     */\n    activePage: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Determines the max pages to be shown in the list. Using an odd number is recommended.\n     * If an even number is given, then it will be rounded down to the nearest odd number to always\n     * keep current page in the middle when current page is in the mid-range.\n     */\n    maxVisible: {\n      type: Number,\n      default: 5,\n    },\n\n    /**\n     * Sometimes you may need to hide start and end page number buttons when moving in between.\n     * This prop will be used to hide the first and last page buttons when not near the edges.\n     * This is useful when your backend does not support offset and you can only use cursor based pagination.\n     */\n    hideEdges: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Page change event\n     *\n     * @event change\n     * @type {Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      currentPage: this.activePage,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    isFirstPage () {\n      return this.currentPage === 1;\n    },\n\n    isLastPage () {\n      return this.currentPage === this.totalPages;\n    },\n\n    // eslint-disable-next-line complexity\n    pages () {\n      if (this.maxVisible === 0) {\n        return [];\n      }\n      if (this.totalPages <= this.maxVisible) {\n        return this.range(1, this.totalPages);\n      }\n\n      let start = this.maxVisible - 1;\n      let end = this.totalPages - start + 1;\n\n      // if hideEdges is true, modify the start and\n      // end to account for the hidden pages\n      if (this.hideEdges) {\n        start = start + 1;\n        end = end - 1;\n      }\n\n      if (this.currentPage < start) {\n        const pages = [...this.range(1, start), '...'];\n        if (!this.hideEdges) {\n          // add last page to the end\n          pages.push(this.totalPages);\n        }\n        return pages;\n      }\n\n      if (this.currentPage > end) {\n        const pages = ['...', ...this.range(end, this.totalPages)];\n        if (!this.hideEdges) {\n          // add first page to the beginning\n          pages.unshift(1);\n        }\n        return pages;\n      }\n\n      // rounding to the nearest odd according to the maxlength to always show the page number in the middle.\n      const total = this.maxVisible - (3 - this.maxVisible % 2);\n      const centerIndex = Math.floor(total / 2);\n      let left = this.currentPage - centerIndex;\n      let right = this.currentPage + centerIndex;\n\n      // if hideEdge is true, modify the left and right to account for the hidden pages\n      if (this.hideEdges) {\n        left = left - 1;\n        right = right + 1;\n      }\n\n      const pages = ['...', ...this.range(left, right), '...'];\n      if (!this.hideEdges) {\n        return [1, ...pages, this.totalPages];\n      }\n      return pages;\n    },\n\n    prevAriaLabel () {\n      return this.isFirstPage ? this.i18n.$t('DIALTONE_PAGINATION_FIRST_PAGE') : this.i18n.$t('DIALTONE_PAGINATION_PREVIOUS_PAGE');\n    },\n\n    nextAriaLabel () {\n      return this.isLastPage ? this.i18n.$t('DIALTONE_PAGINATION_LAST_PAGE') : this.i18n.$t('DIALTONE_PAGINATION_NEXT_PAGE');\n    },\n\n    pageNumberAriaLabel () {\n      return (page) => {\n        return page === this.totalPages ? `${this.i18n.$t('DIALTONE_PAGINATION_LAST_PAGE')} ${page}` : `${this.i18n.$t('DIALTONE_PAGINATION_PAGE_NUMBER', { page })}`;\n      };\n    },\n  },\n\n  watch: {\n    activePage () {\n      this.currentPage = this.activePage;\n    },\n\n    totalPages (pages) {\n      if (this.currentPage > pages || this.currentPage <= 0){\n        this.currentPage = pages;\n      }\n    },\n  },\n\n  methods: {\n    range (from, to) {\n      const range = [];\n      from = from > 0 ? from : 1;\n      for (let i = from; i <= to; i++) {\n        range.push(i);\n      }\n      return range;\n    },\n\n    changePage (page) {\n      this.currentPage = page;\n      this.$emit('change', this.currentPage);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconChevronLeft","DtIconChevronRight","DtIconMoreHorizontal","DialtoneLocalization","start","end","pages","total","centerIndex","left","right","page","from","to","range","i"],"mappings":"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"}

package/dist/lib/split-button/split-button-alpha.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),l=require("../button/button.cjs"),n=require("../button/button-constants.cjs"),i={name:"SplitButtonAlpha",components:{DtButton:l.default},props:{active:{type:Boolean,default:!1},ariaLabel:{type:String,default:null},iconPosition:{type:String,default:"left"},labelClass:{type:[String,Array,Object],default:""},loading:{type:Boolean,default:!1},tooltipText:{type:String,default:""},assertiveOnFocus:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},importance:{type:String,default:"primary"},kind:{type:String,default:"default"},size:{type:String,default:"md"}},data(){return{BUTTON_ICON_SIZES:n.BUTTON_ICON_SIZES}}};var o=function(){var t=this,e=t._self._c;return e("dt-button",{directives:[{name:"dt-tooltip",rawName:"v-dt-tooltip",value:t.tooltipText,expression:"tooltipText"}],class:`d-split-btn__alpha d-split-btn__alpha--${t.size}`,attrs:{"data-qa":"dt-split-button-alpha",active:t.active,"aria-label":t.ariaLabel,"assertive-on-focus":t.assertiveOnFocus,disabled:t.disabled,"icon-position":t.iconPosition,importance:t.importance,kind:t.kind,"label-class":t.labelClass,loading:t.loading,size:t.size},scopedSlots:t._u([{key:"icon",fn:function(){return[t._t("icon",null,{size:t.BUTTON_ICON_SIZES[t.size]})]},proxy:!0}],null,!0)},[t._t("default")],2)},s=[],r=a.n(i,o,s);const u=r.exports;exports.default=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),i=require("../button/button.cjs"),n=require("../button/button-constants.cjs"),o={name:"SplitButtonAlpha",components:{DtButton:i.default},props:{active:{type:Boolean,default:!1},ariaLabel:{type:String,default:null},iconPosition:{type:String,default:"left"},labelClass:{type:[String,Array,Object],default:""},loading:{type:Boolean,default:!1},tooltipText:{type:String,default:""},assertiveOnFocus:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},importance:{type:String,default:"primary"},kind:{type:String,default:"default"},size:{type:String,default:"md"}},data(){return{BUTTON_ICON_SIZES:n.BUTTON_ICON_SIZES}},computed:{tooltipConfig(){return{message:this.tooltipText,inverted:this.kind==="inverted"}}}};var l=function(){var t=this,e=t._self._c;return e("dt-button",{directives:[{name:"dt-tooltip",rawName:"v-dt-tooltip",value:t.tooltipConfig,expression:"tooltipConfig"}],class:`d-split-btn__alpha d-split-btn__alpha--${t.size}`,attrs:{"data-qa":"dt-split-button-alpha",active:t.active,"aria-label":t.ariaLabel,"assertive-on-focus":t.assertiveOnFocus,disabled:t.disabled,"icon-position":t.iconPosition,importance:t.importance,kind:t.kind,"label-class":t.labelClass,loading:t.loading,size:t.size},scopedSlots:t._u([{key:"icon",fn:function(){return[t._t("icon",null,{size:t.BUTTON_ICON_SIZES[t.size]})]},proxy:!0}],null,!0)},[t._t("default")],2)},s=[],r=a.n(o,l,s);const u=r.exports;exports.default=u;
 //# sourceMappingURL=split-button-alpha.cjs.map

package/dist/lib/split-button/split-button-alpha.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"split-button-alpha.cjs","sources":["../../../components/split_button/split_button-alpha.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-dt-tooltip=\"tooltipText\"\n    data-qa=\"dt-split-button-alpha\"\n    :active=\"active\"\n    :aria-label=\"ariaLabel\"\n    :assertive-on-focus=\"assertiveOnFocus\"\n    :class=\"`d-split-btn__alpha d-split-btn__alpha--${size}`\"\n    :disabled=\"disabled\"\n    :icon-position=\"iconPosition\"\n    :importance=\"importance\"\n    :kind=\"kind\"\n    :label-class=\"labelClass\"\n    :loading=\"loading\"\n    :size=\"size\"\n  >\n    <template #icon>\n      <slot\n        name=\"icon\"\n        :size=\"BUTTON_ICON_SIZES[size]\"\n      />\n    </template>\n    <slot name=\"default\" />\n  </dt-button>\n</template>\n\n<script>\nimport { BUTTON_ICON_SIZES, DtButton } from '@/components/button';\n\nexport default {\n  name: 'SplitButtonAlpha',\n\n  components: {\n    DtButton,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should have active styling\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the button\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the button\n     */\n    tooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button is in focus.\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n    },\n\n    /**\n     * The color of the button.\n     */\n    kind: {\n      type: String,\n      default: 'default',\n    },\n\n    /**\n     * The size of the button.\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n  },\n\n  data () {\n    return {\n      BUTTON_ICON_SIZES,\n    };\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","BUTTON_ICON_SIZES"],"mappings":"wPA6BAA,EAAA,CACA,KAAA,mBAEA,WAAA,CACA,SAAAC,EAAAA,OACA,EAEA,MAAA,CAIA,OAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,UAAA,CACA,KAAA,OACA,QAAA,IACA,EAKA,aAAA,CACA,KAAA,OACA,QAAA,MACA,EAKA,WAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAKA,QAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,YAAA,CACA,KAAA,OACA,QAAA,EACA,EAMA,iBAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,WAAA,CACA,KAAA,OACA,QAAA,SACA,EAKA,KAAA,CACA,KAAA,OACA,QAAA,SACA,EAKA,KAAA,CACA,KAAA,OACA,QAAA,IACA,CACA,EAEA,MAAA,CACA,MAAA,CACA,kBAAAC,EAAAA,iBACA,CACA,CACA"}
+{"version":3,"file":"split-button-alpha.cjs","sources":["../../../components/split_button/split_button-alpha.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-dt-tooltip=\"tooltipConfig\"\n    data-qa=\"dt-split-button-alpha\"\n    :active=\"active\"\n    :aria-label=\"ariaLabel\"\n    :assertive-on-focus=\"assertiveOnFocus\"\n    :class=\"`d-split-btn__alpha d-split-btn__alpha--${size}`\"\n    :disabled=\"disabled\"\n    :icon-position=\"iconPosition\"\n    :importance=\"importance\"\n    :kind=\"kind\"\n    :label-class=\"labelClass\"\n    :loading=\"loading\"\n    :size=\"size\"\n  >\n    <template #icon>\n      <slot\n        name=\"icon\"\n        :size=\"BUTTON_ICON_SIZES[size]\"\n      />\n    </template>\n    <slot name=\"default\" />\n  </dt-button>\n</template>\n\n<script>\nimport { BUTTON_ICON_SIZES, DtButton } from '@/components/button';\n\nexport default {\n  name: 'SplitButtonAlpha',\n\n  components: {\n    DtButton,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should have active styling\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the button\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the button\n     */\n    tooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button is in focus.\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n    },\n\n    /**\n     * The color of the button.\n     */\n    kind: {\n      type: String,\n      default: 'default',\n    },\n\n    /**\n     * The size of the button.\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n  },\n\n  data () {\n    return {\n      BUTTON_ICON_SIZES,\n    };\n  },\n\n  computed: {\n    tooltipConfig () {\n      return {\n        message: this.tooltipText,\n        inverted: this.kind === 'inverted',\n      };\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","BUTTON_ICON_SIZES"],"mappings":"wPA6BAA,EAAA,CACA,KAAA,mBAEA,WAAA,CACA,SAAAC,EAAAA,OACA,EAEA,MAAA,CAIA,OAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,UAAA,CACA,KAAA,OACA,QAAA,IACA,EAKA,aAAA,CACA,KAAA,OACA,QAAA,MACA,EAKA,WAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAKA,QAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,YAAA,CACA,KAAA,OACA,QAAA,EACA,EAMA,iBAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,WAAA,CACA,KAAA,OACA,QAAA,SACA,EAKA,KAAA,CACA,KAAA,OACA,QAAA,SACA,EAKA,KAAA,CACA,KAAA,OACA,QAAA,IACA,CACA,EAEA,MAAA,CACA,MAAA,CACA,kBAAAC,EAAAA,iBACA,CACA,EAEA,SAAA,CACA,eAAA,CACA,MAAA,CACA,QAAA,KAAA,YACA,SAAA,KAAA,OAAA,UACA,CACA,CACA,CACA"}

package/dist/lib/split-button/split-button-alpha.js

@@ -1,7 +1,7 @@
 import { n as a } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
 import i from "../button/button.js";
-import { BUTTON_ICON_SIZES as l } from "../button/button-constants.js";
-const o = {
+import { BUTTON_ICON_SIZES as o } from "../button/button-constants.js";
+const n = {
   name: "SplitButtonAlpha",
   components: {
     DtButton: i
@@ -88,22 +88,30 @@ const o = {
   },
   data() {
     return {
-      BUTTON_ICON_SIZES: l
+      BUTTON_ICON_SIZES: o
     };
+  },
+  computed: {
+    tooltipConfig() {
+      return {
+        message: this.tooltipText,
+        inverted: this.kind === "inverted"
+      };
+    }
   }
 };
-var n = function() {
+var l = function() {
   var t = this, e = t._self._c;
-  return e("dt-button", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: t.tooltipText, expression: "tooltipText" }], class: `d-split-btn__alpha d-split-btn__alpha--${t.size}`, attrs: { "data-qa": "dt-split-button-alpha", active: t.active, "aria-label": t.ariaLabel, "assertive-on-focus": t.assertiveOnFocus, disabled: t.disabled, "icon-position": t.iconPosition, importance: t.importance, kind: t.kind, "label-class": t.labelClass, loading: t.loading, size: t.size }, scopedSlots: t._u([{ key: "icon", fn: function() {
+  return e("dt-button", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: t.tooltipConfig, expression: "tooltipConfig" }], class: `d-split-btn__alpha d-split-btn__alpha--${t.size}`, attrs: { "data-qa": "dt-split-button-alpha", active: t.active, "aria-label": t.ariaLabel, "assertive-on-focus": t.assertiveOnFocus, disabled: t.disabled, "icon-position": t.iconPosition, importance: t.importance, kind: t.kind, "label-class": t.labelClass, loading: t.loading, size: t.size }, scopedSlots: t._u([{ key: "icon", fn: function() {
     return [t._t("icon", null, { size: t.BUTTON_ICON_SIZES[t.size] })];
   }, proxy: !0 }], null, !0) }, [t._t("default")], 2);
 }, s = [], r = /* @__PURE__ */ a(
-  o,
   n,
+  l,
   s
 );
-const f = r.exports;
+const c = r.exports;
 export {
-  f as default
+  c as default
 };
 //# sourceMappingURL=split-button-alpha.js.map

package/dist/lib/split-button/split-button-alpha.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-button-alpha.js","sources":["../../../components/split_button/split_button-alpha.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-dt-tooltip=\"tooltipText\"\n    data-qa=\"dt-split-button-alpha\"\n    :active=\"active\"\n    :aria-label=\"ariaLabel\"\n    :assertive-on-focus=\"assertiveOnFocus\"\n    :class=\"`d-split-btn__alpha d-split-btn__alpha--${size}`\"\n    :disabled=\"disabled\"\n    :icon-position=\"iconPosition\"\n    :importance=\"importance\"\n    :kind=\"kind\"\n    :label-class=\"labelClass\"\n    :loading=\"loading\"\n    :size=\"size\"\n  >\n    <template #icon>\n      <slot\n        name=\"icon\"\n        :size=\"BUTTON_ICON_SIZES[size]\"\n      />\n    </template>\n    <slot name=\"default\" />\n  </dt-button>\n</template>\n\n<script>\nimport { BUTTON_ICON_SIZES, DtButton } from '@/components/button';\n\nexport default {\n  name: 'SplitButtonAlpha',\n\n  components: {\n    DtButton,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should have active styling\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the button\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the button\n     */\n    tooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button is in focus.\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n    },\n\n    /**\n     * The color of the button.\n     */\n    kind: {\n      type: String,\n      default: 'default',\n    },\n\n    /**\n     * The size of the button.\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n  },\n\n  data () {\n    return {\n      BUTTON_ICON_SIZES,\n    };\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","BUTTON_ICON_SIZES"],"mappings":";;;AA6BA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,mBAAAC;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;"}
+{"version":3,"file":"split-button-alpha.js","sources":["../../../components/split_button/split_button-alpha.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-dt-tooltip=\"tooltipConfig\"\n    data-qa=\"dt-split-button-alpha\"\n    :active=\"active\"\n    :aria-label=\"ariaLabel\"\n    :assertive-on-focus=\"assertiveOnFocus\"\n    :class=\"`d-split-btn__alpha d-split-btn__alpha--${size}`\"\n    :disabled=\"disabled\"\n    :icon-position=\"iconPosition\"\n    :importance=\"importance\"\n    :kind=\"kind\"\n    :label-class=\"labelClass\"\n    :loading=\"loading\"\n    :size=\"size\"\n  >\n    <template #icon>\n      <slot\n        name=\"icon\"\n        :size=\"BUTTON_ICON_SIZES[size]\"\n      />\n    </template>\n    <slot name=\"default\" />\n  </dt-button>\n</template>\n\n<script>\nimport { BUTTON_ICON_SIZES, DtButton } from '@/components/button';\n\nexport default {\n  name: 'SplitButtonAlpha',\n\n  components: {\n    DtButton,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should have active styling\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the button\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the button\n     */\n    tooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button is in focus.\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n    },\n\n    /**\n     * The color of the button.\n     */\n    kind: {\n      type: String,\n      default: 'default',\n    },\n\n    /**\n     * The size of the button.\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n  },\n\n  data () {\n    return {\n      BUTTON_ICON_SIZES,\n    };\n  },\n\n  computed: {\n    tooltipConfig () {\n      return {\n        message: this.tooltipText,\n        inverted: this.kind === 'inverted',\n      };\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","BUTTON_ICON_SIZES"],"mappings":";;;AA6BA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,mBAAAC;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,gBAAA;AACA,aAAA;AAAA,QACA,SAAA,KAAA;AAAA,QACA,UAAA,KAAA,SAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;"}

package/dist/lib/split-button/split-button-omega.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./split-button-constants.cjs"),i=require("@dialpad/dialtone-icons/vue2"),o=require("../../common/utils/index.cjs"),a=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),r=require("../button/button.cjs"),l={name:"SplitButtonOmega",components:{DtButton:r.default,DtIconChevronDown:i.DtIconChevronDown},props:{active:{type:Boolean,default:!1},ariaLabel:{type:String,default:null},disabled:{type:Boolean,default:!1},id:{type:String,default:o.getUniqueString()},importance:{type:String,default:"primary"},kind:{type:String,default:"default"},size:{type:String,default:"md"},tooltipText:{type:String,default:""}},data(){return{SPLIT_BUTTON_ICON_SIZES:n.SPLIT_BUTTON_ICON_SIZES}}};var s=function(){var t=this,e=t._self._c;return e("dt-button",{directives:[{name:"dt-tooltip",rawName:"v-dt-tooltip",value:t.tooltipText,expression:"tooltipText"}],class:`d-split-btn__omega d-split-btn__omega--${t.size}`,attrs:{id:t.id,"data-qa":"dt-split-button-omega",active:t.active,"aria-label":t.ariaLabel,disabled:t.disabled,importance:t.importance,kind:t.kind,size:t.size},scopedSlots:t._u([{key:"icon",fn:function(){return[t._t("icon",function(){return[e("dt-icon-chevron-down",{attrs:{size:t.SPLIT_BUTTON_ICON_SIZES[t.size]}})]},{size:t.SPLIT_BUTTON_ICON_SIZES[t.size]})]},proxy:!0}],null,!0)})},u=[],d=a.n(l,s,u);const _=d.exports;exports.default=_;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./split-button-constants.cjs"),i=require("@dialpad/dialtone-icons/vue2"),o=require("../../common/utils/index.cjs"),r=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),a=require("../button/button.cjs"),s={name:"SplitButtonOmega",components:{DtButton:a.default,DtIconChevronDown:i.DtIconChevronDown},props:{active:{type:Boolean,default:!1},ariaLabel:{type:String,default:null},disabled:{type:Boolean,default:!1},id:{type:String,default:o.getUniqueString()},importance:{type:String,default:"primary"},kind:{type:String,default:"default"},size:{type:String,default:"md"},tooltipText:{type:String,default:""}},data(){return{SPLIT_BUTTON_ICON_SIZES:n.SPLIT_BUTTON_ICON_SIZES}}};var l=function(){var t=this,e=t._self._c;return e("dt-button",{directives:[{name:"dt-tooltip",rawName:"v-dt-tooltip",value:{message:t.tooltipText,inverted:t.kind==="inverted"},expression:"{ message: tooltipText, inverted: kind === 'inverted' }"}],class:`d-split-btn__omega d-split-btn__omega--${t.size}`,attrs:{id:t.id,"data-qa":"dt-split-button-omega",active:t.active,"aria-label":t.ariaLabel,disabled:t.disabled,importance:t.importance,kind:t.kind,size:t.size},scopedSlots:t._u([{key:"icon",fn:function(){return[t._t("icon",function(){return[e("dt-icon-chevron-down",{attrs:{size:t.SPLIT_BUTTON_ICON_SIZES[t.size]}})]},{size:t.SPLIT_BUTTON_ICON_SIZES[t.size]})]},proxy:!0}],null,!0)})},d=[],u=r.n(s,l,d);const _=u.exports;exports.default=_;
 //# sourceMappingURL=split-button-omega.cjs.map