@vaadin-component-factory/vcf-pdf-viewer 3.0.2 → 4.0.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.
@@ -0,0 +1,144 @@
1
+ import {
2
+ registerStyles,
3
+ css,
4
+ } from "@vaadin/vaadin-themable-mixin/register-styles.js";
5
+
6
+ registerStyles(
7
+ "vcf-pdf-viewer",
8
+ css`
9
+ :host {
10
+ --pdf-viewer-background-color: var(--vaadin-background-color);
11
+ --pdf-viewer-container-background-color: var(--vaadin-background-container);
12
+ --pdf-viewer-border-color: var(--vaadin-border-color);
13
+ --pdf-viewer-border-radius: var(--vaadin-radius-m);
14
+ --pdf-viewer-box-shadow-color: var(--vaadin-focus-ring-color);
15
+
16
+ --pdf-viewer-previous-page-button-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M4.5 15.75L12 8.25L19.5 15.75" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>');
17
+ --pdf-viewer-next-page-button-icon: var(--_vaadin-icon-chevron-down);
18
+ --pdf-viewer-toggle-button-icon-closed: var(--_vaadin-icon-menu);
19
+ --pdf-viewer-toggle-button-icon-open: var(--_vaadin-icon-menu);
20
+
21
+ --vaadin-focus-ring-width: 2px;
22
+ background-color: var(--pdf-viewer-background-color);
23
+ border: 1px solid var(--pdf-viewer-border-color);
24
+ border-radius: var(--pdf-viewer-border-radius);
25
+ position: relative;
26
+ }
27
+
28
+ :host([data-application-theme="lumo"]) {
29
+ --pdf-viewer-background-color: var(--lumo-base-color);
30
+ --pdf-viewer-container-background-color: var(--lumo-contrast-5pct);
31
+ --pdf-viewer-border-color: var(--lumo-contrast-10pct);
32
+ --pdf-viewer-border-radius: var(--lumo-border-radius-m);
33
+ --pdf-viewer-font-family: var(--lumo-font-family);
34
+ --pdf-viewer-box-shadow-color: var(--lumo-primary-color-50pct);
35
+
36
+ --pdf-viewer-icon-font-family: "lumo-icons";
37
+ --pdf-viewer-previous-page-button-icon: var(--lumo-icons-angle-up);
38
+ --pdf-viewer-next-page-button-icon: var(--lumo-icons-angle-down);
39
+ --pdf-viewer-toggle-button-icon-closed: var(--lumo-icons-chevron-right);
40
+ --pdf-viewer-toggle-button-icon-open: var(--lumo-icons-chevron-left);
41
+ }
42
+
43
+ [part~="viewer-container"] {
44
+ background-color: var(--pdf-viewer-container-background-color);
45
+ outline: none;
46
+ }
47
+
48
+ [part~="viewer-container"][focus-ring] {
49
+ box-shadow: 0 0 0 var(--vaadin-focus-ring-width) var(--pdf-viewer-box-shadow-color);
50
+ }
51
+
52
+ [part~="toolbar"] {
53
+ display: flex;
54
+ flex-direction: row;
55
+ align-items: center;
56
+ border-bottom: 1px solid var(--pdf-viewer-border-color);
57
+ padding-left: var(--vaadin-padding-xs);
58
+ padding-right: var(--vaadin-padding-m);
59
+ gap: var(--vaadin-gap-s);
60
+ z-index: 2;
61
+ }
62
+
63
+ [part~="toolbar-pages"] {
64
+ display: flex;
65
+ flex-direction: row;
66
+ flex: 1;
67
+ align-items: center;
68
+ justify-content: flex-end;
69
+ }
70
+
71
+ ::slotted(.toolbar-current-page) {
72
+ width: 3.25em;
73
+ }
74
+
75
+ [part~="toolbar-page-separator"] {
76
+ padding: 0 var(--vaadin-padding-xs);
77
+ }
78
+
79
+ [part~="toolbar-total-pages"] {
80
+ padding-right: var(--vaadin-padding-m);
81
+ }
82
+
83
+ [part~="toolbar-title"] {
84
+ line-height: 2.25rem;
85
+ display: inline-block;
86
+ color: var(--lumo-header-title-color, var(--vaadin-text-color));
87
+ padding: var(--vaadin-padding-xs) 0;
88
+ flex: 1;
89
+ white-space: nowrap;
90
+ overflow: hidden;
91
+ text-overflow: ellipsis;
92
+ }
93
+
94
+ .page {
95
+ padding: var(--vaadin-padding-m);
96
+ padding-bottom: 0;
97
+ }
98
+
99
+ .page:last-child {
100
+ padding-bottom: var(--vaadin-padding-m);
101
+ }
102
+
103
+ .textLayer {
104
+ top: var(--vaadin-padding-m);
105
+ right: var(--vaadin-padding-m);
106
+ bottom: var(--vaadin-padding-m);
107
+ left: var(--vaadin-padding-m);
108
+ opacity: 0.2;
109
+ }
110
+
111
+ .textLayer ::-moz-selection {
112
+ background: rgb(0, 0, 255);
113
+ }
114
+
115
+ .textLayer ::selection {
116
+ background: rgb(0, 0, 255);
117
+ }
118
+
119
+ .textLayer .highlight {
120
+ background-color: rgb(180, 0, 170);
121
+ border-radius: 4px;
122
+ }
123
+
124
+ .textLayer .highlight.selected {
125
+ background-color: rgb(0, 100, 0);
126
+ }
127
+
128
+ [part~="toolbar"].small-size [part~="toolbar-pages"] {
129
+ flex: none;
130
+ }
131
+
132
+ [part~="toolbar"].small-size ::slotted(.toolbar-zoom) {
133
+ position: absolute;
134
+ bottom: var(--vaadin-padding-s);
135
+ left: 50%;
136
+ margin-left: -100px;
137
+ background-color: white;
138
+ box-shadow: var(--lumo-box-shadow-m);
139
+ padding: var(--vaadin-padding-xs);
140
+ z-index: 99;
141
+ }
142
+ `,
143
+ { moduleId: "lumo-vcf-pdf-viewer" },
144
+ );
@@ -0,0 +1,39 @@
1
+ import {
2
+ registerStyles,
3
+ css,
4
+ } from "@vaadin/vaadin-themable-mixin/register-styles.js";
5
+
6
+ registerStyles(
7
+ "vaadin-icon",
8
+ css`
9
+ :host::before {
10
+ font-size: var(--vaadin-icon-size);
11
+ font-family: var(--pdf-viewer-icon-font-family);
12
+ line-height: 1;
13
+ }
14
+
15
+ :host(.previous-page-button-icon) svg,
16
+ :host(.next-page-button-icon) svg,
17
+ :host(.toggle-button-icon) svg,
18
+ :host(.sidebarOpen.toggle-button-icon) svg {
19
+ display: none;
20
+ }
21
+
22
+ :host(.previous-page-button-icon)::before {
23
+ content: var(--pdf-viewer-previous-page-button-icon);
24
+ }
25
+
26
+ :host(.next-page-button-icon)::before {
27
+ content: var(--pdf-viewer-next-page-button-icon);
28
+ }
29
+
30
+ :host(.toggle-button-icon)::before {
31
+ content: var(--pdf-viewer-toggle-button-icon-closed);
32
+ }
33
+
34
+ :host(.sidebarOpen.toggle-button-icon)::before {
35
+ content: var(--pdf-viewer-toggle-button-icon-open);
36
+ }
37
+ `,
38
+ { moduleId: "base-vcf-pdf-viewer-toolbar-icons" },
39
+ );
@@ -0,0 +1,3 @@
1
+ import './vcf-pdf-viewer-styles.js';
2
+ import './vcf-pdf-viewer-toolbar-icons-styles.js';
3
+ import '../../src/vcf-pdf-viewer.js';
package/vcf-pdf-viewer.js CHANGED
@@ -1,2 +1,2 @@
1
- import './theme/lumo/vcf-pdf-viewer.js';
1
+ import './theme/base/vcf-pdf-viewer.js';
2
2
  export * from './src/vcf-pdf-viewer.js';
@@ -1,153 +0,0 @@
1
- import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
2
-
3
- import '@vaadin/vaadin-lumo-styles/color.js';
4
- import '@vaadin/vaadin-lumo-styles/sizing.js';
5
- import '@vaadin/vaadin-lumo-styles/spacing.js';
6
- import '@vaadin/vaadin-lumo-styles/typography.js';
7
- import '@vaadin/vaadin-lumo-styles/font-icons.js';
8
-
9
- import '@vaadin/select/theme/lumo/vaadin-select-styles.js';
10
- import '@vaadin/list-box/theme/lumo/vaadin-list-box-styles.js';
11
- import '@vaadin/item/theme/lumo/vaadin-item-styles.js';
12
-
13
- registerStyles(
14
- 'vcf-pdf-viewer',
15
- css`
16
- :host {
17
- background-color: var(--lumo-base-color);
18
- border: 1px solid var(--lumo-contrast-10pct);
19
- border-radius: var(--lumo-border-radius, var(--lumo-border-radius-m));
20
- font-family: var(--lumo-font-family);
21
- position: relative;
22
- }
23
-
24
- [part~="viewer-container"] {
25
- background-color: var(--lumo-contrast-5pct);
26
- outline: none;
27
- }
28
-
29
- [part~="viewer-container"][focus-ring] {
30
- box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
31
- }
32
-
33
- [part~="toolbar"] {
34
- display: flex;
35
- flex-direction: row;
36
- align-items: center;
37
- border-bottom: 1px solid var(--lumo-contrast-10pct);
38
- padding: 0 var(--lumo-space-m);
39
- z-index: 2;
40
- }
41
-
42
- [part~="toolbar-pages"] {
43
- display: flex;
44
- flex-direction: row;
45
- flex: 1;
46
- align-items: center;
47
- justify-content: flex-end;
48
- }
49
-
50
- ::slotted(.toolbar-current-page) {
51
- width: 3.25em;
52
- }
53
-
54
- [part~="toolbar-page-separator"] {
55
- padding: 0 var(--lumo-space-xs);
56
- }
57
-
58
- [part~="toolbar-total-pages"] {
59
- padding-right: var(--lumo-space-m);
60
- }
61
-
62
- [part~="toolbar-title"] {
63
- line-height: 2.25rem;
64
- display: inline-block;
65
- color: var(--lumo-contrast-80pct);
66
- padding: var(--lumo-space-xs) 0;
67
- flex: 1;
68
- white-space: nowrap;
69
- overflow: hidden;
70
- text-overflow: ellipsis;
71
- }
72
-
73
- ::slotted(.toolbar-button) {
74
- height: var(--lumo-size-m);
75
- border-radius: var(--lumo-border-radius, var(--lumo-border-radius-m));
76
- color: var(--lumo-contrast-80pct);
77
- transition: background-color 100ms, color 100ms;
78
- margin: var(--lumo-space-xs);
79
- background: transparent;
80
- border: none;
81
- }
82
-
83
- ::slotted(.toolbar-button[disabled]) {
84
- color: var(--lumo-contrast-40pct);
85
- }
86
-
87
- ::slotted(.toolbar-button:hover) {
88
- background-color: var(--lumo-contrast-5pct);
89
- color: var(--lumo-contrast-80pct);
90
- }
91
-
92
- ::slotted(.toolbar-button[disabled]:hover) {
93
- background-color: transparent;
94
- color: var(--lumo-contrast-40pct);
95
- }
96
-
97
- ::slotted(.toolbar-button:focus) {
98
- outline: none;
99
- box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
100
- }
101
-
102
- .page {
103
- padding: var(--lumo-space-m);
104
- padding-bottom: 0;
105
- }
106
-
107
- .page:last-child {
108
- padding-bottom: var(--lumo-space-m);
109
- }
110
-
111
- .textLayer {
112
- top: var(--lumo-space-m);
113
- right: var(--lumo-space-m);
114
- bottom: var(--lumo-space-m);
115
- left: var(--lumo-space-m);
116
- opacity: 0.2;
117
- }
118
-
119
- .textLayer ::-moz-selection {
120
- background: rgb(0, 0, 255);
121
- }
122
-
123
- .textLayer ::selection {
124
- background: rgb(0, 0, 255);
125
- }
126
-
127
- .textLayer .highlight {
128
- background-color: rgb(180, 0, 170);
129
- border-radius: 4px;
130
- }
131
-
132
- .textLayer .highlight.selected {
133
- background-color: rgb(0, 100, 0);
134
- }
135
-
136
- [part~="toolbar"].small-size [part~="toolbar-pages"] {
137
- flex: none;
138
- }
139
-
140
- [part~="toolbar"].small-size ::slotted(.toolbar-zoom) {
141
- position: absolute;
142
- bottom: var(--lumo-space-s);
143
- left: 50%;
144
- margin-left: -100px;
145
- background-color: white;
146
- box-shadow: var(--lumo-box-shadow-m);
147
- padding: var(--lumo-space-xs);
148
- z-index: 99;
149
- }
150
- `,
151
- { moduleId: 'lumo-vcf-pdf-viewer' }
152
- );
153
-
@@ -1,35 +0,0 @@
1
- import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
2
-
3
- import '@vaadin/icon/theme/lumo/vaadin-icon-styles.js';
4
-
5
- import '@vaadin/vaadin-lumo-styles/font-icons.js';
6
-
7
- registerStyles(
8
- 'vaadin-icon',
9
- css`
10
- :host::before {
11
- font-size: var(--lumo-icon-size-m);
12
- font-family: 'lumo-icons';
13
- line-height: 1;
14
- }
15
-
16
- :host(.previous-page-button-icon)::before {
17
- content: var(--pdf-viewer-previous-page-button-icon, var(--lumo-icons-angle-up));
18
- }
19
-
20
- :host(.next-page-button-icon)::before {
21
- content: var(--pdf-viewer-next-page-button-icon, var(--lumo-icons-angle-down));
22
- }
23
-
24
- :host(.toggle-button-icon)::before {
25
- content: var(--pdf-viewer-toggle-button-icon, var(--lumo-icons-chevron-right));
26
- }
27
-
28
- :host(.sidebarOpen.toggle-button-icon)::before {
29
- content:var(--pdf-viewer-toggle-button-icon, var(--lumo-icons-chevron-left));
30
- }
31
-
32
- `,
33
- { moduleId: 'lumo-vcf-pdf-viewer-toolbar-icons' }
34
- );
35
-
@@ -1,3 +0,0 @@
1
- import '../../src/vcf-pdf-viewer.js';
2
- import './vcf-pdf-viewer-styles.js';
3
- import './vcf-pdf-viewer-toolbar-icons-styles.js';
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/><path fill="none" d="M0 0h24v24H0V0z"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
@@ -1,123 +0,0 @@
1
-
2
- import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
3
-
4
- import '@vaadin/vaadin-material-styles/color.js';
5
- import '@vaadin/vaadin-material-styles/typography.js';
6
-
7
- import '@vaadin/text-field/theme/material/vaadin-text-field-styles.js';
8
- import '@vaadin/select/theme/material/vaadin-select-styles.js';
9
- import '@vaadin/list-box/theme/material/vaadin-list-box-styles.js';
10
- import '@vaadin/item/theme/material/vaadin-item-styles.js';
11
-
12
- registerStyles(
13
- 'vcf-pdf-viewer',
14
- css`
15
- :host {
16
- font-family: var(--material-font-family);
17
- position: relative;
18
- }
19
-
20
- [part~="viewer-container"] {
21
- background-color: var(--material-secondary-background-color);
22
- border: 1px solid rgba(0, 0, 0, 0.12);
23
- outline: none;
24
- }
25
-
26
- [part~="viewer-container"][focus-ring] {
27
- box-shadow: 0 0 0 2px var(--material-primary-color);
28
- }
29
-
30
- [part~="toolbar"] {
31
- display: flex;
32
- flex-direction: row;
33
- align-items: center;
34
- padding: 0 8px;
35
- z-index: 2;
36
- }
37
-
38
- [part~="toolbar-pages"] {
39
- display: flex;
40
- flex-direction: row;
41
- flex: 1;
42
- align-items: center;
43
- justify-content: flex-end;
44
- }
45
-
46
- [part~="toolbar-current-page"] {
47
- width: 3.25em;
48
- }
49
-
50
- [part~="toolbar-page-separator"] {
51
- padding: 0 4px;
52
- }
53
-
54
- [part~="toolbar-total-pages"] {
55
- padding-right: 4px;
56
- }
57
-
58
- [part~="toolbar-title"] {
59
- line-height: 2.25rem;
60
- display: inline-block;
61
- padding: 4px 0;
62
- flex: 1;
63
- white-space: nowrap;
64
- overflow: hidden;
65
- text-overflow: ellipsis;
66
- }
67
-
68
- [part~="toolbar-button"] {
69
- width: 32px;
70
- height: 32px;
71
- color: black;
72
- margin: 2px;
73
- background: transparent;
74
- border: none;
75
- opacity: 0.7;
76
- }
77
-
78
- [part~="toolbar-button"][disabled] {
79
- opacity: 0.4;
80
- }
81
-
82
- [part~="toolbar-button"]:hover {
83
- opacity: 1;
84
- }
85
-
86
- [part~="toolbar-button"][disabled]:hover {
87
- opacity: 0.4;
88
- }
89
-
90
- [part~="previous-page-button-icon"]::before {
91
- content: url('baseline-keyboard_arrow_up-24px.svg');
92
- }
93
-
94
- [part~="next-page-button-icon"]::before {
95
- content: url('baseline-keyboard_arrow_down-24px.svg');
96
- }
97
-
98
- .page {
99
- padding: 8px;
100
- padding-bottom: 0;
101
- }
102
-
103
- .page:last-child {
104
- padding-bottom: 8px;
105
- }
106
-
107
- [part~="toolbar"].small-size [part~="toolbar-pages"] {
108
- flex: none;
109
- }
110
-
111
- [part~="toolbar"].small-size [part~="toolbar-zoom"] {
112
- position: absolute;
113
- bottom: 8px;
114
- left: 50%;
115
- margin-left: -100px;
116
- background-color: white;
117
- border: 1px solid rgba(0, 0, 0, 0.12);
118
- padding: 0 4px;
119
- z-index: 99;
120
- }
121
- `,
122
- { moduleId: 'material-vcf-pdf-viewer' }
123
- );
@@ -1,2 +0,0 @@
1
- import '../../src/vcf-pdf-viewer.js';
2
- import './vcf-pdf-viewer-styles.js';