@blockquote-web-components/blockquote-base-embedded-webview 1.5.2 → 1.6.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.
Files changed (10) hide show
  1. package/README.md +305 -99
  2. package/define/blockquote-base-embedded-webview-element.js +1 -1
  3. package/define/blockquote-base-embedded-webview-resize.js +1 -1
  4. package/define/blockquote-base-embedded-webview-size.js +1 -1
  5. package/define/blockquote-base-embedded-webview.js +1 -1
  6. package/package.json +22 -12
  7. package/src/BlockquoteBaseEmbeddedWebview.js +66 -69
  8. package/src/BlockquoteBaseEmbeddedWebviewElement.js +15 -20
  9. package/src/BlockquoteBaseEmbeddedWebviewResize.js +26 -34
  10. package/src/BlockquoteBaseEmbeddedWebviewSize.js +26 -35
package/README.md CHANGED
@@ -1,60 +1,203 @@
1
- # blockquote-base-embedded-webview-element
1
+ ![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)
2
2
 
3
- ![Lit](https://img.shields.io/badge/lit-2.0.0-blue)
3
+ `blockquote-base-embedded-webview` offers a responsive display using individual HTML files as content with different use cases to be displayed.
4
+ It will create a `select` tag with the provided demo HTML files and add the `[data-embedded]` attribute to the loaded body tag.
5
+
6
+ ## Base usage
7
+
8
+ ```html
9
+ <blockquote-base-embedded-webview heading="My demo title">
10
+ <template data-src="./base.html" data-option="Base" data-description="base - description"></template>
11
+ <template data-src="./complex.html" data-option="Complex" data-description="complex - description"></template>
12
+ </blockquote-base-embedded-webview>
13
+ ```
14
+
15
+ ## base.html
16
+
17
+ ```html
18
+ <!DOCTYPE html>
19
+ <html lang="en">
20
+ <head>
21
+ <title>Demo Base</title>
22
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
23
+ <meta charset="utf-8" />
24
+ <style>
25
+ :root {
26
+ font: normal medium/1.25 sans-serif;
27
+ }
28
+ body {
29
+ margin: 0;
30
+ }
31
+ [data-embedded] .hidden {
32
+ display: none;
33
+ }
34
+ </style>
35
+ </head>
36
+ <body>
37
+ <h1 class="hidden">Heading</h1>
38
+ <p>Base Demo</p>
39
+ </body>
40
+ </html>
41
+ ```
42
+
43
+
44
+ ### `src/BlockquoteBaseEmbeddedWebview.js`:
45
+
46
+ #### class: `BlockquoteBaseEmbeddedWebview`, `blockquote-base-embedded-webview`
47
+
48
+ ##### Fields
49
+
50
+ | Name | Privacy | Type | Default | Description | Inherited From |
51
+ | --------------------- | ------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | -------------- |
52
+ | `_headingLevel` | | | | | |
53
+ | `_lightDomTpl` | | | | | |
54
+ | `_headerTpl` | | | | | |
55
+ | `_headingTpl` | | | | | |
56
+ | `_navigationDemosTpl` | | | | | |
57
+ | `_selectTpl` | | | | | |
58
+ | `_externalLinkTpl` | | | | | |
59
+ | `_descriptionTpl` | | | | | |
60
+ | `_readDataPosTpl` | | | | | |
61
+ | `_screenSizeTpl` | | | | | |
62
+ | `_mainTpl` | | | | | |
63
+ | `_embeddedSlotTpl` | | | | | |
64
+ | `selected` | public | `number` | `0` | Index of currently srcset file | |
65
+ | `screenSizeSelected` | public | `number` | `0` | Index of currently screen size selected | |
66
+ | `headingLevel` | public | `number` | `1` | Heading level from 1 to 6 | |
67
+ | `heading` | public | `string` | `''` | The heading of the webview. | |
68
+ | `__resetResizing` | | `boolean` | `false` | | |
69
+ | `__selectArrow` | | | `` html`<svg aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentcolor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <polyline points="6 9 12 15 18 9" /></svg>` `` | | |
70
+ | `__readDataPos` | | `object` | `{ x: '0', y: '0', resizing: false, cursor: '' }` | | |
71
+ | `limitHeight` | public | `boolean` | `false` | Limit height to 100% available | |
72
+ | `_sources` | | `array` | `[{ src: '', option: '', description: '' }]` | | |
73
+ | `_embeddedResizeRef` | | | | | |
74
+
75
+ ##### Methods
76
+
77
+ | Name | Privacy | Description | Parameters | Return | Inherited From |
78
+ | ---------------- | ------- | ----------- | ------------ | ------ | -------------- |
79
+ | `_updateSize` | | | `{ detail }` | | |
80
+ | `_litHtmlRender` | | | | | |
81
+ | `_onChangeFile` | | | `{ target }` | | |
82
+
83
+ ##### Attributes
84
+
85
+ | Name | Field | Inherited From |
86
+ | ---------------------- | ------------------ | -------------- |
87
+ | `heading` | heading | |
88
+ | `selected` | selected | |
89
+ | `heading-level` | headingLevel | |
90
+ | `screen-size-selected` | screenSizeSelected | |
91
+ | `limit-height` | limitHeight | |
92
+
93
+ <hr/>
94
+
95
+ #### Exports
96
+
97
+ | Kind | Name | Declaration | Module | Package |
98
+ | ---- | ------------------------------- | ----------------------------- | ------------------------------------- | ------- |
99
+ | `js` | `BlockquoteBaseEmbeddedWebview` | BlockquoteBaseEmbeddedWebview | src/BlockquoteBaseEmbeddedWebview\.js | |
100
+
101
+ ![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)
4
102
 
5
103
  `blockquote-base-embedded-webview-element` wraps an `iframe` or `object` and shows it through light dom.
6
104
 
7
- ## Exports
8
105
 
9
- - BlockquoteBaseEmbeddedWebviewElement
106
+ ### `src/BlockquoteBaseEmbeddedWebviewElement.js`:
10
107
 
11
- ## Properties
108
+ #### class: `BlockquoteBaseEmbeddedWebviewElement`, `blockquote-base-embedded-webview-element`
12
109
 
13
- | Property | Attribute | Type | Default | Description |
14
- |-----------------|------------------|----------|----------|--------------------------------------------------|
15
- | `embeddedTitle` | `embedded-title` | `string` | "" | The title attribute on an <element> to label its content |
16
- | `src` | `src` | `string` | "" | The URL of the page to embed |
17
- | `type` | `type` | `string` | "iframe" | The type of the tag to embed - iframe or object |
110
+ ##### Fields
18
111
 
19
- ## Methods
112
+ | Name | Privacy | Type | Default | Description | Inherited From |
113
+ | --------------- | ------- | -------- | ---------- | --------------------------------------------------------- | -------------- |
114
+ | `_lightDomTpl` | | | | | |
115
+ | `_loadResource` | | | | | |
116
+ | `_embeddedTpl` | | | | | |
117
+ | `embeddedTitle` | public | `string` | `''` | The title attribute on an \<element> to label its content | |
118
+ | `src` | public | `string` | `''` | The URL of the page to embed | |
119
+ | `type` | public | `string` | `'iframe'` | The type of the tag to embed - iframe or object | |
20
120
 
21
- | Method | Type |
22
- |--------------|----------------------|
23
- | `willUpdate` | `(props: any): void` |
121
+ ##### Methods
24
122
 
25
- ## Events
123
+ | Name | Privacy | Description | Parameters | Return | Inherited From |
124
+ | ---------------- | ------- | ----------- | ------------ | ------ | -------------- |
125
+ | `_litHtmlRender` | | | | | |
126
+ | `_fetch` | | | `resource` | | |
127
+ | `_onLoadElement` | | | `{ target }` | | |
26
128
 
27
- | Event | Type |
28
- |-----------------|--------------------|
29
- | `elementloaded` | `CustomEvent<any>` |
129
+ ##### Attributes
30
130
 
131
+ | Name | Field | Inherited From |
132
+ | ---------------- | ------------- | -------------- |
133
+ | `embedded-title` | embeddedTitle | |
134
+ | `src` | src | |
135
+ | `type` | type | |
31
136
 
32
- # blockquote-base-embedded-webview-resize
137
+ <hr/>
33
138
 
34
- ![Lit](https://img.shields.io/badge/lit-2.0.0-blue)
139
+ #### Exports
140
+
141
+ | Kind | Name | Declaration | Module | Package |
142
+ | ---- | -------------------------------------- | ------------------------------------ | ------------------------------------------- | ------- |
143
+ | `js` | `BlockquoteBaseEmbeddedWebviewElement` | BlockquoteBaseEmbeddedWebviewElement | src/BlockquoteBaseEmbeddedWebviewElement.js | |
144
+
145
+ ![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)
35
146
 
36
147
  `blockquote-base-embedded-webview-resize`
37
148
 
38
- ## Exports
39
149
 
40
- - BlockquoteBaseEmbeddedWebviewResize
150
+ ### `src/BlockquoteBaseEmbeddedWebviewResize.js`:
151
+
152
+ #### class: `BlockquoteBaseEmbeddedWebviewResize`, `blockquote-base-embedded-webview-resize`
41
153
 
42
- ## Events
154
+ ##### Fields
43
155
 
44
- | Event | Type |
45
- |-----------------|--------------------------------------------------|
46
- | `webviewresize` | `CustomEvent<{ x: string; y: string; resizing: boolean; cursor: string; }>` |
156
+ | Name | Privacy | Type | Default | Description | Inherited From |
157
+ | ------------------------------ | ------- | -------- | ------- | ----------- | -------------- |
158
+ | `_resizersTpl` | | | | | |
159
+ | `_cursor` | | `string` | `''` | | |
160
+ | `_createResizerLeft` | | | | | |
161
+ | `_createResizerRight` | | | | | |
162
+ | `_createResizerBottom` | | | | | |
163
+ | `_createResizerBottomLeft` | | | | | |
164
+ | `_createResizerBottomRight` | | | | | |
165
+ | `_getBoundingClientRectWidth` | | `number` | `0` | | |
166
+ | `_getBoundingClientRectHeight` | | `number` | `0` | | |
47
167
 
168
+ ##### Methods
48
169
 
49
- # blockquote-base-embedded-webview-size
170
+ | Name | Privacy | Description | Parameters | Return | Inherited From |
171
+ | ------------------------------- | ------- | ----------- | ------------ | ------ | -------------- |
172
+ | `_doubleclickForCssInitialSize` | | | | | |
173
+ | `_createResizer` | | | `DOMRect` | | |
174
+ | `_removeResizer` | | | | | |
175
+ | `_resizer` | | | `{ detail }` | | |
176
+ | `_dispatchResizeEvent` | | | | | |
177
+ | `_getBoundingClientRect` | | | `DOMRect` | | |
50
178
 
51
- ![Lit](https://img.shields.io/badge/lit-2.0.0-blue)
179
+ ##### Events
180
+
181
+ | Name | Type | Description | Inherited From |
182
+ | --------------- | ---- | -------------------------------------------- | -------------- |
183
+ | `webviewresize` | | Raised when the element's dimensions changes | |
184
+
185
+ <hr/>
186
+
187
+ #### Exports
188
+
189
+ | Kind | Name | Declaration | Module | Package |
190
+ | ---- | ------------------------------------- | ----------------------------------- | ------------------------------------------ | ------- |
191
+ | `js` | `BlockquoteBaseEmbeddedWebviewResize` | BlockquoteBaseEmbeddedWebviewResize | src/BlockquoteBaseEmbeddedWebviewResize.js | |
192
+
193
+ ![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)
52
194
 
53
195
  `blockquote-base-embedded-webview-size` provides a list of ideal screen sizes for responsive designs.
196
+ <br>
54
197
 
55
198
  ```html
56
199
  <blockquote-base-embedded-webview-size
57
- screen-sizes="[
200
+ screen-sizes="[
58
201
  { width: 360, height: 640, id: '360x640' },
59
202
  { width: 360, height: 800, id: '360x800' },
60
203
  { width: 414, height: 896, id: '414x896' },
@@ -64,95 +207,158 @@ screen-sizes="[
64
207
  { width: 1366, height: 768, id: '1366x768' },
65
208
  { width: 1536, height: 864, id: '1536x864' },
66
209
  { width: 1920, height: 1080, id: '1920x1080' },
67
- ]"
210
+ ]"
68
211
  ></blockquote-base-embedded-webview-size>
69
212
  ```
70
213
 
71
- ## Exports
72
214
 
73
- - BlockquoteBaseEmbeddedWebviewSize
215
+ ### `src/BlockquoteBaseEmbeddedWebviewSize.js`:
74
216
 
75
- ## Properties
217
+ #### class: `BlockquoteBaseEmbeddedWebviewSize`, `blockquote-base-embedded-webview-size`
76
218
 
77
- | Property | Attribute | Modifiers | Type | Default | Description |
78
- |----------------------------|-------------------------------|-----------|--------------------------------------------------|--------------------------------------------------|--------------------------------------------------|
79
- | `computedStyleWidth` | | readonly | `number` | | |
80
- | `disabledSelectedSizeText` | `disabled-selected-size-text` | | `Boolean` | false | If true, selected size text is disabled |
81
- | `screenSizes` | `screen-sizes` | | `Array` | [{"width":360,"height":640,"id":"360x640"},{"width":360,"height":800,"id":"360x800"},{"width":414,"height":896,"id":"414x896"},{"width":768,"height":1024,"id":"768x1024"},{"width":810,"height":1080,"id":"810x1080"},{"width":1280,"height":800,"id":"1280x800"},{"width":1366,"height":768,"id":"1366x768"},{"width":1536,"height":864,"id":"1536x864"},{"width":1920,"height":1080,"id":"1920x1080"}] | The screen size options to display |
82
- | `selected` | `selected` | | `Number` | 0 | The screen size option selected |
83
- | `selectedDetail` | | readonly | `{ index: number; width: number; height: number; id: string; }` | | |
84
- | `selectedSize` | | readonly | `{ width: number; height: number; id: string; }` | | |
85
- | `showOverflowSize` | `show-overflow-size` | | `Boolean` | false | Show screen size options that are too large for the container |
86
- | `widthInPercent` | `width-in-percent` | | `Boolean` | false | Percentage value for the width |
219
+ ##### Fields
87
220
 
88
- ## Methods
221
+ | Name | Privacy | Type | Default | Description | Inherited From |
222
+ | -------------------------- | ------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | -------------- |
223
+ | `selectedSize` | | | | | |
224
+ | `selectedDetail` | | | | | |
225
+ | `computedStyleWidth` | | | | | |
226
+ | `_toolbarTpl` | | | | | |
227
+ | `_visualTextTpl` | | | | | |
228
+ | `showOverflowSize` | public | `boolean` | `false` | Show screen size options that are too large for the container | |
229
+ | `selected` | public | `number` | `0` | The screen size option selected | |
230
+ | `disabledSelectedSizeText` | public | `boolean` | `false` | If true, selected size text is disabled | |
231
+ | `screenSizes` | public | `array` | `[ { width: 360, height: 640, id: '360x640' }, { width: 360, height: 800, id: '360x800' }, { width: 414, height: 896, id: '414x896' }, { width: 768, height: 1024, id: '768x1024' }, { width: 810, height: 1080, id: '810x1080' }, { width: 1280, height: 800, id: '1280x800' }, { width: 1366, height: 768, id: '1366x768' }, { width: 1536, height: 864, id: '1536x864' }, { width: 1920, height: 1080, id: '1920x1080' }, ]` | The screen size options to display | |
232
+ | `widthInPercent` | public | `boolean` | `false` | Percentage value for the width | |
89
233
 
90
- | Method | Type |
91
- |--------------|----------------------|
92
- | `willUpdate` | `(props: any): void` |
234
+ ##### Methods
93
235
 
94
- ## Events
236
+ | Name | Privacy | Description | Parameters | Return | Inherited From |
237
+ | -------------- | ------- | ----------- | ---------- | ------ | -------------- |
238
+ | `_onResize` | | | `ev` | | |
239
+ | `_setSelected` | | | `ev` | | |
95
240
 
96
- | Event | Type |
97
- |------------------|--------------------------------------------------|
98
- | `click` | `CustomEvent<{ index: number; width: number; height: number; id: string; }>` |
99
- | `selectedchange` | `CustomEvent<{ index: number; width: number; height: number; id: string; }>` |
241
+ ##### Attributes
100
242
 
243
+ | Name | Field | Inherited From |
244
+ | ----------------------------- | ------------------------ | -------------- |
245
+ | `screen-sizes` | screenSizes | |
246
+ | `width-in-percent` | widthInPercent | |
247
+ | `show-overflow-size` | showOverflowSize | |
248
+ | `disabled-selected-size-text` | disabledSelectedSizeText | |
249
+ | `selected` | selected | |
101
250
 
102
- # blockquote-base-embedded-webview
251
+ <hr/>
103
252
 
104
- ![Lit](https://img.shields.io/badge/lit-2.0.0-blue)
253
+ #### Exports
105
254
 
106
- `blockquote-base-embedded-webview` offers a responsive display using individual HTML files as content with the different use cases to be displayed.
107
- It will create a `select` tag with the provided demo HTML files and add the `[data-embedded]` attribute to the loaded body tag.
255
+ | Kind | Name | Declaration | Module | Package |
256
+ | ---- | ----------------------------------- | --------------------------------- | ---------------------------------------- | ------- |
257
+ | `js` | `BlockquoteBaseEmbeddedWebviewSize` | BlockquoteBaseEmbeddedWebviewSize | src/BlockquoteBaseEmbeddedWebviewSize.js | |
108
258
 
109
- ## Base usage
259
+ ### `src/styles/blockquote-base-embedded-webview-element-styles.css.js`:
110
260
 
111
- ```html
112
- <blockquote-base-embedded-webview heading="My demo title">
113
- <template data-src="./base.html" data-option="Base" data-description="base - description"></template>
114
- <template data-src="./complex.html" data-option="Complex" data-description="complex - description"></template>
115
- </blockquote-base-embedded-webview>
116
- ```
261
+ #### Variables
117
262
 
118
- ## base.html
263
+ | Name | Description | Type |
264
+ | -------- | ----------- | ---- |
265
+ | `styles` | | |
119
266
 
120
- ```html
121
- <!DOCTYPE html>
122
- <html lang="en">
123
- <head>
124
- <title>Demo Base</title>
125
- <meta name="viewport" content="width=device-width, initial-scale=1" />
126
- <meta charset="utf-8" />
127
- <style>
128
- :root {
129
- font: normal medium/1.25 sans-serif;
130
- }
131
- body {
132
- margin: 0;
133
- }
134
- [data-embedded] .hidden {
135
- display: none;
136
- }
137
- </style>
138
- </head>
139
- <body>
140
- <h1 class="hidden">Heading</h1>
141
- <p>Base Demo</p>
142
- </body>
143
- </html>
144
- ```
267
+ <hr/>
268
+
269
+ #### Exports
270
+
271
+ | Kind | Name | Declaration | Module | Package |
272
+ | ---- | -------- | ----------- | ----------------------------------------------------------------- | ------- |
273
+ | `js` | `styles` | styles | src/styles/blockquote-base-embedded-webview-element-styles.css.js | |
274
+
275
+ ### `src/styles/blockquote-base-embedded-webview-resize-styles.css.js`:
276
+
277
+ #### Variables
278
+
279
+ | Name | Description | Type |
280
+ | -------- | ----------- | ---- |
281
+ | `styles` | | |
282
+
283
+ <hr/>
284
+
285
+ #### Exports
286
+
287
+ | Kind | Name | Declaration | Module | Package |
288
+ | ---- | -------- | ----------- | ---------------------------------------------------------------- | ------- |
289
+ | `js` | `styles` | styles | src/styles/blockquote-base-embedded-webview-resize-styles.css.js | |
290
+
291
+ ### `src/styles/blockquote-base-embedded-webview-size-styles.css.js`:
292
+
293
+ #### Variables
294
+
295
+ | Name | Description | Type |
296
+ | -------- | ----------- | ---- |
297
+ | `styles` | | |
298
+
299
+ <hr/>
300
+
301
+ #### Exports
302
+
303
+ | Kind | Name | Declaration | Module | Package |
304
+ | ---- | -------- | ----------- | -------------------------------------------------------------- | ------- |
305
+ | `js` | `styles` | styles | src/styles/blockquote-base-embedded-webview-size-styles.css.js | |
306
+
307
+ ### `src/styles/blockquote-base-embedded-webview-styles.css.js`:
308
+
309
+ #### Variables
310
+
311
+ | Name | Description | Type |
312
+ | -------- | ----------- | ---- |
313
+ | `styles` | | |
314
+
315
+ <hr/>
316
+
317
+ #### Exports
318
+
319
+ | Kind | Name | Declaration | Module | Package |
320
+ | ---- | -------- | ----------- | --------------------------------------------------------- | ------- |
321
+ | `js` | `styles` | styles | src/styles/blockquote-base-embedded-webview-styles.css.js | |
322
+
323
+ ### `define/blockquote-base-embedded-webview-element.js`:
324
+
325
+ #### Exports
326
+
327
+ | Kind | Name | Declaration | Module | Package |
328
+ | --------------------------- | ------------------------------------------ | ------------------------------------ | -------------------------------------------- | ------- |
329
+ | `custom-element-definition` | `blockquote-base-embedded-webview-element` | BlockquoteBaseEmbeddedWebviewElement | /src/BlockquoteBaseEmbeddedWebviewElement.js | |
330
+
331
+ ### `define/blockquote-base-embedded-webview-resize.js`:
332
+
333
+ #### Exports
334
+
335
+ | Kind | Name | Declaration | Module | Package |
336
+ | --------------------------- | ----------------------------------------- | ----------------------------------- | ------------------------------------------- | ------- |
337
+ | `custom-element-definition` | `blockquote-base-embedded-webview-resize` | BlockquoteBaseEmbeddedWebviewResize | /src/BlockquoteBaseEmbeddedWebviewResize.js | |
338
+
339
+ ### `define/blockquote-base-embedded-webview-size.js`:
340
+
341
+ #### Exports
342
+
343
+ | Kind | Name | Declaration | Module | Package |
344
+ | --------------------------- | --------------------------------------- | --------------------------------- | ----------------------------------------- | ------- |
345
+ | `custom-element-definition` | `blockquote-base-embedded-webview-size` | BlockquoteBaseEmbeddedWebviewSize | /src/BlockquoteBaseEmbeddedWebviewSize.js | |
346
+
347
+ ### `define/blockquote-base-embedded-webview.js`:
348
+
349
+ #### Exports
145
350
 
146
- ## Exports
351
+ | Kind | Name | Declaration | Module | Package |
352
+ | --------------------------- | ---------------------------------- | ----------------------------- | -------------------------------------- | ------- |
353
+ | `custom-element-definition` | `blockquote-base-embedded-webview` | BlockquoteBaseEmbeddedWebview | /src/BlockquoteBaseEmbeddedWebview\.js | |
147
354
 
148
- - BlockquoteBaseEmbeddedWebview
355
+ ### `index.js`:
149
356
 
150
- ## Properties
357
+ #### Exports
151
358
 
152
- | Property | Attribute | Type | Default | Description |
153
- |----------------------|------------------------|-----------|---------|-----------------------------------------|
154
- | `heading` | `heading` | `String` | "" | The heading of the webview. |
155
- | `headingLevel` | `heading-level` | `Number` | 1 | Heading level from 1 to 6 |
156
- | `limitHeight` | `limit-height` | `Boolean` | false | Limit height to 100% available |
157
- | `screenSizeSelected` | `screen-size-selected` | `Number` | 0 | Index of currently screen size selected |
158
- | `selected` | `selected` | `Number` | 0 | Index of currently srcset file |
359
+ | Kind | Name | Declaration | Module | Package |
360
+ | ---- | -------------------------------------- | ------------------------------------ | --------------------------------------------- | ------- |
361
+ | `js` | `BlockquoteBaseEmbeddedWebview` | BlockquoteBaseEmbeddedWebview | ./src/BlockquoteBaseEmbeddedWebview\.js | |
362
+ | `js` | `BlockquoteBaseEmbeddedWebviewSize` | BlockquoteBaseEmbeddedWebviewSize | ./src/BlockquoteBaseEmbeddedWebviewSize.js | |
363
+ | `js` | `BlockquoteBaseEmbeddedWebviewResize` | BlockquoteBaseEmbeddedWebviewResize | ./src/BlockquoteBaseEmbeddedWebviewResize.js | |
364
+ | `js` | `BlockquoteBaseEmbeddedWebviewElement` | BlockquoteBaseEmbeddedWebviewElement | ./src/BlockquoteBaseEmbeddedWebviewElement.js | |
package/define/blockquote-base-embedded-webview-element.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { BlockquoteBaseEmbeddedWebviewElement } from '../src/BlockquoteBaseEmbeddedWebviewElement.js';
2
2
 
3
3
  window.customElements.define(
4
- BlockquoteBaseEmbeddedWebviewElement.is,
4
+ 'blockquote-base-embedded-webview-element',
5
5
  BlockquoteBaseEmbeddedWebviewElement,
6
6
  );
package/define/blockquote-base-embedded-webview-resize.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { BlockquoteBaseEmbeddedWebviewResize } from '../src/BlockquoteBaseEmbeddedWebviewResize.js';
2
2
 
3
3
  window.customElements.define(
4
- BlockquoteBaseEmbeddedWebviewResize.is,
4
+ 'blockquote-base-embedded-webview-resize',
5
5
  BlockquoteBaseEmbeddedWebviewResize,
6
6
  );
package/define/blockquote-base-embedded-webview-size.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { BlockquoteBaseEmbeddedWebviewSize } from '../src/BlockquoteBaseEmbeddedWebviewSize.js';
2
2
 
3
3
  window.customElements.define(
4
- BlockquoteBaseEmbeddedWebviewSize.is,
4
+ 'blockquote-base-embedded-webview-size',
5
5
  BlockquoteBaseEmbeddedWebviewSize,
6
6
  );
package/define/blockquote-base-embedded-webview.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import { BlockquoteBaseEmbeddedWebview } from '../src/BlockquoteBaseEmbeddedWebview.js';
2
2
 
3
- window.customElements.define(BlockquoteBaseEmbeddedWebview.is, BlockquoteBaseEmbeddedWebview);
3
+ window.customElements.define('blockquote-base-embedded-webview', BlockquoteBaseEmbeddedWebview);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blockquote-web-components/blockquote-base-embedded-webview",
3
- "version": "1.5.2",
3
+ "version": "1.6.0",
4
4
  "description": "Webcomponent blockquote-base-embedded-webview following open-wc recommendations",
5
5
  "keywords": [
6
6
  "lit",
@@ -107,7 +107,7 @@
107
107
  {
108
108
  "files": "*.{scss,css}",
109
109
  "options": {
110
- "printWidth": 220,
110
+ "printWidth": 280,
111
111
  "singleQuote": false
112
112
  }
113
113
  }
@@ -117,15 +117,23 @@
117
117
  "parserOptions": {
118
118
  "ecmaVersion": "latest"
119
119
  },
120
- "plugins": [
121
- "log-filenames"
122
- ],
123
120
  "extends": [
124
121
  "@open-wc",
125
122
  "prettier"
126
123
  ],
127
124
  "rules": {
128
125
  "class-methods-use-this": "off",
126
+ "indent": [
127
+ "error",
128
+ 2,
129
+ {
130
+ "SwitchCase": 1,
131
+ "ignoredNodes": [
132
+ "PropertyDefinition",
133
+ "TemplateLiteral > *"
134
+ ]
135
+ }
136
+ ],
129
137
  "no-unused-expressions": [
130
138
  "error",
131
139
  {
@@ -146,13 +154,15 @@
146
154
  {
147
155
  "devDependencies": [
148
156
  "**/test/**/*.{js,ts}",
149
- "**/*.config.{js,mjs,cjs}",
150
- "**/*.conf.{js,mjs,cjs}"
157
+ "**/*.config.{js,ts,mjs,cjs}",
158
+ "**/*.conf.{js,ts,mjs,cjs}"
151
159
  ]
152
160
  }
153
161
  ],
154
162
  "import/no-unresolved": "off",
155
- "import/prefer-default-export": "off"
163
+ "import/prefer-default-export": "off",
164
+ "lit/no-classfield-shadowing": "off",
165
+ "lit/no-native-attributes": "off"
156
166
  }
157
167
  },
158
168
  "stylelint": {
@@ -167,16 +177,16 @@
167
177
  },
168
178
  "dependencies": {
169
179
  "@blockquote/polymer": "^3.4.1",
170
- "lit": "^2.0.2"
180
+ "lit": "^3.1.0"
171
181
  },
172
182
  "devDependencies": {
173
- "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.4.4",
174
- "@blockquote-web-components/blockquote-foundations-sass": "^1.0.0",
183
+ "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.6.0",
184
+ "@blockquote-web-components/blockquote-foundations-sass": "^1.1.1",
175
185
  "@polymer/iron-test-helpers": "^3.0.1"
176
186
  },
177
187
  "publishConfig": {
178
188
  "access": "public"
179
189
  },
180
190
  "customElements": "custom-elements.json",
181
- "gitHead": "f395648f8748ca2496345c5182b1b4dd8a60c662"
191
+ "gitHead": "c65690b8e735c0607858f3a14a381088721dc807"
182
192
  }
package/src/BlockquoteBaseEmbeddedWebview.js CHANGED
@@ -34,59 +34,56 @@ const openExternallyIcon = html`
34
34
  `;
35
35
 
36
36
  /**
37
- ![Lit](https://img.shields.io/badge/lit-2.0.0-blue)
38
-
39
- `blockquote-base-embedded-webview` offers a responsive display using individual HTML files as content with the different use cases to be displayed.
40
- It will create a `select` tag with the provided demo HTML files and add the `[data-embedded]` attribute to the loaded body tag.
41
-
42
- ## Base usage
43
-
44
- ```html
45
- <blockquote-base-embedded-webview heading="My demo title">
46
- <template data-src="./base.html" data-option="Base" data-description="base - description"></template>
47
- <template data-src="./complex.html" data-option="Complex" data-description="complex - description"></template>
48
- </blockquote-base-embedded-webview>
49
- ```
50
-
51
- ## base.html
52
-
53
- ```html
54
- <!DOCTYPE html>
55
- <html lang="en">
56
- <head>
57
- <title>Demo Base</title>
58
- <meta name="viewport" content="width=device-width, initial-scale=1" />
59
- <meta charset="utf-8" />
60
- <style>
61
- :root {
62
- font: normal medium/1.25 sans-serif;
63
- }
64
- body {
65
- margin: 0;
66
- }
67
- [data-embedded] .hidden {
68
- display: none;
69
- }
70
- </style>
71
- </head>
72
- <body>
73
- <h1 class="hidden">Heading</h1>
74
- <p>Base Demo</p>
75
- </body>
76
- </html>
77
- ```
37
+ * ![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)
38
+ *
39
+ * `blockquote-base-embedded-webview` offers a responsive display using individual HTML files as content with different use cases to be displayed.
40
+ * It will create a `select` tag with the provided demo HTML files and add the `[data-embedded]` attribute to the loaded body tag.
41
+ *
42
+ * ## Base usage
43
+ *
44
+ * ```html
45
+ * <blockquote-base-embedded-webview heading="My demo title">
46
+ * <template data-src="./base.html" data-option="Base" data-description="base - description"></template>
47
+ * <template data-src="./complex.html" data-option="Complex" data-description="complex - description"></template>
48
+ * </blockquote-base-embedded-webview>
49
+ * ```
50
+ *
51
+ * ## base.html
52
+ *
53
+ * ```html
54
+ * <!DOCTYPE html>
55
+ * <html lang="en">
56
+ * <head>
57
+ * <title>Demo Base</title>
58
+ * <meta name="viewport" content="width=device-width, initial-scale=1" />
59
+ * <meta charset="utf-8" />
60
+ * <style>
61
+ * :root {
62
+ * font: normal medium/1.25 sans-serif;
63
+ * }
64
+ * body {
65
+ * margin: 0;
66
+ * }
67
+ * [data-embedded] .hidden {
68
+ * display: none;
69
+ * }
70
+ * </style>
71
+ * </head>
72
+ * <body>
73
+ * <h1 class="hidden">Heading</h1>
74
+ * <p>Base Demo</p>
75
+ * </body>
76
+ * </html>
77
+ * ```
78
+ *
79
+ * @attribute heading
80
+ * @attribute selected
81
+ * @attribute heading-level
82
+ * @attribute screen-size-selected
83
+ * @attribute limit-height
84
+ */
78
85
 
79
- ## Exports
80
-
81
- - BlockquoteBaseEmbeddedWebview
82
-
83
- @tagname blockquote-base-embedded-webview
84
- */
85
86
  export class BlockquoteBaseEmbeddedWebview extends LitElement {
86
- static get is() {
87
- return 'blockquote-base-embedded-webview';
88
- }
89
-
90
87
  static get styles() {
91
88
  return [styles];
92
89
  }
@@ -95,7 +92,6 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
95
92
  return {
96
93
  /**
97
94
  * The heading of the webview.
98
- * @type {String}
99
95
  */
100
96
  heading: {
101
97
  type: String,
@@ -103,7 +99,6 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
103
99
 
104
100
  /**
105
101
  * Index of currently srcset file
106
- * @type {Number}
107
102
  */
108
103
  selected: {
109
104
  type: Number,
@@ -111,7 +106,6 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
111
106
 
112
107
  /**
113
108
  * Heading level from 1 to 6
114
- * @type {Number}
115
109
  */
116
110
  headingLevel: {
117
111
  type: Number,
@@ -121,7 +115,6 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
121
115
 
122
116
  /**
123
117
  * Index of currently screen size selected
124
- * @type {Number}
125
118
  */
126
119
  screenSizeSelected: {
127
120
  type: Number,
@@ -130,7 +123,6 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
130
123
 
131
124
  /**
132
125
  * Limit height to 100% available
133
- * @type {Boolean}
134
126
  */
135
127
  limitHeight: {
136
128
  type: Boolean,
@@ -148,9 +140,9 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
148
140
  this.heading = '';
149
141
  this.__resetResizing = false;
150
142
  this.__selectArrow = chevronDownIcon;
151
- this.__readDataPos = { x: 0, y: 0, resizing: false, cursor: '' };
143
+ this.__readDataPos = { x: '0', y: '0', resizing: false, cursor: '' };
152
144
  this.limitHeight = false;
153
- this._sources = [{ file: '', option: '', description: '' }];
145
+ this._sources = [{ src: '', option: '', description: '' }];
154
146
  this._updateSize = this._updateSize.bind(this);
155
147
  this._embeddedResizeRef = createRef();
156
148
  }
@@ -158,13 +150,16 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
158
150
  connectedCallback() {
159
151
  super.connectedCallback && super.connectedCallback();
160
152
 
161
- this.shadowRoot.addEventListener('webviewresize', ({ detail }) => {
153
+ this.shadowRoot?.addEventListener('webviewresize', ev => {
154
+ const { detail } = /** @type {CustomEvent} */ (ev);
155
+
162
156
  Object.assign(this.__readDataPos, detail);
163
157
  this.__resetResizing = true;
158
+
164
159
  if (detail.cursor === 'n' || detail.cursor === 'ne' || detail.cursor === 'nw') {
165
160
  // http://makeseleniumeasy.com/2018/03/14/part-7-usages-of-javascripts-in-selenium-difference-among-scrollby-scrollto-and-scroll-methods-of-javascript/
166
161
  window.scroll({
167
- top: Math.abs(parseInt(this.__readDataPos.y, 10) + this._controlBottom),
162
+ top: Math.abs(parseInt(this.__readDataPos.y, 10) + (this._controlBottom ?? 0)),
168
163
  left: 0,
169
164
  behavior: 'smooth',
170
165
  });
@@ -176,7 +171,7 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
176
171
  const _sources = Array.from(this.querySelectorAll('template'));
177
172
  if (_sources.length) {
178
173
  this._sources = _sources.map(item => {
179
- const { src, option, description } = item.dataset;
174
+ const { src = '', option = '', description = '' } = item.dataset;
180
175
  return {
181
176
  src,
182
177
  option,
@@ -191,18 +186,20 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
191
186
  firstUpdated(props) {
192
187
  super.firstUpdated && super.firstUpdated(props);
193
188
 
194
- this.embedded = this.shadowRoot.querySelector('[slot="embedded"]');
195
- this._controlBottom = parseFloat(
196
- window.getComputedStyle(this._embeddedResizeRef.value).paddingBottom,
197
- );
189
+ this.embedded = this.shadowRoot?.querySelector('[slot="embedded"]');
190
+ if (this._embeddedResizeRef.value) {
191
+ this._controlBottom = parseFloat(
192
+ window.getComputedStyle(this._embeddedResizeRef.value).paddingBottom,
193
+ );
194
+ }
198
195
  }
199
196
 
200
197
  _updateSize({ detail }) {
201
- this._embeddedResizeRef.value.style.setProperty(
198
+ /** @type {HTMLElement} */ (this._embeddedResizeRef?.value)?.style.setProperty(
202
199
  '--blockquote-base-embedded-webview-resize-rect-width',
203
200
  `${detail.width}px`,
204
201
  );
205
- this._embeddedResizeRef.value.style.setProperty(
202
+ /** @type {HTMLElement} */ (this._embeddedResizeRef?.value)?.style.setProperty(
206
203
  '--blockquote-base-embedded-webview-resize-rect-height',
207
204
  this.limitHeight ? '100%' : `${detail.height}px`,
208
205
  );
@@ -269,7 +266,7 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
269
266
  }
270
267
 
271
268
  get _externalLinkTpl() {
272
- return html`<a href="${this._src}" target="_blank" class="open-externally">
269
+ return html`<a href="${this._src || '#'}" target="_blank" class="open-externally">
273
270
  <span class="sr-only">View demo in a new tab</span
274
271
  ><span aria-hidden="true">${openExternallyIcon}</span></a
275
272
  >`;
@@ -315,7 +312,7 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
315
312
  get _embeddedSlotTpl() {
316
313
  return html` <blockquote-base-embedded-webview-element
317
314
  slot="embedded"
318
- .src="${this._src}"
315
+ .src="${this._src || ''}"
319
316
  .embeddedTitle="${this._sources[this.selected].option || 'Demo'}"
320
317
  >
321
318
  </blockquote-base-embedded-webview-element>`;
package/src/BlockquoteBaseEmbeddedWebviewElement.js CHANGED
@@ -1,21 +1,16 @@
1
1
  import { html, LitElement, render as LitHtmlRender } from 'lit';
2
2
  import { styles } from './styles/blockquote-base-embedded-webview-element-styles.css.js';
3
- /**
4
- ![Lit](https://img.shields.io/badge/lit-2.0.0-blue)
5
-
6
- `blockquote-base-embedded-webview-element` wraps an `iframe` or `object` and shows it through light dom.
7
-
8
- ## Exports
9
-
10
- - BlockquoteBaseEmbeddedWebviewElement
11
3
 
12
- @tagname blockquote-base-embedded-webview-element
13
- */
4
+ /**
5
+ * ![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)
6
+ *
7
+ * `blockquote-base-embedded-webview-element` wraps an `iframe` or `object` and shows it through light dom.
8
+ *
9
+ * @attribute embedded-title
10
+ * @attribute src
11
+ * @attribute type
12
+ */
14
13
  export class BlockquoteBaseEmbeddedWebviewElement extends LitElement {
15
- static get is() {
16
- return 'blockquote-base-embedded-webview-element';
17
- }
18
-
19
14
  static get styles() {
20
15
  return [styles];
21
16
  }
@@ -24,7 +19,6 @@ export class BlockquoteBaseEmbeddedWebviewElement extends LitElement {
24
19
  return {
25
20
  /**
26
21
  * The title attribute on an <element> to label its content
27
- * @type {string}
28
22
  */
29
23
  embeddedTitle: {
30
24
  type: String,
@@ -33,7 +27,6 @@ export class BlockquoteBaseEmbeddedWebviewElement extends LitElement {
33
27
 
34
28
  /**
35
29
  * The URL of the page to embed
36
- * @type {string}
37
30
  */
38
31
  src: {
39
32
  type: String,
@@ -41,7 +34,6 @@ export class BlockquoteBaseEmbeddedWebviewElement extends LitElement {
41
34
 
42
35
  /**
43
36
  * The type of the tag to embed - iframe or object
44
- * @type {string}
45
37
  */
46
38
  type: {
47
39
  type: String,
@@ -103,7 +95,7 @@ export class BlockquoteBaseEmbeddedWebviewElement extends LitElement {
103
95
  _fetch(resource) {
104
96
  if (resource) {
105
97
  Object.assign(
106
- this._embeddedElement,
98
+ this._embeddedElement ?? {},
107
99
  this.type === 'iframe' && {
108
100
  allow: 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture',
109
101
  allowFullscreen: true,
@@ -112,11 +104,14 @@ export class BlockquoteBaseEmbeddedWebviewElement extends LitElement {
112
104
  this.embeddedTitle && { title: this.embeddedTitle },
113
105
  );
114
106
 
115
- this._embeddedElement[this._loadResource] = resource;
107
+ Object.assign(this._embeddedElement ?? {}, {
108
+ [this._loadResource]: resource,
109
+ });
110
+
116
111
  window.performance.mark('iframestart');
117
112
 
118
113
  Object.assign(
119
- this._embeddedElement.style,
114
+ this._embeddedElement?.style ?? {},
120
115
  resource.indexOf('http') !== 0 && {
121
116
  opacity: 0,
122
117
  },
package/src/BlockquoteBaseEmbeddedWebviewResize.js CHANGED
@@ -1,27 +1,20 @@
1
1
  import { html, LitElement } from 'lit';
2
2
  import * as Gestures from '@blockquote/polymer/lib/utils/gestures.js';
3
3
  import { styles } from './styles/blockquote-base-embedded-webview-resize-styles.css.js';
4
+
4
5
  // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#value - window.scrollY to get a bounding rectangle which is independent from the current scrolling position.
5
6
  // https://www.browserstack.com/guide/ideal-screen-sizes-for-responsive-design
6
7
  // https://stackoverflow.com/questions/26233180/resize-a-div-on-border-drag-and-drop-without-adding-extra-markup
7
8
  // https://github.com/ChromeDevTools/devtools-frontend/blob/main/front_end/Images/src/resizeHorizontal.svg
8
9
 
9
10
  /**
10
- ![Lit](https://img.shields.io/badge/lit-2.0.0-blue)
11
-
12
- `blockquote-base-embedded-webview-resize`
13
-
14
- ## Exports
15
-
16
- - BlockquoteBaseEmbeddedWebviewResize
17
-
18
- @tagname blockquote-base-embedded-webview-resize
19
- */
11
+ * ![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)
12
+ *
13
+ * `blockquote-base-embedded-webview-resize`
14
+ *
15
+ * @fires webviewresize - Raised when the element's dimensions changes
16
+ */
20
17
  export class BlockquoteBaseEmbeddedWebviewResize extends LitElement {
21
- static get is() {
22
- return 'blockquote-base-embedded-webview-resize';
23
- }
24
-
25
18
  static get styles() {
26
19
  return [styles];
27
20
  }
@@ -37,25 +30,28 @@ export class BlockquoteBaseEmbeddedWebviewResize extends LitElement {
37
30
  this._createResizerBottomLeft = this._createResizer.bind(this, 'scaleTopRight');
38
31
  this._createResizerBottomRight = this._createResizer.bind(this, 'scaleTopLeft');
39
32
  this._doubleclickForCssInitialSize = this._doubleclickForCssInitialSize.bind(this);
33
+
34
+ this._getBoundingClientRectWidth = 0;
35
+ this._getBoundingClientRectHeight = 0;
40
36
  }
41
37
 
42
38
  firstUpdated(props) {
43
39
  super.firstUpdated && super.firstUpdated(props);
44
40
 
45
- this.rect = this.shadowRoot.querySelector('.rect');
46
- this.bottomRightResizerElement = this.shadowRoot.querySelector('.resizer-se');
47
- this.bottomLeftResizerElement = this.shadowRoot.querySelector('.resizer-sw');
48
- this.rightResizerElement = this.shadowRoot.querySelector('.resizer-e');
49
- this.leftResizerElement = this.shadowRoot.querySelector('.resizer-w');
50
- this.bottomResizerElement = this.shadowRoot.querySelector('.resizer-s');
41
+ this.rect = this.shadowRoot?.querySelector('.rect');
42
+ this.bottomRightResizerElement = this.shadowRoot?.querySelector('.resizer-se');
43
+ this.bottomLeftResizerElement = this.shadowRoot?.querySelector('.resizer-sw');
44
+ this.rightResizerElement = this.shadowRoot?.querySelector('.resizer-e');
45
+ this.leftResizerElement = this.shadowRoot?.querySelector('.resizer-w');
46
+ this.bottomResizerElement = this.shadowRoot?.querySelector('.resizer-s');
51
47
 
52
- this.leftResizerElement.addEventListener('mousedown', this._createResizerLeft);
53
- this.rightResizerElement.addEventListener('mousedown', this._createResizerRight);
54
- this.bottomResizerElement.addEventListener('mousedown', this._createResizerBottom);
55
- this.bottomLeftResizerElement.addEventListener('mousedown', this._createResizerBottomLeft);
56
- this.bottomRightResizerElement.addEventListener('mousedown', this._createResizerBottomRight);
48
+ this.leftResizerElement?.addEventListener('mousedown', this._createResizerLeft);
49
+ this.rightResizerElement?.addEventListener('mousedown', this._createResizerRight);
50
+ this.bottomResizerElement?.addEventListener('mousedown', this._createResizerBottom);
51
+ this.bottomLeftResizerElement?.addEventListener('mousedown', this._createResizerBottomLeft);
52
+ this.bottomRightResizerElement?.addEventListener('mousedown', this._createResizerBottomRight);
57
53
 
58
- this.bottomResizerElement.addEventListener('dblclick', this._doubleclickForCssInitialSize);
54
+ this.bottomResizerElement?.addEventListener('dblclick', this._doubleclickForCssInitialSize);
59
55
  }
60
56
 
61
57
  render() {
@@ -88,13 +84,14 @@ export class BlockquoteBaseEmbeddedWebviewResize extends LitElement {
88
84
  this._getBoundingClientRectHeight = this._getBoundingClientRect('height');
89
85
 
90
86
  this.setAttribute('resizing', '');
91
- Gestures.addListener(document, 'track', this._resizer);
87
+ Gestures.addListener(document, 'track', /** @type {*} */ (this._resizer));
92
88
  document.addEventListener('mouseup', this._removeResizer);
93
89
  }
94
90
 
95
91
  _removeResizer() {
96
92
  this.removeAttribute('resizing');
97
- Gestures.removeListener(document, 'track', this._resizer);
93
+
94
+ Gestures.removeListener(document, 'track', /** @type {*} */ (this._resizer));
98
95
  document.removeEventListener('mouseup', this._removeResizer);
99
96
  this._dispatchResizeEvent();
100
97
  }
@@ -143,11 +140,6 @@ export class BlockquoteBaseEmbeddedWebviewResize extends LitElement {
143
140
  }
144
141
 
145
142
  _dispatchResizeEvent() {
146
- /**
147
- * Raised when the element's dimensions changes.
148
- *
149
- * @event webviewresize
150
- */
151
143
  const event = new CustomEvent('webviewresize', {
152
144
  bubbles: true,
153
145
  detail: {
@@ -165,6 +157,6 @@ export class BlockquoteBaseEmbeddedWebviewResize extends LitElement {
165
157
  }
166
158
 
167
159
  _getBoundingClientRect(DOMRect) {
168
- return Math.abs(parseInt(this.rect.getBoundingClientRect()[DOMRect], 10));
160
+ return Math.abs(parseInt(this.rect?.getBoundingClientRect()[DOMRect], 10));
169
161
  }
170
162
  }
package/src/BlockquoteBaseEmbeddedWebviewSize.js CHANGED
@@ -3,37 +3,33 @@ import { styles } from './styles/blockquote-base-embedded-webview-size-styles.cs
3
3
  // https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/panels/emulation/DeviceModeView.ts;l=164
4
4
 
5
5
  /**
6
- ![Lit](https://img.shields.io/badge/lit-2.0.0-blue)
7
-
8
- `blockquote-base-embedded-webview-size` provides a list of ideal screen sizes for responsive designs.
9
-
10
- ```html
11
- <blockquote-base-embedded-webview-size
12
- screen-sizes="[
13
- { width: 360, height: 640, id: '360x640' },
14
- { width: 360, height: 800, id: '360x800' },
15
- { width: 414, height: 896, id: '414x896' },
16
- { width: 768, height: 1024, id: '768x1024' },
17
- { width: 810, height: 1080, id: '810x1080' },
18
- { width: 1280, height: 800, id: '1280x800' },
19
- { width: 1366, height: 768, id: '1366x768' },
20
- { width: 1536, height: 864, id: '1536x864' },
21
- { width: 1920, height: 1080, id: '1920x1080' },
22
- ]"
23
- ></blockquote-base-embedded-webview-size>
24
- ```
25
-
26
- ## Exports
27
-
28
- - BlockquoteBaseEmbeddedWebviewSize
29
-
30
- @tagname blockquote-base-embedded-webview-size
31
- */
6
+ * ![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)
7
+ *
8
+ * `blockquote-base-embedded-webview-size` provides a list of ideal screen sizes for responsive designs.
9
+ * <br>
10
+ *
11
+ * ```html
12
+ * <blockquote-base-embedded-webview-size
13
+ * screen-sizes="[
14
+ * { width: 360, height: 640, id: '360x640' },
15
+ * { width: 360, height: 800, id: '360x800' },
16
+ * { width: 414, height: 896, id: '414x896' },
17
+ * { width: 768, height: 1024, id: '768x1024' },
18
+ * { width: 810, height: 1080, id: '810x1080' },
19
+ * { width: 1280, height: 800, id: '1280x800' },
20
+ * { width: 1366, height: 768, id: '1366x768' },
21
+ * { width: 1536, height: 864, id: '1536x864' },
22
+ * { width: 1920, height: 1080, id: '1920x1080' },
23
+ * ]"
24
+ * ></blockquote-base-embedded-webview-size>
25
+ * ```
26
+ *
27
+ * @attribute screen-sizes
28
+ * @attribute width-in-percent
29
+ * @attribute show-overflow-size
30
+ * @attribute disabled-selected-size-text
31
+ */
32
32
  export class BlockquoteBaseEmbeddedWebviewSize extends LitElement {
33
- static get is() {
34
- return 'blockquote-base-embedded-webview-size';
35
- }
36
-
37
33
  static get styles() {
38
34
  return [styles];
39
35
  }
@@ -42,7 +38,6 @@ export class BlockquoteBaseEmbeddedWebviewSize extends LitElement {
42
38
  return {
43
39
  /**
44
40
  * The screen size options to display
45
- * @type {Array}
46
41
  */
47
42
  screenSizes: {
48
43
  type: Array,
@@ -50,7 +45,6 @@ export class BlockquoteBaseEmbeddedWebviewSize extends LitElement {
50
45
  },
51
46
  /**
52
47
  * The screen size option selected
53
- * @type {Number}
54
48
  */
55
49
  selected: {
56
50
  type: Number,
@@ -58,7 +52,6 @@ export class BlockquoteBaseEmbeddedWebviewSize extends LitElement {
58
52
 
59
53
  /**
60
54
  * Percentage value for the width
61
- * @type {Boolean}
62
55
  */
63
56
  widthInPercent: {
64
57
  type: Boolean,
@@ -67,7 +60,6 @@ export class BlockquoteBaseEmbeddedWebviewSize extends LitElement {
67
60
 
68
61
  /**
69
62
  * Show screen size options that are too large for the container
70
- * @type {Boolean}
71
63
  */
72
64
  showOverflowSize: {
73
65
  type: Boolean,
@@ -76,7 +68,6 @@ export class BlockquoteBaseEmbeddedWebviewSize extends LitElement {
76
68
 
77
69
  /**
78
70
  * If true, selected size text is disabled
79
- * @type {Boolean}
80
71
  */
81
72
  disabledSelectedSizeText: {
82
73
  type: Boolean,