@arsedizioni/ars-utils 22.5.4 → 22.5.6
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/README.md +13 -5
- package/fesm2022/arsedizioni-ars-utils-ui.dialogs.mjs +6 -1
- package/fesm2022/arsedizioni-ars-utils-ui.dialogs.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-ui.shell.mjs +116 -10
- package/fesm2022/arsedizioni-ars-utils-ui.shell.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/ui.colors.scss +59 -59
- package/types/arsedizioni-ars-utils-ui.shell.d.ts +61 -6
- package/clipper.ui/ui/clipper.scss +0 -564
- package/fesm2022/arsedizioni-ars-utils-help.mjs +0 -530
- package/fesm2022/arsedizioni-ars-utils-help.mjs.map +0 -1
- package/fesm2022/arsedizioni-ars-utils-support.ui.mjs +0 -262
- package/fesm2022/arsedizioni-ars-utils-support.ui.mjs.map +0 -1
- package/fesm2022/arsedizioni-ars-utils-tinymce.mjs +0 -246
- package/fesm2022/arsedizioni-ars-utils-tinymce.mjs.map +0 -1
- package/help/package.json +0 -4
- package/support.ui/package.json +0 -4
- package/tinymce/README.md +0 -12
- package/tinymce/langs/it.js +0 -466
- package/tinymce/package.json +0 -4
- package/types/arsedizioni-ars-utils-help.d.ts +0 -220
- package/types/arsedizioni-ars-utils-support.ui.d.ts +0 -73
- package/types/arsedizioni-ars-utils-tinymce.d.ts +0 -63
|
@@ -1,530 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, viewChild, inject, DestroyRef, signal, computed, afterNextRender, ChangeDetectionStrategy, ViewEncapsulation, Component, Service } from '@angular/core';
|
|
3
|
-
import * as i1 from '@arsedizioni/ars-utils/ui';
|
|
4
|
-
import { DialogService, FlexLayoutModule } from '@arsedizioni/ars-utils/ui';
|
|
5
|
-
import { HttpClient } from '@angular/common/http';
|
|
6
|
-
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
|
7
|
-
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
8
|
-
import * as i2 from '@angular/material/button';
|
|
9
|
-
import { MatButtonModule } from '@angular/material/button';
|
|
10
|
-
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent } from '@angular/material/dialog';
|
|
11
|
-
import * as i4 from '@angular/material/icon';
|
|
12
|
-
import { MatIconModule } from '@angular/material/icon';
|
|
13
|
-
import * as i5 from '@angular/material/progress-bar';
|
|
14
|
-
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
15
|
-
import * as i6 from '@angular/material/sidenav';
|
|
16
|
-
import { MatSidenavModule } from '@angular/material/sidenav';
|
|
17
|
-
import * as i3 from '@angular/material/tooltip';
|
|
18
|
-
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
19
|
-
import * as i7 from '@angular/material/tree';
|
|
20
|
-
import { MatTree, MatTreeModule } from '@angular/material/tree';
|
|
21
|
-
import { SafeHtmlPipe, SystemUtils } from '@arsedizioni/ars-utils/core';
|
|
22
|
-
import { BehaviorSubject } from 'rxjs';
|
|
23
|
-
|
|
24
|
-
class IndexInfo {
|
|
25
|
-
}
|
|
26
|
-
class IndexNode extends IndexInfo {
|
|
27
|
-
constructor(item, level) {
|
|
28
|
-
super();
|
|
29
|
-
// Flattened implementation
|
|
30
|
-
this.expandable = !!item.children && item.children.length > 0;
|
|
31
|
-
this.level = level;
|
|
32
|
-
// Data
|
|
33
|
-
this.id = item.id;
|
|
34
|
-
this.name = item.name;
|
|
35
|
-
this.itemsCount = item.itemsCount;
|
|
36
|
-
this.parent = item.parent;
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
class IndexTreeDataSource {
|
|
40
|
-
constructor() {
|
|
41
|
-
this.dataChange = new BehaviorSubject([]);
|
|
42
|
-
}
|
|
43
|
-
get data() {
|
|
44
|
-
return this.dataChange.value;
|
|
45
|
-
}
|
|
46
|
-
ngOnDestroy() {
|
|
47
|
-
this.dataChange.unsubscribe();
|
|
48
|
-
}
|
|
49
|
-
/**
|
|
50
|
-
* Initialises the data source with a flat list of root nodes.
|
|
51
|
-
* @param data - Array of root `IndexInfo` items to display in the tree.
|
|
52
|
-
*/
|
|
53
|
-
initialize(data) {
|
|
54
|
-
this.dataChange.next(data);
|
|
55
|
-
}
|
|
56
|
-
/**
|
|
57
|
-
* Recursively searches the tree for a node with the given id.
|
|
58
|
-
* @param node - The node to start from, or `null`/`undefined` to search from the root.
|
|
59
|
-
* @param id - The id of the node to find.
|
|
60
|
-
* @returns The matching `IndexInfo`, or `undefined` if not found.
|
|
61
|
-
*/
|
|
62
|
-
findNode(node, id) {
|
|
63
|
-
let children;
|
|
64
|
-
if (node && node.id === id)
|
|
65
|
-
return node;
|
|
66
|
-
if (node)
|
|
67
|
-
children = node.children;
|
|
68
|
-
else
|
|
69
|
-
children = this.data;
|
|
70
|
-
if (children) {
|
|
71
|
-
let _n;
|
|
72
|
-
children.some(n => {
|
|
73
|
-
n.parent = node ?? undefined;
|
|
74
|
-
_n = this.findNode(n, id);
|
|
75
|
-
if (_n)
|
|
76
|
-
return true;
|
|
77
|
-
return false;
|
|
78
|
-
});
|
|
79
|
-
return _n;
|
|
80
|
-
}
|
|
81
|
-
return undefined;
|
|
82
|
-
}
|
|
83
|
-
/**
|
|
84
|
-
* Removes the node with the given id from the tree.
|
|
85
|
-
* @param id - The id of the node to remove.
|
|
86
|
-
*/
|
|
87
|
-
removeNode(id) {
|
|
88
|
-
const n = this.findNode(null, id);
|
|
89
|
-
if (!n)
|
|
90
|
-
return;
|
|
91
|
-
if (n.parent) {
|
|
92
|
-
const siblings = n.parent.children;
|
|
93
|
-
if (siblings) {
|
|
94
|
-
const p = siblings.findIndex(c => c.id === id);
|
|
95
|
-
if (p !== -1) {
|
|
96
|
-
siblings.splice(p, 1);
|
|
97
|
-
if (n.parent.itemsCount !== undefined) {
|
|
98
|
-
n.parent.itemsCount--;
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
else {
|
|
104
|
-
const p = this.data.findIndex(c => c.id === id);
|
|
105
|
-
if (p !== -1) {
|
|
106
|
-
this.data.splice(p, 1);
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
this.dataChange.next(this.data);
|
|
110
|
-
}
|
|
111
|
-
/**
|
|
112
|
-
* Inserts a new node at the beginning of its parent's children, or at the root.
|
|
113
|
-
* @param node - The `IndexInfo` node to insert.
|
|
114
|
-
*/
|
|
115
|
-
insertNode(node) {
|
|
116
|
-
if (node.parent) {
|
|
117
|
-
node.parent.children ??= [];
|
|
118
|
-
node.parent.children.unshift(node);
|
|
119
|
-
node.parent.itemsCount = (node.parent.itemsCount ?? 0) + 1;
|
|
120
|
-
}
|
|
121
|
-
else {
|
|
122
|
-
this.data.unshift(node);
|
|
123
|
-
}
|
|
124
|
-
this.dataChange.next(this.data);
|
|
125
|
-
}
|
|
126
|
-
/**
|
|
127
|
-
* Renames a node in the tree.
|
|
128
|
-
* @param id - The id of the node to rename.
|
|
129
|
-
* @param name - The new display name.
|
|
130
|
-
*/
|
|
131
|
-
renameNode(id, name) {
|
|
132
|
-
const n = this.findNode(null, id);
|
|
133
|
-
if (n) {
|
|
134
|
-
n.name = name;
|
|
135
|
-
this.dataChange.next(this.data);
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
/**
|
|
139
|
-
* Re-emits the current data to all subscribers, triggering a tree refresh.
|
|
140
|
-
*/
|
|
141
|
-
update() {
|
|
142
|
-
this.dataChange.next(this.data);
|
|
143
|
-
}
|
|
144
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: IndexTreeDataSource, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
145
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: IndexTreeDataSource }); }
|
|
146
|
-
}
|
|
147
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: IndexTreeDataSource, decorators: [{
|
|
148
|
-
type: Injectable
|
|
149
|
-
}] });
|
|
150
|
-
class HelpViewerComponent {
|
|
151
|
-
constructor() {
|
|
152
|
-
this.indexPane = viewChild.required('indexPane', /* @ts-ignore */
|
|
153
|
-
...(ngDevMode ? [{ debugName: "indexPane" }] : /* istanbul ignore next */ []));
|
|
154
|
-
this.destroyRef = inject(DestroyRef);
|
|
155
|
-
this.dialogRef = inject((MatDialogRef));
|
|
156
|
-
this.dialogData = inject(MAT_DIALOG_DATA) ?? { id: '1' };
|
|
157
|
-
this.dialogService = inject(DialogService);
|
|
158
|
-
this.helpService = inject(HelpService);
|
|
159
|
-
this.breakpointObserver = inject(BreakpointObserver);
|
|
160
|
-
this.busy = signal(false, /* @ts-ignore */
|
|
161
|
-
...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
|
|
162
|
-
this.page = signal(null, /* @ts-ignore */
|
|
163
|
-
...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
|
|
164
|
-
this.indexPaneClosed = false;
|
|
165
|
-
this.history = signal([], /* @ts-ignore */
|
|
166
|
-
...(ngDevMode ? [{ debugName: "history" }] : /* istanbul ignore next */ []));
|
|
167
|
-
this.canGoBack = computed(() => this.history().length > 1, /* @ts-ignore */
|
|
168
|
-
...(ngDevMode ? [{ debugName: "canGoBack" }] : /* istanbul ignore next */ []));
|
|
169
|
-
this.tree = inject(IndexTreeDataSource);
|
|
170
|
-
this.matTree = viewChild(MatTree, /* @ts-ignore */
|
|
171
|
-
...(ngDevMode ? [{ debugName: "matTree" }] : /* istanbul ignore next */ []));
|
|
172
|
-
/** Provides the level of a flat node to the tree component. */
|
|
173
|
-
this.levelAccessor = (node) => node.level;
|
|
174
|
-
/** Flat list of all tree nodes used as the tree data source. */
|
|
175
|
-
this.flatNodes = signal([], /* @ts-ignore */
|
|
176
|
-
...(ngDevMode ? [{ debugName: "flatNodes" }] : /* istanbul ignore next */ []));
|
|
177
|
-
this.hasChild = (_, _node) => _node.expandable;
|
|
178
|
-
// Subscribe data change
|
|
179
|
-
this.tree.dataChange
|
|
180
|
-
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
181
|
-
.subscribe(data => this.flatNodes.set(this.flattenNodes(data)));
|
|
182
|
-
this.getToc();
|
|
183
|
-
this.indexId = this.dialogData.id;
|
|
184
|
-
if (this.indexId) {
|
|
185
|
-
this.getChapter(this.indexId);
|
|
186
|
-
}
|
|
187
|
-
afterNextRender(() => {
|
|
188
|
-
// Observe layout changes — must run after view init so indexPane is available
|
|
189
|
-
this.breakpointObserver
|
|
190
|
-
.observe([
|
|
191
|
-
Breakpoints.XSmall,
|
|
192
|
-
Breakpoints.Small,
|
|
193
|
-
Breakpoints.Medium,
|
|
194
|
-
Breakpoints.Large,
|
|
195
|
-
Breakpoints.XLarge,
|
|
196
|
-
])
|
|
197
|
-
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
198
|
-
.subscribe(() => this.handleFilterPaneVisibility());
|
|
199
|
-
this.indexPaneClosed = !this.indexPane().opened;
|
|
200
|
-
});
|
|
201
|
-
}
|
|
202
|
-
/**
|
|
203
|
-
* Handle filter pane visibility
|
|
204
|
-
*/
|
|
205
|
-
handleFilterPaneVisibility() {
|
|
206
|
-
const indexPane = this.indexPane();
|
|
207
|
-
if (indexPane) {
|
|
208
|
-
if (this.breakpointObserver.isMatched(Breakpoints.XSmall) ||
|
|
209
|
-
this.breakpointObserver.isMatched(Breakpoints.Small) ||
|
|
210
|
-
this.breakpointObserver.isMatched(Breakpoints.Medium)) {
|
|
211
|
-
if (indexPane.opened) {
|
|
212
|
-
indexPane.close();
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
else {
|
|
216
|
-
if (!indexPane.opened && !this.indexPaneClosed) {
|
|
217
|
-
indexPane.open();
|
|
218
|
-
}
|
|
219
|
-
}
|
|
220
|
-
}
|
|
221
|
-
}
|
|
222
|
-
/**
|
|
223
|
-
* Shows or hides the index pane when the user clicks the toggle button.
|
|
224
|
-
* Also tracks the user's explicit intent so the pane is not auto-reopened.
|
|
225
|
-
*/
|
|
226
|
-
toggleIndexPane() {
|
|
227
|
-
this.indexPaneClosed = !this.indexPaneClosed;
|
|
228
|
-
this.indexPane()?.toggle();
|
|
229
|
-
}
|
|
230
|
-
/**
|
|
231
|
-
* Closes the help viewer dialog.
|
|
232
|
-
*/
|
|
233
|
-
close() {
|
|
234
|
-
this.dialogRef.close();
|
|
235
|
-
}
|
|
236
|
-
/**
|
|
237
|
-
* Loads the table of contents from the help service and populates the tree.
|
|
238
|
-
*/
|
|
239
|
-
getToc() {
|
|
240
|
-
this.busy.set(true);
|
|
241
|
-
this.helpService
|
|
242
|
-
.getToc()
|
|
243
|
-
.subscribe({
|
|
244
|
-
next: r => {
|
|
245
|
-
if (!r.success) {
|
|
246
|
-
this.dialogService.error(r.message);
|
|
247
|
-
}
|
|
248
|
-
else {
|
|
249
|
-
this.folders = r.value.children;
|
|
250
|
-
if (this.folders.length > 0) {
|
|
251
|
-
this.tree.initialize(this.folders);
|
|
252
|
-
this.indexNode = this.folders[0];
|
|
253
|
-
this.expandCurrentFolder();
|
|
254
|
-
}
|
|
255
|
-
}
|
|
256
|
-
},
|
|
257
|
-
complete: () => {
|
|
258
|
-
this.busy.set(false);
|
|
259
|
-
}
|
|
260
|
-
});
|
|
261
|
-
}
|
|
262
|
-
/**
|
|
263
|
-
* Intercepts anchor clicks inside the help page and navigates to the referenced chapter.
|
|
264
|
-
* @param e - The click `MouseEvent` from the page content area.
|
|
265
|
-
* @returns `false` to prevent default browser navigation.
|
|
266
|
-
*/
|
|
267
|
-
gotoChapter(e) {
|
|
268
|
-
const el = e.target;
|
|
269
|
-
if (el?.nodeName !== 'A')
|
|
270
|
-
return false;
|
|
271
|
-
const tag = el.outerHTML;
|
|
272
|
-
let id = '';
|
|
273
|
-
let p = tag.indexOf('help-target="');
|
|
274
|
-
if (p !== -1) {
|
|
275
|
-
p += 13;
|
|
276
|
-
while (p < tag.length && tag[p] !== '"') {
|
|
277
|
-
id += tag[p];
|
|
278
|
-
p++;
|
|
279
|
-
}
|
|
280
|
-
}
|
|
281
|
-
if (id)
|
|
282
|
-
this.getChapter(id);
|
|
283
|
-
return false;
|
|
284
|
-
}
|
|
285
|
-
/**
|
|
286
|
-
* Searches the folder list for a node matching the given id.
|
|
287
|
-
* @param id - The id of the folder to locate.
|
|
288
|
-
* @returns The matching `IndexInfo`, or `undefined` if not found.
|
|
289
|
-
*/
|
|
290
|
-
findFolder(id) {
|
|
291
|
-
let node = undefined;
|
|
292
|
-
if (this.folders) {
|
|
293
|
-
this.folders.some(n => {
|
|
294
|
-
node = this.tree.findNode(n, id);
|
|
295
|
-
if (node)
|
|
296
|
-
return true;
|
|
297
|
-
return false;
|
|
298
|
-
});
|
|
299
|
-
}
|
|
300
|
-
return node;
|
|
301
|
-
}
|
|
302
|
-
/**
|
|
303
|
-
* Expands the tree node that corresponds to the currently selected chapter,
|
|
304
|
-
* and all its ancestor nodes.
|
|
305
|
-
*/
|
|
306
|
-
expandCurrentFolder() {
|
|
307
|
-
if (this.indexNode) {
|
|
308
|
-
const current = this.flatNodes().find(n => n.id === this.indexNode.id);
|
|
309
|
-
if (current) {
|
|
310
|
-
this.matTree()?.expand(current);
|
|
311
|
-
}
|
|
312
|
-
if (this.indexNode.parent) {
|
|
313
|
-
// Expand all ancestors
|
|
314
|
-
let n = this.indexNode.parent;
|
|
315
|
-
while (n) {
|
|
316
|
-
const ancestor = this.flatNodes().find(x => x.id === n.id);
|
|
317
|
-
if (ancestor)
|
|
318
|
-
this.matTree()?.expand(ancestor);
|
|
319
|
-
n = n.parent;
|
|
320
|
-
}
|
|
321
|
-
}
|
|
322
|
-
}
|
|
323
|
-
}
|
|
324
|
-
/**
|
|
325
|
-
* Recursively flattens a nested IndexInfo tree into a depth-first ordered array of IndexNodes.
|
|
326
|
-
* @param items - Root-level nodes to flatten.
|
|
327
|
-
* @param level - Current depth level.
|
|
328
|
-
*/
|
|
329
|
-
flattenNodes(items, level = 0) {
|
|
330
|
-
const result = [];
|
|
331
|
-
for (const node of items) {
|
|
332
|
-
result.push(new IndexNode(node, level));
|
|
333
|
-
if (node.children?.length) {
|
|
334
|
-
result.push(...this.flattenNodes(node.children, level + 1));
|
|
335
|
-
}
|
|
336
|
-
}
|
|
337
|
-
return result;
|
|
338
|
-
}
|
|
339
|
-
/**
|
|
340
|
-
* Retrieves and displays a help chapter by id.
|
|
341
|
-
* Optionally scrolls to an anchor or pixel offset after loading.
|
|
342
|
-
* @param id - Chapter id, optionally followed by an anchor (`id#anchor`).
|
|
343
|
-
* @param position - Pixel scroll offset to restore (default `0`, meaning top).
|
|
344
|
-
*/
|
|
345
|
-
getChapter(id, position = 0) {
|
|
346
|
-
// Detect anchor if exists
|
|
347
|
-
let anchor;
|
|
348
|
-
const p = id.indexOf('#');
|
|
349
|
-
if (p !== -1) {
|
|
350
|
-
anchor = id.substring(p + 1);
|
|
351
|
-
id = id.substring(0, p);
|
|
352
|
-
}
|
|
353
|
-
if (id !== '.') {
|
|
354
|
-
this.busy.set(true);
|
|
355
|
-
this.helpService.getChapter(id)
|
|
356
|
-
.subscribe({
|
|
357
|
-
next: r => {
|
|
358
|
-
let found = false;
|
|
359
|
-
if (!r.success) {
|
|
360
|
-
this.dialogService.error("Capitolo non trovato.");
|
|
361
|
-
}
|
|
362
|
-
else {
|
|
363
|
-
if (!position)
|
|
364
|
-
this.history.update(h => [...h, { id: this.indexId ?? '', position: this.getPosition() }]);
|
|
365
|
-
this.indexId = id;
|
|
366
|
-
this.page.set(r.value.data);
|
|
367
|
-
found = (r.value.chapter?.name?.length ?? 0) > 0;
|
|
368
|
-
if (found) {
|
|
369
|
-
// Update folder
|
|
370
|
-
this.indexNode = this.findFolder(id);
|
|
371
|
-
this.expandCurrentFolder();
|
|
372
|
-
// Handle positioning
|
|
373
|
-
this.gotoPosition(anchor, position);
|
|
374
|
-
}
|
|
375
|
-
}
|
|
376
|
-
if (!found) {
|
|
377
|
-
this.getChapter("1");
|
|
378
|
-
}
|
|
379
|
-
},
|
|
380
|
-
complete: () => {
|
|
381
|
-
this.busy.set(false);
|
|
382
|
-
}
|
|
383
|
-
});
|
|
384
|
-
}
|
|
385
|
-
else {
|
|
386
|
-
if (!position)
|
|
387
|
-
this.history.update(h => [...h, { id: this.indexId ?? '', position: this.getPosition() }]);
|
|
388
|
-
// Move on the same chapter
|
|
389
|
-
this.gotoPosition(anchor, position);
|
|
390
|
-
}
|
|
391
|
-
}
|
|
392
|
-
/**
|
|
393
|
-
* Scrolls the help content to a named anchor or a numeric pixel offset.
|
|
394
|
-
* @param anchor - Named anchor (`<a name="…">`) to scroll to, if any.
|
|
395
|
-
* @param position - Fallback pixel offset (default `0`).
|
|
396
|
-
*/
|
|
397
|
-
gotoPosition(anchor, position = 0) {
|
|
398
|
-
setTimeout(() => {
|
|
399
|
-
if (anchor) {
|
|
400
|
-
const elms = document.getElementsByName(anchor.toUpperCase());
|
|
401
|
-
if (elms && elms.length > 0)
|
|
402
|
-
position = elms[0].offsetTop;
|
|
403
|
-
}
|
|
404
|
-
this.setPosition(position > 0 ? position - 1 : 0);
|
|
405
|
-
}, 50);
|
|
406
|
-
}
|
|
407
|
-
/**
|
|
408
|
-
* Returns the current vertical scroll offset of the help content scroller.
|
|
409
|
-
* @returns The `scrollTop` value in pixels, or `0` if the element is not found.
|
|
410
|
-
*/
|
|
411
|
-
getPosition() {
|
|
412
|
-
let elem = document.getElementById('helpviewer-scroller');
|
|
413
|
-
if (elem) {
|
|
414
|
-
return elem.scrollTop;
|
|
415
|
-
}
|
|
416
|
-
return 0;
|
|
417
|
-
}
|
|
418
|
-
/**
|
|
419
|
-
* Scrolls the help content scroller to the specified pixel offset.
|
|
420
|
-
* @param position - The vertical pixel offset to scroll to.
|
|
421
|
-
*/
|
|
422
|
-
setPosition(position) {
|
|
423
|
-
let elem = document.getElementById('helpviewer-scroller');
|
|
424
|
-
if (elem) {
|
|
425
|
-
elem.scrollTo(0, position);
|
|
426
|
-
}
|
|
427
|
-
}
|
|
428
|
-
/**
|
|
429
|
-
* Navigates back to the previous chapter in the browsing history.
|
|
430
|
-
*/
|
|
431
|
-
back() {
|
|
432
|
-
const entries = this.history();
|
|
433
|
-
if (entries.length === 0)
|
|
434
|
-
return;
|
|
435
|
-
const n = entries[entries.length - 1];
|
|
436
|
-
this.history.update(h => h.slice(0, -1));
|
|
437
|
-
this.getChapter(n.id, n.position + 1);
|
|
438
|
-
}
|
|
439
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HelpViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
440
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HelpViewerComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "Bind": SystemUtils.generateUUID() } }, providers: [IndexTreeDataSource], viewQueries: [{ propertyName: "indexPane", first: true, predicate: ["indexPane"], descendants: true, isSignal: true }, { propertyName: "matTree", first: true, predicate: MatTree, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"helpviewer-fixed\">\r\n <div style=\"height:6px\">\r\n @if (busy()) {\r\n <mat-progress-bar z-index=\"11\" mode=\"indeterminate\"></mat-progress-bar>\r\n }\r\n </div>\r\n <div class=\"dialog-header\">\r\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\" fxFill>\r\n <div class=\"dialog-menu\">\r\n <button type=\"button\" mat-icon-button matTooltip=\"Mostra menu\" [attr.aria-label]=\"'Mostra indice'\"\r\n (click)=\"toggleIndexPane()\">\r\n <mat-icon>menu</mat-icon>\r\n </button>\r\n </div>\r\n <div fxFlex=\"*\">\r\n <div mat-dialog-title>Guida</div>\r\n </div>\r\n <div fxFlex=\"100px\" fxLayoutAlign=\"end\" class=\"dialog-close\">\r\n @if (canGoBack()) {\r\n <button fxFlexAlign=\"start\" type=\"button\" mat-icon-button matTooltip=\"Indietro\" (click)=\"back()\">\r\n <mat-icon>arrow_back</mat-icon>\r\n </button>\r\n }\r\n <button fxFlexAlign=\"start\" type=\"button\" mat-icon-button matTooltip=\"Chiudi\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n<mat-dialog-content id=\"helpviewer-scrollable\">\r\n <mat-drawer-container class=\"fill\">\r\n <mat-drawer #indexPane mode=\"side\" [autoFocus]=\"false\" class=\"drawer-small drawer-transparent\">\r\n <div fxLayout=\"column\" fxFill>\r\n <div fxFlex=\"*\">\r\n <mat-tree [dataSource]=\"flatNodes()\" [levelAccessor]=\"levelAccessor\" class=\"tree \" style=\"max-width:310px\">\r\n <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding\r\n [matTreeNodePaddingIndent]=\"20\" class=\"tree-node tree-node-simple tree-node-style\"\r\n (click)=\"getChapter(node.id);\" [class.tree-node-activated]=\"indexNode && indexNode.id === node.id\"\r\n [disabled]=\"busy()\">\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill class=\"small uppercase\">\r\n <button type=\"button\" fxFlexAlign=\"center\" mat-icon-button disabled class=\"small-icon-button\"></button>\r\n <div fxFlex=\"*\" fxFlexAlign=\"center\">{{node.name}}</div>\r\n </div>\r\n </mat-tree-node>\r\n <mat-tree-node #treeNodeRef=\"matTreeNode\" *matTreeNodeDef=\"let node;when: hasChild\" matTreeNodePadding [matTreeNodePaddingIndent]=\"20\"\r\n class=\"tree-node tree-node-simple tree-node-style\"\r\n [class.tree-node-activated]=\"indexNode && indexNode.id === node.id\" (click)=\"getChapter(node.id)\"\r\n [disabled]=\"busy()\">\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill class=\"small uppercase\">\r\n <button type=\"button\" fxFlexAlign=\"center\" mat-icon-button matTreeNodeToggle\r\n [attr.aria-label]=\"'Apri/chiudi ' + node.name\" class=\"small-icon-button\">\r\n <mat-icon class=\"mat-icon-rtl-mirror\">\r\n {{treeNodeRef.isExpanded ? 'expand_more' : 'chevron_right'}}\r\n </mat-icon>\r\n </button>\r\n <div fxFlex=\"*\" fxFlexAlign=\"center\">{{node.name}}</div>\r\n </div>\r\n </mat-tree-node>\r\n </mat-tree>\r\n </div>\r\n </div>\r\n </mat-drawer>\r\n <mat-drawer-content id=\"helpviewer-scroller\">\r\n <div style=\"padding: 0 24px;\">\r\n <div fxLayout=\"column\" fxFill>\r\n <div class=\"fill\" (click)=\"gotoChapter($event)\" [innerHtml]=\"(page() ?? '') | safeHtml\"></div>\r\n </div>\r\n </div>\r\n </mat-drawer-content>\r\n </mat-drawer-container>\r\n</mat-dialog-content>", styles: [".fill,.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.fill{min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important;line-height:1.2!important}.smaller{font-size:smaller!important;line-height:1.2!important}.small{font-size:small!important;line-height:1.2!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:1.2!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer .title-container-with-loader,.drawer-small .title-container,.drawer-small .title-container-with-loader{padding-right:5px;padding-bottom:20px;padding-left:0}.drawer .title-container,.drawer-small .title-container{padding-top:20px}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding-top:14px}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}.dialog-menu{margin-top:4px!important}.tree{overflow-x:hidden}.tree-node{min-height:36px!important;padding-right:12px;margin-right:0}.tree-node .small-icon-button{width:2rem!important;height:2rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.tree-node .small-icon-button .mat-mdc-button-touch-target{width:2rem!important;height:2rem!important}.tree-node:hover{cursor:pointer;background-color:var(--mat-menu-item-hover-state-layer-color, transparent);border-radius:24px}.tree-node-simple,.tree-node-simple>div{min-height:32px!important}.tree-node-activated,.tree-node-activated>div{font-weight:700!important;color:var(--ars-color-accent, #7894ae)!important}a.help-link,.help-link>a{text-decoration:none;color:#2a91e0}.help-title-2,.help-title-1{font-weight:600!important}.help-word-hit{font-size:inherit;background-color:var(--ars-word-hit-background-color, yellow);padding:0 4px}.help-hint{margin:10px;padding:5px 20px;background-color:var(--ars-help-hint-background-color, lightgoldenrodyellow);border-radius:12px}.help-summary{margin:10px;padding:5px 20px;background-color:var(--ars-help-summary-background-color, lavender);border-radius:12px}.help-img{display:flex;align-items:center;justify-content:center;margin:10px}.help-img-200,.help-img-300,.help-img-400,.help-img-500,.help-img-700,.help-img-800{width:100%}.help-img-200{max-width:200px}.help-img-300{max-width:300px}.help-img-400{max-width:400px}.help-img-500{max-width:500px}.help-img-600{max-width:600px}.help-img-700{max-width:700px}.help-img-800{max-width:800px}.help-filter-box{background-color:var(--ars-filterbox-filtered-background-color, #f9fbe7);border-radius:12px;padding:6px;display:inline-block;margin:0 0 8px 10px}.mat-mdc-dialog-content{max-height:unset!important;padding:0!important}\n"], dependencies: [{ kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i1.FxLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg] ", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i1.FxFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg] ", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i1.FxLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg] ", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i1.FxLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg] ", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i1.FxFlexAlignDirective, selector: " [fxFlexAlign], [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md], [fxFlexAlign.lg], [fxFlexAlign.xl], [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md], [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl], [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm], [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg] ", inputs: ["fxFlexAlign", "fxFlexAlign.xs", "fxFlexAlign.sm", "fxFlexAlign.md", "fxFlexAlign.lg", "fxFlexAlign.xl", "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg"] }, { kind: "directive", type: i1.FxFlexFillDirective, selector: " [fxFlexFill], [fxFill], [fxFlexFill.xs], [fxFlexFill.sm], [fxFlexFill.md], [fxFlexFill.lg], [fxFlexFill.xl], [fxFlexFill.lt-sm], [fxFlexFill.lt-md], [fxFlexFill.lt-lg], [fxFlexFill.lt-xl], [fxFlexFill.gt-xs], [fxFlexFill.gt-sm], [fxFlexFill.gt-md], [fxFlexFill.gt-lg] ", inputs: ["fxFlexFill", "fxFill", "fxFlexFill.xs", "fxFlexFill.sm", "fxFlexFill.md", "fxFlexFill.lg", "fxFlexFill.xl", "fxFlexFill.lt-sm", "fxFlexFill.lt-md", "fxFlexFill.lt-lg", "fxFlexFill.lt-xl", "fxFlexFill.gt-xs", "fxFlexFill.gt-sm", "fxFlexFill.gt-md", "fxFlexFill.gt-lg"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i6.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i6.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i6.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i7.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i7.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i7.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i7.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i7.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
441
|
-
}
|
|
442
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HelpViewerComponent, decorators: [{
|
|
443
|
-
type: Component,
|
|
444
|
-
args: [{ host: { 'Bind': SystemUtils.generateUUID() }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [IndexTreeDataSource], standalone: true, imports: [FlexLayoutModule, MatButtonModule, MatTooltipModule, MatIconModule, MatProgressBarModule, MatDialogTitle, MatDialogContent,
|
|
445
|
-
MatSidenavModule, MatTreeModule, SafeHtmlPipe], template: "<div class=\"helpviewer-fixed\">\r\n <div style=\"height:6px\">\r\n @if (busy()) {\r\n <mat-progress-bar z-index=\"11\" mode=\"indeterminate\"></mat-progress-bar>\r\n }\r\n </div>\r\n <div class=\"dialog-header\">\r\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\" fxFill>\r\n <div class=\"dialog-menu\">\r\n <button type=\"button\" mat-icon-button matTooltip=\"Mostra menu\" [attr.aria-label]=\"'Mostra indice'\"\r\n (click)=\"toggleIndexPane()\">\r\n <mat-icon>menu</mat-icon>\r\n </button>\r\n </div>\r\n <div fxFlex=\"*\">\r\n <div mat-dialog-title>Guida</div>\r\n </div>\r\n <div fxFlex=\"100px\" fxLayoutAlign=\"end\" class=\"dialog-close\">\r\n @if (canGoBack()) {\r\n <button fxFlexAlign=\"start\" type=\"button\" mat-icon-button matTooltip=\"Indietro\" (click)=\"back()\">\r\n <mat-icon>arrow_back</mat-icon>\r\n </button>\r\n }\r\n <button fxFlexAlign=\"start\" type=\"button\" mat-icon-button matTooltip=\"Chiudi\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n<mat-dialog-content id=\"helpviewer-scrollable\">\r\n <mat-drawer-container class=\"fill\">\r\n <mat-drawer #indexPane mode=\"side\" [autoFocus]=\"false\" class=\"drawer-small drawer-transparent\">\r\n <div fxLayout=\"column\" fxFill>\r\n <div fxFlex=\"*\">\r\n <mat-tree [dataSource]=\"flatNodes()\" [levelAccessor]=\"levelAccessor\" class=\"tree \" style=\"max-width:310px\">\r\n <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding\r\n [matTreeNodePaddingIndent]=\"20\" class=\"tree-node tree-node-simple tree-node-style\"\r\n (click)=\"getChapter(node.id);\" [class.tree-node-activated]=\"indexNode && indexNode.id === node.id\"\r\n [disabled]=\"busy()\">\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill class=\"small uppercase\">\r\n <button type=\"button\" fxFlexAlign=\"center\" mat-icon-button disabled class=\"small-icon-button\"></button>\r\n <div fxFlex=\"*\" fxFlexAlign=\"center\">{{node.name}}</div>\r\n </div>\r\n </mat-tree-node>\r\n <mat-tree-node #treeNodeRef=\"matTreeNode\" *matTreeNodeDef=\"let node;when: hasChild\" matTreeNodePadding [matTreeNodePaddingIndent]=\"20\"\r\n class=\"tree-node tree-node-simple tree-node-style\"\r\n [class.tree-node-activated]=\"indexNode && indexNode.id === node.id\" (click)=\"getChapter(node.id)\"\r\n [disabled]=\"busy()\">\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill class=\"small uppercase\">\r\n <button type=\"button\" fxFlexAlign=\"center\" mat-icon-button matTreeNodeToggle\r\n [attr.aria-label]=\"'Apri/chiudi ' + node.name\" class=\"small-icon-button\">\r\n <mat-icon class=\"mat-icon-rtl-mirror\">\r\n {{treeNodeRef.isExpanded ? 'expand_more' : 'chevron_right'}}\r\n </mat-icon>\r\n </button>\r\n <div fxFlex=\"*\" fxFlexAlign=\"center\">{{node.name}}</div>\r\n </div>\r\n </mat-tree-node>\r\n </mat-tree>\r\n </div>\r\n </div>\r\n </mat-drawer>\r\n <mat-drawer-content id=\"helpviewer-scroller\">\r\n <div style=\"padding: 0 24px;\">\r\n <div fxLayout=\"column\" fxFill>\r\n <div class=\"fill\" (click)=\"gotoChapter($event)\" [innerHtml]=\"(page() ?? '') | safeHtml\"></div>\r\n </div>\r\n </div>\r\n </mat-drawer-content>\r\n </mat-drawer-container>\r\n</mat-dialog-content>", styles: [".fill,.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.fill{min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important;line-height:1.2!important}.smaller{font-size:smaller!important;line-height:1.2!important}.small{font-size:small!important;line-height:1.2!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:1.2!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer .title-container-with-loader,.drawer-small .title-container,.drawer-small .title-container-with-loader{padding-right:5px;padding-bottom:20px;padding-left:0}.drawer .title-container,.drawer-small .title-container{padding-top:20px}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding-top:14px}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}.dialog-menu{margin-top:4px!important}.tree{overflow-x:hidden}.tree-node{min-height:36px!important;padding-right:12px;margin-right:0}.tree-node .small-icon-button{width:2rem!important;height:2rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.tree-node .small-icon-button .mat-mdc-button-touch-target{width:2rem!important;height:2rem!important}.tree-node:hover{cursor:pointer;background-color:var(--mat-menu-item-hover-state-layer-color, transparent);border-radius:24px}.tree-node-simple,.tree-node-simple>div{min-height:32px!important}.tree-node-activated,.tree-node-activated>div{font-weight:700!important;color:var(--ars-color-accent, #7894ae)!important}a.help-link,.help-link>a{text-decoration:none;color:#2a91e0}.help-title-2,.help-title-1{font-weight:600!important}.help-word-hit{font-size:inherit;background-color:var(--ars-word-hit-background-color, yellow);padding:0 4px}.help-hint{margin:10px;padding:5px 20px;background-color:var(--ars-help-hint-background-color, lightgoldenrodyellow);border-radius:12px}.help-summary{margin:10px;padding:5px 20px;background-color:var(--ars-help-summary-background-color, lavender);border-radius:12px}.help-img{display:flex;align-items:center;justify-content:center;margin:10px}.help-img-200,.help-img-300,.help-img-400,.help-img-500,.help-img-700,.help-img-800{width:100%}.help-img-200{max-width:200px}.help-img-300{max-width:300px}.help-img-400{max-width:400px}.help-img-500{max-width:500px}.help-img-600{max-width:600px}.help-img-700{max-width:700px}.help-img-800{max-width:800px}.help-filter-box{background-color:var(--ars-filterbox-filtered-background-color, #f9fbe7);border-radius:12px;padding:6px;display:inline-block;margin:0 0 8px 10px}.mat-mdc-dialog-content{max-height:unset!important;padding:0!important}\n"] }]
|
|
446
|
-
}], ctorParameters: () => [], propDecorators: { indexPane: [{ type: i0.ViewChild, args: ['indexPane', { isSignal: true }] }], matTree: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatTree), { isSignal: true }] }] } });
|
|
447
|
-
|
|
448
|
-
class HelpService {
|
|
449
|
-
constructor() {
|
|
450
|
-
this.httpClient = inject(HttpClient);
|
|
451
|
-
this.dialogService = inject(DialogService);
|
|
452
|
-
}
|
|
453
|
-
/**
|
|
454
|
-
* Initialises the service with the back-end base URI.
|
|
455
|
-
* Must be called once during application bootstrap before any other method.
|
|
456
|
-
* @param serviceUri - Base URL of the help service (e.g. `'https://api.example.com'`).
|
|
457
|
-
*/
|
|
458
|
-
initialize(serviceUri) {
|
|
459
|
-
this.serviceUri = serviceUri;
|
|
460
|
-
}
|
|
461
|
-
/**
|
|
462
|
-
* Retrieves the HTML content and metadata of a help chapter.
|
|
463
|
-
* @param id - The chapter id.
|
|
464
|
-
* @param query - Optional search query to highlight within the chapter content.
|
|
465
|
-
* @returns An observable that emits `ApiResult<ChapterBag>`.
|
|
466
|
-
*/
|
|
467
|
-
getChapter(id, query = undefined) {
|
|
468
|
-
return this.httpClient.get(this.serviceUri +
|
|
469
|
-
'/help/chapter/' +
|
|
470
|
-
id +
|
|
471
|
-
'/?query=' +
|
|
472
|
-
(query ?? ''));
|
|
473
|
-
}
|
|
474
|
-
/**
|
|
475
|
-
* Retrieves metadata (title, path, etc.) for a help chapter without its content.
|
|
476
|
-
* @param id - The chapter id.
|
|
477
|
-
* @returns An observable that emits `ApiResult<Chapter>`.
|
|
478
|
-
*/
|
|
479
|
-
getChapterInfo(id) {
|
|
480
|
-
return this.httpClient.get(this.serviceUri + '/help/chapter/info/' + id);
|
|
481
|
-
}
|
|
482
|
-
/**
|
|
483
|
-
* Retrieves a raw repository file by id.
|
|
484
|
-
* @param id - The repository file id.
|
|
485
|
-
* @returns An observable that emits `ApiResult<unknown>`.
|
|
486
|
-
*/
|
|
487
|
-
getRepo(id) {
|
|
488
|
-
return this.httpClient.get(this.serviceUri + '/help/repo/' + id);
|
|
489
|
-
}
|
|
490
|
-
/**
|
|
491
|
-
* Retrieves the table of contents as a hierarchical `IndexInfo` tree.
|
|
492
|
-
* @returns An observable that emits `ApiResult<IndexInfo>`.
|
|
493
|
-
*/
|
|
494
|
-
getToc() {
|
|
495
|
-
return this.httpClient.get(this.serviceUri + '/help/toc');
|
|
496
|
-
}
|
|
497
|
-
/**
|
|
498
|
-
* Opens the help viewer dialog, optionally pre-navigated to a specific chapter.
|
|
499
|
-
* @param id - The chapter id to open (default: `'1'`, the root chapter).
|
|
500
|
-
*/
|
|
501
|
-
show(id = '1') {
|
|
502
|
-
this.dialogService.open(HelpViewerComponent, {
|
|
503
|
-
ariaLabel: 'guida',
|
|
504
|
-
autoFocus: 'dialog',
|
|
505
|
-
restoreFocus: false,
|
|
506
|
-
disableClose: true,
|
|
507
|
-
data: { id },
|
|
508
|
-
minWidth: '375px',
|
|
509
|
-
maxWidth: '1200px',
|
|
510
|
-
width: '100%',
|
|
511
|
-
height: '100%'
|
|
512
|
-
});
|
|
513
|
-
}
|
|
514
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HelpService, deps: [], target: i0.ɵɵFactoryTarget.Service }); }
|
|
515
|
-
static { this.ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.3", ngImport: i0, type: HelpService }); }
|
|
516
|
-
}
|
|
517
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HelpService, decorators: [{
|
|
518
|
-
type: Service
|
|
519
|
-
}] });
|
|
520
|
-
|
|
521
|
-
/*
|
|
522
|
-
* Public API Surface
|
|
523
|
-
*/
|
|
524
|
-
|
|
525
|
-
/**
|
|
526
|
-
* Generated bundle index. Do not edit.
|
|
527
|
-
*/
|
|
528
|
-
|
|
529
|
-
export { HelpService, HelpViewerComponent, IndexInfo, IndexNode, IndexTreeDataSource };
|
|
530
|
-
//# sourceMappingURL=arsedizioni-ars-utils-help.mjs.map
|