@covalent/highlight 4.0.0-beta.5 → 4.1.0-develop.11
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 +33 -151
- package/_highlight-theme.scss +1 -1
- package/covalent-highlight.d.ts +1 -1
- package/esm2020/covalent-highlight.mjs +2 -2
- package/esm2020/lib/copy-code-button/copy-code-button.component.mjs +55 -0
- package/esm2020/lib/highlight.component.mjs +178 -0
- package/esm2020/lib/highlight.module.mjs +39 -0
- package/esm2020/public_api.mjs +4 -4
- package/fesm2015/covalent-highlight.mjs +51 -104
- package/fesm2015/covalent-highlight.mjs.map +1 -1
- package/fesm2020/covalent-highlight.mjs +87 -118
- package/fesm2020/covalent-highlight.mjs.map +1 -1
- package/{copy-code-button → lib/copy-code-button}/copy-code-button.component.d.ts +1 -1
- package/{highlight.component.d.ts → lib/highlight.component.d.ts} +3 -3
- package/{highlight.module.d.ts → lib/highlight.module.d.ts} +0 -0
- package/package.json +11 -23
- package/public_api.d.ts +3 -3
- package/copy-code-button/copy-code-button.component.scss +0 -0
- package/esm2020/copy-code-button/copy-code-button.component.mjs +0 -72
- package/esm2020/highlight.component.mjs +0 -207
- package/esm2020/highlight.module.mjs +0 -24
- package/esm2020/index.mjs +0 -2
- package/highlight.component.scss +0 -52
- package/index.d.ts +0 -1
|
@@ -2,18 +2,17 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { Component, Input, ViewChild, HostListener, EventEmitter, SecurityContext, Output, NgModule } from '@angular/core';
|
|
3
3
|
import hljs from 'highlight.js';
|
|
4
4
|
import * as i1$1 from '@angular/platform-browser';
|
|
5
|
-
import * as i2$1 from '@angular/common';
|
|
6
|
-
import { CommonModule } from '@angular/common';
|
|
7
5
|
import * as i1 from '@angular/material/button';
|
|
8
6
|
import { MatButtonModule } from '@angular/material/button';
|
|
9
|
-
import * as i2 from '@angular/
|
|
7
|
+
import * as i2 from '@angular/material/icon';
|
|
8
|
+
import { MatIconModule } from '@angular/material/icon';
|
|
9
|
+
import * as i3 from '@angular/cdk/clipboard';
|
|
10
10
|
import { ClipboardModule } from '@angular/cdk/clipboard';
|
|
11
|
-
import * as
|
|
11
|
+
import * as i4 from '@angular/material/tooltip';
|
|
12
12
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
13
|
-
import * as
|
|
14
|
-
import {
|
|
13
|
+
import * as i3$1 from '@angular/common';
|
|
14
|
+
import { CommonModule } from '@angular/common';
|
|
15
15
|
|
|
16
|
-
const _c0$1 = ["tooltip"];
|
|
17
16
|
class TdCopyCodeButtonComponent {
|
|
18
17
|
constructor() {
|
|
19
18
|
this.copyCodeToClipboard = false;
|
|
@@ -43,37 +42,12 @@ class TdCopyCodeButtonComponent {
|
|
|
43
42
|
}, 200);
|
|
44
43
|
}
|
|
45
44
|
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
i0.ɵɵviewQuery(_c0$1, 5);
|
|
50
|
-
}
|
|
51
|
-
if (rf & 2) {
|
|
52
|
-
let _t;
|
|
53
|
-
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tooltip = _t.first);
|
|
54
|
-
}
|
|
55
|
-
}, hostBindings: function TdCopyCodeButtonComponent_HostBindings(rf, ctx) {
|
|
56
|
-
if (rf & 1) {
|
|
57
|
-
i0.ɵɵlistener("mouseleave", function TdCopyCodeButtonComponent_mouseleave_HostBindingHandler() { return ctx.initializeTooltip(); });
|
|
58
|
-
}
|
|
59
|
-
}, inputs: { copiedContent: "copiedContent", copyCodeToClipboard: "copyCodeToClipboard", copyCodeTooltips: "copyCodeTooltips" }, decls: 4, vars: 2, consts: [["mat-icon-button", "", 1, "copy-button", 3, "cdkCopyToClipboard", "matTooltip", "cdkCopyToClipboardCopied"], ["tooltip", "matTooltip"], ["role", "img"]], template: function TdCopyCodeButtonComponent_Template(rf, ctx) {
|
|
60
|
-
if (rf & 1) {
|
|
61
|
-
i0.ɵɵelementStart(0, "button", 0, 1);
|
|
62
|
-
i0.ɵɵlistener("cdkCopyToClipboardCopied", function TdCopyCodeButtonComponent_Template_button_cdkCopyToClipboardCopied_0_listener($event) { return ctx.textCopied($event); });
|
|
63
|
-
i0.ɵɵelementStart(2, "mat-icon", 2);
|
|
64
|
-
i0.ɵɵtext(3, "content_copy");
|
|
65
|
-
i0.ɵɵelementEnd();
|
|
66
|
-
i0.ɵɵelementEnd();
|
|
67
|
-
}
|
|
68
|
-
if (rf & 2) {
|
|
69
|
-
i0.ɵɵproperty("cdkCopyToClipboard", ctx.copiedContent)("matTooltip", ctx.copyTooltip);
|
|
70
|
-
}
|
|
71
|
-
}, directives: [i1.MatButton, i2.CdkCopyToClipboard, i3.MatTooltip, i4.MatIcon], styles: [""] });
|
|
72
|
-
(function () {
|
|
73
|
-
(typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdCopyCodeButtonComponent, [{
|
|
45
|
+
TdCopyCodeButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdCopyCodeButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
46
|
+
TdCopyCodeButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdCopyCodeButtonComponent, selector: "td-copy-code-button", inputs: { copiedContent: "copiedContent", copyCodeToClipboard: "copyCodeToClipboard", copyCodeTooltips: "copyCodeTooltips" }, host: { listeners: { "mouseleave": "initializeTooltip()" } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }], ngImport: i0, template: "<button\n mat-icon-button\n [cdkCopyToClipboard]=\"copiedContent\"\n class=\"copy-button\"\n [matTooltip]=\"copyTooltip\"\n #tooltip=\"matTooltip\"\n (cdkCopyToClipboardCopied)=\"textCopied($event)\"\n>\n <mat-icon role=\"img\">content_copy</mat-icon>\n</button>\n", styles: [""], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
|
|
47
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdCopyCodeButtonComponent, decorators: [{
|
|
74
48
|
type: Component,
|
|
75
49
|
args: [{ selector: 'td-copy-code-button', template: "<button\n mat-icon-button\n [cdkCopyToClipboard]=\"copiedContent\"\n class=\"copy-button\"\n [matTooltip]=\"copyTooltip\"\n #tooltip=\"matTooltip\"\n (cdkCopyToClipboardCopied)=\"textCopied($event)\"\n>\n <mat-icon role=\"img\">content_copy</mat-icon>\n</button>\n", styles: [""] }]
|
|
76
|
-
}],
|
|
50
|
+
}], propDecorators: { copiedContent: [{
|
|
77
51
|
type: Input
|
|
78
52
|
}], copyCodeToClipboard: [{
|
|
79
53
|
type: Input
|
|
@@ -85,25 +59,8 @@ class TdCopyCodeButtonComponent {
|
|
|
85
59
|
}], initializeTooltip: [{
|
|
86
60
|
type: HostListener,
|
|
87
61
|
args: ['mouseleave']
|
|
88
|
-
}] });
|
|
89
|
-
})();
|
|
62
|
+
}] } });
|
|
90
63
|
|
|
91
|
-
const _c0 = ["highlightComponent"];
|
|
92
|
-
const _c1 = ["copyComponent"];
|
|
93
|
-
const _c2 = ["tooltip"];
|
|
94
|
-
function TdHighlightComponent_div_4_Template(rf, ctx) {
|
|
95
|
-
if (rf & 1) {
|
|
96
|
-
i0.ɵɵelementStart(0, "div", null, 2);
|
|
97
|
-
i0.ɵɵelement(2, "td-copy-code-button", 3);
|
|
98
|
-
i0.ɵɵelementEnd();
|
|
99
|
-
}
|
|
100
|
-
if (rf & 2) {
|
|
101
|
-
const ctx_r1 = i0.ɵɵnextContext();
|
|
102
|
-
i0.ɵɵadvance(2);
|
|
103
|
-
i0.ɵɵproperty("copiedContent", ctx_r1.copyContent)("copyCodeToClipboard", ctx_r1.copyCodeToClipboard)("copyCodeTooltips", ctx_r1.copyCodeTooltips);
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
const _c3 = ["*"];
|
|
107
64
|
class TdHighlightComponent {
|
|
108
65
|
constructor(_renderer, _elementRef, _domSanitizer, cdr) {
|
|
109
66
|
this._renderer = _renderer;
|
|
@@ -198,6 +155,7 @@ class TdHighlightComponent {
|
|
|
198
155
|
this.contentReady.emit();
|
|
199
156
|
}
|
|
200
157
|
_elementFromString(codeStr) {
|
|
158
|
+
var _a;
|
|
201
159
|
// Renderer2 doesnt have a parsing method, so we have to sanitize and use [innerHTML]
|
|
202
160
|
// to parse the string into DOM element for now.
|
|
203
161
|
const preElement = this._renderer.createElement('pre');
|
|
@@ -206,16 +164,22 @@ class TdHighlightComponent {
|
|
|
206
164
|
this._renderer.appendChild(preElement, codeElement);
|
|
207
165
|
// Set .highlight class into <code> element
|
|
208
166
|
this._renderer.addClass(codeElement, 'highlight');
|
|
209
|
-
codeElement.innerHTML =
|
|
167
|
+
codeElement.innerHTML =
|
|
168
|
+
(_a = this._domSanitizer.sanitize(SecurityContext.HTML, codeStr)) !== null && _a !== void 0 ? _a : '';
|
|
210
169
|
return preElement;
|
|
211
170
|
}
|
|
212
171
|
_render(contents) {
|
|
213
172
|
// Trim leading and trailing newlines
|
|
214
|
-
contents = contents
|
|
173
|
+
contents = contents
|
|
174
|
+
.replace(/^(\s|\t)*\n+/g, '')
|
|
175
|
+
.replace(/(\s|\t)*\n+(\s|\t)*$/g, '');
|
|
215
176
|
// Split markup by line characters
|
|
216
177
|
let lines = contents.split('\n');
|
|
217
178
|
// check how much indentation is used by the first actual code line
|
|
218
|
-
const
|
|
179
|
+
const firstLineWhitespaceMatch = lines[0].match(/^(\s|\t)*/);
|
|
180
|
+
const firstLineWhitespace = firstLineWhitespaceMatch
|
|
181
|
+
? firstLineWhitespaceMatch[0]
|
|
182
|
+
: null;
|
|
219
183
|
// Remove all indentation spaces so code can be parsed correctly
|
|
220
184
|
const startingWhitespaceRegex = new RegExp('^' + firstLineWhitespace);
|
|
221
185
|
lines = lines.map(function (line) {
|
|
@@ -240,48 +204,19 @@ class TdHighlightComponent {
|
|
|
240
204
|
return highlightedCode.value;
|
|
241
205
|
}
|
|
242
206
|
}
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
i0.ɵɵviewQuery(_c0, 5);
|
|
247
|
-
i0.ɵɵviewQuery(_c1, 5);
|
|
248
|
-
i0.ɵɵviewQuery(_c2, 5);
|
|
249
|
-
}
|
|
250
|
-
if (rf & 2) {
|
|
251
|
-
let _t;
|
|
252
|
-
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.highlightComp = _t.first);
|
|
253
|
-
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.copyComp = _t.first);
|
|
254
|
-
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tooltip = _t.first);
|
|
255
|
-
}
|
|
256
|
-
}, inputs: { content: "content", copyCodeToClipboard: "copyCodeToClipboard", copyCodeTooltips: "copyCodeTooltips", codeLang: "codeLang", lang: "lang" }, outputs: { contentReady: "contentReady" }, ngContentSelectors: _c3, decls: 5, vars: 1, consts: [["highlightComponent", ""], [4, "ngIf"], ["copyComponent", ""], [3, "copiedContent", "copyCodeToClipboard", "copyCodeTooltips"]], template: function TdHighlightComponent_Template(rf, ctx) {
|
|
257
|
-
if (rf & 1) {
|
|
258
|
-
i0.ɵɵprojectionDef();
|
|
259
|
-
i0.ɵɵelementStart(0, "div");
|
|
260
|
-
i0.ɵɵelementStart(1, "div", null, 0);
|
|
261
|
-
i0.ɵɵprojection(3);
|
|
262
|
-
i0.ɵɵelementEnd();
|
|
263
|
-
i0.ɵɵtemplate(4, TdHighlightComponent_div_4_Template, 3, 3, "div", 1);
|
|
264
|
-
i0.ɵɵelementEnd();
|
|
265
|
-
}
|
|
266
|
-
if (rf & 2) {
|
|
267
|
-
i0.ɵɵadvance(4);
|
|
268
|
-
i0.ɵɵproperty("ngIf", ctx.copyCodeToClipboard);
|
|
269
|
-
}
|
|
270
|
-
}, directives: [i2$1.NgIf, TdCopyCodeButtonComponent], styles: ["[_nghost-%COMP%] {overflow-x:auto;padding:16px;display:-ms-flexbox;display:flex}[_nghost-%COMP%] pre, [_nghost-%COMP%] code, [_nghost-%COMP%] .highlight{font-family:Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace}[_nghost-%COMP%] pre{display:block;overflow-x:auto;padding:0;margin:0;background:transparent;font-family:Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;line-height:1.45;-moz-tab-size:2;-o-tab-size:2;tab-size:2;-webkit-font-smoothing:auto;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;position:relative;border-radius:2px;font-size:.8rem;width:100%}[_nghost-%COMP%] code{margin:0;padding:0;overflow-wrap:break-word;white-space:pre-wrap}[_nghost-%COMP%] .highlight{display:block;overflow-wrap:break-word;line-height:1.5;margin:0}[_nghost-%COMP%] .copy-button{border:none;background:inherit;margin-top:-8px;margin-right:-8px}"] });
|
|
271
|
-
(function () {
|
|
272
|
-
(typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdHighlightComponent, [{
|
|
207
|
+
TdHighlightComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdHighlightComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1$1.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
208
|
+
TdHighlightComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdHighlightComponent, selector: "td-highlight", inputs: { content: "content", copyCodeToClipboard: "copyCodeToClipboard", copyCodeTooltips: "copyCodeTooltips", codeLang: "codeLang", lang: "lang" }, outputs: { contentReady: "contentReady" }, viewQueries: [{ propertyName: "highlightComp", first: true, predicate: ["highlightComponent"], descendants: true }, { propertyName: "copyComp", first: true, predicate: ["copyComponent"], descendants: true }, { propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }], ngImport: i0, template: "<div>\n <div #highlightComponent>\n <ng-content></ng-content>\n </div>\n\n <div #copyComponent *ngIf=\"copyCodeToClipboard\">\n <td-copy-code-button\n [copiedContent]=\"copyContent\"\n [copyCodeToClipboard]=\"copyCodeToClipboard\"\n [copyCodeTooltips]=\"copyCodeTooltips\"\n ></td-copy-code-button>\n </div>\n</div>\n", styles: [":host ::ng-deep{overflow-x:auto;padding:16px;display:flex}:host ::ng-deep pre,:host ::ng-deep code,:host ::ng-deep .highlight{font-family:Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace}:host ::ng-deep pre{display:block;overflow-x:auto;padding:0;margin:0;background:transparent;font-family:Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;line-height:1.45;-moz-tab-size:2;tab-size:2;-webkit-font-smoothing:auto;-webkit-text-size-adjust:none;text-size-adjust:none;position:relative;border-radius:2px;font-size:.8rem;width:100%}:host ::ng-deep code{margin:0;padding:0;overflow-wrap:break-word;white-space:pre-wrap}:host ::ng-deep .highlight{display:block;overflow-wrap:break-word;line-height:1.5;margin:0}:host ::ng-deep .copy-button{border:none;background:inherit;margin-top:-8px;margin-right:-8px}\n"], components: [{ type: TdCopyCodeButtonComponent, selector: "td-copy-code-button", inputs: ["copiedContent", "copyCodeToClipboard", "copyCodeTooltips"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
209
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdHighlightComponent, decorators: [{
|
|
273
210
|
type: Component,
|
|
274
|
-
args: [{ selector: 'td-highlight', template: "<div>\n <div #highlightComponent>\n <ng-content></ng-content>\n </div>\n\n <div #copyComponent *ngIf=\"copyCodeToClipboard\">\n <td-copy-code-button\n [copiedContent]=\"copyContent\"\n [copyCodeToClipboard]=\"copyCodeToClipboard\"\n [copyCodeTooltips]=\"copyCodeTooltips\"\n ></td-copy-code-button>\n </div>\n</div>\n", styles: [":host ::ng-deep{overflow-x:auto;padding:16px;display
|
|
275
|
-
}], function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1$1.DomSanitizer }, { type: i0.ChangeDetectorRef }]; }, { content: [{
|
|
276
|
-
type: Input
|
|
277
|
-
args: ['content']
|
|
211
|
+
args: [{ selector: 'td-highlight', template: "<div>\n <div #highlightComponent>\n <ng-content></ng-content>\n </div>\n\n <div #copyComponent *ngIf=\"copyCodeToClipboard\">\n <td-copy-code-button\n [copiedContent]=\"copyContent\"\n [copyCodeToClipboard]=\"copyCodeToClipboard\"\n [copyCodeTooltips]=\"copyCodeTooltips\"\n ></td-copy-code-button>\n </div>\n</div>\n", styles: [":host ::ng-deep{overflow-x:auto;padding:16px;display:flex}:host ::ng-deep pre,:host ::ng-deep code,:host ::ng-deep .highlight{font-family:Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace}:host ::ng-deep pre{display:block;overflow-x:auto;padding:0;margin:0;background:transparent;font-family:Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;line-height:1.45;-moz-tab-size:2;tab-size:2;-webkit-font-smoothing:auto;-webkit-text-size-adjust:none;text-size-adjust:none;position:relative;border-radius:2px;font-size:.8rem;width:100%}:host ::ng-deep code{margin:0;padding:0;overflow-wrap:break-word;white-space:pre-wrap}:host ::ng-deep .highlight{display:block;overflow-wrap:break-word;line-height:1.5;margin:0}:host ::ng-deep .copy-button{border:none;background:inherit;margin-top:-8px;margin-right:-8px}\n"] }]
|
|
212
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1$1.DomSanitizer }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { content: [{
|
|
213
|
+
type: Input
|
|
278
214
|
}], copyCodeToClipboard: [{
|
|
279
215
|
type: Input
|
|
280
216
|
}], copyCodeTooltips: [{
|
|
281
217
|
type: Input
|
|
282
218
|
}], codeLang: [{
|
|
283
|
-
type: Input
|
|
284
|
-
args: ['codeLang']
|
|
219
|
+
type: Input
|
|
285
220
|
}], lang: [{
|
|
286
221
|
type: Input
|
|
287
222
|
}], contentReady: [{
|
|
@@ -295,25 +230,37 @@ class TdHighlightComponent {
|
|
|
295
230
|
}], tooltip: [{
|
|
296
231
|
type: ViewChild,
|
|
297
232
|
args: ['tooltip']
|
|
298
|
-
}] });
|
|
299
|
-
})();
|
|
233
|
+
}] } });
|
|
300
234
|
|
|
301
235
|
class CovalentHighlightModule {
|
|
302
236
|
}
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
237
|
+
CovalentHighlightModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentHighlightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
238
|
+
CovalentHighlightModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentHighlightModule, declarations: [TdHighlightComponent, TdCopyCodeButtonComponent], imports: [CommonModule,
|
|
239
|
+
ClipboardModule,
|
|
240
|
+
MatIconModule,
|
|
241
|
+
MatTooltipModule,
|
|
242
|
+
MatButtonModule], exports: [TdHighlightComponent] });
|
|
243
|
+
CovalentHighlightModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentHighlightModule, imports: [[
|
|
244
|
+
CommonModule,
|
|
245
|
+
ClipboardModule,
|
|
246
|
+
MatIconModule,
|
|
247
|
+
MatTooltipModule,
|
|
248
|
+
MatButtonModule,
|
|
249
|
+
]] });
|
|
250
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentHighlightModule, decorators: [{
|
|
308
251
|
type: NgModule,
|
|
309
252
|
args: [{
|
|
310
|
-
imports: [
|
|
253
|
+
imports: [
|
|
254
|
+
CommonModule,
|
|
255
|
+
ClipboardModule,
|
|
256
|
+
MatIconModule,
|
|
257
|
+
MatTooltipModule,
|
|
258
|
+
MatButtonModule,
|
|
259
|
+
],
|
|
311
260
|
declarations: [TdHighlightComponent, TdCopyCodeButtonComponent],
|
|
312
261
|
exports: [TdHighlightComponent],
|
|
313
262
|
}]
|
|
314
|
-
}]
|
|
315
|
-
})();
|
|
316
|
-
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(CovalentHighlightModule, { declarations: [TdHighlightComponent, TdCopyCodeButtonComponent], imports: [CommonModule, ClipboardModule, MatIconModule, MatTooltipModule, MatButtonModule], exports: [TdHighlightComponent] }); })();
|
|
263
|
+
}] });
|
|
317
264
|
|
|
318
265
|
/**
|
|
319
266
|
* Generated bundle index. Do not edit.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"covalent-highlight.mjs","sources":["../../../../src/platform/highlight/copy-code-button/copy-code-button.component.ts","../../../../src/platform/highlight/copy-code-button/copy-code-button.component.html","../../../../src/platform/highlight/highlight.component.html","../../../../src/platform/highlight/highlight.component.ts","../../../../src/platform/highlight/highlight.module.ts","../../../../src/platform/highlight/covalent-highlight.ts"],"sourcesContent":["import { Component, OnInit, Input, ViewChild, HostListener } from '@angular/core';\nimport { MatTooltip } from '@angular/material/tooltip';\n\nexport interface ICopyCodeTooltips {\n copy?: string;\n copied?: string;\n}\n\n@Component({\n selector: 'td-copy-code-button',\n templateUrl: './copy-code-button.component.html',\n styleUrls: ['./copy-code-button.component.scss'],\n})\nexport class TdCopyCodeButtonComponent {\n // private _copyCodeTooltips: ICopyCodeTooltips = {};\n @Input() copiedContent: string;\n @Input() copyCodeToClipboard: boolean = false;\n /**\n * copyCodeTooltips?: ICopyCodeTooltips\n *\n * Tooltips for copy button to copy and upon copying.\n */\n @Input() copyCodeTooltips: ICopyCodeTooltips = {};\n\n get copyTooltip(): string {\n return (this.copyCodeTooltips && this.copyCodeTooltips.copy) || 'Copy';\n }\n\n get copiedTooltip(): string {\n return (this.copyCodeTooltips && this.copyCodeTooltips.copied) || 'Copied';\n }\n\n @ViewChild('tooltip') tooltip: MatTooltip;\n\n textCopied(event: boolean): void {\n if (event) {\n this.tooltip.hide();\n this.tooltip.message = this.copiedTooltip;\n this.tooltip.show();\n }\n }\n @HostListener('mouseleave')\n initializeTooltip(): void {\n setTimeout(() => {\n this.tooltip.message = this.copyTooltip;\n }, 200);\n }\n}\n","<button\n mat-icon-button\n [cdkCopyToClipboard]=\"copiedContent\"\n class=\"copy-button\"\n [matTooltip]=\"copyTooltip\"\n #tooltip=\"matTooltip\"\n (cdkCopyToClipboardCopied)=\"textCopied($event)\"\n>\n <mat-icon role=\"img\">content_copy</mat-icon>\n</button>\n","<div>\n <div #highlightComponent>\n <ng-content></ng-content>\n </div>\n\n <div #copyComponent *ngIf=\"copyCodeToClipboard\">\n <td-copy-code-button\n [copiedContent]=\"copyContent\"\n [copyCodeToClipboard]=\"copyCodeToClipboard\"\n [copyCodeTooltips]=\"copyCodeTooltips\"\n ></td-copy-code-button>\n </div>\n</div>\n","import {\n Component,\n AfterViewInit,\n ElementRef,\n Input,\n Output,\n EventEmitter,\n Renderer2,\n SecurityContext,\n ViewChild,\n ChangeDetectorRef,\n AfterViewChecked,\n} from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { ICopyCodeTooltips } from '.';\n\nimport hljs from 'highlight.js';\n\n@Component({\n selector: 'td-highlight',\n styleUrls: ['./highlight.component.scss'],\n templateUrl: './highlight.component.html',\n})\nexport class TdHighlightComponent implements AfterViewInit, AfterViewChecked {\n private _initialized: boolean = false;\n\n private _content: string;\n private _lang: string = 'typescript';\n\n /**\n * content?: string\n *\n * Code content to be parsed as highlighted html.\n * Used to load data dynamically.\n *\n * e.g. `.html`, `.ts` , etc.\n */\n @Input('content')\n set content(content: string) {\n this._content = content;\n if (this._initialized) {\n this._loadContent(this._content);\n }\n }\n\n /**\n * copyCodeToClipboard?: boolean\n *\n * Display copy button on code snippets to copy code to clipboard.\n */\n @Input() copyCodeToClipboard: boolean = false;\n\n /**\n * copyCodeTooltips?: ICopyCodeTooltips\n *\n * Tooltips for copy button to copy and upon copying.\n */\n @Input() copyCodeTooltips: ICopyCodeTooltips = {};\n\n /**\n * lang?: string\n *\n * Language of the code content to be parsed as highlighted html.\n * Defaults to `typescript`\n *\n * e.g. `typescript`, `html` , etc.\n */\n\n @Input('codeLang')\n set codeLang(lang: string) {\n this.setLanguage(lang);\n }\n /** @deprecated - removed completely @4.0.0 */\n @Input()\n set lang(lang: string) {\n // tslint:disable-next-line: no-console\n console.warn('DEPRECATION WARNING: switch to codeLang attribute as lang attribute is deprecated.');\n this.setLanguage(lang);\n }\n\n copyContent: string;\n\n /**\n * contentReady?: function\n * Event emitted after the highlight content rendering is finished.\n */\n @Output() contentReady: EventEmitter<void> = new EventEmitter<void>();\n @ViewChild('highlightComponent') highlightComp: ElementRef;\n @ViewChild('copyComponent') copyComp: ElementRef;\n\n @ViewChild('tooltip') tooltip: MatTooltip;\n\n constructor(\n private _renderer: Renderer2,\n private _elementRef: ElementRef,\n private _domSanitizer: DomSanitizer,\n private cdr: ChangeDetectorRef,\n ) {}\n\n ngAfterViewChecked(): void {\n this.cdr.detectChanges();\n }\n\n ngAfterViewInit(): void {\n if (!this._content) {\n this._loadContent((<HTMLElement>this.highlightComp.nativeElement).textContent);\n } else {\n this._loadContent(this._content);\n }\n this._initialized = true;\n }\n\n setLanguage(lang: string): void {\n if (!lang) {\n throw new Error('Error: language attribute must be defined in TdHighlightComponent.');\n }\n this._lang = lang;\n if (this._initialized) {\n this._loadContent(this._content);\n }\n }\n\n /**\n * General method to parse a string of code into HTML Elements and load them into the container\n */\n private _loadContent(code: string): void {\n if (code && code.trim().length > 0) {\n // Clean container\n this._renderer.setProperty(this._elementRef.nativeElement, 'innerHTML', '');\n // Parse html string into actual HTML elements.\n this._elementFromString(this._render(code));\n if (this.copyCodeToClipboard) {\n this._renderer.appendChild(this._elementRef.nativeElement, this.copyComp.nativeElement);\n }\n }\n this.contentReady.emit();\n }\n\n private _elementFromString(codeStr: string): HTMLPreElement {\n // Renderer2 doesnt have a parsing method, so we have to sanitize and use [innerHTML]\n // to parse the string into DOM element for now.\n const preElement: HTMLPreElement = this._renderer.createElement('pre');\n this._renderer.appendChild(this._elementRef.nativeElement, preElement);\n const codeElement: HTMLElement = this._renderer.createElement('code');\n this._renderer.appendChild(preElement, codeElement);\n // Set .highlight class into <code> element\n this._renderer.addClass(codeElement, 'highlight');\n codeElement.innerHTML = this._domSanitizer.sanitize(SecurityContext.HTML, codeStr);\n return preElement;\n }\n\n private _render(contents: string): string {\n // Trim leading and trailing newlines\n contents = contents.replace(/^(\\s|\\t)*\\n+/g, '').replace(/(\\s|\\t)*\\n+(\\s|\\t)*$/g, '');\n // Split markup by line characters\n let lines: string[] = contents.split('\\n');\n\n // check how much indentation is used by the first actual code line\n const firstLineWhitespace: string = lines[0].match(/^(\\s|\\t)*/)[0];\n\n // Remove all indentation spaces so code can be parsed correctly\n const startingWhitespaceRegex: RegExp = new RegExp('^' + firstLineWhitespace);\n lines = lines.map(function (line: string): string {\n return line\n .replace('=\"\"', '') // remove empty values\n .replace(startingWhitespaceRegex, '')\n .replace(/\\s+$/, ''); // remove trailing white spaces\n });\n\n const codeToParse: string = lines\n .join('\\n')\n .replace(/\\{ \\{/gi, '{{')\n .replace(/\\} \\}/gi, '}}')\n .replace(/</gi, '<')\n .replace(/>/gi, '>'); // replace with < and > to render HTML in Angular\n this.copyContent = codeToParse;\n // Parse code with highlight.js depending on language\n const highlightedCode: any = hljs.highlight(this._lang, codeToParse, true);\n highlightedCode.value = highlightedCode.value\n .replace(/=<span class=\"hljs-value\">\"\"<\\/span>/gi, '')\n .replace('<head>', '')\n .replace('<head/>', '');\n return highlightedCode.value;\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ClipboardModule } from '@angular/cdk/clipboard';\nimport { TdHighlightComponent } from './highlight.component';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { MatButtonModule } from '@angular/material/button';\nimport { TdCopyCodeButtonComponent } from './copy-code-button/copy-code-button.component';\n\n@NgModule({\n imports: [CommonModule, ClipboardModule, MatIconModule, MatTooltipModule, MatButtonModule],\n declarations: [TdHighlightComponent, TdCopyCodeButtonComponent],\n exports: [TdHighlightComponent],\n})\nexport class CovalentHighlightModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"covalent-highlight.mjs","sources":["../../../../libs/angular-highlight/src/lib/copy-code-button/copy-code-button.component.ts","../../../../libs/angular-highlight/src/lib/copy-code-button/copy-code-button.component.html","../../../../libs/angular-highlight/src/lib/highlight.component.ts","../../../../libs/angular-highlight/src/lib/highlight.component.html","../../../../libs/angular-highlight/src/lib/highlight.module.ts","../../../../libs/angular-highlight/src/covalent-highlight.ts"],"sourcesContent":["import { Component, Input, ViewChild, HostListener } from '@angular/core';\nimport { MatTooltip } from '@angular/material/tooltip';\n\nexport interface ICopyCodeTooltips {\n copy?: string;\n copied?: string;\n}\n\n@Component({\n selector: 'td-copy-code-button',\n templateUrl: './copy-code-button.component.html',\n styleUrls: ['./copy-code-button.component.scss'],\n})\nexport class TdCopyCodeButtonComponent {\n // private _copyCodeTooltips: ICopyCodeTooltips = {};\n @Input() copiedContent!: string;\n @Input() copyCodeToClipboard = false;\n /**\n * copyCodeTooltips?: ICopyCodeTooltips\n *\n * Tooltips for copy button to copy and upon copying.\n */\n @Input() copyCodeTooltips?: ICopyCodeTooltips = {};\n\n get copyTooltip(): string {\n return (this.copyCodeTooltips && this.copyCodeTooltips.copy) || 'Copy';\n }\n\n get copiedTooltip(): string {\n return (this.copyCodeTooltips && this.copyCodeTooltips.copied) || 'Copied';\n }\n\n @ViewChild('tooltip') tooltip!: MatTooltip;\n\n textCopied(event: boolean): void {\n if (event) {\n this.tooltip.hide();\n this.tooltip.message = this.copiedTooltip;\n this.tooltip.show();\n }\n }\n @HostListener('mouseleave')\n initializeTooltip(): void {\n setTimeout(() => {\n this.tooltip.message = this.copyTooltip;\n }, 200);\n }\n}\n","<button\n mat-icon-button\n [cdkCopyToClipboard]=\"copiedContent\"\n class=\"copy-button\"\n [matTooltip]=\"copyTooltip\"\n #tooltip=\"matTooltip\"\n (cdkCopyToClipboardCopied)=\"textCopied($event)\"\n>\n <mat-icon role=\"img\">content_copy</mat-icon>\n</button>\n","import {\n Component,\n AfterViewInit,\n ElementRef,\n Input,\n Output,\n EventEmitter,\n Renderer2,\n SecurityContext,\n ViewChild,\n ChangeDetectorRef,\n AfterViewChecked,\n} from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { ICopyCodeTooltips } from './copy-code-button/copy-code-button.component';\n\nimport hljs from 'highlight.js';\n\n@Component({\n selector: 'td-highlight',\n styleUrls: ['./highlight.component.scss'],\n templateUrl: './highlight.component.html',\n})\nexport class TdHighlightComponent implements AfterViewInit, AfterViewChecked {\n private _initialized = false;\n\n private _content!: string;\n private _lang = 'typescript';\n\n /**\n * content?: string\n *\n * Code content to be parsed as highlighted html.\n * Used to load data dynamically.\n *\n * e.g. `.html`, `.ts` , etc.\n */\n @Input()\n set content(content: string) {\n this._content = content;\n if (this._initialized) {\n this._loadContent(this._content);\n }\n }\n\n /**\n * copyCodeToClipboard?: boolean\n *\n * Display copy button on code snippets to copy code to clipboard.\n */\n @Input() copyCodeToClipboard? = false;\n\n /**\n * copyCodeTooltips?: ICopyCodeTooltips\n *\n * Tooltips for copy button to copy and upon copying.\n */\n @Input() copyCodeTooltips?: ICopyCodeTooltips = {};\n\n /**\n * lang?: string\n *\n * Language of the code content to be parsed as highlighted html.\n * Defaults to `typescript`\n *\n * e.g. `typescript`, `html` , etc.\n */\n\n @Input()\n set codeLang(lang: string) {\n this.setLanguage(lang);\n }\n /** @deprecated - removed completely @4.0.0 */\n @Input()\n set lang(lang: string) {\n // tslint:disable-next-line: no-console\n console.warn(\n 'DEPRECATION WARNING: switch to codeLang attribute as lang attribute is deprecated.'\n );\n this.setLanguage(lang);\n }\n\n copyContent!: string;\n\n /**\n * contentReady?: function\n * Event emitted after the highlight content rendering is finished.\n */\n @Output() contentReady: EventEmitter<void> = new EventEmitter<void>();\n @ViewChild('highlightComponent') highlightComp!: ElementRef;\n @ViewChild('copyComponent') copyComp!: ElementRef;\n\n @ViewChild('tooltip') tooltip!: MatTooltip;\n\n constructor(\n private _renderer: Renderer2,\n private _elementRef: ElementRef,\n private _domSanitizer: DomSanitizer,\n private cdr: ChangeDetectorRef\n ) {}\n\n ngAfterViewChecked(): void {\n this.cdr.detectChanges();\n }\n\n ngAfterViewInit(): void {\n if (!this._content) {\n this._loadContent(\n (<HTMLElement>this.highlightComp.nativeElement).textContent\n );\n } else {\n this._loadContent(this._content);\n }\n this._initialized = true;\n }\n\n setLanguage(lang: string): void {\n if (!lang) {\n throw new Error(\n 'Error: language attribute must be defined in TdHighlightComponent.'\n );\n }\n this._lang = lang;\n if (this._initialized) {\n this._loadContent(this._content);\n }\n }\n\n /**\n * General method to parse a string of code into HTML Elements and load them into the container\n */\n private _loadContent(code: string | null): void {\n if (code && code.trim().length > 0) {\n // Clean container\n this._renderer.setProperty(\n this._elementRef.nativeElement,\n 'innerHTML',\n ''\n );\n // Parse html string into actual HTML elements.\n this._elementFromString(this._render(code));\n if (this.copyCodeToClipboard) {\n this._renderer.appendChild(\n this._elementRef.nativeElement,\n this.copyComp.nativeElement\n );\n }\n }\n this.contentReady.emit();\n }\n\n private _elementFromString(codeStr: string): HTMLPreElement {\n // Renderer2 doesnt have a parsing method, so we have to sanitize and use [innerHTML]\n // to parse the string into DOM element for now.\n const preElement: HTMLPreElement = this._renderer.createElement('pre');\n this._renderer.appendChild(this._elementRef.nativeElement, preElement);\n const codeElement: HTMLElement = this._renderer.createElement('code');\n this._renderer.appendChild(preElement, codeElement);\n // Set .highlight class into <code> element\n this._renderer.addClass(codeElement, 'highlight');\n codeElement.innerHTML =\n this._domSanitizer.sanitize(SecurityContext.HTML, codeStr) ?? '';\n return preElement;\n }\n\n private _render(contents: string): string {\n // Trim leading and trailing newlines\n contents = contents\n .replace(/^(\\s|\\t)*\\n+/g, '')\n .replace(/(\\s|\\t)*\\n+(\\s|\\t)*$/g, '');\n // Split markup by line characters\n let lines: string[] = contents.split('\\n');\n\n // check how much indentation is used by the first actual code line\n const firstLineWhitespaceMatch = lines[0].match(/^(\\s|\\t)*/);\n const firstLineWhitespace = firstLineWhitespaceMatch\n ? firstLineWhitespaceMatch[0]\n : null;\n\n // Remove all indentation spaces so code can be parsed correctly\n const startingWhitespaceRegex = new RegExp('^' + firstLineWhitespace);\n lines = lines.map(function (line: string): string {\n return line\n .replace('=\"\"', '') // remove empty values\n .replace(startingWhitespaceRegex, '')\n .replace(/\\s+$/, ''); // remove trailing white spaces\n });\n\n const codeToParse: string = lines\n .join('\\n')\n .replace(/\\{ \\{/gi, '{{')\n .replace(/\\} \\}/gi, '}}')\n .replace(/</gi, '<')\n .replace(/>/gi, '>'); // replace with < and > to render HTML in Angular\n this.copyContent = codeToParse;\n // Parse code with highlight.js depending on language\n const highlightedCode: any = hljs.highlight(this._lang, codeToParse, true);\n highlightedCode.value = highlightedCode.value\n .replace(/=<span class=\"hljs-value\">\"\"<\\/span>/gi, '')\n .replace('<head>', '')\n .replace('<head/>', '');\n return highlightedCode.value;\n }\n}\n","<div>\n <div #highlightComponent>\n <ng-content></ng-content>\n </div>\n\n <div #copyComponent *ngIf=\"copyCodeToClipboard\">\n <td-copy-code-button\n [copiedContent]=\"copyContent\"\n [copyCodeToClipboard]=\"copyCodeToClipboard\"\n [copyCodeTooltips]=\"copyCodeTooltips\"\n ></td-copy-code-button>\n </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ClipboardModule } from '@angular/cdk/clipboard';\nimport { TdHighlightComponent } from './highlight.component';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { MatButtonModule } from '@angular/material/button';\nimport { TdCopyCodeButtonComponent } from './copy-code-button/copy-code-button.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ClipboardModule,\n MatIconModule,\n MatTooltipModule,\n MatButtonModule,\n ],\n declarations: [TdHighlightComponent, TdCopyCodeButtonComponent],\n exports: [TdHighlightComponent],\n})\nexport class CovalentHighlightModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,19 +1,18 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Component, Input, ViewChild, HostListener, EventEmitter, SecurityContext, Output, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/platform-browser';
|
|
4
|
-
import * as
|
|
4
|
+
import * as i4 from '@angular/material/tooltip';
|
|
5
5
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
6
6
|
import hljs from 'highlight.js';
|
|
7
|
-
import * as i2$1 from '@angular/common';
|
|
8
|
-
import { CommonModule } from '@angular/common';
|
|
9
7
|
import * as i1 from '@angular/material/button';
|
|
10
8
|
import { MatButtonModule } from '@angular/material/button';
|
|
11
|
-
import * as i2 from '@angular/
|
|
12
|
-
import { ClipboardModule } from '@angular/cdk/clipboard';
|
|
13
|
-
import * as i4 from '@angular/material/icon';
|
|
9
|
+
import * as i2 from '@angular/material/icon';
|
|
14
10
|
import { MatIconModule } from '@angular/material/icon';
|
|
11
|
+
import * as i3 from '@angular/cdk/clipboard';
|
|
12
|
+
import { ClipboardModule } from '@angular/cdk/clipboard';
|
|
13
|
+
import * as i3$1 from '@angular/common';
|
|
14
|
+
import { CommonModule } from '@angular/common';
|
|
15
15
|
|
|
16
|
-
const _c0$1 = ["tooltip"];
|
|
17
16
|
class TdCopyCodeButtonComponent {
|
|
18
17
|
constructor() {
|
|
19
18
|
this.copyCodeToClipboard = false;
|
|
@@ -43,54 +42,25 @@ class TdCopyCodeButtonComponent {
|
|
|
43
42
|
}, 200);
|
|
44
43
|
}
|
|
45
44
|
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdCopyCodeButtonComponent, [{
|
|
65
|
-
type: Component,
|
|
66
|
-
args: [{ selector: 'td-copy-code-button', template: "<button\n mat-icon-button\n [cdkCopyToClipboard]=\"copiedContent\"\n class=\"copy-button\"\n [matTooltip]=\"copyTooltip\"\n #tooltip=\"matTooltip\"\n (cdkCopyToClipboardCopied)=\"textCopied($event)\"\n>\n <mat-icon role=\"img\">content_copy</mat-icon>\n</button>\n", styles: [""] }]
|
|
67
|
-
}], null, { copiedContent: [{
|
|
68
|
-
type: Input
|
|
69
|
-
}], copyCodeToClipboard: [{
|
|
70
|
-
type: Input
|
|
71
|
-
}], copyCodeTooltips: [{
|
|
72
|
-
type: Input
|
|
73
|
-
}], tooltip: [{
|
|
74
|
-
type: ViewChild,
|
|
75
|
-
args: ['tooltip']
|
|
76
|
-
}], initializeTooltip: [{
|
|
77
|
-
type: HostListener,
|
|
78
|
-
args: ['mouseleave']
|
|
79
|
-
}] }); })();
|
|
45
|
+
TdCopyCodeButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdCopyCodeButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
46
|
+
TdCopyCodeButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdCopyCodeButtonComponent, selector: "td-copy-code-button", inputs: { copiedContent: "copiedContent", copyCodeToClipboard: "copyCodeToClipboard", copyCodeTooltips: "copyCodeTooltips" }, host: { listeners: { "mouseleave": "initializeTooltip()" } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }], ngImport: i0, template: "<button\n mat-icon-button\n [cdkCopyToClipboard]=\"copiedContent\"\n class=\"copy-button\"\n [matTooltip]=\"copyTooltip\"\n #tooltip=\"matTooltip\"\n (cdkCopyToClipboardCopied)=\"textCopied($event)\"\n>\n <mat-icon role=\"img\">content_copy</mat-icon>\n</button>\n", styles: [""], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
|
|
47
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdCopyCodeButtonComponent, decorators: [{
|
|
48
|
+
type: Component,
|
|
49
|
+
args: [{ selector: 'td-copy-code-button', template: "<button\n mat-icon-button\n [cdkCopyToClipboard]=\"copiedContent\"\n class=\"copy-button\"\n [matTooltip]=\"copyTooltip\"\n #tooltip=\"matTooltip\"\n (cdkCopyToClipboardCopied)=\"textCopied($event)\"\n>\n <mat-icon role=\"img\">content_copy</mat-icon>\n</button>\n", styles: [""] }]
|
|
50
|
+
}], propDecorators: { copiedContent: [{
|
|
51
|
+
type: Input
|
|
52
|
+
}], copyCodeToClipboard: [{
|
|
53
|
+
type: Input
|
|
54
|
+
}], copyCodeTooltips: [{
|
|
55
|
+
type: Input
|
|
56
|
+
}], tooltip: [{
|
|
57
|
+
type: ViewChild,
|
|
58
|
+
args: ['tooltip']
|
|
59
|
+
}], initializeTooltip: [{
|
|
60
|
+
type: HostListener,
|
|
61
|
+
args: ['mouseleave']
|
|
62
|
+
}] } });
|
|
80
63
|
|
|
81
|
-
const _c0 = ["highlightComponent"];
|
|
82
|
-
const _c1 = ["copyComponent"];
|
|
83
|
-
const _c2 = ["tooltip"];
|
|
84
|
-
function TdHighlightComponent_div_4_Template(rf, ctx) { if (rf & 1) {
|
|
85
|
-
i0.ɵɵelementStart(0, "div", null, 2);
|
|
86
|
-
i0.ɵɵelement(2, "td-copy-code-button", 3);
|
|
87
|
-
i0.ɵɵelementEnd();
|
|
88
|
-
} if (rf & 2) {
|
|
89
|
-
const ctx_r1 = i0.ɵɵnextContext();
|
|
90
|
-
i0.ɵɵadvance(2);
|
|
91
|
-
i0.ɵɵproperty("copiedContent", ctx_r1.copyContent)("copyCodeToClipboard", ctx_r1.copyCodeToClipboard)("copyCodeTooltips", ctx_r1.copyCodeTooltips);
|
|
92
|
-
} }
|
|
93
|
-
const _c3 = ["*"];
|
|
94
64
|
class TdHighlightComponent {
|
|
95
65
|
constructor(_renderer, _elementRef, _domSanitizer, cdr) {
|
|
96
66
|
this._renderer = _renderer;
|
|
@@ -193,16 +163,22 @@ class TdHighlightComponent {
|
|
|
193
163
|
this._renderer.appendChild(preElement, codeElement);
|
|
194
164
|
// Set .highlight class into <code> element
|
|
195
165
|
this._renderer.addClass(codeElement, 'highlight');
|
|
196
|
-
codeElement.innerHTML =
|
|
166
|
+
codeElement.innerHTML =
|
|
167
|
+
this._domSanitizer.sanitize(SecurityContext.HTML, codeStr) ?? '';
|
|
197
168
|
return preElement;
|
|
198
169
|
}
|
|
199
170
|
_render(contents) {
|
|
200
171
|
// Trim leading and trailing newlines
|
|
201
|
-
contents = contents
|
|
172
|
+
contents = contents
|
|
173
|
+
.replace(/^(\s|\t)*\n+/g, '')
|
|
174
|
+
.replace(/(\s|\t)*\n+(\s|\t)*$/g, '');
|
|
202
175
|
// Split markup by line characters
|
|
203
176
|
let lines = contents.split('\n');
|
|
204
177
|
// check how much indentation is used by the first actual code line
|
|
205
|
-
const
|
|
178
|
+
const firstLineWhitespaceMatch = lines[0].match(/^(\s|\t)*/);
|
|
179
|
+
const firstLineWhitespace = firstLineWhitespaceMatch
|
|
180
|
+
? firstLineWhitespaceMatch[0]
|
|
181
|
+
: null;
|
|
206
182
|
// Remove all indentation spaces so code can be parsed correctly
|
|
207
183
|
const startingWhitespaceRegex = new RegExp('^' + firstLineWhitespace);
|
|
208
184
|
lines = lines.map(function (line) {
|
|
@@ -227,70 +203,63 @@ class TdHighlightComponent {
|
|
|
227
203
|
return highlightedCode.value;
|
|
228
204
|
}
|
|
229
205
|
}
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
args: ['content']
|
|
258
|
-
}], copyCodeToClipboard: [{
|
|
259
|
-
type: Input
|
|
260
|
-
}], copyCodeTooltips: [{
|
|
261
|
-
type: Input
|
|
262
|
-
}], codeLang: [{
|
|
263
|
-
type: Input,
|
|
264
|
-
args: ['codeLang']
|
|
265
|
-
}], lang: [{
|
|
266
|
-
type: Input
|
|
267
|
-
}], contentReady: [{
|
|
268
|
-
type: Output
|
|
269
|
-
}], highlightComp: [{
|
|
270
|
-
type: ViewChild,
|
|
271
|
-
args: ['highlightComponent']
|
|
272
|
-
}], copyComp: [{
|
|
273
|
-
type: ViewChild,
|
|
274
|
-
args: ['copyComponent']
|
|
275
|
-
}], tooltip: [{
|
|
276
|
-
type: ViewChild,
|
|
277
|
-
args: ['tooltip']
|
|
278
|
-
}] }); })();
|
|
206
|
+
TdHighlightComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdHighlightComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1$1.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
207
|
+
TdHighlightComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdHighlightComponent, selector: "td-highlight", inputs: { content: "content", copyCodeToClipboard: "copyCodeToClipboard", copyCodeTooltips: "copyCodeTooltips", codeLang: "codeLang", lang: "lang" }, outputs: { contentReady: "contentReady" }, viewQueries: [{ propertyName: "highlightComp", first: true, predicate: ["highlightComponent"], descendants: true }, { propertyName: "copyComp", first: true, predicate: ["copyComponent"], descendants: true }, { propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }], ngImport: i0, template: "<div>\n <div #highlightComponent>\n <ng-content></ng-content>\n </div>\n\n <div #copyComponent *ngIf=\"copyCodeToClipboard\">\n <td-copy-code-button\n [copiedContent]=\"copyContent\"\n [copyCodeToClipboard]=\"copyCodeToClipboard\"\n [copyCodeTooltips]=\"copyCodeTooltips\"\n ></td-copy-code-button>\n </div>\n</div>\n", styles: [":host ::ng-deep{overflow-x:auto;padding:16px;display:flex}:host ::ng-deep pre,:host ::ng-deep code,:host ::ng-deep .highlight{font-family:Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace}:host ::ng-deep pre{display:block;overflow-x:auto;padding:0;margin:0;background:transparent;font-family:Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;line-height:1.45;-moz-tab-size:2;tab-size:2;-webkit-font-smoothing:auto;-webkit-text-size-adjust:none;text-size-adjust:none;position:relative;border-radius:2px;font-size:.8rem;width:100%}:host ::ng-deep code{margin:0;padding:0;overflow-wrap:break-word;white-space:pre-wrap}:host ::ng-deep .highlight{display:block;overflow-wrap:break-word;line-height:1.5;margin:0}:host ::ng-deep .copy-button{border:none;background:inherit;margin-top:-8px;margin-right:-8px}\n"], components: [{ type: TdCopyCodeButtonComponent, selector: "td-copy-code-button", inputs: ["copiedContent", "copyCodeToClipboard", "copyCodeTooltips"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
208
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdHighlightComponent, decorators: [{
|
|
209
|
+
type: Component,
|
|
210
|
+
args: [{ selector: 'td-highlight', template: "<div>\n <div #highlightComponent>\n <ng-content></ng-content>\n </div>\n\n <div #copyComponent *ngIf=\"copyCodeToClipboard\">\n <td-copy-code-button\n [copiedContent]=\"copyContent\"\n [copyCodeToClipboard]=\"copyCodeToClipboard\"\n [copyCodeTooltips]=\"copyCodeTooltips\"\n ></td-copy-code-button>\n </div>\n</div>\n", styles: [":host ::ng-deep{overflow-x:auto;padding:16px;display:flex}:host ::ng-deep pre,:host ::ng-deep code,:host ::ng-deep .highlight{font-family:Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace}:host ::ng-deep pre{display:block;overflow-x:auto;padding:0;margin:0;background:transparent;font-family:Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;line-height:1.45;-moz-tab-size:2;tab-size:2;-webkit-font-smoothing:auto;-webkit-text-size-adjust:none;text-size-adjust:none;position:relative;border-radius:2px;font-size:.8rem;width:100%}:host ::ng-deep code{margin:0;padding:0;overflow-wrap:break-word;white-space:pre-wrap}:host ::ng-deep .highlight{display:block;overflow-wrap:break-word;line-height:1.5;margin:0}:host ::ng-deep .copy-button{border:none;background:inherit;margin-top:-8px;margin-right:-8px}\n"] }]
|
|
211
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1$1.DomSanitizer }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { content: [{
|
|
212
|
+
type: Input
|
|
213
|
+
}], copyCodeToClipboard: [{
|
|
214
|
+
type: Input
|
|
215
|
+
}], copyCodeTooltips: [{
|
|
216
|
+
type: Input
|
|
217
|
+
}], codeLang: [{
|
|
218
|
+
type: Input
|
|
219
|
+
}], lang: [{
|
|
220
|
+
type: Input
|
|
221
|
+
}], contentReady: [{
|
|
222
|
+
type: Output
|
|
223
|
+
}], highlightComp: [{
|
|
224
|
+
type: ViewChild,
|
|
225
|
+
args: ['highlightComponent']
|
|
226
|
+
}], copyComp: [{
|
|
227
|
+
type: ViewChild,
|
|
228
|
+
args: ['copyComponent']
|
|
229
|
+
}], tooltip: [{
|
|
230
|
+
type: ViewChild,
|
|
231
|
+
args: ['tooltip']
|
|
232
|
+
}] } });
|
|
279
233
|
|
|
280
234
|
class CovalentHighlightModule {
|
|
281
235
|
}
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
236
|
+
CovalentHighlightModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentHighlightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
237
|
+
CovalentHighlightModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentHighlightModule, declarations: [TdHighlightComponent, TdCopyCodeButtonComponent], imports: [CommonModule,
|
|
238
|
+
ClipboardModule,
|
|
239
|
+
MatIconModule,
|
|
240
|
+
MatTooltipModule,
|
|
241
|
+
MatButtonModule], exports: [TdHighlightComponent] });
|
|
242
|
+
CovalentHighlightModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentHighlightModule, imports: [[
|
|
243
|
+
CommonModule,
|
|
244
|
+
ClipboardModule,
|
|
245
|
+
MatIconModule,
|
|
246
|
+
MatTooltipModule,
|
|
247
|
+
MatButtonModule,
|
|
248
|
+
]] });
|
|
249
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentHighlightModule, decorators: [{
|
|
250
|
+
type: NgModule,
|
|
251
|
+
args: [{
|
|
252
|
+
imports: [
|
|
253
|
+
CommonModule,
|
|
254
|
+
ClipboardModule,
|
|
255
|
+
MatIconModule,
|
|
256
|
+
MatTooltipModule,
|
|
257
|
+
MatButtonModule,
|
|
258
|
+
],
|
|
259
|
+
declarations: [TdHighlightComponent, TdCopyCodeButtonComponent],
|
|
260
|
+
exports: [TdHighlightComponent],
|
|
261
|
+
}]
|
|
262
|
+
}] });
|
|
294
263
|
|
|
295
264
|
/**
|
|
296
265
|
* Generated bundle index. Do not edit.
|