diff --git a/.prettierignore b/.prettierignore
index acec1f8..3b8b59d 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,2 +1,10 @@
.DS_Store
/temp
+src/components/**/*.d.ts
+src/components/**/*.js
+src/components/**/*.js.map
+src/lib/**/*.d.ts
+src/lib/**/*.js
+src/lib/**/*.js.map
+types/
+*.tsbuildinfo
\ No newline at end of file
diff --git a/src/components/base/README.md b/src/components/base/README.md
new file mode 100644
index 0000000..012aa80
--- /dev/null
+++ b/src/components/base/README.md
@@ -0,0 +1,13 @@
+# 基类文件
+
+## 基类样式 - base-style.ts
+
+存放基础样式，包括 light 模式和 dark 模式。
+
+## 基类元素 - star-base-element.ts
+
+星光基类元素的作用：
+
+- 引入基类根样式、主题样式
+- 用于管理可重用的部件、模块
+- 放置基类抽象函数, 应用于主题模式、多语言切换等
diff --git a/src/components/base/index.ts b/src/components/base/index.ts
index f490878..e37f46e 100644
--- a/src/components/base/index.ts
+++ b/src/components/base/index.ts
@@ -1,2 +1,2 @@
-export * from './star-base-element.js'
export * from './base-style.js'
+export * from './star-base-element.js'
diff --git a/src/components/base/star-base-element.ts b/src/components/base/star-base-element.ts
index 28c03d1..23a0bc4 100644
--- a/src/components/base/star-base-element.ts
+++ b/src/components/base/star-base-element.ts
@@ -1,7 +1,8 @@
-import {LitElement, ReactiveElement} from 'lit'
+import {CSSResultArray, LitElement, ReactiveElement} from 'lit'
import GestureDector, {
GestureEvents,
} from '../../lib/gesture/gesture-detector.js'
+import {baseStyles} from './base-style.js'
export interface StarInterface {
hello(): void
@@ -36,4 +37,11 @@ export class StarBaseElement extends StarMixin(LitElement) {
stopGestureDetector() {
GestureDector.disembedded(this)
}
+
+ /**
+ * 填充全局所需基础样式变量
+ */
+ public static get styles(): CSSResultArray {
+ return [baseStyles]
+ }
}
diff --git a/src/components/button/button.css.ts b/src/components/button/button.css.ts
new file mode 100644
index 0000000..1e3c019
--- /dev/null
+++ b/src/components/button/button.css.ts
@@ -0,0 +1,105 @@
+import {css} from 'lit'
+
+export default css`
+ /* host: star-button */
+ :host {
+ width: 100%;
+ height: 100%;
+ display: block;
+ }
+ :host([type='icononly']) {
+ width: var(--line-height);
+ height: var(--line-height);
+ background-color: var(--bg-gray-button);
+ border-radius: 50%;
+ }
+ :host(.confirm),
+ :host(.cancel) {
+ margin: 10px;
+ }
+ /* main element: button */
+ /* base style */
+ button {
+ width: inherit;
+ height: inherit;
+ text-align: center;
+ color: var(--font-main-black);
+ font-size: var(--font-main-size);
+ font-family: 'OPPOSans';
+ background-color: unset;
+ padding: unset;
+ border: none;
+ line-height: var(--line-height);
+ white-space: nowrap;
+ cursor: pointer;
+ }
+
+ /* different types */
+ :host([type='icononly']) button {
+ padding: unset;
+ position: absolute;
+ }
+ :host([type='iconlabel']) button {
+ text-align: left;
+ }
+
+ /* different class */
+ /* the button is on the left side of the row */
+ :host(.left) button {
+ text-align: left;
+ padding-inline-start: var(--li-left-padding);
+ }
+ :host(.normal) button,
+ :host(.ok) button,
+ :host(.warning) button,
+ :host(.cancel) button,
+ :host(.confirm) button,
+ :host(.auxiliary) button {
+ font-weight: var(--font-main-weight);
+ }
+ :host(.ok) button {
+ color: var(--theme-blue);
+ }
+ :host(.warning) button {
+ color: var(--theme-red);
+ }
+ :host(.chamfer) button {
+ border-radius: var(--base-border-radius);
+ }
+ :host(.cancel) button {
+ color: var(--font-heading-black);
+ background-color: var(--bg-gray-button);
+ }
+ :host(.confirm) button {
+ color: var(--font-main-white);
+ background-color: var(--theme-blue);
+ }
+ :host(.auxiliary) button {
+ display: flex;
+ color: var(--font-auxiliary-black);
+ }
+ :host(.floatright) button {
+ min-width: 50px;
+ color: var(--font-heading-black);
+ background-color: var(--bg-gray-button);
+ }
+
+ /* pseudo icon */
+ :host([type='icononly']) button::before,
+ :host([type='iconlabel']) button::before {
+ font-family: 'gaia-icons';
+ content: attr(data-icon);
+ text-align: center;
+ color: var(--icon-regular);
+ }
+ :host([type='iconlabel']) button::before {
+ padding: 0 10px;
+ }
+
+ /* button a tag contanier */
+ :host(.auxiliary) button a {
+ display: flex;
+ align-items: center;
+ margin: auto;
+ }
+`
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index a5e7093..6b145da 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -1,7 +1,7 @@
-import {html, css, CSSResultArray, HTMLTemplateResult, nothing} from 'lit'
+import {html, CSSResultArray, HTMLTemplateResult, nothing} from 'lit'
import {customElement, property} from 'lit/decorators.js'
-import {baseStyles} from '../base/base-style.js'
import {StarBaseElement} from '../base/star-base-element.js'
+import buttonStyles from './button.css.js'
export enum ButtonType {
BASE = 'base',
@@ -29,101 +29,9 @@ export enum ButtonVariants {
@customElement('star-button')
export class StarButton extends StarBaseElement {
public static override get styles(): CSSResultArray {
- return [
- baseStyles,
- css`
- :host {
- width: 100%;
- height: 100%;
- display: block;
- }
- :host([type='icononly']) {
- width: var(--line-height);
- height: var(--line-height);
- background-color: var(--bg-gray-button);
- border-radius: 50%;
- }
- :host(.confirm),
- :host(.cancel) {
- margin: 10px;
- }
- button {
- width: inherit;
- height: inherit;
- text-align: center;
- color: var(--font-main-black);
- font-size: var(--font-main-size);
- font-family: 'OPPOSans';
- background-color: unset;
- padding: unset;
- border: none;
- line-height: var(--line-height);
- white-space: nowrap;
- cursor: pointer;
- }
- :host([type='icononly']) button {
- padding: unset;
- position: absolute;
- }
- :host([type='iconlabel']) button {
- text-align: left;
- }
- :host(.left) button {
- text-align: left;
- padding-inline-start: var(--li-left-padding);
- }
- :host(.normal) button,
- :host(.ok) button,
- :host(.warning) button,
- :host(.cancel) button,
- :host(.confirm) button,
- :host(.auxiliary) button {
- font-weight: var(--font-main-weight);
- }
- :host(.ok) button {
- color: var(--theme-blue);
- }
- :host(.warning) button {
- color: var(--theme-red);
- }
- :host(.chamfer) button {
- border-radius: var(--base-border-radius);
- }
- :host(.cancel) button {
- color: var(--font-heading-black);
- background-color: var(--bg-gray-button);
- }
- :host(.confirm) button {
- color: var(--font-main-white);
- background-color: var(--theme-blue);
- }
- :host(.auxiliary) button {
- display: flex;
- color: var(--font-auxiliary-black);
- }
- :host(.floatright) button {
- min-width: 50px;
- color: var(--font-heading-black);
- background-color: var(--bg-gray-button);
- }
- :host([type='icononly']) button::before,
- :host([type='iconlabel']) button::before {
- font-family: 'gaia-icons';
- content: attr(data-icon);
- text-align: center;
- color: var(--icon-regular);
- }
- :host([type='iconlabel']) button::before {
- padding: 0 10px;
- }
- :host(.auxiliary) button a {
- display: flex;
- align-items: center;
- margin: auto;
- }
- `,
- ]
+ return [...super.styles, buttonStyles]
}
+
@property({type: String}) type = 'base'
@property({type: String}) variant = 'accent'
@property({type: String}) size = 'medium'
@@ -155,11 +63,13 @@ export class StarButton extends StarBaseElement {
`
}
+
getConfirmButton(): HTMLTemplateResult {
return html`
`
}
+
render() {
switch (this.type) {
case ButtonType.BASE:
diff --git a/src/components/li/li.css.ts b/src/components/li/li.css.ts
new file mode 100644
index 0000000..1b33f40
--- /dev/null
+++ b/src/components/li/li.css.ts
@@ -0,0 +1,89 @@
+import {css} from 'lit'
+
+export default css`
+ :host {
+ width: inherit;
+ border-radius: var(--base-border-radius);
+ }
+ li {
+ width: inherit;
+ display: flex;
+ border-radius: var(--base-border-radius);
+ min-height: var(--li-base-height);
+ line-height: var(--li-base-height);
+ padding-inline-start: var(--li-left-padding);
+ padding-inline-end: var(
+ --li-right-padding
+ ); /* right-arrow须与最右侧文字对齐 */
+ }
+ /* right-arrow须与最右侧文字对齐 */
+ /* li.hashref {
+padding-inline-end: 0;
+} */
+ a {
+ display: flex;
+ text-decoration: none;
+ color: #000;
+ width: 100%;
+ }
+ a.hasicon::before,
+ a.hashref::after {
+ flex: 1;
+ font-size: 25px;
+ min-width: 25px;
+ max-width: 25px;
+ font-family: 'gaia-icons';
+ }
+ a.hasicon::before {
+ color: #657073;
+ text-align: left;
+ content: attr(data-icon);
+ padding-inline-end: var(--li-right-padding);
+ }
+ a.hashref::after {
+ color: #a5acae;
+ text-align: right;
+ content: 'right-light';
+ }
+ input {
+ width: 100vw;
+ max-width: 500px;
+ padding: 0;
+ border: 0;
+ height: inherit;
+ outline: none;
+ box-sizing: border-box;
+ vertical-align: top;
+ border-radius: 6px;
+ background-color: transparent;
+ font-size: 16px;
+ }
+ span.infokey,
+ span.label {
+ flex: 1;
+ text-align: left;
+ }
+ span.infovalue {
+ /* flex: 1; */ /* 利用自动挤压 */
+ text-align: right;
+ color: #aaa;
+ }
+ span.onlyread {
+ color: #aaa;
+ font-size: clamp(0.55rem, 2.3vw, 1.2rem);
+ }
+ span.text {
+ flex: 8;
+ text-align: left;
+ }
+ span.bubble {
+ flex: 1;
+ height: inherit;
+ background-color: red;
+ }
+ span.next {
+ flex: 1;
+ text-align: right;
+ color: #aaa;
+ }
+`
diff --git a/src/components/li/li.ts b/src/components/li/li.ts
index a9a7f0f..a8511e1 100644
--- a/src/components/li/li.ts
+++ b/src/components/li/li.ts
@@ -1,13 +1,7 @@
-import {
- html,
- css,
- CSSResultArray,
- LitElement,
- HTMLTemplateResult,
- nothing,
-} from 'lit'
+import {html, CSSResultArray, HTMLTemplateResult, nothing} from 'lit'
import {customElement, property} from 'lit/decorators.js'
-import {baseStyles} from '../base/base-style.js'
+import {StarBaseElement} from '../base/star-base-element.js'
+import liStyles from './li.css.js'
import '../bubble/bubble.js'
import '../switch/switch.js'
@@ -23,7 +17,11 @@ export enum LiType {
}
@customElement('star-li')
-export class StarLi extends LitElement {
+export class StarLi extends StarBaseElement {
+ public static override get styles(): CSSResultArray {
+ return [...super.styles, liStyles]
+ }
+
@property({type: String}) type = ''
@property({type: String}) label = ''
@property({type: String}) value = ''
@@ -285,98 +283,6 @@ export class StarLi extends LitElement {
return nothing
}
}
- public static override get styles(): CSSResultArray {
- return [
- baseStyles,
- css`
- :host {
- width: inherit;
- border-radius: var(--base-border-radius);
- }
- li {
- width: inherit;
- display: flex;
- border-radius: var(--base-border-radius);
- min-height: var(--li-base-height);
- line-height: var(--li-base-height);
- padding-inline-start: var(--li-left-padding);
- padding-inline-end: var(
- --li-right-padding
- ); /* right-arrow须与最右侧文字对齐 */
- }
- /* right-arrow须与最右侧文字对齐 */
- /* li.hashref {
- padding-inline-end: 0;
- } */
- a {
- display: flex;
- text-decoration: none;
- color: #000;
- width: 100%;
- }
- a.hasicon::before,
- a.hashref::after {
- flex: 1;
- font-size: 25px;
- min-width: 25px;
- max-width: 25px;
- font-family: 'gaia-icons';
- }
- a.hasicon::before {
- color: #657073;
- text-align: left;
- content: attr(data-icon);
- padding-inline-end: var(--li-right-padding);
- }
- a.hashref::after {
- color: #a5acae;
- text-align: right;
- content: 'right-light';
- }
- input {
- width: 100vw;
- max-width: 500px;
- padding: 0;
- border: 0;
- height: inherit;
- outline: none;
- box-sizing: border-box;
- vertical-align: top;
- border-radius: 6px;
- background-color: transparent;
- font-size: 16px;
- }
- span.infokey,
- span.label {
- flex: 1;
- text-align: left;
- }
- span.infovalue {
- /* flex: 1; */ /* 利用自动挤压 */
- text-align: right;
- color: #aaa;
- }
- span.onlyread {
- color: #aaa;
- font-size: clamp(0.55rem, 2.3vw, 1.2rem);
- }
- span.text {
- flex: 8;
- text-align: left;
- }
- span.bubble {
- flex: 1;
- height: inherit;
- background-color: red;
- }
- span.next {
- flex: 1;
- text-align: right;
- color: #aaa;
- }
- `,
- ]
- }
}
declare global {
diff --git a/src/components/li/tsconfig.json b/src/components/li/tsconfig.json
index 0c31298..e89b7cc 100644
--- a/src/components/li/tsconfig.json
+++ b/src/components/li/tsconfig.json
@@ -6,8 +6,8 @@
},
"include": [
"*.ts",
- "../base/base-style.js",
- "../bubble/bubble.js",
- "../switch/switch.js"
+ "../base/star-base-element.ts",
+ "../bubble/bubble.ts",
+ "../switch/switch.ts"
]
}
diff --git a/src/components/status-bar/status-bar.ts b/src/components/status-bar/status-bar.ts
index 997a80c..986de2b 100644
--- a/src/components/status-bar/status-bar.ts
+++ b/src/components/status-bar/status-bar.ts
@@ -1,14 +1,19 @@
-import { html, css, LitElement } from 'lit'
-import { customElement, query, state, queryAssignedElements } from 'lit/decorators.js'
+import {html, css, LitElement} from 'lit'
+import {
+ customElement,
+ query,
+ state,
+ queryAssignedElements,
+} from 'lit/decorators.js'
@customElement('star-status-bar')
export class StarStatusBar extends LitElement {
- @state() updateTimeTimeout!: number;
- @state() updateDateTimeout!: number;
- @query('.icons') icons!: HTMLDivElement;
- @query('#time') time!: HTMLDivElement;
- @query('#date') date!: HTMLDivElement;
- @queryAssignedElements({flatten: true}) slotElements!: HTMLSlotElement[];
+ @state() updateTimeTimeout!: number
+ @state() updateDateTimeout!: number
+ @query('.icons') icons!: HTMLDivElement
+ @query('#time') time!: HTMLDivElement
+ @query('#date') date!: HTMLDivElement
+ @queryAssignedElements({flatten: true}) slotElements!: HTMLSlotElement[]
render() {
return html`
@@ -21,7 +26,7 @@ export class StarStatusBar extends LitElement {
- `;
+ `
}
static styles = css`
@@ -48,7 +53,7 @@ export class StarStatusBar extends LitElement {
font-weight: 400;
font-size: 20px;
line-height: 20px;
- color: #F0F0F0;
+ color: #f0f0f0;
}
#time {
@@ -79,109 +84,110 @@ export class StarStatusBar extends LitElement {
`
firstUpdated() {
- this.icons.style.width = 40 * this.slotElements.length - 4 + "px";
- this.autoUpdateDateTime();
+ this.icons.style.width = 40 * this.slotElements.length - 4 + 'px'
+ this.autoUpdateDateTime()
}
autoUpdateDateTime() {
- window.clearTimeout(this.updateDateTimeout);
- window.clearTimeout(this.updateTimeTimeout);
- this.autoUpdateDate();
- this.autoUpdateTime();
+ window.clearTimeout(this.updateDateTimeout)
+ window.clearTimeout(this.updateTimeTimeout)
+ this.autoUpdateDate()
+ this.autoUpdateTime()
}
autoUpdateTime() {
- var d = new Date();
- this.time.innerHTML = this.formatTime(d);
- let self = this;
- var remainMillisecond = (60 - d.getSeconds()) * 1000;
+ var d = new Date()
+ this.time.innerHTML = this.formatTime(d)
+ let self = this
+ var remainMillisecond = (60 - d.getSeconds()) * 1000
this.updateTimeTimeout = window.setTimeout(() => {
- self.autoUpdateTime();
- }, remainMillisecond);
+ self.autoUpdateTime()
+ }, remainMillisecond)
}
autoUpdateDate() {
- var d = new Date();
- this.date.innerHTML = this.formatDate(d) + " " + this.getWeekDay();
- let remainMillisecond = (24 - d.getHours()) * 3600 * 1000 -
- d.getMinutes() * 60 * 1000 - d.getMilliseconds();
- let self = this;
- this.updateDateTimeout = window.setTimeout(
- function updateDateTimeout() {
- self.autoUpdateDate();
- }, remainMillisecond);
+ var d = new Date()
+ this.date.innerHTML = this.formatDate(d) + ' ' + this.getWeekDay()
+ let remainMillisecond =
+ (24 - d.getHours()) * 3600 * 1000 -
+ d.getMinutes() * 60 * 1000 -
+ d.getMilliseconds()
+ let self = this
+ this.updateDateTimeout = window.setTimeout(function updateDateTimeout() {
+ self.autoUpdateDate()
+ }, remainMillisecond)
}
getWeekDay() {
- var d = new Date();
- let daynumber = d.getDay();
- let day = "";
+ var d = new Date()
+ let daynumber = d.getDay()
+ let day = ''
switch (daynumber) {
case 0:
- day = "周日";
- break;
+ day = '周日'
+ break
case 1:
- day = "周一";
- break;
+ day = '周一'
+ break
case 2:
- day = "周二";
- break;
+ day = '周二'
+ break
case 3:
- day = "周三";
- break;
+ day = '周三'
+ break
case 4:
- day = "周四";
- break;
+ day = '周四'
+ break
case 5:
- day = "周五";
- break;
+ day = '周五'
+ break
case 6:
- day = "周六";
- break;
+ day = '周六'
+ break
}
- return day;
+ return day
}
formatDate(d: Date | string, iso?: boolean) {
if (d instanceof Date) {
if (iso) {
- let date = d.toISOString(); // Thu Oct 07 2021 07:45:18 GMT+0800
- date = date.split("T")[0];
- return date;
+ let date = d.toISOString() // Thu Oct 07 2021 07:45:18 GMT+0800
+ date = date.split('T')[0]
+ return date
} else {
return d.toLocaleString(navigator.languages as string[], {
// year: 'numeric',
month: 'long',
day: '2-digit',
- });
+ })
}
} else {
- return d;
+ return d
}
}
formatTime(d: Date | string, iso?: boolean) {
if (d instanceof Date) {
if (iso) {
- let time = d.toLocaleTimeString();
- time = time.split(" ")[0];
- if (time.indexOf(":") === 1) {
- time = `0${time}`;
+ let time = d.toLocaleTimeString()
+ time = time.split(' ')[0]
+ if (time.indexOf(':') === 1) {
+ time = `0${time}`
}
- return time;
+ return time
} else {
return d.toLocaleString(navigator.languages as string[], {
// hour12: (navigator as any).mozHour12,
hour12: false,
- hour: "numeric",
- minute: "numeric",
- });
+ hour: 'numeric',
+ minute: 'numeric',
+ })
}
} else {
- if (d.indexOf(":") == 1) {
- d = "0" + d;
+ if (d.indexOf(':') == 1) {
+ d = '0' + d
}
- return d;
+ return d
}
}
}
@@ -190,4 +196,4 @@ declare global {
interface HTMLElementTagNameMap {
'star-status-bar': StarStatusBar
}
-}
\ No newline at end of file
+}
diff --git a/src/components/ul/tsconfig.json b/src/components/ul/tsconfig.json
index d298929..5b2cc4e 100644
--- a/src/components/ul/tsconfig.json
+++ b/src/components/ul/tsconfig.json
@@ -4,5 +4,5 @@
"composite": true,
"rootDir": "../../"
},
- "include": ["*.ts", "../base/base-style.ts"]
+ "include": ["*.ts", "../base/star-base-element.ts"]
}
diff --git a/src/components/ul/ul.css.ts b/src/components/ul/ul.css.ts
new file mode 100644
index 0000000..044d037
--- /dev/null
+++ b/src/components/ul/ul.css.ts
@@ -0,0 +1,44 @@
+import {css} from 'lit'
+
+export default css`
+ :host {
+ :host {
+ width: inherit;
+ display: block;
+ margin: 20px auto;
+ max-width: 88vw;
+ }
+
+ ul {
+ list-style: none;
+ flex-direction: column;
+ display: flex;
+ width: 100%;
+ padding: 0;
+ margin: 10px auto;
+ max-width: 88vw;
+ background: var(--bg-ul, var(--pure-white));
+ box-shadow: rgb(64 60 67 / 16%) 1px 1px 5px 1px;
+ border-radius: inherit; /* 外部传入 */
+ }
+
+ header,
+ footer {
+ color: #888;
+ margin-left: 10px;
+ font-size: 12px;
+ }
+
+ star-ul-base {
+ margin: 8px 0 12px 0; /* override child(star-ul-base) */
+ }
+
+ footer a {
+ text-decoration: unset;
+ }
+
+ footer a:visited {
+ color: blue;
+ }
+ }
+`
diff --git a/src/components/ul/ul.ts b/src/components/ul/ul.ts
index ebeb22e..eeb004c 100644
--- a/src/components/ul/ul.ts
+++ b/src/components/ul/ul.ts
@@ -1,14 +1,8 @@
-import {
- html,
- css,
- CSSResultArray,
- LitElement,
- HTMLTemplateResult,
- nothing,
-} from 'lit'
-import {baseStyles} from '../base/base-style.js'
+import {html, CSSResultArray, HTMLTemplateResult, nothing} from 'lit'
import {customElement, property} from 'lit/decorators.js'
import {unsafeHTML} from 'lit/directives/unsafe-html.js'
+import {StarBaseElement} from '../base/star-base-element.js'
+import ulStyles from './ul.css.js'
export enum UlType {
BASE = 'base',
@@ -18,7 +12,11 @@ export enum UlType {
}
@customElement('star-ul')
-export class StarUl extends LitElement {
+export class StarUl extends StarBaseElement {
+ public static override get styles(): CSSResultArray {
+ return [...super.styles, ulStyles]
+ }
+
@property({type: String}) type = ''
@property({type: String}) title = ''
@property({type: String}) text = ''
@@ -104,52 +102,6 @@ export class StarUl extends LitElement {
return nothing
}
}
-
- public static override get styles(): CSSResultArray {
- return [
- baseStyles,
- css`
- :host {
- width: inherit;
- display: block;
- margin: 20px auto;
- max-width: 88vw;
- }
-
- ul {
- list-style: none;
- flex-direction: column;
- display: flex;
- width: 100%;
- padding: 0;
- margin: 10px auto;
- max-width: 88vw;
- background: var(--bg-ul, var(--pure-white));
- box-shadow: rgb(64 60 67 / 16%) 1px 1px 5px 1px;
- border-radius: inherit; /* 外部传入 */
- }
-
- header,
- footer {
- color: #888;
- margin-left: 10px;
- font-size: 12px;
- }
-
- star-ul-base {
- margin: 8px 0 12px 0; /* override child(star-ul-base) */
- }
-
- footer a {
- text-decoration: unset;
- }
-
- footer a:visited {
- color: blue;
- }
- `,
- ]
- }
}
declare global {
diff --git a/src/test/panels/status-bar/status-bar.ts b/src/test/panels/status-bar/status-bar.ts
index 1f46dfa..dd2a857 100644
--- a/src/test/panels/status-bar/status-bar.ts
+++ b/src/test/panels/status-bar/status-bar.ts
@@ -1,9 +1,9 @@
import {html, css, LitElement} from 'lit'
import {customElement} from 'lit/decorators.js'
-import '../../../components/status-bar/status-bar';
+import '../../../components/status-bar/status-bar'
+
@customElement('panel-status-bar')
export class PanelStatusBar extends LitElement {
-
render() {
return html`
@@ -11,7 +11,7 @@ export class PanelStatusBar extends LitElement {
- `
+ `
}
static styles = css`
@@ -19,7 +19,7 @@ export class PanelStatusBar extends LitElement {
width: 1200px;
height: 48px;
}
- `;
+ `
}
declare global {