@blockquote-web-components/blockquote-base-embedded-webview 1.10.2 → 1.11.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 (6) hide show
  1. package/README.md +69 -69
  2. package/package.json +2 -2
  3. package/src/BlockquoteBaseEmbeddedWebview.js +5 -9
  4. package/src/BlockquoteBaseEmbeddedWebviewElement.js +2 -3
  5. package/src/BlockquoteBaseEmbeddedWebviewResize.js +5 -5
  6. package/src/BlockquoteBaseEmbeddedWebviewSize.js +4 -6
package/README.md CHANGED
@@ -51,36 +51,36 @@ It will create a `select` tag with the provided demo HTML files and add the `[da
51
51
 
52
52
  ##### Fields
53
53
 
54
- | Name | Privacy | Type | Default | Description | Inherited From |
55
- | --------------------- | ------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | -------------- |
56
- | `_headingLevel` | | | | | |
57
- | `_lightDomTpl` | | | | | |
58
- | `_headerTpl` | | | | | |
59
- | `_headingTpl` | | | | | |
60
- | `_navigationDemosTpl` | | | | | |
61
- | `_selectTpl` | | | | | |
62
- | `_externalLinkTpl` | | | | | |
63
- | `_descriptionTpl` | | | | | |
64
- | `_readDataPosTpl` | | | | | |
65
- | `_screenSizeTpl` | | | | | |
66
- | `_mainTpl` | | | | | |
67
- | `_embeddedSlotTpl` | | | | | |
68
- | `selected` | public | `number` | `0` | Index of currently srcset file | |
69
- | `screenSizeSelected` | public | `number` | `0` | Index of currently screen size selected | |
70
- | `headingLevel` | public | `number` | `1` | Heading level from 1 to 6 | |
71
- | `heading` | public | `string` | `''` | The heading of the webview. | |
72
- | `__resetResizing` | | `boolean` | `false` | | |
73
- | `__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>` `` | | |
74
- | `__readDataPos` | | `object` | `{ x: '0', y: '0', resizing: false, cursor: '' }` | | |
75
- | `limitHeight` | public | `boolean` | `false` | Limit height to 100% available | |
76
- | `_sources` | | `array` | `[{ src: '', option: '', description: '' }]` | | |
77
- | `_embeddedResizeRef` | | | | | |
54
+ | Name | Privacy | Type | Default | Description | Inherited From |
55
+ | --------------------- | ------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | -------------- |
56
+ | `_updateSize` | | | | | |
57
+ | `_headingLevel` | | | | | |
58
+ | `_lightDomTpl` | | | | | |
59
+ | `_headerTpl` | | | | | |
60
+ | `_headingTpl` | | | | | |
61
+ | `_navigationDemosTpl` | | | | | |
62
+ | `_selectTpl` | | | | | |
63
+ | `_externalLinkTpl` | | | | | |
64
+ | `_descriptionTpl` | | | | | |
65
+ | `_readDataPosTpl` | | | | | |
66
+ | `_screenSizeTpl` | | | | | |
67
+ | `_mainTpl` | | | | | |
68
+ | `_embeddedSlotTpl` | | | | | |
69
+ | `selected` | public | `number` | `0` | Index of currently srcset file | |
70
+ | `screenSizeSelected` | public | `number` | `0` | Index of currently screen size selected | |
71
+ | `headingLevel` | public | `number` | `1` | Heading level from 1 to 6 | |
72
+ | `heading` | public | `string` | `''` | The heading of the webview. | |
73
+ | `__resetResizing` | | `boolean` | `false` | | |
74
+ | `__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> ` `` | | |
75
+ | `__readDataPos` | | `object` | `{ x: '0', y: '0', resizing: false, cursor: '' }` | | |
76
+ | `limitHeight` | public | `boolean` | `false` | Limit height to 100% available | |
77
+ | `_sources` | | `array` | `[{ src: '', option: '', description: '' }]` | | |
78
+ | `_embeddedResizeRef` | | | | | |
78
79
 
79
80
  ##### Methods
80
81
 
81
82
  | Name | Privacy | Description | Parameters | Return | Inherited From |
82
83
  | ---------------- | ------- | ----------- | ------------ | ------ | -------------- |
83
- | `_updateSize` | | | `{ detail }` | | |
84
84
  | `_litHtmlRender` | | | | | |
85
85
  | `_onChangeFile` | | | `{ target }` | | |
86
86
 
@@ -113,22 +113,22 @@ It will create a `select` tag with the provided demo HTML files and add the `[da
113
113
 
114
114
  ##### Fields
115
115
 
116
- | Name | Privacy | Type | Default | Description | Inherited From |
117
- | --------------- | ------- | -------- | ---------- | --------------------------------------------------------- | -------------- |
118
- | `_lightDomTpl` | | | | | |
119
- | `_loadResource` | | | | | |
120
- | `_embeddedTpl` | | | | | |
121
- | `embeddedTitle` | public | `string` | `''` | The title attribute on an \<element> to label its content | |
122
- | `src` | public | `string` | `''` | The URL of the page to embed | |
123
- | `type` | public | `string` | `'iframe'` | The type of the tag to embed - iframe or object | |
116
+ | Name | Privacy | Type | Default | Description | Inherited From |
117
+ | ---------------- | ------- | -------- | ---------- | --------------------------------------------------------- | -------------- |
118
+ | `_lightDomTpl` | | | | | |
119
+ | `_loadResource` | | | | | |
120
+ | `_embeddedTpl` | | | | | |
121
+ | `_onLoadElement` | | | | | |
122
+ | `embeddedTitle` | public | `string` | `''` | The title attribute on an \<element> to label its content | |
123
+ | `src` | public | `string` | `''` | The URL of the page to embed | |
124
+ | `type` | public | `string` | `'iframe'` | The type of the tag to embed - iframe or object | |
124
125
 
125
126
  ##### Methods
126
127
 
127
- | Name | Privacy | Description | Parameters | Return | Inherited From |
128
- | ---------------- | ------- | ----------- | ------------ | ------ | -------------- |
129
- | `_litHtmlRender` | | | | | |
130
- | `_fetch` | | | `resource` | | |
131
- | `_onLoadElement` | | | `{ target }` | | |
128
+ | Name | Privacy | Description | Parameters | Return | Inherited From |
129
+ | ---------------- | ------- | ----------- | ---------- | ------ | -------------- |
130
+ | `_litHtmlRender` | | | | | |
131
+ | `_fetch` | | | `resource` | | |
132
132
 
133
133
  ##### Attributes
134
134
 
@@ -157,27 +157,27 @@ It will create a `select` tag with the provided demo HTML files and add the `[da
157
157
 
158
158
  ##### Fields
159
159
 
160
- | Name | Privacy | Type | Default | Description | Inherited From |
161
- | ------------------------------ | ------- | -------- | ------- | ----------- | -------------- |
162
- | `_resizersTpl` | | | | | |
163
- | `_cursor` | | `string` | `''` | | |
164
- | `_createResizerLeft` | | | | | |
165
- | `_createResizerRight` | | | | | |
166
- | `_createResizerBottom` | | | | | |
167
- | `_createResizerBottomLeft` | | | | | |
168
- | `_createResizerBottomRight` | | | | | |
169
- | `_getBoundingClientRectWidth` | | `number` | `0` | | |
170
- | `_getBoundingClientRectHeight` | | `number` | `0` | | |
160
+ | Name | Privacy | Type | Default | Description | Inherited From |
161
+ | ------------------------------- | ------- | -------- | ------- | ----------- | -------------- |
162
+ | `_resizersTpl` | | | | | |
163
+ | `_doubleclickForCssInitialSize` | | | | | |
164
+ | `_cursor` | | `string` | `''` | | |
165
+ | `_createResizerLeft` | | | | | |
166
+ | `_createResizerRight` | | | | | |
167
+ | `_createResizerBottom` | | | | | |
168
+ | `_createResizerBottomLeft` | | | | | |
169
+ | `_createResizerBottomRight` | | | | | |
170
+ | `_getBoundingClientRectWidth` | | `number` | `0` | | |
171
+ | `_getBoundingClientRectHeight` | | `number` | `0` | | |
171
172
 
172
173
  ##### Methods
173
174
 
174
- | Name | Privacy | Description | Parameters | Return | Inherited From |
175
- | ------------------------------- | ------- | ----------- | ------------------------------------ | ------ | -------------- |
176
- | `_doubleclickForCssInitialSize` | | | | | |
177
- | `_createResizer` | | | `DOMRect: !string, ev: PointerEvent` | | |
178
- | `_resize` | | | `{ detail }` | | |
179
- | `_dispatchResizeEvent` | | | | | |
180
- | `_getBoundingClientRect` | | | `DOMRect: !string` | | |
175
+ | Name | Privacy | Description | Parameters | Return | Inherited From |
176
+ | ------------------------ | ------- | ----------- | ------------------------------------ | ------ | -------------- |
177
+ | `_createResizer` | | | `DOMRect: !string, ev: PointerEvent` | | |
178
+ | `_resize` | | | `{ detail }` | | |
179
+ | `_dispatchResizeEvent` | | | | | |
180
+ | `_getBoundingClientRect` | | | `DOMRect: !string` | | |
181
181
 
182
182
  ##### Events
183
183
 
@@ -221,24 +221,24 @@ It will create a `select` tag with the provided demo HTML files and add the `[da
221
221
 
222
222
  ##### Fields
223
223
 
224
- | Name | Privacy | Type | Default | Description | Inherited From |
225
- | -------------------------- | ------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | -------------- |
226
- | `selectedSize` | | | | | |
227
- | `selectedDetail` | | | | | |
228
- | `computedStyleWidth` | | | | | |
229
- | `_toolbarTpl` | | | | | |
230
- | `_visualTextTpl` | | | | | |
231
- | `showOverflowSize` | public | `boolean` | `false` | Show screen size options that are too large for the container | |
232
- | `selected` | public | `number` | `0` | The screen size option selected | |
233
- | `disabledSelectedSizeText` | public | `boolean` | `false` | If true, selected size text is disabled | |
234
- | `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 | |
235
- | `widthInPercent` | public | `boolean` | `false` | Percentage value for the width | |
224
+ | Name | Privacy | Type | Default | Description | Inherited From |
225
+ | -------------------------- | ------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | -------------- |
226
+ | `selectedSize` | | | | | |
227
+ | `selectedDetail` | | | | | |
228
+ | `computedStyleWidth` | | | | | |
229
+ | `_toolbarTpl` | | | | | |
230
+ | `_visualTextTpl` | | | | | |
231
+ | `_onResize` | | | | | |
232
+ | `showOverflowSize` | public | `boolean` | `false` | Show screen size options that are too large for the container | |
233
+ | `selected` | public | `number` | `0` | The screen size option selected | |
234
+ | `disabledSelectedSizeText` | public | `boolean` | `false` | If true, selected size text is disabled | |
235
+ | `screenSizes` | public | `array` | `[ { width: 360, height: 800, id: '360x800' }, { width: 390, height: 864, id: '390x864' }, { width: 414, height: 896, id: '414x896' }, { width: 768, height: 1024, id: '768x1024' }, { width: 810, height: 1080, id: '810x1080' }, { width: 1280, height: 720, 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 | |
236
+ | `widthInPercent` | public | `boolean` | `false` | Percentage value for the width | |
236
237
 
237
238
  ##### Methods
238
239
 
239
240
  | Name | Privacy | Description | Parameters | Return | Inherited From |
240
241
  | -------------- | ------- | ----------- | ---------- | ------ | -------------- |
241
- | `_onResize` | | | `ev` | | |
242
242
  | `_setSelected` | | | `ev` | | |
243
243
 
244
244
  ##### Attributes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blockquote-web-components/blockquote-base-embedded-webview",
3
- "version": "1.10.2",
3
+ "version": "1.11.0",
4
4
  "description": "Webcomponent blockquote-base-embedded-webview following open-wc recommendations",
5
5
  "keywords": [
6
6
  "lit",
@@ -134,5 +134,5 @@
134
134
  "access": "public"
135
135
  },
136
136
  "customElements": "custom-elements.json",
137
- "gitHead": "7edc86cd16ada68f0d940336b43bfc9ba9389b0a"
137
+ "gitHead": "015e61740035c23471a5164f460ce03b05adab32"
138
138
  }
package/src/BlockquoteBaseEmbeddedWebview.js CHANGED
@@ -146,12 +146,12 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
146
146
  this.__readDataPos = { x: '0', y: '0', resizing: false, cursor: '' };
147
147
  this.limitHeight = false;
148
148
  this._sources = [{ src: '', option: '', description: '' }];
149
- this._updateSize = this._updateSize.bind(this);
150
149
  this._embeddedResizeRef = createRef();
151
150
  }
152
151
 
153
- connectedCallback() {
154
- super.connectedCallback && super.connectedCallback();
152
+ async connectedCallback() {
153
+ super.connectedCallback?.();
154
+ await this.updateComplete;
155
155
 
156
156
  this.shadowRoot?.addEventListener('webviewresize', ev => {
157
157
  const { detail } = /** @type {CustomEvent} */ (ev);
@@ -184,10 +184,6 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
184
184
 
185
185
  this._src = this._sources[this.selected].src;
186
186
  }
187
- }
188
-
189
- firstUpdated(props) {
190
- super.firstUpdated && super.firstUpdated(props);
191
187
 
192
188
  this.embedded = this.shadowRoot?.querySelector('[slot="embedded"]');
193
189
  if (this._embeddedResizeRef.value) {
@@ -197,7 +193,7 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
197
193
  }
198
194
  }
199
195
 
200
- _updateSize({ detail }) {
196
+ _updateSize = ({ detail }) => {
201
197
  /** @type {HTMLElement} */ (this._embeddedResizeRef?.value)?.style.setProperty(
202
198
  '--blockquote-base-embedded-webview-resize-rect-width',
203
199
  `${detail.width}px`,
@@ -209,7 +205,7 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
209
205
 
210
206
  this.__resetResizing = false;
211
207
  this.requestUpdate();
212
- }
208
+ };
213
209
 
214
210
  get _headingLevel() {
215
211
  return this.headingLevel >= 1 && this.headingLevel <= 6 ? this.headingLevel : 2;
package/src/BlockquoteBaseEmbeddedWebviewElement.js CHANGED
@@ -46,7 +46,6 @@ export class BlockquoteBaseEmbeddedWebviewElement extends LitElement {
46
46
  this.embeddedTitle = '';
47
47
  this.src = '';
48
48
  this.type = 'iframe';
49
- this._onLoadElement = this._onLoadElement.bind(this);
50
49
  }
51
50
 
52
51
  connectedCallback() {
@@ -123,7 +122,7 @@ export class BlockquoteBaseEmbeddedWebviewElement extends LitElement {
123
122
  }
124
123
  }
125
124
 
126
- _onLoadElement({ target }) {
125
+ _onLoadElement = ({ target }) => {
127
126
  if (!target.contentDocument || !target.contentDocument.head.childNodes.length) {
128
127
  return;
129
128
  }
@@ -145,5 +144,5 @@ export class BlockquoteBaseEmbeddedWebviewElement extends LitElement {
145
144
  detail: target,
146
145
  });
147
146
  this.dispatchEvent(event);
148
- }
147
+ };
149
148
  }
package/src/BlockquoteBaseEmbeddedWebviewResize.js CHANGED
@@ -27,14 +27,14 @@ export class BlockquoteBaseEmbeddedWebviewResize extends LitElement {
27
27
  this._createResizerBottom = this._createResizer.bind(this, 'top');
28
28
  this._createResizerBottomLeft = this._createResizer.bind(this, 'scaleTopRight');
29
29
  this._createResizerBottomRight = this._createResizer.bind(this, 'scaleTopLeft');
30
- this._doubleclickForCssInitialSize = this._doubleclickForCssInitialSize.bind(this);
31
30
 
32
31
  this._getBoundingClientRectWidth = 0;
33
32
  this._getBoundingClientRectHeight = 0;
34
33
  }
35
34
 
36
- firstUpdated(props) {
37
- super.firstUpdated && super.firstUpdated(props);
35
+ async connectedCallback() {
36
+ super.connectedCallback?.();
37
+ await this.updateComplete;
38
38
 
39
39
  this.rect = this.shadowRoot?.querySelector('.rect');
40
40
  this.bottomRightResizerElement = this.shadowRoot?.querySelector('.resizer-se');
@@ -72,9 +72,9 @@ export class BlockquoteBaseEmbeddedWebviewResize extends LitElement {
72
72
  `;
73
73
  }
74
74
 
75
- _doubleclickForCssInitialSize() {
75
+ _doubleclickForCssInitialSize = () => {
76
76
  this.removeAttribute('style');
77
- }
77
+ };
78
78
 
79
79
  /**
80
80
  * @param {!string} DOMRect
package/src/BlockquoteBaseEmbeddedWebviewSize.js CHANGED
@@ -82,19 +82,17 @@ export class BlockquoteBaseEmbeddedWebviewSize extends LitElement {
82
82
  this.selected = 0;
83
83
  this.disabledSelectedSizeText = false;
84
84
  this.screenSizes = [
85
- { width: 360, height: 640, id: '360x640' },
86
85
  { width: 360, height: 800, id: '360x800' },
86
+ { width: 390, height: 864, id: '390x864' },
87
87
  { width: 414, height: 896, id: '414x896' },
88
88
  { width: 768, height: 1024, id: '768x1024' },
89
89
  { width: 810, height: 1080, id: '810x1080' },
90
- { width: 1280, height: 800, id: '1280x800' },
90
+ { width: 1280, height: 720, id: '1280x800' },
91
91
  { width: 1366, height: 768, id: '1366x768' },
92
92
  { width: 1536, height: 864, id: '1536x864' },
93
93
  { width: 1920, height: 1080, id: '1920x1080' },
94
94
  ];
95
95
  this.widthInPercent = false;
96
-
97
- this._onResize = this._onResize.bind(this);
98
96
  }
99
97
 
100
98
  get selectedSize() {
@@ -188,13 +186,13 @@ export class BlockquoteBaseEmbeddedWebviewSize extends LitElement {
188
186
  `;
189
187
  }
190
188
 
191
- _onResize(ev) {
189
+ _onResize = ev => {
192
190
  ev.preventDefault();
193
191
  ev.stopPropagation();
194
192
  window.requestAnimationFrame(() => {
195
193
  this.requestUpdate();
196
194
  });
197
- }
195
+ };
198
196
 
199
197
  _setSelected(ev) {
200
198
  ev.preventDefault();