@koobiq/components 16.0.0-beta.10 → 16.0.0-beta.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/code-block/_code-block-theme.scss +43 -12
- package/code-block/actionbar.component.scss +34 -6
- package/code-block/code-block.component.d.ts +2 -2
- package/code-block/code-block.scss +101 -27
- package/core/styles/theming/_components-theming.scss +31 -10
- package/core/styles/typography/_typography.scss +2 -1
- package/esm2022/code-block/actionbar.component.mjs +3 -3
- package/esm2022/code-block/code-block.component.mjs +10 -8
- package/esm2022/core/version.mjs +2 -2
- package/esm2022/navbar/navbar.component.mjs +2 -2
- package/esm2022/navbar/vertical-navbar.component.mjs +2 -2
- package/esm2022/progress-spinner/progress-spinner.component.mjs +2 -2
- package/esm2022/tabs/tab-group.component.mjs +1 -1
- package/esm2022/tooltip/tooltip.component.mjs +4 -4
- package/fesm2022/koobiq-components-code-block.mjs +9 -8
- 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/fesm2022/koobiq-components-navbar.mjs +4 -4
- package/fesm2022/koobiq-components-progress-spinner.mjs +2 -2
- package/fesm2022/koobiq-components-progress-spinner.mjs.map +1 -1
- package/fesm2022/koobiq-components-tabs.mjs +1 -1
- package/fesm2022/koobiq-components-tabs.mjs.map +1 -1
- package/fesm2022/koobiq-components-tooltip.mjs +3 -3
- package/fesm2022/koobiq-components-tooltip.mjs.map +1 -1
- package/package.json +10 -10
- package/prebuilt-themes/dark-theme.css +1 -1
- package/prebuilt-themes/light-theme.css +1 -1
- package/progress-spinner/progress-spinner.scss +10 -5
- package/tooltip/tooltip.component.d.ts +1 -1
|
@@ -5,13 +5,39 @@
|
|
|
5
5
|
@use '../core/styles/typography/typography-utils' as *;
|
|
6
6
|
|
|
7
7
|
|
|
8
|
+
@mixin kbq-code-block-style($style) {
|
|
9
|
+
$container: map.get($style, container);
|
|
10
|
+
$actionbar: map.get($style, actionbar);
|
|
11
|
+
|
|
12
|
+
border-color: map.get($container, border);
|
|
13
|
+
background: map.get($container, background);
|
|
14
|
+
|
|
15
|
+
& .kbq-tab-header {
|
|
16
|
+
$header: map.get($style, header);
|
|
17
|
+
background: map.get($header, background) !important;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&:not(.kbq-code-block_no-header) .kbq-code-block__code {
|
|
21
|
+
box-shadow: map.get($container, shadow);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&.kbq-code-block_no-header {
|
|
25
|
+
& .kbq-code-block__fade-gradient {
|
|
26
|
+
display: block;
|
|
27
|
+
|
|
28
|
+
background: map.get($actionbar, fade-gradient)
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
& .kbq-code-block-actionbar {
|
|
33
|
+
background: map.get($actionbar, background);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
8
37
|
@mixin kbq-code-block-theme($theme) {
|
|
9
38
|
$code-block: map.get(map.get($theme, components), code-block);
|
|
10
39
|
|
|
11
40
|
.kbq-code-block {
|
|
12
|
-
background-color: map.get($code-block, main-background);
|
|
13
|
-
border-color: map.get($code-block, border);
|
|
14
|
-
|
|
15
41
|
.hljs {
|
|
16
42
|
$hljs: map.get($code-block, hljs);
|
|
17
43
|
|
|
@@ -282,12 +308,22 @@
|
|
|
282
308
|
}
|
|
283
309
|
}
|
|
284
310
|
|
|
285
|
-
&.kbq-code-
|
|
286
|
-
|
|
311
|
+
&.kbq-code-block_outline {
|
|
312
|
+
@include kbq-code-block-style(map.get($code-block, outline));
|
|
287
313
|
}
|
|
288
314
|
|
|
289
|
-
|
|
290
|
-
|
|
315
|
+
&.kbq-code-block_filled {
|
|
316
|
+
@include kbq-code-block-style(map.get($code-block, filled));
|
|
317
|
+
|
|
318
|
+
$collapse: map.get(map.get($code-block, filled), collapse);
|
|
319
|
+
|
|
320
|
+
& .kbq-code-block__show-more_expanded {
|
|
321
|
+
background: map.get($collapse, expanded-background);
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
& .kbq-code-block__show-more_collapsed {
|
|
325
|
+
background: map.get($collapse, collapsed-background);
|
|
326
|
+
}
|
|
291
327
|
}
|
|
292
328
|
|
|
293
329
|
.kbq-tab-header {
|
|
@@ -298,7 +334,6 @@
|
|
|
298
334
|
}
|
|
299
335
|
|
|
300
336
|
.kbq-code-block__show-more {
|
|
301
|
-
border-top-color: map.get($code-block, border) !important;
|
|
302
337
|
}
|
|
303
338
|
}
|
|
304
339
|
|
|
@@ -326,9 +361,5 @@
|
|
|
326
361
|
font: inherit;
|
|
327
362
|
}
|
|
328
363
|
}
|
|
329
|
-
|
|
330
|
-
.hljs-ln-numbers {
|
|
331
|
-
@include kbq-typography-level-to-styles($config, caption-mono);
|
|
332
|
-
}
|
|
333
364
|
}
|
|
334
365
|
}
|
|
@@ -13,12 +13,40 @@ $tokens: meta.module-variables(tokens) !default;
|
|
|
13
13
|
|
|
14
14
|
position: absolute;
|
|
15
15
|
|
|
16
|
-
top:
|
|
17
|
-
right:
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
16
|
+
top: 0;
|
|
17
|
+
right: 0;
|
|
18
|
+
|
|
19
|
+
padding:
|
|
20
|
+
var(
|
|
21
|
+
--kbq-code-block-size-actionbar-padding-vertical,
|
|
22
|
+
map.get($tokens, code-block-size-actionbar-padding-vertical)
|
|
23
|
+
)
|
|
24
|
+
var(
|
|
25
|
+
--kbq-code-block-size-actionbar-padding-horizontal,
|
|
26
|
+
map.get($tokens, code-block-size-actionbar-padding-horizontal)
|
|
27
|
+
);
|
|
28
|
+
|
|
29
|
+
gap: var(
|
|
30
|
+
--kbq-code-block-size-actionbar-content-gap-horizontal,
|
|
31
|
+
map.get($tokens, code-block-size-actionbar-content-gap-horizontal)
|
|
32
|
+
);
|
|
33
|
+
|
|
34
|
+
& .kbq-code-block__fade-gradient {
|
|
35
|
+
display: none;
|
|
36
|
+
|
|
37
|
+
width: var(
|
|
38
|
+
--kbq-code-block-size-actionbar-fade-gradient-width,
|
|
39
|
+
map.get($tokens, code-block-size-actionbar-fade-gradient-width)
|
|
40
|
+
);
|
|
41
|
+
height: 40px;
|
|
42
|
+
|
|
43
|
+
margin-top: calc(
|
|
44
|
+
var(
|
|
45
|
+
--kbq-code-block-size-actionbar-padding-vertical,
|
|
46
|
+
map.get($tokens, code-block-size-actionbar-padding-vertical)
|
|
47
|
+
) * -1
|
|
48
|
+
);
|
|
49
|
+
}
|
|
22
50
|
|
|
23
51
|
&.kbq-actionbar-block_floating {
|
|
24
52
|
top: map.get($tokens, code-block-size-actionbar-margin-top);
|
|
@@ -44,7 +44,7 @@ export declare class KbqCodeBlockComponent implements OnDestroy {
|
|
|
44
44
|
tabGroup: KbqTabGroup;
|
|
45
45
|
lineNumbers: boolean;
|
|
46
46
|
codeFiles: KbqCodeFile[];
|
|
47
|
-
|
|
47
|
+
filled: boolean;
|
|
48
48
|
maxHeight: number;
|
|
49
49
|
softWrap: boolean;
|
|
50
50
|
get noHeader(): any;
|
|
@@ -70,5 +70,5 @@ export declare class KbqCodeBlockComponent implements OnDestroy {
|
|
|
70
70
|
private updateMultiline;
|
|
71
71
|
private getFullFileName;
|
|
72
72
|
static ɵfac: i0.ɵɵFactoryDeclaration<KbqCodeBlockComponent, [null, null, null, null, { optional: true; }]>;
|
|
73
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<KbqCodeBlockComponent, "kbq-code-block", ["kbqCodeBlock"], { "lineNumbers": { "alias": "lineNumbers"; "required": false; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; "
|
|
73
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<KbqCodeBlockComponent, "kbq-code-block", ["kbqCodeBlock"], { "lineNumbers": { "alias": "lineNumbers"; "required": false; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; "filled": { "alias": "filled"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "softWrap": { "alias": "softWrap"; "required": false; }; }, {}, never, never, false, never>;
|
|
74
74
|
}
|
|
@@ -9,6 +9,7 @@ $tokens: meta.module-variables(tokens) !default;
|
|
|
9
9
|
.kbq-code-block {
|
|
10
10
|
display: block;
|
|
11
11
|
position: relative;
|
|
12
|
+
overflow: hidden;
|
|
12
13
|
|
|
13
14
|
box-sizing: border-box;
|
|
14
15
|
|
|
@@ -17,24 +18,62 @@ $tokens: meta.module-variables(tokens) !default;
|
|
|
17
18
|
-moz-hyphens: none;
|
|
18
19
|
-webkit-hyphens: none;
|
|
19
20
|
|
|
20
|
-
border-width:
|
|
21
|
+
border-width: var(
|
|
22
|
+
--kbq-code-block-size-container-border-width, map.get($tokens, code-block-size-container-border-width)
|
|
23
|
+
);
|
|
21
24
|
border-style: solid;
|
|
22
|
-
border-radius:
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
content: "";
|
|
26
|
-
|
|
27
|
-
position: absolute;
|
|
28
|
-
top: 39px;
|
|
29
|
-
left: 0;
|
|
30
|
-
right: 0;
|
|
31
|
-
|
|
32
|
-
height: 1px;
|
|
33
|
-
}
|
|
25
|
+
border-radius: var(
|
|
26
|
+
--kbq-code-block-size-container-border-radius, map.get($tokens, code-block-size-container-border-radius)
|
|
27
|
+
);
|
|
34
28
|
|
|
35
29
|
.kbq-tab-header {
|
|
36
30
|
// 4 buttons + margin
|
|
37
31
|
margin-right: calc(32 * 4) + 24px;
|
|
32
|
+
|
|
33
|
+
padding:
|
|
34
|
+
var(
|
|
35
|
+
--kbq-code-block-size-header-padding-vertical,
|
|
36
|
+
map.get($tokens, code-block-size-header-padding-vertical)
|
|
37
|
+
)
|
|
38
|
+
var(
|
|
39
|
+
--kbq-code-block-size-header-padding-right,
|
|
40
|
+
map.get($tokens, code-block-size-header-padding-right)
|
|
41
|
+
)
|
|
42
|
+
var(
|
|
43
|
+
--kbq-code-block-size-header-padding-vertical,
|
|
44
|
+
map.get($tokens, code-block-size-header-padding-vertical)
|
|
45
|
+
) var(
|
|
46
|
+
--kbq-code-block-size-header-padding-left,
|
|
47
|
+
map.get($tokens, code-block-size-header-padding-left)
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.kbq-code-block__code {
|
|
52
|
+
> code {
|
|
53
|
+
padding:
|
|
54
|
+
var(
|
|
55
|
+
--kbq-code-block-size-with-header-content-padding-top,
|
|
56
|
+
map.get($tokens, code-block-size-with-header-content-padding-top)
|
|
57
|
+
)
|
|
58
|
+
var(
|
|
59
|
+
--kbq-code-block-size-with-header-content-padding-horizontal,
|
|
60
|
+
map.get($tokens, code-block-size-with-header-content-padding-horizontal)
|
|
61
|
+
)
|
|
62
|
+
var(
|
|
63
|
+
--kbq-code-block-size-with-header-content-padding-bottom,
|
|
64
|
+
map.get($tokens, code-block-size-with-header-content-padding-bottom)
|
|
65
|
+
) var(
|
|
66
|
+
--kbq-code-block-size-with-header-content-padding-horizontal,
|
|
67
|
+
map.get($tokens, code-block-size-with-header-content-padding-horizontal)
|
|
68
|
+
);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.hljs-ln-numbers {
|
|
72
|
+
padding-right: var(
|
|
73
|
+
--kbq-code-block-size-with-header-content-content-gap-horizontal,
|
|
74
|
+
map.get($tokens, code-block-size-with-header-content-content-gap-horizontal)
|
|
75
|
+
);
|
|
76
|
+
}
|
|
38
77
|
}
|
|
39
78
|
|
|
40
79
|
&.kbq-code-block_hide-line-numbers .hljs-ln-line.hljs-ln-numbers {
|
|
@@ -54,12 +93,31 @@ $tokens: meta.module-variables(tokens) !default;
|
|
|
54
93
|
}
|
|
55
94
|
|
|
56
95
|
&.kbq-code-block_no-header {
|
|
96
|
+
.kbq-tab-header {
|
|
97
|
+
display: none;
|
|
98
|
+
}
|
|
99
|
+
|
|
57
100
|
.kbq-code-block__code {
|
|
58
101
|
position: relative;
|
|
59
|
-
}
|
|
60
102
|
|
|
61
|
-
|
|
62
|
-
|
|
103
|
+
& > code {
|
|
104
|
+
padding:
|
|
105
|
+
var(
|
|
106
|
+
--kbq-code-block-size-no-header-content-padding-vertical,
|
|
107
|
+
map.get($tokens, code-block-size-no-header-content-padding-vertical)
|
|
108
|
+
)
|
|
109
|
+
var(
|
|
110
|
+
--kbq-code-block-size-no-header-content-padding-horizontal,
|
|
111
|
+
map.get($tokens, code-block-size-no-header-content-padding-horizontal)
|
|
112
|
+
);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.hljs-ln-numbers {
|
|
116
|
+
padding-right: var(
|
|
117
|
+
--kbq-code-block-size-no-header-content-content-gap-horizontal,
|
|
118
|
+
map.get($tokens, code-block-size-no-header-content-content-gap-horizontal)
|
|
119
|
+
);
|
|
120
|
+
}
|
|
63
121
|
}
|
|
64
122
|
}
|
|
65
123
|
|
|
@@ -89,10 +147,6 @@ $tokens: meta.module-variables(tokens) !default;
|
|
|
89
147
|
white-space: pre-wrap
|
|
90
148
|
}
|
|
91
149
|
|
|
92
|
-
> code {
|
|
93
|
-
padding: map.get($tokens, code-block-size-padding) !important;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
150
|
.hljs-ln {
|
|
97
151
|
border-collapse: unset;
|
|
98
152
|
|
|
@@ -102,9 +156,6 @@ $tokens: meta.module-variables(tokens) !default;
|
|
|
102
156
|
}
|
|
103
157
|
|
|
104
158
|
.hljs-ln-numbers {
|
|
105
|
-
border-right-width: map.get($tokens, code-block-size-line-numbers-border-width);
|
|
106
|
-
padding: map.get($tokens, code-block-size-line-numbers-padding);
|
|
107
|
-
|
|
108
159
|
vertical-align: baseline;
|
|
109
160
|
text-align: right;
|
|
110
161
|
}
|
|
@@ -115,14 +166,37 @@ $tokens: meta.module-variables(tokens) !default;
|
|
|
115
166
|
}
|
|
116
167
|
|
|
117
168
|
.kbq-code-block__show-more {
|
|
169
|
+
display: flex;
|
|
170
|
+
justify-content: center;
|
|
118
171
|
overflow: hidden;
|
|
119
172
|
|
|
120
173
|
width: 100%;
|
|
121
174
|
|
|
122
|
-
|
|
123
|
-
|
|
175
|
+
position: absolute;
|
|
176
|
+
bottom: 0;
|
|
124
177
|
|
|
125
|
-
|
|
126
|
-
|
|
178
|
+
&.kbq-code-block__show-more_collapsed {
|
|
179
|
+
padding-top: var(
|
|
180
|
+
--kbq-code-block-size-collapse-collapsed-padding-top,
|
|
181
|
+
map.get($tokens, code-block-size-collapse-collapsed-padding-top)
|
|
182
|
+
);
|
|
183
|
+
|
|
184
|
+
padding-bottom: var(
|
|
185
|
+
--kbq-code-block-size-collapse-collapsed-padding-bottom,
|
|
186
|
+
map.get($tokens, code-block-size-collapse-collapsed-padding-bottom)
|
|
187
|
+
);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
&.kbq-code-block__show-more_expanded {
|
|
191
|
+
padding-top: var(
|
|
192
|
+
--kbq-code-block-size-collapse-expanded-padding-top,
|
|
193
|
+
map.get($tokens, code-block-size-collapse-expanded-padding-top)
|
|
194
|
+
);
|
|
195
|
+
|
|
196
|
+
padding-bottom: var(
|
|
197
|
+
--kbq-code-block-size-collapse-expanded-padding-bottom,
|
|
198
|
+
map.get($tokens, code-block-size-collapse-expanded-padding-bottom)
|
|
199
|
+
);
|
|
200
|
+
}
|
|
127
201
|
}
|
|
128
202
|
/* stylelint-enable no-descending-specificity */
|
|
@@ -422,16 +422,37 @@
|
|
|
422
422
|
);
|
|
423
423
|
|
|
424
424
|
$code-block: (
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
425
|
+
filled: (
|
|
426
|
+
container: (
|
|
427
|
+
background: map-get($tokens, 'code-block-#{$scheme}-filled-container-background'),
|
|
428
|
+
border: map-get($tokens, 'code-block-#{$scheme}-filled-container-border-color'),
|
|
429
|
+
shadow: map-get($tokens, 'code-block-#{$scheme}-filled-container-shadow')
|
|
430
|
+
),
|
|
431
|
+
header: (
|
|
432
|
+
background: map-get($tokens, 'code-block-#{$scheme}-filled-header-background')
|
|
433
|
+
),
|
|
434
|
+
actionbar: (
|
|
435
|
+
fade-gradient: map-get($tokens, 'code-block-#{$scheme}-filled-actionbar-fade-gradient'),
|
|
436
|
+
background: map-get($tokens, 'code-block-#{$scheme}-filled-actionbar-background')
|
|
437
|
+
),
|
|
438
|
+
collapse: (
|
|
439
|
+
expanded-background: map-get($tokens, 'code-block-#{$scheme}-filled-collapse-expanded-background'),
|
|
440
|
+
collapsed-background: map-get($tokens, 'code-block-#{$scheme}-filled-collapse-collapsed-background')
|
|
441
|
+
)
|
|
442
|
+
),
|
|
443
|
+
outline: (
|
|
444
|
+
container: (
|
|
445
|
+
background: map-get($tokens, 'code-block-#{$scheme}-outline-container-background'),
|
|
446
|
+
border: map-get($tokens, 'code-block-#{$scheme}-outline-container-border-color'),
|
|
447
|
+
shadow: map-get($tokens, 'code-block-#{$scheme}-outline-container-shadow')
|
|
448
|
+
),
|
|
449
|
+
header: (
|
|
450
|
+
background: map-get($tokens, 'code-block-#{$scheme}-outline-header-background')
|
|
451
|
+
),
|
|
452
|
+
actionbar: (
|
|
453
|
+
fade-gradient: map-get($tokens, 'code-block-#{$scheme}-outline-actionbar-fade-gradient'),
|
|
454
|
+
background: map-get($tokens, 'code-block-#{$scheme}-outline-actionbar-background')
|
|
455
|
+
)
|
|
435
456
|
),
|
|
436
457
|
|
|
437
458
|
hljs: (
|
|
@@ -70,7 +70,8 @@
|
|
|
70
70
|
italic-normal: map.get($typography, italic-normal),
|
|
71
71
|
italic-normal-strong: map.get($typography, italic-normal-strong),
|
|
72
72
|
italic-compact: map.get($typography, italic-compact),
|
|
73
|
-
italic-compact-strong: map.get($typography, italic-compact-strong)
|
|
73
|
+
italic-compact-strong: map.get($typography, italic-compact-strong),
|
|
74
|
+
mono-codeblock: map.get($typography, mono-codeblock)
|
|
74
75
|
);
|
|
75
76
|
|
|
76
77
|
@each $key, $level in $config {
|
|
@@ -32,14 +32,14 @@ export class KbqActionBarComponent {
|
|
|
32
32
|
});
|
|
33
33
|
}
|
|
34
34
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
35
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqActionBarComponent, selector: "kbq-actionbar-block", inputs: { config: "config", codeFiles: "codeFiles", lessContrast: "lessContrast", selectedTabIndex: "selectedTabIndex", multiLine: "multiLine", softWrap: "softWrap" }, outputs: { toggleSoftWrap: "toggleSoftWrap", downloadCode: "downloadCode", copyCode: "copyCode", openExternalSystem: "openExternalSystem" }, host: { properties: { "class.kbq-code-block-actionbar_less-contrast": "lessContrast" }, classAttribute: "kbq-code-block-actionbar" }, viewQueries: [{ propertyName: "copyTooltip", first: true, predicate: ["copyTooltip"], descendants: true }], ngImport: i0, template: "<
|
|
35
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqActionBarComponent, selector: "kbq-actionbar-block", inputs: { config: "config", codeFiles: "codeFiles", lessContrast: "lessContrast", selectedTabIndex: "selectedTabIndex", multiLine: "multiLine", softWrap: "softWrap" }, outputs: { toggleSoftWrap: "toggleSoftWrap", downloadCode: "downloadCode", copyCode: "copyCode", openExternalSystem: "openExternalSystem" }, host: { properties: { "class.kbq-code-block-actionbar_less-contrast": "lessContrast" }, 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<button kbq-button\n [color]=\"'contrast'\"\n [kbqStyle]=\"'transparent'\"\n *ngIf=\"multiLine\"\n [kbqTooltip]=\"softWrap ? config.softWrapOffTooltip : config.softWrapOnTooltip\"\n (click)=\"toggleSoftWrap.emit()\">\n <i *ngIf=\"!softWrap\" kbq-icon=\"mc-word-wrap_16\"></i>\n <i *ngIf=\"softWrap\" kbq-icon=\"mc-word-wrap-slash_16\"></i>\n</button>\n\n<button kbq-button\n [color]=\"'contrast'\"\n [kbqStyle]=\"'transparent'\"\n [kbqTooltip]=\"config.downloadTooltip\"\n (click)=\"downloadCode.emit()\">\n <i kbq-icon=\"mc-download_16\"></i>\n</button>\n\n<button kbq-button\n [color]=\"'contrast'\"\n [kbqStyle]=\"'transparent'\"\n #copyTooltip=\"kbqTooltip\"\n [kbqTooltip]=\"copyTooltipText\"\n (click)=\"onCopy()\">\n <i kbq-icon=\"mc-copy-o_16\"></i>\n</button>\n\n<button kbq-button\n [color]=\"'contrast'\"\n [kbqStyle]=\"'transparent'\"\n *ngIf=\"codeFiles[selectedTabIndex].link\"\n [kbqTooltip]=\"config.openExternalSystemTooltip\"\n (click)=\"openExternalSystem.emit()\">\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;padding: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, 36px);height:40px;margin-top:calc(var(--kbq-code-block-size-actionbar-padding-vertical, 8px) * -1)}\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 }); }
|
|
36
36
|
}
|
|
37
37
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqActionBarComponent, decorators: [{
|
|
38
38
|
type: Component,
|
|
39
39
|
args: [{ selector: 'kbq-actionbar-block', host: {
|
|
40
40
|
class: 'kbq-code-block-actionbar',
|
|
41
41
|
'[class.kbq-code-block-actionbar_less-contrast]': 'lessContrast'
|
|
42
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<
|
|
42
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kbq-code-block__fade-gradient\"></div>\n\n<button kbq-button\n [color]=\"'contrast'\"\n [kbqStyle]=\"'transparent'\"\n *ngIf=\"multiLine\"\n [kbqTooltip]=\"softWrap ? config.softWrapOffTooltip : config.softWrapOnTooltip\"\n (click)=\"toggleSoftWrap.emit()\">\n <i *ngIf=\"!softWrap\" kbq-icon=\"mc-word-wrap_16\"></i>\n <i *ngIf=\"softWrap\" kbq-icon=\"mc-word-wrap-slash_16\"></i>\n</button>\n\n<button kbq-button\n [color]=\"'contrast'\"\n [kbqStyle]=\"'transparent'\"\n [kbqTooltip]=\"config.downloadTooltip\"\n (click)=\"downloadCode.emit()\">\n <i kbq-icon=\"mc-download_16\"></i>\n</button>\n\n<button kbq-button\n [color]=\"'contrast'\"\n [kbqStyle]=\"'transparent'\"\n #copyTooltip=\"kbqTooltip\"\n [kbqTooltip]=\"copyTooltipText\"\n (click)=\"onCopy()\">\n <i kbq-icon=\"mc-copy-o_16\"></i>\n</button>\n\n<button kbq-button\n [color]=\"'contrast'\"\n [kbqStyle]=\"'transparent'\"\n *ngIf=\"codeFiles[selectedTabIndex].link\"\n [kbqTooltip]=\"config.openExternalSystemTooltip\"\n (click)=\"openExternalSystem.emit()\">\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;padding: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, 36px);height:40px;margin-top:calc(var(--kbq-code-block-size-actionbar-padding-vertical, 8px) * -1)}\n"] }]
|
|
43
43
|
}], propDecorators: { copyTooltip: [{
|
|
44
44
|
type: ViewChild,
|
|
45
45
|
args: ['copyTooltip']
|
|
@@ -64,4 +64,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
|
|
|
64
64
|
}], openExternalSystem: [{
|
|
65
65
|
type: Output
|
|
66
66
|
}] } });
|
|
67
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
67
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWN0aW9uYmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3BhY2thZ2VzL2NvbXBvbmVudHMvY29kZS1ibG9jay9hY3Rpb25iYXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vcGFja2FnZXMvY29tcG9uZW50cy9jb2RlLWJsb2NrL2FjdGlvbmJhci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRUgsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sRUFDTixTQUFTLEVBQ1QsaUJBQWlCLEVBQ3BCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQy9ELE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7O0FBbUJ4QyxNQUFNLE9BQU8scUJBQXFCO0lBWGxDO1FBaUJhLHFCQUFnQixHQUFHLENBQUMsQ0FBQztRQUlwQixtQkFBYyxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7UUFDMUMsaUJBQVksR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO1FBQ3hDLGFBQVEsR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO1FBQ3BDLHVCQUFrQixHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7S0F3QjNEO0lBcEJHLGVBQWU7UUFDWCxJQUFJLENBQUMsZUFBZSxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsV0FBVyxDQUFDO1FBRS9DLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYTthQUN6QixJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDO2FBQy9CLFNBQVMsQ0FBQyxHQUFHLEVBQUU7WUFDWixJQUFJLElBQUksQ0FBQyxlQUFlLEtBQUssSUFBSSxDQUFDLE1BQU0sQ0FBQyxhQUFhLEVBQUU7Z0JBQ3BELElBQUksQ0FBQyxlQUFlLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxXQUFXLENBQUM7YUFDbEQ7UUFDTCxDQUFDLENBQUMsQ0FBQztJQUNYLENBQUM7SUFFRCxNQUFNO1FBQ0YsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUVyQixVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ1osSUFBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQztZQUNqRCxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksRUFBRSxDQUFDO1FBQzVCLENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztpSUFwQ1EscUJBQXFCO3FIQUFyQixxQkFBcUIsa21CQzlCbEMsNnRDQXFDQTs7MkZEUGEscUJBQXFCO2tCQVhqQyxTQUFTOytCQUNJLHFCQUFxQixRQUd6Qjt3QkFDRixLQUFLLEVBQUUsMEJBQTBCO3dCQUNqQyxnREFBZ0QsRUFBRSxjQUFjO3FCQUNuRSxpQkFDYyxpQkFBaUIsQ0FBQyxJQUFJLG1CQUNwQix1QkFBdUIsQ0FBQyxNQUFNOzhCQUdyQixXQUFXO3NCQUFwQyxTQUFTO3VCQUFDLGFBQWE7Z0JBRWYsTUFBTTtzQkFBZCxLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxnQkFBZ0I7c0JBQXhCLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUVJLGNBQWM7c0JBQXZCLE1BQU07Z0JBQ0csWUFBWTtzQkFBckIsTUFBTTtnQkFDRyxRQUFRO3NCQUFqQixNQUFNO2dCQUNHLGtCQUFrQjtzQkFBM0IsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICAgQWZ0ZXJWaWV3SW5pdCxcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgICBDb21wb25lbnQsXG4gICAgRXZlbnRFbWl0dGVyLFxuICAgIElucHV0LFxuICAgIE91dHB1dCxcbiAgICBWaWV3Q2hpbGQsXG4gICAgVmlld0VuY2Fwc3VsYXRpb25cbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBLYnFUb29sdGlwVHJpZ2dlciB9IGZyb20gJ0Brb29iaXEvY29tcG9uZW50cy90b29sdGlwJztcbmltcG9ydCB7IGZpbHRlciB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcblxuaW1wb3J0IHtcbiAgICBLYnFDb2RlQmxvY2tDb25maWd1cmF0aW9uLFxuICAgIEticUNvZGVGaWxlXG59IGZyb20gJy4vY29kZS1ibG9jay50eXBlcyc7XG5cblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdrYnEtYWN0aW9uYmFyLWJsb2NrJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vYWN0aW9uYmFyLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9hY3Rpb25iYXIuY29tcG9uZW50LnNjc3MnXSxcbiAgICBob3N0OiB7XG4gICAgICAgIGNsYXNzOiAna2JxLWNvZGUtYmxvY2stYWN0aW9uYmFyJyxcbiAgICAgICAgJ1tjbGFzcy5rYnEtY29kZS1ibG9jay1hY3Rpb25iYXJfbGVzcy1jb250cmFzdF0nOiAnbGVzc0NvbnRyYXN0J1xuICAgIH0sXG4gICAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxufSlcbmV4cG9ydCBjbGFzcyBLYnFBY3Rpb25CYXJDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0IHtcbiAgICBAVmlld0NoaWxkKCdjb3B5VG9vbHRpcCcpIGNvcHlUb29sdGlwOiBLYnFUb29sdGlwVHJpZ2dlcjtcblxuICAgIEBJbnB1dCgpIGNvbmZpZzogS2JxQ29kZUJsb2NrQ29uZmlndXJhdGlvbjtcbiAgICBASW5wdXQoKSBjb2RlRmlsZXM6IEticUNvZGVGaWxlW107XG4gICAgQElucHV0KCkgbGVzc0NvbnRyYXN0OiBib29sZWFuO1xuICAgIEBJbnB1dCgpIHNlbGVjdGVkVGFiSW5kZXggPSAwO1xuICAgIEBJbnB1dCgpIG11bHRpTGluZTogYm9vbGVhbjtcbiAgICBASW5wdXQoKSBzb2Z0V3JhcDogYm9vbGVhbjtcblxuICAgIEBPdXRwdXQoKSB0b2dnbGVTb2Z0V3JhcCA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcbiAgICBAT3V0cHV0KCkgZG93bmxvYWRDb2RlID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuICAgIEBPdXRwdXQoKSBjb3B5Q29kZSA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcbiAgICBAT3V0cHV0KCkgb3BlbkV4dGVybmFsU3lzdGVtID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuXG4gICAgY29weVRvb2x0aXBUZXh0OiBzdHJpbmc7XG5cbiAgICBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgICAgIHRoaXMuY29weVRvb2x0aXBUZXh0ID0gdGhpcy5jb25maWcuY29weVRvb2x0aXA7XG5cbiAgICAgICAgdGhpcy5jb3B5VG9vbHRpcC52aXNpYmxlQ2hhbmdlXG4gICAgICAgICAgICAucGlwZShmaWx0ZXIoKHN0YXRlKSA9PiAhc3RhdGUpKVxuICAgICAgICAgICAgLnN1YnNjcmliZSgoKSA9PiB7XG4gICAgICAgICAgICAgICAgaWYgKHRoaXMuY29weVRvb2x0aXBUZXh0ID09PSB0aGlzLmNvbmZpZy5jb3BpZWRUb29sdGlwKSB7XG4gICAgICAgICAgICAgICAgICAgIHRoaXMuY29weVRvb2x0aXBUZXh0ID0gdGhpcy5jb25maWcuY29weVRvb2x0aXA7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgb25Db3B5KCkge1xuICAgICAgICB0aGlzLmNvcHlDb2RlLmVtaXQoKTtcblxuICAgICAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgICAgICAgIHRoaXMuY29weVRvb2x0aXBUZXh0ID0gdGhpcy5jb25maWcuY29waWVkVG9vbHRpcDtcbiAgICAgICAgICAgIHRoaXMuY29weVRvb2x0aXAuc2hvdygpO1xuICAgICAgICB9KTtcbiAgICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwia2JxLWNvZGUtYmxvY2tfX2ZhZGUtZ3JhZGllbnRcIj48L2Rpdj5cblxuPGJ1dHRvbiBrYnEtYnV0dG9uXG4gICAgICAgIFtjb2xvcl09XCInY29udHJhc3QnXCJcbiAgICAgICAgW2ticVN0eWxlXT1cIid0cmFuc3BhcmVudCdcIlxuICAgICAgICAqbmdJZj1cIm11bHRpTGluZVwiXG4gICAgICAgIFtrYnFUb29sdGlwXT1cInNvZnRXcmFwID8gY29uZmlnLnNvZnRXcmFwT2ZmVG9vbHRpcCA6IGNvbmZpZy5zb2Z0V3JhcE9uVG9vbHRpcFwiXG4gICAgICAgIChjbGljayk9XCJ0b2dnbGVTb2Z0V3JhcC5lbWl0KClcIj5cbiAgICA8aSAqbmdJZj1cIiFzb2Z0V3JhcFwiIGticS1pY29uPVwibWMtd29yZC13cmFwXzE2XCI+PC9pPlxuICAgIDxpICpuZ0lmPVwic29mdFdyYXBcIiBrYnEtaWNvbj1cIm1jLXdvcmQtd3JhcC1zbGFzaF8xNlwiPjwvaT5cbjwvYnV0dG9uPlxuXG48YnV0dG9uIGticS1idXR0b25cbiAgICAgICAgW2NvbG9yXT1cIidjb250cmFzdCdcIlxuICAgICAgICBba2JxU3R5bGVdPVwiJ3RyYW5zcGFyZW50J1wiXG4gICAgICAgIFtrYnFUb29sdGlwXT1cImNvbmZpZy5kb3dubG9hZFRvb2x0aXBcIlxuICAgICAgICAoY2xpY2spPVwiZG93bmxvYWRDb2RlLmVtaXQoKVwiPlxuICAgIDxpIGticS1pY29uPVwibWMtZG93bmxvYWRfMTZcIj48L2k+XG48L2J1dHRvbj5cblxuPGJ1dHRvbiBrYnEtYnV0dG9uXG4gICAgICAgIFtjb2xvcl09XCInY29udHJhc3QnXCJcbiAgICAgICAgW2ticVN0eWxlXT1cIid0cmFuc3BhcmVudCdcIlxuICAgICAgICAjY29weVRvb2x0aXA9XCJrYnFUb29sdGlwXCJcbiAgICAgICAgW2ticVRvb2x0aXBdPVwiY29weVRvb2x0aXBUZXh0XCJcbiAgICAgICAgKGNsaWNrKT1cIm9uQ29weSgpXCI+XG4gICAgPGkga2JxLWljb249XCJtYy1jb3B5LW9fMTZcIj48L2k+XG48L2J1dHRvbj5cblxuPGJ1dHRvbiBrYnEtYnV0dG9uXG4gICAgICAgIFtjb2xvcl09XCInY29udHJhc3QnXCJcbiAgICAgICAgW2ticVN0eWxlXT1cIid0cmFuc3BhcmVudCdcIlxuICAgICAgICAqbmdJZj1cImNvZGVGaWxlc1tzZWxlY3RlZFRhYkluZGV4XS5saW5rXCJcbiAgICAgICAgW2ticVRvb2x0aXBdPVwiY29uZmlnLm9wZW5FeHRlcm5hbFN5c3RlbVRvb2x0aXBcIlxuICAgICAgICAoY2xpY2spPVwib3BlbkV4dGVybmFsU3lzdGVtLmVtaXQoKVwiPlxuICAgIDxpIGticS1pY29uPVwibWMtZXh0ZXJuYWwtbGlua18xNlwiPjwvaT5cbjwvYnV0dG9uPlxuIl19
|