bnstooltips 1.4.4 → 1.4.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +11 -0
  2. package/build/ItemTooltip/ItemTooltip.d.ts +1 -1
  3. package/build/ItemTooltip/ItemTooltip.types.d.ts +1 -0
  4. package/build/TooltipBase/TooltipBase.d.ts +1 -1
  5. package/build/TooltipBase/TooltipBase.types.d.ts +1 -0
  6. package/build/index.es.js +105 -12
  7. package/build/index.es.js.map +1 -1
  8. package/build/index.js +105 -12
  9. package/build/index.js.map +1 -1
  10. package/build/itemapiclient/api.d.ts +49 -4
  11. package/package.json +1 -1
package/README.md CHANGED
@@ -1,3 +1,14 @@
1
1
  # bnstooltips
2
2
 
3
+ ## Blade and Soul style tooltips in the browser
4
+
5
+ Used in my YAST Project. https://yast.now.sh
6
+
7
+ ### Examples
8
+
9
+ ![](https://lean.bns.tools/bns/icons/skillTooltip.png "Skill Tooltip")
10
+ ![](https://lean.bns.tools/bns/icons/itemTooltip.png "Item Tooltip")
11
+ ![](https://lean.bns.tools/bns/icons/bnstooltips_example.gif "Custom Tooltip")
12
+
13
+ ### Dev note
3
14
  Create a new component from templates with `yarn createCp`
package/build/ItemTooltip/ItemTooltip.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import { ItemTooltipProps } from "./ItemTooltip.types";
3
3
  import "./ItemTooltip.scss";
4
- declare function ItemTooltip({ data, region, debug, offline, client: clientProp, jobstyleOverride, }: ItemTooltipProps): JSX.Element;
4
+ declare function ItemTooltip({ data, region, debug, offline, client: clientProp, jobstyleOverride, fullHeight, }: ItemTooltipProps): JSX.Element;
5
5
  export default ItemTooltip;
package/build/ItemTooltip/ItemTooltip.types.d.ts CHANGED
@@ -8,4 +8,5 @@ export interface ItemTooltipProps {
8
8
  client?: ItemDownloadClient;
9
9
  debug?: boolean;
10
10
  jobstyleOverride?: string;
11
+ fullHeight?: boolean;
11
12
  }
package/build/TooltipBase/TooltipBase.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import { TooltipBaseProps } from "./TooltipBase.types";
3
3
  import "./TooltipBase.scss";
4
- declare function TooltipBase({ title, subtitle: category, grade, icon, mainInfos: mainTexts, subInfoGroups: subTexts, id, }: TooltipBaseProps): JSX.Element;
4
+ declare function TooltipBase({ title, subtitle: category, grade, icon, mainInfos: mainTexts, subInfoGroups: subTexts, id, fullHeight, }: TooltipBaseProps): JSX.Element;
5
5
  export default TooltipBase;
package/build/TooltipBase/TooltipBase.types.d.ts CHANGED
@@ -7,6 +7,7 @@ export interface TooltipBaseProps {
7
7
  icon?: string | JSX.Element;
8
8
  mainInfos?: JSX.Element[];
9
9
  subInfoGroups?: SubInfoGroup[];
10
+ fullHeight?: boolean;
10
11
  }
11
12
  export declare type SubInfoGroup = {
12
13
  title: string | undefined;
package/build/index.es.js CHANGED
@@ -30,12 +30,12 @@ function styleInject(css, ref) {
30
30
  }
31
31
  }
32
32
 
33
- var css_248z$6 = "*[class*=\"00008130.UI.Label_LightYellow_12\"] {\n color: #ecd967 !important; }\n\n*[class*=\"00008130.UI.Vital_LightBlue\"] {\n color: #46bee1 !important;\n font-weight: 500 !important; }\n\n*[class*=\"00008130.UI.Label_Green03_12\"] {\n color: #58ff77 !important; }\n\n.TooltipBase_grade-none {\n color: #c2cadc; }\n\n.TooltipBase_grade-1 {\n color: #6c6c6c !important; }\n\n.TooltipBase_border-grade-1 {\n border-color: #6c6c6c !important; }\n\n.TooltipBase_border-hover-grade-1:hover {\n border-color: #6c6c6c !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_1\"] {\n color: #6c6c6c !important;\n border-color: #6c6c6c !important; }\n\n.TooltipBase_grade-2 {\n color: #ffffff !important; }\n\n.TooltipBase_border-grade-2 {\n border-color: #ffffff !important; }\n\n.TooltipBase_border-hover-grade-2:hover {\n border-color: #ffffff !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_2\"] {\n color: #ffffff !important;\n border-color: #ffffff !important; }\n\n.TooltipBase_grade-3 {\n color: #58ff77 !important; }\n\n.TooltipBase_border-grade-3 {\n border-color: #58ff77 !important; }\n\n.TooltipBase_border-hover-grade-3:hover {\n border-color: #58ff77 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_3\"] {\n color: #58ff77 !important;\n border-color: #58ff77 !important; }\n\n.TooltipBase_grade-4 {\n color: #46bee1 !important; }\n\n.TooltipBase_border-grade-4 {\n border-color: #46bee1 !important; }\n\n.TooltipBase_border-hover-grade-4:hover {\n border-color: #46bee1 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_4\"] {\n color: #46bee1 !important;\n border-color: #46bee1 !important; }\n\n.TooltipBase_grade-5 {\n color: #d739ff !important; }\n\n.TooltipBase_border-grade-5 {\n border-color: #d739ff !important; }\n\n.TooltipBase_border-hover-grade-5:hover {\n border-color: #d739ff !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_5\"] {\n color: #d739ff !important;\n border-color: #d739ff !important; }\n\n.TooltipBase_grade-6 {\n color: #f1b248 !important; }\n\n.TooltipBase_border-grade-6 {\n border-color: #f1b248 !important; }\n\n.TooltipBase_border-hover-grade-6:hover {\n border-color: #f1b248 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_6\"] {\n color: #f1b248 !important;\n border-color: #f1b248 !important; }\n\n.TooltipBase_grade-7 {\n color: #ff770a !important; }\n\n.TooltipBase_border-grade-7 {\n border-color: #ff770a !important; }\n\n.TooltipBase_border-hover-grade-7:hover {\n border-color: #ff770a !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_7\"] {\n color: #ff770a !important;\n border-color: #ff770a !important; }\n\n.TooltipBase_grade-8 {\n color: #ff0084 !important; }\n\n.TooltipBase_border-grade-8 {\n border-color: #ff0084 !important; }\n\n.TooltipBase_border-hover-grade-8:hover {\n border-color: #ff0084 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_8\"] {\n color: #ff0084 !important;\n border-color: #ff0084 !important; }\n\n.TooltipBase_iconbg-grade-1 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_1.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-2 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_2.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-3 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_3.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-4 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_4.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-5 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_5.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-6 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_6.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-7 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_7.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-8 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_8.png\") no-repeat; }\n\n.TooltipBase_container {\n box-sizing: border-box;\n font-family: \"Montserrat\", sans-serif !important;\n scroll-behavior: smooth;\n touch-action: manipulation;\n -webkit-overflow-scrolling: touch;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n position: relative;\n display: inline-flex;\n flex-direction: column;\n background-color: rgba(3, 3, 3, 0.9);\n backdrop-filter: brightness(1.5) blur(5px);\n -webkit-backdrop-filter: brightness(1.5) blur(5px);\n padding: 1rem;\n border: 1px solid;\n border-color: #6c6c6c;\n font-weight: 500;\n font-size: 16px;\n text-decoration: none;\n color: #fff;\n width: 380px;\n max-height: calc(100vh - 50px);\n overflow-y: auto;\n -ms-overflow-style: none;\n /* IE and Edge */\n scrollbar-width: none;\n /* Firefox */\n border-radius: 3px;\n text-shadow: black 1px 1px 0; }\n\n.TooltipBase_container::-webkit-scrollbar {\n display: none; }\n\n@media only screen and (max-width: 380px) {\n .TooltipBase_container {\n width: 100%; } }\n\n@supports not (backdrop-filter: brightness(1.5) blur(5px)) {\n .TooltipBase_container {\n background-color: rgba(0, 0, 0, 0.95); }\n .TooltipBase_container-loading {\n background-color: rgba(0, 0, 0, 0.95); } }\n\n.TooltipBase_container-loading {\n background-color: rgba(3, 3, 3, 0.9);\n backdrop-filter: brightness(1.5) blur(5px);\n -webkit-backdrop-filter: brightness(1.5) blur(5px);\n padding: 1rem; }\n\n.TooltipBase_titlesubtitle {\n display: flex;\n justify-content: space-between;\n margin-bottom: 1rem; }\n\n.TooltipBase_title {\n flex: 1;\n overflow: hidden;\n padding-right: 1rem; }\n\n.TooltipBase_title_text {\n font-size: 18px;\n text-shadow: black 1px 1px 0;\n font-weight: 500; }\n\n.TooltipBase_subtitle {\n text-align: end;\n font-size: 12px; }\n\n.TooltipBase_iconmaininfo {\n display: flex;\n margin-bottom: 0.8rem; }\n\n.TooltipBase_iconcontainer {\n margin-right: 0.5rem;\n margin-bottom: 0.25rem;\n float: left;\n position: relative; }\n\n.TooltipBase_iconBg {\n width: 64px;\n height: 64px;\n background-origin: content-box !important; }\n\n.TooltipBase_icon {\n width: calc(64px - (0px * 2));\n height: calc(64px - (0px * 2));\n padding: 0px; }\n\n.TooltipBase_maininfocontainer {\n font-size: 16px;\n font-weight: 500; }\n\n.TooltipBase_maininfocontainer > div:not(:last-child) {\n margin-bottom: 0.2rem; }\n\n.TooltipBase_fullwidthContainer {\n line-height: 17px; }\n\n.TooltipBase_fullwidthContainer > div:not(:last-child) {\n margin-bottom: 0.5rem; }\n\n.TooltipBase_fullwidthContainer-subContainer {\n font-size: 12px; }\n\n.TooltipBase_fullwidthContainer-subContainer > div:not(:last-child) {\n margin-bottom: 0.1rem; }\n\n.TooltipBase_flex {\n display: flex;\n align-items: center; }\n\n.TooltipBase_flex-col {\n display: flex;\n justify-content: center;\n flex-direction: column; }\n\n.TooltipBase_descriptions-description-title {\n font-weight: 500; }\n";
33
+ var css_248z$6 = "*[class*=\"00008130.UI.Label_LightYellow_12\"] {\n color: #ecd967 !important; }\n\n*[class*=\"00008130.UI.Vital_LightBlue\"] {\n color: #46bee1 !important;\n font-weight: 500 !important; }\n\n*[class*=\"00008130.UI.Label_Green03_12\"] {\n color: #58ff77 !important; }\n\n.TooltipBase_grade-none {\n color: #c2cadc; }\n\n.TooltipBase_grade-1 {\n color: #6c6c6c !important; }\n\n.TooltipBase_border-grade-1 {\n border-color: #6c6c6c !important; }\n\n.TooltipBase_border-hover-grade-1:hover {\n border-color: #6c6c6c !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_1\"] {\n color: #6c6c6c !important;\n border-color: #6c6c6c !important; }\n\n.TooltipBase_grade-2 {\n color: #ffffff !important; }\n\n.TooltipBase_border-grade-2 {\n border-color: #ffffff !important; }\n\n.TooltipBase_border-hover-grade-2:hover {\n border-color: #ffffff !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_2\"] {\n color: #ffffff !important;\n border-color: #ffffff !important; }\n\n.TooltipBase_grade-3 {\n color: #58ff77 !important; }\n\n.TooltipBase_border-grade-3 {\n border-color: #58ff77 !important; }\n\n.TooltipBase_border-hover-grade-3:hover {\n border-color: #58ff77 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_3\"] {\n color: #58ff77 !important;\n border-color: #58ff77 !important; }\n\n.TooltipBase_grade-4 {\n color: #46bee1 !important; }\n\n.TooltipBase_border-grade-4 {\n border-color: #46bee1 !important; }\n\n.TooltipBase_border-hover-grade-4:hover {\n border-color: #46bee1 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_4\"] {\n color: #46bee1 !important;\n border-color: #46bee1 !important; }\n\n.TooltipBase_grade-5 {\n color: #d739ff !important; }\n\n.TooltipBase_border-grade-5 {\n border-color: #d739ff !important; }\n\n.TooltipBase_border-hover-grade-5:hover {\n border-color: #d739ff !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_5\"] {\n color: #d739ff !important;\n border-color: #d739ff !important; }\n\n.TooltipBase_grade-6 {\n color: #f1b248 !important; }\n\n.TooltipBase_border-grade-6 {\n border-color: #f1b248 !important; }\n\n.TooltipBase_border-hover-grade-6:hover {\n border-color: #f1b248 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_6\"] {\n color: #f1b248 !important;\n border-color: #f1b248 !important; }\n\n.TooltipBase_grade-7 {\n color: #ff770a !important; }\n\n.TooltipBase_border-grade-7 {\n border-color: #ff770a !important; }\n\n.TooltipBase_border-hover-grade-7:hover {\n border-color: #ff770a !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_7\"] {\n color: #ff770a !important;\n border-color: #ff770a !important; }\n\n.TooltipBase_grade-8 {\n color: #ff0084 !important; }\n\n.TooltipBase_border-grade-8 {\n border-color: #ff0084 !important; }\n\n.TooltipBase_border-hover-grade-8:hover {\n border-color: #ff0084 !important; }\n\n*[class*=\"00008130.Program.Fontset_ItemGrade_8\"] {\n color: #ff0084 !important;\n border-color: #ff0084 !important; }\n\n.TooltipBase_iconbg-grade-1 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_1.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-2 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_2.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-3 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_3.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-4 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_4.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-5 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_5.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-6 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_6.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-7 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_7.png\") no-repeat; }\n\n.TooltipBase_iconbg-grade-8 {\n background: url(\"https://lean.bns.tools/bns/icons/UE4/ItemIcon_Bg_Grade_8.png\") no-repeat; }\n\n.TooltipBase_container {\n box-sizing: border-box;\n font-family: \"Montserrat\", sans-serif !important;\n scroll-behavior: smooth;\n touch-action: manipulation;\n -webkit-overflow-scrolling: touch;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n position: relative;\n display: inline-flex;\n flex-direction: column;\n background-color: rgba(3, 3, 3, 0.9);\n backdrop-filter: brightness(1.5) blur(5px);\n -webkit-backdrop-filter: brightness(1.5) blur(5px);\n padding: 1rem;\n border: 1px solid;\n border-color: #6c6c6c;\n font-weight: 500;\n font-size: 16px;\n text-decoration: none;\n color: #fff;\n width: 380px;\n max-height: calc(100vh - 50px);\n overflow-y: auto;\n -ms-overflow-style: none;\n /* IE and Edge */\n scrollbar-width: none;\n /* Firefox */\n border-radius: 3px;\n text-shadow: black 1px 1px 0; }\n\n.TooltipBase_containerFullHeight {\n height: 99%; }\n\n.TooltipBase_container::-webkit-scrollbar {\n display: none; }\n\n@media only screen and (max-width: 380px) {\n .TooltipBase_container {\n width: 100%; } }\n\n@supports not (backdrop-filter: brightness(1.5) blur(5px)) {\n .TooltipBase_container {\n background-color: rgba(0, 0, 0, 0.95); }\n .TooltipBase_container-loading {\n background-color: rgba(0, 0, 0, 0.95); } }\n\n.TooltipBase_container-loading {\n background-color: rgba(3, 3, 3, 0.9);\n backdrop-filter: brightness(1.5) blur(5px);\n -webkit-backdrop-filter: brightness(1.5) blur(5px);\n padding: 1rem; }\n\n.TooltipBase_titlesubtitle {\n display: flex;\n justify-content: space-between;\n margin-bottom: 1rem; }\n\n.TooltipBase_title {\n flex: 1;\n overflow: hidden;\n padding-right: 1rem; }\n\n.TooltipBase_title_text {\n font-size: 18px;\n text-shadow: black 1px 1px 0;\n font-weight: 500; }\n\n.TooltipBase_subtitle {\n text-align: end;\n font-size: 12px; }\n\n.TooltipBase_iconmaininfo {\n display: flex;\n margin-bottom: 0.8rem; }\n\n.TooltipBase_iconcontainer {\n margin-right: 0.5rem;\n margin-bottom: 0.25rem;\n float: left;\n position: relative; }\n\n.TooltipBase_iconBg {\n width: 64px;\n height: 64px;\n background-origin: content-box !important; }\n\n.TooltipBase_icon {\n width: calc(64px - (0px * 2));\n height: calc(64px - (0px * 2));\n padding: 0px; }\n\n.TooltipBase_maininfocontainer {\n font-size: 16px;\n font-weight: 500; }\n\n.TooltipBase_maininfocontainer > div:not(:last-child) {\n margin-bottom: 0.2rem; }\n\n.TooltipBase_fullwidthContainer {\n line-height: 17px; }\n\n.TooltipBase_fullwidthContainer > div:not(:last-child) {\n margin-bottom: 0.5rem; }\n\n.TooltipBase_fullwidthContainer-subContainer {\n font-size: 12px; }\n\n.TooltipBase_fullwidthContainer-subContainer > div:not(:last-child) {\n margin-bottom: 0.1rem; }\n\n.TooltipBase_flex {\n display: flex;\n align-items: center; }\n\n.TooltipBase_flex-col {\n display: flex;\n justify-content: center;\n flex-direction: column; }\n\n.TooltipBase_descriptions-description-title {\n font-weight: 500; }\n";
34
34
  styleInject(css_248z$6);
35
35
 
36
36
  function TooltipBase(_a) {
37
- var title = _a.title, category = _a.subtitle, grade = _a.grade, _b = _a.icon, icon = _b === void 0 ? "" : _b, _c = _a.mainInfos, mainTexts = _c === void 0 ? [] : _c, _d = _a.subInfoGroups, subTexts = _d === void 0 ? [] : _d, id = _a.id;
38
- return (React.createElement("div", { id: id !== null && id !== void 0 ? id : "", "data-testid": "TooltipBase", className: "TooltipBase_container TooltipBase_border-grade-".concat(grade) },
37
+ var title = _a.title, category = _a.subtitle, grade = _a.grade, _b = _a.icon, icon = _b === void 0 ? "" : _b, _c = _a.mainInfos, mainTexts = _c === void 0 ? [] : _c, _d = _a.subInfoGroups, subTexts = _d === void 0 ? [] : _d, id = _a.id, _e = _a.fullHeight, fullHeight = _e === void 0 ? false : _e;
38
+ return (React.createElement("div", { id: id !== null && id !== void 0 ? id : "", "data-testid": "TooltipBase", className: "TooltipBase_container TooltipBase_border-grade-".concat(grade, " ").concat(fullHeight ? "TooltipBase_containerFullHeight" : "") },
39
39
  (title != null && title != "") ||
40
40
  (category != null && category != "") ? (React.createElement("div", { className: "TooltipBase_titlesubtitle" },
41
41
  React.createElement("div", { className: "TooltipBase_title" },
@@ -133,7 +133,7 @@ function __generator(thisArg, body) {
133
133
  }
134
134
  }
135
135
 
136
- var css_248z$5 = ".ItemTooltip_itemIconLoading {\n width: 50px;\n padding: .22rem 0;\n display: flex;\n justify-content: center;\n align-items: center; }\n\n.ItemTooltip_jobstyleToggleContainer {\n display: flex; }\n\n.ItemTooltip_jobstyleButton {\n flex: 1;\n border: none;\n padding: 0.33rem 0.5rem;\n border-radius: 0;\n background-color: rgba(233, 233, 233, 0.1);\n color: #fff;\n opacity: 0.8;\n cursor: pointer;\n transition: background-color 0.1s; }\n .ItemTooltip_jobstyleButton:hover {\n background-color: rgba(255, 255, 255, 0.2);\n opacity: 1; }\n .ItemTooltip_jobstyleButton-active {\n background-color: rgba(255, 255, 255, 0.3) !important;\n color: #fff;\n opacity: 1; }\n\n.ItemTooltip_itemiconnamedivspan {\n display: flex;\n justify-content: center;\n align-items: center; }\n\n.ItemTooltip_cooldown {\n font-weight: 400;\n font-size: 12px; }\n\n.ItemTooltip_subInfo {\n font-size: 14px; }\n\n.ItemTooltip_stats_mainstat {\n font-size: 16px;\n margin-bottom: 0.05rem; }\n\n.ItemTooltip_stats_substat {\n font-size: 14px; }\n\n.ItemTooltip_itemIconInline {\n width: 18px !important;\n height: 18px !important;\n margin: 0 1px;\n top: 3px;\n position: relative; }\n\n.ItemTooltip_itemIconRandom {\n width: 36px !important;\n top: 6px;\n margin: 0 1px 0 2px; }\n\n.ItemTooltip_itemIconSmall {\n width: 20px !important;\n height: 20px !important;\n margin-right: 0.33rem; }\n\n.ItemTooltip_setBonus {\n margin-bottom: 0.8rem !important; }\n\n.ItemTooltip_setContainer {\n padding-left: 0.33rem;\n padding-top: 0.22rem; }\n\n.ItemTooltip_setStageContainer {\n display: flex;\n margin: 0.25rem 0 0.35rem 0; }\n\n.ItemTooltip_setStageNumber {\n margin-top: 0.2rem;\n padding-top: 0.1rem;\n line-height: 16px;\n width: 16px;\n height: 16px;\n max-height: 16px;\n font-weight: 500;\n display: flex;\n justify-content: center;\n align-items: center;\n color: rgba(88, 255, 119, 0.8);\n border: 1px solid rgba(88, 255, 119, 0.9);\n border-radius: 3px; }\n\n.ItemTooltip_setStageContent {\n padding-top: 0.2rem;\n flex-grow: 2;\n padding-left: 0.55rem;\n max-width: 90%;\n color: #58ff77; }\n\n.ItemTooltip_itemiconnamediv {\n display: flex;\n align-items: center;\n padding: 0.15rem 0 0.15rem 0.33rem;\n line-height: 20px; }\n\n.ItemTooltip_setItemIconNameDiv {\n display: flex;\n align-items: center;\n padding: 0.11rem 0 0.11rem 0.33rem;\n line-height: 20px; }\n\n.ItemTooltip_setItemsContainer {\n display: flex;\n font-size: 12px; }\n\n.ItemTooltip_setItemsSubContainer {\n flex: 1; }\n\n.ItemTooltip_itemNameRandomDiv {\n display: flex;\n align-items: center; }\n\n/**\r\n * ==============================================\r\n * Dot Elastic\r\n * ==============================================\r\n */\n.dot-elastic {\n position: relative;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: rgba(127, 127, 127, 0.8);\n color: rgba(127, 127, 127, 0.8);\n animation: dotElastic 1s infinite linear; }\n\n.dot-elastic::before,\n.dot-elastic::after {\n content: \"\";\n display: inline-block;\n position: absolute;\n top: 0; }\n\n.dot-elastic::before {\n left: -15px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: rgba(127, 127, 127, 0.8);\n color: rgba(127, 127, 127, 0.8);\n animation: dotElasticBefore 1s infinite linear; }\n\n.dot-elastic::after {\n left: 15px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: rgba(127, 127, 127, 0.8);\n color: rgba(127, 127, 127, 0.8);\n animation: dotElasticAfter 1s infinite linear; }\n\n@keyframes dotElasticBefore {\n 0% {\n transform: scale(1, 1); }\n 25% {\n transform: scale(1, 1.5); }\n 50% {\n transform: scale(1, 0.67); }\n 75% {\n transform: scale(1, 1); }\n 100% {\n transform: scale(1, 1); } }\n\n@keyframes dotElastic {\n 0% {\n transform: scale(1, 1); }\n 25% {\n transform: scale(1, 1); }\n 50% {\n transform: scale(1, 1.5); }\n 75% {\n transform: scale(1, 1); }\n 100% {\n transform: scale(1, 1); } }\n\n@keyframes dotElasticAfter {\n 0% {\n transform: scale(1, 1); }\n 25% {\n transform: scale(1, 1); }\n 50% {\n transform: scale(1, 0.67); }\n 75% {\n transform: scale(1, 1.5); }\n 100% {\n transform: scale(1, 1); } }\n";
136
+ var css_248z$5 = ".ItemTooltip_itemIconLoading {\n width: 50px;\n padding: 0.22rem 0;\n display: flex;\n justify-content: center;\n align-items: center; }\n\n.ItemTooltip_jobstyleToggleContainer {\n display: flex; }\n\n.ItemTooltip_jobstyleButton {\n flex: 1;\n border: none;\n padding: 0.33rem 0.5rem;\n border-radius: 0;\n background-color: rgba(233, 233, 233, 0.1);\n color: #fff;\n opacity: 0.8;\n cursor: pointer;\n transition: background-color 0.1s; }\n .ItemTooltip_jobstyleButton:hover {\n background-color: rgba(255, 255, 255, 0.2);\n opacity: 1; }\n .ItemTooltip_jobstyleButton-active {\n background-color: rgba(255, 255, 255, 0.3) !important;\n color: #fff;\n opacity: 1; }\n\n.ItemTooltip_itemiconnamedivspan {\n display: flex;\n justify-content: center;\n align-items: center; }\n\n.ItemTooltip_cooldown {\n font-weight: 400;\n font-size: 12px; }\n\n.ItemTooltip_subInfo {\n font-size: 14px; }\n\n.ItemTooltip_stats_mainstat {\n font-size: 16px;\n margin-bottom: 0.05rem; }\n\n.ItemTooltip_stats_substat {\n font-size: 14px; }\n\n.ItemTooltip_itemIconInline {\n width: 18px !important;\n height: 18px !important;\n margin: 0 1px;\n top: 3px;\n position: relative; }\n\n.ItemTooltip_itemIconRandom {\n width: 36px !important;\n top: 6px;\n margin: 0 1px 0 2px; }\n\n.ItemTooltip_itemIconSmall {\n width: 20px !important;\n height: 20px !important;\n margin-right: 0.33rem; }\n\n.ItemTooltip_setBonus {\n margin-bottom: 0.8rem !important; }\n\n.ItemTooltip_setContainer {\n padding-left: 0.33rem;\n padding-top: 0.22rem; }\n\n.ItemTooltip_setStageContainer {\n display: flex;\n margin: 0.25rem 0 0.35rem 0; }\n\n.ItemTooltip_setStageNumber {\n margin-top: 0.2rem;\n padding-top: 0.1rem;\n line-height: 16px;\n width: 16px;\n height: 16px;\n max-height: 16px;\n font-weight: 500;\n display: flex;\n justify-content: center;\n align-items: center;\n color: rgba(88, 255, 119, 0.8);\n border: 1px solid rgba(88, 255, 119, 0.9);\n border-radius: 3px; }\n\n.ItemTooltip_setStageContent {\n padding-top: 0.2rem;\n flex-grow: 2;\n padding-left: 0.55rem;\n max-width: 90%;\n color: #58ff77; }\n\n.ItemTooltip_itemiconnamediv {\n display: flex;\n align-items: center;\n padding: 0.15rem 0 0.15rem 0.33rem;\n line-height: 20px; }\n\n.ItemTooltip_setItemIconNameDiv {\n display: flex;\n align-items: center;\n padding: 0.11rem 0 0.11rem 0.33rem;\n line-height: 20px; }\n\n.ItemTooltip_setItemsContainer {\n display: flex;\n font-size: 12px; }\n\n.ItemTooltip_setItemsSubContainer {\n flex: 1; }\n\n.ItemTooltip_itemNameRandomDiv {\n display: flex;\n align-items: center; }\n\n@media only screen and (max-width: 380px) {\n .ItemTooltip_jobstyleButton {\n padding: 0.5rem; } }\n\n/**\r\n * ==============================================\r\n * Dot Elastic\r\n * ==============================================\r\n */\n.dot-elastic {\n position: relative;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: rgba(127, 127, 127, 0.8);\n color: rgba(127, 127, 127, 0.8);\n animation: dotElastic 1s infinite linear; }\n\n.dot-elastic::before,\n.dot-elastic::after {\n content: \"\";\n display: inline-block;\n position: absolute;\n top: 0; }\n\n.dot-elastic::before {\n left: -15px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: rgba(127, 127, 127, 0.8);\n color: rgba(127, 127, 127, 0.8);\n animation: dotElasticBefore 1s infinite linear; }\n\n.dot-elastic::after {\n left: 15px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: rgba(127, 127, 127, 0.8);\n color: rgba(127, 127, 127, 0.8);\n animation: dotElasticAfter 1s infinite linear; }\n\n@keyframes dotElasticBefore {\n 0% {\n transform: scale(1, 1); }\n 25% {\n transform: scale(1, 1.5); }\n 50% {\n transform: scale(1, 0.67); }\n 75% {\n transform: scale(1, 1); }\n 100% {\n transform: scale(1, 1); } }\n\n@keyframes dotElastic {\n 0% {\n transform: scale(1, 1); }\n 25% {\n transform: scale(1, 1); }\n 50% {\n transform: scale(1, 1.5); }\n 75% {\n transform: scale(1, 1); }\n 100% {\n transform: scale(1, 1); } }\n\n@keyframes dotElasticAfter {\n 0% {\n transform: scale(1, 1); }\n 25% {\n transform: scale(1, 1); }\n 50% {\n transform: scale(1, 0.67); }\n 75% {\n transform: scale(1, 1.5); }\n 100% {\n transform: scale(1, 1); } }\n";
137
137
  styleInject(css_248z$5);
138
138
 
139
139
  function BuildIconPath(iconPath, iconIndex) {
@@ -448,10 +448,11 @@ var BnsItemApiFetchParamCreator = function (configuration) {
448
448
  * @param {string} [gradesString]
449
449
  * @param {string} [minGs]
450
450
  * @param {string} [patch]
451
+ * @param {boolean} [noDupes]
451
452
  * @param {*} [options] Override http request option.
452
453
  * @throws {RequiredError}
453
454
  */
454
- bnsItemItemsByCategoryGet: function (region, category, technicalJobName, gradesString, minGs, patch, options) {
455
+ bnsItemItemsByCategoryGet: function (region, category, technicalJobName, gradesString, minGs, patch, noDupes, options) {
455
456
  if (options === void 0) { options = {}; }
456
457
  // verify required parameter 'region' is not null or undefined
457
458
  if (region === null || region === undefined) {
@@ -480,6 +481,9 @@ var BnsItemApiFetchParamCreator = function (configuration) {
480
481
  if (patch !== undefined) {
481
482
  localVarQueryParameter['patch'] = patch;
482
483
  }
484
+ if (noDupes !== undefined) {
485
+ localVarQueryParameter['noDupes'] = noDupes;
486
+ }
483
487
  localVarUrlObj.query = Object.assign({}, localVarUrlObj.query, localVarQueryParameter, options.query);
484
488
  // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
485
489
  delete localVarUrlObj.search;
@@ -654,6 +658,55 @@ var BnsItemApiFetchParamCreator = function (configuration) {
654
658
  options: localVarRequestOptions,
655
659
  };
656
660
  },
661
+ /**
662
+ *
663
+ * @param {string} region
664
+ * @param {string} itemType
665
+ * @param {string} technicalJobName
666
+ * @param {string} [patch]
667
+ * @param {*} [options] Override http request option.
668
+ * @throws {RequiredError}
669
+ */
670
+ bnsItemYastItemsGet: function (region, itemType, technicalJobName, patch, options) {
671
+ if (options === void 0) { options = {}; }
672
+ // verify required parameter 'region' is not null or undefined
673
+ if (region === null || region === undefined) {
674
+ throw new RequiredError('region', 'Required parameter region was null or undefined when calling bnsItemYastItemsGet.');
675
+ }
676
+ // verify required parameter 'itemType' is not null or undefined
677
+ if (itemType === null || itemType === undefined) {
678
+ throw new RequiredError('itemType', 'Required parameter itemType was null or undefined when calling bnsItemYastItemsGet.');
679
+ }
680
+ // verify required parameter 'technicalJobName' is not null or undefined
681
+ if (technicalJobName === null || technicalJobName === undefined) {
682
+ throw new RequiredError('technicalJobName', 'Required parameter technicalJobName was null or undefined when calling bnsItemYastItemsGet.');
683
+ }
684
+ var localVarPath = "/BnsItem/YastItems";
685
+ var localVarUrlObj = url.parse(localVarPath, true);
686
+ var localVarRequestOptions = Object.assign({ method: 'GET' }, options);
687
+ var localVarHeaderParameter = {};
688
+ var localVarQueryParameter = {};
689
+ if (region !== undefined) {
690
+ localVarQueryParameter['region'] = region;
691
+ }
692
+ if (itemType !== undefined) {
693
+ localVarQueryParameter['itemType'] = itemType;
694
+ }
695
+ if (technicalJobName !== undefined) {
696
+ localVarQueryParameter['technicalJobName'] = technicalJobName;
697
+ }
698
+ if (patch !== undefined) {
699
+ localVarQueryParameter['patch'] = patch;
700
+ }
701
+ localVarUrlObj.query = Object.assign({}, localVarUrlObj.query, localVarQueryParameter, options.query);
702
+ // fix override query string Detail: https://stackoverflow.com/a/7517673/1077943
703
+ delete localVarUrlObj.search;
704
+ localVarRequestOptions.headers = Object.assign({}, localVarHeaderParameter, options.headers);
705
+ return {
706
+ url: url.format(localVarUrlObj),
707
+ options: localVarRequestOptions,
708
+ };
709
+ },
657
710
  };
658
711
  };
659
712
  /**
@@ -743,11 +796,12 @@ var BnsItemApiFp = function (configuration) {
743
796
  * @param {string} [gradesString]
744
797
  * @param {string} [minGs]
745
798
  * @param {string} [patch]
799
+ * @param {boolean} [noDupes]
746
800
  * @param {*} [options] Override http request option.
747
801
  * @throws {RequiredError}
748
802
  */
749
- bnsItemItemsByCategoryGet: function (region, category, technicalJobName, gradesString, minGs, patch, options) {
750
- var localVarFetchArgs = BnsItemApiFetchParamCreator().bnsItemItemsByCategoryGet(region, category, technicalJobName, gradesString, minGs, patch, options);
803
+ bnsItemItemsByCategoryGet: function (region, category, technicalJobName, gradesString, minGs, patch, noDupes, options) {
804
+ var localVarFetchArgs = BnsItemApiFetchParamCreator().bnsItemItemsByCategoryGet(region, category, technicalJobName, gradesString, minGs, patch, noDupes, options);
751
805
  return function (fetch, basePath) {
752
806
  if (fetch === void 0) { fetch = isomorphicFetch; }
753
807
  if (basePath === void 0) { basePath = BASE_PATH; }
@@ -870,6 +924,30 @@ var BnsItemApiFp = function (configuration) {
870
924
  });
871
925
  };
872
926
  },
927
+ /**
928
+ *
929
+ * @param {string} region
930
+ * @param {string} itemType
931
+ * @param {string} technicalJobName
932
+ * @param {string} [patch]
933
+ * @param {*} [options] Override http request option.
934
+ * @throws {RequiredError}
935
+ */
936
+ bnsItemYastItemsGet: function (region, itemType, technicalJobName, patch, options) {
937
+ var localVarFetchArgs = BnsItemApiFetchParamCreator().bnsItemYastItemsGet(region, itemType, technicalJobName, patch, options);
938
+ return function (fetch, basePath) {
939
+ if (fetch === void 0) { fetch = isomorphicFetch; }
940
+ if (basePath === void 0) { basePath = BASE_PATH; }
941
+ return fetch(basePath + localVarFetchArgs.url, localVarFetchArgs.options).then(function (response) {
942
+ if (response.status >= 200 && response.status < 300) {
943
+ return response.json();
944
+ }
945
+ else {
946
+ throw response;
947
+ }
948
+ });
949
+ };
950
+ },
873
951
  };
874
952
  };
875
953
  /**
@@ -931,12 +1009,13 @@ var BnsItemApi = /** @class */ (function (_super) {
931
1009
  * @param {string} [gradesString]
932
1010
  * @param {string} [minGs]
933
1011
  * @param {string} [patch]
1012
+ * @param {boolean} [noDupes]
934
1013
  * @param {*} [options] Override http request option.
935
1014
  * @throws {RequiredError}
936
1015
  * @memberof BnsItemApi
937
1016
  */
938
- BnsItemApi.prototype.bnsItemItemsByCategoryGet = function (region, category, technicalJobName, gradesString, minGs, patch, options) {
939
- return BnsItemApiFp(this.configuration).bnsItemItemsByCategoryGet(region, category, technicalJobName, gradesString, minGs, patch, options)(this.fetch, this.basePath);
1017
+ BnsItemApi.prototype.bnsItemItemsByCategoryGet = function (region, category, technicalJobName, gradesString, minGs, patch, noDupes, options) {
1018
+ return BnsItemApiFp(this.configuration).bnsItemItemsByCategoryGet(region, category, technicalJobName, gradesString, minGs, patch, noDupes, options)(this.fetch, this.basePath);
940
1019
  };
941
1020
  /**
942
1021
  *
@@ -992,6 +1071,19 @@ var BnsItemApi = /** @class */ (function (_super) {
992
1071
  BnsItemApi.prototype.bnsItemPingGet = function (options) {
993
1072
  return BnsItemApiFp(this.configuration).bnsItemPingGet(options)(this.fetch, this.basePath);
994
1073
  };
1074
+ /**
1075
+ *
1076
+ * @param {string} region
1077
+ * @param {string} itemType
1078
+ * @param {string} technicalJobName
1079
+ * @param {string} [patch]
1080
+ * @param {*} [options] Override http request option.
1081
+ * @throws {RequiredError}
1082
+ * @memberof BnsItemApi
1083
+ */
1084
+ BnsItemApi.prototype.bnsItemYastItemsGet = function (region, itemType, technicalJobName, patch, options) {
1085
+ return BnsItemApiFp(this.configuration).bnsItemYastItemsGet(region, itemType, technicalJobName, patch, options)(this.fetch, this.basePath);
1086
+ };
995
1087
  return BnsItemApi;
996
1088
  }(BaseAPI));
997
1089
 
@@ -5366,9 +5458,9 @@ function AccountTransfer(_a) {
5366
5458
  function ItemTooltip(_a) {
5367
5459
  var _this = this;
5368
5460
  var _b, _c, _d;
5369
- var data = _a.data, region = _a.region, _e = _a.debug, debug = _e === void 0 ? false : _e, _f = _a.offline, offline = _f === void 0 ? false : _f, clientProp = _a.client, jobstyleOverride = _a.jobstyleOverride;
5370
- var _g = useState("advanced-1"), jobstyle = _g[0], setJobstyle = _g[1];
5371
- var _h = useState(), client = _h[0], setClient = _h[1];
5461
+ var data = _a.data, region = _a.region, _e = _a.debug, debug = _e === void 0 ? false : _e, _f = _a.offline, offline = _f === void 0 ? false : _f, clientProp = _a.client, jobstyleOverride = _a.jobstyleOverride, _g = _a.fullHeight, fullHeight = _g === void 0 ? false : _g;
5462
+ var _h = useState("advanced-1"), jobstyle = _h[0], setJobstyle = _h[1];
5463
+ var _j = useState(), client = _j[0], setClient = _j[1];
5372
5464
  useEffect(function () {
5373
5465
  if (offline)
5374
5466
  return;
@@ -5397,6 +5489,7 @@ function ItemTooltip(_a) {
5397
5489
  subtitle: (_c = (_b = item.categories) === null || _b === void 0 ? void 0 : _b.sort(function (a, b) { return b.index - a.index; })[0].localizedName) !== null && _c !== void 0 ? _c : "",
5398
5490
  mainInfos: [],
5399
5491
  subInfoGroups: [],
5492
+ fullHeight: fullHeight,
5400
5493
  };
5401
5494
  var setHasSkillModifiers = false;
5402
5495
  var jobstyles = [];