@sumaris-net/ngx-components 18.6.0 → 18.6.1
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/esm2022/src/app/shared/markdown/markdown.component.mjs +97 -8
- package/esm2022/src/app/shared/markdown/markdown.modal.mjs +6 -3
- package/esm2022/src/app/shared/markdown/markdown.service.mjs +3 -2
- package/esm2022/src/app/shared/markdown/testing/markdown.test.mjs +4 -3
- package/fesm2022/sumaris-net.ngx-components.mjs +104 -11
- package/fesm2022/sumaris-net.ngx-components.mjs.map +1 -1
- package/package.json +1 -1
- package/src/app/shared/inputs.d.ts +1 -1
- package/src/app/shared/markdown/markdown.component.d.ts +8 -4
- package/src/app/shared/markdown/markdown.modal.d.ts +3 -1
- package/src/assets/manifest.json +1 -1
|
@@ -25024,8 +25024,9 @@ class MarkdownService {
|
|
|
25024
25024
|
// If NOT the h1 (document title)
|
|
25025
25025
|
const anchor = MarkdownUtils.textToAnchor(text);
|
|
25026
25026
|
if (isNotNilOrBlank(anchor)) {
|
|
25027
|
+
const pageBreak = level < 2;
|
|
25027
25028
|
console.debug(`[markdown-service] Heading ${level} '${text}' with anchor ${anchor}`);
|
|
25028
|
-
const link = `<a id="${anchor}" class="anchor" aria-hidden="true" href="#${anchor}"></a>`;
|
|
25029
|
+
const link = `<a id="${anchor}" class="anchor ${pageBreak ? 'page-break' : ''}" aria-hidden="true" href="#${anchor}"></a>`;
|
|
25029
25030
|
return this._defaultRenderer.heading(link + text, level, raw);
|
|
25030
25031
|
}
|
|
25031
25032
|
return this._defaultRenderer.heading(text, level, raw);
|
|
@@ -25107,13 +25108,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
25107
25108
|
class AppMarkdownContent {
|
|
25108
25109
|
cd;
|
|
25109
25110
|
element;
|
|
25111
|
+
_document;
|
|
25110
25112
|
route;
|
|
25113
|
+
_printIframe;
|
|
25114
|
+
_clickSubscription;
|
|
25111
25115
|
navController = inject(NavController);
|
|
25112
25116
|
settings = inject(LocalSettingsService);
|
|
25113
25117
|
translate = inject(TranslateService);
|
|
25114
25118
|
network = inject(NetworkService);
|
|
25115
25119
|
markdownService = inject(MarkdownService);
|
|
25116
|
-
_clickSubscription;
|
|
25117
25120
|
loading = true;
|
|
25118
25121
|
error = undefined;
|
|
25119
25122
|
baseUrl;
|
|
@@ -25146,10 +25149,11 @@ class AppMarkdownContent {
|
|
|
25146
25149
|
enableNavigationHistory = true;
|
|
25147
25150
|
updateRouteLocation = false;
|
|
25148
25151
|
markdownUrlChange = new EventEmitter();
|
|
25149
|
-
constructor(cd, element, route // Modal editor give 'null'
|
|
25152
|
+
constructor(cd, element, _document, route // Modal editor give 'null'
|
|
25150
25153
|
) {
|
|
25151
25154
|
this.cd = cd;
|
|
25152
25155
|
this.element = element;
|
|
25156
|
+
this._document = _document;
|
|
25153
25157
|
this.route = route;
|
|
25154
25158
|
// TODO: for DEV only
|
|
25155
25159
|
//this.debug = !environment.production;
|
|
@@ -25174,6 +25178,88 @@ class AppMarkdownContent {
|
|
|
25174
25178
|
get canGoBack() {
|
|
25175
25179
|
return isNotEmptyArray(this._navHistory);
|
|
25176
25180
|
}
|
|
25181
|
+
print(event) {
|
|
25182
|
+
console.debug('[markdown] Print');
|
|
25183
|
+
if (!this.element) {
|
|
25184
|
+
console.error('Erreur : Élément non trouvé.');
|
|
25185
|
+
return;
|
|
25186
|
+
}
|
|
25187
|
+
// Récupérer le contenu HTML depuis le composant
|
|
25188
|
+
const content = this.element.nativeElement.innerHTML;
|
|
25189
|
+
// Créer une iframe pour gérer l'impression
|
|
25190
|
+
this._printIframe = this.createPrintHiddenIframe(content);
|
|
25191
|
+
// Lancer l'impression après un court délai (le temps que l'iframe charge)
|
|
25192
|
+
this._printIframe.contentWindow.addEventListener('load', () => {
|
|
25193
|
+
this._printIframe.contentWindow?.window.print();
|
|
25194
|
+
this._printIframe.remove();
|
|
25195
|
+
});
|
|
25196
|
+
setTimeout(() => {
|
|
25197
|
+
//this._printIframe.contentWindow?.window.print();
|
|
25198
|
+
// Supprimer l'iframe après impression
|
|
25199
|
+
//this._document.body.removeChild(this._printIframe);
|
|
25200
|
+
}, 500);
|
|
25201
|
+
}
|
|
25202
|
+
/* -- protected functions -- */
|
|
25203
|
+
createPrintHiddenIframe(html, style) {
|
|
25204
|
+
// Create a iframe with '?print-pdf'
|
|
25205
|
+
const iframe = this._document.createElement('iframe');
|
|
25206
|
+
iframe.classList.add('cdk-visually-hidden');
|
|
25207
|
+
iframe.style.width = '100%';
|
|
25208
|
+
iframe.style.height = '100%';
|
|
25209
|
+
this._document.body.appendChild(iframe);
|
|
25210
|
+
// Charger le contenu HTML dans l'iframe
|
|
25211
|
+
const iframeDocument = iframe.contentDocument || iframe.contentWindow?.document;
|
|
25212
|
+
if (iframeDocument) {
|
|
25213
|
+
iframeDocument.open();
|
|
25214
|
+
iframeDocument.write(`
|
|
25215
|
+
<html>
|
|
25216
|
+
<head>
|
|
25217
|
+
<title>${this._document.title}</title>
|
|
25218
|
+
<style>
|
|
25219
|
+
hr {
|
|
25220
|
+
page-break-before: always;
|
|
25221
|
+
border: 0 !important;
|
|
25222
|
+
padding: 0 !important;
|
|
25223
|
+
}
|
|
25224
|
+
body {
|
|
25225
|
+
font-family: 'Roboto', Helvetica, Arial, sans-serif;
|
|
25226
|
+
margin: 0;
|
|
25227
|
+
padding: 20px;
|
|
25228
|
+
}
|
|
25229
|
+
</style>
|
|
25230
|
+
</head>
|
|
25231
|
+
<body>
|
|
25232
|
+
${html}
|
|
25233
|
+
</body>
|
|
25234
|
+
</html>
|
|
25235
|
+
`);
|
|
25236
|
+
iframeDocument.close();
|
|
25237
|
+
}
|
|
25238
|
+
// Inject App style
|
|
25239
|
+
this.injectAppStylesIntoIframe(iframe);
|
|
25240
|
+
return iframe;
|
|
25241
|
+
}
|
|
25242
|
+
injectAppStylesIntoIframe(iframe) {
|
|
25243
|
+
const iframeDocument = iframe.contentDocument || iframe.contentWindow?.document;
|
|
25244
|
+
if (iframeDocument) {
|
|
25245
|
+
// Récupérer tous les styles (liens CSS)
|
|
25246
|
+
const links = Array.from(this._document.querySelectorAll('link[rel="stylesheet"]'));
|
|
25247
|
+
links.forEach((link) => {
|
|
25248
|
+
const newLink = iframeDocument.createElement('link');
|
|
25249
|
+
newLink.rel = 'stylesheet';
|
|
25250
|
+
newLink.href = link.getAttribute('href');
|
|
25251
|
+
if (newLink.href)
|
|
25252
|
+
iframeDocument.head.appendChild(newLink);
|
|
25253
|
+
});
|
|
25254
|
+
// Récupérer tous les `styles` en ligne
|
|
25255
|
+
const inlineStyles = Array.from(this._document.querySelectorAll('style'));
|
|
25256
|
+
inlineStyles.forEach((style) => {
|
|
25257
|
+
const newStyle = iframeDocument.createElement('style');
|
|
25258
|
+
newStyle.innerHTML = style.innerHTML;
|
|
25259
|
+
iframeDocument.head.appendChild(newStyle);
|
|
25260
|
+
});
|
|
25261
|
+
}
|
|
25262
|
+
}
|
|
25177
25263
|
setData(value, opts) {
|
|
25178
25264
|
const anchor = opts?.anchor || null;
|
|
25179
25265
|
if (this._data !== value || this._anchor !== anchor) {
|
|
@@ -25310,13 +25396,16 @@ class AppMarkdownContent {
|
|
|
25310
25396
|
this.error = null;
|
|
25311
25397
|
this.cd.markForCheck();
|
|
25312
25398
|
}
|
|
25313
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppMarkdownContent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$5.ActivatedRoute, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
25314
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AppMarkdownContent, selector: "app-markdown-content", inputs: { data: "data", src: "src", anchor: "anchor", debug: ["debug", "debug", booleanAttribute], showError: ["showError", "showError", booleanAttribute], animated: ["animated", "animated", booleanAttribute], enableNavigationHistory: ["enableNavigationHistory", "enableNavigationHistory", booleanAttribute], updateRouteLocation: ["updateRouteLocation", "updateRouteLocation", booleanAttribute] }, outputs: { markdownUrlChange: "markdownUrlChange" }, ngImport: i0, template: "<app-debug *ngIf=\"debug\">\n <ion-grid class=\"ion-no-padding\">\n <ion-row>\n <ion-col>\n loading: {{ loading }}\n <br />\n error: {{ error }}\n <br />\n <br />\n baseUrl: {{ baseUrl }}\n <br />\n markdownUrl: {{ src }}\n <br />\n markdownFragment: {{ _anchor }}\n <br />\n markdownContent: {{ data }}\n <br />\n </ion-col>\n </ion-row>\n </ion-grid>\n</app-debug>\n\n<!-- error -->\n@if (showError && error; as error) {\n <ion-item lines=\"none\" @slideDownAnimation>\n <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n </ion-item>\n} @else {\n @if (data) {\n <markdown [data]=\"data\" (ready)=\"onReady()\" emoji></markdown>\n } @else if (src) {\n <markdown [src]=\"src\" (error)=\"onLoadError($event)\" (ready)=\"onReady()\" emoji></markdown>\n }\n}\n\n<!-- loading spinner -->\n@if (loading) {\n <div class=\"loading-spinner\">\n <ng-container *ngTemplateOutlet=\"loadingParagraph\"></ng-container>\n <ng-container *ngTemplateOutlet=\"loadingParagraph\"></ng-container>\n <ng-container *ngTemplateOutlet=\"loadingParagraph\"></ng-container>\n </div>\n}\n\n<ng-template #loadingParagraph>\n <p>\n <ion-skeleton-text [animated]=\"animated\" style=\"width: 75%; margin-inline-start: 5%\"></ion-skeleton-text>\n <ion-skeleton-text [animated]=\"animated\" style=\"width: 80%\"></ion-skeleton-text>\n <ion-skeleton-text [animated]=\"animated\" style=\"width: 80%\"></ion-skeleton-text>\n <ion-skeleton-text [animated]=\"animated\" style=\"width: 80%\"></ion-skeleton-text>\n <ion-skeleton-text [animated]=\"animated\" style=\"width: 80%\"></ion-skeleton-text>\n <ion-skeleton-text [animated]=\"animated\" style=\"width: 80%\"></ion-skeleton-text>\n </p>\n</ng-template>\n", styles: [":host ::ng-deep markdown div.logo{display:none;visibility:hidden}:host ::ng-deep markdown blockquote{--block-margin: 16px 0;--block-padding: 4px 16px;--box-shadow: 0 2px 4px rgba(0, 0, 0, .4);display:block;position:relative;width:70%;margin:var(--block-margin);padding:var(--block-padding);font-style:italic;background:var(--ion-color-light);box-shadow:var(--box-shadow)}:host ::ng-deep markdown code{color:rgba(var(--ion-text-color-rgb),.7);background:rgba(var(--ion-text-color-rgb),.03);font-size:.9rem;letter-spacing:-.5px}.loading-spinner ion-skeleton-text{width:100%;height:1.5em}.loading-spinner p{margin-top:var(ion-padding, 16px)}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i4$1.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "component", type: DebugComponent, selector: "app-debug", inputs: ["titlePrefix", "title", "enable", "expanded"] }, { kind: "directive", type: MarkdownDirective, selector: "markdown,[markdown]" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [slideDownAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
25399
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppMarkdownContent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: DOCUMENT }, { token: i1$5.ActivatedRoute, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
25400
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AppMarkdownContent, selector: "app-markdown-content", inputs: { data: "data", src: "src", anchor: "anchor", debug: ["debug", "debug", booleanAttribute], showError: ["showError", "showError", booleanAttribute], animated: ["animated", "animated", booleanAttribute], enableNavigationHistory: ["enableNavigationHistory", "enableNavigationHistory", booleanAttribute], updateRouteLocation: ["updateRouteLocation", "updateRouteLocation", booleanAttribute] }, outputs: { markdownUrlChange: "markdownUrlChange" }, ngImport: i0, template: "<app-debug *ngIf=\"debug\">\n <ion-grid class=\"ion-no-padding\">\n <ion-row>\n <ion-col>\n loading: {{ loading }}\n <br />\n error: {{ error }}\n <br />\n <br />\n baseUrl: {{ baseUrl }}\n <br />\n markdownUrl: {{ src }}\n <br />\n markdownFragment: {{ _anchor }}\n <br />\n markdownContent: {{ data }}\n <br />\n </ion-col>\n </ion-row>\n </ion-grid>\n</app-debug>\n\n<!-- error -->\n@if (showError && error; as error) {\n <ion-item lines=\"none\" @slideDownAnimation>\n <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n </ion-item>\n} @else {\n @if (data) {\n <markdown [data]=\"data\" (ready)=\"onReady()\" emoji></markdown>\n } @else if (src) {\n <markdown [src]=\"src\" (error)=\"onLoadError($event)\" (ready)=\"onReady()\" emoji></markdown>\n }\n}\n\n<!-- loading spinner -->\n@if (loading) {\n <div class=\"loading-spinner\">\n <ng-container *ngTemplateOutlet=\"loadingParagraph\"></ng-container>\n <ng-container *ngTemplateOutlet=\"loadingParagraph\"></ng-container>\n <ng-container *ngTemplateOutlet=\"loadingParagraph\"></ng-container>\n </div>\n}\n\n<ng-template #loadingParagraph>\n <p>\n <ion-skeleton-text [animated]=\"animated\" style=\"width: 75%; margin-inline-start: 5%\"></ion-skeleton-text>\n <ion-skeleton-text [animated]=\"animated\" style=\"width: 80%\"></ion-skeleton-text>\n <ion-skeleton-text [animated]=\"animated\" style=\"width: 80%\"></ion-skeleton-text>\n <ion-skeleton-text [animated]=\"animated\" style=\"width: 80%\"></ion-skeleton-text>\n <ion-skeleton-text [animated]=\"animated\" style=\"width: 80%\"></ion-skeleton-text>\n <ion-skeleton-text [animated]=\"animated\" style=\"width: 80%\"></ion-skeleton-text>\n </p>\n</ng-template>\n", styles: [":host ::ng-deep markdown div.logo{display:none;visibility:hidden}:host ::ng-deep markdown hr{border-top:1px solid var(--ion-color-medium-tint, #dcdcde);margin:10px 0}:host ::ng-deep markdown blockquote{--block-margin: 16px 0;--block-padding: 4px 16px;--box-shadow: 0 2px 4px rgba(0, 0, 0, .4);display:block;position:relative;width:70%;margin:var(--block-margin);padding:var(--block-padding);font-style:italic;background:var(--ion-color-light);box-shadow:var(--box-shadow)}:host ::ng-deep markdown code{color:rgba(var(--ion-text-color-rgb),.7);background:rgba(var(--ion-text-color-rgb),.03);font-size:.9rem;letter-spacing:-.5px}.loading-spinner ion-skeleton-text{width:100%;height:1.5em}.loading-spinner p{margin-top:var(ion-padding, 16px)}@media print{hr{page-break-before:always;border:none;margin:0}body{font-family:Roboto,Helvetica,Arial,sans-serif;margin:0;padding:20px}}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i4$1.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "component", type: DebugComponent, selector: "app-debug", inputs: ["titlePrefix", "title", "enable", "expanded"] }, { kind: "directive", type: MarkdownDirective, selector: "markdown,[markdown]" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [slideDownAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
25315
25401
|
}
|
|
25316
25402
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppMarkdownContent, decorators: [{
|
|
25317
25403
|
type: Component,
|
|
25318
|
-
args: [{ selector: 'app-markdown-content', changeDetection: ChangeDetectionStrategy.OnPush, animations: [slideDownAnimation], template: "<app-debug *ngIf=\"debug\">\n <ion-grid class=\"ion-no-padding\">\n <ion-row>\n <ion-col>\n loading: {{ loading }}\n <br />\n error: {{ error }}\n <br />\n <br />\n baseUrl: {{ baseUrl }}\n <br />\n markdownUrl: {{ src }}\n <br />\n markdownFragment: {{ _anchor }}\n <br />\n markdownContent: {{ data }}\n <br />\n </ion-col>\n </ion-row>\n </ion-grid>\n</app-debug>\n\n<!-- error -->\n@if (showError && error; as error) {\n <ion-item lines=\"none\" @slideDownAnimation>\n <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n </ion-item>\n} @else {\n @if (data) {\n <markdown [data]=\"data\" (ready)=\"onReady()\" emoji></markdown>\n } @else if (src) {\n <markdown [src]=\"src\" (error)=\"onLoadError($event)\" (ready)=\"onReady()\" emoji></markdown>\n }\n}\n\n<!-- loading spinner -->\n@if (loading) {\n <div class=\"loading-spinner\">\n <ng-container *ngTemplateOutlet=\"loadingParagraph\"></ng-container>\n <ng-container *ngTemplateOutlet=\"loadingParagraph\"></ng-container>\n <ng-container *ngTemplateOutlet=\"loadingParagraph\"></ng-container>\n </div>\n}\n\n<ng-template #loadingParagraph>\n <p>\n <ion-skeleton-text [animated]=\"animated\" style=\"width: 75%; margin-inline-start: 5%\"></ion-skeleton-text>\n <ion-skeleton-text [animated]=\"animated\" style=\"width: 80%\"></ion-skeleton-text>\n <ion-skeleton-text [animated]=\"animated\" style=\"width: 80%\"></ion-skeleton-text>\n <ion-skeleton-text [animated]=\"animated\" style=\"width: 80%\"></ion-skeleton-text>\n <ion-skeleton-text [animated]=\"animated\" style=\"width: 80%\"></ion-skeleton-text>\n <ion-skeleton-text [animated]=\"animated\" style=\"width: 80%\"></ion-skeleton-text>\n </p>\n</ng-template>\n", styles: [":host ::ng-deep markdown div.logo{display:none;visibility:hidden}:host ::ng-deep markdown blockquote{--block-margin: 16px 0;--block-padding: 4px 16px;--box-shadow: 0 2px 4px rgba(0, 0, 0, .4);display:block;position:relative;width:70%;margin:var(--block-margin);padding:var(--block-padding);font-style:italic;background:var(--ion-color-light);box-shadow:var(--box-shadow)}:host ::ng-deep markdown code{color:rgba(var(--ion-text-color-rgb),.7);background:rgba(var(--ion-text-color-rgb),.03);font-size:.9rem;letter-spacing:-.5px}.loading-spinner ion-skeleton-text{width:100%;height:1.5em}.loading-spinner p{margin-top:var(ion-padding, 16px)}\n"] }]
|
|
25319
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type:
|
|
25404
|
+
args: [{ selector: 'app-markdown-content', changeDetection: ChangeDetectionStrategy.OnPush, animations: [slideDownAnimation], template: "<app-debug *ngIf=\"debug\">\n <ion-grid class=\"ion-no-padding\">\n <ion-row>\n <ion-col>\n loading: {{ loading }}\n <br />\n error: {{ error }}\n <br />\n <br />\n baseUrl: {{ baseUrl }}\n <br />\n markdownUrl: {{ src }}\n <br />\n markdownFragment: {{ _anchor }}\n <br />\n markdownContent: {{ data }}\n <br />\n </ion-col>\n </ion-row>\n </ion-grid>\n</app-debug>\n\n<!-- error -->\n@if (showError && error; as error) {\n <ion-item lines=\"none\" @slideDownAnimation>\n <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n </ion-item>\n} @else {\n @if (data) {\n <markdown [data]=\"data\" (ready)=\"onReady()\" emoji></markdown>\n } @else if (src) {\n <markdown [src]=\"src\" (error)=\"onLoadError($event)\" (ready)=\"onReady()\" emoji></markdown>\n }\n}\n\n<!-- loading spinner -->\n@if (loading) {\n <div class=\"loading-spinner\">\n <ng-container *ngTemplateOutlet=\"loadingParagraph\"></ng-container>\n <ng-container *ngTemplateOutlet=\"loadingParagraph\"></ng-container>\n <ng-container *ngTemplateOutlet=\"loadingParagraph\"></ng-container>\n </div>\n}\n\n<ng-template #loadingParagraph>\n <p>\n <ion-skeleton-text [animated]=\"animated\" style=\"width: 75%; margin-inline-start: 5%\"></ion-skeleton-text>\n <ion-skeleton-text [animated]=\"animated\" style=\"width: 80%\"></ion-skeleton-text>\n <ion-skeleton-text [animated]=\"animated\" style=\"width: 80%\"></ion-skeleton-text>\n <ion-skeleton-text [animated]=\"animated\" style=\"width: 80%\"></ion-skeleton-text>\n <ion-skeleton-text [animated]=\"animated\" style=\"width: 80%\"></ion-skeleton-text>\n <ion-skeleton-text [animated]=\"animated\" style=\"width: 80%\"></ion-skeleton-text>\n </p>\n</ng-template>\n", styles: [":host ::ng-deep markdown div.logo{display:none;visibility:hidden}:host ::ng-deep markdown hr{border-top:1px solid var(--ion-color-medium-tint, #dcdcde);margin:10px 0}:host ::ng-deep markdown blockquote{--block-margin: 16px 0;--block-padding: 4px 16px;--box-shadow: 0 2px 4px rgba(0, 0, 0, .4);display:block;position:relative;width:70%;margin:var(--block-margin);padding:var(--block-padding);font-style:italic;background:var(--ion-color-light);box-shadow:var(--box-shadow)}:host ::ng-deep markdown code{color:rgba(var(--ion-text-color-rgb),.7);background:rgba(var(--ion-text-color-rgb),.03);font-size:.9rem;letter-spacing:-.5px}.loading-spinner ion-skeleton-text{width:100%;height:1.5em}.loading-spinner p{margin-top:var(ion-padding, 16px)}@media print{hr{page-break-before:always;border:none;margin:0}body{font-family:Roboto,Helvetica,Arial,sans-serif;margin:0;padding:20px}}\n"] }]
|
|
25405
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: Document, decorators: [{
|
|
25406
|
+
type: Inject,
|
|
25407
|
+
args: [DOCUMENT]
|
|
25408
|
+
}] }, { type: i1$5.ActivatedRoute, decorators: [{
|
|
25320
25409
|
type: Optional
|
|
25321
25410
|
}] }], propDecorators: { data: [{
|
|
25322
25411
|
type: Input
|
|
@@ -25356,6 +25445,7 @@ class AppMarkdownModal {
|
|
|
25356
25445
|
debug;
|
|
25357
25446
|
title;
|
|
25358
25447
|
showError = true;
|
|
25448
|
+
canPrint = false;
|
|
25359
25449
|
markdownContent;
|
|
25360
25450
|
markdownUrl;
|
|
25361
25451
|
static async show(modalCtrl, options) {
|
|
@@ -25392,17 +25482,19 @@ class AppMarkdownModal {
|
|
|
25392
25482
|
}
|
|
25393
25483
|
}
|
|
25394
25484
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppMarkdownModal, deps: [{ token: i0.Injector }, { token: i2$1.ModalController }, { token: PlatformService }, { token: LocalSettingsService }, { token: i1$1.TranslateService }, { token: NetworkService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
25395
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AppMarkdownModal, selector: "app-markdown-modal", inputs: { debug: "debug", title: "title", showError: "showError", markdownContent: "markdownContent", markdownUrl: "markdownUrl" }, ngImport: i0, template: "@if (title) {\n <app-modal-toolbar color=\"light\" [title]=\"title | translate\" (cancel)=\"close($event)\">\n @if (content.canGoBack) {\n <ion-button slot=\"start\" class=\"back-button\" (click)=\"goBack($event, content)\" routerDirection=\"back\">\n <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n </ion-button>\n }\n </app-modal-toolbar>\n}\n\n<ion-content class=\"ion-padding\">\n <app-markdown-content\n #content\n [src]=\"markdownUrl\"\n [data]=\"markdownContent\"\n [showError]=\"showError\"\n [debug]=\"debug\"\n [updateRouteLocation]=\"false\"\n ></app-markdown-content>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n <ion-toolbar>\n <ion-row class=\"ion-no-padding\">\n <ion-col></ion-col>\n <ion-col size=\"auto\">\n <ion-button fill=\"solid\" color=\"tertiary\" (click)=\"close()\">{{ 'COMMON.BTN_CLOSE' | translate }}</ion-button>\n </ion-col>\n </ion-row>\n </ion-toolbar>\n</ion-footer>\n", dependencies: [{ kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: ModalToolbarComponent, selector: "app-modal-toolbar", inputs: ["modalName", "title", "color", "showSpinner", "canValidate", "validateIcon"], outputs: ["cancel", "validate"] }, { kind: "component", type: AppMarkdownContent, selector: "app-markdown-content", inputs: ["data", "src", "anchor", "debug", "showError", "animated", "enableNavigationHistory", "updateRouteLocation"], outputs: ["markdownUrlChange"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
25485
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AppMarkdownModal, selector: "app-markdown-modal", inputs: { debug: "debug", title: "title", showError: "showError", canPrint: "canPrint", markdownContent: "markdownContent", markdownUrl: "markdownUrl" }, ngImport: i0, template: "@if (title || canPrint) {\n <app-modal-toolbar color=\"light\" [title]=\"title | translate\" (cancel)=\"close($event)\">\n @if (content.canGoBack) {\n <ion-button slot=\"start\" class=\"back-button\" (click)=\"goBack($event, content)\" routerDirection=\"back\">\n <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n </ion-button>\n }\n @if (canPrint) {\n <ion-button slot=\"end\" class=\"back-button\" (click)=\"content.print($event)\" routerDirection=\"back\">\n <ion-icon slot=\"icon-only\" name=\"print\"></ion-icon>\n </ion-button>\n }\n </app-modal-toolbar>\n}\n\n<ion-content class=\"ion-padding\">\n <app-markdown-content\n #content\n [src]=\"markdownUrl\"\n [data]=\"markdownContent\"\n [showError]=\"showError\"\n [debug]=\"debug\"\n [updateRouteLocation]=\"false\"\n ></app-markdown-content>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n <ion-toolbar>\n <ion-row class=\"ion-no-padding\">\n <ion-col></ion-col>\n <ion-col size=\"auto\">\n <ion-button fill=\"solid\" color=\"tertiary\" (click)=\"close()\">{{ 'COMMON.BTN_CLOSE' | translate }}</ion-button>\n </ion-col>\n </ion-row>\n </ion-toolbar>\n</ion-footer>\n", dependencies: [{ kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: ModalToolbarComponent, selector: "app-modal-toolbar", inputs: ["modalName", "title", "color", "showSpinner", "canValidate", "validateIcon"], outputs: ["cancel", "validate"] }, { kind: "component", type: AppMarkdownContent, selector: "app-markdown-content", inputs: ["data", "src", "anchor", "debug", "showError", "animated", "enableNavigationHistory", "updateRouteLocation"], outputs: ["markdownUrlChange"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
25396
25486
|
}
|
|
25397
25487
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppMarkdownModal, decorators: [{
|
|
25398
25488
|
type: Component,
|
|
25399
|
-
args: [{ selector: 'app-markdown-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (title) {\n <app-modal-toolbar color=\"light\" [title]=\"title | translate\" (cancel)=\"close($event)\">\n @if (content.canGoBack) {\n <ion-button slot=\"start\" class=\"back-button\" (click)=\"goBack($event, content)\" routerDirection=\"back\">\n <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n </ion-button>\n }\n </app-modal-toolbar>\n}\n\n<ion-content class=\"ion-padding\">\n <app-markdown-content\n #content\n [src]=\"markdownUrl\"\n [data]=\"markdownContent\"\n [showError]=\"showError\"\n [debug]=\"debug\"\n [updateRouteLocation]=\"false\"\n ></app-markdown-content>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n <ion-toolbar>\n <ion-row class=\"ion-no-padding\">\n <ion-col></ion-col>\n <ion-col size=\"auto\">\n <ion-button fill=\"solid\" color=\"tertiary\" (click)=\"close()\">{{ 'COMMON.BTN_CLOSE' | translate }}</ion-button>\n </ion-col>\n </ion-row>\n </ion-toolbar>\n</ion-footer>\n" }]
|
|
25489
|
+
args: [{ selector: 'app-markdown-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (title || canPrint) {\n <app-modal-toolbar color=\"light\" [title]=\"title | translate\" (cancel)=\"close($event)\">\n @if (content.canGoBack) {\n <ion-button slot=\"start\" class=\"back-button\" (click)=\"goBack($event, content)\" routerDirection=\"back\">\n <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n </ion-button>\n }\n @if (canPrint) {\n <ion-button slot=\"end\" class=\"back-button\" (click)=\"content.print($event)\" routerDirection=\"back\">\n <ion-icon slot=\"icon-only\" name=\"print\"></ion-icon>\n </ion-button>\n }\n </app-modal-toolbar>\n}\n\n<ion-content class=\"ion-padding\">\n <app-markdown-content\n #content\n [src]=\"markdownUrl\"\n [data]=\"markdownContent\"\n [showError]=\"showError\"\n [debug]=\"debug\"\n [updateRouteLocation]=\"false\"\n ></app-markdown-content>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n <ion-toolbar>\n <ion-row class=\"ion-no-padding\">\n <ion-col></ion-col>\n <ion-col size=\"auto\">\n <ion-button fill=\"solid\" color=\"tertiary\" (click)=\"close()\">{{ 'COMMON.BTN_CLOSE' | translate }}</ion-button>\n </ion-col>\n </ion-row>\n </ion-toolbar>\n</ion-footer>\n" }]
|
|
25400
25490
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i2$1.ModalController }, { type: PlatformService }, { type: LocalSettingsService }, { type: i1$1.TranslateService }, { type: NetworkService }, { type: i0.ChangeDetectorRef }], propDecorators: { debug: [{
|
|
25401
25491
|
type: Input
|
|
25402
25492
|
}], title: [{
|
|
25403
25493
|
type: Input
|
|
25404
25494
|
}], showError: [{
|
|
25405
25495
|
type: Input
|
|
25496
|
+
}], canPrint: [{
|
|
25497
|
+
type: Input
|
|
25406
25498
|
}], markdownContent: [{
|
|
25407
25499
|
type: Input
|
|
25408
25500
|
}], markdownUrl: [{
|
|
@@ -45245,8 +45337,8 @@ class MarkdownTestPage {
|
|
|
45245
45337
|
cd;
|
|
45246
45338
|
markdownModalTitle = 'Markdown modal';
|
|
45247
45339
|
// URL from a starting markdown
|
|
45248
|
-
markdownUrl = 'http://localhost:3000/user-manual/index.md';
|
|
45249
|
-
|
|
45340
|
+
//protected markdownUrl = 'http://localhost:3000/user-manual/index.md';
|
|
45341
|
+
markdownUrl = 'https://gitlab.ifremer.fr/sih-public/sumaris/sumaris-doc/-/raw/master/projects/pifil/man/quick_start_guide_fr.md';
|
|
45250
45342
|
//protected markdownUrl = 'https://gitlab.ifremer.fr/sih-public/sumaris/sumaris-doc/-/raw/master/README.md';
|
|
45251
45343
|
//protected markdownUrl = 'https://gitlab.ifremer.fr/sih-public/sumaris/sumaris-doc/-/raw/master/model/index.md';
|
|
45252
45344
|
//protected markdownUrl = 'https://gitlab.ifremer.fr/sih-public/sumaris/sumaris-doc/-/raw/master/model/administration/index.md';
|
|
@@ -45268,6 +45360,7 @@ class MarkdownTestPage {
|
|
|
45268
45360
|
return AppMarkdownModal.show(this.modalCtrl, {
|
|
45269
45361
|
title: this.markdownModalTitle,
|
|
45270
45362
|
markdownUrl: this.markdownUrl,
|
|
45363
|
+
canPrint: true,
|
|
45271
45364
|
});
|
|
45272
45365
|
}
|
|
45273
45366
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MarkdownTestPage, deps: [{ token: i2$1.ModalController }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|