@genexus/genexus-ide-ui 3.0.1 → 3.1.0

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 (100) hide show
  1. package/dist/cjs/genexus-ide-ui.cjs.js +1 -1
  2. package/dist/cjs/gx-ide-file-item.cjs.entry.js +21 -2
  3. package/dist/cjs/gx-ide-file-item.cjs.entry.js.map +1 -1
  4. package/dist/cjs/gx-ide-file-uploader.cjs.entry.js +11 -8
  5. package/dist/cjs/gx-ide-file-uploader.cjs.entry.js.map +1 -1
  6. package/dist/cjs/gx-ide-launchpad.cjs.entry.js +4 -16
  7. package/dist/cjs/gx-ide-launchpad.cjs.entry.js.map +1 -1
  8. package/dist/cjs/gx-ide-multi-select.cjs.entry.js +113 -0
  9. package/dist/cjs/gx-ide-multi-select.cjs.entry.js.map +1 -0
  10. package/dist/cjs/gx-ide-search.cjs.entry.js +171 -0
  11. package/dist/cjs/gx-ide-search.cjs.entry.js.map +1 -0
  12. package/dist/cjs/gx-ide-ww-files.cjs.entry.js +4 -9
  13. package/dist/cjs/gx-ide-ww-files.cjs.entry.js.map +1 -1
  14. package/dist/cjs/loader.cjs.js +1 -1
  15. package/dist/collection/collection-manifest.json +2 -0
  16. package/dist/collection/components/_helpers/multi-select/gx-ide-multi-select.css +193 -0
  17. package/dist/collection/components/_helpers/multi-select/gx-ide-multi-select.js +209 -0
  18. package/dist/collection/components/_helpers/multi-select/gx-ide-multi-select.js.map +1 -0
  19. package/dist/collection/components/file-uploader/file-item/file-item.css +23 -28
  20. package/dist/collection/components/file-uploader/file-item/file-item.js +37 -1
  21. package/dist/collection/components/file-uploader/file-item/file-item.js.map +1 -1
  22. package/dist/collection/components/file-uploader/file-uploader.css +11 -22
  23. package/dist/collection/components/file-uploader/file-uploader.js +10 -7
  24. package/dist/collection/components/file-uploader/file-uploader.js.map +1 -1
  25. package/dist/collection/components/file-uploader/gx-ide-assets/file-uploader/langs/file-uploader.lang.en.json +7 -3
  26. package/dist/collection/components/file-uploader/gx-ide-assets/file-uploader/langs/file-uploader.lang.ja.json +7 -3
  27. package/dist/collection/components/file-uploader/gx-ide-assets/file-uploader/langs/file-uploader.lang.zh.json +8 -3
  28. package/dist/collection/components/launchpad/root/gx-ide-assets/launchpad/shortcuts.json +1 -26
  29. package/dist/collection/components/launchpad/root/launchpad.js +5 -42
  30. package/dist/collection/components/launchpad/root/launchpad.js.map +1 -1
  31. package/dist/collection/components/search/gx-ide-assets/search/langs/search.lang.en.json +37 -0
  32. package/dist/collection/components/search/gx-ide-assets/search/langs/search.lang.ja.json +37 -0
  33. package/dist/collection/components/search/gx-ide-assets/search/langs/search.lang.zh.json +37 -0
  34. package/dist/collection/components/search/search.css +44 -0
  35. package/dist/collection/components/search/search.js +275 -0
  36. package/dist/collection/components/search/search.js.map +1 -0
  37. package/dist/collection/components/ww-files/ww-files.js +4 -9
  38. package/dist/collection/components/ww-files/ww-files.js.map +1 -1
  39. package/dist/collection/testing/locale.e2e.js +4 -1
  40. package/dist/collection/testing/locale.e2e.js.map +1 -1
  41. package/dist/components/file-item.js +22 -2
  42. package/dist/components/file-item.js.map +1 -1
  43. package/dist/components/gx-ide-file-uploader.js +11 -8
  44. package/dist/components/gx-ide-file-uploader.js.map +1 -1
  45. package/dist/components/gx-ide-launchpad.js +6 -19
  46. package/dist/components/gx-ide-launchpad.js.map +1 -1
  47. package/dist/components/gx-ide-multi-select.d.ts +11 -0
  48. package/dist/components/gx-ide-multi-select.js +132 -0
  49. package/dist/components/gx-ide-multi-select.js.map +1 -0
  50. package/dist/components/gx-ide-search.d.ts +11 -0
  51. package/dist/components/gx-ide-search.js +206 -0
  52. package/dist/components/gx-ide-search.js.map +1 -0
  53. package/dist/components/gx-ide-ww-files.js +4 -9
  54. package/dist/components/gx-ide-ww-files.js.map +1 -1
  55. package/dist/esm/genexus-ide-ui.js +1 -1
  56. package/dist/esm/gx-ide-file-item.entry.js +21 -2
  57. package/dist/esm/gx-ide-file-item.entry.js.map +1 -1
  58. package/dist/esm/gx-ide-file-uploader.entry.js +11 -8
  59. package/dist/esm/gx-ide-file-uploader.entry.js.map +1 -1
  60. package/dist/esm/gx-ide-launchpad.entry.js +5 -17
  61. package/dist/esm/gx-ide-launchpad.entry.js.map +1 -1
  62. package/dist/esm/gx-ide-multi-select.entry.js +109 -0
  63. package/dist/esm/gx-ide-multi-select.entry.js.map +1 -0
  64. package/dist/esm/gx-ide-search.entry.js +167 -0
  65. package/dist/esm/gx-ide-search.entry.js.map +1 -0
  66. package/dist/esm/gx-ide-ww-files.entry.js +4 -9
  67. package/dist/esm/gx-ide-ww-files.entry.js.map +1 -1
  68. package/dist/esm/loader.js +1 -1
  69. package/dist/genexus-ide-ui/genexus-ide-ui.esm.js +1 -1
  70. package/dist/genexus-ide-ui/genexus-ide-ui.esm.js.map +1 -1
  71. package/dist/genexus-ide-ui/gx-ide-assets/file-uploader/langs/file-uploader.lang.en.json +7 -3
  72. package/dist/genexus-ide-ui/gx-ide-assets/file-uploader/langs/file-uploader.lang.ja.json +7 -3
  73. package/dist/genexus-ide-ui/gx-ide-assets/file-uploader/langs/file-uploader.lang.zh.json +8 -3
  74. package/dist/genexus-ide-ui/gx-ide-assets/launchpad/shortcuts.json +1 -26
  75. package/dist/genexus-ide-ui/gx-ide-assets/search/langs/search.lang.en.json +37 -0
  76. package/dist/genexus-ide-ui/gx-ide-assets/search/langs/search.lang.ja.json +37 -0
  77. package/dist/genexus-ide-ui/gx-ide-assets/search/langs/search.lang.zh.json +37 -0
  78. package/dist/genexus-ide-ui/p-0745a565.entry.js +152 -0
  79. package/dist/genexus-ide-ui/p-0745a565.entry.js.map +1 -0
  80. package/dist/genexus-ide-ui/{p-6246204f.entry.js → p-25e749c7.entry.js} +44 -57
  81. package/dist/genexus-ide-ui/p-25e749c7.entry.js.map +1 -0
  82. package/dist/genexus-ide-ui/{p-60db2f02.entry.js → p-7bdeae77.entry.js} +106 -108
  83. package/dist/genexus-ide-ui/p-7bdeae77.entry.js.map +1 -0
  84. package/dist/genexus-ide-ui/p-8b5c826b.entry.js +212 -0
  85. package/dist/genexus-ide-ui/p-8b5c826b.entry.js.map +1 -0
  86. package/dist/genexus-ide-ui/p-c460c9e7.entry.js +187 -0
  87. package/dist/genexus-ide-ui/p-c460c9e7.entry.js.map +1 -0
  88. package/dist/genexus-ide-ui/{p-aad714a5.entry.js → p-e2b88bea.entry.js} +70 -67
  89. package/dist/genexus-ide-ui/p-e2b88bea.entry.js.map +1 -0
  90. package/dist/types/components/_helpers/multi-select/gx-ide-multi-select.d.ts +29 -0
  91. package/dist/types/components/file-uploader/file-item/file-item.d.ts +2 -0
  92. package/dist/types/components/launchpad/root/launchpad.d.ts +0 -4
  93. package/dist/types/components/search/search.d.ts +59 -0
  94. package/dist/types/components.d.ts +121 -4
  95. package/package.json +1 -1
  96. package/dist/genexus-ide-ui/p-60db2f02.entry.js.map +0 -1
  97. package/dist/genexus-ide-ui/p-6246204f.entry.js.map +0 -1
  98. package/dist/genexus-ide-ui/p-aad714a5.entry.js.map +0 -1
  99. package/dist/genexus-ide-ui/p-f3c3e830.entry.js +0 -163
  100. package/dist/genexus-ide-ui/p-f3c3e830.entry.js.map +0 -1
@@ -0,0 +1,212 @@
1
+ import { r as e, h as t, H as i, a as s } from "./p-9b9ccd0c.js";
2
+
3
+ import { g as r } from "./p-d42e842b.js";
4
+
5
+ import "./p-6534555e.js";
6
+
7
+ import "lit";
8
+
9
+ import "lit/directives/when.js";
10
+
11
+ import "lit/directives/if-defined.js";
12
+
13
+ import { c as a } from "./p-c5196b3b.js";
14
+
15
+ import { L as n } from "./p-311eedf3.js";
16
+
17
+ const o = ":host{display:grid;block-size:100%}.search{display:grid;grid-template-rows:max-content 1fr;gap:var(--spacing-gap-xl)}.search__header{display:grid;grid-template-columns:1fr}.search__results{position:relative}ch-tree-view-render::part(root-item item__header){padding-inline-start:0;font-weight:var(--font-style-semi-bold);font-size:var(--font-size-body-s);line-height:var(--line-height-relaxed);font-family:var(--font-family-body)}ch-tree-view-render::part(search-item item__header){padding-inline-start:0;font-weight:var(--font-style-regular);font-size:var(--font-size-body-s);line-height:var(--line-height-relaxed);font-family:var(--font-family-body);color:var(--color-text-neutral-neutral) !important}.input--loading::part(start-img){animation:spin 1s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}";
18
+
19
+ var h = undefined && undefined.__classPrivateFieldSet || function(e, t, i, s, r) {
20
+ if (s === "m") throw new TypeError("Private method is not writable");
21
+ if (s === "a" && !r) throw new TypeError("Private accessor was defined without a setter");
22
+ if (typeof t === "function" ? e !== t || !r : !t.has(e)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
23
+ return s === "a" ? r.call(e, i) : r ? r.value = i : t.set(e, i), i;
24
+ };
25
+
26
+ var l = undefined && undefined.__classPrivateFieldGet || function(e, t, i, s) {
27
+ if (i === "a" && !s) throw new TypeError("Private accessor was defined without a getter");
28
+ if (typeof t === "function" ? e !== t || !s : !t.has(e)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
29
+ return i === "m" ? s : i === "a" ? s.call(e) : s ? s.value : t.get(e);
30
+ };
31
+
32
+ var c, d, f, p, m, u, g;
33
+
34
+ const w = [ "resets/box-sizing", "components/edit", "components/tree-view", "utils/typography", "utils/spacing", "chameleon/scrollbar" ];
35
+
36
+ const y = r({
37
+ category: "system",
38
+ name: "search",
39
+ colorType: "on-surface"
40
+ });
41
+
42
+ const v = r({
43
+ category: "system",
44
+ name: "information",
45
+ colorType: "on-interactive"
46
+ });
47
+
48
+ const b = class {
49
+ constructor(i) {
50
+ e(this, i);
51
+ c.set(this, void 0);
52
+ d.set(this, "");
53
+ f.set(this, (async e => {
54
+ var t;
55
+ if (!this.isKbOpen) {
56
+ return;
57
+ }
58
+ const i = e.target;
59
+ const s = (t = i === null || i === void 0 ? void 0 : i.value) === null || t === void 0 ? void 0 : t.trim();
60
+ h(this, d, s, "f");
61
+ if (!s) {
62
+ this.searchResultModel = [];
63
+ this.hasSearched = false;
64
+ this.isSearching = false;
65
+ return;
66
+ }
67
+ this.hasSearched = true;
68
+ this.isSearching = true;
69
+ this.searchResultModel = [];
70
+ try {
71
+ const e = await this.searchCallback({
72
+ text: s,
73
+ onlyTitles: false,
74
+ includeSubModules: true,
75
+ allBranches: false,
76
+ forLLM: false
77
+ });
78
+ this.searchResultModel = l(this, m, "f").call(this, e);
79
+ } finally {
80
+ this.isSearching = false;
81
+ }
82
+ }));
83
+ p.set(this, (e => {
84
+ if (e.key === "Enter") {
85
+ l(this, f, "f").call(this, e);
86
+ }
87
+ }));
88
+ m.set(this, (e => {
89
+ if (!e || e.length === 0) {
90
+ return [];
91
+ }
92
+ return [ {
93
+ id: "root",
94
+ caption: `${l(this, c, "f").labels.results} (${e.length})`,
95
+ expanded: true,
96
+ parts: "root-item",
97
+ items: e.map((e => ({
98
+ id: e.objectId,
99
+ startImgSrc: e.objectIcon,
100
+ caption: e.objectName,
101
+ leaf: true,
102
+ parts: "search-item"
103
+ })))
104
+ } ];
105
+ }));
106
+ u.set(this, (async e => {
107
+ var t;
108
+ const i = e.detail.id;
109
+ await ((t = this.itemDoubleClickCallback) === null || t === void 0 ? void 0 : t.call(this, i));
110
+ }));
111
+ g.set(this, (() => {
112
+ if (!this.isKbOpen) {
113
+ return t("gx-ide-empty-state", {
114
+ stateTitle: l(this, c, "f").noKbOpenState.title,
115
+ stateDescription: l(this, c, "f").noKbOpenState.description,
116
+ stateIconSrc: v,
117
+ isAnimated: true
118
+ });
119
+ }
120
+ if (this.isSearching) {
121
+ return t("gx-ide-loader", {
122
+ loaderTitle: l(this, c, "f").loader.title,
123
+ show: true
124
+ });
125
+ }
126
+ if (this.searchResultModel.length > 0) {
127
+ return t("ch-tree-view-render", {
128
+ class: "tree-view",
129
+ model: this.searchResultModel,
130
+ expandableButton: "no",
131
+ expandOnClick: false,
132
+ onItemOpenReference: l(this, u, "f")
133
+ });
134
+ }
135
+ if (this.hasSearched) {
136
+ return t("gx-ide-empty-state", {
137
+ stateTitle: l(this, c, "f").emptyState.title,
138
+ stateDescription: l(this, c, "f").emptyState.description,
139
+ stateIconSrc: v,
140
+ isAnimated: true
141
+ });
142
+ }
143
+ return null;
144
+ }));
145
+ this.searchResultModel = [];
146
+ this.hasSearched = false;
147
+ this.isSearching = false;
148
+ this.isKbOpen = false;
149
+ this.searchCallback = undefined;
150
+ this.itemDoubleClickCallback = undefined;
151
+ }
152
+ valueChangeHandler(e) {
153
+ if (!e) {
154
+ h(this, d, "", "f");
155
+ this.searchResultModel = [];
156
+ this.hasSearched = false;
157
+ this.isSearching = false;
158
+ }
159
+ }
160
+ /**
161
+ * Method to show or hide the settings panel, can be called from the outside to control the visibility of the settings
162
+ */ async showSettings(e) {
163
+ return Promise.resolve();
164
+ }
165
+ async componentWillLoad() {
166
+ h(this, c, await n.getComponentStrings(this.el), "f");
167
+ }
168
+ render() {
169
+ return t(i, {
170
+ class: "widget"
171
+ }, t("ch-theme", {
172
+ model: w
173
+ }), t("section", {
174
+ class: "spacing-body search"
175
+ }, t("header", {
176
+ class: "search__header"
177
+ }, t("ch-edit", {
178
+ id: "search-input",
179
+ class: "input",
180
+ accessibleName: l(this, c, "f").accessibleName,
181
+ placeholder: l(this, c, "f").placeholders.search,
182
+ debounce: a.inputDebounce,
183
+ onInput: l(this, f, "f"),
184
+ onKeyDown: l(this, p, "f"),
185
+ type: "search",
186
+ startImgSrc: y,
187
+ disabled: !this.isKbOpen,
188
+ value: l(this, d, "f")
189
+ })), t("main", {
190
+ class: "search__results"
191
+ }, l(this, g, "f").call(this))));
192
+ }
193
+ static get assetsDirs() {
194
+ return [ "gx-ide-assets/search" ];
195
+ }
196
+ get el() {
197
+ return s(this);
198
+ }
199
+ static get watchers() {
200
+ return {
201
+ isKbOpen: [ "valueChangeHandler" ]
202
+ };
203
+ }
204
+ };
205
+
206
+ c = new WeakMap, d = new WeakMap, f = new WeakMap, p = new WeakMap, m = new WeakMap,
207
+ u = new WeakMap, g = new WeakMap;
208
+
209
+ b.style = o;
210
+
211
+ export { b as gx_ide_search };
212
+ //# sourceMappingURL=p-8b5c826b.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["searchCss","CSS_BUNDLES","SEARCH_ICON","getIconPath","category","name","colorType","INFORMATION_ICON","GxIdeSearch","_GxIdeSearch_componentLocale","set","this","_GxIdeSearch_searchInputValue","_GxIdeSearch_searchInputHandler","async","event","isKbOpen","inputElement","target","searchText","_a","value","trim","__classPrivateFieldSet","searchResultModel","hasSearched","isSearching","searchResultData","searchCallback","text","onlyTitles","includeSubModules","allBranches","forLLM","__classPrivateFieldGet","_GxIdeSearch_mapSearchResultToTreeViewModel","call","_GxIdeSearch_searchInputKeyDownHandler","key","length","id","caption","labels","results","expanded","parts","items","map","item","objectId","startImgSrc","objectIcon","objectName","leaf","_GxIdeSearch_treeItemDoubleClickHandler","itemId","detail","itemDoubleClickCallback","_GxIdeSearch_renderSearchResults","h","stateTitle","noKbOpenState","title","stateDescription","description","stateIconSrc","isAnimated","loaderTitle","loader","show","class","model","expandableButton","expandOnClick","onItemOpenReference","emptyState","valueChangeHandler","newValue","showSettings","_show","Promise","resolve","componentWillLoad","Locale","getComponentStrings","el","render","Host","accessibleName","placeholder","placeholders","search","debounce","config","inputDebounce","onInput","onKeyDown","type","disabled"],"sources":["src/components/search/search.scss?tag=gx-ide-search&encapsulation=shadow","src/components/search/search.tsx"],"sourcesContent":[":host {\n display: grid;\n block-size: 100%;\n}\n\n.search {\n display: grid;\n grid-template-rows: max-content 1fr;\n gap: var(--spacing-gap-xl);\n\n &__header {\n display: grid;\n grid-template-columns: 1fr;\n }\n\n &__results {\n position: relative;\n }\n}\nch-tree-view-render::part(root-item item__header) {\n padding-inline-start: 0;\n font-weight: var(--font-style-semi-bold);\n font-size: var(--font-size-body-s);\n line-height: var(--line-height-relaxed);\n font-family: var(--font-family-body);\n}\nch-tree-view-render::part(search-item item__header) {\n padding-inline-start: 0;\n font-weight: var(--font-style-regular);\n font-size: var(--font-size-body-s);\n line-height: var(--line-height-relaxed);\n font-family: var(--font-family-body);\n color: var(--color-text-neutral-neutral) !important;\n}\n.input--loading::part(start-img) {\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n 100% {\n transform: rotate(360deg);\n }\n}\n","import {\n Component,\n Element,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch\n} from \"@stencil/core\";\n\nimport {\n ChTreeViewRenderCustomEvent,\n TreeViewItemModel,\n TreeViewItemOpenReferenceInfo,\n TreeViewModel\n} from \"@genexus/chameleon-controls-library\";\nimport { getIconPath, MercuryBundles } from \"@genexus/mercury\";\nimport { config } from \"../../common/config\";\nimport { Locale } from \"../../common/locale\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"components/edit\",\n \"components/tree-view\",\n \"utils/typography\",\n \"utils/spacing\",\n \"chameleon/scrollbar\"\n];\nconst SEARCH_ICON = getIconPath({\n category: \"system\",\n name: \"search\",\n colorType: \"on-surface\"\n});\n\nconst INFORMATION_ICON = getIconPath({\n category: \"system\",\n name: \"information\",\n colorType: \"on-interactive\"\n});\n\n@Component({\n tag: \"gx-ide-search\",\n styleUrl: \"search.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/search\"]\n})\nexport class GxIdeSearch {\n #componentLocale: any;\n #searchInputValue: string = \"\";\n\n @Element() el: HTMLGxIdeSearchElement;\n\n /**\n * Holds the search results as a TreeViewModel\n */\n @State() searchResultModel: TreeViewModel = [];\n\n /**\n * Tracks if a search has been performed\n */\n @State() hasSearched = false;\n\n /**\n * Tracks if a search is currently in progress\n */\n @State() isSearching = false;\n\n /**\n * Indicates whether a Knowledge Base is currently open\n */\n @Prop() readonly isKbOpen: boolean = false;\n @Watch(\"isKbOpen\")\n valueChangeHandler(newValue: boolean) {\n if (!newValue) {\n this.#searchInputValue = \"\";\n this.searchResultModel = [];\n this.hasSearched = false;\n this.isSearching = false;\n }\n }\n\n /**\n * Callback to fetch search results\n */\n @Prop() readonly searchCallback!: (\n searchParams: SearchParamsData\n ) => Promise<SearchResultData[]>;\n\n /**\n * Callback invoked when a search result item is double-clicked\n */\n @Prop() readonly itemDoubleClickCallback?: ItemDoubleClickCallback;\n\n /**\n * Method to show or hide the settings panel, can be called from the outside to control the visibility of the settings\n */\n @Method()\n async showSettings(_show: boolean): Promise<void> {\n return Promise.resolve();\n }\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n }\n\n #searchInputHandler = async (event: CustomEvent<string> | InputEvent) => {\n if (!this.isKbOpen) {\n return;\n }\n\n const inputElement = event.target as HTMLChEditElement;\n const searchText = inputElement?.value?.trim();\n this.#searchInputValue = searchText;\n\n if (!searchText) {\n this.searchResultModel = [];\n this.hasSearched = false;\n this.isSearching = false;\n return;\n }\n\n this.hasSearched = true;\n this.isSearching = true;\n this.searchResultModel = [];\n\n try {\n const searchResultData = await this.searchCallback({\n text: searchText,\n onlyTitles: false,\n includeSubModules: true,\n allBranches: false,\n forLLM: false\n });\n\n this.searchResultModel =\n this.#mapSearchResultToTreeViewModel(searchResultData);\n } finally {\n this.isSearching = false;\n }\n };\n\n #searchInputKeyDownHandler = (event: KeyboardEvent) => {\n if (event.key === \"Enter\") {\n this.#searchInputHandler(event as any);\n }\n };\n\n #mapSearchResultToTreeViewModel = (\n searchResultData: SearchResultData[]\n ): TreeViewModel => {\n if (!searchResultData || searchResultData.length === 0) {\n return [];\n }\n return [\n {\n id: \"root\",\n caption: `${this.#componentLocale.labels.results} (${searchResultData.length})`,\n expanded: true,\n parts: \"root-item\",\n items: searchResultData.map(\n (item): TreeViewItemModel => ({\n id: item.objectId,\n startImgSrc: item.objectIcon,\n caption: item.objectName,\n leaf: true,\n parts: \"search-item\"\n })\n )\n }\n ];\n };\n\n #treeItemDoubleClickHandler = async (\n event: ChTreeViewRenderCustomEvent<TreeViewItemOpenReferenceInfo>\n ) => {\n const itemId = event.detail.id;\n await this.itemDoubleClickCallback?.(itemId);\n };\n\n #renderSearchResults = () => {\n if (!this.isKbOpen) {\n return (\n <gx-ide-empty-state\n stateTitle={this.#componentLocale.noKbOpenState.title}\n stateDescription={this.#componentLocale.noKbOpenState.description}\n stateIconSrc={INFORMATION_ICON}\n isAnimated={true}\n ></gx-ide-empty-state>\n );\n }\n\n if (this.isSearching) {\n return (\n <gx-ide-loader\n loaderTitle={this.#componentLocale.loader.title}\n show={true}\n ></gx-ide-loader>\n );\n }\n\n if (this.searchResultModel.length > 0) {\n return (\n <ch-tree-view-render\n class=\"tree-view\"\n model={this.searchResultModel}\n expandableButton=\"no\"\n expandOnClick={false}\n onItemOpenReference={this.#treeItemDoubleClickHandler}\n />\n );\n }\n\n if (this.hasSearched) {\n return (\n <gx-ide-empty-state\n stateTitle={this.#componentLocale.emptyState.title}\n stateDescription={this.#componentLocale.emptyState.description}\n stateIconSrc={INFORMATION_ICON}\n isAnimated={true}\n ></gx-ide-empty-state>\n );\n }\n\n return null;\n };\n\n render() {\n return (\n <Host class=\"widget\">\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <section class={\"spacing-body search\"}>\n <header class=\"search__header\">\n <ch-edit\n id=\"search-input\"\n class=\"input\"\n accessibleName={this.#componentLocale.accessibleName}\n placeholder={this.#componentLocale.placeholders.search}\n debounce={config.inputDebounce}\n onInput={this.#searchInputHandler}\n onKeyDown={this.#searchInputKeyDownHandler}\n type=\"search\"\n startImgSrc={SEARCH_ICON}\n disabled={!this.isKbOpen}\n value={this.#searchInputValue}\n ></ch-edit>\n </header>\n\n <main class=\"search__results\">{this.#renderSearchResults()}</main>\n </section>\n </Host>\n );\n }\n}\n\nexport type SearchResultData = {\n objectId: string;\n objectName: string;\n objectTypeName: string;\n objectModuleName: string;\n objectUri: string;\n objectIcon: string;\n content: string;\n preview: string;\n};\n\nexport type SearchParamsData = {\n moduleGuid?: string;\n objectTypeName?: string;\n text: string;\n tags?: string;\n count?: number;\n onlyTitles: boolean;\n includeSubModules: boolean;\n allBranches: boolean;\n forLLM: boolean;\n};\n\nexport type ItemDoubleClickCallback = (itemId: string) => Promise<void>;\n\nexport type SearchCallback = (\n searchParams: SearchParamsData\n) => Promise<SearchResultData[]>;\n"],"mappings":"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"}
@@ -0,0 +1,187 @@
1
+ import { r as i, c as e, h as t } from "./p-9b9ccd0c.js";
2
+
3
+ import { g as s } from "./p-d42e842b.js";
4
+
5
+ import "./p-6534555e.js";
6
+
7
+ import "lit";
8
+
9
+ import "lit/directives/when.js";
10
+
11
+ import "lit/directives/if-defined.js";
12
+
13
+ const a = ':host{display:block}.file-item{display:grid;column-gap:var(--spacing-gap-l);row-gap:var(--spacing-gap-s);align-items:center;border-radius:var(--border-radius-s)}.file-item--without-actions{grid-template-columns:max-content 1fr;grid-template-areas:"icon name"}.file-item--with-actions{grid-template-columns:max-content 1fr max-content;grid-template-areas:"icon name actions"}.file-item__icon{display:flex;align-items:center;grid-area:icon;padding-block:calc(32px - var(--ch-image-size))}.file-item__name{grid-area:name;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-inline-size:0}.file-item__name ch-edit{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-item__name .label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-item__actions{grid-area:actions;display:flex}.file-item__cancel-upload{transform:translateX(7px)}.file-item__progress-container{grid-column:1/-1;display:flex;flex-direction:column;gap:var(--spacing-gap-xs);border:2px dashed var(--color-border-neutral-default);border-radius:var(--border-radius-m);padding:var(--spacing-padding-xxs) var(--spacing-padding-l) var(--spacing-padding-m) var(--spacing-padding-l)}.file-item__progress-header{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-gap-l)}.file-item__uploading-text{color:var(--color-text-neutral-disabled);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-inline-size:calc(100% - 40px)}.file-item__progress-bar progress{block-size:8px;line-height:0;border:none;border-radius:var(--border-radius-s);overflow:hidden}.file-item__progress-bar progress::-webkit-progress-bar{background-color:transparent}.file-item__progress-bar progress::-webkit-progress-value{background-color:var(--color-accent-primary-default)}.file-item__progress-bar progress::-moz-progress-bar{background-color:var(--color-accent-primary-default)}';
14
+
15
+ var o = undefined && undefined.__classPrivateFieldGet || function(i, e, t, s) {
16
+ if (t === "a" && !s) throw new TypeError("Private accessor was defined without a getter");
17
+ if (typeof e === "function" ? i !== e || !s : !e.has(i)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
18
+ return t === "m" ? s : t === "a" ? s.call(i) : s ? s.value : e.get(i);
19
+ };
20
+
21
+ var l, r, n, c, d;
22
+
23
+ const p = s({
24
+ category: "gemini-tools",
25
+ name: "file",
26
+ colorType: "primary"
27
+ });
28
+
29
+ const m = s({
30
+ category: "gemini-tools",
31
+ name: "edit",
32
+ colorType: "primary"
33
+ });
34
+
35
+ const h = s({
36
+ category: "gemini-tools",
37
+ name: "delete",
38
+ colorType: "primary"
39
+ });
40
+
41
+ const f = s({
42
+ category: "gemini-tools",
43
+ name: "close",
44
+ colorType: "primary"
45
+ });
46
+
47
+ const u = [ "resets/box-sizing", "components/button", "components/icon", "components/edit", "utils/typography", "utils/spacing", "utils/form", "utils/layout", "utils/elevation" ];
48
+
49
+ const g = class {
50
+ constructor(t) {
51
+ i(this, t);
52
+ this.fileNameChange = e(this, "fileNameChange", 7);
53
+ this.fileDelete = e(this, "fileDelete", 7);
54
+ this.fileCancel = e(this, "fileCancel", 7);
55
+ l.set(this, (i => {
56
+ const e = i.detail;
57
+ if (e && e !== this.currentName) {
58
+ this.currentName = e;
59
+ this.fileNameChange.emit({
60
+ id: this.file.id,
61
+ name: e
62
+ });
63
+ }
64
+ }));
65
+ r.set(this, (() => {
66
+ this.isEditing = false;
67
+ }));
68
+ /** Handles file deletion */ n.set(this, (() => {
69
+ this.fileDelete.emit(this.file.id);
70
+ }));
71
+ /** Handles upload cancellation */ c.set(this, (i => {
72
+ i.preventDefault();
73
+ this.fileCancel.emit(this.file.id);
74
+ }));
75
+ /** Starts file name editing */ d.set(this, (() => {
76
+ if (this.editable) {
77
+ this.isEditing = true;
78
+ }
79
+ }));
80
+ this.file = undefined;
81
+ this.editable = false;
82
+ this.componentLocale = undefined;
83
+ this.fileDeletedCallback = undefined;
84
+ this.fileDeletionErrorCallback = undefined;
85
+ this.isEditing = false;
86
+ this.currentName = undefined;
87
+ }
88
+ /** Updates current name when file prop changes */ handleFileChange(i) {
89
+ this.currentName = i.name;
90
+ }
91
+ componentWillLoad() {
92
+ this.currentName = this.file.name;
93
+ }
94
+ render() {
95
+ var i, e, s, a, g, v, b, _, y, w, x, k, C;
96
+ const j = !this.file.pending;
97
+ const z = this.file.pending;
98
+ const N = "progress-label-" + this.file.id;
99
+ let T;
100
+ if (this.file.pending) {
101
+ T = ((a = (s = (e = (i = this.componentLocale) === null || i === void 0 ? void 0 : i.fileItem) === null || e === void 0 ? void 0 : e.uploadingAriaLabel) === null || s === void 0 ? void 0 : s.replace("{fileName}", this.currentName)) === null || a === void 0 ? void 0 : a.replace("{fileProgress}", this.file.progress.toString())) || this.currentName;
102
+ } else if (this.file.remoteId) {
103
+ T = ((b = (v = (g = this.componentLocale) === null || g === void 0 ? void 0 : g.fileItem) === null || v === void 0 ? void 0 : v.uploadedSuccessfullyAriaLabel) === null || b === void 0 ? void 0 : b.replace("{fileName}", this.currentName)) || this.currentName;
104
+ } else {
105
+ T = this.currentName;
106
+ }
107
+ return t("li", {
108
+ class: {
109
+ "file-item": true,
110
+ "file-item--without-actions": !j,
111
+ "file-item--with-actions": j
112
+ },
113
+ "aria-label": T
114
+ }, t("ch-theme", {
115
+ model: u
116
+ }), t("div", {
117
+ class: "file-item__icon"
118
+ }, t("ch-image", {
119
+ disabled: !this.file.pending,
120
+ src: p,
121
+ class: "icon-m"
122
+ })), t("div", {
123
+ class: "file-item__name"
124
+ }, this.isEditing ? t("ch-edit", {
125
+ accessibleName: (w = (y = (_ = this.componentLocale) === null || _ === void 0 ? void 0 : _.fileItem) === null || y === void 0 ? void 0 : y.editNamePlaceholderAriaLabel) === null || w === void 0 ? void 0 : w.replace("{fileName}", this.currentName),
126
+ value: this.currentName,
127
+ autoFocus: true,
128
+ onInput: o(this, l, "f"),
129
+ onBlur: o(this, r, "f"),
130
+ class: "input",
131
+ id: N
132
+ }) : t("span", {
133
+ class: "label",
134
+ id: N
135
+ }, this.currentName)), j ? t("div", {
136
+ class: "file-item__actions"
137
+ }, !this.file.pending && this.editable && t("button", {
138
+ class: "button-tertiary button-icon-only",
139
+ type: "button",
140
+ onClick: o(this, d, "f")
141
+ }, t("ch-image", {
142
+ src: m,
143
+ class: "icon-m"
144
+ })), !this.file.pending && t("button", {
145
+ class: "button-tertiary button-icon-only",
146
+ type: "button",
147
+ onClick: o(this, n, "f"),
148
+ "aria-label": "Delete file"
149
+ }, t("ch-image", {
150
+ src: h,
151
+ class: "icon-m"
152
+ }))) : null, z && t("div", {
153
+ class: "file-item__progress-container"
154
+ }, t("div", {
155
+ class: "file-item__progress-header"
156
+ }, t("span", {
157
+ class: "file-item__uploading-text typography-body-italic-s"
158
+ }, "Uploading ", this.currentName, "..."), t("button", {
159
+ "aria-label": ((C = (k = (x = this.componentLocale) === null || x === void 0 ? void 0 : x.fileItem) === null || k === void 0 ? void 0 : k.cancelUploadButtonAriaLabel) === null || C === void 0 ? void 0 : C.replace("{fileName}", this.currentName)) || "Cancel upload",
160
+ class: "button-tertiary button-icon-only file-item__cancel-upload",
161
+ type: "button",
162
+ onClick: o(this, c, "f")
163
+ }, t("ch-image", {
164
+ src: f,
165
+ class: "icon-m"
166
+ }))), t("div", {
167
+ class: "file-item__progress-bar"
168
+ }, t("progress", {
169
+ class: "elevation-1",
170
+ value: this.file.progress,
171
+ max: "100",
172
+ "aria-labelledby": N
173
+ }))));
174
+ }
175
+ static get watchers() {
176
+ return {
177
+ file: [ "handleFileChange" ]
178
+ };
179
+ }
180
+ };
181
+
182
+ l = new WeakMap, r = new WeakMap, n = new WeakMap, c = new WeakMap, d = new WeakMap;
183
+
184
+ g.style = a;
185
+
186
+ export { g as gx_ide_file_item };
187
+ //# sourceMappingURL=p-c460c9e7.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["fileItemCss","FILE_ICON","getIconPath","category","name","colorType","EDIT_ICON","DELETE_ICON","CANCEL_ICON","CSS_BUNDLES","FileItem","_FileItem_handleNameChange","set","this","event","newName","detail","currentName","fileNameChange","emit","id","file","_FileItem_handleBlur","isEditing","_FileItem_handleDelete","fileDelete","_FileItem_handleCancelClick","e","preventDefault","fileCancel","_FileItem_startEditing","editable","handleFileChange","newFile","componentWillLoad","render","displayItemActions","pending","displayProgressContainer","labelId","liAriaLabel","_d","_c","_b","_a","componentLocale","fileItem","uploadingAriaLabel","replace","progress","toString","remoteId","_g","_f","_e","uploadedSuccessfullyAriaLabel","h","class","model","disabled","src","accessibleName","_k","_j","_h","editNamePlaceholderAriaLabel","value","autoFocus","onInput","__classPrivateFieldGet","onBlur","type","onClick","_o","_m","_l","cancelUploadButtonAriaLabel","max"],"sources":["src/components/file-uploader/file-item/file-item.scss?tag=gx-ide-file-item&encapsulation=shadow","src/components/file-uploader/file-item/file-item.tsx"],"sourcesContent":["@import \"../../../global/gx-ide-mixins.scss\";\n\n$file-item-actions-inline-size: 40px;\n\n:host {\n display: block;\n}\n\n.file-item {\n display: grid;\n column-gap: var(--spacing-gap-l);\n row-gap: var(--spacing-gap-s);\n align-items: center;\n border-radius: var(--border-radius-s);\n \n &--without-actions {\n grid-template-columns: max-content 1fr;\n grid-template-areas: \"icon name\";\n }\n &--with-actions {\n grid-template-columns: max-content 1fr max-content;\n grid-template-areas: \"icon name actions\";\n }\n\n &__icon {\n display: flex;\n align-items: center;\n grid-area: icon;\n padding-block: calc(32px - var(--ch-image-size)); // prevent layout shift when file-item__actions are displayed\n }\n\n &__name {\n grid-area: name;\n @include ellipsis;\n min-inline-size: 0;\n\n ch-edit {\n @include ellipsis;\n }\n\n .label {\n @include ellipsis;\n }\n }\n\n &__actions {\n grid-area: actions;\n display: flex;\n }\n\n &__cancel-upload {\n transform: translateX(7px);\n }\n\n &__progress-container {\n grid-column: 1 / -1;\n display: flex;\n flex-direction: column;\n gap: var(--spacing-gap-xs);\n border: 2px dashed var(--color-border-neutral-default);\n border-radius: var(--border-radius-m);\n padding: var(--spacing-padding-xxs) var(--spacing-padding-l) var(--spacing-padding-m) var(--spacing-padding-l);\n }\n\n &__progress-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--spacing-gap-l);\n }\n\n &__uploading-text {\n color: var(--color-text-neutral-disabled);\n @include ellipsis;\n max-inline-size: calc(100% - #{$file-item-actions-inline-size});\n }\n\n &__progress-bar {\n progress {\n block-size: 8px;\n line-height: 0;\n border: none;\n border-radius: var(--border-radius-s);\n overflow: hidden;\n\n &::-webkit-progress-bar {\n background-color: transparent;\n }\n\n &::-webkit-progress-value {\n background-color: var(--color-accent-primary-default);\n }\n\n &::-moz-progress-bar {\n background-color: var(--color-accent-primary-default);\n }\n }\n }\n}\n","import {\n Component,\n h,\n Prop,\n State,\n Event,\n EventEmitter,\n Watch\n} from \"@stencil/core\";\nimport { getIconPath, MercuryBundles } from \"@genexus/mercury\";\nimport { ChEditCustomEvent } from \"@genexus/chameleon-controls-library\";\nimport { FileUploadState } from \"../types\";\n\nconst FILE_ICON = getIconPath({\n category: \"gemini-tools\",\n name: \"file\",\n colorType: \"primary\"\n});\n\nconst EDIT_ICON = getIconPath({\n category: \"gemini-tools\",\n name: \"edit\",\n colorType: \"primary\"\n});\n\nconst DELETE_ICON = getIconPath({\n category: \"gemini-tools\",\n name: \"delete\",\n colorType: \"primary\"\n});\n\nconst CANCEL_ICON = getIconPath({\n category: \"gemini-tools\",\n name: \"close\",\n colorType: \"primary\"\n});\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"components/button\",\n \"components/icon\",\n \"components/edit\",\n \"utils/typography\",\n \"utils/spacing\",\n \"utils/form\",\n \"utils/layout\",\n \"utils/elevation\"\n];\n\n@Component({\n tag: \"gx-ide-file-item\",\n styleUrl: \"file-item.scss\",\n shadow: true\n})\nexport class FileItem {\n /** File state containing upload information */\n @Prop() readonly file!: FileUploadState;\n\n /** Whether the file name can be edited */\n @Prop() readonly editable: boolean = false;\n\n /** Component locale strings */\n @Prop() readonly componentLocale?: any;\n\n /** Callback when a file is deleted */\n @Prop() readonly fileDeletedCallback?: (fileId: string) => Promise<void>;\n\n /** Callback when a file deletion error occurs */\n @Prop() readonly fileDeletionErrorCallback?: (data: {\n fileName: string;\n error: string;\n }) => Promise<void>;\n\n /** Updates current name when file prop changes */\n @Watch(\"file\")\n handleFileChange(newFile: FileUploadState) {\n this.currentName = newFile.name;\n }\n\n @State() isEditing: boolean = false;\n @State() currentName: string;\n\n /** Emitted when the file name is changed */\n @Event() fileNameChange: EventEmitter<{ id: string; name: string }>;\n\n /** Emitted when the file is deleted */\n @Event() fileDelete: EventEmitter<string>;\n\n /** Emitted when the file upload is cancelled */\n @Event() fileCancel: EventEmitter<string>;\n\n componentWillLoad() {\n this.currentName = this.file.name;\n }\n\n #handleNameChange = (event: ChEditCustomEvent<string> | InputEvent) => {\n const newName = (event as CustomEvent<string>).detail;\n\n if (newName && newName !== this.currentName) {\n this.currentName = newName;\n this.fileNameChange.emit({\n id: this.file.id,\n name: newName\n });\n }\n };\n\n #handleBlur = () => {\n this.isEditing = false;\n };\n\n /** Handles file deletion */\n #handleDelete = () => {\n this.fileDelete.emit(this.file.id);\n };\n\n /** Handles upload cancellation */\n #handleCancelClick = (e: MouseEvent) => {\n e.preventDefault();\n this.fileCancel.emit(this.file.id);\n };\n\n /** Starts file name editing */\n #startEditing = () => {\n if (this.editable) {\n this.isEditing = true;\n }\n };\n\n render() {\n\n const displayItemActions = !this.file.pending;\n const displayProgressContainer = this.file.pending;\n const labelId = \"progress-label-\" + this.file.id;\n\n let liAriaLabel: string;\n if (this.file.pending) {\n liAriaLabel = this.componentLocale?.fileItem?.uploadingAriaLabel\n ?.replace(\"{fileName}\", this.currentName)\n ?.replace(\"{fileProgress}\", this.file.progress.toString()) || this.currentName;\n } else if (this.file.remoteId) {\n liAriaLabel = this.componentLocale?.fileItem?.uploadedSuccessfullyAriaLabel\n ?.replace(\"{fileName}\", this.currentName) || this.currentName;\n } else {\n liAriaLabel = this.currentName;\n }\n\n return (\n <li class={{\n \"file-item\": true,\n \"file-item--without-actions\": !displayItemActions,\n \"file-item--with-actions\": displayItemActions\n }}\n aria-label={liAriaLabel}\n >\n\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n\n <div class=\"file-item__icon\">\n <ch-image disabled={!this.file.pending} src={FILE_ICON} class=\"icon-m\" />\n </div>\n\n <div class=\"file-item__name\">\n {this.isEditing ? (\n <ch-edit\n accessibleName={this.componentLocale?.fileItem?.editNamePlaceholderAriaLabel\n ?.replace(\"{fileName}\", this.currentName)}\n value={this.currentName}\n autoFocus={true}\n onInput={this.#handleNameChange}\n onBlur={this.#handleBlur}\n class=\"input\"\n id={labelId}\n />\n ) : (\n <span class=\"label\" id={labelId}>{this.currentName}</span>\n )}\n </div>\n\n {displayItemActions ? (\n <div class=\"file-item__actions\">\n {!this.file.pending && this.editable && (\n <button\n class=\"button-tertiary button-icon-only\"\n type=\"button\"\n onClick={this.#startEditing}\n >\n <ch-image src={EDIT_ICON} class=\"icon-m\" />\n </button>\n )}\n {!this.file.pending && (\n <button\n class=\"button-tertiary button-icon-only\"\n type=\"button\"\n onClick={this.#handleDelete}\n aria-label=\"Delete file\"\n >\n <ch-image src={DELETE_ICON} class=\"icon-m\" />\n </button>\n )}\n </div>\n ) : (\n null\n )}\n\n {displayProgressContainer && (\n <div class=\"file-item__progress-container\">\n <div class=\"file-item__progress-header\">\n <span class=\"file-item__uploading-text typography-body-italic-s\">\n Uploading {this.currentName}...\n </span>\n <button\n aria-label={this.componentLocale?.fileItem?.cancelUploadButtonAriaLabel\n ?.replace(\"{fileName}\", this.currentName) || \"Cancel upload\"}\n class=\"button-tertiary button-icon-only file-item__cancel-upload\"\n type=\"button\"\n onClick={this.#handleCancelClick}\n >\n <ch-image src={CANCEL_ICON} class=\"icon-m\" />\n </button>\n </div>\n <div class=\"file-item__progress-bar\">\n <progress\n class=\"elevation-1\"\n value={this.file.progress}\n max=\"100\"\n aria-labelledby={labelId}\n />\n </div>\n </div>\n )}\n </li>\n );\n }\n}\n"],"mappings":"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"}