@koobiq/components 17.0.2 → 17.0.3
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/code-block/_code-block-theme.scss +7 -16
- package/code-block/actionbar.component.d.ts +1 -2
- package/code-block/actionbar.component.scss +24 -13
- package/code-block/code-block.component.d.ts +16 -4
- package/code-block/code-block.scss +13 -6
- package/esm2022/code-block/actionbar.component.mjs +4 -7
- package/esm2022/code-block/code-block.component.mjs +69 -20
- package/esm2022/core/version.mjs +2 -2
- package/fesm2022/koobiq-components-code-block.mjs +71 -25
- package/fesm2022/koobiq-components-code-block.mjs.map +1 -1
- package/fesm2022/koobiq-components-core.mjs +1 -1
- package/fesm2022/koobiq-components-core.mjs.map +1 -1
- package/package.json +4 -4
- package/prebuilt-themes/dark-theme.css +1 -1
- package/prebuilt-themes/light-theme.css +1 -1
- package/schematics/ng-add/index.js +2 -2
|
@@ -28,6 +28,12 @@
|
|
|
28
28
|
|
|
29
29
|
& .kbq-code-block-actionbar {
|
|
30
30
|
background: kbq-css-variable(#{$base}-actionbar-background, map.get($style, actionbar, background));
|
|
31
|
+
|
|
32
|
+
&.kbq-actionbar-block_floating {
|
|
33
|
+
.kbq-actionbar-block__button-stack {
|
|
34
|
+
background: kbq-css-variable(#{$base}-actionbar-background, map.get($style, actionbar, background));
|
|
35
|
+
}
|
|
36
|
+
}
|
|
31
37
|
}
|
|
32
38
|
|
|
33
39
|
&.kbq-code-block_header-with-shadow {
|
|
@@ -38,8 +44,6 @@
|
|
|
38
44
|
|
|
39
45
|
&.kbq-code-block_no-header {
|
|
40
46
|
& .kbq-code-block__fade-gradient {
|
|
41
|
-
display: block;
|
|
42
|
-
|
|
43
47
|
background: kbq-css-variable(#{$base}-actionbar-fade-gradient, map.get($style, actionbar, fade-gradient));
|
|
44
48
|
}
|
|
45
49
|
}
|
|
@@ -361,7 +365,7 @@
|
|
|
361
365
|
.kbq-tab-group.kbq-focused {
|
|
362
366
|
// paint focus border from the top since because of border constraints
|
|
363
367
|
.kbq-tab-header {
|
|
364
|
-
box-shadow: 0
|
|
368
|
+
box-shadow: 0 2px 0 -1px kbq-css-variable(states-focused-color, map.get($theme, states, focused-color));
|
|
365
369
|
}
|
|
366
370
|
|
|
367
371
|
.kbq-tab-body__wrapper {
|
|
@@ -371,19 +375,6 @@
|
|
|
371
375
|
}
|
|
372
376
|
}
|
|
373
377
|
}
|
|
374
|
-
|
|
375
|
-
.kbq-code-block-actionbar {
|
|
376
|
-
.kbq-code-block-actionbar_less-contrast {
|
|
377
|
-
background-color: kbq-css-variable(
|
|
378
|
-
code-block-actionbar-bg-less-contrast,
|
|
379
|
-
map.get($code-block, actionbar, bg-less-contrast)
|
|
380
|
-
);
|
|
381
|
-
}
|
|
382
|
-
|
|
383
|
-
&.kbq-actionbar-block_floating {
|
|
384
|
-
background-color: kbq-css-variable(code-block-actionbar-bg, map.get($code-block, actionbar, bg));
|
|
385
|
-
}
|
|
386
|
-
}
|
|
387
378
|
}
|
|
388
379
|
|
|
389
380
|
@mixin kbq-code-block-typography($config) {
|
|
@@ -6,7 +6,6 @@ export declare class KbqActionBarComponent implements AfterViewInit {
|
|
|
6
6
|
copyTooltip: KbqTooltipTrigger;
|
|
7
7
|
config: KbqCodeBlockConfiguration;
|
|
8
8
|
codeFiles: KbqCodeFile[];
|
|
9
|
-
lessContrast: boolean;
|
|
10
9
|
selectedTabIndex: number;
|
|
11
10
|
multiLine: boolean;
|
|
12
11
|
softWrap: boolean;
|
|
@@ -19,5 +18,5 @@ export declare class KbqActionBarComponent implements AfterViewInit {
|
|
|
19
18
|
ngAfterViewInit(): void;
|
|
20
19
|
onCopy(): void;
|
|
21
20
|
static ɵfac: i0.ɵɵFactoryDeclaration<KbqActionBarComponent, never>;
|
|
22
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<KbqActionBarComponent, "kbq-actionbar-block", never, { "config": { "alias": "config"; "required": false; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; "
|
|
21
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<KbqActionBarComponent, "kbq-actionbar-block", never, { "config": { "alias": "config"; "required": false; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; "selectedTabIndex": { "alias": "selectedTabIndex"; "required": false; }; "multiLine": { "alias": "multiLine"; "required": false; }; "softWrap": { "alias": "softWrap"; "required": false; }; "canLoad": { "alias": "canLoad"; "required": false; }; }, { "toggleSoftWrap": "toggleSoftWrap"; "downloadCode": "downloadCode"; "copyCode": "copyCode"; "openExternalSystem": "openExternalSystem"; }, never, never, false, never>;
|
|
23
22
|
}
|
|
@@ -4,6 +4,8 @@
|
|
|
4
4
|
@use '../core/styles/common/tokens' as *;
|
|
5
5
|
|
|
6
6
|
$tokens: meta.module-variables(tokens) !default;
|
|
7
|
+
$actionbar-indents: kbq-css-variable(code-block-size-actionbar-padding-vertical)
|
|
8
|
+
kbq-css-variable(code-block-size-actionbar-padding-horizontal);
|
|
7
9
|
|
|
8
10
|
.kbq-code-block-actionbar {
|
|
9
11
|
display: flex;
|
|
@@ -12,25 +14,34 @@ $tokens: meta.module-variables(tokens) !default;
|
|
|
12
14
|
|
|
13
15
|
position: absolute;
|
|
14
16
|
|
|
15
|
-
top
|
|
17
|
+
// position to top to the height of tab-header
|
|
18
|
+
top: -48px;
|
|
16
19
|
right: 0;
|
|
17
20
|
|
|
18
|
-
margin:
|
|
19
|
-
kbq-css-variable(code-block-size-actionbar-padding-horizontal);
|
|
21
|
+
margin: $actionbar-indents;
|
|
20
22
|
|
|
21
|
-
|
|
23
|
+
.kbq-actionbar-block__button-stack {
|
|
24
|
+
gap: kbq-css-variable(code-block-size-actionbar-content-gap-horizontal);
|
|
25
|
+
}
|
|
22
26
|
|
|
23
|
-
|
|
27
|
+
.kbq-code-block__fade-gradient {
|
|
24
28
|
display: none;
|
|
25
29
|
|
|
26
30
|
width: kbq-css-variable(code-block-size-actionbar-fade-gradient-width);
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&.kbq-actionbar-block_floating {
|
|
34
|
+
top: 0;
|
|
35
|
+
margin: unset;
|
|
36
|
+
background: transparent !important;
|
|
37
|
+
|
|
38
|
+
.kbq-code-block__fade-gradient {
|
|
39
|
+
display: block;
|
|
40
|
+
align-self: stretch;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.kbq-actionbar-block__button-stack {
|
|
44
|
+
padding: $actionbar-indents;
|
|
45
|
+
}
|
|
35
46
|
}
|
|
36
47
|
}
|
|
@@ -45,11 +45,13 @@ export declare class KbqCodeBlockComponent implements AfterViewInit, OnDestroy {
|
|
|
45
45
|
config: KbqCodeBlockConfiguration;
|
|
46
46
|
tabGroup: KbqTabGroup;
|
|
47
47
|
lineNumbers: boolean;
|
|
48
|
-
codeFiles: KbqCodeFile[];
|
|
49
48
|
filled: boolean;
|
|
50
49
|
maxHeight: number;
|
|
51
50
|
softWrap: boolean;
|
|
52
51
|
canLoad: boolean;
|
|
52
|
+
get codeFiles(): KbqCodeFile[];
|
|
53
|
+
set codeFiles(files: KbqCodeFile[]);
|
|
54
|
+
private _codeFiles;
|
|
53
55
|
get noHeader(): any;
|
|
54
56
|
get singleFile(): boolean;
|
|
55
57
|
selectedTabIndex: number;
|
|
@@ -57,12 +59,17 @@ export declare class KbqCodeBlockComponent implements AfterViewInit, OnDestroy {
|
|
|
57
59
|
viewAll: boolean;
|
|
58
60
|
multiLine: boolean;
|
|
59
61
|
isTopOverflow: boolean;
|
|
60
|
-
|
|
62
|
+
hasKeyboardFocus: boolean;
|
|
63
|
+
/**
|
|
64
|
+
* @docs-private
|
|
65
|
+
*/
|
|
66
|
+
actionbarHidden?: boolean;
|
|
61
67
|
readonly resizeStream: Subject<Event>;
|
|
62
68
|
readonly currentCodeBlock: Subject<HTMLElement>;
|
|
63
69
|
private readonly resizeDebounceInterval;
|
|
64
70
|
private resizeSubscription;
|
|
65
71
|
private codeBlockSubscription;
|
|
72
|
+
private hoverSubscription;
|
|
66
73
|
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, clipboard: Clipboard, renderer: Renderer2, focusMonitor: FocusMonitor, config: KbqCodeBlockConfiguration);
|
|
67
74
|
ngAfterViewInit(): void;
|
|
68
75
|
ngOnDestroy(): void;
|
|
@@ -78,9 +85,14 @@ export declare class KbqCodeBlockComponent implements AfterViewInit, OnDestroy {
|
|
|
78
85
|
checkOverflow(currentCodeContentElement: HTMLElement): void;
|
|
79
86
|
onShowMoreClick(currentCodeContentElement: HTMLPreElement): void;
|
|
80
87
|
canShowFocus(currentCodeContent: HTMLPreElement): boolean;
|
|
88
|
+
onEnter(currentCodeBlock: HTMLPreElement): void;
|
|
89
|
+
/** @docs-private */
|
|
90
|
+
showActionBarIfNecessary(): void;
|
|
91
|
+
/** @docs-private */
|
|
92
|
+
hideActionBarIfNoHeader(event?: FocusEvent | null): void;
|
|
81
93
|
private updateMultiline;
|
|
82
94
|
private getFullFileName;
|
|
83
|
-
|
|
95
|
+
private subscribeToHover;
|
|
84
96
|
static ɵfac: i0.ɵɵFactoryDeclaration<KbqCodeBlockComponent, [null, null, null, null, null, { optional: true; }]>;
|
|
85
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<KbqCodeBlockComponent, "kbq-code-block", ["kbqCodeBlock"], { "lineNumbers": { "alias": "lineNumbers"; "required": false; }; "
|
|
97
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<KbqCodeBlockComponent, "kbq-code-block", ["kbqCodeBlock"], { "lineNumbers": { "alias": "lineNumbers"; "required": false; }; "filled": { "alias": "filled"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "softWrap": { "alias": "softWrap"; "required": false; }; "canLoad": { "alias": "canLoad"; "required": false; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; }, {}, never, never, false, never>;
|
|
86
98
|
}
|
|
@@ -27,7 +27,7 @@ $border-width: kbq-css-variable(code-block-size-container-border-width);
|
|
|
27
27
|
// 4 buttons + margin
|
|
28
28
|
$buttons-margin: calc(32 * 4) + 24px;
|
|
29
29
|
|
|
30
|
-
padding: kbq-css-variable(code-block-size-header-padding-vertical)
|
|
30
|
+
padding: calc(kbq-css-variable(code-block-size-header-padding-vertical) - $border-width)
|
|
31
31
|
calc(
|
|
32
32
|
var(--kbq-code-block-size-header-padding-right, map.get($tokens, code-block-size-header-padding-right)) +
|
|
33
33
|
$buttons-margin
|
|
@@ -47,6 +47,14 @@ $border-width: kbq-css-variable(code-block-size-container-border-width);
|
|
|
47
47
|
overflow-x: scroll;
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
|
+
|
|
51
|
+
&:has(.kbq-code-block__show-more_collapsed) {
|
|
52
|
+
.kbq-code-block__code {
|
|
53
|
+
& > code {
|
|
54
|
+
overflow-x: hidden;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
50
58
|
}
|
|
51
59
|
|
|
52
60
|
.kbq-code-block__code {
|
|
@@ -87,6 +95,8 @@ $border-width: kbq-css-variable(code-block-size-container-border-width);
|
|
|
87
95
|
&:not(.kbq-code-block_no-header) {
|
|
88
96
|
.kbq-tab-body__wrapper {
|
|
89
97
|
border-top-width: 0;
|
|
98
|
+
// actionbar can be visible when positioned in the header
|
|
99
|
+
overflow: visible;
|
|
90
100
|
}
|
|
91
101
|
}
|
|
92
102
|
|
|
@@ -126,8 +136,6 @@ $border-width: kbq-css-variable(code-block-size-container-border-width);
|
|
|
126
136
|
|
|
127
137
|
.kbq-tab-body__wrapper {
|
|
128
138
|
flex-direction: column;
|
|
129
|
-
position: unset;
|
|
130
|
-
|
|
131
139
|
border-width: $border-width;
|
|
132
140
|
border-style: solid;
|
|
133
141
|
border-radius: 0 0 $border-radius $border-radius;
|
|
@@ -171,12 +179,11 @@ $border-width: kbq-css-variable(code-block-size-container-border-width);
|
|
|
171
179
|
.kbq-code-block__show-more {
|
|
172
180
|
display: flex;
|
|
173
181
|
justify-content: center;
|
|
174
|
-
overflow: hidden;
|
|
175
182
|
|
|
176
|
-
width:
|
|
183
|
+
width: 100%;
|
|
177
184
|
|
|
178
185
|
position: absolute;
|
|
179
|
-
bottom:
|
|
186
|
+
bottom: 0;
|
|
180
187
|
border-radius: $border-radius;
|
|
181
188
|
|
|
182
189
|
&.kbq-code-block__show-more_collapsed {
|
|
@@ -30,14 +30,13 @@ export class KbqActionBarComponent {
|
|
|
30
30
|
});
|
|
31
31
|
}
|
|
32
32
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
33
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqActionBarComponent, selector: "kbq-actionbar-block", inputs: { config: "config", codeFiles: "codeFiles",
|
|
33
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqActionBarComponent, selector: "kbq-actionbar-block", inputs: { config: "config", codeFiles: "codeFiles", selectedTabIndex: "selectedTabIndex", multiLine: "multiLine", softWrap: "softWrap", canLoad: "canLoad" }, outputs: { toggleSoftWrap: "toggleSoftWrap", downloadCode: "downloadCode", copyCode: "copyCode", openExternalSystem: "openExternalSystem" }, host: { classAttribute: "kbq-code-block-actionbar" }, viewQueries: [{ propertyName: "copyTooltip", first: true, predicate: ["copyTooltip"], descendants: true }], ngImport: i0, template: "<div class=\"kbq-code-block__fade-gradient\"></div>\n\n<div class=\"kbq-actionbar-block__button-stack layout-row\">\n <button\n *ngIf=\"multiLine\"\n kbq-button\n [color]=\"'contrast'\"\n [kbqStyle]=\"'transparent'\"\n [kbqTooltip]=\"softWrap ? config.softWrapOffTooltip : config.softWrapOnTooltip\"\n (click)=\"toggleSoftWrap.emit()\"\n >\n <i\n *ngIf=\"!softWrap\"\n kbq-icon=\"mc-word-wrap_16\"\n ></i>\n <i\n *ngIf=\"softWrap\"\n kbq-icon=\"mc-word-wrap-slash_16\"\n ></i>\n </button>\n\n <button\n *ngIf=\"canLoad\"\n kbq-button\n [color]=\"'contrast'\"\n [kbqStyle]=\"'transparent'\"\n [kbqTooltip]=\"config.downloadTooltip\"\n (click)=\"downloadCode.emit()\"\n >\n <i kbq-icon=\"mc-download_16\"></i>\n </button>\n\n <button\n #copyTooltip=\"kbqTooltip\"\n kbq-button\n [color]=\"'contrast'\"\n [kbqStyle]=\"'transparent'\"\n [kbqTooltip]=\"copyTooltipText\"\n (click)=\"onCopy()\"\n >\n <i kbq-icon=\"mc-copy-o_16\"></i>\n </button>\n\n <button\n *ngIf=\"codeFiles[selectedTabIndex].link\"\n kbq-button\n [color]=\"'contrast'\"\n [kbqStyle]=\"'transparent'\"\n [kbqTooltip]=\"config.openExternalSystemTooltip\"\n (click)=\"openExternalSystem.emit()\"\n >\n <i kbq-icon=\"mc-external-link_16\"></i>\n </button>\n</div>\n", styles: [".kbq-code-block-actionbar{display:flex;justify-content:right;align-items:center;position:absolute;top:-48px;right:0;margin:var(--kbq-code-block-size-actionbar-padding-vertical, 8px) var(--kbq-code-block-size-actionbar-padding-horizontal, 12px)}.kbq-code-block-actionbar .kbq-actionbar-block__button-stack{gap:var(--kbq-code-block-size-actionbar-content-gap-horizontal, 2px)}.kbq-code-block-actionbar .kbq-code-block__fade-gradient{display:none;width:var(--kbq-code-block-size-actionbar-fade-gradient-width, 32px)}.kbq-code-block-actionbar.kbq-actionbar-block_floating{top:0;margin:unset;background:transparent!important}.kbq-code-block-actionbar.kbq-actionbar-block_floating .kbq-code-block__fade-gradient{display:block;align-self:stretch}.kbq-code-block-actionbar.kbq-actionbar-block_floating .kbq-actionbar-block__button-stack{padding:var(--kbq-code-block-size-actionbar-padding-vertical, 8px) var(--kbq-code-block-size-actionbar-padding-horizontal, 12px)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.KbqButton, selector: "[kbq-button]", inputs: ["color", "tabIndex", "kbqStyle", "disabled"] }, { kind: "directive", type: i2.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: i3.KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqVisible", "kbqPlacement", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipColor"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "component", type: i4.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
34
34
|
}
|
|
35
35
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqActionBarComponent, decorators: [{
|
|
36
36
|
type: Component,
|
|
37
37
|
args: [{ selector: 'kbq-actionbar-block', host: {
|
|
38
|
-
class: 'kbq-code-block-actionbar'
|
|
39
|
-
|
|
40
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kbq-code-block__fade-gradient\"></div>\n\n<button\n *ngIf=\"multiLine\"\n kbq-button\n [color]=\"'contrast'\"\n [kbqStyle]=\"'transparent'\"\n [kbqTooltip]=\"softWrap ? config.softWrapOffTooltip : config.softWrapOnTooltip\"\n (click)=\"toggleSoftWrap.emit()\"\n>\n <i\n *ngIf=\"!softWrap\"\n kbq-icon=\"mc-word-wrap_16\"\n ></i>\n <i\n *ngIf=\"softWrap\"\n kbq-icon=\"mc-word-wrap-slash_16\"\n ></i>\n</button>\n\n<button\n *ngIf=\"canLoad\"\n kbq-button\n [color]=\"'contrast'\"\n [kbqStyle]=\"'transparent'\"\n [kbqTooltip]=\"config.downloadTooltip\"\n (click)=\"downloadCode.emit()\"\n>\n <i kbq-icon=\"mc-download_16\"></i>\n</button>\n\n<button\n #copyTooltip=\"kbqTooltip\"\n kbq-button\n [color]=\"'contrast'\"\n [kbqStyle]=\"'transparent'\"\n [kbqTooltip]=\"copyTooltipText\"\n (click)=\"onCopy()\"\n>\n <i kbq-icon=\"mc-copy-o_16\"></i>\n</button>\n\n<button\n *ngIf=\"codeFiles[selectedTabIndex].link\"\n kbq-button\n [color]=\"'contrast'\"\n [kbqStyle]=\"'transparent'\"\n [kbqTooltip]=\"config.openExternalSystemTooltip\"\n (click)=\"openExternalSystem.emit()\"\n>\n <i kbq-icon=\"mc-external-link_16\"></i>\n</button>\n", styles: [".kbq-code-block-actionbar{display:flex;justify-content:right;align-items:center;position:absolute;top:0;right:0;margin:var(--kbq-code-block-size-actionbar-padding-vertical, 8px) var(--kbq-code-block-size-actionbar-padding-horizontal, 12px);gap:var(--kbq-code-block-size-actionbar-content-gap-horizontal, 2px)}.kbq-code-block-actionbar .kbq-code-block__fade-gradient{display:none;width:var(--kbq-code-block-size-actionbar-fade-gradient-width, 32px);height:32px;margin-top:calc(var(--kbq-code-block-size-actionbar-padding-vertical, 8px) * -1)}\n"] }]
|
|
38
|
+
class: 'kbq-code-block-actionbar'
|
|
39
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kbq-code-block__fade-gradient\"></div>\n\n<div class=\"kbq-actionbar-block__button-stack layout-row\">\n <button\n *ngIf=\"multiLine\"\n kbq-button\n [color]=\"'contrast'\"\n [kbqStyle]=\"'transparent'\"\n [kbqTooltip]=\"softWrap ? config.softWrapOffTooltip : config.softWrapOnTooltip\"\n (click)=\"toggleSoftWrap.emit()\"\n >\n <i\n *ngIf=\"!softWrap\"\n kbq-icon=\"mc-word-wrap_16\"\n ></i>\n <i\n *ngIf=\"softWrap\"\n kbq-icon=\"mc-word-wrap-slash_16\"\n ></i>\n </button>\n\n <button\n *ngIf=\"canLoad\"\n kbq-button\n [color]=\"'contrast'\"\n [kbqStyle]=\"'transparent'\"\n [kbqTooltip]=\"config.downloadTooltip\"\n (click)=\"downloadCode.emit()\"\n >\n <i kbq-icon=\"mc-download_16\"></i>\n </button>\n\n <button\n #copyTooltip=\"kbqTooltip\"\n kbq-button\n [color]=\"'contrast'\"\n [kbqStyle]=\"'transparent'\"\n [kbqTooltip]=\"copyTooltipText\"\n (click)=\"onCopy()\"\n >\n <i kbq-icon=\"mc-copy-o_16\"></i>\n </button>\n\n <button\n *ngIf=\"codeFiles[selectedTabIndex].link\"\n kbq-button\n [color]=\"'contrast'\"\n [kbqStyle]=\"'transparent'\"\n [kbqTooltip]=\"config.openExternalSystemTooltip\"\n (click)=\"openExternalSystem.emit()\"\n >\n <i kbq-icon=\"mc-external-link_16\"></i>\n </button>\n</div>\n", styles: [".kbq-code-block-actionbar{display:flex;justify-content:right;align-items:center;position:absolute;top:-48px;right:0;margin:var(--kbq-code-block-size-actionbar-padding-vertical, 8px) var(--kbq-code-block-size-actionbar-padding-horizontal, 12px)}.kbq-code-block-actionbar .kbq-actionbar-block__button-stack{gap:var(--kbq-code-block-size-actionbar-content-gap-horizontal, 2px)}.kbq-code-block-actionbar .kbq-code-block__fade-gradient{display:none;width:var(--kbq-code-block-size-actionbar-fade-gradient-width, 32px)}.kbq-code-block-actionbar.kbq-actionbar-block_floating{top:0;margin:unset;background:transparent!important}.kbq-code-block-actionbar.kbq-actionbar-block_floating .kbq-code-block__fade-gradient{display:block;align-self:stretch}.kbq-code-block-actionbar.kbq-actionbar-block_floating .kbq-actionbar-block__button-stack{padding:var(--kbq-code-block-size-actionbar-padding-vertical, 8px) var(--kbq-code-block-size-actionbar-padding-horizontal, 12px)}\n"] }]
|
|
41
40
|
}], propDecorators: { copyTooltip: [{
|
|
42
41
|
type: ViewChild,
|
|
43
42
|
args: ['copyTooltip']
|
|
@@ -45,8 +44,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
|
|
|
45
44
|
type: Input
|
|
46
45
|
}], codeFiles: [{
|
|
47
46
|
type: Input
|
|
48
|
-
}], lessContrast: [{
|
|
49
|
-
type: Input
|
|
50
47
|
}], selectedTabIndex: [{
|
|
51
48
|
type: Input
|
|
52
49
|
}], multiLine: [{
|
|
@@ -64,4 +61,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
|
|
|
64
61
|
}], openExternalSystem: [{
|
|
65
62
|
type: Output
|
|
66
63
|
}] } });
|
|
67
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
64
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWN0aW9uYmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3BhY2thZ2VzL2NvbXBvbmVudHMvY29kZS1ibG9jay9hY3Rpb25iYXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vcGFja2FnZXMvY29tcG9uZW50cy9jb2RlLWJsb2NrL2FjdGlvbmJhci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRUgsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sRUFDTixTQUFTLEVBQ1QsaUJBQWlCLEVBQ3BCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQy9ELE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7O0FBYXhDLE1BQU0sT0FBTyxxQkFBcUI7SUFWbEM7UUFlYSxxQkFBZ0IsR0FBRyxDQUFDLENBQUM7UUFLcEIsbUJBQWMsR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO1FBQzFDLGlCQUFZLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQUN4QyxhQUFRLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQUNwQyx1QkFBa0IsR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO0tBc0IzRDtJQWxCRyxlQUFlO1FBQ1gsSUFBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLFdBQVcsQ0FBQztRQUUvQyxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLEdBQUcsRUFBRTtZQUMxRSxJQUFJLElBQUksQ0FBQyxlQUFlLEtBQUssSUFBSSxDQUFDLE1BQU0sQ0FBQyxhQUFhLEVBQUUsQ0FBQztnQkFDckQsSUFBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLFdBQVcsQ0FBQztZQUNuRCxDQUFDO1FBQ0wsQ0FBQyxDQUFDLENBQUM7SUFDUCxDQUFDO0lBRUQsTUFBTTtRQUNGLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxFQUFFLENBQUM7UUFFckIsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNaLElBQUksQ0FBQyxlQUFlLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxhQUFhLENBQUM7WUFDakQsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUM1QixDQUFDLENBQUMsQ0FBQztJQUNQLENBQUM7aUlBbENRLHFCQUFxQjtxSEFBckIscUJBQXFCLHdnQkN4QmxDLHMvQ0FzREE7OzJGRDlCYSxxQkFBcUI7a0JBVmpDLFNBQVM7K0JBQ0kscUJBQXFCLFFBR3pCO3dCQUNGLEtBQUssRUFBRSwwQkFBMEI7cUJBQ3BDLGlCQUNjLGlCQUFpQixDQUFDLElBQUksbUJBQ3BCLHVCQUF1QixDQUFDLE1BQU07OEJBR3JCLFdBQVc7c0JBQXBDLFNBQVM7dUJBQUMsYUFBYTtnQkFFZixNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxnQkFBZ0I7c0JBQXhCLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFFSSxjQUFjO3NCQUF2QixNQUFNO2dCQUNHLFlBQVk7c0JBQXJCLE1BQU07Z0JBQ0csUUFBUTtzQkFBakIsTUFBTTtnQkFDRyxrQkFBa0I7c0JBQTNCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIEFmdGVyVmlld0luaXQsXG4gICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICAgQ29tcG9uZW50LFxuICAgIEV2ZW50RW1pdHRlcixcbiAgICBJbnB1dCxcbiAgICBPdXRwdXQsXG4gICAgVmlld0NoaWxkLFxuICAgIFZpZXdFbmNhcHN1bGF0aW9uXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgS2JxVG9vbHRpcFRyaWdnZXIgfSBmcm9tICdAa29vYmlxL2NvbXBvbmVudHMvdG9vbHRpcCc7XG5pbXBvcnQgeyBmaWx0ZXIgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyBLYnFDb2RlQmxvY2tDb25maWd1cmF0aW9uLCBLYnFDb2RlRmlsZSB9IGZyb20gJy4vY29kZS1ibG9jay50eXBlcyc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAna2JxLWFjdGlvbmJhci1ibG9jaycsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2FjdGlvbmJhci5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vYWN0aW9uYmFyLmNvbXBvbmVudC5zY3NzJ10sXG4gICAgaG9zdDoge1xuICAgICAgICBjbGFzczogJ2ticS1jb2RlLWJsb2NrLWFjdGlvbmJhcidcbiAgICB9LFxuICAgIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2hcbn0pXG5leHBvcnQgY2xhc3MgS2JxQWN0aW9uQmFyQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XG4gICAgQFZpZXdDaGlsZCgnY29weVRvb2x0aXAnKSBjb3B5VG9vbHRpcDogS2JxVG9vbHRpcFRyaWdnZXI7XG5cbiAgICBASW5wdXQoKSBjb25maWc6IEticUNvZGVCbG9ja0NvbmZpZ3VyYXRpb247XG4gICAgQElucHV0KCkgY29kZUZpbGVzOiBLYnFDb2RlRmlsZVtdO1xuICAgIEBJbnB1dCgpIHNlbGVjdGVkVGFiSW5kZXggPSAwO1xuICAgIEBJbnB1dCgpIG11bHRpTGluZTogYm9vbGVhbjtcbiAgICBASW5wdXQoKSBzb2Z0V3JhcDogYm9vbGVhbjtcbiAgICBASW5wdXQoKSBjYW5Mb2FkOiBib29sZWFuO1xuXG4gICAgQE91dHB1dCgpIHRvZ2dsZVNvZnRXcmFwID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuICAgIEBPdXRwdXQoKSBkb3dubG9hZENvZGUgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG4gICAgQE91dHB1dCgpIGNvcHlDb2RlID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuICAgIEBPdXRwdXQoKSBvcGVuRXh0ZXJuYWxTeXN0ZW0gPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cbiAgICBjb3B5VG9vbHRpcFRleHQ6IHN0cmluZztcblxuICAgIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5jb3B5VG9vbHRpcFRleHQgPSB0aGlzLmNvbmZpZy5jb3B5VG9vbHRpcDtcblxuICAgICAgICB0aGlzLmNvcHlUb29sdGlwLnZpc2libGVDaGFuZ2UucGlwZShmaWx0ZXIoKHN0YXRlKSA9PiAhc3RhdGUpKS5zdWJzY3JpYmUoKCkgPT4ge1xuICAgICAgICAgICAgaWYgKHRoaXMuY29weVRvb2x0aXBUZXh0ID09PSB0aGlzLmNvbmZpZy5jb3BpZWRUb29sdGlwKSB7XG4gICAgICAgICAgICAgICAgdGhpcy5jb3B5VG9vbHRpcFRleHQgPSB0aGlzLmNvbmZpZy5jb3B5VG9vbHRpcDtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgb25Db3B5KCkge1xuICAgICAgICB0aGlzLmNvcHlDb2RlLmVtaXQoKTtcblxuICAgICAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgICAgICAgIHRoaXMuY29weVRvb2x0aXBUZXh0ID0gdGhpcy5jb25maWcuY29waWVkVG9vbHRpcDtcbiAgICAgICAgICAgIHRoaXMuY29weVRvb2x0aXAuc2hvdygpO1xuICAgICAgICB9KTtcbiAgICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwia2JxLWNvZGUtYmxvY2tfX2ZhZGUtZ3JhZGllbnRcIj48L2Rpdj5cblxuPGRpdiBjbGFzcz1cImticS1hY3Rpb25iYXItYmxvY2tfX2J1dHRvbi1zdGFjayBsYXlvdXQtcm93XCI+XG4gICAgPGJ1dHRvblxuICAgICAgICAqbmdJZj1cIm11bHRpTGluZVwiXG4gICAgICAgIGticS1idXR0b25cbiAgICAgICAgW2NvbG9yXT1cIidjb250cmFzdCdcIlxuICAgICAgICBba2JxU3R5bGVdPVwiJ3RyYW5zcGFyZW50J1wiXG4gICAgICAgIFtrYnFUb29sdGlwXT1cInNvZnRXcmFwID8gY29uZmlnLnNvZnRXcmFwT2ZmVG9vbHRpcCA6IGNvbmZpZy5zb2Z0V3JhcE9uVG9vbHRpcFwiXG4gICAgICAgIChjbGljayk9XCJ0b2dnbGVTb2Z0V3JhcC5lbWl0KClcIlxuICAgID5cbiAgICAgICAgPGlcbiAgICAgICAgICAgICpuZ0lmPVwiIXNvZnRXcmFwXCJcbiAgICAgICAgICAgIGticS1pY29uPVwibWMtd29yZC13cmFwXzE2XCJcbiAgICAgICAgPjwvaT5cbiAgICAgICAgPGlcbiAgICAgICAgICAgICpuZ0lmPVwic29mdFdyYXBcIlxuICAgICAgICAgICAga2JxLWljb249XCJtYy13b3JkLXdyYXAtc2xhc2hfMTZcIlxuICAgICAgICA+PC9pPlxuICAgIDwvYnV0dG9uPlxuXG4gICAgPGJ1dHRvblxuICAgICAgICAqbmdJZj1cImNhbkxvYWRcIlxuICAgICAgICBrYnEtYnV0dG9uXG4gICAgICAgIFtjb2xvcl09XCInY29udHJhc3QnXCJcbiAgICAgICAgW2ticVN0eWxlXT1cIid0cmFuc3BhcmVudCdcIlxuICAgICAgICBba2JxVG9vbHRpcF09XCJjb25maWcuZG93bmxvYWRUb29sdGlwXCJcbiAgICAgICAgKGNsaWNrKT1cImRvd25sb2FkQ29kZS5lbWl0KClcIlxuICAgID5cbiAgICAgICAgPGkga2JxLWljb249XCJtYy1kb3dubG9hZF8xNlwiPjwvaT5cbiAgICA8L2J1dHRvbj5cblxuICAgIDxidXR0b25cbiAgICAgICAgI2NvcHlUb29sdGlwPVwia2JxVG9vbHRpcFwiXG4gICAgICAgIGticS1idXR0b25cbiAgICAgICAgW2NvbG9yXT1cIidjb250cmFzdCdcIlxuICAgICAgICBba2JxU3R5bGVdPVwiJ3RyYW5zcGFyZW50J1wiXG4gICAgICAgIFtrYnFUb29sdGlwXT1cImNvcHlUb29sdGlwVGV4dFwiXG4gICAgICAgIChjbGljayk9XCJvbkNvcHkoKVwiXG4gICAgPlxuICAgICAgICA8aSBrYnEtaWNvbj1cIm1jLWNvcHktb18xNlwiPjwvaT5cbiAgICA8L2J1dHRvbj5cblxuICAgIDxidXR0b25cbiAgICAgICAgKm5nSWY9XCJjb2RlRmlsZXNbc2VsZWN0ZWRUYWJJbmRleF0ubGlua1wiXG4gICAgICAgIGticS1idXR0b25cbiAgICAgICAgW2NvbG9yXT1cIidjb250cmFzdCdcIlxuICAgICAgICBba2JxU3R5bGVdPVwiJ3RyYW5zcGFyZW50J1wiXG4gICAgICAgIFtrYnFUb29sdGlwXT1cImNvbmZpZy5vcGVuRXh0ZXJuYWxTeXN0ZW1Ub29sdGlwXCJcbiAgICAgICAgKGNsaWNrKT1cIm9wZW5FeHRlcm5hbFN5c3RlbS5lbWl0KClcIlxuICAgID5cbiAgICAgICAgPGkga2JxLWljb249XCJtYy1leHRlcm5hbC1saW5rXzE2XCI+PC9pPlxuICAgIDwvYnV0dG9uPlxuPC9kaXY+XG4iXX0=
|