@customviews-js/customviews 1.1.11 → 1.2.0
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/custom-views.core.cjs.js +360 -196
- package/dist/custom-views.core.cjs.js.map +1 -1
- package/dist/custom-views.core.esm.js +360 -196
- package/dist/custom-views.core.esm.js.map +1 -1
- package/dist/custom-views.esm.js +360 -196
- package/dist/custom-views.esm.js.map +1 -1
- package/dist/custom-views.js +360 -196
- package/dist/custom-views.js.map +1 -1
- package/dist/custom-views.min.js +2 -2
- package/dist/custom-views.min.js.map +1 -1
- package/dist/types/core/core.d.ts +18 -1
- package/dist/types/core/core.d.ts.map +1 -1
- package/dist/types/core/tab-manager.d.ts +6 -6
- package/dist/types/core/tab-manager.d.ts.map +1 -1
- package/dist/types/core/toggle-manager.d.ts +9 -4
- package/dist/types/core/toggle-manager.d.ts.map +1 -1
- package/dist/types/core/widget.d.ts +20 -11
- package/dist/types/core/widget.d.ts.map +1 -1
- package/dist/types/lib/custom-views.d.ts +1 -1
- package/dist/types/lib/custom-views.d.ts.map +1 -1
- package/dist/types/styles/widget-styles.d.ts +1 -1
- package/dist/types/styles/widget-styles.d.ts.map +1 -1
- package/dist/types/types/types.d.ts +15 -2
- package/dist/types/types/types.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -11,11 +11,22 @@ export declare class CustomViewsCore {
|
|
|
11
11
|
private assetsManager;
|
|
12
12
|
private persistenceManager;
|
|
13
13
|
private visibilityManager;
|
|
14
|
+
private observer;
|
|
15
|
+
private componentRegistry;
|
|
14
16
|
private config;
|
|
15
17
|
private stateChangeListeners;
|
|
16
18
|
private showUrlEnabled;
|
|
17
19
|
private lastAppliedState;
|
|
18
20
|
constructor(opt: CustomViewsOptions);
|
|
21
|
+
/**
|
|
22
|
+
* Scan the given element for toggles and tab groups, register them
|
|
23
|
+
* Returns true if new components were found
|
|
24
|
+
*/
|
|
25
|
+
private scan;
|
|
26
|
+
/**
|
|
27
|
+
* Unscan the given element for toggles and tab groups, de-register them
|
|
28
|
+
*/
|
|
29
|
+
private unscan;
|
|
19
30
|
getConfig(): Config;
|
|
20
31
|
/**
|
|
21
32
|
* Get tab groups from config
|
|
@@ -36,6 +47,8 @@ export declare class CustomViewsCore {
|
|
|
36
47
|
*/
|
|
37
48
|
setActiveTab(groupId: string, tabId: string, groupEl?: HTMLElement): void;
|
|
38
49
|
init(): Promise<void>;
|
|
50
|
+
private initializeNewComponents;
|
|
51
|
+
private initObserver;
|
|
39
52
|
private loadAndCallApplyState;
|
|
40
53
|
/**
|
|
41
54
|
* Apply a custom state, saves to localStorage and updates the URL
|
|
@@ -50,7 +63,11 @@ export declare class CustomViewsCore {
|
|
|
50
63
|
top: number;
|
|
51
64
|
};
|
|
52
65
|
}): void;
|
|
53
|
-
/**
|
|
66
|
+
/**
|
|
67
|
+
* Renders state on components in ComponentRegistry
|
|
68
|
+
* Applies the given state.
|
|
69
|
+
* Disconnects the mutation observer during rendering to prevent loops
|
|
70
|
+
**/
|
|
54
71
|
private renderState;
|
|
55
72
|
/**
|
|
56
73
|
* Reset to default state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"core.d.ts","sourceRoot":"","sources":["../../../src/core/core.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"core.d.ts","sourceRoot":"","sources":["../../../src/core/core.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAiBtD,MAAM,WAAW,kBAAkB;IACjC,aAAa,EAAE,aAAa,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,qBAAa,eAAe;IAC1B,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,aAAa,CAAgB;IACrC,OAAO,CAAC,kBAAkB,CAAqB;IAC/C,OAAO,CAAC,iBAAiB,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAiC;IAEjD,OAAO,CAAC,iBAAiB,CAGvB;IAEF,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,oBAAoB,CAAyB;IACrD,OAAO,CAAC,cAAc,CAAU;IAChC,OAAO,CAAC,gBAAgB,CAAsB;gBAElC,GAAG,EAAE,kBAAkB;IAUnC;;;OAGG;IACH,OAAO,CAAC,IAAI;IA8BZ;;OAEG;IACH,OAAO,CAAC,MAAM;IAoBP,SAAS,IAAI,MAAM;IAI1B;;OAEG;IACI,YAAY,IAAI,cAAc,EAAE,GAAG,SAAS;IAInD;;;;OAIG;IACH,OAAO,CAAC,uBAAuB;IA+B/B;;OAEG;IACI,oBAAoB,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAarD;;OAEG;IACI,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI;IAmBnE,IAAI;IAqBjB,OAAO,CAAC,uBAAuB;IAoC/B,OAAO,CAAC,YAAY;YA+CN,qBAAqB;IAmBnC;;;;;MAKE;IACK,UAAU,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE;YAAE,OAAO,EAAE,WAAW,CAAC;YAAC,GAAG,EAAE,MAAM,CAAC;SAAE,CAAC;KAAE;IA+BrH;;;;QAII;IACJ,OAAO,CAAC,WAAW;IAgCnB;;OAEG;IACI,cAAc;IAiBrB;;OAEG;IACI,uBAAuB,IAAI,MAAM,EAAE;IAY1C;;OAEG;IACI,gBAAgB;IAWhB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI;IAuBpD;;OAEG;IACI,sBAAsB,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,IAAI;IAIzD;;OAEG;IACI,yBAAyB,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,IAAI;IAO5D;;OAEG;IACH,OAAO,CAAC,0BAA0B;IAUlC;;OAEG;IACI,uBAAuB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAItD;;OAEG;IACI,4BAA4B,IAAI,OAAO,GAAG,IAAI;IAIrD,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,uBAAuB;CAYhC"}
|
|
@@ -5,9 +5,9 @@ export declare class TabManager {
|
|
|
5
5
|
*/
|
|
6
6
|
private static splitTabIds;
|
|
7
7
|
/**
|
|
8
|
-
* Apply tab selections to
|
|
8
|
+
* Apply tab selections to a given list of tab group elements
|
|
9
9
|
*/
|
|
10
|
-
static applyTabSelections(
|
|
10
|
+
static applyTabSelections(tabGroups: HTMLElement[], tabs: Record<string, string>, cfgGroups?: TabGroupConfig[]): void;
|
|
11
11
|
/**
|
|
12
12
|
* Resolve the active tab for a group based on state, config, and DOM
|
|
13
13
|
*
|
|
@@ -29,7 +29,7 @@ export declare class TabManager {
|
|
|
29
29
|
/**
|
|
30
30
|
* Build navigation for tab groups (one-time setup)
|
|
31
31
|
*/
|
|
32
|
-
static buildNavs(
|
|
32
|
+
static buildNavs(tabGroups: HTMLElement[], cfgGroups?: TabGroupConfig[], onTabClick?: (groupId: string, tabId: string, groupEl: HTMLElement) => void, onTabDoubleClick?: (groupId: string, tabId: string, groupEl: HTMLElement) => void): void;
|
|
33
33
|
/**
|
|
34
34
|
* Toggle nav visibility for all tab groups (viewer-controlled)
|
|
35
35
|
*/
|
|
@@ -49,7 +49,7 @@ export declare class TabManager {
|
|
|
49
49
|
/**
|
|
50
50
|
* Update active states for all tab groups based on current state
|
|
51
51
|
*/
|
|
52
|
-
static updateAllNavActiveStates(
|
|
52
|
+
static updateAllNavActiveStates(tabGroups: HTMLElement[], tabs: Record<string, string>, cfgGroups?: TabGroupConfig[]): void;
|
|
53
53
|
/**
|
|
54
54
|
* Apply tab selection to a specific tabgroup element only (not globally).
|
|
55
55
|
* Used for single-click behavior to update only the clicked tabgroup.
|
|
@@ -67,7 +67,7 @@ export declare class TabManager {
|
|
|
67
67
|
/**
|
|
68
68
|
* Update pin icon visibility for all tab groups based on current state.
|
|
69
69
|
* Shows pin icon for tabs that are in the persisted state (i.e., have been double-clicked).
|
|
70
|
-
|
|
71
|
-
static updatePinIcons(
|
|
70
|
+
*/
|
|
71
|
+
static updatePinIcons(tabGroups: HTMLElement[], tabs: Record<string, string>): void;
|
|
72
72
|
}
|
|
73
73
|
//# sourceMappingURL=tab-manager.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-manager.d.ts","sourceRoot":"","sources":["../../../src/core/tab-manager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAYrD,qBAAa,UAAU;IACrB;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,WAAW;IAM1B;;OAEG;WACW,kBAAkB,CAC9B,
|
|
1
|
+
{"version":3,"file":"tab-manager.d.ts","sourceRoot":"","sources":["../../../src/core/tab-manager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAYrD,qBAAa,UAAU;IACrB;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,WAAW;IAM1B;;OAEG;WACW,kBAAkB,CAC9B,SAAS,EAAE,WAAW,EAAE,EACxB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC5B,SAAS,CAAC,EAAE,cAAc,EAAE,GAC3B,IAAI;IAwCP;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,wBAAwB;IAqCvC;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,kBAAkB;IAUjC;;;;;;OAMG;IACH,OAAO,CAAC,MAAM,CAAC,iBAAiB;IAwBhC;;OAEG;WACW,SAAS,CACrB,SAAS,EAAE,WAAW,EAAE,EACxB,SAAS,CAAC,EAAE,cAAc,EAAE,EAC5B,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,KAAK,IAAI,EAC3E,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,KAAK,IAAI,GAChF,IAAI;IAiKP;;OAEG;WACW,iBAAiB,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI;IA6B5E;;OAEG;WACW,cAAc,CAAC,MAAM,EAAE,WAAW,GAAG,OAAO;IAI1D;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,WAAW;IAc1B;;OAEG;WACW,oBAAoB,CAAC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,GAAG,IAAI;IAmBnF;;OAEG;WACW,wBAAwB,CACpC,SAAS,EAAE,WAAW,EAAE,EACxB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC5B,SAAS,CAAC,EAAE,cAAc,EAAE,GAC3B,IAAI;IA6BP;;;OAGG;WACW,iBAAiB,CAAC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,GAAG,IAAI;IAgBhF;;;OAGG;WACW,WAAW,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO;IAavE;;OAEG;WACW,kBAAkB,CAC9B,MAAM,EAAE,WAAW,EACnB,aAAa,EAAE,MAAM,EACrB,KAAK,EAAE,MAAM,GACZ,WAAW,EAAE;IAchB;;;QAGI;WACU,cAAc,CACxB,SAAS,EAAE,WAAW,EAAE,EACxB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC3B,IAAI;CA2BV"}
|
|
@@ -5,13 +5,13 @@ import { AssetsManager } from "./assets-manager";
|
|
|
5
5
|
*/
|
|
6
6
|
export declare class ToggleManager {
|
|
7
7
|
/**
|
|
8
|
-
* Apply toggle visibility to
|
|
8
|
+
* Apply toggle visibility to a given list of toggle elements
|
|
9
9
|
*/
|
|
10
|
-
static applyToggles(
|
|
10
|
+
static applyToggles(elements: HTMLElement[], activeToggles: ToggleId[]): void;
|
|
11
11
|
/**
|
|
12
|
-
* Render assets into toggle elements that are currently visible
|
|
12
|
+
* Render assets into a given list of toggle elements that are currently visible
|
|
13
13
|
*/
|
|
14
|
-
static renderAssets(
|
|
14
|
+
static renderAssets(elements: HTMLElement[], activeToggles: ToggleId[], assetsManager: AssetsManager): void;
|
|
15
15
|
/**
|
|
16
16
|
* Get toggle categories from an element (supports both data attributes and cv-toggle elements)
|
|
17
17
|
*/
|
|
@@ -24,5 +24,10 @@ export declare class ToggleManager {
|
|
|
24
24
|
* Apply simple class-based visibility to a toggle element
|
|
25
25
|
*/
|
|
26
26
|
private static applyToggleVisibility;
|
|
27
|
+
/**
|
|
28
|
+
* Scans a given DOM subtree for toggle elements and initializes them.
|
|
29
|
+
* This includes applying visibility and rendering assets.
|
|
30
|
+
*/
|
|
31
|
+
static initializeToggles(root: HTMLElement, activeToggles: ToggleId[], assetsManager: AssetsManager): void;
|
|
27
32
|
}
|
|
28
33
|
//# sourceMappingURL=toggle-manager.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle-manager.d.ts","sourceRoot":"","sources":["../../../src/core/toggle-manager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"toggle-manager.d.ts","sourceRoot":"","sources":["../../../src/core/toggle-manager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD;;GAEG;AACH,qBAAa,aAAa;IACxB;;OAEG;WACW,YAAY,CAAC,QAAQ,EAAE,WAAW,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,IAAI;IAQpF;;OAEG;WACW,YAAY,CAAC,QAAQ,EAAE,WAAW,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,aAAa,EAAE,aAAa,GAAG,IAAI;IAalH;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,mBAAmB;IAUlC;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,WAAW;IAI1B;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,qBAAqB;IAUpC;;;OAGG;WACW,iBAAiB,CAC7B,IAAI,EAAE,WAAW,EACjB,aAAa,EAAE,QAAQ,EAAE,EACzB,aAAa,EAAE,aAAa,GAC3B,IAAI;CAYR"}
|
|
@@ -28,12 +28,17 @@ export declare class CustomViewsWidget {
|
|
|
28
28
|
private container;
|
|
29
29
|
private widgetIcon;
|
|
30
30
|
private options;
|
|
31
|
-
private
|
|
31
|
+
private _hasVisibleConfig;
|
|
32
|
+
private pageToggleIds;
|
|
33
|
+
private pageTabIds;
|
|
34
|
+
private stateModal;
|
|
32
35
|
constructor(options: WidgetOptions);
|
|
33
36
|
/**
|
|
34
|
-
* Render the widget
|
|
37
|
+
* Render the widget modal icon
|
|
38
|
+
*
|
|
39
|
+
* Does not render if there are no visible toggles or tab groups.
|
|
35
40
|
*/
|
|
36
|
-
|
|
41
|
+
renderModalIcon(): HTMLElement | undefined;
|
|
37
42
|
/**
|
|
38
43
|
* Create the simple widget icon
|
|
39
44
|
*/
|
|
@@ -52,13 +57,21 @@ export declare class CustomViewsWidget {
|
|
|
52
57
|
*/
|
|
53
58
|
private openStateModal;
|
|
54
59
|
/**
|
|
55
|
-
* Create the custom state creator modal
|
|
60
|
+
* Create the custom state creator modal shell and attach listeners
|
|
56
61
|
*/
|
|
57
|
-
private
|
|
62
|
+
private _createStateModal;
|
|
58
63
|
/**
|
|
59
|
-
*
|
|
64
|
+
* Update the content of the state modal
|
|
60
65
|
*/
|
|
61
|
-
private
|
|
66
|
+
private _updateStateModalContent;
|
|
67
|
+
/**
|
|
68
|
+
* Attach event listeners for the modal frame (delegated events)
|
|
69
|
+
*/
|
|
70
|
+
private _attachStateModalFrameEventListeners;
|
|
71
|
+
/**
|
|
72
|
+
* Attach event listeners for custom state creator's dynamic content
|
|
73
|
+
*/
|
|
74
|
+
private _attachStateModalContentEventListeners;
|
|
62
75
|
/**
|
|
63
76
|
* Apply theme class to the modal overlay based on options
|
|
64
77
|
*/
|
|
@@ -75,10 +88,6 @@ export declare class CustomViewsWidget {
|
|
|
75
88
|
* Load current state into form based on currently active toggles
|
|
76
89
|
*/
|
|
77
90
|
private loadCurrentStateIntoForm;
|
|
78
|
-
/**
|
|
79
|
-
* Format toggle name for display
|
|
80
|
-
*/
|
|
81
|
-
private formatToggleName;
|
|
82
91
|
/**
|
|
83
92
|
* Check if this is the first visit and show welcome modal
|
|
84
93
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"widget.d.ts","sourceRoot":"","sources":["../../../src/core/widget.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAO9C,MAAM,WAAW,aAAa;IAC5B,+CAA+C;IAC/C,IAAI,EAAE,eAAe,CAAC;IAEtB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB,6GAA6G;IAC7G,QAAQ,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,GAAG,aAAa,GAAG,cAAc,CAAC;IAEtG,sCAAsC;IACtC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAEzB,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8BAA8B;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,mDAAmD;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,+DAA+D;IAC/D,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,mEAAmE;IACnE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,IAAI,CAAkB;IAC9B,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,OAAO,CAA0B;
|
|
1
|
+
{"version":3,"file":"widget.d.ts","sourceRoot":"","sources":["../../../src/core/widget.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAO9C,MAAM,WAAW,aAAa;IAC5B,+CAA+C;IAC/C,IAAI,EAAE,eAAe,CAAC;IAEtB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB,6GAA6G;IAC7G,QAAQ,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,GAAG,aAAa,GAAG,cAAc,CAAC;IAEtG,sCAAsC;IACtC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAEzB,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8BAA8B;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,mDAAmD;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,+DAA+D;IAC/D,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,mEAAmE;IACnE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,IAAI,CAAkB;IAC9B,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,OAAO,CAA0B;IACzC,OAAO,CAAC,iBAAiB,CAAS;IAClC,OAAO,CAAC,aAAa,CAA0B;IAC/C,OAAO,CAAC,UAAU,CAA0B;IAG5C,OAAO,CAAC,UAAU,CAA4B;gBAGlC,OAAO,EAAE,aAAa;IAmDlC;;;;OAIG;IACI,eAAe,IAAI,WAAW,GAAG,SAAS;IAmBjD;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAaxB;;OAEG;IACI,OAAO,IAAI,IAAI;IAatB,OAAO,CAAC,oBAAoB;IAO5B;;OAEG;IACH,OAAO,CAAC,UAAU;IAMlB;;OAEG;IACH,OAAO,CAAC,cAAc;IAQtB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IASzB;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAqIhC;;OAEG;IACH,OAAO,CAAC,oCAAoC;IAgE5C;;OAEG;IACH,OAAO,CAAC,sCAAsC;IA8D9C;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAUzB;;OAEG;IACH,OAAO,CAAC,8BAA8B;IAgCtC;;OAEG;IACH,OAAO,CAAC,gBAAgB;IASxB;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAoDhC;;OAEG;IACH,OAAO,CAAC,4BAA4B;IAmBpC;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAuC1B;;OAEG;IACH,OAAO,CAAC,gCAAgC;CA6BzC"}
|
|
@@ -8,7 +8,7 @@ export type initOptions = {
|
|
|
8
8
|
assetsJsonPath?: string;
|
|
9
9
|
/** Root element to apply custom views */
|
|
10
10
|
rootEl?: HTMLElement;
|
|
11
|
-
/** Config object with
|
|
11
|
+
/** Config object with toggles and defaultState */
|
|
12
12
|
config?: Config;
|
|
13
13
|
/** Base URL for all paths */
|
|
14
14
|
baseURL?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"custom-views.d.ts","sourceRoot":"","sources":["../../../src/lib/custom-views.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAA2B,MAAM,cAAc,CAAC;AAExE,OAAO,KAAK,EAAmB,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAI9D;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yCAAyC;IACzC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,
|
|
1
|
+
{"version":3,"file":"custom-views.d.ts","sourceRoot":"","sources":["../../../src/lib/custom-views.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAA2B,MAAM,cAAc,CAAC;AAExE,OAAO,KAAK,EAAmB,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAI9D;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yCAAyC;IACzC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAA;AAED;;GAEG;AACH,qBAAa,WAAW;IACtB;;;;OAIG;WACU,IAAI,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO,CAAC,eAAe,GAAG,IAAI,CAAC;CA0CtE"}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* Note: Styles are kept as a TypeScript string for compatibility with the build system.
|
|
6
6
|
* This approach ensures the styles are properly bundled and don't require separate CSS file handling.
|
|
7
7
|
*/
|
|
8
|
-
export declare const WIDGET_STYLES = "\n/* Rounded rectangle widget icon styles */\n.cv-widget-icon {\n position: fixed;\n /* Slightly transparent by default so the widget is subtle at the page edge */\n background: rgba(255, 255, 255, 0.92);\n color: rgba(0, 0, 0, 0.9);\n opacity: 0.6;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n font-weight: bold;\n cursor: pointer;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n z-index: 9998;\n transition: all 0.3s ease;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.cv-widget-icon:hover {\n /* Become fully opaque on hover to improve readability */\n background: rgba(255, 255, 255, 1);\n color: rgba(0, 0, 0, 1);\n opacity: 1;\n}\n\n/* Top-right: rounded end on left, sticks out leftward on hover */\n.cv-widget-top-right {\n top: 20px;\n right: 0;\n border-radius: 18px 0 0 18px;\n padding-left: 8px;\n justify-content: flex-start;\n}\n\n/* Top-left: rounded end on right, sticks out rightward on hover */\n.cv-widget-top-left {\n top: 20px;\n left: 0;\n border-radius: 0 18px 18px 0;\n padding-right: 8px;\n justify-content: flex-end;\n}\n\n/* Bottom-right: rounded end on left, sticks out leftward on hover */\n.cv-widget-bottom-right {\n bottom: 20px;\n right: 0;\n border-radius: 18px 0 0 18px;\n padding-left: 8px;\n justify-content: flex-start;\n}\n\n/* Bottom-left: rounded end on right, sticks out rightward on hover */\n.cv-widget-bottom-left {\n bottom: 20px;\n left: 0;\n border-radius: 0 18px 18px 0;\n padding-right: 8px;\n justify-content: flex-end;\n}\n\n/* Middle-left: rounded end on right, sticks out rightward on hover */\n.cv-widget-middle-left {\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n border-radius: 0 18px 18px 0;\n padding-right: 8px;\n justify-content: flex-end;\n}\n\n/* Middle-right: rounded end on left, sticks out leftward on hover */\n.cv-widget-middle-right {\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n border-radius: 18px 0 0 18px;\n padding-left: 8px;\n justify-content: flex-start;\n}\n\n.cv-widget-top-right,\n.cv-widget-middle-right,\n.cv-widget-bottom-right,\n.cv-widget-top-left,\n.cv-widget-middle-left,\n.cv-widget-bottom-left {\n height: 36px;\n width: 36px;\n}\n\n.cv-widget-middle-right:hover,\n.cv-widget-top-right:hover,\n.cv-widget-bottom-right:hover,\n.cv-widget-top-left:hover,\n.cv-widget-middle-left:hover,\n.cv-widget-bottom-left:hover {\n width: 55px;\n}\n\n/* Modal content styles */\n.cv-widget-section {\n margin-bottom: 16px;\n}\n\n.cv-widget-section:last-child {\n margin-bottom: 0;\n}\n\n.cv-widget-section label {\n display: block;\n margin-bottom: 4px;\n font-weight: 500;\n color: #555;\n}\n\n.cv-widget-profile-select,\n.cv-widget-state-select {\n width: 100%;\n padding: 8px 12px;\n border: 1px solid #ddd;\n border-radius: 4px;\n background: white;\n font-size: 14px;\n}\n\n.cv-widget-profile-select:focus,\n.cv-widget-state-select:focus {\n outline: none;\n border-color: #007bff;\n box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);\n}\n\n.cv-widget-profile-select:disabled,\n.cv-widget-state-select:disabled {\n background: #f8f9fa;\n color: #6c757d;\n cursor: not-allowed;\n}\n\n.cv-widget-current {\n margin: 16px 0;\n padding: 12px;\n background: #f8f9fa;\n border-radius: 4px;\n border-left: 4px solid #007bff;\n}\n\n.cv-widget-current label {\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: #666;\n margin-bottom: 4px;\n}\n\n.cv-widget-current-view {\n font-weight: 500;\n color: #333;\n}\n\n.cv-widget-reset {\n width: 100%;\n padding: 8px 16px;\n background: #dc3545;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 14px;\n font-weight: 500;\n}\n\n.cv-widget-reset:hover {\n background: #c82333;\n}\n\n.cv-widget-reset:active {\n background: #bd2130;\n}\n\n/* Responsive design for mobile */\n@media (max-width: 768px) {\n .cv-widget-top-right,\n .cv-widget-top-left {\n top: 10px;\n }\n\n .cv-widget-bottom-right,\n .cv-widget-bottom-left {\n bottom: 10px;\n }\n\n /* All widgets stay flush with screen edges */\n .cv-widget-top-right,\n .cv-widget-bottom-right,\n .cv-widget-middle-right {\n right: 0;\n }\n\n .cv-widget-top-left,\n .cv-widget-bottom-left,\n .cv-widget-middle-left {\n left: 0;\n }\n\n /* Slightly smaller on mobile */\n .cv-widget-icon {\n width: 60px;\n height: 32px;\n }\n\n .cv-widget-icon:hover {\n width: 75px;\n }\n}\n\n/* Modal styles */\n.cv-widget-modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10002;\n animation: fadeIn 0.2s ease;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.cv-widget-modal {\n background: white;\n border-radius: 0.75rem;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n max-width: 32rem;\n width: 90vw;\n max-height: 80vh;\n animation: slideIn 0.2s ease;\n display: flex;\n flex-direction: column;\n}\n\n@keyframes slideIn {\n from { \n opacity: 0;\n transform: scale(0.9) translateY(-20px);\n }\n to { \n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n\n.cv-modal-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.5rem 1rem;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n.cv-modal-header-content {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n}\n\n.cv-modal-icon {\n position: relative;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 9999px;\n}\n\n.cv-modal-icon-svg {\n width: 100%;\n height: 100%;\n opacity: 1;\n}\n\n.cv-modal-title {\n font-size: 1.125rem;\n font-weight: bold;\n color: rgba(0, 0, 0, 0.9);\n margin: 0;\n}\n\n.cv-modal-close {\n width: 2rem;\n height: 2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 9999px;\n background: transparent;\n border: none;\n color: rgba(0, 0, 0, 0.6);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.cv-modal-close:hover {\n background: rgba(62, 132, 244, 0.1);\n color: #3e84f4;\n}\n\n.cv-modal-close-icon {\n width: 1.25rem;\n height: 1.25rem;\n}\n\n.cv-modal-main {\n padding: 1rem;\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n overflow-y: auto;\n max-height: calc(80vh - 8rem);\n}\n\n.cv-modal-description {\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.8);\n margin: 0;\n line-height: 1.4;\n}\n\n.cv-content-section,\n.cv-tab-groups-section {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.cv-section-heading {\n font-size: 1rem;\n font-weight: bold;\n color: rgba(0, 0, 0, 0.9);\n margin: 0;\n}\n\n.cv-widget-modal-actions {\n margin-top: 20px;\n padding-top: 16px;\n border-top: 1px solid #e9ecef;\n}\n\n.cv-widget-restore {\n width: 100%;\n padding: 10px 16px;\n background: #28a745;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 14px;\n font-weight: 500;\n}\n\n.cv-widget-restore:hover {\n background: #218838;\n}\n\n.cv-widget-create-state {\n width: 100%;\n padding: 10px 16px;\n background: #007bff;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 14px;\n font-weight: 500;\n margin-bottom: 10px;\n}\n\n.cv-widget-create-state:hover {\n background: #0056b3;\n}\n\n.cv-widget-theme-dark .cv-widget-modal {\n background: #101722;\n color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-modal-header {\n border-color: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-modal-title {\n color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-modal-close {\n color: rgba(255, 255, 255, 0.6);\n}\n\n.cv-widget-theme-dark .cv-modal-close:hover {\n background: rgba(62, 132, 244, 0.2);\n color: #3e84f4;\n}\n\n.cv-widget-theme-dark .cv-modal-description {\n color: rgba(255, 255, 255, 0.8);\n}\n\n.cv-widget-theme-dark .cv-section-heading {\n color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-toggles-container\n.cv-widget-theme-dark .cv-tabgroups-container {\n border-color: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-toggle-card,\n.cv-widget-theme-dark .cv-tabgroup-card {\n background: #101722;\n border-color: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-toggle-title,\n.cv-widget-theme-dark .cv-tabgroup-title {\n color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-toggle-description,\n.cv-widget-theme-dark .cv-tabgroup-description {\n color: rgba(255, 255, 255, 0.6);\n}\n\n.cv-widget-theme-dark .cv-toggle-slider {\n background: rgba(255, 255, 255, 0.2);\n}\n\n.cv-widget-theme-dark .cv-tab-group-description {\n color: rgba(255, 255, 255, 0.8);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-select {\n background: #101722;\n border-color: rgba(255, 255, 255, 0.2);\n color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-modal-footer {\n border-color: rgba(255, 255, 255, 0.1);\n background: #101722;\n}\n\n.cv-widget-theme-dark .cv-reset-btn {\n color: #e2e8f0;\n background: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-reset-btn:hover {\n background: rgba(255, 255, 255, 0.2);\n}\n\n/* Custom state creator styles */\n.cv-custom-state-modal {\n max-width: 500px;\n}\n\n.cv-custom-state-form .cv-section-header {\n font-size: 16px;\n font-weight: 600;\n color: #333;\n border-bottom: 1px solid #e9ecef;\n padding-bottom: 5px;\n}\n\n.cv-custom-state-form p {\n font-size: 15px;\n line-height: 1.6;\n color: #555;\n margin-bottom: 24px;\n text-align: justify;\n}\n\n.cv-custom-state-section {\n margin-bottom: 16px;\n}\n\n.cv-custom-state-section label {\n display: block;\n margin-bottom: 4px;\n font-weight: 500;\n color: #555;\n}\n\n.cv-custom-state-input {\n width: 100%;\n padding: 8px 12px;\n border: 1px solid #ddd;\n border-radius: 4px;\n background: white;\n font-size: 14px;\n}\n\n.cv-custom-state-input:focus {\n outline: none;\n border-color: #007bff;\n box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);\n}\n\n/* Toggles Container */\n.cv-toggles-container {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n border-radius: 0.5rem;\n border: 1px solid rgba(0, 0, 0, 0.1);\n overflow: hidden;\n}\n\n.cv-toggle-card,\n.cv-tabgroup-card {\n background: white;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n.cv-toggle-card:last-child {\n border-bottom: none;\n}\n\n.cv-toggle-content {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.75rem;\n}\n\n.cv-toggle-title {\n font-weight: 500;\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.9);\n margin: 0 0 0.125rem 0;\n}\n\n.cv-toggle-description {\n font-size: 0.75rem;\n color: rgba(0, 0, 0, 0.6);\n margin: 0;\n}\n\n.cv-toggle-label{\n position: relative;\n display: inline-block;\n width: 2.75rem;\n height: 1.5rem;\n cursor: pointer;\n}\n\n.cv-toggle-input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.cv-toggle-slider {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.2);\n border-radius: 9999px;\n transition: background-color 0.2s ease;\n}\n\n.cv-toggle-slider:before {\n position: absolute;\n content: \"\";\n height: 1rem;\n width: 1rem;\n left: 0.25rem;\n bottom: 0.25rem;\n background: white;\n border-radius: 50%;\n transition: transform 0.2s ease;\n}\n\n.cv-toggle-input:checked + .cv-toggle-slider {\n background: #3e84f4;\n}\n\n.cv-toggle-input:checked + .cv-toggle-slider:before {\n transform: translateX(1.25rem);\n}\n\n/* Dark theme toggle switch styles */\n.cv-widget-theme-dark .cv-toggle-switch {\n background: #4a5568;\n}\n\n.cv-widget-theme-dark .cv-toggle-switch:hover {\n background: #5a6578;\n}\n\n.cv-widget-theme-dark .cv-toggle-switch.cv-toggle-active {\n background: #63b3ed;\n}\n\n.cv-widget-theme-dark .cv-toggle-switch.cv-toggle-active:hover {\n background: #4299e1;\n}\n\n/* Tab Groups Container */\n.cv-tab-groups-list {\n display: flex;\n flex-direction: column;\n gap: 1px;\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 0.5rem;\n overflow: hidden;\n}\n\n/* Tab Group Card - Header (Navigation Headers toggle) */\n.cv-tabgroup-card.cv-tabgroup-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.75rem;\n border-bottom: 0px;\n}\n\n.cv-tabgroup-card.cv-tabgroup-header .cv-tabgroup-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n gap: 1rem;\n}\n\n/* Navigation toggle icon container */\n.cv-nav-toggle-container {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.cv-nav-icon {\n width: 2rem;\n height: 2rem;\n color: rgba(0, 0, 0, 0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: color 0.2s ease;\n}\n\n/* Logo box - centered grey box on its own row */\n.cv-tabgroup-logo-box {\n width: 3.5rem;\n height: 3.5rem;\n background: rgba(0, 0, 0, 0.08);\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-bottom: 0.5rem;\n}\n\n/* Title container for title alignment (without icon) */\n.cv-tabgroup-title-container {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n/* Hover state for icon - apply to the entire tabgroup-row */\n.cv-tabgroup-card.cv-tabgroup-header:hover .cv-nav-icon {\n color: #3e84f4;\n}\n\n.cv-widget-theme-dark .cv-nav-icon {\n color: rgba(255, 255, 255, 0.8);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-card.cv-tabgroup-header:hover .cv-nav-icon {\n color: #60a5fa;\n}\n\n/* Tab Group Card - Items */\n.cv-tabgroup-card.cv-tabgroup-item {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding: 0.75rem;\n background: white;\n border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n}\n\n.cv-tabgroup-card.cv-tabgroup-item:last-child {\n border-bottom: none;\n}\n\n/* Tab Group Info */\n.cv-tabgroup-info {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\n.cv-tabgroup-title {\n font-weight: 500;\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.9);\n margin: 0 0 0 0;\n}\n\n.cv-tabgroup-description {\n font-size: 0.75rem;\n color: rgba(0, 0, 0, 0.6);\n margin: 0;\n line-height: 1.3;\n}\n\n/* Tab Group Label (for select dropdowns) */\n.cv-tabgroup-label {\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.8);\n margin: 0;\n line-height: 1.4;\n font-weight: 500;\n display: block;\n cursor: pointer;\n}\n\n/* Tab Group Select */\n.cv-tabgroup-select {\n width: 100%;\n border-radius: 0.5rem;\n background: white;\n border: 1px solid rgba(0, 0, 0, 0.15);\n color: rgba(0, 0, 0, 0.9);\n padding: 0.5rem 0.75rem;\n font-size: 0.875rem;\n cursor: pointer;\n transition: all 0.15s ease;\n font-family: inherit;\n}\n\n.cv-tabgroup-select:hover {\n border-color: rgba(0, 0, 0, 0.25);\n}\n\n.cv-tabgroup-select:focus {\n outline: none;\n border-color: #3e84f4;\n box-shadow: 0 0 0 2px rgba(62, 132, 244, 0.2);\n}\n\n/* Modern Toggle Switch */\n.cv-toggle-switch {\n position: relative;\n display: inline-flex;\n align-items: center;\n width: 44px;\n height: 24px;\n background: rgba(0, 0, 0, 0.1);\n border-radius: 9999px;\n padding: 2px;\n box-sizing: border-box;\n cursor: pointer;\n transition: background-color 0.2s ease;\n border: none;\n}\n\n.cv-toggle-switch input {\n display: none;\n}\n\n.cv-toggle-switch .cv-switch-bg {\n position: absolute;\n inset: 0;\n border-radius: 9999px;\n background: rgba(0, 0, 0, 0.1);\n transition: background-color 0.2s ease;\n pointer-events: none;\n}\n\n.cv-toggle-switch .cv-switch-knob {\n position: relative;\n width: 20px;\n height: 20px;\n background: white;\n border-radius: 50%;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n transition: transform 0.2s ease;\n z-index: 1;\n}\n\n.cv-toggle-switch input:checked + .cv-switch-bg {\n background: #3e84f4;\n}\n\n.cv-toggle-switch input:checked ~ .cv-switch-knob {\n transform: translateX(20px);\n}\n\n/* Dark Theme - Tab Groups */\n.cv-widget-theme-dark .cv-tabgroup-card.cv-tabgroup-header {\n background: #101722;\n border-bottom-color: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-card.cv-tabgroup-item {\n background: #101722;\n border-bottom-color: rgba(255, 255, 255, 0.05);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-title {\n color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-tabgroup-description {\n color: rgba(255, 255, 255, 0.6);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-label {\n color: rgba(255, 255, 255, 0.8);\n}\n\n.cv-widget-theme-dark .cv-tab-groups-list {\n border-color: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-select {\n background: #101722;\n border-color: rgba(255, 255, 255, 0.15);\n color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-tabgroup-select:hover {\n border-color: rgba(255, 255, 255, 0.25);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-select:focus {\n border-color: #60a5fa;\n box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);\n}\n\n/* Dark Theme - Toggle Switch */\n.cv-widget-theme-dark .cv-toggle-switch .cv-switch-bg {\n background: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-toggle-switch .cv-switch-knob {\n background: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-toggle-switch input:checked + .cv-switch-bg {\n background: #63b3ed;\n}\n\n.cv-modal-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0.75rem;\n border-top: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n.cv-reset-btn,\n.cv-share-btn {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.375rem 0.75rem;\n border-radius: 0.5rem;\n font-weight: 600;\n font-size: 0.875rem;\n cursor: pointer;\n transition: all 0.2s ease;\n border: none;\n}\n\n.cv-reset-btn {\n color: rgba(0, 0, 0, 0.9);\n background: rgba(0, 0, 0, 0.1);\n}\n\n.cv-reset-btn:hover {\n background: rgba(0, 0, 0, 0.2);\n}\n\n.cv-share-btn {\n color: white;\n background: #3e84f4;\n}\n\n.cv-share-btn:hover {\n background: rgba(62, 132, 244, 0.9);\n}\n\n.cv-btn-icon {\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: transform 0.2s ease;\n}\n\n/* Dark theme custom state styles */\n/* Welcome modal styles */\n.cv-welcome-modal {\n max-width: 32rem;\n width: 90vw;\n background: white;\n border-radius: 0.75rem;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n animation: slideIn 0.2s ease;\n display: flex;\n flex-direction: column;\n}\n\n.cv-modal-main {\n padding: 1rem;\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n overflow-y: auto;\n max-height: calc(80vh - 8rem);\n}\n\n.cv-welcome-message {\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.8);\n margin: 0;\n line-height: 1.4;\n text-align: center;\n}\n\n.cv-welcome-message a {\n color: #3e84f4;\n text-align: justify;\n text-decoration: none;\n}\n\n.cv-welcome-message a:hover {\n text-decoration: underline;\n}\n\n.cv-welcome-widget-preview {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n padding: 1rem;\n background: #f8f9fa;\n border-radius: 0.5rem;\n margin: 1rem 0;\n}\n\n.cv-welcome-widget-icon {\n width: 2rem;\n height: 2rem;\n background: rgba(62, 132, 244, 0.1);\n border-radius: 9999px;\n display: flex;\n align-items: center;\n justify-content: center;\n animation: cv-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n color: #3e84f4;\n}\n\n.cv-welcome-widget-label {\n font-size: 0.875rem;\n font-weight: 500;\n color: rgba(0, 0, 0, 0.8);\n margin: 0;\n}\n\n.cv-welcome-got-it {\n width: 100%;\n background: #3e84f4;\n color: white;\n font-weight: 600;\n padding: 0.75rem 1rem;\n border-radius: 0.5rem;\n border: none;\n cursor: pointer;\n font-size: 0.875rem;\n transition: background-color 0.2s ease;\n outline: none;\n}\n\n.cv-welcome-got-it:hover {\n background: rgba(62, 132, 244, 0.9);\n}\n\n.cv-welcome-got-it:focus {\n box-shadow: 0 0 0 2px rgba(62, 132, 244, 0.5);\n}\n\n/* Animations */\n@keyframes cv-pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}\n\n/* Dark theme welcome modal styles */\n.cv-widget-theme-dark .cv-welcome-modal {\n background: #101722;\n}\n\n.cv-widget-theme-dark .cv-welcome-message {\n color: rgba(255, 255, 255, 0.8);\n}\n\n.cv-widget-theme-dark .cv-welcome-message a {\n color: #60a5fa;\n}\n\n.cv-widget-theme-dark .cv-welcome-widget-preview {\n background: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-welcome-widget-label {\n color: #e2e8f0;\n}\n\n/* Dark theme logo box */\n.cv-widget-theme-dark .cv-tabgroup-logo-box {\n background: rgba(255, 255, 255, 0.1);\n}\n\n/* Spinning animation for reset button icon */\n@keyframes cv-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(-360deg);\n }\n}\n\n.cv-spinning {\n animation: cv-spin 0.6s ease-in-out;\n}\n\n/* Hide widget icon in print view */\n@media print {\n .cv-widget-icon {\n display: none !important;\n }\n}\n";
|
|
8
|
+
export declare const WIDGET_STYLES = "\n/* Rounded rectangle widget icon styles */\n.cv-widget-icon {\n position: fixed;\n /* Slightly transparent by default so the widget is subtle at the page edge */\n background: rgba(255, 255, 255, 0.92);\n color: rgba(0, 0, 0, 0.9);\n opacity: 0.6;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n font-weight: bold;\n cursor: pointer;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n z-index: 9998;\n transition: all 0.3s ease;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.cv-widget-icon:hover {\n /* Become fully opaque on hover to improve readability */\n background: rgba(255, 255, 255, 1);\n color: rgba(0, 0, 0, 1);\n opacity: 1;\n}\n\n/* Top-right: rounded end on left, sticks out leftward on hover */\n.cv-widget-top-right {\n top: 20px;\n right: 0;\n border-radius: 18px 0 0 18px;\n padding-left: 8px;\n justify-content: flex-start;\n}\n\n/* Top-left: rounded end on right, sticks out rightward on hover */\n.cv-widget-top-left {\n top: 20px;\n left: 0;\n border-radius: 0 18px 18px 0;\n padding-right: 8px;\n justify-content: flex-end;\n}\n\n/* Bottom-right: rounded end on left, sticks out leftward on hover */\n.cv-widget-bottom-right {\n bottom: 20px;\n right: 0;\n border-radius: 18px 0 0 18px;\n padding-left: 8px;\n justify-content: flex-start;\n}\n\n/* Bottom-left: rounded end on right, sticks out rightward on hover */\n.cv-widget-bottom-left {\n bottom: 20px;\n left: 0;\n border-radius: 0 18px 18px 0;\n padding-right: 8px;\n justify-content: flex-end;\n}\n\n/* Middle-left: rounded end on right, sticks out rightward on hover */\n.cv-widget-middle-left {\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n border-radius: 0 18px 18px 0;\n padding-right: 8px;\n justify-content: flex-end;\n}\n\n/* Middle-right: rounded end on left, sticks out leftward on hover */\n.cv-widget-middle-right {\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n border-radius: 18px 0 0 18px;\n padding-left: 8px;\n justify-content: flex-start;\n}\n\n.cv-widget-top-right,\n.cv-widget-middle-right,\n.cv-widget-bottom-right,\n.cv-widget-top-left,\n.cv-widget-middle-left,\n.cv-widget-bottom-left {\n height: 36px;\n width: 36px;\n}\n\n.cv-widget-middle-right:hover,\n.cv-widget-top-right:hover,\n.cv-widget-bottom-right:hover,\n.cv-widget-top-left:hover,\n.cv-widget-middle-left:hover,\n.cv-widget-bottom-left:hover {\n width: 55px;\n}\n\n/* Modal content styles */\n.cv-widget-section {\n margin-bottom: 16px;\n}\n\n.cv-widget-section:last-child {\n margin-bottom: 0;\n}\n\n.cv-widget-section label {\n display: block;\n margin-bottom: 4px;\n font-weight: 500;\n color: #555;\n}\n\n.cv-widget-profile-select,\n.cv-widget-state-select {\n width: 100%;\n padding: 8px 12px;\n border: 1px solid #ddd;\n border-radius: 4px;\n background: white;\n font-size: 14px;\n}\n\n.cv-widget-profile-select:focus,\n.cv-widget-state-select:focus {\n outline: none;\n border-color: #007bff;\n box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);\n}\n\n.cv-widget-profile-select:disabled,\n.cv-widget-state-select:disabled {\n background: #f8f9fa;\n color: #6c757d;\n cursor: not-allowed;\n}\n\n.cv-widget-current {\n margin: 16px 0;\n padding: 12px;\n background: #f8f9fa;\n border-radius: 4px;\n border-left: 4px solid #007bff;\n}\n\n.cv-widget-current label {\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: #666;\n margin-bottom: 4px;\n}\n\n.cv-widget-current-view {\n font-weight: 500;\n color: #333;\n}\n\n.cv-widget-reset {\n width: 100%;\n padding: 8px 16px;\n background: #dc3545;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 14px;\n font-weight: 500;\n}\n\n.cv-widget-reset:hover {\n background: #c82333;\n}\n\n.cv-widget-reset:active {\n background: #bd2130;\n}\n\n/* Responsive design for mobile */\n@media (max-width: 768px) {\n .cv-widget-top-right,\n .cv-widget-top-left {\n top: 10px;\n }\n\n .cv-widget-bottom-right,\n .cv-widget-bottom-left {\n bottom: 10px;\n }\n\n /* All widgets stay flush with screen edges */\n .cv-widget-top-right,\n .cv-widget-bottom-right,\n .cv-widget-middle-right {\n right: 0;\n }\n\n .cv-widget-top-left,\n .cv-widget-bottom-left,\n .cv-widget-middle-left {\n left: 0;\n }\n\n /* Slightly smaller on mobile */\n .cv-widget-icon {\n width: 60px;\n height: 32px;\n }\n\n .cv-widget-icon:hover {\n width: 75px;\n }\n}\n\n/* Modal styles */\n.cv-widget-modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10002;\n animation: fadeIn 0.2s ease;\n}\n\n.cv-widget-modal-overlay.cv-hidden {\n display: none;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.cv-widget-modal {\n background: white;\n border-radius: 0.75rem;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n max-width: 32rem;\n width: 90vw;\n max-height: 80vh;\n animation: slideIn 0.2s ease;\n display: flex;\n flex-direction: column;\n}\n\n@keyframes slideIn {\n from { \n opacity: 0;\n transform: scale(0.9) translateY(-20px);\n }\n to { \n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n\n.cv-modal-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.5rem 1rem;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n.cv-modal-header-content {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n}\n\n.cv-modal-icon {\n position: relative;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 9999px;\n}\n\n.cv-modal-icon-svg {\n width: 100%;\n height: 100%;\n opacity: 1;\n}\n\n.cv-modal-title {\n font-size: 1.125rem;\n font-weight: bold;\n color: rgba(0, 0, 0, 0.9);\n margin: 0;\n}\n\n.cv-modal-close {\n width: 2rem;\n height: 2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 9999px;\n background: transparent;\n border: none;\n color: rgba(0, 0, 0, 0.6);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.cv-modal-close:hover {\n background: rgba(62, 132, 244, 0.1);\n color: #3e84f4;\n}\n\n.cv-modal-close-icon {\n width: 1.25rem;\n height: 1.25rem;\n}\n\n.cv-modal-main {\n padding: 1rem;\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n overflow-y: auto;\n max-height: calc(80vh - 8rem);\n}\n\n.cv-modal-description {\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.8);\n margin: 0;\n line-height: 1.4;\n}\n\n.cv-content-section,\n.cv-tab-groups-section {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.cv-section-heading {\n font-size: 1rem;\n font-weight: bold;\n color: rgba(0, 0, 0, 0.9);\n margin: 0;\n}\n\n.cv-widget-modal-actions {\n margin-top: 20px;\n padding-top: 16px;\n border-top: 1px solid #e9ecef;\n}\n\n.cv-widget-restore {\n width: 100%;\n padding: 10px 16px;\n background: #28a745;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 14px;\n font-weight: 500;\n}\n\n.cv-widget-restore:hover {\n background: #218838;\n}\n\n.cv-widget-create-state {\n width: 100%;\n padding: 10px 16px;\n background: #007bff;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 14px;\n font-weight: 500;\n margin-bottom: 10px;\n}\n\n.cv-widget-create-state:hover {\n background: #0056b3;\n}\n\n.cv-widget-theme-dark .cv-widget-modal {\n background: #101722;\n color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-modal-header {\n border-color: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-modal-title {\n color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-modal-close {\n color: rgba(255, 255, 255, 0.6);\n}\n\n.cv-widget-theme-dark .cv-modal-close:hover {\n background: rgba(62, 132, 244, 0.2);\n color: #3e84f4;\n}\n\n.cv-widget-theme-dark .cv-modal-description {\n color: rgba(255, 255, 255, 0.8);\n}\n\n.cv-widget-theme-dark .cv-section-heading {\n color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-toggles-container\n.cv-widget-theme-dark .cv-tabgroups-container {\n border-color: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-toggle-card,\n.cv-widget-theme-dark .cv-tabgroup-card {\n background: #101722;\n border-color: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-toggle-title,\n.cv-widget-theme-dark .cv-tabgroup-title {\n color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-toggle-description,\n.cv-widget-theme-dark .cv-tabgroup-description {\n color: rgba(255, 255, 255, 0.6);\n}\n\n.cv-widget-theme-dark .cv-toggle-slider {\n background: rgba(255, 255, 255, 0.2);\n}\n\n.cv-widget-theme-dark .cv-tab-group-description {\n color: rgba(255, 255, 255, 0.8);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-select {\n background: #101722;\n border-color: rgba(255, 255, 255, 0.2);\n color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-modal-footer {\n border-color: rgba(255, 255, 255, 0.1);\n background: #101722;\n}\n\n.cv-widget-theme-dark .cv-reset-btn {\n color: #e2e8f0;\n background: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-reset-btn:hover {\n background: rgba(255, 255, 255, 0.2);\n}\n\n/* Custom state creator styles */\n.cv-custom-state-modal {\n max-width: 500px;\n}\n\n.cv-custom-state-form .cv-section-header {\n font-size: 16px;\n font-weight: 600;\n color: #333;\n border-bottom: 1px solid #e9ecef;\n padding-bottom: 5px;\n}\n\n.cv-custom-state-form p {\n font-size: 15px;\n line-height: 1.6;\n color: #555;\n margin-bottom: 24px;\n text-align: justify;\n}\n\n.cv-custom-state-section {\n margin-bottom: 16px;\n}\n\n.cv-custom-state-section label {\n display: block;\n margin-bottom: 4px;\n font-weight: 500;\n color: #555;\n}\n\n.cv-custom-state-input {\n width: 100%;\n padding: 8px 12px;\n border: 1px solid #ddd;\n border-radius: 4px;\n background: white;\n font-size: 14px;\n}\n\n.cv-custom-state-input:focus {\n outline: none;\n border-color: #007bff;\n box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);\n}\n\n/* Toggles Container */\n.cv-toggles-container {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n border-radius: 0.5rem;\n border: 1px solid rgba(0, 0, 0, 0.1);\n overflow: hidden;\n}\n\n.cv-toggle-card,\n.cv-tabgroup-card {\n background: white;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n.cv-toggle-card:last-child {\n border-bottom: none;\n}\n\n.cv-toggle-content {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.75rem;\n}\n\n.cv-toggle-title {\n font-weight: 500;\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.9);\n margin: 0 0 0.125rem 0;\n}\n\n.cv-toggle-description {\n font-size: 0.75rem;\n color: rgba(0, 0, 0, 0.6);\n margin: 0;\n}\n\n.cv-toggle-label{\n position: relative;\n display: inline-block;\n width: 2.75rem;\n height: 1.5rem;\n cursor: pointer;\n}\n\n.cv-toggle-input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.cv-toggle-slider {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.2);\n border-radius: 9999px;\n transition: background-color 0.2s ease;\n}\n\n.cv-toggle-slider:before {\n position: absolute;\n content: \"\";\n height: 1rem;\n width: 1rem;\n left: 0.25rem;\n bottom: 0.25rem;\n background: white;\n border-radius: 50%;\n transition: transform 0.2s ease;\n}\n\n.cv-toggle-input:checked + .cv-toggle-slider {\n background: #3e84f4;\n}\n\n.cv-toggle-input:checked + .cv-toggle-slider:before {\n transform: translateX(1.25rem);\n}\n\n/* Dark theme toggle switch styles */\n.cv-widget-theme-dark .cv-toggle-switch {\n background: #4a5568;\n}\n\n.cv-widget-theme-dark .cv-toggle-switch:hover {\n background: #5a6578;\n}\n\n.cv-widget-theme-dark .cv-toggle-switch.cv-toggle-active {\n background: #63b3ed;\n}\n\n.cv-widget-theme-dark .cv-toggle-switch.cv-toggle-active:hover {\n background: #4299e1;\n}\n\n/* Tab Groups Container */\n.cv-tab-groups-list {\n display: flex;\n flex-direction: column;\n gap: 1px;\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 0.5rem;\n overflow: hidden;\n}\n\n/* Tab Group Card - Header (Navigation Headers toggle) */\n.cv-tabgroup-card.cv-tabgroup-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.75rem;\n border-bottom: 0px;\n}\n\n.cv-tabgroup-card.cv-tabgroup-header .cv-tabgroup-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n gap: 1rem;\n}\n\n/* Navigation toggle icon container */\n.cv-nav-toggle-container {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.cv-nav-icon {\n width: 2rem;\n height: 2rem;\n color: rgba(0, 0, 0, 0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: color 0.2s ease;\n}\n\n/* Logo box - centered grey box on its own row */\n.cv-tabgroup-logo-box {\n width: 3.5rem;\n height: 3.5rem;\n background: rgba(0, 0, 0, 0.08);\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-bottom: 0.5rem;\n}\n\n/* Title container for title alignment (without icon) */\n.cv-tabgroup-title-container {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n/* Hover state for icon - apply to the entire tabgroup-row */\n.cv-tabgroup-card.cv-tabgroup-header:hover .cv-nav-icon {\n color: #3e84f4;\n}\n\n.cv-widget-theme-dark .cv-nav-icon {\n color: rgba(255, 255, 255, 0.8);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-card.cv-tabgroup-header:hover .cv-nav-icon {\n color: #60a5fa;\n}\n\n/* Tab Group Card - Items */\n.cv-tabgroup-card.cv-tabgroup-item {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding: 0.75rem;\n background: white;\n border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n}\n\n.cv-tabgroup-card.cv-tabgroup-item:last-child {\n border-bottom: none;\n}\n\n/* Tab Group Info */\n.cv-tabgroup-info {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\n.cv-tabgroup-title {\n font-weight: 500;\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.9);\n margin: 0 0 0 0;\n}\n\n.cv-tabgroup-description {\n font-size: 0.75rem;\n color: rgba(0, 0, 0, 0.6);\n margin: 0;\n line-height: 1.3;\n}\n\n/* Tab Group Label (for select dropdowns) */\n.cv-tabgroup-label {\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.8);\n margin: 0;\n line-height: 1.4;\n font-weight: 500;\n display: block;\n cursor: pointer;\n}\n\n/* Tab Group Select */\n.cv-tabgroup-select {\n width: 100%;\n border-radius: 0.5rem;\n background: white;\n border: 1px solid rgba(0, 0, 0, 0.15);\n color: rgba(0, 0, 0, 0.9);\n padding: 0.5rem 0.75rem;\n font-size: 0.875rem;\n cursor: pointer;\n transition: all 0.15s ease;\n font-family: inherit;\n}\n\n.cv-tabgroup-select:hover {\n border-color: rgba(0, 0, 0, 0.25);\n}\n\n.cv-tabgroup-select:focus {\n outline: none;\n border-color: #3e84f4;\n box-shadow: 0 0 0 2px rgba(62, 132, 244, 0.2);\n}\n\n/* Modern Toggle Switch */\n.cv-toggle-switch {\n position: relative;\n display: inline-flex;\n align-items: center;\n width: 44px;\n height: 24px;\n background: rgba(0, 0, 0, 0.1);\n border-radius: 9999px;\n padding: 2px;\n box-sizing: border-box;\n cursor: pointer;\n transition: background-color 0.2s ease;\n border: none;\n}\n\n.cv-toggle-switch input {\n display: none;\n}\n\n.cv-toggle-switch .cv-switch-bg {\n position: absolute;\n inset: 0;\n border-radius: 9999px;\n background: rgba(0, 0, 0, 0.1);\n transition: background-color 0.2s ease;\n pointer-events: none;\n}\n\n.cv-toggle-switch .cv-switch-knob {\n position: relative;\n width: 20px;\n height: 20px;\n background: white;\n border-radius: 50%;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n transition: transform 0.2s ease;\n z-index: 1;\n}\n\n.cv-toggle-switch input:checked + .cv-switch-bg {\n background: #3e84f4;\n}\n\n.cv-toggle-switch input:checked ~ .cv-switch-knob {\n transform: translateX(20px);\n}\n\n/* Dark Theme - Tab Groups */\n.cv-widget-theme-dark .cv-tabgroup-card.cv-tabgroup-header {\n background: #101722;\n border-bottom-color: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-card.cv-tabgroup-item {\n background: #101722;\n border-bottom-color: rgba(255, 255, 255, 0.05);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-title {\n color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-tabgroup-description {\n color: rgba(255, 255, 255, 0.6);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-label {\n color: rgba(255, 255, 255, 0.8);\n}\n\n.cv-widget-theme-dark .cv-tab-groups-list {\n border-color: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-select {\n background: #101722;\n border-color: rgba(255, 255, 255, 0.15);\n color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-tabgroup-select:hover {\n border-color: rgba(255, 255, 255, 0.25);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-select:focus {\n border-color: #60a5fa;\n box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);\n}\n\n/* Dark Theme - Toggle Switch */\n.cv-widget-theme-dark .cv-toggle-switch .cv-switch-bg {\n background: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-toggle-switch .cv-switch-knob {\n background: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-toggle-switch input:checked + .cv-switch-bg {\n background: #63b3ed;\n}\n\n.cv-modal-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0.75rem;\n border-top: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n.cv-reset-btn,\n.cv-share-btn {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.375rem 0.75rem;\n border-radius: 0.5rem;\n font-weight: 600;\n font-size: 0.875rem;\n cursor: pointer;\n transition: all 0.2s ease;\n border: none;\n}\n\n.cv-reset-btn {\n color: rgba(0, 0, 0, 0.9);\n background: rgba(0, 0, 0, 0.1);\n}\n\n.cv-reset-btn:hover {\n background: rgba(0, 0, 0, 0.2);\n}\n\n.cv-share-btn {\n color: white;\n background: #3e84f4;\n}\n\n.cv-share-btn:hover {\n background: rgba(62, 132, 244, 0.9);\n}\n\n.cv-btn-icon {\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: transform 0.2s ease;\n}\n\n/* Dark theme custom state styles */\n/* Welcome modal styles */\n.cv-welcome-modal {\n max-width: 32rem;\n width: 90vw;\n background: white;\n border-radius: 0.75rem;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n animation: slideIn 0.2s ease;\n display: flex;\n flex-direction: column;\n}\n\n.cv-modal-main {\n padding: 1rem;\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n overflow-y: auto;\n max-height: calc(80vh - 8rem);\n}\n\n.cv-welcome-message {\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.8);\n margin: 0;\n line-height: 1.4;\n text-align: center;\n}\n\n.cv-welcome-message a {\n color: #3e84f4;\n text-align: justify;\n text-decoration: none;\n}\n\n.cv-welcome-message a:hover {\n text-decoration: underline;\n}\n\n.cv-welcome-widget-preview {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n padding: 1rem;\n background: #f8f9fa;\n border-radius: 0.5rem;\n margin: 1rem 0;\n}\n\n.cv-welcome-widget-icon {\n width: 2rem;\n height: 2rem;\n background: rgba(62, 132, 244, 0.1);\n border-radius: 9999px;\n display: flex;\n align-items: center;\n justify-content: center;\n animation: cv-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n color: #3e84f4;\n}\n\n.cv-welcome-widget-label {\n font-size: 0.875rem;\n font-weight: 500;\n color: rgba(0, 0, 0, 0.8);\n margin: 0;\n}\n\n.cv-welcome-got-it {\n width: 100%;\n background: #3e84f4;\n color: white;\n font-weight: 600;\n padding: 0.75rem 1rem;\n border-radius: 0.5rem;\n border: none;\n cursor: pointer;\n font-size: 0.875rem;\n transition: background-color 0.2s ease;\n outline: none;\n}\n\n.cv-welcome-got-it:hover {\n background: rgba(62, 132, 244, 0.9);\n}\n\n.cv-welcome-got-it:focus {\n box-shadow: 0 0 0 2px rgba(62, 132, 244, 0.5);\n}\n\n/* Animations */\n@keyframes cv-pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}\n\n/* Dark theme welcome modal styles */\n.cv-widget-theme-dark .cv-welcome-modal {\n background: #101722;\n}\n\n.cv-widget-theme-dark .cv-welcome-message {\n color: rgba(255, 255, 255, 0.8);\n}\n\n.cv-widget-theme-dark .cv-welcome-message a {\n color: #60a5fa;\n}\n\n.cv-widget-theme-dark .cv-welcome-widget-preview {\n background: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-welcome-widget-label {\n color: #e2e8f0;\n}\n\n/* Dark theme logo box */\n.cv-widget-theme-dark .cv-tabgroup-logo-box {\n background: rgba(255, 255, 255, 0.1);\n}\n\n/* Spinning animation for reset button icon */\n@keyframes cv-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(-360deg);\n }\n}\n\n.cv-spinning {\n animation: cv-spin 0.6s ease-in-out;\n}\n\n/* Hide widget icon in print view */\n@media print {\n .cv-widget-icon {\n display: none !important;\n }\n}\n";
|
|
9
9
|
/**
|
|
10
10
|
* Inject widget styles into the document head
|
|
11
11
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"widget-styles.d.ts","sourceRoot":"","sources":["../../../src/styles/widget-styles.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,eAAO,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"widget-styles.d.ts","sourceRoot":"","sources":["../../../src/styles/widget-styles.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,eAAO,MAAM,aAAa,63pBAmjCzB,CAAC;AAEF;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,IAAI,CAQzC"}
|
|
@@ -46,13 +46,26 @@ export interface TabGroupConfig {
|
|
|
46
46
|
label?: string;
|
|
47
47
|
/** Available tabs in this group */
|
|
48
48
|
tabs: TabConfig[];
|
|
49
|
+
/** Determines if the tab group is only shown on pages where it's used. */
|
|
50
|
+
isLocal?: boolean;
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* Configuration for a single toggle.
|
|
54
|
+
*/
|
|
55
|
+
export interface ToggleConfig {
|
|
56
|
+
/** Toggle identifier */
|
|
57
|
+
id: string;
|
|
58
|
+
/** Display label for the toggle */
|
|
59
|
+
label?: string;
|
|
60
|
+
/** Determines if the toggle is only shown on pages where it's used. */
|
|
61
|
+
isLocal?: boolean;
|
|
49
62
|
}
|
|
50
63
|
/**
|
|
51
64
|
* Configuration for the site, has default state and list of toggles
|
|
52
65
|
*/
|
|
53
66
|
export interface Config {
|
|
54
67
|
/** All available toggle categories */
|
|
55
|
-
|
|
68
|
+
toggles?: ToggleConfig[];
|
|
56
69
|
/** Default state for the site */
|
|
57
70
|
defaultState?: State;
|
|
58
71
|
/** Optional tab group configurations */
|
|
@@ -62,7 +75,7 @@ export interface Config {
|
|
|
62
75
|
* Represents the configuration file structure for CustomViews auto-initialization.
|
|
63
76
|
*/
|
|
64
77
|
export interface ConfigFile {
|
|
65
|
-
/** Core configuration object with
|
|
78
|
+
/** Core configuration object with toggles and defaultState */
|
|
66
79
|
config?: Config;
|
|
67
80
|
/** Path to the assets JSON file */
|
|
68
81
|
assetsJsonPath?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,sEAAsE;IACtE,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAC1C,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0BAA0B;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,WAAW,KAAK;IACpB,uEAAuE;IACvE,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAC;IACrB,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC/B;AAED,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC;AAE9B;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,qBAAqB;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,gDAAgD;IAChD,EAAE,EAAE,MAAM,CAAC;IACX,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,IAAI,EAAE,SAAS,EAAE,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,MAAM;IACrB,sCAAsC;IACtC,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,sEAAsE;IACtE,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAC1C,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0BAA0B;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,WAAW,KAAK;IACpB,uEAAuE;IACvE,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAC;IACrB,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC/B;AAED,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC;AAE9B;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,qBAAqB;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,gDAAgD;IAChD,EAAE,EAAE,MAAM,CAAC;IACX,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,MAAM;IACrB,sCAAsC;IACtC,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,iCAAiC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,wCAAwC;IACxC,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;CAC9B;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gFAAgF;IAChF,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,mCAAmC;IACnC,MAAM,CAAC,EAAE;QACP,oCAAoC;QACpC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,sBAAsB;QACtB,QAAQ,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,GAAG,aAAa,GAAG,cAAc,CAAC;QACtG,mBAAmB;QACnB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;QACzB,mCAAmC;QACnC,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,mBAAmB;QACnB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,8BAA8B;QAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,mDAAmD;QACnD,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,0BAA0B;QAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,4BAA4B;QAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,mEAAmE;QACnE,aAAa,CAAC,EAAE,OAAO,CAAC;KACzB,CAAC;CACH;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,WAAW,EAAE,GAAG,CAAC;QACjB,iBAAiB,EAAE,GAAG,CAAC;QACvB,mBAAmB,CAAC,EAAE;YACpB,IAAI,EAAE,GAAG,CAAC;YACV,MAAM,CAAC,EAAE,GAAG,CAAC;SACd,CAAC;KACH;CACF"}
|