@uploadcare/file-uploader 0.50.1 → 1.1.0

package/README.md

@@ -67,63 +67,63 @@ We use [JSDoc type annotations](https://www.typescriptlang.org/docs/handbook/int
 
 ### From CDN
 
-1. Connect Uploadcare File Uploader directly from your document replacing `{{PACKAGE_VERSION}}` with the [latest version](https://github.com/uploadcare/blocks/releases) of the package:
+1. Connect Uploadcare File Uploader directly from your document:
 
 ```html
 <script type="module">
-  import * as LR from 'https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@{{PACKAGE_VERSION}}/web/blocks.min.js';
+  import * as UC from 'https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/blocks.min.js';
 
-  LR.registerBlocks(LR);
+  UC.registerBlocks(UC);
 </script>
 ```
 
-2. Start using Uploadcare File Uploader in your application markup (don't forget to specify `{{PACKAGE_VERSION}}` with the [latest one](https://github.com/uploadcare/blocks/releases)):
+2. Start using Uploadcare File Uploader in your application markup:
 
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@{{PACKAGE_VERSION}}/web/lr-file-uploader-regular.min.css"
+  href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/uc-file-uploader-regular.min.css"
 />
 
-<lr-file-uploader-regular ctx-name="my-uploader"> </lr-file-uploader-regular>
+<uc-file-uploader-regular ctx-name="my-uploader"> </uc-file-uploader-regular>
 ```
 
 3. Configure Uploadcare File Uploader and add your personal public key to the project. Discover the instructions in the [following section](#configuration).
 
 ### From NPM
 
-1. Install Uploadcare File Uploader package: `npm i --save-exact @uploadcare/file-uploader`
+1. Install Uploadcare File Uploader package: `npm i @uploadcare/file-uploader`
 2. Connect `Blocks` from your script file:
 
 ```js
-import * as LR from '@uploadcare/file-uploader';
+import * as UC from '@uploadcare/file-uploader';
 
-LR.registerBlocks(LR);
+UC.registerBlocks(UC);
 ```
 
-3. Start using Uploadcare File Uploader in your application markup and replace `{{PACKAGE_VERSION}}` with the [latest version](https://github.com/uploadcare/blocks/releases) of the package:
+3. Start using Uploadcare File Uploader in your application markup:
 
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@{{PACKAGE_VERSION}}/web/lr-file-uploader-regular.min.css"
+  href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/uc-file-uploader-regular.min.css"
 />
 
-<lr-file-uploader-inline ctx-name="my-uploader"> </lr-file-uploader-inline>
+<uc-file-uploader-inline ctx-name="my-uploader"> </uc-file-uploader-inline>
 ```
 
 4. Configure Uploadcare File Uploader and add your personal public key to the project. Discover the instructions in the [following section](#configuration).
 
 ### Configuration
 
-All configurations in Uploadcare File Uploader are managed from `lr-config` block.
+All configurations in Uploadcare File Uploader are managed from `uc-config` block.
 
 1. Sign up to [Uploadcare](https://app.uploadcare.com/accounts/signup/?ref=github-readme).
 2. Get a Public API key in [Uploadcare project's dashboard](https://app.uploadcare.com/projects/-/api-keys/?ref=github-readme).
-3. Add a `lr-config` block to your markup and replace `YOUR_PUBLIC_KEY` with your own public key:
+3. Add a `uc-config` block to your markup and replace `YOUR_PUBLIC_KEY` with your own public key:
 
 ```html
-<lr-config ctx-name="my-uploader" pubkey="YOUR_PUBLIC_KEY"></lr-config>
+<uc-config ctx-name="my-uploader" pubkey="YOUR_PUBLIC_KEY"></uc-config>
 ```
 
 4. Make sure that your config block uses the same `ctx-name` attribute value as your solution block.
@@ -156,7 +156,7 @@ All the source code is accessible and works in raw mode. Use _developer tools_ t
 
 You’re always welcome to contribute:
 
-- Create [issues](https://github.com/uploadcare/blocks/issues) every time you feel something is missing or goes wrong.
+- Create [issues](https://github.com/uploadcare/file-uploader/issues) every time you feel something is missing or goes wrong.
 - Provide your feedback or drop us a support request at <a href="mailto:hello@uploadcare.com">hello@uploadcare.com</a>.
 - Ask questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/uploadcare) with "uploadcare" tag if others can have these questions as well.
 - Fork project, make changes and send it as pull request. For launching the developing mode follow these commands:

package/abstract/Block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Block.d.ts","sourceRoot":"","sources":["Block.js"],"names":[],"mappings":"AAmBA;IACE,4BAA4B;IAC5B,2BADW,MAAM,GAAG,IAAI,CACS;IAEjC,uBAAuB;IACvB,mBADW,MAAM,EAAE,CACI;IAoTvB,6BAA6B;IAC7B,4CAMC;IAvQD,cAMC;IAxDD,iBAAiB;IACjB,kCAAuB;IAEvB,wDAAwD;IACxD,cADW,OAAO,oBAAoB,EAAE,YAAY,CAChC;IAEpB,UAAmB;IAEnB;;;;OAIG;IACH;;eAcC;IAED;;;;;OAKG;IACH,kBAIC;IAED;;;;OAIG;IACH,wBAJW,MAAM,YACN,MAAM,IAAI,QAKpB;IAIC,uDAAuD;IACvD,mBADW,IAAI,MAAM,EAAE,IAAI;QAAE,MAAM,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC,CACjB;IAKpC;;;;OAIG;IACH,WAJW;;qBAAuF,CAAC,CAAC,YACzF;;qBAAuF,CAAC,CAAC,YACzF;;qBAAuF,CAAC,CAAC,QASnG;IAED;;;OAGG;IACH,gCAHmB,KAAK,KAAK,OAAO,WAUnC;IAED;;;OAGG;IACH,oCAFW,GAAG,QASb;IAkED;;;OAGG;IACH,4BAEC;IAED;;;OAGG;IACH,kCAEC;IAED,yBAAyB;IACzB,iCAEC;IAsBD;;;;OAIG;IACH,qCAIC;IAED;;;;OAIG;IACH,iCAHa,eAAe,CA6B3B;IAED,iDAAiD;IACjD,yCA8BC;IA3BG,eAAe;IACf,mBAuBE;IAKN;;;;OAIG;IACH,6HAFwD,IAAI,QAQ3D;IAED,8BAA8B;IAC9B,oBADY,OAAO,EAAE,QAWpB;CAUF;;8BAnVmC,sBAAsB;qBAarC,WAAW"}
+{"version":3,"file":"Block.d.ts","sourceRoot":"","sources":["Block.js"],"names":[],"mappings":"AAmBA;IACE,4BAA4B;IAC5B,2BADW,MAAM,GAAG,IAAI,CACS;IAEjC,uBAAuB;IACvB,mBADW,MAAM,EAAE,CACI;IAoTvB,6BAA6B;IAC7B,4CAQC;IAzQD,cAMC;IAxDD,iBAAiB;IACjB,kCAAuB;IAEvB,wDAAwD;IACxD,cADW,OAAO,oBAAoB,EAAE,YAAY,CAChC;IAEpB,UAAmB;IAEnB;;;;OAIG;IACH;;eAcC;IAED;;;;;OAKG;IACH,kBAIC;IAED;;;;OAIG;IACH,wBAJW,MAAM,YACN,MAAM,IAAI,QAKpB;IAIC,uDAAuD;IACvD,mBADW,IAAI,MAAM,EAAE,IAAI;QAAE,MAAM,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC,CACjB;IAKpC;;;;OAIG;IACH,WAJW;;qBAAuF,CAAC,CAAC,YACzF;;qBAAuF,CAAC,CAAC,YACzF;;qBAAuF,CAAC,CAAC,QASnG;IAED;;;OAGG;IACH,gCAHmB,KAAK,KAAK,OAAO,WAUnC;IAED;;;OAGG;IACH,oCAFW,GAAG,QASb;IAkED;;;OAGG;IACH,4BAEC;IAED;;;OAGG;IACH,kCAEC;IAED,yBAAyB;IACzB,iCAEC;IAsBD;;;;OAIG;IACH,qCAIC;IAED;;;;OAIG;IACH,iCAHa,eAAe,CA6B3B;IAED,iDAAiD;IACjD,yCA8BC;IA3BG,eAAe;IACf,mBAuBE;IAKN;;;;OAIG;IACH,6HAFwD,IAAI,QAQ3D;IAED,8BAA8B;IAC9B,oBADY,OAAO,EAAE,QAWpB;CAYF;;8BArVmC,sBAAsB;qBAarC,WAAW"}

package/abstract/Block.js

@@ -14,7 +14,7 @@ import { l10nProcessor } from './l10nProcessor.js';
 import { sharedConfigKey } from './sharedConfigKey.js';
 import { A11y } from './a11y.js';
 
-const TAG_PREFIX = 'lr-';
+const TAG_PREFIX = 'uc-';
 
 // @ts-ignore TODO: fix this
 export class Block extends BaseComponent {
@@ -336,7 +336,9 @@ export class Block extends BaseComponent {
       super.reg();
       return;
     }
-    super.reg(name.startsWith(TAG_PREFIX) ? name : TAG_PREFIX + name);
+    if (name.startsWith(TAG_PREFIX)) {
+      super.reg(name);
+    }
   }
 }
 

package/abstract/SolutionBlock.js

@@ -1,9 +1,9 @@
-import svgIconsSprite from '../blocks/themes/lr-basic/svg-sprite.js';
+import svgIconsSprite from '../blocks/themes/uc-basic/svg-sprite.js';
 import { Block } from './Block.js';
 import { uploaderBlockCtx } from './CTX.js';
 
 export class SolutionBlock extends Block {
-  static styleAttrs = ['lr-wgt-common'];
+  static styleAttrs = ['uc-wgt-common'];
   requireCtxName = true;
   init$ = uploaderBlockCtx(this);
   _template = null;

package/abstract/connectBlocksFrom.d.ts

@@ -4,5 +4,5 @@
  * @returns {Promise<import('../index.js')>}
  */
 export function connectBlocksFrom(url: string, register?: boolean | undefined): Promise<typeof import("../index.js")>;
-export const LR_WINDOW_KEY: "LR";
+export const UC_WINDOW_KEY: "UC";
 //# sourceMappingURL=connectBlocksFrom.d.ts.map

package/abstract/connectBlocksFrom.js

@@ -1,6 +1,6 @@
 import { registerBlocks } from './registerBlocks.js';
 
-export const LR_WINDOW_KEY = 'LR';
+export const UC_WINDOW_KEY = 'UC';
 
 /**
  * @param {String} url Blocks pack url
@@ -13,8 +13,8 @@ export async function connectBlocksFrom(url, register = false) {
       resolve(null);
       return;
     }
-    if (typeof window === 'object' && window[LR_WINDOW_KEY]) {
-      resolve(window[LR_WINDOW_KEY]);
+    if (typeof window === 'object' && window[UC_WINDOW_KEY]) {
+      resolve(window[UC_WINDOW_KEY]);
       return;
     }
     let script = document.createElement('script');
@@ -25,7 +25,7 @@ export async function connectBlocksFrom(url, register = false) {
     };
     script.onload = () => {
       /** @type {import('../index.js')} */
-      let blocks = window[LR_WINDOW_KEY];
+      let blocks = window[UC_WINDOW_KEY];
       register && registerBlocks(blocks);
       resolve(blocks);
     };

package/abstract/registerBlocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registerBlocks.d.ts","sourceRoot":"","sources":["registerBlocks.js"],"names":[],"mappings":"AAAA,gDAAgD;AAChD;QADmB,MAAM,GAAE,GAAG;SAmB7B"}
+{"version":3,"file":"registerBlocks.d.ts","sourceRoot":"","sources":["registerBlocks.js"],"names":[],"mappings":"AAAA,gDAAgD;AAChD;QADmB,MAAM,GAAE,GAAG;SAoB7B"}

package/abstract/registerBlocks.js

@@ -10,8 +10,9 @@ export function registerBlocks(blockExports) {
     if (tagName.startsWith('-')) {
       tagName = tagName.replace('-', '');
     }
-    if (!tagName.startsWith('lr-')) {
-      tagName = 'lr-' + tagName;
+
+    if (!tagName.startsWith('uc-')) {
+      tagName = 'uc-' + tagName;
     }
     if (blockExports[blockName].reg) {
       blockExports[blockName].reg(tagName);

package/blocks/ActivityHeader/activity-header.css

@@ -1,4 +1,4 @@
-lr-activity-header {
+uc-activity-header {
   display: flex;
   justify-content: space-between;
   gap: var(--uc-padding);
@@ -8,7 +8,7 @@ lr-activity-header {
   font-size: 1em;
 }
 
-lr-activity-header > * {
+uc-activity-header > * {
   display: flex;
   align-items: center;
 }

package/blocks/CameraSource/CameraSource.js

@@ -214,23 +214,23 @@ export class CameraSource extends UploaderBlock {
 }
 
 CameraSource.template = /* HTML */ `
-  <lr-activity-header>
+  <uc-activity-header>
     <button type="button" class="uc-mini-btn" set="onclick: *historyBack">
-      <lr-icon name="back"></lr-icon>
+      <uc-icon name="back"></uc-icon>
     </button>
     <div set="@hidden: !cameraSelectHidden">
-      <lr-icon name="camera"></lr-icon>
+      <uc-icon name="camera"></uc-icon>
       <span l10n="caption-camera"></span>
     </div>
-    <lr-select
+    <uc-select
       class="uc-camera-select"
       set="$.options: cameraSelectOptions; @hidden: cameraSelectHidden; onchange: onCameraSelectChange"
     >
-    </lr-select>
+    </uc-select>
     <button type="button" class="uc-mini-btn uc-close-btn" set="onclick: *closeModal">
-      <lr-icon name="close"></lr-icon>
+      <uc-icon name="close"></uc-icon>
     </button>
-  </lr-activity-header>
+  </uc-activity-header>
   <div class="uc-content">
     <video
       autoplay
@@ -247,7 +247,7 @@ CameraSource.template = /* HTML */ `
       ></button>
     </div>
     <button type="button" class="uc-shot-btn" set="onclick: onShot; @disabled: shotBtnDisabled">
-      <lr-icon name="camera"></lr-icon>
+      <uc-icon name="camera"></uc-icon>
     </button>
   </div>
 `;

package/blocks/CameraSource/camera-source.css

@@ -1,4 +1,4 @@
-lr-camera-source {
+uc-camera-source {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -10,24 +10,24 @@ lr-camera-source {
   border-radius: var(--uc-radius);
 }
 
-[lr-modal] lr-camera-source {
+[uc-modal] uc-camera-source {
   width: min(calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2), calc(100vw - var(--uc-padding) * 2));
   height: 100vh;
   max-height: var(--modal-max-content-height);
 }
 
-lr-camera-source.uc-initialized {
+uc-camera-source.uc-initialized {
   height: max-content;
 }
 
 @media only screen and (max-width: 430px) {
-  lr-camera-source {
+  uc-camera-source {
     width: calc(100vw - var(--uc-padding) * 2);
     height: var(--modal-content-height-fill, 100%);
   }
 }
 
-lr-camera-source video {
+uc-camera-source video {
   display: block;
   width: 100%;
   max-height: 100%;
@@ -37,7 +37,7 @@ lr-camera-source video {
   border-radius: var(--uc-radius);
 }
 
-lr-camera-source .uc-toolbar {
+uc-camera-source .uc-toolbar {
   position: absolute;
   bottom: 0;
   display: flex;
@@ -47,7 +47,7 @@ lr-camera-source .uc-toolbar {
   background-color: var(--uc-background);
 }
 
-lr-camera-source .uc-content {
+uc-camera-source .uc-content {
   display: flex;
   flex: 1;
   justify-content: center;
@@ -57,7 +57,7 @@ lr-camera-source .uc-content {
   overflow: hidden;
 }
 
-lr-camera-source .uc-message-box {
+uc-camera-source .uc-message-box {
   display: flex;
   flex-direction: column;
   grid-gap: 40px;
@@ -67,12 +67,12 @@ lr-camera-source .uc-message-box {
   color: var(--uc-foreground);
 }
 
-lr-camera-source .uc-message-box button {
+uc-camera-source .uc-message-box button {
   color: var(--uc-primary-foreground);
   background-color: var(--uc-primary);
 }
 
-lr-camera-source .uc-shot-btn {
+uc-camera-source .uc-shot-btn {
   position: absolute;
   bottom: 20px;
   width: 58px;
@@ -87,21 +87,21 @@ lr-camera-source .uc-shot-btn {
     transform var(--uc-transition);
 }
 
-lr-camera-source .uc-shot-btn:hover {
+uc-camera-source .uc-shot-btn:hover {
   transform: scale(1.05);
   opacity: 1;
 }
 
-lr-camera-source .uc-shot-btn:active {
+uc-camera-source .uc-shot-btn:active {
   transform: scale(1);
   opacity: 1;
 }
 
-lr-camera-source .uc-shot-btn[disabled] {
+uc-camera-source .uc-shot-btn[disabled] {
   bottom: -80px;
 }
 
-lr-camera-source .uc-shot-btn lr-icon svg {
+uc-camera-source .uc-shot-btn uc-icon svg {
   width: 20px;
   height: 20px;
 }

package/blocks/CloudImageEditor/src/CloudImageEditorBlock.js

@@ -19,7 +19,7 @@ import { TabId } from './toolbar-constants.js';
 
 export class CloudImageEditorBlock extends Block {
   ctxOwner = true;
-  static styleAttrs = ['lr-cloud-image-editor'];
+  static styleAttrs = ['uc-cloud-image-editor'];
 
   constructor() {
     super();

package/blocks/CloudImageEditor/src/EditorButtonControl.js

@@ -38,7 +38,7 @@ export class EditorButtonControl extends Block {
 
 EditorButtonControl.template = /* HTML */ `
   <button type="button" role="option">
-    <lr-icon set="@name: icon;"></lr-icon>
+    <uc-icon set="@name: icon;"></uc-icon>
     <div class="uc-title" ref="title-el">{{title}}</div>
   </button>
 `;

package/blocks/CloudImageEditor/src/EditorFilterControl.js

@@ -160,6 +160,6 @@ export class EditorFilterControl extends EditorButtonControl {
 EditorFilterControl.template = /* HTML */ `
   <button type="button" role="option">
     <div class="uc-preview" ref="preview-el"></div>
-    <lr-icon ref="icon-el" set="@name: icon; @size: iconSize;"></lr-icon>
+    <uc-icon ref="icon-el" set="@name: icon; @size: iconSize;"></uc-icon>
   </button>
 `;

package/blocks/CloudImageEditor/src/EditorImageCropper.js

@@ -547,5 +547,5 @@ export class EditorImageCropper extends Block {
 
 EditorImageCropper.template = /* HTML */ `
   <canvas class="uc-canvas" ref="canvas-el"></canvas>
-  <lr-crop-frame ref="frame-el"></lr-crop-frame>
+  <uc-crop-frame ref="frame-el"></uc-crop-frame>
 `;

package/blocks/CloudImageEditor/src/EditorSlider.js

@@ -111,8 +111,8 @@ export class EditorSlider extends Block {
 }
 
 EditorSlider.template = /* HTML */ `
-  <lr-slider-ui
+  <uc-slider-ui
     ref="slider-el"
     set="disabled: disabled; min: min; max: max; defaultValue: defaultValue; zero: zero; onInput: on.input;"
-  ></lr-slider-ui>
+  ></uc-slider-ui>
 `;

package/blocks/CloudImageEditor/src/EditorToolbar.js

@@ -19,31 +19,31 @@ import { viewerImageSrc } from './util.js';
 /** @param {String} id */
 function renderTabToggle(id) {
   return /* HTML */ `
-    <lr-presence-toggle
+    <uc-presence-toggle
       class="uc-tab-toggle"
       set="visible: presence.tabToggle.${id}; styles: presence.tabToggleStyles;"
     >
-      <lr-btn-ui
+      <uc-btn-ui
         theme="tab"
         ref="tab-toggle-${id}"
         data-id="${id}"
         icon="${id}"
         set="onclick: on.clickTab; aria-role:tab_role; aria-controls:tab_${id}"
       >
-      </lr-btn-ui>
-    </lr-presence-toggle>
+      </uc-btn-ui>
+    </uc-presence-toggle>
   `;
 }
 
 /** @param {String} id */
 function renderTabContent(id) {
   return /* HTML */ `
-    <lr-presence-toggle
+    <uc-presence-toggle
       id="tab_${id}"
       class="uc-tab-content"
       set="visible: presence.tabContent.${id}; styles: presence.tabContentStyles"
     >
-      <lr-editor-scroller hidden-scrollbar>
+      <uc-editor-scroller hidden-scrollbar>
         <div class="uc-controls-list_align">
           <div
             role="listbox"
@@ -52,8 +52,8 @@ function renderTabContent(id) {
             ref="controls-list-${id}"
           ></div>
         </div>
-      </lr-editor-scroller>
-    </lr-presence-toggle>
+      </uc-editor-scroller>
+    </uc-presence-toggle>
   `;
 }
 
@@ -400,42 +400,42 @@ export class EditorToolbar extends Block {
 }
 
 EditorToolbar.template = /* HTML */ `
-  <lr-line-loader-ui set="active: showLoader"></lr-line-loader-ui>
+  <uc-line-loader-ui set="active: showLoader"></uc-line-loader-ui>
   <div class="uc-info-tooltip_container">
     <div class="uc-info-tooltip_wrapper">
       <div ref="tooltip-el" class="uc-info-tooltip uc-info-tooltip_hidden">{{*operationTooltip}}</div>
     </div>
   </div>
   <div class="uc-toolbar-container">
-    <lr-presence-toggle
+    <uc-presence-toggle
       role="tablist"
       class="uc-sub-toolbar"
       set="visible: presence.mainToolbar; styles: presence.subTopToolbarStyles"
     >
       <div class="uc-tab-content-row">${ALL_TABS.map(renderTabContent).join('')}</div>
       <div class="uc-controls-row">
-        <lr-presence-toggle
+        <uc-presence-toggle
           class="uc-tab-toggles"
           set="visible: presence.tabToggles; styles: presence.tabTogglesStyles"
         >
           <div ref="tabs-indicator" class="uc-tab-toggles_indicator"></div>
           ${ALL_TABS.map(renderTabToggle).join('')}
-        </lr-presence-toggle>
-        <lr-btn-ui style="order: -1" theme="secondary-icon" icon="closeMax" set="onclick: on.cancel"> </lr-btn-ui>
-        <lr-btn-ui theme="primary-icon" icon="done" set="onclick: on.apply"> </lr-btn-ui>
+        </uc-presence-toggle>
+        <uc-btn-ui style="order: -1" theme="secondary-icon" icon="closeMax" set="onclick: on.cancel"> </uc-btn-ui>
+        <uc-btn-ui theme="primary-icon" icon="done" set="onclick: on.apply"> </uc-btn-ui>
       </div>
-    </lr-presence-toggle>
-    <lr-presence-toggle
+    </uc-presence-toggle>
+    <uc-presence-toggle
       class="uc-sub-toolbar"
       set="visible: presence.subToolbar; styles: presence.subBottomToolbarStyles"
     >
       <div class="uc-slider">
-        <lr-editor-slider ref="slider-el"></lr-editor-slider>
+        <uc-editor-slider ref="slider-el"></uc-editor-slider>
       </div>
       <div class="uc-controls-row">
-        <lr-btn-ui theme="secondary" set="onclick: on.cancelSlider;" l10n="@text:cancel"> </lr-btn-ui>
-        <lr-btn-ui theme="primary" set="onclick: on.applySlider;" l10n="@text:apply"> </lr-btn-ui>
+        <uc-btn-ui theme="secondary" set="onclick: on.cancelSlider;" l10n="@text:cancel"> </uc-btn-ui>
+        <uc-btn-ui theme="primary" set="onclick: on.applySlider;" l10n="@text:apply"> </uc-btn-ui>
       </div>
-    </lr-presence-toggle>
+    </uc-presence-toggle>
   </div>
 `;