@nativewrappers/fivem 0.0.80 → 0.0.81

package/ui/menu/items/UIMenuListItem.d.ts

@@ -1,6 +1,6 @@
-import { LiteEvent } from "../../../utils";
-import type { ListItem } from "../modules/";
-import { UIMenuItem } from "./";
+import { LiteEvent } from "fivem/utils/LiteEvent";
+import type { ListItem } from "../modules/ListItem";
+import { UIMenuItem } from "./UIMenuItem";
 export declare class UIMenuListItem extends UIMenuItem {
     readonly listChanged: LiteEvent;
     readonly listSelected: LiteEvent;

package/ui/menu/items/UIMenuListItem.js

@@ -0,0 +1,118 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { Color } from "../../../common/utils/Color";
+import { Alignment } from "fivem/enums/Alignment";
+import { Font } from "fivem/enums/Font";
+import { Sprite } from "fivem/ui/Sprite";
+import { Text } from "fivem/ui/Text";
+import { LiteEvent } from "fivem/utils/LiteEvent";
+import { Point } from "fivem/utils/Point";
+import { Size } from "fivem/utils/Size";
+import { _String } from "fivem/utils/String";
+import { Menu } from "../Menu";
+import { UIMenuItem } from "./UIMenuItem";
+class UIMenuListItem extends UIMenuItem {
+  static {
+    __name(this, "UIMenuListItem");
+  }
+  listChanged = new LiteEvent();
+  listSelected = new LiteEvent();
+  supportsRightBadge = false;
+  supportsRightLabel = false;
+  _itemText;
+  _leftArrow;
+  _rightArrow;
+  _index = 0;
+  _arrowOnlyOnSelected = false;
+  _items = [];
+  _textWidth = 0;
+  constructor(text, items, startIndex = 0, description, arrowOnlyOnSelected = true) {
+    super(text, description);
+    this._leftArrow = new Sprite("commonmenu", "arrowleft", new Point(), new Size(30, 30));
+    this._rightArrow = new Sprite("commonmenu", "arrowright", new Point(), new Size(30, 30));
+    this._itemText = new Text("", new Point(), 0.35, Color.White, Font.ChaletLondon, Alignment.Right);
+    this.ArrowOnlyOnSelected = arrowOnlyOnSelected;
+    this.Items = items;
+    this.Index = startIndex;
+  }
+  get Items() {
+    return this._items;
+  }
+  set Items(value) {
+    if (!value) {
+      throw new Error("Items can't be null");
+    }
+    this._items = value;
+  }
+  get SelectedItem() {
+    return this.Items[this.Index];
+  }
+  set SelectedItem(value) {
+    const index = this.Items.findIndex((i) => i.id === value.id);
+    if (index >= 0) {
+      this.Index = index;
+    }
+  }
+  get SelectedValue() {
+    const item = this.SelectedItem;
+    return item ? item.value : null;
+  }
+  get Index() {
+    return this._index % this.Items.length;
+  }
+  set Index(value) {
+    if (!this._items.length) {
+      return;
+    }
+    value = value < 0 ? this._items.length - 1 : value > this._items.length - 1 ? 0 : value;
+    this._index = value;
+    this._textWidth = 0;
+  }
+  get ArrowOnlyOnSelected() {
+    return this._arrowOnlyOnSelected;
+  }
+  set ArrowOnlyOnSelected(value) {
+    this._arrowOnlyOnSelected = value;
+  }
+  get IsMouseInBoundsOfLeftArrow() {
+    return this.parent ? this.parent.isMouseInBounds(this._leftArrow.pos, this._leftArrow.size) : false;
+  }
+  get IsMouseInBoundsOfRightArrow() {
+    return this.parent ? this.parent.isMouseInBounds(this._rightArrow.pos, this._rightArrow.size) : false;
+  }
+  setVerticalPosition(y) {
+    const yOffset = y + this.offset.Y + 147;
+    this._leftArrow.pos.Y = yOffset;
+    this._rightArrow.pos.Y = yOffset;
+    this._itemText.pos.Y = yOffset;
+    super.setVerticalPosition(y);
+  }
+  draw() {
+    super.draw();
+    if (this._textWidth === void 0) {
+      const caption = this._getSelectedItemCaption();
+      this._itemText.caption = caption;
+      this._textWidth = _String.measureString(caption, this._itemText.font, this._itemText.scale, Menu.screenWidth);
+    }
+    this._rightArrow.pos.X = this.offset.X + (this.parent ? this.parent.WidthOffset : 0) + 400;
+    this._itemText.pos.X = this._rightArrow.pos.X + 5;
+    this._itemText.color = this.enabled ? this.selected ? this.HighlightedForeColor : this.ForeColor : new Color(163, 159, 148);
+    if (this._arrowOnlyOnSelected && !this.selected) {
+      this._itemText.pos.X += this._rightArrow.size.width / 2;
+    } else {
+      this._leftArrow.color = this._itemText.color;
+      this._rightArrow.color = this._itemText.color;
+      this._leftArrow.pos.X = this._itemText.pos.X - this._textWidth - this._leftArrow.size.width + 5;
+      this._leftArrow.draw(Menu.screenResolution);
+      this._rightArrow.draw(Menu.screenResolution);
+    }
+    this._itemText.draw(void 0, Menu.screenResolution);
+  }
+  _getSelectedItemCaption() {
+    const item = this.SelectedItem;
+    return item ? item.name : "";
+  }
+}
+export {
+  UIMenuListItem
+};

package/ui/menu/items/UIMenuSeparatorItem.d.ts

@@ -1,4 +1,4 @@
-import { UIMenuItem } from "./";
+import { UIMenuItem } from "./UIMenuItem";
 export declare class UIMenuSeparatorItem extends UIMenuItem {
     protected supportsDescription: boolean;
     protected supportsPanels: boolean;

package/ui/menu/items/UIMenuSeparatorItem.js

@@ -0,0 +1,37 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { Alignment } from "fivem/enums/Alignment";
+import { Menu } from "../Menu";
+import { UIMenuItem } from "./UIMenuItem";
+class UIMenuSeparatorItem extends UIMenuItem {
+  static {
+    __name(this, "UIMenuSeparatorItem");
+  }
+  supportsDescription = false;
+  supportsPanels = false;
+  supportsLeftBadge = false;
+  supportsRightBadge = false;
+  supportsRightLabel = false;
+  constructor(text) {
+    super(text ?? "");
+    this.text.alignment = Alignment.Centered;
+  }
+  setVerticalPosition(y) {
+    const yOffset = y + this.offset.Y;
+    this.rectangle.pos.Y = yOffset + 144;
+    this.text.pos.Y = yOffset + 147;
+  }
+  draw() {
+    const width = 431 + (this.parent ? this.parent.WidthOffset : 0);
+    this.rectangle.size.width = width;
+    this.rectangle.pos.X = this.offset.X;
+    this.rectangle.draw(void 0, Menu.screenResolution);
+    if (this.text.caption !== "") {
+      this.text.pos.X = this.offset.X + width / 2;
+      this.text.draw(void 0, Menu.screenResolution);
+    }
+  }
+}
+export {
+  UIMenuSeparatorItem
+};

package/ui/menu/items/UIMenuSliderItem.d.ts

@@ -1,6 +1,7 @@
-import { UIMenuItem } from "./";
-import { Color, LiteEvent } from "../../../utils";
-import { BadgeStyle } from "../../../enums";
+import { Color } from "../../../common/utils/Color";
+import { BadgeStyle } from "fivem/enums/BadgeStyle";
+import { LiteEvent } from "fivem/utils/LiteEvent";
+import { UIMenuItem } from "./UIMenuItem";
 export declare class UIMenuSliderItem extends UIMenuItem {
     readonly sliderChanged: LiteEvent;
     readonly sliderSelected: LiteEvent;

package/ui/menu/items/UIMenuSliderItem.js

@@ -0,0 +1,180 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { Color } from "../../../common/utils/Color";
+import { BadgeStyle } from "fivem/enums/BadgeStyle";
+import { Rectangle } from "fivem/ui/Rectangle";
+import { Sprite } from "fivem/ui/Sprite";
+import { LiteEvent } from "fivem/utils/LiteEvent";
+import { Point } from "fivem/utils/Point";
+import { Size } from "fivem/utils/Size";
+import { Menu } from "../Menu";
+import { UIMenuItem } from "./UIMenuItem";
+class UIMenuSliderItem extends UIMenuItem {
+  static {
+    __name(this, "UIMenuSliderItem");
+  }
+  sliderChanged = new LiteEvent();
+  sliderSelected = new LiteEvent();
+  supportsRightBadge = false;
+  supportsRightLabel = false;
+  _index = 0;
+  _items = [];
+  _showDivider = true;
+  _arrowOnlyOnSelected = false;
+  _leftSliderBadge = BadgeStyle.None;
+  _rightSliderBadge = BadgeStyle.None;
+  _background;
+  _slider;
+  _divider;
+  _leftArrow;
+  _rightArrow;
+  _leftSliderBadgeSprite;
+  _rightSliderBadgeSprite;
+  constructor(text, items, startIndex = 0, description, showDivider = false, arrowOnlyOnSelected = false) {
+    super(text, description);
+    this._background = new Rectangle(new Point(), new Size(150, 9), new Color(4, 32, 57));
+    this._slider = new Rectangle(new Point(), new Size(75, 9), new Color(57, 116, 200));
+    this._divider = new Rectangle(new Point(), new Size(2.5, 20), Color.WhiteSmoke);
+    this._leftArrow = new Sprite("commonmenutu", "arrowleft", new Point(), new Size(15, 15));
+    this._rightArrow = new Sprite("commonmenutu", "arrowright", new Point(), new Size(15, 15));
+    this._leftSliderBadgeSprite = new Sprite("", "");
+    this._rightSliderBadgeSprite = new Sprite("", "");
+    this.ArrowOnlyOnSelected = arrowOnlyOnSelected;
+    this.ShowDivider = showDivider;
+    this.Items = items;
+    this.Index = startIndex;
+  }
+  get Index() {
+    return this._index % this._items.length;
+  }
+  set Index(value) {
+    this._index = 1e8 - 1e8 % this._items.length + value;
+  }
+  get Item() {
+    return this._items[this.Index];
+  }
+  get Items() {
+    return this._items;
+  }
+  set Items(value) {
+    this._items = value || [];
+  }
+  get ShowDivider() {
+    return this._showDivider;
+  }
+  set ShowDivider(value) {
+    this._showDivider = value;
+  }
+  get ArrowOnlyOnSelected() {
+    return this._arrowOnlyOnSelected;
+  }
+  set ArrowOnlyOnSelected(value) {
+    this._arrowOnlyOnSelected = value;
+  }
+  get BackgroundColor() {
+    return this._background.color;
+  }
+  set BackgroundColor(value) {
+    this._background.color = value || new Color(4, 32, 57);
+  }
+  get SliderColor() {
+    return this._slider.color;
+  }
+  set SliderColor(value) {
+    this._slider.color = value || new Color(57, 116, 200);
+  }
+  get DividerColor() {
+    return this._divider.color;
+  }
+  set DividerColor(value) {
+    this._divider.color = value || Color.WhiteSmoke;
+  }
+  get LeftSliderBadge() {
+    return this._leftSliderBadge;
+  }
+  set LeftSliderBadge(value) {
+    value = Number(value);
+    this._leftSliderBadge = value;
+    this._leftSliderBadgeSprite.TextureDict = UIMenuItem.badgeToTextureDict(value);
+    this._leftSliderBadgeSprite.size = UIMenuItem.getBadgeSize(value);
+  }
+  get RightSliderBadge() {
+    return this._rightSliderBadge;
+  }
+  set RightSliderBadge(value) {
+    value = Number(value);
+    this._rightSliderBadge = value;
+    this._rightSliderBadgeSprite.TextureDict = UIMenuItem.badgeToTextureDict(value);
+    this._rightSliderBadgeSprite.size = UIMenuItem.getBadgeSize(value);
+  }
+  get IsMouseInBoundsOfLeftArrow() {
+    return this.parent ? this.parent.isMouseInBounds(this._leftArrow.pos, this._leftArrow.size) : false;
+  }
+  get IsMouseInBoundsOfRightArrow() {
+    return this.parent ? this.parent.isMouseInBounds(this._rightArrow.pos, this._rightArrow.size) : false;
+  }
+  indexToItem(index) {
+    return this._items[index];
+  }
+  setVerticalPosition(y) {
+    const yOffset = y + this.offset.Y;
+    this._background.pos.Y = yOffset + 158.5;
+    this._slider.pos.Y = yOffset + 158.5;
+    this._divider.pos.Y = yOffset + 153;
+    this._leftArrow.pos.Y = yOffset + 155.5;
+    this._rightArrow.pos.Y = yOffset + 155.5;
+    this._leftSliderBadgeSprite.pos.Y = yOffset + 142 + UIMenuItem.getBadgeSpriteHeightOffset(this._leftSliderBadgeSprite);
+    this._rightSliderBadgeSprite.pos.Y = yOffset + 142 + UIMenuItem.getBadgeSpriteHeightOffset(this._rightSliderBadgeSprite);
+    super.setVerticalPosition(y);
+  }
+  draw() {
+    super.draw();
+    const showArrows = !this._arrowOnlyOnSelected || this.selected;
+    const x = this.offset.X + (this.parent ? this.parent.WidthOffset : 0);
+    this._background.pos.X = 431 + x - this._background.size.width;
+    if (showArrows) {
+      this._background.pos.X -= this._rightArrow.size.width / 2;
+      this._leftSliderBadgeSprite.pos.X = -this._leftArrow.size.width / 2;
+    } else {
+      this._leftSliderBadgeSprite.pos.X = 0;
+    }
+    if (this._rightSliderBadge !== BadgeStyle.None) {
+      const widthOffset = UIMenuItem.getBadgeSpriteWidthOffset(this._rightSliderBadgeSprite);
+      this._background.pos.X -= 40;
+      this._rightSliderBadgeSprite.pos.X = 431 + x;
+      this._rightSliderBadgeSprite.pos.X -= this._rightSliderBadgeSprite.size.width + widthOffset;
+      this._rightSliderBadgeSprite.textureName = this.badgeToTextureName(this._rightSliderBadge);
+      this._rightSliderBadgeSprite.color = this.badgeToColor(this._rightSliderBadge);
+      this._rightSliderBadgeSprite.draw(Menu.screenResolution);
+    } else {
+      this._background.pos.X -= this._rightArrow.size.width / 2;
+    }
+    if (this._leftSliderBadge !== BadgeStyle.None) {
+      const widthOffset = UIMenuItem.getBadgeSpriteWidthOffset(this._leftSliderBadgeSprite);
+      this._leftSliderBadgeSprite.pos.X -= this._leftSliderBadgeSprite.size.width + widthOffset;
+      this._leftSliderBadgeSprite.pos.X += this._background.pos.X;
+      this._leftSliderBadgeSprite.textureName = this.badgeToTextureName(this._leftSliderBadge);
+      this._leftSliderBadgeSprite.color = this.badgeToColor(this._leftSliderBadge);
+      this._leftSliderBadgeSprite.draw(Menu.screenResolution);
+    }
+    const sliderXOffset = (this._background.size.width - this._slider.size.width) / (this._items.length - 1) * this.Index;
+    this._slider.pos.X = this._background.pos.X + sliderXOffset;
+    this._leftArrow.color = this.enabled ? this.selected ? Color.Black : Color.WhiteSmoke : new Color(163, 159, 148);
+    this._rightArrow.color = this._leftArrow.color;
+    this._background.draw(void 0, Menu.screenResolution);
+    this._slider.draw(void 0, Menu.screenResolution);
+    if (showArrows) {
+      this._leftArrow.pos.X = this._background.pos.X - 15;
+      this._rightArrow.pos.X = this._background.pos.X + this._background.size.width;
+      this._leftArrow.draw(Menu.screenResolution);
+      this._rightArrow.draw(Menu.screenResolution);
+    }
+    if (this._showDivider) {
+      this._divider.pos.X = this._background.pos.X + this._background.size.width / 2;
+      this._divider.draw(void 0, Menu.screenResolution);
+    }
+  }
+}
+export {
+  UIMenuSliderItem
+};

package/ui/menu/items/panels/AbstractUIMenuPanel.d.ts

@@ -1,6 +1,7 @@
-import type { UIMenuItem } from "../";
-import { type Rectangle, Sprite } from "../../../";
-import { Menu } from "../../";
+import type { Rectangle } from "fivem/ui/Rectangle";
+import { Sprite } from "fivem/ui/Sprite";
+import { Menu } from "../../Menu";
+import type { UIMenuItem } from "../UIMenuItem";
 export declare abstract class AbstractUIMenuPanel {
     readonly id: string;
     protected parentItem?: UIMenuItem;

package/ui/menu/items/panels/AbstractUIMenuPanel.js

@@ -0,0 +1,49 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { Sprite } from "fivem/ui/Sprite";
+import { Crypto } from "fivem/utils/Crypto";
+import { Menu } from "../../Menu";
+class AbstractUIMenuPanel {
+  static {
+    __name(this, "AbstractUIMenuPanel");
+  }
+  id = Crypto.uuidv4();
+  parentItem;
+  enabled = true;
+  background;
+  get ParentMenu() {
+    return this.parentItem ? this.parentItem.parent : void 0;
+  }
+  get ParentItem() {
+    return this.parentItem;
+  }
+  set ParentItem(value) {
+    this.parentItem = value;
+  }
+  get Enabled() {
+    return this.enabled;
+  }
+  set Enabled(value) {
+    this.enabled = value;
+  }
+  get Height() {
+    return this.background ? this.background.size.height : 0;
+  }
+  setVerticalPosition(y) {
+    if (this.background) this.background.pos.Y = y;
+  }
+  draw() {
+    if (this.background) {
+      this.background.size.width = 431 + (this.ParentMenu ? this.ParentMenu.WidthOffset : 0);
+      this.background.pos.X = this.parentItem ? this.parentItem.offset.X : 0;
+      if (this.background instanceof Sprite) {
+        this.background.draw(Menu.screenResolution);
+      } else {
+        this.background.draw(void 0, Menu.screenResolution);
+      }
+    }
+  }
+}
+export {
+  AbstractUIMenuPanel
+};

package/ui/menu/items/panels/UIMenuColorPanel.d.ts

@@ -1,6 +1,6 @@
-import { Color } from "../../../../utils";
-import { AbstractUIMenuPanel } from "./";
-import { Sprite } from "../../../";
+import { Color } from "../../../../common/utils/Color";
+import { Sprite } from "fivem/ui/Sprite";
+import { AbstractUIMenuPanel } from "./AbstractUIMenuPanel";
 export declare class UIMenuColorPanel extends AbstractUIMenuPanel {
     protected readonly background: Sprite;
     private _title;

package/ui/menu/items/panels/UIMenuColorPanel.js

@@ -0,0 +1,215 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { Color } from "../../../../common/utils/Color";
+import { Alignment } from "fivem/enums/Alignment";
+import { Control } from "fivem/enums/Control";
+import { Font } from "fivem/enums/Font";
+import { Game } from "fivem/Game";
+import { Rectangle } from "fivem/ui/Rectangle";
+import { Sprite } from "fivem/ui/Sprite";
+import { Text } from "fivem/ui/Text";
+import { Point } from "fivem/utils/Point";
+import { Size } from "fivem/utils/Size";
+import { Menu } from "../../Menu";
+import { AbstractUIMenuPanel } from "./AbstractUIMenuPanel";
+class UIMenuColorPanel extends AbstractUIMenuPanel {
+  static {
+    __name(this, "UIMenuColorPanel");
+  }
+  background;
+  _title = "";
+  _text;
+  _colors = [];
+  _bar = [];
+  _lastColor = Color.Transparent;
+  _leftArrow;
+  _rightArrow;
+  _selectedRectangle;
+  // Pagination
+  _min = 0;
+  _max = 8;
+  _total = 9;
+  _index = 0;
+  constructor(title, colors) {
+    super();
+    this.background = new Sprite("commonmenu", "gradient_bgd", new Point(), new Size(431, 112));
+    this._leftArrow = new Sprite("commonmenu", "arrowleft", new Point(), new Size(30, 30));
+    this._rightArrow = new Sprite("commonmenu", "arrowright", new Point(), new Size(30, 30));
+    this._selectedRectangle = new Rectangle(new Point(), new Size(44.5, 8), Color.White);
+    this._text = new Text("", new Point(), 0.35, Color.White, Font.ChaletLondon, Alignment.Centered);
+    this.Title = title;
+    this.Colors = colors;
+  }
+  get Title() {
+    return this._title;
+  }
+  set Title(value) {
+    this._title = value ? value.trim() : "";
+    this._updateText();
+  }
+  get Colors() {
+    return this._colors;
+  }
+  set Colors(value) {
+    if (!value) {
+      value = [];
+    }
+    this._colors = value;
+    this._bar = [];
+    const colorRectangles = value.slice(0, this._total).map((color) => {
+      return new Rectangle(new Point(0, 0), new Size(44.5, 44.5), color);
+    });
+    this._bar.push(...colorRectangles);
+    this._refreshIndex();
+    this._updateSelection(true);
+  }
+  get Color() {
+    return this._colors[this.Index];
+  }
+  set Color(value) {
+    const index = this._colors.findIndex((c) => {
+      return c.a === value.a && c.r === value.r && c.g === value.g && c.b === value.b;
+    });
+    if (index !== -1) {
+      this.Index = index;
+    }
+  }
+  get Index() {
+    return this._index % this._colors.length;
+  }
+  set Index(value) {
+    value = 1e6 - 1e6 % this._colors.length + value;
+    if (this.Index === value % this._colors.length) {
+      return;
+    }
+    this._index = value;
+    const currentSelection = this.Index;
+    if (currentSelection > this._max) {
+      this._min = currentSelection - this._total + 1;
+      this._max = currentSelection;
+    } else if (currentSelection < this._min) {
+      this._min = currentSelection;
+      this._max = currentSelection + this._total - 1;
+    }
+    this._updateSelection();
+  }
+  updateParentItem() {
+    const last = this._lastColor;
+    const current = this.Color;
+    if (!last || last.a !== current.a || last.r !== current.r || last.g !== current.g || last.b !== current.b) {
+      this._lastColor = current;
+      if (this.ParentMenu) this.ParentMenu.panelActivated.emit(this.parentItem, this, this.Index, current);
+      if (this.parentItem) this.parentItem.panelActivated.emit(this, this.Index, current);
+    }
+  }
+  setVerticalPosition(y) {
+    super.setVerticalPosition(y);
+    this._selectedRectangle.pos.Y = y + 47;
+    this._leftArrow.pos.Y = y + 15;
+    this._rightArrow.pos.Y = y + 15;
+    this._text.pos.Y = y + 15;
+    this._bar.forEach(async (colorRect) => {
+      colorRect.pos.Y = y + 55;
+    });
+  }
+  draw() {
+    if (this.enabled) {
+      super.draw();
+      const x = (this.parentItem ? this.parentItem.offset.X : 0) + (this.ParentMenu ? this.ParentMenu.WidthOffset / 2 : 0);
+      this._selectedRectangle.pos.X = x + 15 + 44.5 * (this.Index - this._min);
+      this._leftArrow.pos.X = x + 7.5;
+      this._rightArrow.pos.X = x + 393.5;
+      this._text.pos.X = x + 215.5;
+      this._leftArrow.draw(Menu.screenResolution);
+      this._rightArrow.draw(Menu.screenResolution);
+      this._text.draw(void 0, Menu.screenResolution);
+      this._selectedRectangle.draw(void 0, Menu.screenResolution);
+      this._bar.forEach(async (colorRect, index) => {
+        colorRect.pos.X = x + 15 + 44.5 * index;
+        colorRect.draw(void 0, Menu.screenResolution);
+      });
+      this._processControls();
+    }
+  }
+  _refreshIndex() {
+    if (!this._colors.length) {
+      this._index = 1e3;
+    } else {
+      this._index = 1e3 - 1e3 % this._colors.length;
+    }
+    this._max = this._total - 1;
+    this._min = 0;
+  }
+  _updateSelection(preventUpdate = false) {
+    if (!preventUpdate) {
+      this.updateParentItem();
+    }
+    this._bar.forEach(async (colorRect, index) => {
+      colorRect.color = this._colors[this._min + index];
+    });
+    this._updateText();
+  }
+  _updateText() {
+    this._text.caption = `${this._title} [${this.Index + 1 || 0} / ${this._colors.length}]`;
+  }
+  _goLeft() {
+    if (this._colors.length > this._total) {
+      if (this.Index <= this._min) {
+        if (this.Index === 0) {
+          this._min = this._colors.length - this._total;
+          this._max = this._colors.length - 1;
+          this._index = 1e3 - 1e3 % this._colors.length;
+          this._index += this._colors.length - 1;
+        } else {
+          this._min--;
+          this._max--;
+          this._index--;
+        }
+      } else {
+        this._index--;
+      }
+    } else {
+      this._index--;
+    }
+    this._updateSelection();
+  }
+  _goRight() {
+    if (this._colors.length > this._total) {
+      if (this.Index >= this._max) {
+        if (this.Index === this._colors.length - 1) {
+          this._min = 0;
+          this._max = this._total - 1;
+          this._index = 1e3 - 1e3 % this._colors.length;
+        } else {
+          this._min++;
+          this._max++;
+          this._index++;
+        }
+      } else {
+        this._index++;
+      }
+    } else {
+      this._index++;
+    }
+    this._updateSelection();
+  }
+  _processControls() {
+    if (Game.isDisabledControlJustPressed(0, Control.Attack)) {
+      if (this.ParentMenu) {
+        if (this.ParentMenu.isMouseInBounds(this._leftArrow.pos, this._leftArrow.size)) {
+          this._goLeft();
+        } else if (this.ParentMenu.isMouseInBounds(this._rightArrow.pos, this._rightArrow.size)) {
+          this._goRight();
+        }
+        this._bar.forEach(async (colorRect, index) => {
+          if (this.ParentMenu?.isMouseInBounds(colorRect.pos, colorRect.size)) {
+            this.Index = this._min + index;
+          }
+        });
+      }
+    }
+  }
+}
+export {
+  UIMenuColorPanel
+};

package/ui/menu/items/panels/UIMenuGridPanel.d.ts

@@ -1,6 +1,6 @@
-import { Point } from "../../../../utils";
-import { AbstractUIMenuPanel } from "./";
-import { Sprite } from "../../../";
+import { Sprite } from "fivem/ui/Sprite";
+import { Point } from "fivem/utils/Point";
+import { AbstractUIMenuPanel } from "./AbstractUIMenuPanel";
 export declare class UIMenuGridPanel extends AbstractUIMenuPanel {
     protected readonly background: Sprite;
     private _isCircleLocked;