diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index 63b1fc6..3c759a4 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@design.estate/dees-catalog',
- version: '1.0.243',
+ version: '1.0.244',
description: 'website for lossless.com'
}
diff --git a/ts_web/elements/00colors.ts b/ts_web/elements/00colors.ts
new file mode 100644
index 0000000..81e1853
--- /dev/null
+++ b/ts_web/elements/00colors.ts
@@ -0,0 +1,11 @@
+export const dark = {
+ blue: '#0050b9',
+ blueActive: '#0069f2',
+ text: '#ffffff',
+}
+
+export const bright = {
+ blue: '#0050b9',
+ blueActive: '#0069f2',
+ text: '#333333',
+}
\ No newline at end of file
diff --git a/ts_web/elements/plugins.ts b/ts_web/elements/00plugins.ts
similarity index 100%
rename from ts_web/elements/plugins.ts
rename to ts_web/elements/00plugins.ts
diff --git a/ts_web/elements/dees-contextmenu.demo.ts b/ts_web/elements/dees-contextmenu.demo.ts
index 5fb976c..ebeb898 100644
--- a/ts_web/elements/dees-contextmenu.demo.ts
+++ b/ts_web/elements/dees-contextmenu.demo.ts
@@ -1,5 +1,5 @@
import { html } from '@design.estate/dees-element';
-import * as plugins from './plugins.js';
+import * as plugins from './00plugins.js';
import { DeesContextmenu } from './dees-contextmenu.js';
diff --git a/ts_web/elements/dees-contextmenu.ts b/ts_web/elements/dees-contextmenu.ts
index e525417..62160c2 100644
--- a/ts_web/elements/dees-contextmenu.ts
+++ b/ts_web/elements/dees-contextmenu.ts
@@ -1,5 +1,5 @@
import { demoFunc } from './dees-contextmenu.demo.js';
-import * as plugins from './plugins.js';
+import * as plugins from './00plugins.js';
import {
customElement,
html,
diff --git a/ts_web/elements/dees-icon.ts b/ts_web/elements/dees-icon.ts
index 216c180..f237e98 100644
--- a/ts_web/elements/dees-icon.ts
+++ b/ts_web/elements/dees-icon.ts
@@ -50,6 +50,7 @@ import {
faEyeSlash as faEyeSlashSolid,
faFileInvoice as faFileInvoiceSolid,
faFileInvoiceDollar as faFileInvoiceDollarSolid,
+ faGear as faGearSolid,
faGrip as faGripSolid,
faMessage as faMessageSolid,
faMoneyCheckDollar as faMoneyCheckDollarSolid,
@@ -93,6 +94,7 @@ export const faIcons = {
eyeSlash: faEyeSlashSolid,
fileInvoice: faFileInvoiceSolid,
fileInvoiceDoller: faFileInvoiceDollarSolid,
+ gear: faGearSolid,
grip: faGripSolid,
message: faMessageRegular,
messageSolid: faMessageSolid,
diff --git a/ts_web/elements/dees-mobilenavigation.ts b/ts_web/elements/dees-mobilenavigation.ts
index 809d5de..956e153 100644
--- a/ts_web/elements/dees-mobilenavigation.ts
+++ b/ts_web/elements/dees-mobilenavigation.ts
@@ -1,4 +1,4 @@
-import * as plugins from './plugins.js';
+import * as plugins from './00plugins.js';
import {
cssManager,
css,
diff --git a/ts_web/elements/dees-modal.ts b/ts_web/elements/dees-modal.ts
index d71d98a..be825c5 100644
--- a/ts_web/elements/dees-modal.ts
+++ b/ts_web/elements/dees-modal.ts
@@ -1,4 +1,4 @@
-import * as plugins from './plugins.js';
+import * as plugins from './00plugins.js';
import { demoFunc } from './dees-modal.demo.js';
import {
customElement,
diff --git a/ts_web/elements/dees-progressbar.demo.ts b/ts_web/elements/dees-progressbar.demo.ts
new file mode 100644
index 0000000..ee32025
--- /dev/null
+++ b/ts_web/elements/dees-progressbar.demo.ts
@@ -0,0 +1,11 @@
+import { html } from '@design.estate/dees-element';
+
+import { DeesProgressbar } from './dees-progressbar.js';
+
+export const demoFunc = () => {
+ return html`
+
+ `;
+}
\ No newline at end of file
diff --git a/ts_web/elements/dees-progressbar.ts b/ts_web/elements/dees-progressbar.ts
index e69de29..fbf168c 100644
--- a/ts_web/elements/dees-progressbar.ts
+++ b/ts_web/elements/dees-progressbar.ts
@@ -0,0 +1,95 @@
+import * as plugins from './00plugins.js';
+import * as colors from './00colors.js';
+import { demoFunc } from './dees-progressbar.demo.js';
+import {
+ customElement,
+ html,
+ DeesElement,
+ property,
+ type TemplateResult,
+ cssManager,
+ css,
+ type CSSResult,
+ unsafeCSS,
+ unsafeHTML,
+ state,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+
+@customElement('dees-progressbar')
+export class DeesProgressbar extends DeesElement {
+ // STATIC
+ public static demo = demoFunc;
+
+ // INSTANCE
+ @property({
+ type: Number,
+ })
+ public percentage = 0;
+
+ public static styles = [
+ cssManager.defaultStyles,
+ css`
+ :host {
+ color: ${cssManager.bdTheme(colors.bright.text, colors.dark.text)};
+ }
+ .progressBarContainer {
+ padding: 8px;
+ min-width: 200px;
+ }
+
+ .progressBar {
+ background: ${cssManager.bdTheme('#eeeeeb', '#444')};
+ height: 8px;
+ width: 100%;
+ border-radius: 4px;
+ border-top: 0.5px solid ${cssManager.bdTheme('none', '#555')};
+ }
+
+ .progressBarFill {
+ background: ${cssManager.bdTheme(colors.dark.blueActive, colors.bright.blueActive)};
+ height: 8px;
+ margin-top: -0.5px;
+ transition: 0.2s width;
+ border-radius: 4px;
+ width: 0px;
+ border-top: 0.5 solid ${cssManager.bdTheme('none', '#398fff')};
+ }
+
+ .progressText {
+ padding: 8px;
+ text-align: center;
+ }
+ `
+ ];
+
+ public render() {
+ return html`
+
+
+
+
+ ${this.percentage}%
+
+
+
+ `
+ }
+
+ firstUpdated (_changedProperties: Map
): void {
+ super.firstUpdated(_changedProperties);
+ this.updateComplete.then(() => {
+ this.updatePercentage();
+ });
+ }
+
+ public async updatePercentage() {
+ const progressBarFill = this.shadowRoot.querySelector('.progressBarFill') as HTMLElement;
+ progressBarFill.style.width = `${this.percentage}%`;
+ }
+
+ updated(){
+ this.updatePercentage();
+ }
+}
\ No newline at end of file
diff --git a/ts_web/elements/dees-table.demo.ts b/ts_web/elements/dees-table.demo.ts
index 85e0a2a..c831546 100644
--- a/ts_web/elements/dees-table.demo.ts
+++ b/ts_web/elements/dees-table.demo.ts
@@ -1,5 +1,5 @@
import { type ITableAction } from './dees-table.js';
-import * as plugins from './plugins.js';
+import * as plugins from './00plugins.js';
import { html } from '@design.estate/dees-element';
interface ITableDemoData {
diff --git a/ts_web/elements/dees-table.ts b/ts_web/elements/dees-table.ts
index 54ea970..35c3f88 100644
--- a/ts_web/elements/dees-table.ts
+++ b/ts_web/elements/dees-table.ts
@@ -1,4 +1,4 @@
-import * as plugins from './plugins.js';
+import * as plugins from './00plugins.js';
import { demoFunc } from './dees-table.demo.js';
import {
customElement,
diff --git a/ts_web/elements/dees-updater.demo.ts b/ts_web/elements/dees-updater.demo.ts
index e70219b..df54077 100644
--- a/ts_web/elements/dees-updater.demo.ts
+++ b/ts_web/elements/dees-updater.demo.ts
@@ -2,6 +2,9 @@ import { html } from '@design.estate/dees-element';
import { DeesUpdater } from './dees-updater.js';
-export const demoFunc = () => {
-
+export const demoFunc = async () => {
+ const updater = await DeesUpdater.createAndShow();
+ setTimeout(async () => {
+ await updater.destroy();
+ }, 10000);
}
\ No newline at end of file
diff --git a/ts_web/elements/dees-updater.ts b/ts_web/elements/dees-updater.ts
index 70d8045..0e3a16c 100644
--- a/ts_web/elements/dees-updater.ts
+++ b/ts_web/elements/dees-updater.ts
@@ -1,4 +1,12 @@
-import { customElement, DeesElement, type TemplateResult, html, property, type CSSResult, domtools } from '@design.estate/dees-element';
+import {
+ customElement,
+ DeesElement,
+ type TemplateResult,
+ html,
+ property,
+ type CSSResult,
+ domtools,
+} from '@design.estate/dees-element';
import { demoFunc } from './dees-updater.demo.js';
import './dees-windowlayer';
@@ -15,7 +23,9 @@ export class DeesUpdater extends DeesElement {
public static demo = demoFunc;
public static async createAndShow() {
-
+ const updater = new DeesUpdater();
+ document.body.appendChild(updater);
+ return updater;
}
@property({
@@ -37,56 +47,64 @@ export class DeesUpdater extends DeesElement {
cssManager.defaultStyles,
css`
.modalContainer {
- will-change: transform;
- position: relative;
- background: ${cssManager.bdTheme('#eeeeeb', '#222')};
- max-width: 800px;
- border-radius: 8px;
- border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#333')};
- }
+ will-change: transform;
+ position: relative;
+ background: ${cssManager.bdTheme('#eeeeeb', '#222')};
+ max-width: 800px;
+ border-radius: 8px;
+ border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#333')};
+ }
- .headingContainer {
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 40px 40px;
- }
+ .headingContainer {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 40px 40px;
+ }
- h1 {
- margin: none;
- font-size: 20px;
- color: ${cssManager.bdTheme('#333', '#fff')};
- margin-left: 20px;
- font-weight: normal;
- }
+ h1 {
+ margin: none;
+ font-size: 20px;
+ color: ${cssManager.bdTheme('#333', '#fff')};
+ margin-left: 20px;
+ font-weight: normal;
+ }
- .buttonContainer {
- display: grid;
- grid-template-columns: 50% 50%;
- }
- `
- ]
+ .buttonContainer {
+ display: grid;
+ grid-template-columns: 50% 50%;
+ }
+ `,
+ ];
public render(): TemplateResult {
return html`
-
+
Updating the application...
+
+
+
More info
Changelog
-
- >
+ >
`;
}
- private windowLayerClicked() {
-
+ public async destroy() {
+ this.parentElement.removeChild(this);
}
+
+ private windowLayerClicked() {}
}
diff --git a/ts_web/elements/index.ts b/ts_web/elements/index.ts
index af1ad0f..8a56da3 100644
--- a/ts_web/elements/index.ts
+++ b/ts_web/elements/index.ts
@@ -14,6 +14,7 @@ export * from './dees-input-fileupload.js';
export * from './dees-input-iban.js';
export * from './dees-input-typelist.js';
export * from './dees-input-phone.js';
+export * from './dees-progressbar.js';
export * from './dees-input-quantityselector.js';
export * from './dees-input-radio.js';
export * from './dees-input-text.js';