@covalent/highlight 6.3.0-beta.4 → 6.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/_highlight-theme.scss +120 -52
- package/esm2022/lib/copy-code-button/copy-code-button.component.mjs +94 -0
- package/esm2022/lib/highlight.component.mjs +222 -0
- package/esm2022/lib/highlight.module.mjs +44 -0
- package/fesm2022/covalent-highlight.mjs +355 -0
- package/fesm2022/covalent-highlight.mjs.map +1 -0
- package/lib/copy-code-button/copy-code-button.component.d.ts +16 -1
- package/lib/highlight.component.d.ts +16 -2
- package/lib/highlight.module.d.ts +3 -2
- package/package.json +10 -16
- package/esm2020/lib/copy-code-button/copy-code-button.component.mjs +0 -55
- package/esm2020/lib/highlight.component.mjs +0 -178
- package/esm2020/lib/highlight.module.mjs +0 -37
- package/fesm2015/covalent-highlight.mjs +0 -268
- package/fesm2015/covalent-highlight.mjs.map +0 -1
- package/fesm2020/covalent-highlight.mjs +0 -267
- package/fesm2020/covalent-highlight.mjs.map +0 -1
- /package/{esm2020 → esm2022}/covalent-highlight.mjs +0 -0
- /package/{esm2020 → esm2022}/public_api.mjs +0 -0
|
@@ -0,0 +1,355 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { EventEmitter, Component, Input, Output, ViewChild, HostListener, SecurityContext, NgModule } from '@angular/core';
|
|
3
|
+
import * as i1$1 from '@angular/platform-browser';
|
|
4
|
+
import * as i6 from '@angular/material/tooltip';
|
|
5
|
+
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
6
|
+
import hljs from 'highlight.js';
|
|
7
|
+
import * as i1 from '@angular/common';
|
|
8
|
+
import { CommonModule } from '@angular/common';
|
|
9
|
+
import * as i4 from '@angular/material/button-toggle';
|
|
10
|
+
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
11
|
+
import * as i2 from '@angular/cdk/clipboard';
|
|
12
|
+
import { ClipboardModule } from '@angular/cdk/clipboard';
|
|
13
|
+
import * as i3 from '@angular/material/icon';
|
|
14
|
+
import { MatIconModule } from '@angular/material/icon';
|
|
15
|
+
import * as i5 from '@angular/material/button';
|
|
16
|
+
import { MatButtonModule } from '@angular/material/button';
|
|
17
|
+
|
|
18
|
+
class TdCopyCodeButtonComponent {
|
|
19
|
+
// private _copyCodeTooltips: ICopyCodeTooltips = {};
|
|
20
|
+
copiedContent;
|
|
21
|
+
copyCodeToClipboard = false;
|
|
22
|
+
/**
|
|
23
|
+
* copyCodeTooltips?: ICopyCodeTooltips
|
|
24
|
+
*
|
|
25
|
+
* Tooltips for copy button to copy and upon copying.
|
|
26
|
+
*/
|
|
27
|
+
copyCodeTooltips = {};
|
|
28
|
+
toggleRawButton = false;
|
|
29
|
+
rawToggleLabels = {};
|
|
30
|
+
rawToggle = false;
|
|
31
|
+
toggleRaw = new EventEmitter();
|
|
32
|
+
copyButton;
|
|
33
|
+
rawButton;
|
|
34
|
+
get copyTooltip() {
|
|
35
|
+
return (this.copyCodeTooltips && this.copyCodeTooltips.copy) || 'Copy';
|
|
36
|
+
}
|
|
37
|
+
get copiedTooltip() {
|
|
38
|
+
return (this.copyCodeTooltips && this.copyCodeTooltips.copied) || 'Copied';
|
|
39
|
+
}
|
|
40
|
+
get rawToggleText() {
|
|
41
|
+
if (this.rawToggle) {
|
|
42
|
+
return this.rawToggleLabels?.viewCode || 'View code';
|
|
43
|
+
}
|
|
44
|
+
else {
|
|
45
|
+
return this.rawToggleLabels?.viewRaw || 'Raw';
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
tooltip;
|
|
49
|
+
textCopied(event) {
|
|
50
|
+
if (event) {
|
|
51
|
+
this.tooltip.hide();
|
|
52
|
+
this.tooltip.message = this.copiedTooltip;
|
|
53
|
+
this.tooltip.show();
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
initializeTooltip() {
|
|
57
|
+
setTimeout(() => {
|
|
58
|
+
this.tooltip.message = this.copyTooltip;
|
|
59
|
+
}, 200);
|
|
60
|
+
}
|
|
61
|
+
toggleRawClicked() {
|
|
62
|
+
this.rawToggle = !this.rawToggle;
|
|
63
|
+
this.toggleRaw.emit();
|
|
64
|
+
this.rawButton.checked = false;
|
|
65
|
+
}
|
|
66
|
+
copyClicked() {
|
|
67
|
+
console.log('copyClicked');
|
|
68
|
+
this.copyButton.checked = false;
|
|
69
|
+
}
|
|
70
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TdCopyCodeButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
71
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: TdCopyCodeButtonComponent, selector: "td-copy-code-button", inputs: { copiedContent: "copiedContent", copyCodeToClipboard: "copyCodeToClipboard", copyCodeTooltips: "copyCodeTooltips", toggleRawButton: "toggleRawButton", rawToggleLabels: "rawToggleLabels" }, outputs: { toggleRaw: "toggleRaw" }, host: { listeners: { "mouseleave": "initializeTooltip()" } }, viewQueries: [{ propertyName: "copyButton", first: true, predicate: ["copyButton"], descendants: true }, { propertyName: "rawButton", first: true, predicate: ["rawButton"], descendants: true }, { propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }], ngImport: i0, template: "<mat-button-toggle-group\n multiple\n class=\"raw-and-copy-buttons\"\n *ngIf=\"toggleRawButton; else button\"\n>\n <mat-button-toggle (click)=\"toggleRawClicked()\" #rawButton>{{\n rawToggleText\n }}</mat-button-toggle>\n <mat-button-toggle\n [cdkCopyToClipboard]=\"copiedContent\"\n [matTooltip]=\"copyTooltip\"\n #tooltip=\"matTooltip\"\n #copyButton\n (click)=\"copyClicked()\"\n (cdkCopyToClipboardCopied)=\"textCopied($event)\"\n >\n <mat-icon width>content_copy</mat-icon>\n </mat-button-toggle>\n</mat-button-toggle-group>\n\n<ng-template #button>\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</ng-template>\n", styles: ["mat-button-toggle-group.raw-and-copy-buttons{margin-top:-8px;margin-right:-8px;margin-left:8px}mat-button-toggle-group.raw-and-copy-buttons ::ng-deep .mat-button-toggle-label-content{font-size:12px;line-height:28px}mat-button-toggle-group.raw-and-copy-buttons ::ng-deep .mat-button-toggle-label-content mat-icon{width:16px;height:16px;font-size:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
|
|
72
|
+
}
|
|
73
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TdCopyCodeButtonComponent, decorators: [{
|
|
74
|
+
type: Component,
|
|
75
|
+
args: [{ selector: 'td-copy-code-button', template: "<mat-button-toggle-group\n multiple\n class=\"raw-and-copy-buttons\"\n *ngIf=\"toggleRawButton; else button\"\n>\n <mat-button-toggle (click)=\"toggleRawClicked()\" #rawButton>{{\n rawToggleText\n }}</mat-button-toggle>\n <mat-button-toggle\n [cdkCopyToClipboard]=\"copiedContent\"\n [matTooltip]=\"copyTooltip\"\n #tooltip=\"matTooltip\"\n #copyButton\n (click)=\"copyClicked()\"\n (cdkCopyToClipboardCopied)=\"textCopied($event)\"\n >\n <mat-icon width>content_copy</mat-icon>\n </mat-button-toggle>\n</mat-button-toggle-group>\n\n<ng-template #button>\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</ng-template>\n", styles: ["mat-button-toggle-group.raw-and-copy-buttons{margin-top:-8px;margin-right:-8px;margin-left:8px}mat-button-toggle-group.raw-and-copy-buttons ::ng-deep .mat-button-toggle-label-content{font-size:12px;line-height:28px}mat-button-toggle-group.raw-and-copy-buttons ::ng-deep .mat-button-toggle-label-content mat-icon{width:16px;height:16px;font-size:16px}\n"] }]
|
|
76
|
+
}], propDecorators: { copiedContent: [{
|
|
77
|
+
type: Input
|
|
78
|
+
}], copyCodeToClipboard: [{
|
|
79
|
+
type: Input
|
|
80
|
+
}], copyCodeTooltips: [{
|
|
81
|
+
type: Input
|
|
82
|
+
}], toggleRawButton: [{
|
|
83
|
+
type: Input
|
|
84
|
+
}], rawToggleLabels: [{
|
|
85
|
+
type: Input
|
|
86
|
+
}], toggleRaw: [{
|
|
87
|
+
type: Output
|
|
88
|
+
}], copyButton: [{
|
|
89
|
+
type: ViewChild,
|
|
90
|
+
args: ['copyButton']
|
|
91
|
+
}], rawButton: [{
|
|
92
|
+
type: ViewChild,
|
|
93
|
+
args: ['rawButton']
|
|
94
|
+
}], tooltip: [{
|
|
95
|
+
type: ViewChild,
|
|
96
|
+
args: ['tooltip']
|
|
97
|
+
}], initializeTooltip: [{
|
|
98
|
+
type: HostListener,
|
|
99
|
+
args: ['mouseleave']
|
|
100
|
+
}] } });
|
|
101
|
+
|
|
102
|
+
class TdHighlightComponent {
|
|
103
|
+
_renderer;
|
|
104
|
+
_elementRef;
|
|
105
|
+
_domSanitizer;
|
|
106
|
+
cdr;
|
|
107
|
+
_initialized = false;
|
|
108
|
+
_content;
|
|
109
|
+
_lang = 'typescript';
|
|
110
|
+
_showRaw = false;
|
|
111
|
+
/**
|
|
112
|
+
* content?: string
|
|
113
|
+
*
|
|
114
|
+
* Code content to be parsed as highlighted html.
|
|
115
|
+
* Used to load data dynamically.
|
|
116
|
+
*
|
|
117
|
+
* e.g. `.html`, `.ts` , etc.
|
|
118
|
+
*/
|
|
119
|
+
set content(content) {
|
|
120
|
+
this._content = content;
|
|
121
|
+
console.log(this._content);
|
|
122
|
+
if (this._initialized) {
|
|
123
|
+
this._loadContent(this._content);
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
/**
|
|
127
|
+
* copyCodeToClipboard?: boolean
|
|
128
|
+
*
|
|
129
|
+
* Display copy button on code snippets to copy code to clipboard.
|
|
130
|
+
*/
|
|
131
|
+
copyCodeToClipboard = false;
|
|
132
|
+
/**
|
|
133
|
+
* copyCodeTooltips?: ICopyCodeTooltips
|
|
134
|
+
*
|
|
135
|
+
* Tooltips for copy button to copy and upon copying.
|
|
136
|
+
*/
|
|
137
|
+
copyCodeTooltips = {};
|
|
138
|
+
/**
|
|
139
|
+
* toggleRawButton?: boolean
|
|
140
|
+
*
|
|
141
|
+
* Display button to toggle raw code.
|
|
142
|
+
*/
|
|
143
|
+
toggleRawButton = false;
|
|
144
|
+
/**
|
|
145
|
+
* rawToggleLabels?: IRawToggleLabels
|
|
146
|
+
*
|
|
147
|
+
* Labels for raw toggle button.
|
|
148
|
+
*/
|
|
149
|
+
rawToggleLabels = {};
|
|
150
|
+
/**
|
|
151
|
+
* lang?: string
|
|
152
|
+
*
|
|
153
|
+
* Language of the code content to be parsed as highlighted html.
|
|
154
|
+
* Defaults to `typescript`
|
|
155
|
+
*
|
|
156
|
+
* e.g. `typescript`, `html` , etc.
|
|
157
|
+
*/
|
|
158
|
+
set codeLang(lang) {
|
|
159
|
+
this.setLanguage(lang);
|
|
160
|
+
}
|
|
161
|
+
/** @deprecated - removed completely @4.0.0 */
|
|
162
|
+
set lang(lang) {
|
|
163
|
+
// tslint:disable-next-line: no-console
|
|
164
|
+
console.warn('DEPRECATION WARNING: switch to codeLang attribute as lang attribute is deprecated.');
|
|
165
|
+
this.setLanguage(lang);
|
|
166
|
+
}
|
|
167
|
+
copyContent;
|
|
168
|
+
/**
|
|
169
|
+
* contentReady?: function
|
|
170
|
+
* Event emitted after the highlight content rendering is finished.
|
|
171
|
+
*/
|
|
172
|
+
contentReady = new EventEmitter();
|
|
173
|
+
highlightComp;
|
|
174
|
+
copyComp;
|
|
175
|
+
tooltip;
|
|
176
|
+
constructor(_renderer, _elementRef, _domSanitizer, cdr) {
|
|
177
|
+
this._renderer = _renderer;
|
|
178
|
+
this._elementRef = _elementRef;
|
|
179
|
+
this._domSanitizer = _domSanitizer;
|
|
180
|
+
this.cdr = cdr;
|
|
181
|
+
}
|
|
182
|
+
ngAfterViewChecked() {
|
|
183
|
+
this.cdr.detectChanges();
|
|
184
|
+
}
|
|
185
|
+
ngAfterViewInit() {
|
|
186
|
+
if (!this._content) {
|
|
187
|
+
this._content =
|
|
188
|
+
this.highlightComp.nativeElement.textContent || '';
|
|
189
|
+
}
|
|
190
|
+
this._loadContent(this._content);
|
|
191
|
+
this._initialized = true;
|
|
192
|
+
}
|
|
193
|
+
setLanguage(lang) {
|
|
194
|
+
if (!lang) {
|
|
195
|
+
throw new Error('Error: language attribute must be defined in TdHighlightComponent.');
|
|
196
|
+
}
|
|
197
|
+
this._lang = lang;
|
|
198
|
+
if (this._initialized) {
|
|
199
|
+
this._loadContent(this._content);
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
toggleRawClicked() {
|
|
203
|
+
this._showRaw = !this._showRaw;
|
|
204
|
+
this._elementRef.nativeElement.querySelector('pre').style.display = this
|
|
205
|
+
._showRaw
|
|
206
|
+
? 'none'
|
|
207
|
+
: 'block';
|
|
208
|
+
this._elementRef.nativeElement.querySelector('.raw').style.display = this
|
|
209
|
+
._showRaw
|
|
210
|
+
? 'block'
|
|
211
|
+
: 'none';
|
|
212
|
+
}
|
|
213
|
+
/**
|
|
214
|
+
* General method to parse a string of code into HTML Elements and load them into the container
|
|
215
|
+
*/
|
|
216
|
+
_loadContent(code) {
|
|
217
|
+
if (code && code.trim().length > 0) {
|
|
218
|
+
// Clean container
|
|
219
|
+
this._renderer.setProperty(this._elementRef.nativeElement, 'innerHTML', '');
|
|
220
|
+
this._elementFromString(code);
|
|
221
|
+
if (this.copyCodeToClipboard) {
|
|
222
|
+
this._renderer.appendChild(this._elementRef.nativeElement, this.copyComp.nativeElement);
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
this.contentReady.emit();
|
|
226
|
+
}
|
|
227
|
+
_elementFromString(codeStr) {
|
|
228
|
+
// Renderer2 doesnt have a parsing method, so we have to sanitize and use [innerHTML]
|
|
229
|
+
// to parse the string into DOM element for now.
|
|
230
|
+
const preElement = this._renderer.createElement('pre');
|
|
231
|
+
this._renderer.appendChild(this._elementRef.nativeElement, preElement);
|
|
232
|
+
const codeElement = this._renderer.createElement('code');
|
|
233
|
+
this._renderer.appendChild(preElement, codeElement);
|
|
234
|
+
// Set .highlight class into <code> element
|
|
235
|
+
this._renderer.addClass(codeElement, 'highlight');
|
|
236
|
+
const highlightedCode = this._render(codeStr);
|
|
237
|
+
codeElement.innerHTML =
|
|
238
|
+
this._domSanitizer.sanitize(SecurityContext.HTML, highlightedCode) ?? '';
|
|
239
|
+
if (this.toggleRawButton) {
|
|
240
|
+
const divElement = this._renderer.createElement('div');
|
|
241
|
+
divElement.className = 'raw';
|
|
242
|
+
this._renderer.appendChild(this._elementRef.nativeElement, divElement);
|
|
243
|
+
divElement.innerHTML =
|
|
244
|
+
this._domSanitizer.sanitize(SecurityContext.HTML, codeStr) ?? '';
|
|
245
|
+
this._renderer.setStyle(divElement, 'display', 'none');
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
_render(contents) {
|
|
249
|
+
// Trim leading and trailing newlines
|
|
250
|
+
contents = contents
|
|
251
|
+
.replace(/^(\s|\t)*\n+/g, '')
|
|
252
|
+
.replace(/(\s|\t)*\n+(\s|\t)*$/g, '');
|
|
253
|
+
// Split markup by line characters
|
|
254
|
+
let lines = contents.split('\n');
|
|
255
|
+
// check how much indentation is used by the first actual code line
|
|
256
|
+
const firstLineWhitespaceMatch = lines[0].match(/^(\s|\t)*/);
|
|
257
|
+
const firstLineWhitespace = firstLineWhitespaceMatch
|
|
258
|
+
? firstLineWhitespaceMatch[0]
|
|
259
|
+
: null;
|
|
260
|
+
// Remove all indentation spaces so code can be parsed correctly
|
|
261
|
+
const startingWhitespaceRegex = new RegExp('^' + firstLineWhitespace);
|
|
262
|
+
lines = lines.map(function (line) {
|
|
263
|
+
return line
|
|
264
|
+
.replace('=""', '') // remove empty values
|
|
265
|
+
.replace(startingWhitespaceRegex, '')
|
|
266
|
+
.replace(/\s+$/, ''); // remove trailing white spaces
|
|
267
|
+
});
|
|
268
|
+
const codeToParse = lines
|
|
269
|
+
.join('\n')
|
|
270
|
+
.replace(/\{ \{/gi, '{{')
|
|
271
|
+
.replace(/\} \}/gi, '}}')
|
|
272
|
+
.replace(/</gi, '<')
|
|
273
|
+
.replace(/>/gi, '>'); // replace with < and > to render HTML in Angular
|
|
274
|
+
this.copyContent = codeToParse;
|
|
275
|
+
// Parse code with highlight.js depending on language
|
|
276
|
+
const highlightedCode = hljs.highlight(this._lang, codeToParse, true);
|
|
277
|
+
highlightedCode.value = highlightedCode.value
|
|
278
|
+
.replace(/=<span class="hljs-value">""<\/span>/gi, '')
|
|
279
|
+
.replace('<head>', '')
|
|
280
|
+
.replace('<head/>', '');
|
|
281
|
+
return highlightedCode.value;
|
|
282
|
+
}
|
|
283
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TdHighlightComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1$1.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
284
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: TdHighlightComponent, selector: "td-highlight", inputs: { content: "content", copyCodeToClipboard: "copyCodeToClipboard", copyCodeTooltips: "copyCodeTooltips", toggleRawButton: "toggleRawButton", rawToggleLabels: "rawToggleLabels", 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 [toggleRawButton]=\"toggleRawButton\"\n [rawToggleLabels]=\"rawToggleLabels\"\n (toggleRaw)=\"toggleRawClicked()\"\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;position:relative}: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;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 div.raw{flex-grow:1}: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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TdCopyCodeButtonComponent, selector: "td-copy-code-button", inputs: ["copiedContent", "copyCodeToClipboard", "copyCodeTooltips", "toggleRawButton", "rawToggleLabels"], outputs: ["toggleRaw"] }] });
|
|
285
|
+
}
|
|
286
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TdHighlightComponent, decorators: [{
|
|
287
|
+
type: Component,
|
|
288
|
+
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 [toggleRawButton]=\"toggleRawButton\"\n [rawToggleLabels]=\"rawToggleLabels\"\n (toggleRaw)=\"toggleRawClicked()\"\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;position:relative}: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;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 div.raw{flex-grow:1}: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"] }]
|
|
289
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1$1.DomSanitizer }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { content: [{
|
|
290
|
+
type: Input
|
|
291
|
+
}], copyCodeToClipboard: [{
|
|
292
|
+
type: Input
|
|
293
|
+
}], copyCodeTooltips: [{
|
|
294
|
+
type: Input
|
|
295
|
+
}], toggleRawButton: [{
|
|
296
|
+
type: Input
|
|
297
|
+
}], rawToggleLabels: [{
|
|
298
|
+
type: Input
|
|
299
|
+
}], codeLang: [{
|
|
300
|
+
type: Input
|
|
301
|
+
}], lang: [{
|
|
302
|
+
type: Input
|
|
303
|
+
}], contentReady: [{
|
|
304
|
+
type: Output
|
|
305
|
+
}], highlightComp: [{
|
|
306
|
+
type: ViewChild,
|
|
307
|
+
args: ['highlightComponent']
|
|
308
|
+
}], copyComp: [{
|
|
309
|
+
type: ViewChild,
|
|
310
|
+
args: ['copyComponent']
|
|
311
|
+
}], tooltip: [{
|
|
312
|
+
type: ViewChild,
|
|
313
|
+
args: ['tooltip']
|
|
314
|
+
}] } });
|
|
315
|
+
|
|
316
|
+
class CovalentHighlightModule {
|
|
317
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CovalentHighlightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
318
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: CovalentHighlightModule, declarations: [TdHighlightComponent, TdCopyCodeButtonComponent], imports: [CommonModule,
|
|
319
|
+
ClipboardModule,
|
|
320
|
+
MatIconModule,
|
|
321
|
+
MatButtonToggleModule,
|
|
322
|
+
MatButtonModule,
|
|
323
|
+
MatTooltipModule,
|
|
324
|
+
MatButtonModule], exports: [TdHighlightComponent] });
|
|
325
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CovalentHighlightModule, imports: [CommonModule,
|
|
326
|
+
ClipboardModule,
|
|
327
|
+
MatIconModule,
|
|
328
|
+
MatButtonToggleModule,
|
|
329
|
+
MatButtonModule,
|
|
330
|
+
MatTooltipModule,
|
|
331
|
+
MatButtonModule] });
|
|
332
|
+
}
|
|
333
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CovalentHighlightModule, decorators: [{
|
|
334
|
+
type: NgModule,
|
|
335
|
+
args: [{
|
|
336
|
+
imports: [
|
|
337
|
+
CommonModule,
|
|
338
|
+
ClipboardModule,
|
|
339
|
+
MatIconModule,
|
|
340
|
+
MatButtonToggleModule,
|
|
341
|
+
MatButtonModule,
|
|
342
|
+
MatTooltipModule,
|
|
343
|
+
MatButtonModule,
|
|
344
|
+
],
|
|
345
|
+
declarations: [TdHighlightComponent, TdCopyCodeButtonComponent],
|
|
346
|
+
exports: [TdHighlightComponent],
|
|
347
|
+
}]
|
|
348
|
+
}] });
|
|
349
|
+
|
|
350
|
+
/**
|
|
351
|
+
* Generated bundle index. Do not edit.
|
|
352
|
+
*/
|
|
353
|
+
|
|
354
|
+
export { CovalentHighlightModule, TdCopyCodeButtonComponent, TdHighlightComponent };
|
|
355
|
+
//# sourceMappingURL=covalent-highlight.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
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 {\n Component,\n Input,\n ViewChild,\n HostListener,\n EventEmitter,\n Output,\n} from '@angular/core';\nimport { MatButtonToggle } from '@angular/material/button-toggle';\nimport { MatTooltip } from '@angular/material/tooltip';\n\nexport interface ICopyCodeTooltips {\n copy?: string;\n copied?: string;\n}\n\nexport interface IRawToggleLabels {\n viewRaw?: string;\n viewCode?: 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 @Input() toggleRawButton = false;\n @Input() rawToggleLabels?: IRawToggleLabels = {};\n\n rawToggle = false;\n\n @Output() toggleRaw = new EventEmitter<boolean>();\n\n @ViewChild('copyButton') copyButton!: MatButtonToggle;\n @ViewChild('rawButton') rawButton!: MatButtonToggle;\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 get rawToggleText(): string {\n if (this.rawToggle) {\n return this.rawToggleLabels?.viewCode || 'View code';\n } else {\n return this.rawToggleLabels?.viewRaw || 'Raw';\n }\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 toggleRawClicked(): void {\n this.rawToggle = !this.rawToggle;\n this.toggleRaw.emit();\n this.rawButton.checked = false;\n }\n\n copyClicked(): void {\n console.log('copyClicked');\n this.copyButton.checked = false;\n }\n}\n","<mat-button-toggle-group\n multiple\n class=\"raw-and-copy-buttons\"\n *ngIf=\"toggleRawButton; else button\"\n>\n <mat-button-toggle (click)=\"toggleRawClicked()\" #rawButton>{{\n rawToggleText\n }}</mat-button-toggle>\n <mat-button-toggle\n [cdkCopyToClipboard]=\"copiedContent\"\n [matTooltip]=\"copyTooltip\"\n #tooltip=\"matTooltip\"\n #copyButton\n (click)=\"copyClicked()\"\n (cdkCopyToClipboardCopied)=\"textCopied($event)\"\n >\n <mat-icon width>content_copy</mat-icon>\n </mat-button-toggle>\n</mat-button-toggle-group>\n\n<ng-template #button>\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</ng-template>\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 {\n ICopyCodeTooltips,\n IRawToggleLabels,\n} 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 private _showRaw = false;\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 console.log(this._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 * toggleRawButton?: boolean\n *\n * Display button to toggle raw code.\n */\n @Input() toggleRawButton = false;\n\n /**\n * rawToggleLabels?: IRawToggleLabels\n *\n * Labels for raw toggle button.\n */\n @Input() rawToggleLabels?: IRawToggleLabels = {};\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._content =\n (<HTMLElement>this.highlightComp.nativeElement).textContent || '';\n }\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 toggleRawClicked(): void {\n this._showRaw = !this._showRaw;\n this._elementRef.nativeElement.querySelector('pre').style.display = this\n ._showRaw\n ? 'none'\n : 'block';\n this._elementRef.nativeElement.querySelector('.raw').style.display = this\n ._showRaw\n ? 'block'\n : 'none';\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\n this._elementFromString(code);\n\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): void {\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\n const highlightedCode = this._render(codeStr);\n\n codeElement.innerHTML =\n this._domSanitizer.sanitize(SecurityContext.HTML, highlightedCode) ?? '';\n\n if (this.toggleRawButton) {\n const divElement: HTMLDivElement = this._renderer.createElement('div');\n divElement.className = 'raw';\n this._renderer.appendChild(this._elementRef.nativeElement, divElement);\n divElement.innerHTML =\n this._domSanitizer.sanitize(SecurityContext.HTML, codeStr) ?? '';\n this._renderer.setStyle(divElement, 'display', 'none');\n }\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 [toggleRawButton]=\"toggleRawButton\"\n [rawToggleLabels]=\"rawToggleLabels\"\n (toggleRaw)=\"toggleRawClicked()\"\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 { MatButtonToggleModule } from '@angular/material/button-toggle';\nimport { TdCopyCodeButtonComponent } from './copy-code-button/copy-code-button.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ClipboardModule,\n MatIconModule,\n MatButtonToggleModule,\n MatButtonModule,\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":["i1","i2","i3.TdCopyCodeButtonComponent"],"mappings":"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"}
|
|
@@ -1,9 +1,15 @@
|
|
|
1
|
+
import { EventEmitter } from '@angular/core';
|
|
2
|
+
import { MatButtonToggle } from '@angular/material/button-toggle';
|
|
1
3
|
import { MatTooltip } from '@angular/material/tooltip';
|
|
2
4
|
import * as i0 from "@angular/core";
|
|
3
5
|
export interface ICopyCodeTooltips {
|
|
4
6
|
copy?: string;
|
|
5
7
|
copied?: string;
|
|
6
8
|
}
|
|
9
|
+
export interface IRawToggleLabels {
|
|
10
|
+
viewRaw?: string;
|
|
11
|
+
viewCode?: string;
|
|
12
|
+
}
|
|
7
13
|
export declare class TdCopyCodeButtonComponent {
|
|
8
14
|
copiedContent: string;
|
|
9
15
|
copyCodeToClipboard: boolean;
|
|
@@ -13,11 +19,20 @@ export declare class TdCopyCodeButtonComponent {
|
|
|
13
19
|
* Tooltips for copy button to copy and upon copying.
|
|
14
20
|
*/
|
|
15
21
|
copyCodeTooltips?: ICopyCodeTooltips;
|
|
22
|
+
toggleRawButton: boolean;
|
|
23
|
+
rawToggleLabels?: IRawToggleLabels;
|
|
24
|
+
rawToggle: boolean;
|
|
25
|
+
toggleRaw: EventEmitter<boolean>;
|
|
26
|
+
copyButton: MatButtonToggle;
|
|
27
|
+
rawButton: MatButtonToggle;
|
|
16
28
|
get copyTooltip(): string;
|
|
17
29
|
get copiedTooltip(): string;
|
|
30
|
+
get rawToggleText(): string;
|
|
18
31
|
tooltip: MatTooltip;
|
|
19
32
|
textCopied(event: boolean): void;
|
|
20
33
|
initializeTooltip(): void;
|
|
34
|
+
toggleRawClicked(): void;
|
|
35
|
+
copyClicked(): void;
|
|
21
36
|
static ɵfac: i0.ɵɵFactoryDeclaration<TdCopyCodeButtonComponent, never>;
|
|
22
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<TdCopyCodeButtonComponent, "td-copy-code-button", never, { "copiedContent": "copiedContent"; "copyCodeToClipboard": "copyCodeToClipboard"; "copyCodeTooltips": "copyCodeTooltips"; }, {}, never, never, false, never>;
|
|
37
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<TdCopyCodeButtonComponent, "td-copy-code-button", never, { "copiedContent": { "alias": "copiedContent"; "required": false; }; "copyCodeToClipboard": { "alias": "copyCodeToClipboard"; "required": false; }; "copyCodeTooltips": { "alias": "copyCodeTooltips"; "required": false; }; "toggleRawButton": { "alias": "toggleRawButton"; "required": false; }; "rawToggleLabels": { "alias": "rawToggleLabels"; "required": false; }; }, { "toggleRaw": "toggleRaw"; }, never, never, false, never>;
|
|
23
38
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { AfterViewInit, ElementRef, EventEmitter, Renderer2, ChangeDetectorRef, AfterViewChecked } from '@angular/core';
|
|
2
2
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
3
3
|
import { MatTooltip } from '@angular/material/tooltip';
|
|
4
|
-
import { ICopyCodeTooltips } from './copy-code-button/copy-code-button.component';
|
|
4
|
+
import { ICopyCodeTooltips, IRawToggleLabels } from './copy-code-button/copy-code-button.component';
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
6
6
|
export declare class TdHighlightComponent implements AfterViewInit, AfterViewChecked {
|
|
7
7
|
private _renderer;
|
|
@@ -11,6 +11,7 @@ export declare class TdHighlightComponent implements AfterViewInit, AfterViewChe
|
|
|
11
11
|
private _initialized;
|
|
12
12
|
private _content;
|
|
13
13
|
private _lang;
|
|
14
|
+
private _showRaw;
|
|
14
15
|
/**
|
|
15
16
|
* content?: string
|
|
16
17
|
*
|
|
@@ -32,6 +33,18 @@ export declare class TdHighlightComponent implements AfterViewInit, AfterViewChe
|
|
|
32
33
|
* Tooltips for copy button to copy and upon copying.
|
|
33
34
|
*/
|
|
34
35
|
copyCodeTooltips?: ICopyCodeTooltips;
|
|
36
|
+
/**
|
|
37
|
+
* toggleRawButton?: boolean
|
|
38
|
+
*
|
|
39
|
+
* Display button to toggle raw code.
|
|
40
|
+
*/
|
|
41
|
+
toggleRawButton: boolean;
|
|
42
|
+
/**
|
|
43
|
+
* rawToggleLabels?: IRawToggleLabels
|
|
44
|
+
*
|
|
45
|
+
* Labels for raw toggle button.
|
|
46
|
+
*/
|
|
47
|
+
rawToggleLabels?: IRawToggleLabels;
|
|
35
48
|
/**
|
|
36
49
|
* lang?: string
|
|
37
50
|
*
|
|
@@ -56,6 +69,7 @@ export declare class TdHighlightComponent implements AfterViewInit, AfterViewChe
|
|
|
56
69
|
ngAfterViewChecked(): void;
|
|
57
70
|
ngAfterViewInit(): void;
|
|
58
71
|
setLanguage(lang: string): void;
|
|
72
|
+
toggleRawClicked(): void;
|
|
59
73
|
/**
|
|
60
74
|
* General method to parse a string of code into HTML Elements and load them into the container
|
|
61
75
|
*/
|
|
@@ -63,5 +77,5 @@ export declare class TdHighlightComponent implements AfterViewInit, AfterViewChe
|
|
|
63
77
|
private _elementFromString;
|
|
64
78
|
private _render;
|
|
65
79
|
static ɵfac: i0.ɵɵFactoryDeclaration<TdHighlightComponent, never>;
|
|
66
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<TdHighlightComponent, "td-highlight", never, { "content": "content"; "copyCodeToClipboard": "copyCodeToClipboard"; "copyCodeTooltips": "copyCodeTooltips"; "codeLang": "codeLang"; "lang": "lang"; }, { "contentReady": "contentReady"; }, never, ["*"], false, never>;
|
|
80
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<TdHighlightComponent, "td-highlight", never, { "content": { "alias": "content"; "required": false; }; "copyCodeToClipboard": { "alias": "copyCodeToClipboard"; "required": false; }; "copyCodeTooltips": { "alias": "copyCodeTooltips"; "required": false; }; "toggleRawButton": { "alias": "toggleRawButton"; "required": false; }; "rawToggleLabels": { "alias": "rawToggleLabels"; "required": false; }; "codeLang": { "alias": "codeLang"; "required": false; }; "lang": { "alias": "lang"; "required": false; }; }, { "contentReady": "contentReady"; }, never, ["*"], false, never>;
|
|
67
81
|
}
|
|
@@ -4,10 +4,11 @@ import * as i2 from "./copy-code-button/copy-code-button.component";
|
|
|
4
4
|
import * as i3 from "@angular/common";
|
|
5
5
|
import * as i4 from "@angular/cdk/clipboard";
|
|
6
6
|
import * as i5 from "@angular/material/icon";
|
|
7
|
-
import * as i6 from "@angular/material/
|
|
7
|
+
import * as i6 from "@angular/material/button-toggle";
|
|
8
8
|
import * as i7 from "@angular/material/button";
|
|
9
|
+
import * as i8 from "@angular/material/tooltip";
|
|
9
10
|
export declare class CovalentHighlightModule {
|
|
10
11
|
static ɵfac: i0.ɵɵFactoryDeclaration<CovalentHighlightModule, never>;
|
|
11
|
-
static ɵmod: i0.ɵɵNgModuleDeclaration<CovalentHighlightModule, [typeof i1.TdHighlightComponent, typeof i2.TdCopyCodeButtonComponent], [typeof i3.CommonModule, typeof i4.ClipboardModule, typeof i5.MatIconModule, typeof i6.MatTooltipModule, typeof i7.MatButtonModule], [typeof i1.TdHighlightComponent]>;
|
|
12
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<CovalentHighlightModule, [typeof i1.TdHighlightComponent, typeof i2.TdCopyCodeButtonComponent], [typeof i3.CommonModule, typeof i4.ClipboardModule, typeof i5.MatIconModule, typeof i6.MatButtonToggleModule, typeof i7.MatButtonModule, typeof i8.MatTooltipModule, typeof i7.MatButtonModule], [typeof i1.TdHighlightComponent]>;
|
|
12
13
|
static ɵinj: i0.ɵɵInjectorDeclaration<CovalentHighlightModule>;
|
|
13
14
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@covalent/highlight",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.4.0",
|
|
4
4
|
"description": "Teradata UI Platform Highlight Module",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -20,20 +20,16 @@
|
|
|
20
20
|
"author": "Teradata UX",
|
|
21
21
|
"peerDependencies": {
|
|
22
22
|
"highlight.js": "^11.4.0",
|
|
23
|
-
"@angular/common": "
|
|
24
|
-
"@angular/core": "
|
|
25
|
-
"@angular/platform-browser": "
|
|
26
|
-
"@angular/cdk": "
|
|
27
|
-
"@angular/material": "
|
|
23
|
+
"@angular/common": "16.x.x",
|
|
24
|
+
"@angular/core": "16.x.x",
|
|
25
|
+
"@angular/platform-browser": "16.x.x",
|
|
26
|
+
"@angular/cdk": "16.x.x",
|
|
27
|
+
"@angular/material": "16.x.x"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"tslib": "^2.0.0"
|
|
31
31
|
},
|
|
32
|
-
"module": "
|
|
33
|
-
"es2020": "fesm2020/covalent-highlight.mjs",
|
|
34
|
-
"esm2020": "esm2020/covalent-highlight.mjs",
|
|
35
|
-
"fesm2020": "fesm2020/covalent-highlight.mjs",
|
|
36
|
-
"fesm2015": "fesm2015/covalent-highlight.mjs",
|
|
32
|
+
"module": "fesm2022/covalent-highlight.mjs",
|
|
37
33
|
"typings": "index.d.ts",
|
|
38
34
|
"exports": {
|
|
39
35
|
"./package.json": {
|
|
@@ -41,11 +37,9 @@
|
|
|
41
37
|
},
|
|
42
38
|
".": {
|
|
43
39
|
"types": "./index.d.ts",
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"node": "./fesm2015/covalent-highlight.mjs",
|
|
48
|
-
"default": "./fesm2020/covalent-highlight.mjs"
|
|
40
|
+
"esm2022": "./esm2022/covalent-highlight.mjs",
|
|
41
|
+
"esm": "./esm2022/covalent-highlight.mjs",
|
|
42
|
+
"default": "./fesm2022/covalent-highlight.mjs"
|
|
49
43
|
}
|
|
50
44
|
},
|
|
51
45
|
"sideEffects": false
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import { Component, Input, ViewChild, HostListener } from '@angular/core';
|
|
2
|
-
import { MatTooltip } from '@angular/material/tooltip';
|
|
3
|
-
import * as i0 from "@angular/core";
|
|
4
|
-
import * as i1 from "@angular/cdk/clipboard";
|
|
5
|
-
import * as i2 from "@angular/material/icon";
|
|
6
|
-
import * as i3 from "@angular/material/tooltip";
|
|
7
|
-
import * as i4 from "@angular/material/button";
|
|
8
|
-
export class TdCopyCodeButtonComponent {
|
|
9
|
-
constructor() {
|
|
10
|
-
this.copyCodeToClipboard = false;
|
|
11
|
-
/**
|
|
12
|
-
* copyCodeTooltips?: ICopyCodeTooltips
|
|
13
|
-
*
|
|
14
|
-
* Tooltips for copy button to copy and upon copying.
|
|
15
|
-
*/
|
|
16
|
-
this.copyCodeTooltips = {};
|
|
17
|
-
}
|
|
18
|
-
get copyTooltip() {
|
|
19
|
-
return (this.copyCodeTooltips && this.copyCodeTooltips.copy) || 'Copy';
|
|
20
|
-
}
|
|
21
|
-
get copiedTooltip() {
|
|
22
|
-
return (this.copyCodeTooltips && this.copyCodeTooltips.copied) || 'Copied';
|
|
23
|
-
}
|
|
24
|
-
textCopied(event) {
|
|
25
|
-
if (event) {
|
|
26
|
-
this.tooltip.hide();
|
|
27
|
-
this.tooltip.message = this.copiedTooltip;
|
|
28
|
-
this.tooltip.show();
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
initializeTooltip() {
|
|
32
|
-
setTimeout(() => {
|
|
33
|
-
this.tooltip.message = this.copyTooltip;
|
|
34
|
-
}, 200);
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
TdCopyCodeButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdCopyCodeButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
38
|
-
TdCopyCodeButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", 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: [""], dependencies: [{ kind: "directive", type: i1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
|
|
39
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TdCopyCodeButtonComponent, decorators: [{
|
|
40
|
-
type: Component,
|
|
41
|
-
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" }]
|
|
42
|
-
}], propDecorators: { copiedContent: [{
|
|
43
|
-
type: Input
|
|
44
|
-
}], copyCodeToClipboard: [{
|
|
45
|
-
type: Input
|
|
46
|
-
}], copyCodeTooltips: [{
|
|
47
|
-
type: Input
|
|
48
|
-
}], tooltip: [{
|
|
49
|
-
type: ViewChild,
|
|
50
|
-
args: ['tooltip']
|
|
51
|
-
}], initializeTooltip: [{
|
|
52
|
-
type: HostListener,
|
|
53
|
-
args: ['mouseleave']
|
|
54
|
-
}] } });
|
|
55
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29weS1jb2RlLWJ1dHRvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItaGlnaGxpZ2h0L3NyYy9saWIvY29weS1jb2RlLWJ1dHRvbi9jb3B5LWNvZGUtYnV0dG9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci1oaWdobGlnaHQvc3JjL2xpYi9jb3B5LWNvZGUtYnV0dG9uL2NvcHktY29kZS1idXR0b24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMxRSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sMkJBQTJCLENBQUM7Ozs7OztBQVl2RCxNQUFNLE9BQU8seUJBQXlCO0lBTHRDO1FBUVcsd0JBQW1CLEdBQUcsS0FBSyxDQUFDO1FBQ3JDOzs7O1dBSUc7UUFDTSxxQkFBZ0IsR0FBdUIsRUFBRSxDQUFDO0tBeUJwRDtJQXZCQyxJQUFJLFdBQVc7UUFDYixPQUFPLENBQUMsSUFBSSxDQUFDLGdCQUFnQixJQUFJLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxNQUFNLENBQUM7SUFDekUsQ0FBQztJQUVELElBQUksYUFBYTtRQUNmLE9BQU8sQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLElBQUksSUFBSSxDQUFDLGdCQUFnQixDQUFDLE1BQU0sQ0FBQyxJQUFJLFFBQVEsQ0FBQztJQUM3RSxDQUFDO0lBSUQsVUFBVSxDQUFDLEtBQWM7UUFDdkIsSUFBSSxLQUFLLEVBQUU7WUFDVCxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksRUFBRSxDQUFDO1lBQ3BCLElBQUksQ0FBQyxPQUFPLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUM7WUFDMUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztTQUNyQjtJQUNILENBQUM7SUFFRCxpQkFBaUI7UUFDZixVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsSUFBSSxDQUFDLE9BQU8sQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQztRQUMxQyxDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUM7SUFDVixDQUFDOztzSEFqQ1UseUJBQXlCOzBHQUF6Qix5QkFBeUIsMlZDYnRDLGlSQVVBOzJGREdhLHlCQUF5QjtrQkFMckMsU0FBUzsrQkFDRSxxQkFBcUI7OEJBTXRCLGFBQWE7c0JBQXJCLEtBQUs7Z0JBQ0csbUJBQW1CO3NCQUEzQixLQUFLO2dCQU1HLGdCQUFnQjtzQkFBeEIsS0FBSztnQkFVZ0IsT0FBTztzQkFBNUIsU0FBUzt1QkFBQyxTQUFTO2dCQVVwQixpQkFBaUI7c0JBRGhCLFlBQVk7dUJBQUMsWUFBWSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIFZpZXdDaGlsZCwgSG9zdExpc3RlbmVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBNYXRUb29sdGlwIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvdG9vbHRpcCc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgSUNvcHlDb2RlVG9vbHRpcHMge1xuICBjb3B5Pzogc3RyaW5nO1xuICBjb3BpZWQ/OiBzdHJpbmc7XG59XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3RkLWNvcHktY29kZS1idXR0b24nLFxuICB0ZW1wbGF0ZVVybDogJy4vY29weS1jb2RlLWJ1dHRvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2NvcHktY29kZS1idXR0b24uY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgVGRDb3B5Q29kZUJ1dHRvbkNvbXBvbmVudCB7XG4gIC8vIHByaXZhdGUgX2NvcHlDb2RlVG9vbHRpcHM6IElDb3B5Q29kZVRvb2x0aXBzID0ge307XG4gIEBJbnB1dCgpIGNvcGllZENvbnRlbnQhOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGNvcHlDb2RlVG9DbGlwYm9hcmQgPSBmYWxzZTtcbiAgLyoqXG4gICAqIGNvcHlDb2RlVG9vbHRpcHM/OiBJQ29weUNvZGVUb29sdGlwc1xuICAgKlxuICAgKiBUb29sdGlwcyBmb3IgY29weSBidXR0b24gdG8gY29weSBhbmQgdXBvbiBjb3B5aW5nLlxuICAgKi9cbiAgQElucHV0KCkgY29weUNvZGVUb29sdGlwcz86IElDb3B5Q29kZVRvb2x0aXBzID0ge307XG5cbiAgZ2V0IGNvcHlUb29sdGlwKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuICh0aGlzLmNvcHlDb2RlVG9vbHRpcHMgJiYgdGhpcy5jb3B5Q29kZVRvb2x0aXBzLmNvcHkpIHx8ICdDb3B5JztcbiAgfVxuXG4gIGdldCBjb3BpZWRUb29sdGlwKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuICh0aGlzLmNvcHlDb2RlVG9vbHRpcHMgJiYgdGhpcy5jb3B5Q29kZVRvb2x0aXBzLmNvcGllZCkgfHwgJ0NvcGllZCc7XG4gIH1cblxuICBAVmlld0NoaWxkKCd0b29sdGlwJykgdG9vbHRpcCE6IE1hdFRvb2x0aXA7XG5cbiAgdGV4dENvcGllZChldmVudDogYm9vbGVhbik6IHZvaWQge1xuICAgIGlmIChldmVudCkge1xuICAgICAgdGhpcy50b29sdGlwLmhpZGUoKTtcbiAgICAgIHRoaXMudG9vbHRpcC5tZXNzYWdlID0gdGhpcy5jb3BpZWRUb29sdGlwO1xuICAgICAgdGhpcy50b29sdGlwLnNob3coKTtcbiAgICB9XG4gIH1cbiAgQEhvc3RMaXN0ZW5lcignbW91c2VsZWF2ZScpXG4gIGluaXRpYWxpemVUb29sdGlwKCk6IHZvaWQge1xuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgdGhpcy50b29sdGlwLm1lc3NhZ2UgPSB0aGlzLmNvcHlUb29sdGlwO1xuICAgIH0sIDIwMCk7XG4gIH1cbn1cbiIsIjxidXR0b25cbiAgbWF0LWljb24tYnV0dG9uXG4gIFtjZGtDb3B5VG9DbGlwYm9hcmRdPVwiY29waWVkQ29udGVudFwiXG4gIGNsYXNzPVwiY29weS1idXR0b25cIlxuICBbbWF0VG9vbHRpcF09XCJjb3B5VG9vbHRpcFwiXG4gICN0b29sdGlwPVwibWF0VG9vbHRpcFwiXG4gIChjZGtDb3B5VG9DbGlwYm9hcmRDb3BpZWQpPVwidGV4dENvcGllZCgkZXZlbnQpXCJcbj5cbiAgPG1hdC1pY29uIHJvbGU9XCJpbWdcIj5jb250ZW50X2NvcHk8L21hdC1pY29uPlxuPC9idXR0b24+XG4iXX0=
|