@nuralyui/document 0.0.9 → 0.0.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/bundle.js +79 -6
- package/document.component.d.ts +1 -1
- package/document.component.js.map +1 -1
- package/document.style.js +74 -1
- package/document.style.js.map +1 -1
- package/document.types.js.map +1 -1
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/react.js.map +1 -1
package/bundle.js
CHANGED
|
@@ -1,7 +1,59 @@
|
|
|
1
|
-
import{css as e,LitElement as o,html as i}from"lit";import{property as t,state as r,customElement as s}from"lit/decorators.js";import{classMap as
|
|
1
|
+
import{css as e,LitElement as o,html as i}from"lit";import{property as t,state as r,customElement as s}from"lit/decorators.js";import{classMap as n}from"lit/directives/class-map.js";import{styleMap as a}from"lit/directives/style-map.js";import{NuralyUIBaseMixin as d}from"@nuralyui/common/mixins";var l=e`
|
|
2
2
|
:host {
|
|
3
3
|
display: block;
|
|
4
4
|
}
|
|
5
|
+
|
|
6
|
+
.document-container {
|
|
7
|
+
width: 100%;
|
|
8
|
+
height: 100%;
|
|
9
|
+
display: flex;
|
|
10
|
+
flex-direction: column;
|
|
11
|
+
position: relative;
|
|
12
|
+
background-color: #f5f5f5;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.document-iframe {
|
|
16
|
+
width: 100%;
|
|
17
|
+
height: 100%;
|
|
18
|
+
border: none;
|
|
19
|
+
flex: 1;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.error-message {
|
|
23
|
+
display: flex;
|
|
24
|
+
flex-direction: column;
|
|
25
|
+
align-items: center;
|
|
26
|
+
justify-content: center;
|
|
27
|
+
height: 100%;
|
|
28
|
+
padding: 2rem;
|
|
29
|
+
text-align: center;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.error-icon {
|
|
33
|
+
width: 64px;
|
|
34
|
+
height: 64px;
|
|
35
|
+
margin-bottom: 1rem;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.preview-button {
|
|
39
|
+
position: absolute;
|
|
40
|
+
bottom: 10px;
|
|
41
|
+
right: 10px;
|
|
42
|
+
background-color: rgba(255, 255, 255, 0.9);
|
|
43
|
+
border: 1px solid #ccc;
|
|
44
|
+
border-radius: 4px;
|
|
45
|
+
padding: 8px 12px;
|
|
46
|
+
cursor: pointer;
|
|
47
|
+
display: flex;
|
|
48
|
+
align-items: center;
|
|
49
|
+
gap: 6px;
|
|
50
|
+
font-size: 14px;
|
|
51
|
+
z-index: 10;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.preview-button:hover {
|
|
55
|
+
background-color: #fff;
|
|
56
|
+
}
|
|
5
57
|
|
|
6
58
|
.pdf-container {
|
|
7
59
|
display: flex;
|
|
@@ -73,6 +125,12 @@ import{css as e,LitElement as o,html as i}from"lit";import{property as t,state a
|
|
|
73
125
|
justify-content: center;
|
|
74
126
|
align-items: center;
|
|
75
127
|
}
|
|
128
|
+
|
|
129
|
+
.preview-modal iframe {
|
|
130
|
+
width: 100%;
|
|
131
|
+
height: 100%;
|
|
132
|
+
border: none;
|
|
133
|
+
}
|
|
76
134
|
|
|
77
135
|
.preview-content {
|
|
78
136
|
position: relative;
|
|
@@ -112,17 +170,32 @@ import{css as e,LitElement as o,html as i}from"lit";import{property as t,state a
|
|
|
112
170
|
position: absolute;
|
|
113
171
|
top: 10px;
|
|
114
172
|
right: 10px;
|
|
115
|
-
background-color:
|
|
173
|
+
background-color: rgba(255, 255, 255, 0.9);
|
|
116
174
|
border: none;
|
|
175
|
+
border-radius: 50%;
|
|
176
|
+
width: 32px;
|
|
177
|
+
height: 32px;
|
|
117
178
|
font-size: 24px;
|
|
118
179
|
cursor: pointer;
|
|
119
180
|
z-index: 1010;
|
|
120
181
|
color: #333;
|
|
182
|
+
display: flex;
|
|
183
|
+
align-items: center;
|
|
184
|
+
justify-content: center;
|
|
121
185
|
}
|
|
122
186
|
|
|
123
187
|
.preview-close:hover {
|
|
188
|
+
background-color: #fff;
|
|
124
189
|
color: #000;
|
|
125
190
|
}
|
|
191
|
+
|
|
192
|
+
.preview-header {
|
|
193
|
+
position: absolute;
|
|
194
|
+
top: 0;
|
|
195
|
+
right: 0;
|
|
196
|
+
z-index: 1010;
|
|
197
|
+
padding: 10px;
|
|
198
|
+
}
|
|
126
199
|
|
|
127
200
|
.preview-modal canvas {
|
|
128
201
|
max-width: 100%;
|
|
@@ -132,15 +205,15 @@ import{css as e,LitElement as o,html as i}from"lit";import{property as t,state a
|
|
|
132
205
|
display: block;
|
|
133
206
|
flex: 1;
|
|
134
207
|
}
|
|
135
|
-
`,c=function(e,o,i,t){for(var r,s=arguments.length,
|
|
136
|
-
<div class=${
|
|
208
|
+
`,c=function(e,o,i,t){for(var r,s=arguments.length,n=s<3?o:null===t?t=Object.getOwnPropertyDescriptor(o,i):t,a=e.length-1;a>=0;a--)(r=e[a])&&(n=(s<3?r(n):s>3?r(o,i,n):r(o,i))||n);return s>3&&n&&Object.defineProperty(o,i,n),n};let p=class extends(d(o)){constructor(){super(...arguments),this.type="pdf",this.width="auto",this.height="500px",this.previewable=!1,this.block=!1,this.showPreview=!1,this.hasError=!1,this.defaultFallback="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgdmlld0JveD0iMCAwIDEyMCAxMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEyMCIgaGVpZ2h0PSIxMjAiIGZpbGw9IiNFRkYxRjMiLz48cGF0aCBkPSJNNTkuNCA2Mi44VjgwLjRINDguMlY0MS42SDYzLjRDNjcuMSA0MS42IDcwLjEgNDIuNiA3Mi40IDQ0LjdDNzQuNyA0Ni44IDc1LjggNDkuNiA3NS44IDUzQzc1LjggNTYuNSA3NC43IDU5LjIgNzIuNCA2MS4zQzcwLjIgNjMuNCA2Ny4yIDY0LjQgNjMuNCA2NC40SDU5LjRWNjIuOFpNNTkuNCA1NC42SDYzLjRDNjUgNTQuNiA2Ni4zIDU0LjEgNjcuMiA1M0M2OC4xIDUxLjkgNjguNiA1MC42IDY4LjYgNDlDNjguNiA0Ny41IDY4LjEgNDYuMiA2Ny4yIDQ1LjFDNjYuMyA0NCA2NSA0My40IDYzLjQgNDMuNEg1OS40VjU0LjZaIiBmaWxsPSIjNjg3Nzg3Ii8+PC9zdmc+"}handleError(){this.hasError=!0,this.dispatchEvent(new CustomEvent("nr-document-error",{bubbles:!0,composed:!0,detail:{error:`Error loading document: ${this.src}`,src:this.src,type:this.type}}))}handleLoad(){this.dispatchEvent(new CustomEvent("nr-document-load",{bubbles:!0,composed:!0,detail:{src:this.src,type:this.type}}))}showPreviewModal(){this.previewable&&!this.hasError&&(this.showPreview=!0,this.dispatchEvent(new CustomEvent("nr-document-preview-open",{bubbles:!0,composed:!0,detail:{src:this.src,type:this.type}})))}closePreviewModal(){this.showPreview=!1,this.dispatchEvent(new CustomEvent("nr-document-preview-close",{bubbles:!0,composed:!0,detail:{src:this.src,type:this.type}}))}render(){const e={"document-container":!0,"document--error":this.hasError},o={width:"number"==typeof this.width?`${this.width}px`:this.width,height:"number"==typeof this.height?`${this.height}px`:this.height};return this.hasError?i`
|
|
209
|
+
<div class=${n(e)} style=${a(o)}>
|
|
137
210
|
<div class="error-message">
|
|
138
211
|
<img class="error-icon" src=${this.defaultFallback} alt="Document error" />
|
|
139
212
|
<p>Unable to load document</p>
|
|
140
213
|
</div>
|
|
141
214
|
</div>
|
|
142
215
|
`:i`
|
|
143
|
-
<div class=${
|
|
216
|
+
<div class=${n(e)} style=${a(o)}>
|
|
144
217
|
<iframe
|
|
145
218
|
class="document-iframe"
|
|
146
219
|
src=${this.src}
|
|
@@ -166,4 +239,4 @@ import{css as e,LitElement as o,html as i}from"lit";import{property as t,state a
|
|
|
166
239
|
</div>
|
|
167
240
|
`:""}
|
|
168
241
|
</div>
|
|
169
|
-
`}};p.styles=
|
|
242
|
+
`}};p.styles=l,c([t({type:String})],p.prototype,"src",void 0),c([t({type:String})],p.prototype,"type",void 0),c([t({type:String})],p.prototype,"width",void 0),c([t({type:String})],p.prototype,"height",void 0),c([t({type:Boolean})],p.prototype,"previewable",void 0),c([t({type:Boolean,reflect:!0})],p.prototype,"block",void 0),c([r()],p.prototype,"showPreview",void 0),c([r()],p.prototype,"hasError",void 0),p=c([s("nr-document")],p);export{p as NrDocumentElement};
|
package/document.component.d.ts
CHANGED
|
@@ -16,7 +16,7 @@ export declare class NrDocumentElement extends NrDocumentElement_base {
|
|
|
16
16
|
private handleLoad;
|
|
17
17
|
private showPreviewModal;
|
|
18
18
|
private closePreviewModal;
|
|
19
|
-
render(): import("lit").TemplateResult<1>;
|
|
19
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
20
20
|
}
|
|
21
21
|
declare global {
|
|
22
22
|
interface HTMLElementTagNameMap {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"document.component.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"document.component.js","sourceRoot":"","sources":["../../../../src/components/document/document.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport styles from \"./document.style.js\";\nimport { DocumentType } from \"./document.types.js\";\n\n@customElement('nr-document')\nexport class NrDocumentElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n\n @property({ type: String })\n src!: string;\n\n @property({ type: String })\n type: DocumentType = DocumentType.PDF;\n\n @property({ type: String })\n width = 'auto';\n\n @property({ type: String })\n height = '500px';\n\n @property({ type: Boolean })\n previewable = false;\n\n @property({ type: Boolean, reflect: true })\n block = false;\n\n @state()\n private showPreview = false;\n\n @state()\n private hasError = false;\n\n private readonly defaultFallback = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgdmlld0JveD0iMCAwIDEyMCAxMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEyMCIgaGVpZ2h0PSIxMjAiIGZpbGw9IiNFRkYxRjMiLz48cGF0aCBkPSJNNTkuNCA2Mi44VjgwLjRINDguMlY0MS42SDYzLjRDNjcuMSA0MS42IDcwLjEgNDIuNiA3Mi40IDQ0LjdDNzQuNyA0Ni44IDc1LjggNDkuNiA3NS44IDUzQzc1LjggNTYuNSA3NC43IDU5LjIgNzIuNCA2MS4zQzcwLjIgNjMuNCA2Ny4yIDY0LjQgNjMuNCA2NC40SDU5LjRWNjIuOFpNNTkuNCA1NC42SDYzLjRDNjUgNTQuNiA2Ni4zIDU0LjEgNjcuMiA1M0M2OC4xIDUxLjkgNjguNiA1MC42IDY4LjYgNDlDNjguNiA0Ny41IDY4LjEgNDYuMiA2Ny4yIDQ1LjFDNjYuMyA0NCA2NSA0My40IDYzLjQgNDMuNEg1OS40VjU0LjZaIiBmaWxsPSIjNjg3Nzg3Ii8+PC9zdmc+';\n\n private handleError() {\n this.hasError = true;\n this.dispatchEvent(new CustomEvent('nr-document-error', {\n bubbles: true,\n composed: true,\n detail: { error: `Error loading document: ${this.src}`, src: this.src, type: this.type }\n }));\n }\n\n private handleLoad() {\n this.dispatchEvent(new CustomEvent('nr-document-load', {\n bubbles: true,\n composed: true,\n detail: { src: this.src, type: this.type }\n }));\n }\n\n private showPreviewModal() {\n if (this.previewable && !this.hasError) {\n this.showPreview = true;\n this.dispatchEvent(new CustomEvent('nr-document-preview-open', {\n bubbles: true,\n composed: true,\n detail: { src: this.src, type: this.type }\n }));\n }\n }\n\n private closePreviewModal() {\n this.showPreview = false;\n this.dispatchEvent(new CustomEvent('nr-document-preview-close', {\n bubbles: true,\n composed: true,\n detail: { src: this.src, type: this.type }\n }));\n }\n\n override render() {\n const containerClasses = {\n 'document-container': true,\n 'document--error': this.hasError\n };\n\n const containerStyles: Record<string, string> = {\n width: typeof this.width === 'number' ? `${this.width}px` : this.width,\n height: typeof this.height === 'number' ? `${this.height}px` : this.height,\n };\n\n if (this.hasError) {\n return html`\n <div class=${classMap(containerClasses)} style=${styleMap(containerStyles)}>\n <div class=\"error-message\">\n <img class=\"error-icon\" src=${this.defaultFallback} alt=\"Document error\" />\n <p>Unable to load document</p>\n </div>\n </div>\n `;\n }\n\n return html`\n <div class=${classMap(containerClasses)} style=${styleMap(containerStyles)}>\n <iframe\n class=\"document-iframe\"\n src=${this.src}\n @error=${this.handleError}\n @load=${this.handleLoad}\n title=\"Document viewer\"\n ></iframe>\n ${this.previewable ? html`\n <button class=\"preview-button\" @click=${this.showPreviewModal}>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n <path d=\"M5.5 5.5A.5.5 0 0 1 6 6v3a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v3a.5.5 0 0 0 1 0V6z\"/>\n <path d=\"M2 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2zM1 2a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2z\"/>\n </svg>\n Fullscreen\n </button>\n ` : ''}\n ${this.showPreview ? html`\n <div class=\"preview-modal\">\n <div class=\"preview-header\">\n <button class=\"preview-close\" @click=${this.closePreviewModal} aria-label=\"Close preview\">×</button>\n </div>\n <iframe src=${this.src} title=\"Document viewer fullscreen\"></iframe>\n </div>\n ` : ''}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-document': NrDocumentElement;\n }\n}\n"]}
|
package/document.style.js
CHANGED
|
@@ -3,6 +3,58 @@ export default css `
|
|
|
3
3
|
:host {
|
|
4
4
|
display: block;
|
|
5
5
|
}
|
|
6
|
+
|
|
7
|
+
.document-container {
|
|
8
|
+
width: 100%;
|
|
9
|
+
height: 100%;
|
|
10
|
+
display: flex;
|
|
11
|
+
flex-direction: column;
|
|
12
|
+
position: relative;
|
|
13
|
+
background-color: #f5f5f5;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.document-iframe {
|
|
17
|
+
width: 100%;
|
|
18
|
+
height: 100%;
|
|
19
|
+
border: none;
|
|
20
|
+
flex: 1;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.error-message {
|
|
24
|
+
display: flex;
|
|
25
|
+
flex-direction: column;
|
|
26
|
+
align-items: center;
|
|
27
|
+
justify-content: center;
|
|
28
|
+
height: 100%;
|
|
29
|
+
padding: 2rem;
|
|
30
|
+
text-align: center;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.error-icon {
|
|
34
|
+
width: 64px;
|
|
35
|
+
height: 64px;
|
|
36
|
+
margin-bottom: 1rem;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.preview-button {
|
|
40
|
+
position: absolute;
|
|
41
|
+
bottom: 10px;
|
|
42
|
+
right: 10px;
|
|
43
|
+
background-color: rgba(255, 255, 255, 0.9);
|
|
44
|
+
border: 1px solid #ccc;
|
|
45
|
+
border-radius: 4px;
|
|
46
|
+
padding: 8px 12px;
|
|
47
|
+
cursor: pointer;
|
|
48
|
+
display: flex;
|
|
49
|
+
align-items: center;
|
|
50
|
+
gap: 6px;
|
|
51
|
+
font-size: 14px;
|
|
52
|
+
z-index: 10;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.preview-button:hover {
|
|
56
|
+
background-color: #fff;
|
|
57
|
+
}
|
|
6
58
|
|
|
7
59
|
.pdf-container {
|
|
8
60
|
display: flex;
|
|
@@ -74,6 +126,12 @@ export default css `
|
|
|
74
126
|
justify-content: center;
|
|
75
127
|
align-items: center;
|
|
76
128
|
}
|
|
129
|
+
|
|
130
|
+
.preview-modal iframe {
|
|
131
|
+
width: 100%;
|
|
132
|
+
height: 100%;
|
|
133
|
+
border: none;
|
|
134
|
+
}
|
|
77
135
|
|
|
78
136
|
.preview-content {
|
|
79
137
|
position: relative;
|
|
@@ -113,17 +171,32 @@ export default css `
|
|
|
113
171
|
position: absolute;
|
|
114
172
|
top: 10px;
|
|
115
173
|
right: 10px;
|
|
116
|
-
background-color:
|
|
174
|
+
background-color: rgba(255, 255, 255, 0.9);
|
|
117
175
|
border: none;
|
|
176
|
+
border-radius: 50%;
|
|
177
|
+
width: 32px;
|
|
178
|
+
height: 32px;
|
|
118
179
|
font-size: 24px;
|
|
119
180
|
cursor: pointer;
|
|
120
181
|
z-index: 1010;
|
|
121
182
|
color: #333;
|
|
183
|
+
display: flex;
|
|
184
|
+
align-items: center;
|
|
185
|
+
justify-content: center;
|
|
122
186
|
}
|
|
123
187
|
|
|
124
188
|
.preview-close:hover {
|
|
189
|
+
background-color: #fff;
|
|
125
190
|
color: #000;
|
|
126
191
|
}
|
|
192
|
+
|
|
193
|
+
.preview-header {
|
|
194
|
+
position: absolute;
|
|
195
|
+
top: 0;
|
|
196
|
+
right: 0;
|
|
197
|
+
z-index: 1010;
|
|
198
|
+
padding: 10px;
|
|
199
|
+
}
|
|
127
200
|
|
|
128
201
|
.preview-modal canvas {
|
|
129
202
|
max-width: 100%;
|
package/document.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"document.style.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"document.style.js","sourceRoot":"","sources":["../../../../src/components/document/document.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+MjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n :host {\n display: block;\n }\n\n .document-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n position: relative;\n background-color: #f5f5f5;\n }\n\n .document-iframe {\n width: 100%;\n height: 100%;\n border: none;\n flex: 1;\n }\n\n .error-message {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 2rem;\n text-align: center;\n }\n\n .error-icon {\n width: 64px;\n height: 64px;\n margin-bottom: 1rem;\n }\n\n .preview-button {\n position: absolute;\n bottom: 10px;\n right: 10px;\n background-color: rgba(255, 255, 255, 0.9);\n border: 1px solid #ccc;\n border-radius: 4px;\n padding: 8px 12px;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 14px;\n z-index: 10;\n }\n\n .preview-button:hover {\n background-color: #fff;\n }\n \n .pdf-container {\n display: flex;\n flex-direction: column;\n border: 1px solid #ccc;\n border-radius: 4px;\n overflow: hidden;\n background-color: #f5f5f5;\n position: relative;\n }\n \n .toolbar {\n display: flex;\n align-items: center;\n padding: 8px;\n background-color: #f0f0f0;\n border-bottom: 1px solid #ddd;\n gap: 8px;\n }\n \n .toolbar button {\n background-color: #fff;\n border: 1px solid #ccc;\n border-radius: 4px;\n padding: 4px 8px;\n cursor: pointer;\n font-size: 14px;\n }\n \n .toolbar button:hover {\n background-color: #e6e6e6;\n }\n \n .toolbar button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n \n .toolbar span {\n margin: 0 4px;\n font-size: 14px;\n }\n \n .canvas-container {\n flex: 1;\n overflow: auto;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n background-color: #e0e0e0;\n padding: 16px;\n min-height: 200px;\n }\n \n canvas {\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\n background-color: white;\n }\n \n .preview-modal {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.8);\n z-index: 1000;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .preview-modal iframe {\n width: 100%;\n height: 100%;\n border: none;\n }\n \n .preview-content {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 90%;\n height: 90%;\n background-color: #f5f5f5;\n border-radius: 8px;\n overflow: hidden;\n }\n \n .preview-toolbar {\n display: flex;\n align-items: center;\n padding: 12px;\n background-color: #f0f0f0;\n border-bottom: 1px solid #ddd;\n gap: 12px;\n }\n \n .preview-toolbar button {\n background-color: #fff;\n border: 1px solid #ccc;\n border-radius: 4px;\n padding: 6px 12px;\n cursor: pointer;\n font-size: 16px;\n }\n \n .preview-toolbar span {\n margin: 0 6px;\n font-size: 16px;\n }\n \n .preview-close {\n position: absolute;\n top: 10px;\n right: 10px;\n background-color: rgba(255, 255, 255, 0.9);\n border: none;\n border-radius: 50%;\n width: 32px;\n height: 32px;\n font-size: 24px;\n cursor: pointer;\n z-index: 1010;\n color: #333;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n .preview-close:hover {\n background-color: #fff;\n color: #000;\n }\n\n .preview-header {\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1010;\n padding: 10px;\n }\n \n .preview-modal canvas {\n max-width: 100%;\n max-height: calc(100% - 60px); /* Account for toolbar height */\n object-fit: contain;\n margin: auto;\n display: block;\n flex: 1;\n }\n`;"]}
|
package/document.types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"document.types.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"document.types.js","sourceRoot":"","sources":["../../../../src/components/document/document.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n/**\n * Document viewer type\n */\nexport const enum DocumentType {\n /** PDF document */\n PDF = 'pdf',\n /** Image document */\n Image = 'image',\n /** Other/unknown type */\n Other = 'other',\n}\n\n/**\n * Document fit mode\n */\nexport const enum DocumentFit {\n /** Fit to width */\n Width = 'width',\n /** Fit to height */\n Height = 'height',\n /** Fit to page */\n Page = 'page',\n /** Auto fit */\n Auto = 'auto',\n}\n\n/**\n * Document configuration interface\n */\nexport interface DocumentConfig {\n /** Document source URL */\n src: string;\n \n /** Document type */\n type?: DocumentType;\n \n /** Fallback document URL or image */\n fallback?: string;\n \n /** Document width */\n width?: string | number;\n \n /** Document height */\n height?: string | number;\n \n /** Whether document is previewable (fullscreen) */\n previewable?: boolean;\n \n /** Fit mode for document display */\n fit?: DocumentFit;\n \n /** Custom CSS class */\n customClass?: string;\n \n /** Callback when document loads */\n onLoad?: () => void;\n \n /** Callback when document fails to load */\n onError?: (error: Error) => void;\n}\n\n/**\n * Document event detail\n */\nexport interface DocumentEventDetail {\n /** Original event */\n originalEvent?: Event;\n \n /** Error message if applicable */\n error?: string;\n \n /** Document source */\n src?: string;\n \n /** Document type */\n type?: DocumentType;\n}\n"]}
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/document/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './document.component.js';\nexport * from './document.types.js';\n"]}
|
package/package.json
CHANGED
package/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../../src/components/document/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAC;IACxC,OAAO,EAAE,aAAa;IACtB,YAAY,EAAE,iBAAiB;IAC/B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,MAAM,EAAE,kBAAkB;QAC1B,OAAO,EAAE,mBAAmB;QAC5B,aAAa,EAAE,0BAA0B;QACzC,cAAc,EAAE,2BAA2B;KAC5C;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrDocumentElement } from './document.component.js';\n\nexport const NrDocument = createComponent({\n tagName: 'nr-document',\n elementClass: NrDocumentElement,\n react: React,\n events: {\n onLoad: 'nr-document-load',\n onError: 'nr-document-error',\n onPreviewOpen: 'nr-document-preview-open',\n onPreviewClose: 'nr-document-preview-close',\n },\n});\n"]}
|