@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.
- package/dist/cjs/genexus-ide-ui.cjs.js +1 -1
- package/dist/cjs/gx-ide-file-item.cjs.entry.js +21 -2
- package/dist/cjs/gx-ide-file-item.cjs.entry.js.map +1 -1
- package/dist/cjs/gx-ide-file-uploader.cjs.entry.js +11 -8
- package/dist/cjs/gx-ide-file-uploader.cjs.entry.js.map +1 -1
- package/dist/cjs/gx-ide-launchpad.cjs.entry.js +4 -16
- package/dist/cjs/gx-ide-launchpad.cjs.entry.js.map +1 -1
- package/dist/cjs/gx-ide-multi-select.cjs.entry.js +113 -0
- package/dist/cjs/gx-ide-multi-select.cjs.entry.js.map +1 -0
- package/dist/cjs/gx-ide-search.cjs.entry.js +171 -0
- package/dist/cjs/gx-ide-search.cjs.entry.js.map +1 -0
- package/dist/cjs/gx-ide-ww-files.cjs.entry.js +4 -9
- package/dist/cjs/gx-ide-ww-files.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/_helpers/multi-select/gx-ide-multi-select.css +193 -0
- package/dist/collection/components/_helpers/multi-select/gx-ide-multi-select.js +209 -0
- package/dist/collection/components/_helpers/multi-select/gx-ide-multi-select.js.map +1 -0
- package/dist/collection/components/file-uploader/file-item/file-item.css +23 -28
- package/dist/collection/components/file-uploader/file-item/file-item.js +37 -1
- package/dist/collection/components/file-uploader/file-item/file-item.js.map +1 -1
- package/dist/collection/components/file-uploader/file-uploader.css +11 -22
- package/dist/collection/components/file-uploader/file-uploader.js +10 -7
- package/dist/collection/components/file-uploader/file-uploader.js.map +1 -1
- package/dist/collection/components/file-uploader/gx-ide-assets/file-uploader/langs/file-uploader.lang.en.json +7 -3
- package/dist/collection/components/file-uploader/gx-ide-assets/file-uploader/langs/file-uploader.lang.ja.json +7 -3
- package/dist/collection/components/file-uploader/gx-ide-assets/file-uploader/langs/file-uploader.lang.zh.json +8 -3
- package/dist/collection/components/launchpad/root/gx-ide-assets/launchpad/shortcuts.json +1 -26
- package/dist/collection/components/launchpad/root/launchpad.js +5 -42
- package/dist/collection/components/launchpad/root/launchpad.js.map +1 -1
- package/dist/collection/components/search/gx-ide-assets/search/langs/search.lang.en.json +37 -0
- package/dist/collection/components/search/gx-ide-assets/search/langs/search.lang.ja.json +37 -0
- package/dist/collection/components/search/gx-ide-assets/search/langs/search.lang.zh.json +37 -0
- package/dist/collection/components/search/search.css +44 -0
- package/dist/collection/components/search/search.js +275 -0
- package/dist/collection/components/search/search.js.map +1 -0
- package/dist/collection/components/ww-files/ww-files.js +4 -9
- package/dist/collection/components/ww-files/ww-files.js.map +1 -1
- package/dist/collection/testing/locale.e2e.js +4 -1
- package/dist/collection/testing/locale.e2e.js.map +1 -1
- package/dist/components/file-item.js +22 -2
- package/dist/components/file-item.js.map +1 -1
- package/dist/components/gx-ide-file-uploader.js +11 -8
- package/dist/components/gx-ide-file-uploader.js.map +1 -1
- package/dist/components/gx-ide-launchpad.js +6 -19
- package/dist/components/gx-ide-launchpad.js.map +1 -1
- package/dist/components/gx-ide-multi-select.d.ts +11 -0
- package/dist/components/gx-ide-multi-select.js +132 -0
- package/dist/components/gx-ide-multi-select.js.map +1 -0
- package/dist/components/gx-ide-search.d.ts +11 -0
- package/dist/components/gx-ide-search.js +206 -0
- package/dist/components/gx-ide-search.js.map +1 -0
- package/dist/components/gx-ide-ww-files.js +4 -9
- package/dist/components/gx-ide-ww-files.js.map +1 -1
- package/dist/esm/genexus-ide-ui.js +1 -1
- package/dist/esm/gx-ide-file-item.entry.js +21 -2
- package/dist/esm/gx-ide-file-item.entry.js.map +1 -1
- package/dist/esm/gx-ide-file-uploader.entry.js +11 -8
- package/dist/esm/gx-ide-file-uploader.entry.js.map +1 -1
- package/dist/esm/gx-ide-launchpad.entry.js +5 -17
- package/dist/esm/gx-ide-launchpad.entry.js.map +1 -1
- package/dist/esm/gx-ide-multi-select.entry.js +109 -0
- package/dist/esm/gx-ide-multi-select.entry.js.map +1 -0
- package/dist/esm/gx-ide-search.entry.js +167 -0
- package/dist/esm/gx-ide-search.entry.js.map +1 -0
- package/dist/esm/gx-ide-ww-files.entry.js +4 -9
- package/dist/esm/gx-ide-ww-files.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/genexus-ide-ui/genexus-ide-ui.esm.js +1 -1
- package/dist/genexus-ide-ui/genexus-ide-ui.esm.js.map +1 -1
- package/dist/genexus-ide-ui/gx-ide-assets/file-uploader/langs/file-uploader.lang.en.json +7 -3
- package/dist/genexus-ide-ui/gx-ide-assets/file-uploader/langs/file-uploader.lang.ja.json +7 -3
- package/dist/genexus-ide-ui/gx-ide-assets/file-uploader/langs/file-uploader.lang.zh.json +8 -3
- package/dist/genexus-ide-ui/gx-ide-assets/launchpad/shortcuts.json +1 -26
- package/dist/genexus-ide-ui/gx-ide-assets/search/langs/search.lang.en.json +37 -0
- package/dist/genexus-ide-ui/gx-ide-assets/search/langs/search.lang.ja.json +37 -0
- package/dist/genexus-ide-ui/gx-ide-assets/search/langs/search.lang.zh.json +37 -0
- package/dist/genexus-ide-ui/p-0745a565.entry.js +152 -0
- package/dist/genexus-ide-ui/p-0745a565.entry.js.map +1 -0
- package/dist/genexus-ide-ui/{p-6246204f.entry.js → p-25e749c7.entry.js} +44 -57
- package/dist/genexus-ide-ui/p-25e749c7.entry.js.map +1 -0
- package/dist/genexus-ide-ui/{p-60db2f02.entry.js → p-7bdeae77.entry.js} +106 -108
- package/dist/genexus-ide-ui/p-7bdeae77.entry.js.map +1 -0
- package/dist/genexus-ide-ui/p-8b5c826b.entry.js +212 -0
- package/dist/genexus-ide-ui/p-8b5c826b.entry.js.map +1 -0
- package/dist/genexus-ide-ui/p-c460c9e7.entry.js +187 -0
- package/dist/genexus-ide-ui/p-c460c9e7.entry.js.map +1 -0
- package/dist/genexus-ide-ui/{p-aad714a5.entry.js → p-e2b88bea.entry.js} +70 -67
- package/dist/genexus-ide-ui/p-e2b88bea.entry.js.map +1 -0
- package/dist/types/components/_helpers/multi-select/gx-ide-multi-select.d.ts +29 -0
- package/dist/types/components/file-uploader/file-item/file-item.d.ts +2 -0
- package/dist/types/components/launchpad/root/launchpad.d.ts +0 -4
- package/dist/types/components/search/search.d.ts +59 -0
- package/dist/types/components.d.ts +121 -4
- package/package.json +1 -1
- package/dist/genexus-ide-ui/p-60db2f02.entry.js.map +0 -1
- package/dist/genexus-ide-ui/p-6246204f.entry.js.map +0 -1
- package/dist/genexus-ide-ui/p-aad714a5.entry.js.map +0 -1
- package/dist/genexus-ide-ui/p-f3c3e830.entry.js +0 -163
- 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":";;;;;;;;;;;;;;;;AAAA,MAAMA,IAAY;;;;;;;;;;;;;;;;;ACqBlB,MAAMC,IAA8B,EAClC,qBACA,mBACA,wBACA,oBACA,iBACA;;AAEF,MAAMC,IAAcC,EAAY;EAC9BC,UAAU;EACVC,MAAM;EACNC,WAAW;;;AAGb,MAAMC,IAAmBJ,EAAY;EACnCC,UAAU;EACVC,MAAM;EACNC,WAAW;;;MASAE,IAAW;;;IACtBC,EAAAC,IAAAC,WAAA;IACAC,EAAAF,IAAAC,MAA4B;IAyD5BE,EAAAH,IAAAC,OAAsBG,MAAOC;;MAC3B,KAAKJ,KAAKK,UAAU;QAClB;;MAGF,MAAMC,IAAeF,EAAMG;MAC3B,MAAMC,KAAaC,IAAAH,MAAY,QAAZA,WAAY,aAAZA,EAAcI,WAAK,QAAAD,WAAA,aAAAA,EAAEE;MACxCC,EAAAZ,MAAIC,GAAqBO,GAAU;MAEnC,KAAKA,GAAY;QACfR,KAAKa,oBAAoB;QACzBb,KAAKc,cAAc;QACnBd,KAAKe,cAAc;QACnB;;MAGFf,KAAKc,cAAc;MACnBd,KAAKe,cAAc;MACnBf,KAAKa,oBAAoB;MAEzB;QACE,MAAMG,UAAyBhB,KAAKiB,eAAe;UACjDC,MAAMV;UACNW,YAAY;UACZC,mBAAmB;UACnBC,aAAa;UACbC,QAAQ;;QAGVtB,KAAKa,oBACHU,EAAAvB,MAAIwB,GAAA,KAAgCC,KAApCzB,MAAqCgB;;QAEvChB,KAAKe,cAAc;;;IAIvBW,EAAA3B,IAAAC,OAA8BI;MAC5B,IAAIA,EAAMuB,QAAQ,SAAS;QACzBJ,EAAAvB,MAAIE,GAAA,KAAoBuB,KAAxBzB,MAAyBI;;;IAI7BoB,EAAAzB,IAAAC,OACEgB;MAEA,KAAKA,KAAoBA,EAAiBY,WAAW,GAAG;QACtD,OAAO;;MAET,OAAO,EACL;QACEC,IAAI;QACJC,SAAS,GAAGP,EAAAvB,MAAIF,GAAA,KAAkBiC,OAAOC,YAAYhB,EAAiBY;QACtEK,UAAU;QACVC,OAAO;QACPC,OAAOnB,EAAiBoB,KACrBC,MAAI;UACHR,IAAIQ,EAAKC;UACTC,aAAaF,EAAKG;UAClBV,SAASO,EAAKI;UACdC,MAAM;UACNR,OAAO;;;AAId;IAGHS,EAAA5C,IAAAC,OAA8BG,MAC5BC;;MAEA,MAAMwC,IAASxC,EAAMyC,OAAOhB;cACtBpB,IAAAT,KAAK8C,6BAAuB,QAAArC,WAAA,aAAAA,EAAAgB,KAAAzB,MAAG4C;AAAO;IAG9CG,EAAAhD,IAAAC,OAAuB;MACrB,KAAKA,KAAKK,UAAU;QAClB,OACE2C,EAAA;UACEC,YAAY1B,EAAAvB,MAAIF,GAAA,KAAkBoD,cAAcC;UAChDC,kBAAkB7B,EAAAvB,MAAIF,GAAA,KAAkBoD,cAAcG;UACtDC,cAAc1D;UACd2D,YAAY;;;MAKlB,IAAIvD,KAAKe,aAAa;QACpB,OACEiC,EAAA;UACEQ,aAAajC,EAAAvB,MAAIF,GAAA,KAAkB2D,OAAON;UAC1CO,MAAM;;;MAKZ,IAAI1D,KAAKa,kBAAkBe,SAAS,GAAG;QACrC,OACEoB,EAAA;UACEW,OAAM;UACNC,OAAO5D,KAAKa;UACZgD,kBAAiB;UACjBC,eAAe;UACfC,qBAAqBxC,EAAAvB,MAAI2C,GAAA;;;MAK/B,IAAI3C,KAAKc,aAAa;QACpB,OACEkC,EAAA;UACEC,YAAY1B,EAAAvB,MAAIF,GAAA,KAAkBkE,WAAWb;UAC7CC,kBAAkB7B,EAAAvB,MAAIF,GAAA,KAAkBkE,WAAWX;UACnDC,cAAc1D;UACd2D,YAAY;;;MAKlB,OAAO;AAAI;6BAxK+B;uBAKrB;uBAKA;oBAKc;;;;EAErC,kBAAAU,CAAmBC;IACjB,KAAKA,GAAU;MACbtD,EAAAZ,MAAIC,GAAqB,IAAE;MAC3BD,KAAKa,oBAAoB;MACzBb,KAAKc,cAAc;MACnBd,KAAKe,cAAc;;;;;SAoBvB,kBAAMoD,CAAaC;IACjB,OAAOC,QAAQC;;EAGjB,uBAAMC;IACJ3D,EAAAZ,MAAIF,SAA0B0E,EAAOC,oBAAoBzE,KAAK0E,KAAG;;EA4HnE,MAAAC;IACE,OACE3B,EAAC4B,GAAI;MAACjB,OAAM;OACVX,EAAA;MAAUY,OAAOtE;QACjB0D,EAAA;MAASW,OAAO;OACdX,EAAA;MAAQW,OAAM;OACZX,EAAA;MACEnB,IAAG;MACH8B,OAAM;MACNkB,gBAAgBtD,EAAAvB,MAAIF,GAAA,KAAkB+E;MACtCC,aAAavD,EAAAvB,MAAIF,GAAA,KAAkBiF,aAAaC;MAChDC,UAAUC,EAAOC;MACjBC,SAAS7D,EAAAvB,MAAIE,GAAA;MACbmF,WAAW9D,EAAAvB,MAAI0B,GAAA;MACf4D,MAAK;MACL/C,aAAahD;MACbgG,WAAWvF,KAAKK;MAChBK,OAAOa,EAAAvB,MAAIC,GAAA;SAIf+C,EAAA;MAAMW,OAAM;OAAmBpC,EAAAvB,MAAI+C,GAAA,KAAqBtB,KAAzBzB"}
|
|
@@ -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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"}
|