@lukso/core 1.2.3-dev.a07a66f → 1.2.3
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/dist/chains/index.cjs +1 -0
- package/dist/chains/index.cjs.map +1 -1
- package/dist/chains/index.js +1 -0
- package/dist/chunk-EUXUH3YW.js +15 -0
- package/dist/chunk-EUXUH3YW.js.map +1 -0
- package/dist/{chunk-3YCEEP5K.cjs → chunk-GBVTZLYF.cjs} +14 -33
- package/dist/chunk-GBVTZLYF.cjs.map +1 -0
- package/dist/{chunk-EHAHY6ZW.js → chunk-O2MNO3WV.js} +13 -32
- package/dist/chunk-O2MNO3WV.js.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 +3 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +2 -1
- 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 +3 -2
- package/dist/mixins/index.cjs.map +1 -1
- package/dist/mixins/index.js +2 -1
- 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 +3 -2
- package/dist/mixins/theme.cjs.map +1 -1
- package/dist/mixins/theme.js +2 -1
- 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 +1 -0
- package/dist/utils/index.cjs.map +1 -1
- package/dist/utils/index.js +1 -0
- package/package.json +4 -4
- package/src/mixins/theme.ts +4 -26
- package/dist/chunk-3YCEEP5K.cjs.map +0 -1
- package/dist/chunk-EHAHY6ZW.js.map +0 -1
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,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 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -1,17 +1,15 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true})
|
|
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');
|
|
2
7
|
function withTheme(Base) {
|
|
3
8
|
class Mixin extends Base {
|
|
4
9
|
constructor() {
|
|
5
10
|
super(...arguments);
|
|
6
|
-
/**
|
|
7
|
-
* Theme mode: 'light', 'dark', or 'auto' (follows system preference)
|
|
8
|
-
*/
|
|
9
11
|
this.theme = "light";
|
|
10
|
-
|
|
11
|
-
* Computed state indicating if dark mode is active
|
|
12
|
-
* Private backing field for isDark property
|
|
13
|
-
*/
|
|
14
|
-
this._isDark = false;
|
|
12
|
+
this.isDark = false;
|
|
15
13
|
this.mediaQueryList = null;
|
|
16
14
|
/**
|
|
17
15
|
* Handle system theme changes
|
|
@@ -22,29 +20,6 @@ function withTheme(Base) {
|
|
|
22
20
|
this.isDark = event.matches;
|
|
23
21
|
};
|
|
24
22
|
}
|
|
25
|
-
static {
|
|
26
|
-
/**
|
|
27
|
-
* Define reactive properties manually without decorators
|
|
28
|
-
* This avoids issues with experimental decorators in mixins
|
|
29
|
-
*/
|
|
30
|
-
this.properties = {
|
|
31
|
-
theme: { type: String, reflect: true },
|
|
32
|
-
...Base.properties
|
|
33
|
-
};
|
|
34
|
-
}
|
|
35
|
-
/**
|
|
36
|
-
* Public getter/setter for isDark that triggers updates
|
|
37
|
-
*/
|
|
38
|
-
get isDark() {
|
|
39
|
-
return this._isDark;
|
|
40
|
-
}
|
|
41
|
-
set isDark(value) {
|
|
42
|
-
const oldValue = this._isDark;
|
|
43
|
-
this._isDark = value;
|
|
44
|
-
if (oldValue !== value) {
|
|
45
|
-
this.requestUpdate("isDark", oldValue);
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
23
|
connectedCallback() {
|
|
49
24
|
super.connectedCallback();
|
|
50
25
|
this.updateTheme();
|
|
@@ -123,10 +98,16 @@ function withTheme(Base) {
|
|
|
123
98
|
}
|
|
124
99
|
}
|
|
125
100
|
}
|
|
101
|
+
_chunkZBDE64SDcjs.__decorateClass.call(void 0, [
|
|
102
|
+
_decoratorsjs.property.call(void 0, { type: String, reflect: true })
|
|
103
|
+
], Mixin.prototype, "theme", 2);
|
|
104
|
+
_chunkZBDE64SDcjs.__decorateClass.call(void 0, [
|
|
105
|
+
_decoratorsjs.state.call(void 0, )
|
|
106
|
+
], Mixin.prototype, "isDark", 2);
|
|
126
107
|
return Mixin;
|
|
127
108
|
}
|
|
128
109
|
|
|
129
110
|
|
|
130
111
|
|
|
131
112
|
exports.withTheme = withTheme;
|
|
132
|
-
//# sourceMappingURL=chunk-
|
|
113
|
+
//# sourceMappingURL=chunk-GBVTZLYF.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/chunk-GBVTZLYF.cjs","../src/mixins/theme.ts"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACA;ACGA,iDAAgC;AAsDzB,SAAS,SAAA,CACd,IAAA,EAC0B;AAAA,EAE1B,MAAM,MAAA,QAAe,KAAa;AAAA,IAAlC,WAAA,CAAA,EAAA;AAAA,MAAA,KAAA,CAAA,GAAA,SAAA,CAAA;AAKE,MAAA,IAAA,CAAA,MAAA,EAAe,OAAA;AAMf,MAAA,IAAA,CAAU,OAAA,EAAS,KAAA;AAOnB,MAAA,IAAA,CAAQ,eAAA,EAAwC,IAAA;AAgEhD;AAAA;AAAA;AAAA;AAAA;AAAA,MAAA,IAAA,CAAQ,uBAAA,EAAyB,CAAC,KAAA,EAAA,GAAqC;AACrE,QAAA,IAAA,CAAK,OAAA,EAAS,KAAA,CAAM,OAAA;AAAA,MACtB,CAAA;AAAA,IAAA;AAAA,IAhEA,iBAAA,CAAA,EAA0B;AACxB,MAAA,KAAA,CAAM,iBAAA,CAAkB,CAAA;AACxB,MAAA,IAAA,CAAK,WAAA,CAAY,CAAA;AACjB,MAAA,IAAA,CAAK,eAAA,CAAgB,CAAA;AAGrB,MAAA,GAAA,CAAI,IAAA,CAAK,MAAA,IAAU,MAAA,EAAQ;AACzB,QAAA,IAAA,CAAK,eAAA,EAAiB,MAAA,CAAO,UAAA,CAAW,8BAA8B,CAAA;AACtE,QAAA,IAAA,CAAK,cAAA,CAAe,gBAAA;AAAA,UAClB,QAAA;AAAA,UACA,IAAA,CAAK;AAAA,QACP,CAAA;AAAA,MACF;AAAA,IACF;AAAA,IAEA,oBAAA,CAAA,EAA6B;AAC3B,MAAA,KAAA,CAAM,oBAAA,CAAqB,CAAA;AAE3B,MAAA,GAAA,CAAI,IAAA,CAAK,cAAA,EAAgB;AACvB,QAAA,IAAA,CAAK,cAAA,CAAe,mBAAA;AAAA,UAClB,QAAA;AAAA,UACA,IAAA,CAAK;AAAA,QACP,CAAA;AAAA,MACF;AAAA,IACF;AAAA,IAEA,OAAA,CAAQ,iBAAA,EAA2C;AACjD,MAAA,KAAA,CAAM,OAAA,CAAQ,iBAAiB,CAAA;AAG/B,MAAA,GAAA,CAAI,iBAAA,CAAkB,GAAA,CAAI,OAAO,CAAA,EAAG;AAClC,QAAA,IAAA,CAAK,WAAA,CAAY,CAAA;AAGjB,QAAA,GAAA,CAAI,IAAA,CAAK,MAAA,IAAU,OAAA,GAAU,CAAC,IAAA,CAAK,cAAA,EAAgB;AACjD,UAAA,IAAA,CAAK,eAAA,EAAiB,MAAA,CAAO,UAAA;AAAA,YAC3B;AAAA,UACF,CAAA;AACA,UAAA,IAAA,CAAK,cAAA,CAAe,gBAAA;AAAA,YAClB,QAAA;AAAA,YACA,IAAA,CAAK;AAAA,UACP,CAAA;AAAA,QACF,EAAA,KAAA,GAAA,CAAW,IAAA,CAAK,MAAA,IAAU,OAAA,GAAU,IAAA,CAAK,cAAA,EAAgB;AACvD,UAAA,IAAA,CAAK,cAAA,CAAe,mBAAA;AAAA,YAClB,QAAA;AAAA,YACA,IAAA,CAAK;AAAA,UACP,CAAA;AACA,UAAA,IAAA,CAAK,eAAA,EAAiB,IAAA;AAAA,QACxB;AAAA,MACF;AAGA,MAAA,GAAA,CAAI,iBAAA,CAAkB,GAAA,CAAI,QAAQ,CAAA,EAAG;AACnC,QAAA,IAAA,CAAK,eAAA,CAAgB,CAAA;AAAA,MACvB;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAcU,WAAA,CAAA,EAAoB;AAC5B,MAAA,GAAA,CAAI,IAAA,CAAK,MAAA,IAAU,MAAA,EAAQ;AACzB,QAAA,IAAA,CAAK,OAAA,EAAS,MAAA,CAAO,UAAA,CAAW,8BAA8B,CAAA,CAAE,OAAA;AAAA,MAClE,EAAA,KAAO;AACL,QAAA,IAAA,CAAK,OAAA,EAAS,IAAA,CAAK,MAAA,IAAU,MAAA;AAAA,MAC/B;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA,CAAA,EAAyC;AACvC,MAAA,MAAM,KAAA,EAAO,KAAA,CAAM,gBAAA,CAAiB,CAAA;AAEpC,MAAA,IAAA,CAAK,UAAA,EAAY,QAAA,CAAS,aAAA,CAAc,KAAK,CAAA;AAC7C,MAAA,IAAA,CAAK,SAAA,CAAU,YAAA,CAAa,iBAAA,EAAmB,EAAE,CAAA;AAEjD,MAAA,IAAA,CAAK,WAAA,CAAY,IAAA,CAAK,SAAS,CAAA;AAC/B,MAAA,OAAO,IAAA,CAAK,SAAA;AAAA,IACd;AAAA;AAAA;AAAA;AAAA,IAKQ,eAAA,CAAA,EAAwB;AAC9B,MAAA,GAAA,CAAI,IAAA,CAAK,MAAA,EAAQ;AACf,QAAA,IAAA,CAAK,SAAA,CAAU,GAAA,CAAI,MAAM,CAAA;AACzB,QAAA,IAAA,CAAK,SAAA,CAAU,SAAA,CAAU,GAAA,CAAI,MAAM,CAAA;AAAA,MACrC,EAAA,KAAO;AACL,QAAA,IAAA,CAAK,SAAA,CAAU,MAAA,CAAO,MAAM,CAAA;AAC5B,QAAA,IAAA,CAAK,SAAA,CAAU,SAAA,CAAU,MAAA,CAAO,MAAM,CAAA;AAAA,MACxC;AAAA,IACF;AAAA,EACF;AArHE,EAAA,+CAAA;AAAA,IADC,oCAAA,EAAW,IAAA,EAAM,MAAA,EAAQ,OAAA,EAAS,KAAK,CAAC;AAAA,EAAA,CAAA,EAJrC,KAAA,CAKJ,SAAA,EAAA,OAAA,EAAA,CAAA,CAAA;AAMU,EAAA,+CAAA;AAAA,IADT,iCAAA;AAAM,EAAA,CAAA,EAVH,KAAA,CAWM,SAAA,EAAA,QAAA,EAAA,CAAA,CAAA;AAiHZ,EAAA,OAAO,KAAA;AACT;ADlFA;AACA;AACE;AACF,8BAAC","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/chunk-GBVTZLYF.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 * Interface for components that have theme management capabilities\n */\nexport interface ThemeMixin {\n theme: Theme\n isDark: boolean\n updateTheme(): void\n}\n\n/**\n * Type helper for the constructor returned by withTheme\n */\nexport type ThemeMixinConstructor<T extends typeof LitElement> = (new (\n ...args: any[]\n) => InstanceType<T> & ThemeMixin) &\n T\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 */\nexport function withTheme<T extends typeof LitElement>(\n Base: T\n): ThemeMixinConstructor<T> {\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 and theme root's class based on isDark state\n */\n private updateHostClass(): void {\n if (this.isDark) {\n this.classList.add('dark')\n this.themeRoot.classList.add('dark')\n } else {\n this.classList.remove('dark')\n this.themeRoot.classList.remove('dark')\n }\n }\n }\n\n return Mixin as unknown as ThemeMixinConstructor<T>\n}\n"]}
|
|
@@ -1,17 +1,15 @@
|
|
|
1
|
+
import {
|
|
2
|
+
__decorateClass
|
|
3
|
+
} from "./chunk-EUXUH3YW.js";
|
|
4
|
+
|
|
1
5
|
// src/mixins/theme.ts
|
|
6
|
+
import { property, state } from "lit/decorators.js";
|
|
2
7
|
function withTheme(Base) {
|
|
3
8
|
class Mixin extends Base {
|
|
4
9
|
constructor() {
|
|
5
10
|
super(...arguments);
|
|
6
|
-
/**
|
|
7
|
-
* Theme mode: 'light', 'dark', or 'auto' (follows system preference)
|
|
8
|
-
*/
|
|
9
11
|
this.theme = "light";
|
|
10
|
-
|
|
11
|
-
* Computed state indicating if dark mode is active
|
|
12
|
-
* Private backing field for isDark property
|
|
13
|
-
*/
|
|
14
|
-
this._isDark = false;
|
|
12
|
+
this.isDark = false;
|
|
15
13
|
this.mediaQueryList = null;
|
|
16
14
|
/**
|
|
17
15
|
* Handle system theme changes
|
|
@@ -22,29 +20,6 @@ function withTheme(Base) {
|
|
|
22
20
|
this.isDark = event.matches;
|
|
23
21
|
};
|
|
24
22
|
}
|
|
25
|
-
static {
|
|
26
|
-
/**
|
|
27
|
-
* Define reactive properties manually without decorators
|
|
28
|
-
* This avoids issues with experimental decorators in mixins
|
|
29
|
-
*/
|
|
30
|
-
this.properties = {
|
|
31
|
-
theme: { type: String, reflect: true },
|
|
32
|
-
...Base.properties
|
|
33
|
-
};
|
|
34
|
-
}
|
|
35
|
-
/**
|
|
36
|
-
* Public getter/setter for isDark that triggers updates
|
|
37
|
-
*/
|
|
38
|
-
get isDark() {
|
|
39
|
-
return this._isDark;
|
|
40
|
-
}
|
|
41
|
-
set isDark(value) {
|
|
42
|
-
const oldValue = this._isDark;
|
|
43
|
-
this._isDark = value;
|
|
44
|
-
if (oldValue !== value) {
|
|
45
|
-
this.requestUpdate("isDark", oldValue);
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
23
|
connectedCallback() {
|
|
49
24
|
super.connectedCallback();
|
|
50
25
|
this.updateTheme();
|
|
@@ -123,10 +98,16 @@ function withTheme(Base) {
|
|
|
123
98
|
}
|
|
124
99
|
}
|
|
125
100
|
}
|
|
101
|
+
__decorateClass([
|
|
102
|
+
property({ type: String, reflect: true })
|
|
103
|
+
], Mixin.prototype, "theme", 2);
|
|
104
|
+
__decorateClass([
|
|
105
|
+
state()
|
|
106
|
+
], Mixin.prototype, "isDark", 2);
|
|
126
107
|
return Mixin;
|
|
127
108
|
}
|
|
128
109
|
|
|
129
110
|
export {
|
|
130
111
|
withTheme
|
|
131
112
|
};
|
|
132
|
-
//# sourceMappingURL=chunk-
|
|
113
|
+
//# sourceMappingURL=chunk-O2MNO3WV.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 * Interface for components that have theme management capabilities\n */\nexport interface ThemeMixin {\n theme: Theme\n isDark: boolean\n updateTheme(): void\n}\n\n/**\n * Type helper for the constructor returned by withTheme\n */\nexport type ThemeMixinConstructor<T extends typeof LitElement> = (new (\n ...args: any[]\n) => InstanceType<T> & ThemeMixin) &\n T\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 */\nexport function withTheme<T extends typeof LitElement>(\n Base: T\n): ThemeMixinConstructor<T> {\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 and theme root's class based on isDark state\n */\n private updateHostClass(): void {\n if (this.isDark) {\n this.classList.add('dark')\n this.themeRoot.classList.add('dark')\n } else {\n this.classList.remove('dark')\n this.themeRoot.classList.remove('dark')\n }\n }\n }\n\n return Mixin as unknown as ThemeMixinConstructor<T>\n}\n"],"mappings":";;;;;AAOA,SAAS,UAAU,aAAa;AAsDzB,SAAS,UACd,MAC0B;AAAA,EAE1B,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,IAAI,MAAM;AACzB,aAAK,UAAU,UAAU,IAAI,MAAM;AAAA,MACrC,OAAO;AACL,aAAK,UAAU,OAAO,MAAM;AAC5B,aAAK,UAAU,UAAU,OAAO,MAAM;AAAA,MACxC;AAAA,IACF;AAAA,EACF;AArHE;AAAA,IADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,KAJrC,MAKJ;AAMU;AAAA,IADT,MAAM;AAAA,KAVH,MAWM;AAiHZ,SAAO;AACT;","names":[]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});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
|
+
|
|
13
|
+
|
|
14
|
+
exports.__decorateClass = __decorateClass;
|
|
15
|
+
//# sourceMappingURL=chunk-ZBDE64SD.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/chunk-ZBDE64SD.cjs"],"names":[],"mappings":"AAAA,6EAAI,UAAU,EAAE,MAAM,CAAC,cAAc;AACrC,IAAI,iBAAiB,EAAE,MAAM,CAAC,wBAAwB;AACtD,IAAI,gBAAgB,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG;AACzD,EAAE,IAAI,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE,MAAM;AAChF,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,UAAU,CAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE,GAAG,CAAC,EAAE,CAAC,EAAE;AAC5D,IAAI,GAAG,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC;AACjC,MAAM,OAAO,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,SAAS,CAAC,MAAM,CAAC,EAAE,GAAG,MAAM;AACpF,EAAE,GAAG,CAAC,KAAK,GAAG,MAAM,EAAE,SAAS,CAAC,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC;AACpD,EAAE,OAAO,MAAM;AACf,CAAC;AACD;AACA;AACE;AACF,0CAAC","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/chunk-ZBDE64SD.cjs"}
|
package/dist/config.cjs
CHANGED
package/dist/config.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/config.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACA;AACF,sOAAC","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/config.cjs"}
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/config.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACF,wDAA6B;AAC7B,gCAA6B;AAC7B;AACE;AACA;AACA;AACF,sOAAC","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/config.cjs"}
|
package/dist/config.js
CHANGED
package/dist/index.cjs
CHANGED
|
@@ -33,10 +33,11 @@ var _chunkKPIUNN26cjs = require('./chunk-KPIUNN26.cjs');
|
|
|
33
33
|
var _chunkIDQ6WJY5cjs = require('./chunk-IDQ6WJY5.cjs');
|
|
34
34
|
|
|
35
35
|
|
|
36
|
-
var
|
|
36
|
+
var _chunkGBVTZLYFcjs = require('./chunk-GBVTZLYF.cjs');
|
|
37
37
|
|
|
38
38
|
|
|
39
39
|
var _chunkNJQVWIZLcjs = require('./chunk-NJQVWIZL.cjs');
|
|
40
|
+
require('./chunk-ZBDE64SD.cjs');
|
|
40
41
|
|
|
41
42
|
|
|
42
43
|
|
|
@@ -59,5 +60,5 @@ var _chunkNJQVWIZLcjs = require('./chunk-NJQVWIZL.cjs');
|
|
|
59
60
|
|
|
60
61
|
|
|
61
62
|
|
|
62
|
-
exports.EXTENSION_STORE_LINKS = _chunkQU6NUTY6cjs.EXTENSION_STORE_LINKS; exports.GRAPHQL_ENDPOINT_MAINNET = _chunkLUT5BHYLcjs.GRAPHQL_ENDPOINT_MAINNET; exports.GRAPHQL_ENDPOINT_TESTNET = _chunkLUT5BHYLcjs.GRAPHQL_ENDPOINT_TESTNET; exports.LUKSO_CHAINS_BY_ID = _chunkMCNNULYXcjs.LUKSO_CHAINS_BY_ID; exports.SUPPORTED_NETWORK_IDS = _chunkLUT5BHYLcjs.SUPPORTED_NETWORK_IDS; exports.UrlConverter = _chunkQU6NUTY6cjs.UrlConverter; exports.UrlResolver = _chunkQU6NUTY6cjs.UrlResolver; exports.browserInfo = _chunkQU6NUTY6cjs.browserInfo; exports.clearIntlService = _chunkIDQ6WJY5cjs.clearIntlService; exports.createIntlService = _chunkIDQ6WJY5cjs.createIntlService; exports.defaultConfig = _chunkIDQ6WJY5cjs.defaultConfig; exports.deviceService = _chunkNJQVWIZLcjs.deviceService; exports.getChainById = _chunkMCNNULYXcjs.getChainById; exports.getIntlService = _chunkIDQ6WJY5cjs.getIntlService; exports.luksoMainnet = _chunkMCNNULYXcjs.luksoMainnet; exports.luksoTestnet = _chunkMCNNULYXcjs.luksoTestnet; exports.setIntlService = _chunkIDQ6WJY5cjs.setIntlService; exports.slug = _chunkQU6NUTY6cjs.slug; exports.withDeviceService = _chunkUQSIH233cjs.withDeviceService; exports.withIntlService = _chunkKPIUNN26cjs.withIntlService; exports.withTheme =
|
|
63
|
+
exports.EXTENSION_STORE_LINKS = _chunkQU6NUTY6cjs.EXTENSION_STORE_LINKS; exports.GRAPHQL_ENDPOINT_MAINNET = _chunkLUT5BHYLcjs.GRAPHQL_ENDPOINT_MAINNET; exports.GRAPHQL_ENDPOINT_TESTNET = _chunkLUT5BHYLcjs.GRAPHQL_ENDPOINT_TESTNET; exports.LUKSO_CHAINS_BY_ID = _chunkMCNNULYXcjs.LUKSO_CHAINS_BY_ID; exports.SUPPORTED_NETWORK_IDS = _chunkLUT5BHYLcjs.SUPPORTED_NETWORK_IDS; exports.UrlConverter = _chunkQU6NUTY6cjs.UrlConverter; exports.UrlResolver = _chunkQU6NUTY6cjs.UrlResolver; exports.browserInfo = _chunkQU6NUTY6cjs.browserInfo; exports.clearIntlService = _chunkIDQ6WJY5cjs.clearIntlService; exports.createIntlService = _chunkIDQ6WJY5cjs.createIntlService; exports.defaultConfig = _chunkIDQ6WJY5cjs.defaultConfig; exports.deviceService = _chunkNJQVWIZLcjs.deviceService; exports.getChainById = _chunkMCNNULYXcjs.getChainById; exports.getIntlService = _chunkIDQ6WJY5cjs.getIntlService; exports.luksoMainnet = _chunkMCNNULYXcjs.luksoMainnet; exports.luksoTestnet = _chunkMCNNULYXcjs.luksoTestnet; exports.setIntlService = _chunkIDQ6WJY5cjs.setIntlService; exports.slug = _chunkQU6NUTY6cjs.slug; exports.withDeviceService = _chunkUQSIH233cjs.withDeviceService; exports.withIntlService = _chunkKPIUNN26cjs.withIntlService; exports.withTheme = _chunkGBVTZLYFcjs.withTheme;
|
|
63
64
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/index.cjs"],"names":[],"mappings":"AAAA,yGAA6B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACA;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACA;AACF,wDAA6B;AAC7B,gCAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF,svCAAC","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/index.cjs"}
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/index.cjs"],"names":[],"mappings":"AAAA,yGAA6B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACA;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACA;AACF,wDAA6B;AAC7B,gCAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B,gCAA6B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF,svCAAC","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/index.cjs"}
|
package/dist/index.js
CHANGED
|
@@ -33,10 +33,11 @@ import {
|
|
|
33
33
|
} from "./chunk-HTK4HH4J.js";
|
|
34
34
|
import {
|
|
35
35
|
withTheme
|
|
36
|
-
} from "./chunk-
|
|
36
|
+
} from "./chunk-O2MNO3WV.js";
|
|
37
37
|
import {
|
|
38
38
|
deviceService
|
|
39
39
|
} from "./chunk-X2QNFZU7.js";
|
|
40
|
+
import "./chunk-EUXUH3YW.js";
|
|
40
41
|
export {
|
|
41
42
|
EXTENSION_STORE_LINKS,
|
|
42
43
|
GRAPHQL_ENDPOINT_MAINNET,
|
package/dist/mixins/device.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/mixins/device.cjs"],"names":[],"mappings":"AAAA;AACE;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACF,gEAAC","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/mixins/device.cjs"}
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/mixins/device.cjs"],"names":[],"mappings":"AAAA;AACE;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACF,gEAAC","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/mixins/device.cjs"}
|
package/dist/mixins/device.js
CHANGED
package/dist/mixins/index.cjs
CHANGED
|
@@ -8,11 +8,12 @@ var _chunkKPIUNN26cjs = require('../chunk-KPIUNN26.cjs');
|
|
|
8
8
|
require('../chunk-IDQ6WJY5.cjs');
|
|
9
9
|
|
|
10
10
|
|
|
11
|
-
var
|
|
11
|
+
var _chunkGBVTZLYFcjs = require('../chunk-GBVTZLYF.cjs');
|
|
12
12
|
require('../chunk-NJQVWIZL.cjs');
|
|
13
|
+
require('../chunk-ZBDE64SD.cjs');
|
|
13
14
|
|
|
14
15
|
|
|
15
16
|
|
|
16
17
|
|
|
17
|
-
exports.withDeviceService = _chunkUQSIH233cjs.withDeviceService; exports.withIntlService = _chunkKPIUNN26cjs.withIntlService; exports.withTheme =
|
|
18
|
+
exports.withDeviceService = _chunkUQSIH233cjs.withDeviceService; exports.withIntlService = _chunkKPIUNN26cjs.withIntlService; exports.withTheme = _chunkGBVTZLYFcjs.withTheme;
|
|
18
19
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/mixins/index.cjs"],"names":[],"mappings":"AAAA,0GAA8B;AAC9B;AACE;AACF,yDAA8B;AAC9B;AACE;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACA;AACA;AACF,8KAAC","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/mixins/index.cjs"}
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/mixins/index.cjs"],"names":[],"mappings":"AAAA,0GAA8B;AAC9B;AACE;AACF,yDAA8B;AAC9B;AACE;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACA;AACA;AACF,8KAAC","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/mixins/index.cjs"}
|
package/dist/mixins/index.js
CHANGED
package/dist/mixins/intl.cjs
CHANGED
package/dist/mixins/intl.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/mixins/intl.cjs"],"names":[],"mappings":"AAAA;AACE;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACF,4DAAC","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/mixins/intl.cjs"}
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/mixins/intl.cjs"],"names":[],"mappings":"AAAA;AACE;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACF,4DAAC","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/mixins/intl.cjs"}
|
package/dist/mixins/intl.js
CHANGED
package/dist/mixins/theme.cjs
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunkGBVTZLYFcjs = require('../chunk-GBVTZLYF.cjs');
|
|
4
|
+
require('../chunk-ZBDE64SD.cjs');
|
|
4
5
|
|
|
5
6
|
|
|
6
|
-
exports.withTheme =
|
|
7
|
+
exports.withTheme = _chunkGBVTZLYFcjs.withTheme;
|
|
7
8
|
//# sourceMappingURL=theme.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/mixins/theme.cjs"],"names":[],"mappings":"AAAA;AACE;AACF,yDAA8B;AAC9B;AACE;AACF,gDAAC","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/mixins/theme.cjs"}
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/mixins/theme.cjs"],"names":[],"mappings":"AAAA;AACE;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACF,gDAAC","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/mixins/theme.cjs"}
|
package/dist/mixins/theme.js
CHANGED
package/dist/services/device.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/services/device.cjs"],"names":[],"mappings":"AAAA;AACE;AACF,yDAA8B;AAC9B;AACE;AACF,wDAAC","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/services/device.cjs"}
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/services/device.cjs"],"names":[],"mappings":"AAAA;AACE;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACF,wDAAC","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/services/device.cjs"}
|
package/dist/services/device.js
CHANGED
package/dist/services/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/services/index.cjs"],"names":[],"mappings":"AAAA,0GAA8B;AAC9B;AACE;AACA;AACA;AACA;AACA;AACF,yDAA8B;AAC9B;AACE;AACF,yDAA8B;AAC9B;AACE;AACA;AACA;AACA;AACA;AACA;AACF,uWAAC","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/services/index.cjs"}
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/services/index.cjs"],"names":[],"mappings":"AAAA,0GAA8B;AAC9B;AACE;AACA;AACA;AACA;AACA;AACF,yDAA8B;AAC9B;AACE;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACA;AACA;AACA;AACA;AACA;AACF,uWAAC","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/services/index.cjs"}
|
package/dist/services/index.js
CHANGED
package/dist/services/intl.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/services/intl.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACA;AACA;AACF,yDAA8B;AAC9B;AACE;AACA;AACA;AACA;AACA;AACF,8SAAC","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/services/intl.cjs"}
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/services/intl.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACA;AACA;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACA;AACA;AACA;AACA;AACF,8SAAC","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/services/intl.cjs"}
|
package/dist/services/intl.js
CHANGED
package/dist/utils/index.cjs
CHANGED
package/dist/utils/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/utils/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACA;AACA;AACF,yDAA8B;AAC9B;AACE;AACA;AACA;AACA;AACA;AACF,gRAAC","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/utils/index.cjs"}
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/utils/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACA;AACA;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACA;AACA;AACA;AACA;AACF,gRAAC","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/utils/index.cjs"}
|
package/dist/utils/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lukso/core",
|
|
3
|
-
"version": "1.2.3
|
|
3
|
+
"version": "1.2.3",
|
|
4
4
|
"description": "Core utilities, services, and mixins for LUKSO web components and applications",
|
|
5
5
|
"main": "./dist/index.cjs",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -88,9 +88,9 @@
|
|
|
88
88
|
"url": "https://github.com/lukso-network/up-connector.git"
|
|
89
89
|
},
|
|
90
90
|
"dependencies": {
|
|
91
|
-
"@formatjs/intl": "^4.0.
|
|
91
|
+
"@formatjs/intl": "^4.0.2",
|
|
92
92
|
"@preact/signals-core": "^1.12.1",
|
|
93
|
-
"lit": "3.3.1",
|
|
93
|
+
"lit": "^3.3.1",
|
|
94
94
|
"ua-parser-js": "^2.0.7"
|
|
95
95
|
},
|
|
96
96
|
"peerDependencies": {
|
|
@@ -104,7 +104,7 @@
|
|
|
104
104
|
"devDependencies": {
|
|
105
105
|
"tsup": "^8.5.1",
|
|
106
106
|
"typescript": "^5.9.3",
|
|
107
|
-
"viem": "^2.43.
|
|
107
|
+
"viem": "^2.43.1",
|
|
108
108
|
"vitest": "^4.0.16"
|
|
109
109
|
},
|
|
110
110
|
"tsup": {
|
package/src/mixins/theme.ts
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
7
|
import type { LitElement } from 'lit'
|
|
8
|
+
import { property, state } from 'lit/decorators.js'
|
|
8
9
|
|
|
9
10
|
export type Theme = 'light' | 'dark' | 'auto'
|
|
10
11
|
|
|
@@ -63,40 +64,17 @@ export function withTheme<T extends typeof LitElement>(
|
|
|
63
64
|
): ThemeMixinConstructor<T> {
|
|
64
65
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
65
66
|
class Mixin extends (Base as any) {
|
|
66
|
-
/**
|
|
67
|
-
* Define reactive properties manually without decorators
|
|
68
|
-
* This avoids issues with experimental decorators in mixins
|
|
69
|
-
*/
|
|
70
|
-
static properties = {
|
|
71
|
-
theme: { type: String, reflect: true },
|
|
72
|
-
...Base.properties,
|
|
73
|
-
}
|
|
74
|
-
|
|
75
67
|
/**
|
|
76
68
|
* Theme mode: 'light', 'dark', or 'auto' (follows system preference)
|
|
77
69
|
*/
|
|
70
|
+
@property({ type: String, reflect: true })
|
|
78
71
|
theme: Theme = 'light'
|
|
79
72
|
|
|
80
73
|
/**
|
|
81
74
|
* Computed state indicating if dark mode is active
|
|
82
|
-
* Private backing field for isDark property
|
|
83
75
|
*/
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
/**
|
|
87
|
-
* Public getter/setter for isDark that triggers updates
|
|
88
|
-
*/
|
|
89
|
-
protected get isDark(): boolean {
|
|
90
|
-
return this._isDark
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
protected set isDark(value: boolean) {
|
|
94
|
-
const oldValue = this._isDark
|
|
95
|
-
this._isDark = value
|
|
96
|
-
if (oldValue !== value) {
|
|
97
|
-
this.requestUpdate('isDark', oldValue)
|
|
98
|
-
}
|
|
99
|
-
}
|
|
76
|
+
@state()
|
|
77
|
+
protected isDark = false
|
|
100
78
|
|
|
101
79
|
/**
|
|
102
80
|
* The theme root element that wraps all rendered content and receives the dark class
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/chunk-3YCEEP5K.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-3YCEEP5K.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'\n\nexport type Theme = 'light' | 'dark' | 'auto'\n\n/**\n * Interface for components that have theme management capabilities\n */\nexport interface ThemeMixin {\n theme: Theme\n isDark: boolean\n updateTheme(): void\n}\n\n/**\n * Type helper for the constructor returned by withTheme\n */\nexport type ThemeMixinConstructor<T extends typeof LitElement> = (new (\n ...args: any[]\n) => InstanceType<T> & ThemeMixin) &\n T\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 */\nexport function withTheme<T extends typeof LitElement>(\n Base: T\n): ThemeMixinConstructor<T> {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n class Mixin extends (Base as any) {\n /**\n * Define reactive properties manually without decorators\n * This avoids issues with experimental decorators in mixins\n */\n static properties = {\n theme: { type: String, reflect: true },\n ...Base.properties,\n }\n\n /**\n * Theme mode: 'light', 'dark', or 'auto' (follows system preference)\n */\n theme: Theme = 'light'\n\n /**\n * Computed state indicating if dark mode is active\n * Private backing field for isDark property\n */\n private _isDark = false\n\n /**\n * Public getter/setter for isDark that triggers updates\n */\n protected get isDark(): boolean {\n return this._isDark\n }\n\n protected set isDark(value: boolean) {\n const oldValue = this._isDark\n this._isDark = value\n if (oldValue !== value) {\n this.requestUpdate('isDark', oldValue)\n }\n }\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 and theme root's class based on isDark state\n */\n private updateHostClass(): void {\n if (this.isDark) {\n this.classList.add('dark')\n this.themeRoot.classList.add('dark')\n } else {\n this.classList.remove('dark')\n this.themeRoot.classList.remove('dark')\n }\n }\n }\n\n return Mixin as unknown as ThemeMixinConstructor<T>\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
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'\n\nexport type Theme = 'light' | 'dark' | 'auto'\n\n/**\n * Interface for components that have theme management capabilities\n */\nexport interface ThemeMixin {\n theme: Theme\n isDark: boolean\n updateTheme(): void\n}\n\n/**\n * Type helper for the constructor returned by withTheme\n */\nexport type ThemeMixinConstructor<T extends typeof LitElement> = (new (\n ...args: any[]\n) => InstanceType<T> & ThemeMixin) &\n T\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 */\nexport function withTheme<T extends typeof LitElement>(\n Base: T\n): ThemeMixinConstructor<T> {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n class Mixin extends (Base as any) {\n /**\n * Define reactive properties manually without decorators\n * This avoids issues with experimental decorators in mixins\n */\n static properties = {\n theme: { type: String, reflect: true },\n ...Base.properties,\n }\n\n /**\n * Theme mode: 'light', 'dark', or 'auto' (follows system preference)\n */\n theme: Theme = 'light'\n\n /**\n * Computed state indicating if dark mode is active\n * Private backing field for isDark property\n */\n private _isDark = false\n\n /**\n * Public getter/setter for isDark that triggers updates\n */\n protected get isDark(): boolean {\n return this._isDark\n }\n\n protected set isDark(value: boolean) {\n const oldValue = this._isDark\n this._isDark = value\n if (oldValue !== value) {\n this.requestUpdate('isDark', oldValue)\n }\n }\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 and theme root's class based on isDark state\n */\n private updateHostClass(): void {\n if (this.isDark) {\n this.classList.add('dark')\n this.themeRoot.classList.add('dark')\n } else {\n this.classList.remove('dark')\n this.themeRoot.classList.remove('dark')\n }\n }\n }\n\n return Mixin as unknown as ThemeMixinConstructor<T>\n}\n"],"mappings":";AA4DO,SAAS,UACd,MAC0B;AAAA,EAE1B,MAAM,cAAe,KAAa;AAAA,IAAlC;AAAA;AAaE;AAAA;AAAA;AAAA,mBAAe;AAMf;AAAA;AAAA;AAAA;AAAA,WAAQ,UAAU;AAsBlB,WAAQ,iBAAwC;AAgEhD;AAAA;AAAA;AAAA;AAAA;AAAA,WAAQ,yBAAyB,CAAC,UAAqC;AACrE,aAAK,SAAS,MAAM;AAAA,MACtB;AAAA;AAAA,IAtGA;AAAA;AAAA;AAAA;AAAA;AAAA,WAAO,aAAa;AAAA,QAClB,OAAO,EAAE,MAAM,QAAQ,SAAS,KAAK;AAAA,QACrC,GAAG,KAAK;AAAA,MACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAgBA,IAAc,SAAkB;AAC9B,aAAO,KAAK;AAAA,IACd;AAAA,IAEA,IAAc,OAAO,OAAgB;AACnC,YAAM,WAAW,KAAK;AACtB,WAAK,UAAU;AACf,UAAI,aAAa,OAAO;AACtB,aAAK,cAAc,UAAU,QAAQ;AAAA,MACvC;AAAA,IACF;AAAA,IASA,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,IAAI,MAAM;AACzB,aAAK,UAAU,UAAU,IAAI,MAAM;AAAA,MACrC,OAAO;AACL,aAAK,UAAU,OAAO,MAAM;AAC5B,aAAK,UAAU,UAAU,OAAO,MAAM;AAAA,MACxC;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;","names":[]}
|