@lukso/core 1.1.0-dev.a98e9bc → 1.1.0-dev.c21633f
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +55 -0
- package/dist/chains/index.cjs +1 -0
- package/dist/chains/index.cjs.map +1 -1
- package/dist/chains/index.js +1 -0
- package/dist/chunk-CUDG6NPH.cjs +111 -0
- package/dist/chunk-CUDG6NPH.cjs.map +1 -0
- package/dist/chunk-DWXFDFMM.cjs +1 -0
- package/dist/chunk-DWXFDFMM.cjs.map +1 -0
- package/dist/chunk-EUXUH3YW.js +15 -0
- package/dist/chunk-GFLV5EJV.js +159 -0
- package/dist/chunk-GFLV5EJV.js.map +1 -0
- package/dist/chunk-JEE6C34P.js +1 -0
- package/dist/chunk-JEE6C34P.js.map +1 -0
- package/dist/chunk-LQIOVPBE.js +111 -0
- package/dist/chunk-LQIOVPBE.js.map +1 -0
- package/dist/chunk-QU6NUTY6.cjs +159 -0
- package/dist/chunk-QU6NUTY6.cjs.map +1 -0
- package/dist/chunk-ZBDE64SD.cjs +15 -0
- package/dist/chunk-ZBDE64SD.cjs.map +1 -0
- package/dist/config.cjs +1 -0
- package/dist/config.cjs.map +1 -1
- package/dist/config.js +1 -0
- package/dist/index.cjs +14 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +13 -4
- package/dist/mixins/device.cjs +1 -0
- package/dist/mixins/device.cjs.map +1 -1
- package/dist/mixins/device.js +1 -0
- package/dist/mixins/index.cjs +7 -2
- package/dist/mixins/index.cjs.map +1 -1
- package/dist/mixins/index.d.cts +1 -0
- package/dist/mixins/index.d.ts +1 -0
- package/dist/mixins/index.js +7 -2
- package/dist/mixins/intl.cjs +1 -0
- package/dist/mixins/intl.cjs.map +1 -1
- package/dist/mixins/intl.js +1 -0
- package/dist/mixins/theme.cjs +8 -0
- package/dist/mixins/theme.cjs.map +1 -0
- package/dist/mixins/theme.d.cts +45 -0
- package/dist/mixins/theme.d.ts +45 -0
- package/dist/mixins/theme.js +8 -0
- package/dist/mixins/theme.js.map +1 -0
- package/dist/services/device.cjs +1 -0
- package/dist/services/device.cjs.map +1 -1
- package/dist/services/device.js +1 -0
- package/dist/services/index.cjs +1 -0
- package/dist/services/index.cjs.map +1 -1
- package/dist/services/index.js +1 -0
- package/dist/services/intl.cjs +1 -0
- package/dist/services/intl.cjs.map +1 -1
- package/dist/services/intl.js +1 -0
- package/dist/utils/index.cjs +7 -2
- package/dist/utils/index.cjs.map +1 -1
- package/dist/utils/index.d.cts +34 -1
- package/dist/utils/index.d.ts +34 -1
- package/dist/utils/index.js +6 -1
- package/package.json +7 -1
- package/src/mixins/__tests__/theme.spec.ts +478 -0
- package/src/mixins/index.ts +1 -0
- package/src/mixins/theme.ts +172 -0
- package/src/utils/index.ts +1 -0
- package/src/utils/url-resolver.ts +93 -0
- package/dist/chunk-AMRGSLR5.cjs +0 -1
- package/dist/chunk-AMRGSLR5.cjs.map +0 -1
- package/dist/chunk-DKEXQFNE.js +0 -1
- package/dist/chunk-DKXHVRHM.js +0 -84
- package/dist/chunk-DKXHVRHM.js.map +0 -1
- package/dist/chunk-MBIRTPNM.cjs +0 -84
- package/dist/chunk-MBIRTPNM.cjs.map +0 -1
- /package/dist/{chunk-DKEXQFNE.js.map → chunk-EUXUH3YW.js.map} +0 -0
package/README.md
CHANGED
|
@@ -147,6 +147,61 @@ export class MyComponent extends withIntlService(LitElement) {
|
|
|
147
147
|
}
|
|
148
148
|
```
|
|
149
149
|
|
|
150
|
+
#### withTheme
|
|
151
|
+
|
|
152
|
+
Add theme management with automatic dark mode support:
|
|
153
|
+
|
|
154
|
+
```typescript
|
|
155
|
+
import { LitElement, html } from 'lit'
|
|
156
|
+
import { customElement } from 'lit/decorators.js'
|
|
157
|
+
import { withTheme } from '@lukso/core/mixins'
|
|
158
|
+
|
|
159
|
+
@customElement('my-component')
|
|
160
|
+
export class MyComponent extends withTheme(LitElement) {
|
|
161
|
+
render() {
|
|
162
|
+
return html`
|
|
163
|
+
<div class="bg-neutral-100 dark:bg-neutral-10">
|
|
164
|
+
<h1 class="text-neutral-10 dark:text-neutral-100">
|
|
165
|
+
Hello World
|
|
166
|
+
</h1>
|
|
167
|
+
<p>Current theme: ${this.theme}</p>
|
|
168
|
+
<p>Is dark mode: ${this.isDark}</p>
|
|
169
|
+
</div>
|
|
170
|
+
`
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
**Features:**
|
|
176
|
+
- **Manual theme selection**: Set theme to `'light'`, `'dark'`, or `'auto'`
|
|
177
|
+
- **System preference detection**: Automatically follows OS dark mode when theme is `'auto'`
|
|
178
|
+
- **Reactive updates**: Listens for system theme changes and updates automatically
|
|
179
|
+
- **Automatic wrapping**: All rendered content is wrapped in a div with `data-theme-root` attribute
|
|
180
|
+
- **Tailwind integration**: The wrapper div receives the `dark` class for Tailwind's dark mode utilities
|
|
181
|
+
|
|
182
|
+
**API:**
|
|
183
|
+
- `theme` (`'light' | 'dark' | 'auto'`): The theme mode (reflects to attribute)
|
|
184
|
+
- `isDark` (`boolean`): Read-only computed state indicating if dark mode is active
|
|
185
|
+
|
|
186
|
+
**HTML Structure:**
|
|
187
|
+
```html
|
|
188
|
+
<!-- Light mode -->
|
|
189
|
+
<my-component theme="light">
|
|
190
|
+
#shadow-root
|
|
191
|
+
<div data-theme-root>
|
|
192
|
+
<!-- Your component's rendered content -->
|
|
193
|
+
</div>
|
|
194
|
+
</my-component>
|
|
195
|
+
|
|
196
|
+
<!-- Dark mode -->
|
|
197
|
+
<my-component theme="dark">
|
|
198
|
+
#shadow-root
|
|
199
|
+
<div data-theme-root class="dark">
|
|
200
|
+
<!-- Your component's rendered content -->
|
|
201
|
+
</div>
|
|
202
|
+
</my-component>
|
|
203
|
+
```
|
|
204
|
+
|
|
150
205
|
### Chain Definitions
|
|
151
206
|
|
|
152
207
|
Extended chain configurations for LUKSO networks with custom contracts and metadata.
|
package/dist/chains/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/chains/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACA;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACA;AACA;AACA;AACF,uOAAC","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/chains/index.cjs"}
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/chains/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACA;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACA;AACA;AACA;AACF,uOAAC","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/chains/index.cjs"}
|
package/dist/chains/index.js
CHANGED
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
|
+
|
|
3
|
+
var _chunkZBDE64SDcjs = require('./chunk-ZBDE64SD.cjs');
|
|
4
|
+
|
|
5
|
+
// src/mixins/theme.ts
|
|
6
|
+
var _decoratorsjs = require('lit/decorators.js');
|
|
7
|
+
function withTheme(Base) {
|
|
8
|
+
class Mixin extends Base {
|
|
9
|
+
constructor() {
|
|
10
|
+
super(...arguments);
|
|
11
|
+
this.theme = "light";
|
|
12
|
+
this.isDark = false;
|
|
13
|
+
this.mediaQueryList = null;
|
|
14
|
+
/**
|
|
15
|
+
* Handle system theme changes
|
|
16
|
+
*
|
|
17
|
+
* @param event - Media query list event
|
|
18
|
+
*/
|
|
19
|
+
this.handleMediaQueryChange = (event) => {
|
|
20
|
+
this.isDark = event.matches;
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
connectedCallback() {
|
|
24
|
+
super.connectedCallback();
|
|
25
|
+
this.updateTheme();
|
|
26
|
+
this.updateHostClass();
|
|
27
|
+
if (this.theme === "auto") {
|
|
28
|
+
this.mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
|
|
29
|
+
this.mediaQueryList.addEventListener(
|
|
30
|
+
"change",
|
|
31
|
+
this.handleMediaQueryChange
|
|
32
|
+
);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
disconnectedCallback() {
|
|
36
|
+
super.disconnectedCallback();
|
|
37
|
+
if (this.mediaQueryList) {
|
|
38
|
+
this.mediaQueryList.removeEventListener(
|
|
39
|
+
"change",
|
|
40
|
+
this.handleMediaQueryChange
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
updated(changedProperties) {
|
|
45
|
+
super.updated(changedProperties);
|
|
46
|
+
if (changedProperties.has("theme")) {
|
|
47
|
+
this.updateTheme();
|
|
48
|
+
if (this.theme === "auto" && !this.mediaQueryList) {
|
|
49
|
+
this.mediaQueryList = window.matchMedia(
|
|
50
|
+
"(prefers-color-scheme: dark)"
|
|
51
|
+
);
|
|
52
|
+
this.mediaQueryList.addEventListener(
|
|
53
|
+
"change",
|
|
54
|
+
this.handleMediaQueryChange
|
|
55
|
+
);
|
|
56
|
+
} else if (this.theme !== "auto" && this.mediaQueryList) {
|
|
57
|
+
this.mediaQueryList.removeEventListener(
|
|
58
|
+
"change",
|
|
59
|
+
this.handleMediaQueryChange
|
|
60
|
+
);
|
|
61
|
+
this.mediaQueryList = null;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
if (changedProperties.has("isDark")) {
|
|
65
|
+
this.updateHostClass();
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
/**
|
|
69
|
+
* Update isDark state based on theme property
|
|
70
|
+
*/
|
|
71
|
+
updateTheme() {
|
|
72
|
+
if (this.theme === "auto") {
|
|
73
|
+
this.isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
74
|
+
} else {
|
|
75
|
+
this.isDark = this.theme === "dark";
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
/**
|
|
79
|
+
* Create the render root with a themed wrapper div
|
|
80
|
+
*/
|
|
81
|
+
createRenderRoot() {
|
|
82
|
+
const root = super.createRenderRoot();
|
|
83
|
+
this.themeRoot = document.createElement("div");
|
|
84
|
+
this.themeRoot.setAttribute("data-theme-root", "");
|
|
85
|
+
root.appendChild(this.themeRoot);
|
|
86
|
+
return this.themeRoot;
|
|
87
|
+
}
|
|
88
|
+
/**
|
|
89
|
+
* Update the host element's class based on isDark state
|
|
90
|
+
*/
|
|
91
|
+
updateHostClass() {
|
|
92
|
+
if (this.isDark) {
|
|
93
|
+
this.themeRoot.classList.add("dark");
|
|
94
|
+
} else {
|
|
95
|
+
this.themeRoot.classList.remove("dark");
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
_chunkZBDE64SDcjs.__decorateClass.call(void 0, [
|
|
100
|
+
_decoratorsjs.property.call(void 0, { type: String, reflect: true })
|
|
101
|
+
], Mixin.prototype, "theme", 2);
|
|
102
|
+
_chunkZBDE64SDcjs.__decorateClass.call(void 0, [
|
|
103
|
+
_decoratorsjs.state.call(void 0, )
|
|
104
|
+
], Mixin.prototype, "isDark", 2);
|
|
105
|
+
return Mixin;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
exports.withTheme = withTheme;
|
|
111
|
+
//# sourceMappingURL=chunk-CUDG6NPH.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/chunk-CUDG6NPH.cjs","../src/mixins/theme.ts"],"names":[],"mappings":"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","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/chunk-CUDG6NPH.cjs","sourcesContent":[null,"/**\n * Theme Mixin\n *\n * Mixin to add theme detection and management to a Lit component\n */\n\nimport type { LitElement } from 'lit'\nimport { property, state } from 'lit/decorators.js'\n\nexport type Theme = 'light' | 'dark' | 'auto'\n\n/**\n * Mixin to add theme management to a Lit component\n *\n * Provides a `theme` property and `isDark` state that automatically handles:\n * - Manual theme selection ('light' or 'dark')\n * - Auto theme detection based on system preferences\n * - Reactive updates when system theme changes\n * - Automatically wraps all rendered content in a themed div with 'dark' class when dark mode is active\n *\n * All content rendered by the component will be inside a theme-root div that receives the dark class.\n * Components can use render() normally - no changes needed.\n *\n * @typeParam T - The Lit component class being extended\n * @returns Extended class with theme management capabilities\n *\n * @example\n * ```typescript\n * import { LitElement, html } from 'lit';\n * import { customElement } from 'lit/decorators.js';\n * import { withTheme } from '@lukso/core/mixins';\n *\n * @customElement('my-component')\n * export class MyComponent extends withTheme(LitElement) {\n * render() {\n * return html`\n * <div class=\"text-neutral-20 dark:text-neutral-100\">\n * Current theme: ${this.theme}\n * </div>\n * `;\n * }\n * }\n * ```\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function withTheme<T extends typeof LitElement>(Base: T): any {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n class Mixin extends (Base as any) {\n /**\n * Theme mode: 'light', 'dark', or 'auto' (follows system preference)\n */\n @property({ type: String, reflect: true })\n theme: Theme = 'light'\n\n /**\n * Computed state indicating if dark mode is active\n */\n @state()\n protected isDark = false\n\n /**\n * The theme root element that wraps all rendered content and receives the dark class\n */\n private themeRoot!: HTMLDivElement\n\n private mediaQueryList: MediaQueryList | null = null\n\n connectedCallback(): void {\n super.connectedCallback()\n this.updateTheme()\n this.updateHostClass()\n\n // Listen for system theme changes when in 'auto' mode\n if (this.theme === 'auto') {\n this.mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)')\n this.mediaQueryList.addEventListener(\n 'change',\n this.handleMediaQueryChange\n )\n }\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback()\n\n if (this.mediaQueryList) {\n this.mediaQueryList.removeEventListener(\n 'change',\n this.handleMediaQueryChange\n )\n }\n }\n\n updated(changedProperties: Map<string, any>): void {\n super.updated(changedProperties)\n\n // Handle theme changes\n if (changedProperties.has('theme')) {\n this.updateTheme()\n\n // Update media query listener when theme mode changes\n if (this.theme === 'auto' && !this.mediaQueryList) {\n this.mediaQueryList = window.matchMedia(\n '(prefers-color-scheme: dark)'\n )\n this.mediaQueryList.addEventListener(\n 'change',\n this.handleMediaQueryChange\n )\n } else if (this.theme !== 'auto' && this.mediaQueryList) {\n this.mediaQueryList.removeEventListener(\n 'change',\n this.handleMediaQueryChange\n )\n this.mediaQueryList = null\n }\n }\n\n // Update host class when isDark changes\n if (changedProperties.has('isDark')) {\n this.updateHostClass()\n }\n }\n\n /**\n * Handle system theme changes\n *\n * @param event - Media query list event\n */\n private handleMediaQueryChange = (event: MediaQueryListEvent): void => {\n this.isDark = event.matches\n }\n\n /**\n * Update isDark state based on theme property\n */\n protected updateTheme(): void {\n if (this.theme === 'auto') {\n this.isDark = window.matchMedia('(prefers-color-scheme: dark)').matches\n } else {\n this.isDark = this.theme === 'dark'\n }\n }\n\n /**\n * Create the render root with a themed wrapper div\n */\n createRenderRoot(): Element | ShadowRoot {\n const root = super.createRenderRoot()\n\n this.themeRoot = document.createElement('div')\n this.themeRoot.setAttribute('data-theme-root', '')\n\n root.appendChild(this.themeRoot)\n return this.themeRoot\n }\n\n /**\n * Update the host element's class based on isDark state\n */\n private updateHostClass(): void {\n if (this.isDark) {\n this.themeRoot.classList.add('dark')\n } else {\n this.themeRoot.classList.remove('dark')\n }\n }\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return Mixin as any\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";//# sourceMappingURL=chunk-DWXFDFMM.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/chunk-DWXFDFMM.cjs"],"names":[],"mappings":"AAAA","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/chunk-DWXFDFMM.cjs"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
4
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
5
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
6
|
+
if (decorator = decorators[i])
|
|
7
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
8
|
+
if (kind && result) __defProp(target, key, result);
|
|
9
|
+
return result;
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export {
|
|
13
|
+
__decorateClass
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=chunk-EUXUH3YW.js.map
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
// src/utils/browserInfo.ts
|
|
2
|
+
var EXTENSION_STORE_LINKS = {
|
|
3
|
+
chrome: "https://chrome.google.com/webstore/detail/universal-profiles-testin/abpickdkkbnbcoepogfhkhennhfhehfn",
|
|
4
|
+
brave: "https://chrome.google.com/webstore/detail/universal-profiles-testin/abpickdkkbnbcoepogfhkhennhfhehfn",
|
|
5
|
+
edge: "https://chrome.google.com/webstore/detail/universal-profiles-testin/abpickdkkbnbcoepogfhkhennhfhehfn",
|
|
6
|
+
opera: "",
|
|
7
|
+
safari: "",
|
|
8
|
+
firefox: ""
|
|
9
|
+
};
|
|
10
|
+
var browserInfo = (deviceService) => {
|
|
11
|
+
const browserInfoDefaults = {
|
|
12
|
+
id: "chrome",
|
|
13
|
+
name: "",
|
|
14
|
+
icon: ""
|
|
15
|
+
};
|
|
16
|
+
const detectBrowser = () => {
|
|
17
|
+
const { isChrome, isBrave, isFirefox, isSafari, isEdge, isOpera } = deviceService;
|
|
18
|
+
if (isBrave) {
|
|
19
|
+
return {
|
|
20
|
+
id: "brave",
|
|
21
|
+
name: "Brave",
|
|
22
|
+
icon: "logo-brave",
|
|
23
|
+
storeLink: EXTENSION_STORE_LINKS.brave
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
if (isEdge) {
|
|
27
|
+
return {
|
|
28
|
+
id: "edge",
|
|
29
|
+
name: "Edge",
|
|
30
|
+
icon: "logo-edge",
|
|
31
|
+
storeLink: EXTENSION_STORE_LINKS.edge
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
if (isOpera) {
|
|
35
|
+
return {
|
|
36
|
+
id: "opera",
|
|
37
|
+
name: "Opera",
|
|
38
|
+
icon: "logo-opera",
|
|
39
|
+
storeLink: EXTENSION_STORE_LINKS.opera
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
if (isChrome) {
|
|
43
|
+
return {
|
|
44
|
+
id: "chrome",
|
|
45
|
+
name: "Chrome",
|
|
46
|
+
icon: "logo-chrome",
|
|
47
|
+
storeLink: EXTENSION_STORE_LINKS.chrome
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
if (isFirefox) {
|
|
51
|
+
return {
|
|
52
|
+
id: "firefox",
|
|
53
|
+
name: "Firefox",
|
|
54
|
+
icon: "logo-firefox",
|
|
55
|
+
storeLink: EXTENSION_STORE_LINKS.firefox
|
|
56
|
+
};
|
|
57
|
+
}
|
|
58
|
+
if (isSafari) {
|
|
59
|
+
return {
|
|
60
|
+
id: "safari",
|
|
61
|
+
name: "Safari",
|
|
62
|
+
icon: "logo-safari",
|
|
63
|
+
storeLink: EXTENSION_STORE_LINKS.safari
|
|
64
|
+
};
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
const browserInfo2 = { ...browserInfoDefaults, ...detectBrowser() };
|
|
68
|
+
return browserInfo2;
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
// src/utils/slug.ts
|
|
72
|
+
var slug = (value) => {
|
|
73
|
+
if (!value) {
|
|
74
|
+
return "";
|
|
75
|
+
}
|
|
76
|
+
return value.toLowerCase().replace(/\s+/g, "-");
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
// src/utils/url-resolver.ts
|
|
80
|
+
var UrlConverter = class {
|
|
81
|
+
/**
|
|
82
|
+
* It will relatively append pathname or hostname to the destination URL
|
|
83
|
+
*
|
|
84
|
+
* For example:
|
|
85
|
+
* destination=https://some.api.gateway/something/ipfs
|
|
86
|
+
* url=ipfs://QmSomeHash
|
|
87
|
+
* output=https://some.api.gateway/something/ipfs/QmSomeHash
|
|
88
|
+
*
|
|
89
|
+
* destination=https://some.api.gateway/something/ipfs
|
|
90
|
+
* url=https://something.com/somewhere
|
|
91
|
+
* output=https://some.api.gateway/something/ipfs/somewhere
|
|
92
|
+
*
|
|
93
|
+
* @param destination destination string | URL
|
|
94
|
+
*/
|
|
95
|
+
constructor(destination) {
|
|
96
|
+
this.destination = new URL(destination);
|
|
97
|
+
if (this.destination.pathname.at(-1) !== "/") {
|
|
98
|
+
this.destination.pathname += "/";
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
resolveUrl(url) {
|
|
102
|
+
const source = new URL(url);
|
|
103
|
+
const relativePath = source.pathname ? `./${source.hostname}${source.pathname}` : `./${source.hostname}`;
|
|
104
|
+
const out = new URL(relativePath, this.destination);
|
|
105
|
+
out.pathname = out.pathname.replaceAll(/\/\/+/g, "/");
|
|
106
|
+
return out.toString();
|
|
107
|
+
}
|
|
108
|
+
};
|
|
109
|
+
var UrlResolver = class {
|
|
110
|
+
constructor(converters) {
|
|
111
|
+
this.converters = [];
|
|
112
|
+
for (const item of converters) {
|
|
113
|
+
const [match, _converter] = item;
|
|
114
|
+
if (match == null) {
|
|
115
|
+
throw new TypeError("Match criteria not defined");
|
|
116
|
+
}
|
|
117
|
+
const converter = typeof _converter === "string" ? new UrlConverter(_converter) : _converter;
|
|
118
|
+
if (!(converter instanceof UrlConverter)) {
|
|
119
|
+
throw new TypeError("Invalid converter");
|
|
120
|
+
}
|
|
121
|
+
this.converters.push({ match, converter });
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
/**
|
|
125
|
+
* Resolves a URL to a gateway URL.
|
|
126
|
+
* Supports possible multiple converters transforming the URL
|
|
127
|
+
* in sequence until no converter matches.
|
|
128
|
+
*
|
|
129
|
+
* @param {string} url to resolve
|
|
130
|
+
* @returns {string} resolved url (if resolver is found, otherwise the parameter url is returned)
|
|
131
|
+
*/
|
|
132
|
+
resolveUrl(url_) {
|
|
133
|
+
let url = url_;
|
|
134
|
+
const current = new Set(this.converters);
|
|
135
|
+
let found = true;
|
|
136
|
+
while (found) {
|
|
137
|
+
found = false;
|
|
138
|
+
for (const entry of current) {
|
|
139
|
+
const { match, converter } = entry;
|
|
140
|
+
if (match instanceof RegExp ? match.test(url) : url.startsWith(match)) {
|
|
141
|
+
url = converter.resolveUrl(url);
|
|
142
|
+
current.delete(entry);
|
|
143
|
+
found = true;
|
|
144
|
+
break;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
return url;
|
|
149
|
+
}
|
|
150
|
+
};
|
|
151
|
+
|
|
152
|
+
export {
|
|
153
|
+
EXTENSION_STORE_LINKS,
|
|
154
|
+
browserInfo,
|
|
155
|
+
slug,
|
|
156
|
+
UrlConverter,
|
|
157
|
+
UrlResolver
|
|
158
|
+
};
|
|
159
|
+
//# sourceMappingURL=chunk-GFLV5EJV.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/utils/browserInfo.ts","../src/utils/slug.ts","../src/utils/url-resolver.ts"],"sourcesContent":["import type { DeviceService } from '../services'\n\nexport type BrowserName =\n | 'chrome'\n | 'safari'\n | 'firefox'\n | 'edge'\n | 'opera'\n | 'brave'\n\nexport type BrowserInfo = {\n id: BrowserName\n name: string\n icon: string\n storeLink: string\n}\n\n// extension store links (all webkit based browsers use chrome web store installation)\nexport const EXTENSION_STORE_LINKS = {\n chrome:\n 'https://chrome.google.com/webstore/detail/universal-profiles-testin/abpickdkkbnbcoepogfhkhennhfhehfn',\n brave:\n 'https://chrome.google.com/webstore/detail/universal-profiles-testin/abpickdkkbnbcoepogfhkhennhfhehfn',\n edge: 'https://chrome.google.com/webstore/detail/universal-profiles-testin/abpickdkkbnbcoepogfhkhennhfhehfn',\n opera: '',\n safari: '',\n firefox: '',\n}\n\n/**\n * Expose browser info to the app\n */\nexport const browserInfo = (deviceService: DeviceService): BrowserInfo => {\n const browserInfoDefaults = {\n id: 'chrome',\n name: '',\n icon: '',\n } as BrowserInfo\n\n const detectBrowser = (): BrowserInfo | undefined => {\n const { isChrome, isBrave, isFirefox, isSafari, isEdge, isOpera } =\n deviceService\n\n if (isBrave) {\n return {\n id: 'brave',\n name: 'Brave',\n icon: 'logo-brave',\n storeLink: EXTENSION_STORE_LINKS.brave,\n }\n }\n\n if (isEdge) {\n return {\n id: 'edge',\n name: 'Edge',\n icon: 'logo-edge',\n storeLink: EXTENSION_STORE_LINKS.edge,\n }\n }\n\n if (isOpera) {\n return {\n id: 'opera',\n name: 'Opera',\n icon: 'logo-opera',\n storeLink: EXTENSION_STORE_LINKS.opera,\n }\n }\n\n if (isChrome) {\n return {\n id: 'chrome',\n name: 'Chrome',\n icon: 'logo-chrome',\n storeLink: EXTENSION_STORE_LINKS.chrome,\n }\n }\n\n if (isFirefox) {\n return {\n id: 'firefox',\n name: 'Firefox',\n icon: 'logo-firefox',\n storeLink: EXTENSION_STORE_LINKS.firefox,\n }\n }\n\n if (isSafari) {\n return {\n id: 'safari',\n name: 'Safari',\n icon: 'logo-safari',\n storeLink: EXTENSION_STORE_LINKS.safari,\n }\n }\n }\n\n const browserInfo = { ...browserInfoDefaults, ...detectBrowser() }\n\n return browserInfo\n}\n","/**\n * Make slug from text\n *\n * @param value\n * @returns\n */\nexport const slug = (value?: string) => {\n if (!value) {\n return ''\n }\n\n return value.toLowerCase().replace(/\\s+/g, '-') // convert spaces to hyphens\n}\n","export class UrlConverter {\n private destination: URL\n /**\n * It will relatively append pathname or hostname to the destination URL\n *\n * For example:\n * destination=https://some.api.gateway/something/ipfs\n * url=ipfs://QmSomeHash\n * output=https://some.api.gateway/something/ipfs/QmSomeHash\n *\n * destination=https://some.api.gateway/something/ipfs\n * url=https://something.com/somewhere\n * output=https://some.api.gateway/something/ipfs/somewhere\n *\n * @param destination destination string | URL\n */\n constructor(destination: string | URL) {\n this.destination = new URL(destination)\n if (this.destination.pathname.at(-1) !== '/') {\n this.destination.pathname += '/'\n }\n }\n\n resolveUrl(url: string): string {\n // Parse and convert to javascript URL objects\n // this will manage / and relative paths for us.\n const source = new URL(url)\n // extract the relative path. For URLs with a pathname prepend \".\" to make it ./ (i.e. relative)\n // for anything that only has a hostname we prepend ./ to make it relative\n // the pathname is at least slash for https urls, but '' for ipfs for example\n const relativePath = source.pathname\n ? `./${source.hostname}${source.pathname}` // pathname always starts with at least a slash\n : `./${source.hostname}`\n // Construct relative URL on destination using the relative pathname.\n const out = new URL(relativePath, this.destination)\n out.pathname = out.pathname.replaceAll(/\\/\\/+/g, '/')\n return out.toString()\n }\n}\n\nexport class UrlResolver {\n private converters: Array<{\n match: string | RegExp\n converter: UrlConverter\n }> = []\n constructor(converters: Array<[string | RegExp, UrlConverter | string]>) {\n for (const item of converters) {\n const [match, _converter] = item\n if (match == null) {\n throw new TypeError('Match criteria not defined')\n }\n const converter =\n typeof _converter === 'string'\n ? new UrlConverter(_converter)\n : _converter\n if (!(converter instanceof UrlConverter)) {\n throw new TypeError('Invalid converter')\n }\n this.converters.push({ match, converter })\n }\n }\n\n /**\n * Resolves a URL to a gateway URL.\n * Supports possible multiple converters transforming the URL\n * in sequence until no converter matches.\n *\n * @param {string} url to resolve\n * @returns {string} resolved url (if resolver is found, otherwise the parameter url is returned)\n */\n resolveUrl(url_: string): string {\n let url = url_\n const current = new Set<{\n match: string | RegExp\n converter: UrlConverter\n }>(this.converters)\n let found = true\n while (found) {\n found = false\n for (const entry of current) {\n const { match, converter } = entry\n if (match instanceof RegExp ? match.test(url) : url.startsWith(match)) {\n url = converter.resolveUrl(url)\n // This converter matches, so don't use it again.\n current.delete(entry)\n found = true\n break\n }\n }\n }\n return url\n }\n}\n"],"mappings":";AAkBO,IAAM,wBAAwB;AAAA,EACnC,QACE;AAAA,EACF,OACE;AAAA,EACF,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AACX;AAKO,IAAM,cAAc,CAAC,kBAA8C;AACxE,QAAM,sBAAsB;AAAA,IAC1B,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAEA,QAAM,gBAAgB,MAA+B;AACnD,UAAM,EAAE,UAAU,SAAS,WAAW,UAAU,QAAQ,QAAQ,IAC9D;AAEF,QAAI,SAAS;AACX,aAAO;AAAA,QACL,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,MAAM;AAAA,QACN,WAAW,sBAAsB;AAAA,MACnC;AAAA,IACF;AAEA,QAAI,QAAQ;AACV,aAAO;AAAA,QACL,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,MAAM;AAAA,QACN,WAAW,sBAAsB;AAAA,MACnC;AAAA,IACF;AAEA,QAAI,SAAS;AACX,aAAO;AAAA,QACL,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,MAAM;AAAA,QACN,WAAW,sBAAsB;AAAA,MACnC;AAAA,IACF;AAEA,QAAI,UAAU;AACZ,aAAO;AAAA,QACL,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,MAAM;AAAA,QACN,WAAW,sBAAsB;AAAA,MACnC;AAAA,IACF;AAEA,QAAI,WAAW;AACb,aAAO;AAAA,QACL,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,MAAM;AAAA,QACN,WAAW,sBAAsB;AAAA,MACnC;AAAA,IACF;AAEA,QAAI,UAAU;AACZ,aAAO;AAAA,QACL,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,MAAM;AAAA,QACN,WAAW,sBAAsB;AAAA,MACnC;AAAA,IACF;AAAA,EACF;AAEA,QAAMA,eAAc,EAAE,GAAG,qBAAqB,GAAG,cAAc,EAAE;AAEjE,SAAOA;AACT;;;AC/FO,IAAM,OAAO,CAAC,UAAmB;AACtC,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,SAAO,MAAM,YAAY,EAAE,QAAQ,QAAQ,GAAG;AAChD;;;ACZO,IAAM,eAAN,MAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBxB,YAAY,aAA2B;AACrC,SAAK,cAAc,IAAI,IAAI,WAAW;AACtC,QAAI,KAAK,YAAY,SAAS,GAAG,EAAE,MAAM,KAAK;AAC5C,WAAK,YAAY,YAAY;AAAA,IAC/B;AAAA,EACF;AAAA,EAEA,WAAW,KAAqB;AAG9B,UAAM,SAAS,IAAI,IAAI,GAAG;AAI1B,UAAM,eAAe,OAAO,WACxB,KAAK,OAAO,QAAQ,GAAG,OAAO,QAAQ,KACtC,KAAK,OAAO,QAAQ;AAExB,UAAM,MAAM,IAAI,IAAI,cAAc,KAAK,WAAW;AAClD,QAAI,WAAW,IAAI,SAAS,WAAW,UAAU,GAAG;AACpD,WAAO,IAAI,SAAS;AAAA,EACtB;AACF;AAEO,IAAM,cAAN,MAAkB;AAAA,EAKvB,YAAY,YAA6D;AAJzE,SAAQ,aAGH,CAAC;AAEJ,eAAW,QAAQ,YAAY;AAC7B,YAAM,CAAC,OAAO,UAAU,IAAI;AAC5B,UAAI,SAAS,MAAM;AACjB,cAAM,IAAI,UAAU,4BAA4B;AAAA,MAClD;AACA,YAAM,YACJ,OAAO,eAAe,WAClB,IAAI,aAAa,UAAU,IAC3B;AACN,UAAI,EAAE,qBAAqB,eAAe;AACxC,cAAM,IAAI,UAAU,mBAAmB;AAAA,MACzC;AACA,WAAK,WAAW,KAAK,EAAE,OAAO,UAAU,CAAC;AAAA,IAC3C;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUA,WAAW,MAAsB;AAC/B,QAAI,MAAM;AACV,UAAM,UAAU,IAAI,IAGjB,KAAK,UAAU;AAClB,QAAI,QAAQ;AACZ,WAAO,OAAO;AACZ,cAAQ;AACR,iBAAW,SAAS,SAAS;AAC3B,cAAM,EAAE,OAAO,UAAU,IAAI;AAC7B,YAAI,iBAAiB,SAAS,MAAM,KAAK,GAAG,IAAI,IAAI,WAAW,KAAK,GAAG;AACrE,gBAAM,UAAU,WAAW,GAAG;AAE9B,kBAAQ,OAAO,KAAK;AACpB,kBAAQ;AACR;AAAA,QACF;AAAA,MACF;AAAA,IACF;AACA,WAAO;AAAA,EACT;AACF;","names":["browserInfo"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=chunk-JEE6C34P.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import {
|
|
2
|
+
__decorateClass
|
|
3
|
+
} from "./chunk-EUXUH3YW.js";
|
|
4
|
+
|
|
5
|
+
// src/mixins/theme.ts
|
|
6
|
+
import { property, state } from "lit/decorators.js";
|
|
7
|
+
function withTheme(Base) {
|
|
8
|
+
class Mixin extends Base {
|
|
9
|
+
constructor() {
|
|
10
|
+
super(...arguments);
|
|
11
|
+
this.theme = "light";
|
|
12
|
+
this.isDark = false;
|
|
13
|
+
this.mediaQueryList = null;
|
|
14
|
+
/**
|
|
15
|
+
* Handle system theme changes
|
|
16
|
+
*
|
|
17
|
+
* @param event - Media query list event
|
|
18
|
+
*/
|
|
19
|
+
this.handleMediaQueryChange = (event) => {
|
|
20
|
+
this.isDark = event.matches;
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
connectedCallback() {
|
|
24
|
+
super.connectedCallback();
|
|
25
|
+
this.updateTheme();
|
|
26
|
+
this.updateHostClass();
|
|
27
|
+
if (this.theme === "auto") {
|
|
28
|
+
this.mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
|
|
29
|
+
this.mediaQueryList.addEventListener(
|
|
30
|
+
"change",
|
|
31
|
+
this.handleMediaQueryChange
|
|
32
|
+
);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
disconnectedCallback() {
|
|
36
|
+
super.disconnectedCallback();
|
|
37
|
+
if (this.mediaQueryList) {
|
|
38
|
+
this.mediaQueryList.removeEventListener(
|
|
39
|
+
"change",
|
|
40
|
+
this.handleMediaQueryChange
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
updated(changedProperties) {
|
|
45
|
+
super.updated(changedProperties);
|
|
46
|
+
if (changedProperties.has("theme")) {
|
|
47
|
+
this.updateTheme();
|
|
48
|
+
if (this.theme === "auto" && !this.mediaQueryList) {
|
|
49
|
+
this.mediaQueryList = window.matchMedia(
|
|
50
|
+
"(prefers-color-scheme: dark)"
|
|
51
|
+
);
|
|
52
|
+
this.mediaQueryList.addEventListener(
|
|
53
|
+
"change",
|
|
54
|
+
this.handleMediaQueryChange
|
|
55
|
+
);
|
|
56
|
+
} else if (this.theme !== "auto" && this.mediaQueryList) {
|
|
57
|
+
this.mediaQueryList.removeEventListener(
|
|
58
|
+
"change",
|
|
59
|
+
this.handleMediaQueryChange
|
|
60
|
+
);
|
|
61
|
+
this.mediaQueryList = null;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
if (changedProperties.has("isDark")) {
|
|
65
|
+
this.updateHostClass();
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
/**
|
|
69
|
+
* Update isDark state based on theme property
|
|
70
|
+
*/
|
|
71
|
+
updateTheme() {
|
|
72
|
+
if (this.theme === "auto") {
|
|
73
|
+
this.isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
74
|
+
} else {
|
|
75
|
+
this.isDark = this.theme === "dark";
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
/**
|
|
79
|
+
* Create the render root with a themed wrapper div
|
|
80
|
+
*/
|
|
81
|
+
createRenderRoot() {
|
|
82
|
+
const root = super.createRenderRoot();
|
|
83
|
+
this.themeRoot = document.createElement("div");
|
|
84
|
+
this.themeRoot.setAttribute("data-theme-root", "");
|
|
85
|
+
root.appendChild(this.themeRoot);
|
|
86
|
+
return this.themeRoot;
|
|
87
|
+
}
|
|
88
|
+
/**
|
|
89
|
+
* Update the host element's class based on isDark state
|
|
90
|
+
*/
|
|
91
|
+
updateHostClass() {
|
|
92
|
+
if (this.isDark) {
|
|
93
|
+
this.themeRoot.classList.add("dark");
|
|
94
|
+
} else {
|
|
95
|
+
this.themeRoot.classList.remove("dark");
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
__decorateClass([
|
|
100
|
+
property({ type: String, reflect: true })
|
|
101
|
+
], Mixin.prototype, "theme", 2);
|
|
102
|
+
__decorateClass([
|
|
103
|
+
state()
|
|
104
|
+
], Mixin.prototype, "isDark", 2);
|
|
105
|
+
return Mixin;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
export {
|
|
109
|
+
withTheme
|
|
110
|
+
};
|
|
111
|
+
//# sourceMappingURL=chunk-LQIOVPBE.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/mixins/theme.ts"],"sourcesContent":["/**\n * Theme Mixin\n *\n * Mixin to add theme detection and management to a Lit component\n */\n\nimport type { LitElement } from 'lit'\nimport { property, state } from 'lit/decorators.js'\n\nexport type Theme = 'light' | 'dark' | 'auto'\n\n/**\n * Mixin to add theme management to a Lit component\n *\n * Provides a `theme` property and `isDark` state that automatically handles:\n * - Manual theme selection ('light' or 'dark')\n * - Auto theme detection based on system preferences\n * - Reactive updates when system theme changes\n * - Automatically wraps all rendered content in a themed div with 'dark' class when dark mode is active\n *\n * All content rendered by the component will be inside a theme-root div that receives the dark class.\n * Components can use render() normally - no changes needed.\n *\n * @typeParam T - The Lit component class being extended\n * @returns Extended class with theme management capabilities\n *\n * @example\n * ```typescript\n * import { LitElement, html } from 'lit';\n * import { customElement } from 'lit/decorators.js';\n * import { withTheme } from '@lukso/core/mixins';\n *\n * @customElement('my-component')\n * export class MyComponent extends withTheme(LitElement) {\n * render() {\n * return html`\n * <div class=\"text-neutral-20 dark:text-neutral-100\">\n * Current theme: ${this.theme}\n * </div>\n * `;\n * }\n * }\n * ```\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function withTheme<T extends typeof LitElement>(Base: T): any {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n class Mixin extends (Base as any) {\n /**\n * Theme mode: 'light', 'dark', or 'auto' (follows system preference)\n */\n @property({ type: String, reflect: true })\n theme: Theme = 'light'\n\n /**\n * Computed state indicating if dark mode is active\n */\n @state()\n protected isDark = false\n\n /**\n * The theme root element that wraps all rendered content and receives the dark class\n */\n private themeRoot!: HTMLDivElement\n\n private mediaQueryList: MediaQueryList | null = null\n\n connectedCallback(): void {\n super.connectedCallback()\n this.updateTheme()\n this.updateHostClass()\n\n // Listen for system theme changes when in 'auto' mode\n if (this.theme === 'auto') {\n this.mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)')\n this.mediaQueryList.addEventListener(\n 'change',\n this.handleMediaQueryChange\n )\n }\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback()\n\n if (this.mediaQueryList) {\n this.mediaQueryList.removeEventListener(\n 'change',\n this.handleMediaQueryChange\n )\n }\n }\n\n updated(changedProperties: Map<string, any>): void {\n super.updated(changedProperties)\n\n // Handle theme changes\n if (changedProperties.has('theme')) {\n this.updateTheme()\n\n // Update media query listener when theme mode changes\n if (this.theme === 'auto' && !this.mediaQueryList) {\n this.mediaQueryList = window.matchMedia(\n '(prefers-color-scheme: dark)'\n )\n this.mediaQueryList.addEventListener(\n 'change',\n this.handleMediaQueryChange\n )\n } else if (this.theme !== 'auto' && this.mediaQueryList) {\n this.mediaQueryList.removeEventListener(\n 'change',\n this.handleMediaQueryChange\n )\n this.mediaQueryList = null\n }\n }\n\n // Update host class when isDark changes\n if (changedProperties.has('isDark')) {\n this.updateHostClass()\n }\n }\n\n /**\n * Handle system theme changes\n *\n * @param event - Media query list event\n */\n private handleMediaQueryChange = (event: MediaQueryListEvent): void => {\n this.isDark = event.matches\n }\n\n /**\n * Update isDark state based on theme property\n */\n protected updateTheme(): void {\n if (this.theme === 'auto') {\n this.isDark = window.matchMedia('(prefers-color-scheme: dark)').matches\n } else {\n this.isDark = this.theme === 'dark'\n }\n }\n\n /**\n * Create the render root with a themed wrapper div\n */\n createRenderRoot(): Element | ShadowRoot {\n const root = super.createRenderRoot()\n\n this.themeRoot = document.createElement('div')\n this.themeRoot.setAttribute('data-theme-root', '')\n\n root.appendChild(this.themeRoot)\n return this.themeRoot\n }\n\n /**\n * Update the host element's class based on isDark state\n */\n private updateHostClass(): void {\n if (this.isDark) {\n this.themeRoot.classList.add('dark')\n } else {\n this.themeRoot.classList.remove('dark')\n }\n }\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return Mixin as any\n}\n"],"mappings":";;;;;AAOA,SAAS,UAAU,aAAa;AAsCzB,SAAS,UAAuC,MAAc;AAAA,EAEnE,MAAM,cAAe,KAAa;AAAA,IAAlC;AAAA;AAKE,mBAAe;AAMf,WAAU,SAAS;AAOnB,WAAQ,iBAAwC;AAgEhD;AAAA;AAAA;AAAA;AAAA;AAAA,WAAQ,yBAAyB,CAAC,UAAqC;AACrE,aAAK,SAAS,MAAM;AAAA,MACtB;AAAA;AAAA,IAhEA,oBAA0B;AACxB,YAAM,kBAAkB;AACxB,WAAK,YAAY;AACjB,WAAK,gBAAgB;AAGrB,UAAI,KAAK,UAAU,QAAQ;AACzB,aAAK,iBAAiB,OAAO,WAAW,8BAA8B;AACtE,aAAK,eAAe;AAAA,UAClB;AAAA,UACA,KAAK;AAAA,QACP;AAAA,MACF;AAAA,IACF;AAAA,IAEA,uBAA6B;AAC3B,YAAM,qBAAqB;AAE3B,UAAI,KAAK,gBAAgB;AACvB,aAAK,eAAe;AAAA,UAClB;AAAA,UACA,KAAK;AAAA,QACP;AAAA,MACF;AAAA,IACF;AAAA,IAEA,QAAQ,mBAA2C;AACjD,YAAM,QAAQ,iBAAiB;AAG/B,UAAI,kBAAkB,IAAI,OAAO,GAAG;AAClC,aAAK,YAAY;AAGjB,YAAI,KAAK,UAAU,UAAU,CAAC,KAAK,gBAAgB;AACjD,eAAK,iBAAiB,OAAO;AAAA,YAC3B;AAAA,UACF;AACA,eAAK,eAAe;AAAA,YAClB;AAAA,YACA,KAAK;AAAA,UACP;AAAA,QACF,WAAW,KAAK,UAAU,UAAU,KAAK,gBAAgB;AACvD,eAAK,eAAe;AAAA,YAClB;AAAA,YACA,KAAK;AAAA,UACP;AACA,eAAK,iBAAiB;AAAA,QACxB;AAAA,MACF;AAGA,UAAI,kBAAkB,IAAI,QAAQ,GAAG;AACnC,aAAK,gBAAgB;AAAA,MACvB;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAcU,cAAoB;AAC5B,UAAI,KAAK,UAAU,QAAQ;AACzB,aAAK,SAAS,OAAO,WAAW,8BAA8B,EAAE;AAAA,MAClE,OAAO;AACL,aAAK,SAAS,KAAK,UAAU;AAAA,MAC/B;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAyC;AACvC,YAAM,OAAO,MAAM,iBAAiB;AAEpC,WAAK,YAAY,SAAS,cAAc,KAAK;AAC7C,WAAK,UAAU,aAAa,mBAAmB,EAAE;AAEjD,WAAK,YAAY,KAAK,SAAS;AAC/B,aAAO,KAAK;AAAA,IACd;AAAA;AAAA;AAAA;AAAA,IAKQ,kBAAwB;AAC9B,UAAI,KAAK,QAAQ;AACf,aAAK,UAAU,UAAU,IAAI,MAAM;AAAA,MACrC,OAAO;AACL,aAAK,UAAU,UAAU,OAAO,MAAM;AAAA,MACxC;AAAA,IACF;AAAA,EACF;AAnHE;AAAA,IADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,KAJrC,MAKJ;AAMU;AAAA,IADT,MAAM;AAAA,KAVH,MAWM;AAgHZ,SAAO;AACT;","names":[]}
|