@openc3/vue-common 6.10.2 → 6.10.4

package/dist/{TargetPacketItemChooser-DGcXvdTX.js → TargetPacketItemChooser-DDqBQTWC.js}

@@ -1,7 +1,7 @@
-import { y as I, f as b } from "./UpgradeToEnterpriseDialog.vue_vue_type_style_index_0_scoped_2c757408_lang-B8ikVCn7.js";
-import { resolveComponent as o, createElementBlock as y, openBlock as r, createVNode as c, createBlock as N, createCommentVNode as h, withCtx as m, createTextVNode as f, toDisplayString as T, normalizeClass as v, Fragment as A } from "vue";
-import { _ as D } from "./CustomIcon-DTfsnDJn.js";
-const L = {
+import { y as v, f as I } from "./UpgradeToEnterpriseDialog.vue_vue_type_style_index_0_scoped_dda5adfc_lang-NXWdTcR2.js";
+import { resolveComponent as h, createElementBlock as y, openBlock as n, createVNode as c, createBlock as N, createCommentVNode as r, withCtx as u, createTextVNode as p, toDisplayString as T, normalizeClass as A, Fragment as D } from "vue";
+import { _ as L } from "./CustomIcon-B9m73Gqm.js";
+const P = {
   props: {
     allowAll: {
       type: Boolean,
@@ -51,7 +51,7 @@ const L = {
       type: String,
       default: "tlm",
       // TODO: add validators throughout
-      validator: (e) => ["cmd", "tlm"].includes(e)
+      validator: (t) => ["cmd", "tlm"].includes(t)
     },
     unknown: {
       type: Boolean,
@@ -76,20 +76,24 @@ const L = {
     showQueueSelect: {
       type: Boolean,
       default: !0
+    },
+    parameterHazardous: {
+      type: Boolean,
+      default: !1
     }
   },
   emits: ["on-set", "addItem"],
   data() {
-    var e, t, s;
+    var t, e, l;
     return {
       targetNames: [],
-      selectedTargetName: (e = this.initialTargetName) == null ? void 0 : e.toUpperCase(),
+      selectedTargetName: (t = this.initialTargetName) == null ? void 0 : t.toUpperCase(),
       packetNames: [],
-      selectedPacketName: (t = this.initialPacketName) == null ? void 0 : t.toUpperCase(),
+      selectedPacketName: (e = this.initialPacketName) == null ? void 0 : e.toUpperCase(),
       queueNames: [{ label: "None", value: null }],
       selectedQueueName: null,
       itemNames: [],
-      selectedItemName: (s = this.initialItemName) == null ? void 0 : s.toUpperCase(),
+      selectedItemName: (l = this.initialItemName) == null ? void 0 : l.toUpperCase(),
       valueTypes: ["CONVERTED", "RAW"],
       selectedValueType: "CONVERTED",
       reductionModes: [
@@ -148,50 +152,62 @@ const L = {
       return this.showLatest && this.mode === "tlm";
     },
     arrayIndexes: function() {
-      let e = this.itemNames.findIndex(
-        (s) => s.value === this.selectedItemName
-      ), t = [...Array(this.itemNames[e].array).keys()];
-      return (this.allowAll || this.allowAllArrayIndex) && t.unshift(this.ALL.label), t;
+      let t = this.itemNames.findIndex(
+        (l) => l.value === this.selectedItemName
+      ), e = [...Array(this.itemNames[t].array).keys()];
+      return (this.allowAll || this.allowAllArrayIndex) && e.unshift(this.ALL.label), e;
     },
     itemIsArray: function() {
-      let e = this.itemNames.findIndex(
-        (t) => t.value === this.selectedItemName
+      let t = this.itemNames.findIndex(
+        (e) => e.value === this.selectedItemName
       );
-      return !(e === -1 || isNaN(this.itemNames[e].array));
+      return !(t === -1 || isNaN(this.itemNames[t].array));
+    },
+    isHazardous: function() {
+      return this.hazardous || this.parameterHazardous;
     }
   },
   watch: {
-    initialTargetName: function(e) {
-      e && (this.selectedTargetName = e.toUpperCase());
+    initialTargetName: function(t) {
+      t && (this.selectedTargetName = t.toUpperCase());
     },
-    initialPacketName: function(e) {
-      e && (this.selectedPacketName = e.toUpperCase());
+    initialPacketName: function(t) {
+      t && (this.selectedPacketName = t.toUpperCase());
     },
-    initialItemName: function(e) {
-      e && (this.selectedItemName = e.toUpperCase());
+    initialItemName: function(t) {
+      t && (this.selectedItemName = t.toUpperCase());
     },
-    mode: function(e, t) {
+    mode: function(t, e) {
       this.selectedPacketName = null, this.selectedItemName = null, this.targetNameChanged(this.selectedTargetName);
     },
-    chooseItem: function(e, t) {
-      e ? this.updateItems() : this.itemNames = [];
+    chooseItem: function(t, e) {
+      t ? this.updateItems() : this.itemNames = [];
     },
-    itemIsArray: function(e) {
-      e ? this.selectedArrayIndex || (this.selectedArrayIndex = 0) : this.selectedArrayIndex = null;
+    itemIsArray: function(t) {
+      t ? this.selectedArrayIndex || (this.selectedArrayIndex = 0) : this.selectedArrayIndex = null;
     }
   },
   created() {
-    this.internalDisabled = !0, this.api = new I(), this.mode === "cmd" && b.get("/openc3-api/queues").then((e) => {
-      this.queueNames = [{ label: "None", value: null }], e.data && Array.isArray(e.data) && e.data.forEach((t) => {
-        this.queueNames.push({ label: t.name, value: t.name });
+    this.internalDisabled = !0, this.api = new v(), this.mode === "cmd" && I.get("/openc3-api/queues").then((t) => {
+      this.queueNames = [{ label: "None", value: null }], t.data && Array.isArray(t.data) && t.data.forEach((e) => {
+        this.queueNames.push({ label: e.name, value: e.name });
       });
-    }).catch((e) => {
-      console.error("Error fetching queues:", e);
-    }), this.api.get_target_names().then((e) => {
-      this.targetNames = e.flatMap((t) => t == "UNKNOWN" ? [] : { label: t, value: t }), this.allowAllTargets && this.targetNames.unshift(this.ALL), this.selectedTargetName ? this.updatePackets() : (this.selectedTargetName = this.targetNames[0].value, this.targetNameChanged(this.selectedTargetName)), this.unknown && this.targetNames.push(this.UNKNOWN);
+    }).catch((t) => {
+      console.error("Error fetching queues:", t);
+    }), this.api.get_target_names().then((t) => {
+      this.targetNames = t.flatMap((e) => e == "UNKNOWN" ? [] : { label: e, value: e }), this.allowAllTargets && this.targetNames.unshift(this.ALL), this.selectedTargetName ? this.updatePackets() : (this.selectedTargetName = this.targetNames[0].value, this.targetNameChanged(this.selectedTargetName)), this.unknown && this.targetNames.push(this.UNKNOWN);
     });
   },
   methods: {
+    selectOnFocus: function(t) {
+      this.$nextTick(() => {
+        const e = this.$refs[t];
+        if (e) {
+          const l = e.$el.querySelector("input");
+          l && l.select();
+        }
+      });
+    },
     updatePackets: function() {
       if (this.selectedTargetName === "UNKNOWN") {
         this.packetNames = [this.UNKNOWN], this.selectedPacketName = this.packetNames[0].value, this.updatePacketDetails(this.UNKNOWN.value), this.description = "UNKNOWN";
@@ -202,41 +218,41 @@ const L = {
         return;
       }
       this.internalDisabled = !0;
-      const e = this.mode === "tlm" ? "get_all_tlm_names" : "get_all_cmd_names";
-      this.api[e](this.selectedTargetName, this.hidden).then((t) => {
-        this.packetNames = t.map((i) => ({
-          label: i,
-          value: i
-        })), this.allowAll && this.packetNames.unshift(this.ALL), this.includeLatestPacketInDropdown && this.packetNames.unshift(this.LATEST), this.selectedPacketName || (this.packetNames.length === 0 ? this.selectedPacketName = null : (this.selectedPacketName = this.packetNames[0].value, this.selectedPacketName === "LATEST" && this.packetNames.length > 1 && (this.selectedPacketName = this.packetNames[1].value))), this.updatePacketDetails(this.selectedPacketName), this.packetNames.find((i) => i.value === this.selectedPacketName) && this.chooseItem && this.updateItems(), this.internalDisabled = !1;
+      const t = this.mode === "tlm" ? "get_all_tlm_names" : "get_all_cmd_names";
+      this.api[t](this.selectedTargetName, this.hidden).then((e) => {
+        this.packetNames = e.map((d) => ({
+          label: d,
+          value: d
+        })), this.allowAll && this.packetNames.unshift(this.ALL), this.includeLatestPacketInDropdown && this.packetNames.unshift(this.LATEST), this.selectedPacketName || (this.packetNames.length === 0 ? this.selectedPacketName = null : (this.selectedPacketName = this.packetNames[0].value, this.selectedPacketName === "LATEST" && this.packetNames.length > 1 && (this.selectedPacketName = this.packetNames[1].value))), this.updatePacketDetails(this.selectedPacketName), this.packetNames.find((d) => d.value === this.selectedPacketName) && this.chooseItem && this.updateItems(), this.internalDisabled = !1;
       });
     },
     updateItems: function() {
       if (this.selectedPacketName !== "ALL")
         if (this.internalDisabled = !0, this.selectedPacketName === "LATEST")
-          this.api.get_all_tlm_item_names(this.selectedTargetName).then((e) => {
-            this.itemNames = e.map((t) => ({
-              label: t,
-              value: t,
-              description: `LATEST ${t}`
+          this.api.get_all_tlm_item_names(this.selectedTargetName).then((t) => {
+            this.itemNames = t.map((e) => ({
+              label: e,
+              value: e,
+              description: `LATEST ${e}`
               // Don't handle array for LATEST
             })), this.finishUpdateItems();
           });
         else {
-          const e = this.mode === "tlm" ? "get_tlm" : "get_cmd";
-          this.api[e](this.selectedTargetName, this.selectedPacketName).then(
-            (t) => {
-              let s = [];
-              t.items.forEach((i) => {
-                i.hidden || s.push(i);
-              }), this.itemNames = s.map((i) => {
-                let a = i.name;
-                return i.data_type == "DERIVED" && (a += " *"), {
+          const t = this.mode === "tlm" ? "get_tlm" : "get_cmd";
+          this.api[t](this.selectedTargetName, this.selectedPacketName).then(
+            (e) => {
+              let l = [];
+              e.items.forEach((d) => {
+                d.hidden || l.push(d);
+              }), this.itemNames = l.map((d) => {
+                let a = d.name;
+                return d.data_type == "DERIVED" && (a += " *"), {
                   label: a,
-                  value: i.name,
-                  description: i.description,
-                  array: i.array_size / i.bit_size
+                  value: d.name,
+                  description: d.description,
+                  array: d.array_size / d.bit_size
                 };
-              }), this.itemNames.sort((i, a) => i.label > a.label ? 1 : -1), this.finishUpdateItems();
+              }), this.itemNames.sort((d, a) => d.label > a.label ? 1 : -1), this.finishUpdateItems();
             }
           );
         }
@@ -252,14 +268,14 @@ const L = {
         queueName: this.selectedQueueName
       }), this.internalDisabled = !1;
     },
-    targetNameChanged: function(e) {
-      this.selectedTargetName = e, this.selectedPacketName = "", this.selectedItemName = "", e !== null && this.updatePackets();
+    targetNameChanged: function(t) {
+      this.selectedTargetName = t, this.selectedPacketName = "", this.selectedItemName = "", t !== null && this.updatePackets();
     },
-    packetNameChanged: function(e) {
-      this.selectedItemName = "", e !== null && this.updatePacketDetails(e);
+    packetNameChanged: function(t) {
+      this.selectedItemName = "", t !== null && this.updatePacketDetails(t);
     },
-    queueNameChanged: function(e) {
-      this.selectedQueueName = e, this.$emit("on-set", {
+    queueNameChanged: function(t) {
+      this.selectedQueueName = t, this.$emit("on-set", {
         targetName: this.selectedTargetName,
         packetName: this.selectedPacketName,
         itemName: this.selectedItemNameWIndex,
@@ -269,20 +285,20 @@ const L = {
         queueName: this.selectedQueueName
       });
     },
-    updatePacketDetails: function(e) {
-      if (e === "ALL")
+    updatePacketDetails: function(t) {
+      if (t === "ALL")
         this.itemsDisabled = !0, this.internalDisabled = !1;
-      else if (e === "LATEST")
+      else if (t === "LATEST")
         this.itemsDisabled = !1, this.selectedPacketName = "LATEST", this.description = "Latest values from all packets", this.hazardous = !1;
       else {
         this.itemsDisabled = !1;
-        const t = this.packetNames.find((s) => e === s.value);
-        if (t) {
-          this.selectedPacketName = t.value;
-          const s = this.mode === "tlm" ? "get_tlm" : "get_cmd";
-          this.api[s](this.selectedTargetName, this.selectedPacketName).then(
-            (i) => {
-              this.description = i.description, this.hazardous = i.hazardous;
+        const e = this.packetNames.find((l) => t === l.value);
+        if (e) {
+          this.selectedPacketName = e.value;
+          const l = this.mode === "tlm" ? "get_tlm" : "get_cmd";
+          this.api[l](this.selectedTargetName, this.selectedPacketName).then(
+            (d) => {
+              this.description = d.description, this.hazardous = d.hazardous;
             }
           );
         }
@@ -297,9 +313,9 @@ const L = {
         queueName: this.selectedQueueName
       });
     },
-    itemNameChanged: function(e) {
-      const t = this.itemNames.find((s) => e === s.value);
-      t && (this.selectedItemName = t.value, this.description = t.description, this.$emit("on-set", {
+    itemNameChanged: function(t) {
+      const e = this.itemNames.find((l) => t === l.value);
+      e && (this.selectedItemName = e.value, this.description = e.description, this.$emit("on-set", {
         targetName: this.selectedTargetName,
         packetName: this.selectedPacketName,
         itemName: this.selectedItemNameWIndex,
@@ -309,7 +325,7 @@ const L = {
         queueName: this.selectedQueueName
       }));
     },
-    indexChanged: function(e) {
+    indexChanged: function(t) {
       this.$emit("on-set", {
         targetName: this.selectedTargetName,
         packetName: this.selectedPacketName,
@@ -337,16 +353,16 @@ const L = {
       });
     },
     allTargetPacketItems: function() {
-      this.packetNames.forEach((e) => {
-        if (e === this.ALL) return;
-        const t = this.mode === "tlm" ? "get_tlm" : "get_cmd";
-        this.api[t](this.selectedTargetName, e.value).then(
-          (s) => {
-            s.items.forEach((i) => {
-              i.hidden || this.$emit("addItem", {
+      this.packetNames.forEach((t) => {
+        if (t === this.ALL) return;
+        const e = this.mode === "tlm" ? "get_tlm" : "get_cmd";
+        this.api[e](this.selectedTargetName, t.value).then(
+          (l) => {
+            l.items.forEach((d) => {
+              d.hidden || this.$emit("addItem", {
                 targetName: this.selectedTargetName,
-                packetName: e.value,
-                itemName: i.name,
+                packetName: t.value,
+                itemName: d.name,
                 valueType: this.selectedValueType,
                 reduced: this.selectedReduced,
                 reducedType: this.selectedReducedType
@@ -357,11 +373,11 @@ const L = {
       });
     },
     allPacketItems: function() {
-      this.itemNames.forEach((e) => {
-        e !== this.ALL && this.$emit("addItem", {
+      this.itemNames.forEach((t) => {
+        t !== this.ALL && this.$emit("addItem", {
           targetName: this.selectedTargetName,
           packetName: this.selectedPacketName,
-          itemName: e.value,
+          itemName: t.value,
           valueType: this.selectedValueType,
           reduced: this.selectedReduced,
           reducedType: this.selectedReducedType
@@ -369,244 +385,277 @@ const L = {
       });
     }
   }
-}, P = { class: "pt-4 pb-4" };
-function V(e, t, s, i, a, l) {
-  const n = o("v-autocomplete"), u = o("v-col"), k = o("v-combobox"), g = o("v-btn"), p = o("v-row");
-  return r(), y("div", P, [
-    c(p, {
+}, V = { class: "pt-4 pb-4" };
+function x(t, e, l, d, a, s) {
+  const o = h("v-autocomplete"), m = h("v-col"), k = h("v-combobox"), g = h("v-btn"), f = h("v-row"), b = h("v-icon");
+  return n(), y("div", V, [
+    c(f, {
       class: "align-center",
-      "no-gutters": !s.vertical
+      "no-gutters": !l.vertical
     }, {
-      default: m(() => [
-        c(u, {
-          cols: l.colSize,
+      default: u(() => [
+        c(m, {
+          cols: s.colSize,
           class: "tpic-select pr-4",
           "data-test": "select-target"
         }, {
-          default: m(() => [
-            c(n, {
+          default: u(() => [
+            c(o, {
+              ref: "targetAutocomplete",
               modelValue: a.selectedTargetName,
               "onUpdate:modelValue": [
-                t[0] || (t[0] = (d) => a.selectedTargetName = d),
-                l.targetNameChanged
+                e[0] || (e[0] = (i) => a.selectedTargetName = i),
+                s.targetNameChanged
               ],
               label: "Select Target",
               "hide-details": "",
+              "auto-select-first": "",
               density: "compact",
               variant: "outlined",
-              disabled: l.autocompleteDisabled || s.lockTarget,
+              disabled: s.autocompleteDisabled || l.lockTarget,
               items: a.targetNames,
               "item-title": "label",
-              "item-value": "value"
+              "item-value": "value",
+              onFocus: e[1] || (e[1] = (i) => s.selectOnFocus("targetAutocomplete"))
             }, null, 8, ["modelValue", "disabled", "items", "onUpdate:modelValue"])
           ]),
           _: 1
         }, 8, ["cols"]),
-        c(u, {
-          cols: l.colSize,
+        c(m, {
+          cols: s.colSize,
           class: "tpic-select pr-4",
           "data-test": "select-packet"
         }, {
-          default: m(() => [
-            c(n, {
+          default: u(() => [
+            c(o, {
+              ref: "packetAutocomplete",
               modelValue: a.selectedPacketName,
               "onUpdate:modelValue": [
-                t[1] || (t[1] = (d) => a.selectedPacketName = d),
-                l.packetNameChanged
+                e[2] || (e[2] = (i) => a.selectedPacketName = i),
+                s.packetNameChanged
               ],
               label: "Select Packet",
               "hide-details": "",
+              "auto-select-first": "",
               density: "compact",
               variant: "outlined",
-              disabled: a.packetsDisabled || l.autocompleteDisabled || s.lockPacket,
+              disabled: a.packetsDisabled || s.autocompleteDisabled || l.lockPacket,
               items: a.packetNames,
               "item-title": "label",
-              "item-value": "value"
+              "item-value": "value",
+              onFocus: e[3] || (e[3] = (i) => s.selectOnFocus("packetAutocomplete"))
             }, null, 8, ["modelValue", "disabled", "items", "onUpdate:modelValue"])
           ]),
           _: 1
         }, 8, ["cols"]),
-        s.mode === "cmd" && s.showQueueSelect ? (r(), N(u, {
+        l.mode === "cmd" && l.showQueueSelect ? (n(), N(m, {
           key: 0,
-          cols: l.colSize,
+          cols: s.colSize,
           class: "tpic-select pr-4",
           "data-test": "select-queue"
         }, {
-          default: m(() => [
-            c(n, {
+          default: u(() => [
+            c(o, {
+              ref: "queueAutocomplete",
               modelValue: a.selectedQueueName,
               "onUpdate:modelValue": [
-                t[2] || (t[2] = (d) => a.selectedQueueName = d),
-                l.queueNameChanged
+                e[4] || (e[4] = (i) => a.selectedQueueName = i),
+                s.queueNameChanged
               ],
               label: "Select Queue",
               "hide-details": "",
+              "auto-select-first": "",
               density: "compact",
               variant: "outlined",
-              disabled: l.autocompleteDisabled || a.queueNames.length === 1,
+              disabled: s.autocompleteDisabled || a.queueNames.length === 1,
               items: a.queueNames,
               "item-title": "label",
-              "item-value": "value"
+              "item-value": "value",
+              onFocus: e[5] || (e[5] = (i) => s.selectOnFocus("queueAutocomplete"))
             }, null, 8, ["modelValue", "disabled", "items", "onUpdate:modelValue"])
           ]),
           _: 1
-        }, 8, ["cols"])) : h("", !0),
-        s.chooseItem ? (r(), N(u, {
+        }, 8, ["cols"])) : r("", !0),
+        l.chooseItem ? (n(), N(m, {
           key: 1,
-          cols: l.colSize,
+          cols: s.colSize,
           class: "tpic-select pr-4",
           "data-test": "select-item"
         }, {
-          default: m(() => [
-            c(n, {
+          default: u(() => [
+            c(o, {
+              ref: "itemAutocomplete",
               modelValue: a.selectedItemName,
               "onUpdate:modelValue": [
-                t[3] || (t[3] = (d) => a.selectedItemName = d),
-                t[4] || (t[4] = (d) => l.itemNameChanged(d))
+                e[6] || (e[6] = (i) => a.selectedItemName = i),
+                e[7] || (e[7] = (i) => s.itemNameChanged(i))
               ],
               label: "Select Item",
               "hide-details": "",
+              "auto-select-first": "",
               density: "compact",
               variant: "outlined",
-              disabled: a.itemsDisabled || l.autocompleteDisabled,
+              disabled: a.itemsDisabled || s.autocompleteDisabled,
               items: a.itemNames,
               "item-title": "label",
-              "item-value": "value"
+              "item-value": "value",
+              onFocus: e[8] || (e[8] = (i) => s.selectOnFocus("itemAutocomplete"))
             }, null, 8, ["modelValue", "disabled", "items"])
           ]),
           _: 1
-        }, 8, ["cols"])) : h("", !0),
-        s.chooseItem && l.itemIsArray ? (r(), N(u, {
+        }, 8, ["cols"])) : r("", !0),
+        l.chooseItem && s.itemIsArray ? (n(), N(m, {
           key: 2,
           cols: "1",
           class: "tpic-select pr-4",
           "data-test": "array-index",
           style: { "min-width": "105px" }
         }, {
-          default: m(() => [
+          default: u(() => [
             c(k, {
+              ref: "indexCombobox",
               modelValue: a.selectedArrayIndex,
               "onUpdate:modelValue": [
-                t[5] || (t[5] = (d) => a.selectedArrayIndex = d),
-                t[6] || (t[6] = (d) => l.indexChanged(d))
+                e[9] || (e[9] = (i) => a.selectedArrayIndex = i),
+                e[10] || (e[10] = (i) => s.indexChanged(i))
               ],
               label: "Index",
               "hide-details": "",
+              "auto-select-first": "",
               density: "compact",
               variant: "outlined",
-              disabled: a.itemsDisabled || l.autocompleteDisabled,
-              items: l.arrayIndexes,
+              disabled: a.itemsDisabled || s.autocompleteDisabled,
+              items: s.arrayIndexes,
               "item-title": "label",
-              "item-value": "value"
+              "item-value": "value",
+              onFocus: e[11] || (e[11] = (i) => s.selectOnFocus("indexCombobox"))
             }, null, 8, ["modelValue", "disabled", "items"])
           ]),
           _: 1
-        })) : h("", !0),
-        s.buttonText ? (r(), N(u, {
+        })) : r("", !0),
+        l.buttonText ? (n(), N(m, {
           key: 3,
-          cols: l.colSize,
+          cols: s.colSize,
           style: { "max-width": "140px" }
         }, {
-          default: m(() => [
+          default: u(() => [
             c(g, {
-              disabled: l.buttonDisabled,
+              disabled: s.buttonDisabled,
               color: "primary",
               "data-test": "select-send",
-              onClick: l.buttonPressed
+              onClick: s.buttonPressed
             }, {
-              default: m(() => [
-                f(T(l.actualButtonText), 1)
+              default: u(() => [
+                p(T(s.actualButtonText), 1)
               ]),
               _: 1
             }, 8, ["disabled", "onClick"])
           ]),
           _: 1
-        }, 8, ["cols"])) : h("", !0)
+        }, 8, ["cols"])) : r("", !0)
       ]),
       _: 1
     }, 8, ["no-gutters"]),
-    s.selectTypes ? (r(), N(p, {
+    l.selectTypes ? (n(), N(f, {
       key: 0,
       class: "pt-6 align-center",
       "no-gutters": ""
     }, {
-      default: m(() => [
-        c(u, {
-          cols: l.colSize,
+      default: u(() => [
+        c(m, {
+          cols: s.colSize,
           class: "tpic-select pr-4",
           "data-test": "data-type"
         }, {
-          default: m(() => [
-            c(n, {
+          default: u(() => [
+            c(o, {
+              ref: "valueTypeAutocomplete",
               modelValue: a.selectedValueType,
-              "onUpdate:modelValue": t[7] || (t[7] = (d) => a.selectedValueType = d),
+              "onUpdate:modelValue": e[12] || (e[12] = (i) => a.selectedValueType = i),
               label: "Value Type",
               "hide-details": "",
+              "auto-select-first": "",
               density: "compact",
               variant: "outlined",
-              items: a.valueTypes
+              items: a.valueTypes,
+              onFocus: e[13] || (e[13] = (i) => s.selectOnFocus("valueTypeAutocomplete"))
             }, null, 8, ["modelValue", "items"])
           ]),
           _: 1
         }, 8, ["cols"]),
-        c(u, {
-          cols: l.colSize,
+        c(m, {
+          cols: s.colSize,
           class: "tpic-select pr-4",
           "data-test": "reduced"
         }, {
-          default: m(() => [
-            c(n, {
+          default: u(() => [
+            c(o, {
+              ref: "reducedAutocomplete",
               modelValue: a.selectedReduced,
-              "onUpdate:modelValue": t[8] || (t[8] = (d) => a.selectedReduced = d),
+              "onUpdate:modelValue": e[14] || (e[14] = (i) => a.selectedReduced = i),
               label: "Reduced",
               "hide-details": "",
+              "auto-select-first": "",
               density: "compact",
               variant: "outlined",
-              items: a.reductionModes
+              items: a.reductionModes,
+              onFocus: e[15] || (e[15] = (i) => s.selectOnFocus("reducedAutocomplete"))
             }, null, 8, ["modelValue", "items"])
           ]),
           _: 1
         }, 8, ["cols"]),
-        c(u, {
-          cols: l.colSize,
+        c(m, {
+          cols: s.colSize,
           class: "tpic-select pr-4",
           "data-test": "reduced-type"
         }, {
-          default: m(() => [
-            c(n, {
+          default: u(() => [
+            c(o, {
+              ref: "reducedTypeAutocomplete",
               modelValue: a.selectedReducedType,
-              "onUpdate:modelValue": t[9] || (t[9] = (d) => a.selectedReducedType = d),
+              "onUpdate:modelValue": e[16] || (e[16] = (i) => a.selectedReducedType = i),
               label: "Reduced Type",
               "hide-details": "",
+              "auto-select-first": "",
               density: "compact",
               variant: "outlined",
               disabled: a.selectedReduced === "DECOM",
-              items: a.reducedTypes
+              items: a.reducedTypes,
+              onFocus: e[17] || (e[17] = (i) => s.selectOnFocus("reducedTypeAutocomplete"))
             }, null, 8, ["modelValue", "disabled", "items"])
           ]),
           _: 1
         }, 8, ["cols"]),
-        c(u, {
-          cols: l.colSize,
+        c(m, {
+          cols: s.colSize,
           style: { "max-width": "140px" }
         }, null, 8, ["cols"])
       ]),
       _: 1
-    })) : h("", !0),
-    c(p, {
+    })) : r("", !0),
+    c(f, {
       "no-gutters": "",
       class: "pt-3 px-3 align-center"
     }, {
-      default: m(() => [
-        c(u, {
-          cols: l.colSize,
-          class: v({ "openc3-yellow": a.hazardous })
+      default: u(() => [
+        c(m, {
+          cols: s.colSize,
+          class: A({ "openc3-yellow": s.isHazardous })
         }, {
-          default: m(() => [
-            f(" Description: " + T(a.description) + " ", 1),
-            a.hazardous ? (r(), y(A, { key: 0 }, [
-              f(" (HAZARDOUS) ")
-            ], 64)) : h("", !0)
+          default: u(() => [
+            s.isHazardous ? (n(), N(b, {
+              key: 0,
+              class: "mr-1"
+            }, {
+              default: u(() => [...e[18] || (e[18] = [
+                p("mdi-alert", -1)
+              ])]),
+              _: 1
+            })) : r("", !0),
+            p(" Description: " + T(a.description) + " ", 1),
+            s.isHazardous ? (n(), y(D, { key: 1 }, [
+              p(" (HAZARDOUS) ")
+            ], 64)) : r("", !0)
           ]),
           _: 1
         }, 8, ["cols", "class"])
@@ -615,8 +664,8 @@ function V(e, t, s, i, a, l) {
     })
   ]);
 }
-const U = /* @__PURE__ */ D(L, [["render", V], ["__scopeId", "data-v-6cde2fa5"]]);
+const C = /* @__PURE__ */ L(P, [["render", x], ["__scopeId", "data-v-8146b1e7"]]);
 export {
-  U as T
+  C as T
 };
-//# sourceMappingURL=TargetPacketItemChooser-DGcXvdTX.js.map
+//# sourceMappingURL=TargetPacketItemChooser-DDqBQTWC.js.map