+FileItem.template = html`
+
+
- {{itemName}}
- {{errorText}}
+ {{itemName}}
+ {{errorText}}
@@ -446,15 +447,15 @@ FileItem.template = /* HTML */ `
type="button"
l10n="@title:file-item-remove-button"
class="uc-remove-btn uc-mini-btn"
- set="onclick: onRemove;"
+ bind="onclick: onRemove;"
>
-
-
+
`;
FileItem.activeInstances = new Set();
diff --git a/blocks/Icon/Icon.js b/blocks/Icon/Icon.js
index 7ed291182..6e8442b9b 100644
--- a/blocks/Icon/Icon.js
+++ b/blocks/Icon/Icon.js
@@ -1,4 +1,5 @@
// @ts-check
+import { html } from '@symbiotejs/symbiote';
import { Block } from '../../abstract/Block.js';
export class Icon extends Block {
@@ -9,7 +10,6 @@ export class Icon extends Block {
...this.init$,
name: '',
href: '',
- title: '',
};
}
@@ -31,14 +31,12 @@ export class Icon extends Block {
}
}
-Icon.template = /* HTML */ `
+Icon.template = html`
`;
Icon.bindAttributes({
name: 'name',
- title: 'title',
});
diff --git a/blocks/Img/ImgBase.js b/blocks/Img/ImgBase.js
index a095e0662..e13b8165f 100644
--- a/blocks/Img/ImgBase.js
+++ b/blocks/Img/ImgBase.js
@@ -103,8 +103,8 @@ export class ImgBase extends ImgConfig {
createCdnUrl(
//
createOriginalUrl(this.$$('cdn-cname'), this.$$('uuid')),
- cdnModifiers
- )
+ cdnModifiers,
+ ),
);
}
@@ -114,8 +114,8 @@ export class ImgBase extends ImgConfig {
createCdnUrl(
//
createOriginalUrl(this.$$('cdn-cname'), this.$$('uuid')),
- cdnModifiers
- )
+ cdnModifiers,
+ ),
);
}
@@ -126,8 +126,8 @@ export class ImgBase extends ImgConfig {
//
this.$$('proxy-cname'),
cdnModifiers,
- this._fmtAbs(this.$$('src'))
- )
+ this._fmtAbs(this.$$('src')),
+ ),
);
}
@@ -138,8 +138,8 @@ export class ImgBase extends ImgConfig {
//
`https://${this.$$('pubkey')}.ucr.io/`,
cdnModifiers,
- this._fmtAbs(this.$$('src'))
- )
+ this._fmtAbs(this.$$('src')),
+ ),
);
}
}
@@ -157,7 +157,7 @@ export class ImgBase extends ImgConfig {
return applyTemplateData(
this.$$('secure-delivery-proxy'),
{ previewUrl: url },
- { transform: (value) => window.encodeURIComponent(value) }
+ { transform: (value) => window.encodeURIComponent(value) },
);
}
diff --git a/blocks/Img/ImgConfig.js b/blocks/Img/ImgConfig.js
index a80b6e71e..e7cf204be 100644
--- a/blocks/Img/ImgConfig.js
+++ b/blocks/Img/ImgConfig.js
@@ -1,4 +1,4 @@
-import { BaseComponent, Data } from '@symbiotejs/symbiote';
+import { Symbiote, PubSub } from '@symbiotejs/symbiote';
import { PROPS_MAP } from './props-map.js';
import { CSS_PREF } from './configurations.js';
import { PACKAGE_NAME, PACKAGE_VERSION } from '../../env.js';
@@ -8,7 +8,7 @@ for (let prop in PROPS_MAP) {
CSS_PROPS[CSS_PREF + prop] = PROPS_MAP[prop]?.default || '';
}
-export class ImgConfig extends BaseComponent {
+export class ImgConfig extends Symbiote {
cssInit$ = CSS_PROPS;
/**
@@ -87,7 +87,7 @@ export class ImgConfig extends BaseComponent {
});
this._isnObserver = null;
}
- Data.deleteCtx(this);
+ PubSub.deleteCtx(this);
}
static get observedAttributes() {
diff --git a/blocks/Img/utils/parseObjectToString.js b/blocks/Img/utils/parseObjectToString.js
index 5e0582e0b..a7b6c6ea3 100644
--- a/blocks/Img/utils/parseObjectToString.js
+++ b/blocks/Img/utils/parseObjectToString.js
@@ -1,6 +1,6 @@
export const parseObjectToString = (params) =>
Object.entries(params)
- .filter(([key, value]) => value !== undefined && value !== '')
+ .filter(([, value]) => value !== undefined && value !== '')
.map(([key, value]) => {
if (key === 'cdn-operations') {
return value;
diff --git a/blocks/Modal/Modal.js b/blocks/Modal/Modal.js
index 39540d4ba..072243770 100644
--- a/blocks/Modal/Modal.js
+++ b/blocks/Modal/Modal.js
@@ -1,4 +1,5 @@
// @ts-check
+import { html } from '@symbiotejs/symbiote';
import { Block } from '../../abstract/Block.js';
export class Modal extends Block {
@@ -109,7 +110,7 @@ export class Modal extends Block {
}
}
-Modal.template = /* HTML */ `
+Modal.template = html`
diff --git a/blocks/ProgressBar/ProgressBar.js b/blocks/ProgressBar/ProgressBar.js
index a8e0f8688..75db233ea 100644
--- a/blocks/ProgressBar/ProgressBar.js
+++ b/blocks/ProgressBar/ProgressBar.js
@@ -1,3 +1,4 @@
+import { html } from '@symbiotejs/symbiote';
import { Block } from '../../abstract/Block.js';
export class ProgressBar extends Block {
@@ -35,4 +36,4 @@ export class ProgressBar extends Block {
}
}
-ProgressBar.template = /* HTML */ `
`;
+ProgressBar.template = html`
`;
diff --git a/blocks/ProgressBarCommon/ProgressBarCommon.js b/blocks/ProgressBarCommon/ProgressBarCommon.js
index bf3f2d5fa..bcd489b33 100644
--- a/blocks/ProgressBarCommon/ProgressBarCommon.js
+++ b/blocks/ProgressBarCommon/ProgressBarCommon.js
@@ -1,3 +1,4 @@
+import { html } from '@symbiotejs/symbiote';
import { UploaderBlock } from '../../abstract/UploaderBlock.js';
export class ProgressBarCommon extends UploaderBlock {
@@ -41,4 +42,4 @@ export class ProgressBarCommon extends UploaderBlock {
}
}
-ProgressBarCommon.template = /* HTML */ `
`;
+ProgressBarCommon.template = html`
`;
diff --git a/blocks/Range/Range.js b/blocks/Range/Range.js
deleted file mode 100644
index 5b51b33a1..000000000
--- a/blocks/Range/Range.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import { BaseComponent } from '@symbiotejs/symbiote';
-
-export class Range extends BaseComponent {
- init$ = {
- cssLeft: '50%',
- barActive: false,
- value: 50,
- onChange: (e) => {
- e.preventDefault();
- e.stopPropagation();
- this.$.value = parseFloat(this._range.value);
- this.dispatchEvent(new Event('change'));
- },
- };
-
- initCallback() {
- super.initCallback();
- /** @type {HTMLInputElement} */
- this._range = this.ref.range;
- [...this.attributes].forEach((attr) => {
- let exclude = ['style', 'ref'];
- if (!exclude.includes(attr.name)) {
- this.ref.range.setAttribute(attr.name, attr.value);
- }
- });
- this.sub('value', (val) => {
- let pcnt = (val / 100) * 100;
- this.$.cssLeft = `${pcnt}%`;
- });
- this.defineAccessor('value', (val) => {
- this.$.value = val;
- });
- }
-}
-
-Range.template = /* HTML */ `
-
-
-
-`;
diff --git a/blocks/Range/range.css b/blocks/Range/range.css
deleted file mode 100644
index f095a6d2c..000000000
--- a/blocks/Range/range.css
+++ /dev/null
@@ -1,65 +0,0 @@
-uc-range {
- position: relative;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- height: var(--uc-button-size);
-}
-
-uc-range datalist {
- display: none;
-}
-
-uc-range input {
- width: 100%;
- height: 100%;
- opacity: 0;
-}
-
-uc-range .uc-track-wrapper {
- position: absolute;
- right: 10px;
- left: 10px;
- display: flex;
- align-items: center;
- justify-content: center;
- height: 2px;
- user-select: none;
- pointer-events: none;
-}
-
-uc-range .uc-track {
- position: absolute;
- right: 0;
- left: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- height: 2px;
- background-color: currentColor;
- border-radius: 2px;
- opacity: 0.5;
-}
-
-uc-range .uc-slider {
- position: absolute;
- width: 16px;
- height: 16px;
- background-color: currentColor;
- border-radius: 100%;
- transform: translateX(-50%);
-}
-
-uc-range .uc-bar {
- position: absolute;
- left: 0;
- height: 100%;
- background-color: currentColor;
- border-radius: 2px;
-}
-
-uc-range .uc-caption {
- position: absolute;
- display: inline-flex;
- justify-content: center;
-}
diff --git a/blocks/Select/Select.js b/blocks/Select/Select.js
index ad3c149a6..3b49240f5 100644
--- a/blocks/Select/Select.js
+++ b/blocks/Select/Select.js
@@ -1,3 +1,4 @@
+import { html } from '@symbiotejs/symbiote';
import { Block } from '../../abstract/Block.js';
export class Select extends Block {
@@ -21,15 +22,19 @@ export class Select extends Block {
initCallback() {
super.initCallback();
- this.sub('options', (/** @type {{ text: String; value: String }[]} */ options) => {
- this.$.currentText = options?.[0]?.text || '';
- let html = '';
- options?.forEach((opt) => {
- html += /* HTML */ `
`;
- });
- this.$.selectHtml = html;
- });
+ this.defineAccessor(
+ 'options',
+ /** @param {{ text: String; value: String }[]} options */
+ (options) => {
+ this.$.currentText = options?.[0]?.text || '';
+ let htmlCode = '';
+ options?.forEach((opt) => {
+ htmlCode += html`
`;
+ });
+ this.$.selectHtml = htmlCode;
+ },
+ );
}
}
-Select.template = /* HTML */ `
`;
+Select.template = html`
`;
diff --git a/blocks/SimpleBtn/SimpleBtn.js b/blocks/SimpleBtn/SimpleBtn.js
index 9381a38ee..21b8a1100 100644
--- a/blocks/SimpleBtn/SimpleBtn.js
+++ b/blocks/SimpleBtn/SimpleBtn.js
@@ -1,4 +1,5 @@
// @ts-check
+import { html } from '@symbiotejs/symbiote';
import { UploaderBlock } from '../../abstract/UploaderBlock.js';
import { asBoolean } from '../Config/normalizeConfigValue.js';
@@ -37,9 +38,9 @@ export class SimpleBtn extends UploaderBlock {
}
}
-SimpleBtn.template = /* HTML */ `
-
-