Deploying to gh-pages from @ 362fea9 🚀

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [0.30.2](https://github.com/uploadcare/blocks/compare/v0.30.1...v0.30.2) (2023-12-01)
+
+### Bug Fixes
+
+- **start-from:** styles ([#566](https://github.com/uploadcare/blocks/issues/566)) ([7367b1d](https://github.com/uploadcare/blocks/commit/7367b1d914b044cbce2c4fdb6a15e03cf68a9e61))
+- **upload-ctx-provider:** run parent init callback before accessing event emitter ([#565](https://github.com/uploadcare/blocks/issues/565)) ([a313c5c](https://github.com/uploadcare/blocks/commit/a313c5c3b61f4749c6919a6d078e18e7eaa73419))
+
 ## [0.30.1](https://github.com/uploadcare/blocks/compare/v0.30.0...v0.30.1) (2023-11-30)
 
 ### Bug Fixes

env.js

@@ -1,3 +1,3 @@
 /** Do not edit this file manually. It's generated during build process. */
 export const PACKAGE_NAME = 'blocks';
-export const PACKAGE_VERSION = '0.30.1';
+export const PACKAGE_VERSION = '0.30.2';

get-started/configuration/index.html

@@ -86,7 +86,7 @@ <h2 id="customization">Customization</h2>
 </ul>
 <p>You can redefine styling or any other setting using custom CSS file. It&#39;s easy to discover proper elements and their selectors using developer tools in your browser.</p>
 <p>Custom CSS-file example:</p>
-<pre><code class="language-css"><span class="hljs-keyword">@import</span> url(<span class="hljs-string">&#x27;https://unpkg.com/@uploadcare/[email protected].1/web/file-uploader-regular.min.css&#x27;</span>);
+<pre><code class="language-css"><span class="hljs-keyword">@import</span> url(<span class="hljs-string">&#x27;https://unpkg.com/@uploadcare/[email protected].2/web/file-uploader-regular.min.css&#x27;</span>);
 
 lr-modal {
   <span class="hljs-attribute">border</span>: <span class="hljs-number">2px</span> solid <span class="hljs-number">#f00</span>;

get-started/installation/index.html

@@ -82,12 +82,12 @@ <h2 id="script-tag-approach">Script tag approach</h2>
 </ul>
 </blockquote>
 <p>Connect script to your document:</p>
-<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://unpkg.com/@uploadcare/[email protected].1/web/blocks-browser.min.js&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
+<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://unpkg.com/@uploadcare/[email protected].2/web/blocks-browser.min.js&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
 </code></pre>
 <p>Then you can use blocks in your application markup.</p>
 <p>File uploader example:</p>
 <pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">lr-file-uploader-regular</span>
-  <span class="hljs-attr">css-src</span>=<span class="hljs-string">&quot;https://unpkg.com/@uploadcare/[email protected].1/web/file-uploader-regular.min.css&quot;</span>
+  <span class="hljs-attr">css-src</span>=<span class="hljs-string">&quot;https://unpkg.com/@uploadcare/[email protected].2/web/file-uploader-regular.min.css&quot;</span>
 &gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">lr-file-uploader-regular</span>&gt;</span>
 </code></pre>
@@ -98,20 +98,20 @@ <h2 id="dynamic-script-connection-types-support">Dynamic script connection (type
 <p>Then use <code>connectBlocksFrom</code> function to connect blocks:</p>
 <pre><code class="language-js"><span class="hljs-keyword">import</span> { connectBlocksFrom } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@uploadcare/blocks/abstract/connectBlocksFrom.js&#x27;</span>;
 
-<span class="hljs-title function_">connectBlocksFrom</span>(<span class="hljs-string">&#x27;https://unpkg.com/@uploadcare/[email protected].1/web/blocks-browser.min.js&#x27;</span>);
+<span class="hljs-title function_">connectBlocksFrom</span>(<span class="hljs-string">&#x27;https://unpkg.com/@uploadcare/[email protected].2/web/blocks-browser.min.js&#x27;</span>);
 </code></pre>
 <p>That&#39;s it! Now you can use components for placing into html, like this:</p>
 <pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">lr-file-uploader-inline</span>
-  <span class="hljs-attr">css-src</span>=<span class="hljs-string">&quot;https://unpkg.com/@uploadcare/[email protected].1/web/file-uploader-inline.min.css&quot;</span>
+  <span class="hljs-attr">css-src</span>=<span class="hljs-string">&quot;https://unpkg.com/@uploadcare/[email protected].2/web/file-uploader-inline.min.css&quot;</span>
   <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;my-config-class&quot;</span>
 &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">lr-file-uploader-inline</span>&gt;</span>
 </code></pre>
 <p>You may need to implement some logic, which depends on connected blocks or get access directly to the imported components. Since <code>connectBlocksFrom</code> returns <code>Promise</code>, place all you need using <code>.then()</code></p>
 <pre><code class="language-js"><span class="hljs-keyword">import</span> { connectBlocksFrom } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@uploadcare/blocks/abstract/connectBlocksFrom.js&#x27;</span>;
 
-<span class="hljs-keyword">const</span> <span class="hljs-variable constant_">STYLES</span> = <span class="hljs-string">&#x27;https://unpkg.com/@uploadcare/[email protected].1/web/file-uploader-regular.min.css&#x27;</span>;
+<span class="hljs-keyword">const</span> <span class="hljs-variable constant_">STYLES</span> = <span class="hljs-string">&#x27;https://unpkg.com/@uploadcare/[email protected].2/web/file-uploader-regular.min.css&#x27;</span>;
 
-<span class="hljs-title function_">connectBlocksFrom</span>(<span class="hljs-string">&#x27;https://unpkg.com/@uploadcare/[email protected].1/web/blocks-browser.min.js&#x27;</span>).<span class="hljs-title function_">then</span>(
+<span class="hljs-title function_">connectBlocksFrom</span>(<span class="hljs-string">&#x27;https://unpkg.com/@uploadcare/[email protected].2/web/blocks-browser.min.js&#x27;</span>).<span class="hljs-title function_">then</span>(
   <span class="hljs-function">(<span class="hljs-params">blocks</span>) =&gt;</span> {
     <span class="hljs-keyword">if</span> (!blocks) {
       <span class="hljs-keyword">return</span>; <span class="hljs-comment">// To avoid errors in SSR case</span>

index.html

@@ -108,19 +108,19 @@ <h3 id="typescript-support">Typescript support</h3>
 <h2 id="🚀-getting-started">🚀 Getting started</h2>
 <h3 id="from-cdn">From CDN</h3>
 <ol>
-<li>Connect Uploadcare Blocks directly from your document replacing <code>0.30.1</code> with the <a target='_blank'  href="https://github.com/uploadcare/blocks/releases">latest version</a> of the package:</li>
+<li>Connect Uploadcare Blocks directly from your document replacing <code>0.30.2</code> with the <a target='_blank'  href="https://github.com/uploadcare/blocks/releases">latest version</a> of the package:</li>
 </ol>
 <pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span>&gt;</span><span class="language-javascript">
-  <span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> <span class="hljs-variable constant_">LR</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;https://cdn.jsdelivr.net/npm/@uploadcare/[email protected].1/web/blocks.min.js&#x27;</span>;
+  <span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> <span class="hljs-variable constant_">LR</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;https://cdn.jsdelivr.net/npm/@uploadcare/[email protected].2/web/blocks.min.js&#x27;</span>;
 
   <span class="hljs-variable constant_">LR</span>.<span class="hljs-title function_">registerBlocks</span>(<span class="hljs-variable constant_">LR</span>);
 </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
 </code></pre>
 <ol start="2">
-<li>Start using Uploadcare Blocks in your application markup (don&#39;t forget to specify <code>0.30.1</code> with the <a target='_blank'  href="https://github.com/uploadcare/blocks/releases">latest one</a>):</li>
+<li>Start using Uploadcare Blocks in your application markup (don&#39;t forget to specify <code>0.30.2</code> with the <a target='_blank'  href="https://github.com/uploadcare/blocks/releases">latest one</a>):</li>
 </ol>
 <pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">lr-file-uploader-regular</span>
-  <span class="hljs-attr">css-src</span>=<span class="hljs-string">&quot;https://cdn.jsdelivr.net/npm/@uploadcare/[email protected].1/web/lr-file-uploader-regular.min.css&quot;</span>
+  <span class="hljs-attr">css-src</span>=<span class="hljs-string">&quot;https://cdn.jsdelivr.net/npm/@uploadcare/[email protected].2/web/lr-file-uploader-regular.min.css&quot;</span>
   <span class="hljs-attr">ctx-name</span>=<span class="hljs-string">&quot;my-uploader&quot;</span>
 &gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">lr-file-uploader-regular</span>&gt;</span>
@@ -138,10 +138,10 @@ <h3 id="from-npm">From NPM</h3>
 <span class="hljs-variable constant_">LR</span>.<span class="hljs-title function_">registerBlocks</span>(<span class="hljs-variable constant_">LR</span>);
 </code></pre>
 <ol start="3">
-<li>Start using Uploadcare Blocks in your application markup and replace <code>0.30.1</code> with the <a target='_blank'  href="https://github.com/uploadcare/blocks/releases">latest version</a> of the package:</li>
+<li>Start using Uploadcare Blocks in your application markup and replace <code>0.30.2</code> with the <a target='_blank'  href="https://github.com/uploadcare/blocks/releases">latest version</a> of the package:</li>
 </ol>
 <pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">lr-file-uploader-inline</span>
-  <span class="hljs-attr">css-src</span>=<span class="hljs-string">&quot;https://cdn.jsdelivr.net/npm/@uploadcare/[email protected].1/web/lr-file-uploader-inline.min.css&quot;</span>
+  <span class="hljs-attr">css-src</span>=<span class="hljs-string">&quot;https://cdn.jsdelivr.net/npm/@uploadcare/[email protected].2/web/lr-file-uploader-inline.min.css&quot;</span>
   <span class="hljs-attr">ctx-name</span>=<span class="hljs-string">&quot;my-uploader&quot;</span>
 &gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">lr-file-uploader-inline</span>&gt;</span>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uploadcare/blocks",
-  "version": "0.30.1",
+  "version": "0.30.2",
   "description": "Building blocks for Uploadcare products integration",
   "keywords": [
     "web components",

solutions/adaptive-image/index.html

@@ -72,7 +72,7 @@ <h2 id="💎-solution-benefits">💎 Solution benefits</h2>
 <p><re-htm src="./demo.htm"></re-htm></p>
 <h2 id="quick-start">Quick start</h2>
 <p>Connect script:</p>
-<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://unpkg.com/@uploadcare/[email protected].1/web/lr-img.min.js&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
+<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://unpkg.com/@uploadcare/[email protected].2/web/lr-img.min.js&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
 </code></pre>
 <p>Add basic settings:</p>
 <pre><code class="language-css">lr-<span class="hljs-selector-tag">img</span> {

solutions/file-uploader/index.html

@@ -115,7 +115,7 @@ <h1 id="🛠-configuration"><a name="configuration"></a>🛠 Configuration</h1>
 <h2 id="general">General</h2>
 <p>All configurations, localization texts, icons, and styling are placed into CSS file (if you aren&#39;t familiar with this concept, read about <a href="../../get-started/configuration/">blocks configuration</a>), so you should connect the default one (or create your own):</p>
 <pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css">
-  <span class="hljs-keyword">@import</span> url(<span class="hljs-attribute">https</span>://unpkg.com/@uploadcare/[email protected].1/web/file-uploader-regular<span class="hljs-selector-class">.min</span><span class="hljs-selector-class">.css</span>);
+  <span class="hljs-keyword">@import</span> url(<span class="hljs-attribute">https</span>://unpkg.com/@uploadcare/[email protected].2/web/file-uploader-regular<span class="hljs-selector-class">.min</span><span class="hljs-selector-class">.css</span>);
   <span class="hljs-selector-class">.my-settings</span> {
     <span class="hljs-attr">--ctx-name</span>: <span class="hljs-string">&#x27;my-uploader&#x27;</span>;
     <span class="hljs-attr">--cfg-pubkey</span>: <span class="hljs-string">&#x27;demopublickey&#x27;</span>;
@@ -431,7 +431,7 @@ <h2 id="component-styles">Component styles</h2>
 <h2 id="shadow-dom">Shadow DOM</h2>
 <p>If you need additional isolation and styling security levels, you can get it with Shadow DOM.
 To enable it and encapsulate all styles into separated scope, use the <code>css-src</code> attribute:</p>
-<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">lr-uploader</span> <span class="hljs-attr">css-src</span>=<span class="hljs-string">&quot;https://unpkg.com/@uploadcare/[email protected].1/web/file-uploader-regular.min.css&quot;</span>&gt;</span>
+<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">lr-uploader</span> <span class="hljs-attr">css-src</span>=<span class="hljs-string">&quot;https://unpkg.com/@uploadcare/[email protected].2/web/file-uploader-regular.min.css&quot;</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">lr-uploader</span>&gt;</span>
 </code></pre>
 <p><br/><br/><br/></p>