@dialpad/dialtone-vue 3.219.0-next.2 → 3.219.0

package/dist/lib/tab/tab-group.js

@@ -1,347 +1,177 @@
-import { TAB_SPREAD_MODIFIERS as u, TAB_ORIENTATION_MODIFIERS as b, TAB_LIST_IMPORTANCE_MODIFIERS as h, TAB_LIST_KIND_MODIFIERS as c, TAB_LIST_SIZE_MODIFIERS as f, TAB_ACTIVATION_MODES as I, TAB_GROUP_KINDS as T, TAB_LIST_SIZES as S, TAB_ORIENTATIONS as g, TAB_SPREADS as v } from "./tabs-constants.js";
-import { openBlock as O, createElementBlock as m, normalizeClass as p, createElementVNode as A, mergeProps as B, withKeys as n, withModifiers as l, renderSlot as o } from "vue";
-import { _ as x } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-const D = {
-  compatConfig: { MODE: 3 },
-  name: "DtTabGroup",
-  provide() {
-    return {
-      groupContext: this.provideObj,
-      setFocus: this.setFocus
-    };
-  },
-  props: {
-    /**
-     * Identifies the tab group
-     */
-    label: {
-      type: String,
-      default: ""
-    },
-    /**
-     * The id of the selected tab panel which should be displayed
-     */
-    selected: {
-      type: String,
-      default: ""
-    },
-    /**
-     * If true, disables the tab group
-     * @values true, false
-     */
-    disabled: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * If true, applies inverted styles to the tab group
-     * @deprecated Use v-dt-mode directive instead.
-     * @values true, false
-     */
-    inverted: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * If true, applies borderless styles to the tab group
-     * @values true, false
-     */
-    borderless: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Controls how tabs distribute available space within the tab list.
-     * @values none, grow, equal
-     */
-    spread: {
-      type: String,
-      default: "none",
-      validator(t) {
-        return v.includes(t);
-      }
-    },
-    /**
-     * The orientation of the tab list
-     * @values horizontal, vertical
-     */
-    orientation: {
-      type: String,
-      default: "horizontal",
-      validator(t) {
-        return g.includes(t);
-      }
-    },
-    /**
-     * If provided, applies size styles to the tab group
-     * @values 100, 200, 300, 400, 500
-     */
-    size: {
-      type: [String, Number],
-      default: 300,
-      validator(t) {
-        return S.includes(String(t));
-      }
-    },
-    /**
-     * Pass through classes, used to customize the tab list
-     */
-    tabListClass: {
-      type: [String, Array, Object],
-      default: ""
-    },
-    /**
-     * Pass through props, used to customize the tab list
-     */
-    tabListChildProps: {
-      type: Object,
-      default: () => ({})
-    },
-    /**
-     * The visual style kind applied to tabs within this group.
-     * Maps to specific DtButton kind/importance combinations for selected/unselected states.
-     * @values default, muted
-     */
-    kind: {
-      type: String,
-      default: "default",
-      validator(t) {
-        return T.includes(t);
-      }
-    },
-    /**
-     * If true, the selected tab renders with outlined importance instead of clear.
-     * @values true, false
-     */
-    outlined: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Controls whether tabs are selected on focus (auto) or on click/keypress (manual)
-     * @values auto, manual
-     */
-    activationMode: {
-      type: String,
-      default: "manual",
-      validator(t) {
-        return I.includes(t);
-      }
-    }
-  },
-  emits: [
-    /**
-     * Change tab event with the arguments: selected id of the current tab and disabled value
-     *
-     * @event change
-     * @type {Object}
-     */
-    "change",
-    /**
-     * Before change tab event with the event argument, useful to perform validations and prevent changing tabs if neccessary.
-     *
-     * @event before-change
-     * @type {Event}
-     */
-    "before-change"
-  ],
-  data() {
-    return {
-      provideObj: {
-        selected: "",
-        // the currently displayed tab id
-        disabled: !1,
-        // disable group
-        size: 300,
-        kind: "default",
-        outlined: !1,
-        orientation: "horizontal",
-        spread: "none"
-      },
-      focusId: null,
-      tabs: [],
-      TAB_LIST_SIZE_MODIFIERS: f,
-      TAB_LIST_KIND_MODIFIERS: c,
-      TAB_LIST_IMPORTANCE_MODIFIERS: h,
-      TAB_ORIENTATION_MODIFIERS: b,
-      TAB_SPREAD_MODIFIERS: u
-    };
-  },
-  watch: {
-    disabled: {
-      immediate: !0,
-      handler() {
-        this.provideObj.disabled = this.disabled;
-      }
-    },
-    selected: {
-      immediate: !0,
-      handler() {
-        this.provideObj.selected = this.selected;
-      }
-    },
-    size: {
-      immediate: !0,
-      handler() {
-        this.provideObj.size = this.size;
-      }
-    },
-    kind: {
-      immediate: !0,
-      handler() {
-        this.provideObj.kind = this.kind;
-      }
-    },
-    outlined: {
-      immediate: !0,
-      handler() {
-        this.provideObj.outlined = this.outlined;
-      }
-    },
-    orientation: {
-      immediate: !0,
-      handler() {
-        this.provideObj.orientation = this.orientation;
-      }
-    },
-    spread: {
-      immediate: !0,
-      handler() {
-        this.provideObj.spread = this.spread;
-      }
-    }
-  },
-  mounted() {
-    this.updateSelected();
-  },
-  updated() {
-    this.updateSelected();
-  },
-  methods: {
-    updateSelected() {
-      this.provideObj.selected || (this.provideObj.selected = this.selected), this.tabs = this.getTabChildren();
-    },
-    setFocus(t) {
-      this.focusId = t;
-    },
-    getTabChildren() {
-      return Array.from(this.$refs.tabs.querySelectorAll('[role="tab"]')).map((e) => {
-        var i, r;
-        return {
-          context: e,
-          panelId: (i = e.getAttribute("aria-controls")) == null ? void 0 : i.replace("dt-panel-", ""),
-          tabId: (r = e.getAttribute("id")) == null ? void 0 : r.replace("dt-tab-", ""),
-          isSelected: e.getAttribute("aria-selected") === "true",
-          isDisabled: e.getAttribute("aria-disabled") === "true"
-        };
-      });
-    },
-    onChange() {
-      this.$emit("change", { ...this.provideObj });
-    },
-    tabLeft() {
-      this.orientation === "horizontal" && this.navigatePrevious();
-    },
-    tabRight() {
-      this.orientation === "horizontal" && this.navigateNext();
-    },
-    tabUp(t) {
-      this.orientation === "vertical" && (t.preventDefault(), this.navigatePrevious());
-    },
-    tabDown(t) {
-      this.orientation === "vertical" && (t.preventDefault(), this.navigateNext());
-    },
-    navigatePrevious() {
-      const t = this.getFocusedTabIndex();
-      if (t === -1) return;
-      const e = this.findNextTab(t, -1);
-      this.selectFocusOnTab(e);
-    },
-    navigateNext() {
-      const t = this.getFocusedTabIndex();
-      if (t === -1) return;
-      const e = this.findNextTab(t, 1);
-      this.selectFocusOnTab(e);
-    },
-    findNextTab(t, e) {
-      const i = this.tabs.length;
-      return (t + e + i) % i;
-    },
-    selectFocusOnTab(t) {
-      const { context: e, panelId: i, isDisabled: r } = this.tabs[t];
-      e.focus(), this.activationMode === "auto" && !r && (this.provideObj.selected = i, this.onChange());
-    },
-    selectTab(t) {
-      var i;
-      if (this.isSameTabClicked()) return;
-      const e = this.getFocusedTabIndex();
-      (i = this.tabs[e]) != null && i.isDisabled || (this.$emit("before-change", t), !t.defaultPrevented && (this.selectTabByIndex(e), this.onChange()));
-    },
-    selectTabByIndex(t) {
-      const { context: e, panelId: i } = this.tabs[t];
-      this.provideObj.selected = i, e.focus();
-    },
-    getFocusedTabIndex() {
-      const t = this.tabs.findIndex(
-        (e) => this.focusId ? e.tabId === `${this.focusId}` : e.isSelected
-      );
-      return t === -1 ? 0 : t;
-    },
-    onHomeButton() {
-      this.tabs.length && this.selectFocusOnTab(0);
-    },
-    onEndButton() {
-      this.tabs.length && this.selectFocusOnTab(this.tabs.length - 1);
-    },
-    isSameTabClicked() {
-      const t = this.tabs[this.getFocusedTabIndex()];
-      return this.provideObj.selected === t.panelId;
-    }
-  }
-}, E = ["aria-label", "aria-orientation"];
-function _(t, e, i, r, d, a) {
-  return O(), m("div", {
-    "data-qa": "dt-tab-group",
-    class: p(["d-tab-neux", { "d-tab-neux--vertical": i.orientation === "vertical" }])
-  }, [
-    A("div", B({
-      ref: "tabs",
-      class: [
-        "d-tablist",
-        d.TAB_LIST_SIZE_MODIFIERS[String(i.size)],
-        d.TAB_ORIENTATION_MODIFIERS[i.orientation],
-        i.orientation !== "vertical" && d.TAB_SPREAD_MODIFIERS[i.spread],
-        {
-          [d.TAB_LIST_KIND_MODIFIERS.inverted]: i.inverted,
-          [d.TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: i.borderless
-        },
-        i.tabListClass
-      ]
-    }, i.tabListChildProps, {
-      role: "tablist",
-      "aria-label": i.label,
-      "aria-orientation": i.orientation,
-      onKeydown: [
-        e[0] || (e[0] = n((...s) => a.tabLeft && a.tabLeft(...s), ["left"])),
-        e[1] || (e[1] = n((...s) => a.tabRight && a.tabRight(...s), ["right"])),
-        e[2] || (e[2] = n((...s) => a.tabUp && a.tabUp(...s), ["up"])),
-        e[3] || (e[3] = n((...s) => a.tabDown && a.tabDown(...s), ["down"])),
-        e[7] || (e[7] = n(l((...s) => a.onHomeButton && a.onHomeButton(...s), ["prevent"]), ["home"])),
-        e[8] || (e[8] = n(l((...s) => a.onEndButton && a.onEndButton(...s), ["prevent"]), ["end"]))
-      ],
-      onKeyup: [
-        e[4] || (e[4] = n((...s) => a.selectTab && a.selectTab(...s), ["enter"])),
-        e[5] || (e[5] = n((...s) => a.selectTab && a.selectTab(...s), ["space"]))
-      ],
-      onClick: e[6] || (e[6] = (...s) => a.selectTab && a.selectTab(...s))
-    }), [
-      o(t.$slots, "tabs")
-    ], 16, E),
-    o(t.$slots, "default")
-  ], 2);
+import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import { TAB_LIST_IMPORTANCE_MODIFIERS as t, TAB_LIST_KIND_MODIFIERS as n, TAB_LIST_SIZES as r, TAB_LIST_SIZE_MODIFIERS as i } from "./tabs-constants.js";
+import { createElementBlock as a, createElementVNode as o, mergeProps as s, openBlock as c, renderSlot as l, withKeys as u } from "vue";
+//#region components/tab/tab_group.vue
+var d = {
+	compatConfig: { MODE: 3 },
+	name: "DtTabGroup",
+	provide() {
+		return {
+			groupContext: this.provideObj,
+			setFocus: this.setFocus
+		};
+	},
+	props: {
+		label: {
+			type: String,
+			default: ""
+		},
+		selected: {
+			type: String,
+			default: ""
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		inverted: {
+			type: Boolean,
+			default: !1
+		},
+		borderless: {
+			type: Boolean,
+			default: !1
+		},
+		size: {
+			type: String,
+			default: "default",
+			validate(e) {
+				return r.includes(e);
+			}
+		},
+		tabListClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
+			default: ""
+		},
+		tabListChildProps: {
+			type: Object,
+			default: () => ({})
+		}
+	},
+	emits: ["change", "before-change"],
+	data() {
+		return {
+			provideObj: {
+				selected: "",
+				disabled: !1
+			},
+			focusId: null,
+			tabs: [],
+			TAB_LIST_SIZE_MODIFIERS: i,
+			TAB_LIST_KIND_MODIFIERS: n,
+			TAB_LIST_IMPORTANCE_MODIFIERS: t
+		};
+	},
+	watch: {
+		disabled: {
+			immediate: !0,
+			handler() {
+				this.provideObj.disabled = this.disabled;
+			}
+		},
+		selected: {
+			immediate: !0,
+			handler() {
+				this.provideObj.selected = this.selected;
+			}
+		}
+	},
+	mounted() {
+		this.updateSelected();
+	},
+	updated() {
+		this.updateSelected();
+	},
+	methods: {
+		updateSelected() {
+			this.provideObj.selected || (this.provideObj.selected = this.selected), this.tabs = this.getTabChildren();
+		},
+		setFocus(e) {
+			this.focusId = e;
+		},
+		getTabChildren() {
+			return Array.from(this.$refs.tabs.querySelectorAll(".d-tab")).map((e) => ({
+				context: e,
+				panelId: e.getAttribute("aria-controls")?.replace("dt-panel-", ""),
+				tabId: e.getAttribute("id")?.replace("dt-tab-", ""),
+				isSelected: e.getAttribute("aria-selected") === "true"
+			}));
+		},
+		onChange() {
+			this.$emit("change", { ...this.provideObj });
+		},
+		tabLeft() {
+			let e = this.getFocusedTabIndex();
+			if (e === -1) return;
+			let t = e - 1 < 0 ? this.tabs.length - 1 : e - 1;
+			this.selectFocusOnTab(t);
+		},
+		tabRight() {
+			let e = this.getFocusedTabIndex();
+			if (e === -1) return;
+			let t = e + 1 > this.tabs.length - 1 ? 0 : e + 1;
+			this.selectFocusOnTab(t);
+		},
+		selectFocusOnTab(e) {
+			let { context: t } = this.tabs[e];
+			t.focus();
+		},
+		selectTab(e) {
+			if (this.isSameTabClicked() || (this.$emit("before-change", e), e.defaultPrevented)) return;
+			let t = this.getFocusedTabIndex();
+			this.selectTabByIndex(t), this.onChange();
+		},
+		selectTabByIndex(e) {
+			let { context: t, panelId: n } = this.tabs[e];
+			this.provideObj.selected = n, t.focus();
+		},
+		getFocusedTabIndex() {
+			let e = this.tabs.findIndex((e) => this.focusId ? e.tabId === `${this.focusId}` : e.isSelected);
+			return e === -1 ? 0 : e;
+		},
+		onHomeButton() {
+			this.tabs.length !== 0 && this.tabs[0]?.context?.focus();
+		},
+		onEndButton() {
+			this.tabs.length !== 0 && this.tabs[this.tabs.length - 1]?.context?.focus();
+		},
+		isSameTabClicked() {
+			let e = this.tabs[this.getFocusedTabIndex()];
+			return this.provideObj.selected === e.panelId;
+		}
+	}
+}, f = { "data-qa": "dt-tab-group" }, p = ["aria-label"];
+function m(e, t, n, r, i, d) {
+	return c(), a("div", f, [o("div", s({
+		ref: "tabs",
+		class: [
+			"d-tablist",
+			i.TAB_LIST_SIZE_MODIFIERS[n.size],
+			{
+				[i.TAB_LIST_KIND_MODIFIERS.inverted]: n.inverted,
+				[i.TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: n.borderless
+			},
+			n.tabListClass
+		]
+	}, n.tabListChildProps, {
+		role: "tablist",
+		"aria-label": n.label,
+		onKeyup: [
+			t[0] || (t[0] = u((...e) => d.tabLeft && d.tabLeft(...e), ["left"])),
+			t[1] || (t[1] = u((...e) => d.tabRight && d.tabRight(...e), ["right"])),
+			t[2] || (t[2] = u((...e) => d.selectTab && d.selectTab(...e), ["enter"])),
+			t[3] || (t[3] = u((...e) => d.selectTab && d.selectTab(...e), ["space"]))
+		],
+		onClick: t[4] || (t[4] = (...e) => d.selectTab && d.selectTab(...e)),
+		onKeydown: [t[5] || (t[5] = u((...e) => d.onHomeButton && d.onHomeButton(...e), ["home"])), t[6] || (t[6] = u((...e) => d.onEndButton && d.onEndButton(...e), ["end"]))]
+	}), [l(e.$slots, "tabs")], 16, p), l(e.$slots, "default")]);
 }
-const N = /* @__PURE__ */ x(D, [["render", _]]);
-export {
-  N as default
-};
-//# sourceMappingURL=tab-group.js.map
+var h = /* @__PURE__ */ e(d, [["render", m]]);
+//#endregion
+export { h as default };
+
+//# sourceMappingURL=tab-group.js.map

package/dist/lib/tab/tab-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-group.js","sources":["../../../components/tab/tab_group.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-tab-group\"\n    :class=\"['d-tab-neux', { 'd-tab-neux--vertical': orientation === 'vertical' }]\"\n  >\n    <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->\n    <div\n      ref=\"tabs\"\n      :class=\"[\n        'd-tablist',\n        TAB_LIST_SIZE_MODIFIERS[String(size)],\n        TAB_ORIENTATION_MODIFIERS[orientation],\n        orientation !== 'vertical' && TAB_SPREAD_MODIFIERS[spread],\n        {\n          [TAB_LIST_KIND_MODIFIERS.inverted]: inverted,\n          [TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: borderless,\n        },\n        tabListClass,\n      ]\"\n      v-bind=\"tabListChildProps\"\n      role=\"tablist\"\n      :aria-label=\"label\"\n      :aria-orientation=\"orientation\"\n      @keydown.left=\"tabLeft\"\n      @keydown.right=\"tabRight\"\n      @keydown.up=\"tabUp\"\n      @keydown.down=\"tabDown\"\n      @keyup.enter=\"selectTab\"\n      @keyup.space=\"selectTab\"\n      @click=\"selectTab\"\n      @keydown.home.prevent=\"onHomeButton\"\n      @keydown.end.prevent=\"onEndButton\"\n    >\n      <!-- @slot Slot for Tabs -->\n      <slot name=\"tabs\" />\n    </div>\n    <!-- @slot Default slot for Panel -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport {\n  TAB_LIST_SIZES,\n  TAB_LIST_KIND_MODIFIERS,\n  TAB_LIST_IMPORTANCE_MODIFIERS,\n  TAB_LIST_SIZE_MODIFIERS,\n  TAB_ORIENTATIONS,\n  TAB_ORIENTATION_MODIFIERS,\n  TAB_ACTIVATION_MODES,\n  TAB_GROUP_KINDS,\n  TAB_SPREADS,\n  TAB_SPREAD_MODIFIERS,\n} from './tabs_constants';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtTabGroup',\n\n  provide () {\n    return {\n      groupContext: this.provideObj,\n      setFocus: this.setFocus,\n    };\n  },\n\n  props: {\n    /**\n     * Identifies the tab group\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The id of the selected tab panel which should be displayed\n     */\n    selected: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * If true, disables the tab group\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, applies inverted styles to the tab group\n     * @deprecated Use v-dt-mode directive instead.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, applies borderless styles to the tab group\n     * @values true, false\n     */\n    borderless: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls how tabs distribute available space within the tab list.\n     * @values none, grow, equal\n     */\n    spread: {\n      type: String,\n      default: 'none',\n      validator (value) {\n        return TAB_SPREADS.includes(value);\n      },\n    },\n\n    /**\n     * The orientation of the tab list\n     * @values horizontal, vertical\n     */\n    orientation: {\n      type: String,\n      default: 'horizontal',\n      validator (value) {\n        return TAB_ORIENTATIONS.includes(value);\n      },\n    },\n\n    /**\n     * If provided, applies size styles to the tab group\n     * @values 100, 200, 300, 400, 500\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator (size) {\n        return TAB_LIST_SIZES.includes(String(size));\n      },\n    },\n\n    /**\n     * Pass through classes, used to customize the tab list\n     */\n    tabListClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through props, used to customize the tab list\n     */\n    tabListChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * The visual style kind applied to tabs within this group.\n     * Maps to specific DtButton kind/importance combinations for selected/unselected states.\n     * @values default, muted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator (value) {\n        return TAB_GROUP_KINDS.includes(value);\n      },\n    },\n\n    /**\n     * If true, the selected tab renders with outlined importance instead of clear.\n     * @values true, false\n     */\n    outlined: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls whether tabs are selected on focus (auto) or on click/keypress (manual)\n     * @values auto, manual\n     */\n    activationMode: {\n      type: String,\n      default: 'manual',\n      validator (value) {\n        return TAB_ACTIVATION_MODES.includes(value);\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Change tab event with the arguments: selected id of the current tab and disabled value\n     *\n     * @event change\n     * @type {Object}\n     */\n    'change',\n\n    /**\n     * Before change tab event with the event argument, useful to perform validations and prevent changing tabs if neccessary.\n     *\n     * @event before-change\n     * @type {Event}\n     */\n    'before-change',\n  ],\n\n  data () {\n    return {\n      provideObj: {\n        selected: '', // the currently displayed tab id\n        disabled: false, // disable group\n        size: 300,\n        kind: 'default',\n        outlined: false,\n        orientation: 'horizontal',\n        spread: 'none',\n      },\n\n      focusId: null,\n      tabs: [],\n      TAB_LIST_SIZE_MODIFIERS,\n      TAB_LIST_KIND_MODIFIERS,\n      TAB_LIST_IMPORTANCE_MODIFIERS,\n      TAB_ORIENTATION_MODIFIERS,\n      TAB_SPREAD_MODIFIERS,\n    };\n  },\n\n  watch: {\n    disabled: {\n      immediate: true,\n      handler () {\n        this.provideObj.disabled = this.disabled;\n      },\n    },\n\n    selected: {\n      immediate: true,\n      handler () {\n        this.provideObj.selected = this.selected;\n      },\n    },\n\n    size: {\n      immediate: true,\n      handler () {\n        this.provideObj.size = this.size;\n      },\n    },\n\n    kind: {\n      immediate: true,\n      handler () {\n        this.provideObj.kind = this.kind;\n      },\n    },\n\n    outlined: {\n      immediate: true,\n      handler () {\n        this.provideObj.outlined = this.outlined;\n      },\n    },\n\n    orientation: {\n      immediate: true,\n      handler () {\n        this.provideObj.orientation = this.orientation;\n      },\n    },\n\n    spread: {\n      immediate: true,\n      handler () {\n        this.provideObj.spread = this.spread;\n      },\n    },\n  },\n\n  mounted () {\n    this.updateSelected();\n  },\n\n  updated () {\n    this.updateSelected();\n  },\n\n  methods: {\n    updateSelected () {\n      /**\n       * Prevent override tab selected by default\n       */\n      if (!this.provideObj.selected) {\n        this.provideObj.selected = this.selected;\n      }\n      this.tabs = this.getTabChildren();\n    },\n\n    setFocus (focusId) {\n      this.focusId = focusId;\n    },\n\n    getTabChildren () {\n      const tabs = Array.from(this.$refs.tabs.querySelectorAll('[role=\"tab\"]'));\n      return tabs\n        .map(el => {\n          return ({\n            context: el,\n            panelId: el.getAttribute('aria-controls')?.replace('dt-panel-', ''),\n            tabId: el.getAttribute('id')?.replace('dt-tab-', ''),\n            isSelected: el.getAttribute('aria-selected') === 'true',\n            isDisabled: el.getAttribute('aria-disabled') === 'true',\n          });\n        });\n    },\n\n    onChange () {\n      this.$emit('change', { ...this.provideObj });\n    },\n\n    tabLeft () {\n      if (this.orientation !== 'horizontal') return;\n      this.navigatePrevious();\n    },\n\n    tabRight () {\n      if (this.orientation !== 'horizontal') return;\n      this.navigateNext();\n    },\n\n    tabUp (event) {\n      if (this.orientation !== 'vertical') return;\n      event.preventDefault();\n      this.navigatePrevious();\n    },\n\n    tabDown (event) {\n      if (this.orientation !== 'vertical') return;\n      event.preventDefault();\n      this.navigateNext();\n    },\n\n    navigatePrevious () {\n      const index = this.getFocusedTabIndex();\n      if (index === -1) return;\n\n      const nextIndex = this.findNextTab(index, -1);\n      this.selectFocusOnTab(nextIndex);\n    },\n\n    navigateNext () {\n      const index = this.getFocusedTabIndex();\n      if (index === -1) return;\n\n      const nextIndex = this.findNextTab(index, 1);\n      this.selectFocusOnTab(nextIndex);\n    },\n\n    findNextTab (fromIndex, direction) {\n      const len = this.tabs.length;\n      return (fromIndex + direction + len) % len;\n    },\n\n    selectFocusOnTab (index) {\n      const { context, panelId, isDisabled } = this.tabs[index];\n      context.focus();\n      if (this.activationMode === 'auto' && !isDisabled) {\n        this.provideObj.selected = panelId;\n        this.onChange();\n      }\n    },\n\n    selectTab (event) {\n      if (this.isSameTabClicked()) return;\n\n      const index = this.getFocusedTabIndex();\n      if (this.tabs[index]?.isDisabled) return;\n\n      this.$emit('before-change', event);\n      if (event.defaultPrevented) return;\n\n      this.selectTabByIndex(index);\n      this.onChange();\n    },\n\n    selectTabByIndex (index) {\n      const { context, panelId } = this.tabs[index];\n      this.provideObj.selected = panelId;\n      context.focus();\n    },\n\n    getFocusedTabIndex () {\n      // Hot fix https://github.com/dialpad/dialtone/pull/849\n      // The main issue is that this.tabs is not being updated at the time this is being triggered.\n\n      const index = this.tabs.findIndex((context) =>\n        this.focusId ? context.tabId === `${this.focusId}` : context.isSelected,\n      );\n\n      return index === -1 ? 0 : index;\n    },\n\n    onHomeButton () {\n      if (this.tabs.length) this.selectFocusOnTab(0);\n    },\n\n    onEndButton () {\n      if (this.tabs.length) this.selectFocusOnTab(this.tabs.length - 1);\n    },\n\n    isSameTabClicked () {\n      const tab = this.tabs[this.getFocusedTabIndex()];\n      return this.provideObj.selected === tab.panelId;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","value","TAB_SPREADS","TAB_ORIENTATIONS","size","TAB_LIST_SIZES","TAB_GROUP_KINDS","TAB_ACTIVATION_MODES","TAB_LIST_SIZE_MODIFIERS","TAB_LIST_KIND_MODIFIERS","TAB_LIST_IMPORTANCE_MODIFIERS","TAB_ORIENTATION_MODIFIERS","TAB_SPREAD_MODIFIERS","focusId","el","_a","_b","event","index","nextIndex","fromIndex","direction","len","context","panelId","isDisabled","tab","_createElementBlock","$props","_createElementVNode","_mergeProps","$data","$options","args","_renderSlot","_ctx"],"mappings":"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"}
+{"version":3,"file":"tab-group.js","names":[],"sources":["../../../components/tab/tab_group.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-tab-group\"\n  >\n    <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->\n    <div\n      ref=\"tabs\"\n      :class=\"[\n        'd-tablist',\n        TAB_LIST_SIZE_MODIFIERS[size],\n        {\n          [TAB_LIST_KIND_MODIFIERS.inverted]: inverted,\n          [TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: borderless,\n        },\n        tabListClass,\n      ]\"\n      v-bind=\"tabListChildProps\"\n      role=\"tablist\"\n      :aria-label=\"label\"\n      @keyup.left=\"tabLeft\"\n      @keyup.right=\"tabRight\"\n      @keyup.enter=\"selectTab\"\n      @keyup.space=\"selectTab\"\n      @click=\"selectTab\"\n      @keydown.home=\"onHomeButton\"\n      @keydown.end=\"onEndButton\"\n    >\n      <!-- @slot Slot for Tabs -->\n      <slot name=\"tabs\" />\n    </div>\n    <!-- @slot Default slot for Panel -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport {\n  TAB_LIST_SIZES,\n  TAB_LIST_KIND_MODIFIERS,\n  TAB_LIST_IMPORTANCE_MODIFIERS,\n  TAB_LIST_SIZE_MODIFIERS,\n} from './tabs_constants';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtTabGroup',\n\n  provide () {\n    return {\n      groupContext: this.provideObj,\n      setFocus: this.setFocus,\n    };\n  },\n\n  props: {\n    /**\n     * Identifies the tab group\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The id of the selected tab panel which should be displayed\n     */\n    selected: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * If true, disables the tab group\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, applies inverted styles to the tab group\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, applies borderless styles to the tab group\n     * @values true, false\n     */\n    borderless: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If provided, applies size styles to the tab group\n     * @values default, sm\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validate (size) {\n        return TAB_LIST_SIZES.includes(size);\n      },\n    },\n\n    /**\n     * Pass through classes, used to customize the tab list\n     */\n    tabListClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through props, used to customize the tab list\n     */\n    tabListChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Change tab event with the arguments: selected id of the current tab and disabled value\n     *\n     * @event change\n     * @type {Object}\n     */\n    'change',\n\n    /**\n     * Before change tab event with the event argument, useful to perform validations and prevent changing tabs if neccessary.\n     *\n     * @event before-change\n     * @type {Event}\n     */\n    'before-change',\n  ],\n\n  data () {\n    return {\n      provideObj: {\n        selected: '', // the currently displayed tab id\n        disabled: false, // disable group\n      },\n\n      focusId: null,\n      tabs: [],\n      TAB_LIST_SIZE_MODIFIERS,\n      TAB_LIST_KIND_MODIFIERS,\n      TAB_LIST_IMPORTANCE_MODIFIERS,\n    };\n  },\n\n  watch: {\n    disabled: {\n      immediate: true,\n      handler () {\n        this.provideObj.disabled = this.disabled;\n      },\n    },\n\n    selected: {\n      immediate: true,\n      handler () {\n        this.provideObj.selected = this.selected;\n      },\n    },\n  },\n\n  mounted () {\n    this.updateSelected();\n  },\n\n  updated () {\n    this.updateSelected();\n  },\n\n  methods: {\n    updateSelected () {\n      /**\n       * Prevent override tab selected by default\n       */\n      if (!this.provideObj.selected) {\n        this.provideObj.selected = this.selected;\n      }\n      this.tabs = this.getTabChildren();\n    },\n\n    setFocus (focusId) {\n      this.focusId = focusId;\n    },\n\n    getTabChildren () {\n      const tabs = Array.from(this.$refs.tabs.querySelectorAll('.d-tab'));\n      return tabs\n        .map(el => {\n          return ({\n            context: el,\n            panelId: el.getAttribute('aria-controls')?.replace('dt-panel-', ''),\n            tabId: el.getAttribute('id')?.replace('dt-tab-', ''),\n            isSelected: el.getAttribute('aria-selected') === 'true',\n          });\n        });\n    },\n\n    onChange () {\n      this.$emit('change', { ...this.provideObj });\n    },\n\n    tabLeft () {\n      const index = this.getFocusedTabIndex();\n      if (index === -1) return;\n\n      const indexElement = index - 1 < 0 ? this.tabs.length - 1 : index - 1;\n      this.selectFocusOnTab(indexElement);\n    },\n\n    tabRight () {\n      const index = this.getFocusedTabIndex();\n      if (index === -1) return;\n\n      const indexElement = index + 1 > this.tabs.length - 1 ? 0 : index + 1;\n      this.selectFocusOnTab(indexElement);\n    },\n\n    selectFocusOnTab (index) {\n      const { context } = this.tabs[index];\n      context.focus();\n    },\n\n    selectTab (event) {\n      if (this.isSameTabClicked()) return;\n\n      this.$emit('before-change', event);\n      if (event.defaultPrevented) return;\n\n      const index = this.getFocusedTabIndex();\n\n      this.selectTabByIndex(index);\n      this.onChange();\n    },\n\n    selectTabByIndex (index) {\n      const { context, panelId } = this.tabs[index];\n      this.provideObj.selected = panelId;\n      context.focus();\n    },\n\n    getFocusedTabIndex () {\n      // Hot fix https://github.com/dialpad/dialtone/pull/849\n      // The main issue is that this.tabs is not being updated at the time this is being triggered.\n\n      const index = this.tabs.findIndex((context) =>\n        this.focusId ? context.tabId === `${this.focusId}` : context.isSelected,\n      );\n\n      return index === -1 ? 0 : index;\n    },\n\n    onHomeButton () {\n      if (this.tabs.length === 0) return;\n      this.tabs[0]?.context?.focus();\n    },\n\n    onEndButton () {\n      if (this.tabs.length === 0) return;\n      this.tabs[this.tabs.length - 1]?.context?.focus();\n    },\n\n    isSameTabClicked () {\n      const tab = this.tabs[this.getFocusedTabIndex()];\n      return this.provideObj.selected === tab.panelId;\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/tab/tab-panel.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("../../common/mixins/modal.cjs"),n=require("../../common/utils/index.cjs"),l=require("vue"),d=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),o={compatConfig:{MODE:3},name:"DtTabPanel",mixins:[s.default],inject:["groupContext"],props:{id:{type:String,required:!0},tabId:{type:String,required:!0},hidden:{type:Boolean,default:!1},tabPanelClass:{type:[String,Array,Object],default:""}},data(){return{isFirstElementFocusable:!1}},computed:{hidePanel(){return this.groupContext.selected!==this.id||this.hidden}},async mounted(){const e=await this.getFirstFocusableElement(n.returnFirstEl(this.$el));e?this.isFirstElementFocusable=this.isFirstElementOfPanel(e):this.isFirstElementFocusable=!1},methods:{isFirstElementOfPanel(e){let t=e,i=!0;for(;t;){if(t.previousElementSibling!==null){i=!1;break}t=t.parentNode!==n.returnFirstEl(this.$el)?t.parentNode:null}return i}}},u=["id","tabindex","aria-labelledby","aria-hidden"];function c(e,t,i,m,r,a){return l.withDirectives((l.openBlock(),l.createElementBlock("div",{id:`dt-panel-${i.id}`,role:"tabpanel",tabindex:r.isFirstElementFocusable?-1:0,"aria-labelledby":`dt-tab-${i.tabId}`,"aria-hidden":`${a.hidePanel}`,class:l.normalizeClass(i.tabPanelClass),"data-qa":"dt-tab-panel"},[l.renderSlot(e.$slots,"default")],10,u)),[[l.vShow,!a.hidePanel]])}const b=d._(o,[["render",c]]);exports.default=b;
-//# sourceMappingURL=tab-panel.cjs.map
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../../common/mixins/modal.cjs`);let r=require(`vue`);var i={compatConfig:{MODE:3},name:`DtTabPanel`,mixins:[n.default],inject:[`groupContext`],props:{id:{type:String,required:!0},tabId:{type:String,required:!0},hidden:{type:Boolean,default:!1},tabPanelClass:{type:[String,Array,Object],default:``}},data(){return{isFirstElementFocusable:!1}},computed:{hidePanel(){return this.groupContext.selected!==this.id||this.hidden}},async mounted(){let t=await this.getFirstFocusableElement(e.returnFirstEl(this.$el));t?this.isFirstElementFocusable=this.isFirstElementOfPanel(t):this.isFirstElementFocusable=!1},methods:{isFirstElementOfPanel(t){let n=t,r=!0;for(;n;){if(n.previousElementSibling!==null){r=!1;break}n=n.parentNode===e.returnFirstEl(this.$el)?null:n.parentNode}return r}}},a=[`id`,`tabindex`,`aria-labelledby`,`aria-hidden`];function o(e,t,n,i,o,s){return(0,r.withDirectives)(((0,r.openBlock)(),(0,r.createElementBlock)(`div`,{id:`dt-panel-${n.id}`,role:`tabpanel`,tabindex:o.isFirstElementFocusable?-1:0,"aria-labelledby":`dt-tab-${n.tabId}`,"aria-hidden":`${s.hidePanel}`,class:(0,r.normalizeClass)(n.tabPanelClass),"data-qa":`dt-tab-panel`},[(0,r.renderSlot)(e.$slots,`default`)],10,a)),[[r.vShow,!s.hidePanel]])}var s=t.t(i,[[`render`,o]]);exports.default=s;
+//# sourceMappingURL=tab-panel.cjs.map

package/dist/lib/tab/tab-panel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panel.cjs","sources":["../../../components/tab/tab_panel.vue"],"sourcesContent":["<template>\n  <div\n    v-show=\"!hidePanel\"\n    :id=\"`dt-panel-${id}`\"\n    role=\"tabpanel\"\n    :tabindex=\"isFirstElementFocusable ? -1 : 0\"\n    :aria-labelledby=\"`dt-tab-${tabId}`\"\n    :aria-hidden=\"`${hidePanel}`\"\n    :class=\"tabPanelClass\"\n    data-qa=\"dt-tab-panel\"\n  >\n    <!-- @slot Default slot for Tab Panel -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\nimport { returnFirstEl } from '@/common/utils';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtTabPanel',\n\n  mixins: [Modal],\n\n  inject: ['groupContext'],\n\n  props: {\n    /**\n     * Id of the panel\n     */\n    id: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Id of the associated tab\n     */\n    tabId: {\n      type: String,\n      required: true,\n    },\n\n    /**\n    * If true, hides the tab content\n     * @values true, false\n    */\n    hidden: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Used to customize the tab element\n     */\n    tabPanelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      isFirstElementFocusable: false,\n    };\n  },\n\n  computed: {\n    hidePanel () {\n      return this.groupContext.selected !== this.id || this.hidden;\n    },\n  },\n\n  async mounted () {\n    const firstFocusableElement = await this.getFirstFocusableElement(returnFirstEl(this.$el));\n\n    if (!firstFocusableElement) {\n      this.isFirstElementFocusable = false;\n    } else {\n      // If the first focusable element isn't the first element in the panel,\n      // then we need to set the panel tabindex to 0.\n      // See notes in https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/\n      this.isFirstElementFocusable = this.isFirstElementOfPanel(firstFocusableElement);\n    }\n  },\n\n  methods: {\n    isFirstElementOfPanel (element) {\n      let current = element;\n      let isFirstElement = true;\n\n      while (current) {\n        if (current.previousElementSibling !== null) {\n          isFirstElement = false;\n          break;\n        }\n        current = current.parentNode !== returnFirstEl(this.$el) ? current.parentNode : null;\n      }\n\n      return isFirstElement;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","Modal","firstFocusableElement","returnFirstEl","element","current","isFirstElement","_createElementBlock","$props","$data","$options","_renderSlot","_ctx"],"mappings":"kRAwBKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,aAEN,OAAQ,CAACC,EAAAA,OAAK,EAEd,OAAQ,CAAC,cAAc,EAEvB,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAU,IAMZ,MAAO,CACL,KAAM,OACN,SAAU,IAOZ,OAAQ,CACN,KAAM,QACN,QAAS,IAMX,cAAe,CACb,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,KAIb,MAAQ,CACN,MAAO,CACL,wBAAyB,GAE7B,EAEA,SAAU,CACR,WAAa,CACX,OAAO,KAAK,aAAa,WAAa,KAAK,IAAM,KAAK,MACxD,GAGF,MAAM,SAAW,CACf,MAAMC,EAAwB,MAAM,KAAK,yBAAyBC,EAAAA,cAAc,KAAK,GAAG,CAAC,EAEpFD,EAMH,KAAK,wBAA0B,KAAK,sBAAsBA,CAAqB,EAL/E,KAAK,wBAA0B,EAOnC,EAEA,QAAS,CACP,sBAAuBE,EAAS,CAC9B,IAAIC,EAAUD,EACVE,EAAiB,GAErB,KAAOD,GAAS,CACd,GAAIA,EAAQ,yBAA2B,KAAM,CAC3CC,EAAiB,GACjB,KACF,CACAD,EAAUA,EAAQ,aAAeF,EAAAA,cAAc,KAAK,GAAG,EAAIE,EAAQ,WAAa,IAClF,CAEA,OAAOC,CACT,EAEJ,qHA3GEC,EAAAA,mBAYM,MAAA,CAVH,eAAgBC,EAAA,EAAE,GACnB,KAAK,WACJ,SAAUC,EAAA,wBAAuB,GAAA,EACjC,4BAA2BD,EAAA,KAAK,GAChC,iBAAgBE,EAAA,SAAS,GACzB,uBAAOF,EAAA,aAAa,EACrB,UAAQ,iBAGRG,aAAQC,EAAA,OAAA,SAAA,qBAVCF,EAAA,SAAS"}
+{"version":3,"file":"tab-panel.cjs","names":[],"sources":["../../../components/tab/tab_panel.vue"],"sourcesContent":["<template>\n  <div\n    v-show=\"!hidePanel\"\n    :id=\"`dt-panel-${id}`\"\n    role=\"tabpanel\"\n    :tabindex=\"isFirstElementFocusable ? -1 : 0\"\n    :aria-labelledby=\"`dt-tab-${tabId}`\"\n    :aria-hidden=\"`${hidePanel}`\"\n    :class=\"tabPanelClass\"\n    data-qa=\"dt-tab-panel\"\n  >\n    <!-- @slot Default slot for Tab Panel -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\nimport { returnFirstEl } from '@/common/utils';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtTabPanel',\n\n  mixins: [Modal],\n\n  inject: ['groupContext'],\n\n  props: {\n    /**\n     * Id of the panel\n     */\n    id: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Id of the associated tab\n     */\n    tabId: {\n      type: String,\n      required: true,\n    },\n\n    /**\n    * If true, hides the tab content\n     * @values true, false\n    */\n    hidden: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Used to customize the tab element\n     */\n    tabPanelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      isFirstElementFocusable: false,\n    };\n  },\n\n  computed: {\n    hidePanel () {\n      return this.groupContext.selected !== this.id || this.hidden;\n    },\n  },\n\n  async mounted () {\n    const firstFocusableElement = await this.getFirstFocusableElement(returnFirstEl(this.$el));\n\n    if (!firstFocusableElement) {\n      this.isFirstElementFocusable = false;\n    } else {\n      // If the first focusable element isn't the first element in the panel,\n      // then we need to set the panel tabindex to 0.\n      // See notes in https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/\n      this.isFirstElementFocusable = this.isFirstElementOfPanel(firstFocusableElement);\n    }\n  },\n\n  methods: {\n    isFirstElementOfPanel (element) {\n      let current = element;\n      let isFirstElement = true;\n\n      while (current) {\n        if (current.previousElementSibling !== null) {\n          isFirstElement = false;\n          break;\n        }\n        current = current.parentNode !== returnFirstEl(this.$el) ? current.parentNode : null;\n      }\n\n      return isFirstElement;\n    },\n  },\n};\n</script>\n"],"mappings":"6SAwBA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,aAEN,OAAQ,CAAC,EAAA,QAAM,CAEf,OAAQ,CAAC,eAAe,CAExB,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAU,GACX,CAKD,MAAO,CACL,KAAM,OACN,SAAU,GACX,CAMD,OAAQ,CACN,KAAM,QACN,QAAS,GACV,CAKD,cAAe,CACb,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,wBAAyB,GAC1B,EAGH,SAAU,CACR,WAAa,CACX,OAAO,KAAK,aAAa,WAAa,KAAK,IAAM,KAAK,QAEzD,CAED,MAAM,SAAW,CACf,IAAM,EAAwB,MAAM,KAAK,yBAAyB,EAAA,cAAc,KAAK,IAAI,CAAC,CAErF,EAMH,KAAK,wBAA0B,KAAK,sBAAsB,EAAsB,CALhF,KAAK,wBAA0B,IASnC,QAAS,CACP,sBAAuB,EAAS,CAC9B,IAAI,EAAU,EACV,EAAiB,GAErB,KAAO,GAAS,CACd,GAAI,EAAQ,yBAA2B,KAAM,CAC3C,EAAiB,GACjB,MAEF,EAAU,EAAQ,aAAe,EAAA,cAAc,KAAK,IAAG,CAAyB,KAArB,EAAQ,WAGrE,OAAO,GAEV,CACF,oJA/FO,MAAA,CAVH,GAAE,YAAc,EAAA,KACjB,KAAK,WACJ,SAAU,EAAA,wBAAuB,GAAA,EACjC,kBAAe,UAAY,EAAA,QAC3B,cAAW,GAAK,EAAA,YAChB,OAAA,EAAA,EAAA,gBAAO,EAAA,cAAa,CACrB,UAAQ,kCAGA,EAAA,OAAA,UAAA,CAAA,CAAA,GAAA,EAAA,EAAA,CAAA,CAAA,EAAA,MAAA,CAVC,EAAA,UAAS,CAAA,CAAA"}