@syntrologie/adapt-overlays 2.14.0 → 2.15.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/WorkflowWidgetLit.d.ts +123 -0
- package/dist/WorkflowWidgetLit.d.ts.map +1 -0
- package/dist/WorkflowWidgetLit.js +617 -0
- package/dist/runtime-lit.d.ts +94 -0
- package/dist/runtime-lit.d.ts.map +1 -0
- package/dist/runtime-lit.js +402 -0
- package/dist/runtime.d.ts.map +1 -1
- package/dist/runtime.js +10 -0
- package/dist/schema.d.ts +4 -4
- package/node_modules/@syntro/design-system/dist/tokens/index.d.ts +2 -0
- package/node_modules/@syntro/design-system/dist/tokens/index.d.ts.map +1 -1
- package/node_modules/@syntro/design-system/dist/tokens/index.js +2 -0
- package/node_modules/@syntro/design-system/dist/tokens/panel-shell.d.ts +93 -0
- package/node_modules/@syntro/design-system/dist/tokens/panel-shell.d.ts.map +1 -0
- package/node_modules/@syntro/design-system/dist/tokens/panel-shell.js +72 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPickerLit.d.ts +84 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPickerLit.d.ts.map +1 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPickerLit.js +323 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggleLit.d.ts +25 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggleLit.d.ts.map +1 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggleLit.js +55 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLineLit.d.ts +33 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLineLit.d.ts.map +1 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLineLit.js +118 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DetectionBadgeLit.d.ts +32 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DetectionBadgeLit.d.ts.map +1 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DetectionBadgeLit.js +68 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DismissedSectionLit.d.ts +34 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DismissedSectionLit.d.ts.map +1 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DismissedSectionLit.js +57 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditBackButtonLit.d.ts +13 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditBackButtonLit.d.ts.map +1 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditBackButtonLit.js +31 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorBodyLit.d.ts +7 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorBodyLit.d.ts.map +1 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorBodyLit.js +15 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorCardLit.d.ts +36 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorCardLit.d.ts.map +1 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorCardLit.js +102 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorFooterLit.d.ts +20 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorFooterLit.d.ts.map +1 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorFooterLit.js +48 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorHeaderLit.d.ts +16 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorHeaderLit.d.ts.map +1 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorHeaderLit.js +25 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorInputLit.d.ts +66 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorInputLit.d.ts.map +1 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorInputLit.js +87 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorLayoutLit.d.ts +7 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorLayoutLit.d.ts.map +1 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorLayoutLit.js +15 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorPanelShell.d.ts.map +1 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorPanelShell.js +28 -17
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorPanelShellLit.d.ts +66 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorPanelShellLit.d.ts.map +1 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorPanelShellLit.js +528 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorSelectLit.d.ts +41 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorSelectLit.d.ts.map +1 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorSelectLit.js +63 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorTextareaLit.d.ts +55 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorTextareaLit.d.ts.map +1 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorTextareaLit.js +92 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ElementHighlightLit.d.ts +90 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ElementHighlightLit.d.ts.map +1 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ElementHighlightLit.js +242 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EmptyStateLit.d.ts +12 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EmptyStateLit.d.ts.map +1 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EmptyStateLit.js +21 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/GroupHeaderLit.d.ts +21 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/GroupHeaderLit.d.ts.map +1 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/GroupHeaderLit.js +33 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/TriggerJourneyLit.d.ts +28 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/TriggerJourneyLit.d.ts.map +1 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/TriggerJourneyLit.js +121 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/controllers/PanelShellController.d.ts +110 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/controllers/PanelShellController.d.ts.map +1 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/controllers/PanelShellController.js +476 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/index.d.ts +2 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/index.d.ts.map +1 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/index.js +1 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/lit-elements.d.ts +15 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/lit-elements.d.ts.map +1 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/lit-elements.js +14 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/utils/elementChainRecommender.d.ts +0 -4
- package/node_modules/@syntrologie/shared-editor-ui/dist/utils/elementChainRecommender.d.ts.map +1 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/utils/elementChainRecommender.js +17 -1
- package/node_modules/@syntrologie/shared-editor-ui/package.json +9 -1
- package/package.json +9 -2
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EditorTextareaLit.d.ts","sourceRoot":"","sources":["../../src/components/EditorTextareaLit.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,qBAAa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAWxB;IAEF,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEzB,OAAO,CAAC,YAAY,CAAS;;IAOpB,gBAAgB;IAIhB,OAAO;IAShB,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,YAAY;IAcX,MAAM;CAqChB"}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import { html, LitElement } from 'lit';
|
|
2
|
+
let _textareaIdCounter = 0;
|
|
3
|
+
export class EditorTextareaLit extends LitElement {
|
|
4
|
+
constructor() {
|
|
5
|
+
super();
|
|
6
|
+
this.disabled = false;
|
|
7
|
+
this.required = false;
|
|
8
|
+
this.readonly = false;
|
|
9
|
+
this._generatedId = `se-textarea-${++_textareaIdCounter}`;
|
|
10
|
+
}
|
|
11
|
+
createRenderRoot() {
|
|
12
|
+
return this;
|
|
13
|
+
}
|
|
14
|
+
updated() {
|
|
15
|
+
// Auto-resize to fit content (mirrors the React useEffect auto-resize)
|
|
16
|
+
const el = this.querySelector('textarea');
|
|
17
|
+
if (el) {
|
|
18
|
+
el.style.height = 'auto';
|
|
19
|
+
el.style.height = `${el.scrollHeight}px`;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
_handleChange(e) {
|
|
23
|
+
const target = e.target;
|
|
24
|
+
this.value = target.value;
|
|
25
|
+
// Trigger auto-resize on each change
|
|
26
|
+
target.style.height = 'auto';
|
|
27
|
+
target.style.height = `${target.scrollHeight}px`;
|
|
28
|
+
this.dispatchEvent(new CustomEvent('change', {
|
|
29
|
+
detail: { value: target.value },
|
|
30
|
+
bubbles: true,
|
|
31
|
+
composed: true,
|
|
32
|
+
}));
|
|
33
|
+
}
|
|
34
|
+
_handleInput(e) {
|
|
35
|
+
const target = e.target;
|
|
36
|
+
this.value = target.value;
|
|
37
|
+
target.style.height = 'auto';
|
|
38
|
+
target.style.height = `${target.scrollHeight}px`;
|
|
39
|
+
this.dispatchEvent(new CustomEvent('input', {
|
|
40
|
+
detail: { value: target.value },
|
|
41
|
+
bubbles: true,
|
|
42
|
+
composed: true,
|
|
43
|
+
}));
|
|
44
|
+
}
|
|
45
|
+
render() {
|
|
46
|
+
const id = this.textareaId || this._generatedId;
|
|
47
|
+
const classes = [
|
|
48
|
+
'se-w-full se-py-2 se-px-3 se-rounded-lg se-border se-border-input-field-border se-bg-slate-grey-3 se-text-text-primary se-text-sm se-font-[inherit] se-mb-2 se-resize-y se-min-h-[60px] se-max-h-[50vh] se-overflow-y-auto se-box-border',
|
|
49
|
+
'placeholder:se-text-input-field-text-placeholder',
|
|
50
|
+
'focus:se-border-input-field-border-selected focus:se-outline-none focus:se-shadow-focus-primary',
|
|
51
|
+
'disabled:se-bg-input-field-bg-disabled disabled:se-cursor-not-allowed disabled:se-opacity-50',
|
|
52
|
+
this.textareaClass || '',
|
|
53
|
+
]
|
|
54
|
+
.filter(Boolean)
|
|
55
|
+
.join(' ');
|
|
56
|
+
return html `
|
|
57
|
+
<div>
|
|
58
|
+
${this.label
|
|
59
|
+
? html `<label
|
|
60
|
+
for=${id}
|
|
61
|
+
class="se-text-sm se-font-medium se-text-input-field-text-label se-mb-1 se-block"
|
|
62
|
+
>${this.label}</label>`
|
|
63
|
+
: ''}
|
|
64
|
+
<textarea
|
|
65
|
+
id=${id}
|
|
66
|
+
class=${classes}
|
|
67
|
+
name=${this.name ?? ''}
|
|
68
|
+
placeholder=${this.placeholder ?? ''}
|
|
69
|
+
?disabled=${this.disabled}
|
|
70
|
+
?required=${this.required}
|
|
71
|
+
?readonly=${this.readonly}
|
|
72
|
+
rows=${this.rows ?? ''}
|
|
73
|
+
@change=${this._handleChange}
|
|
74
|
+
@input=${this._handleInput}
|
|
75
|
+
>${this.value ?? ''}</textarea>
|
|
76
|
+
</div>
|
|
77
|
+
`;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
EditorTextareaLit.properties = {
|
|
81
|
+
label: { type: String },
|
|
82
|
+
textareaClass: { type: String, attribute: 'textarea-class' },
|
|
83
|
+
textareaId: { type: String, attribute: 'textarea-id' },
|
|
84
|
+
name: { type: String },
|
|
85
|
+
value: { type: String },
|
|
86
|
+
placeholder: { type: String },
|
|
87
|
+
disabled: { type: Boolean },
|
|
88
|
+
required: { type: Boolean },
|
|
89
|
+
readonly: { type: Boolean },
|
|
90
|
+
rows: { type: Number },
|
|
91
|
+
};
|
|
92
|
+
customElements.define('se-editor-textarea', EditorTextareaLit);
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* ElementHighlightLit — DOM overlay that highlights a specific element (Lit web component).
|
|
3
|
+
*
|
|
4
|
+
* Tracks element position via scroll/resize listeners and ResizeObserver.
|
|
5
|
+
* Renders with position: fixed and inline styles exclusively.
|
|
6
|
+
*
|
|
7
|
+
* Must stay in light DOM (document.body) for same-tree visual stacking context
|
|
8
|
+
* when highlighting host page elements.
|
|
9
|
+
*
|
|
10
|
+
* Lit port of ElementHighlight.tsx — preserves all behavior including:
|
|
11
|
+
* - Live DOMRect tracking (scroll, resize, ResizeObserver)
|
|
12
|
+
* - requestAnimationFrame-batched updates
|
|
13
|
+
* - Configurable border, label, remove button
|
|
14
|
+
* - Dimensions display mode
|
|
15
|
+
* - Click/keyboard interaction support
|
|
16
|
+
*/
|
|
17
|
+
import { LitElement, nothing } from 'lit';
|
|
18
|
+
export declare class ElementHighlightLit extends LitElement {
|
|
19
|
+
static properties: {
|
|
20
|
+
element: {
|
|
21
|
+
attribute: boolean;
|
|
22
|
+
};
|
|
23
|
+
color: {
|
|
24
|
+
type: StringConstructor;
|
|
25
|
+
};
|
|
26
|
+
bgColor: {
|
|
27
|
+
type: StringConstructor;
|
|
28
|
+
attribute: string;
|
|
29
|
+
};
|
|
30
|
+
borderStyle: {
|
|
31
|
+
type: StringConstructor;
|
|
32
|
+
attribute: string;
|
|
33
|
+
};
|
|
34
|
+
borderWidth: {
|
|
35
|
+
type: NumberConstructor;
|
|
36
|
+
attribute: string;
|
|
37
|
+
};
|
|
38
|
+
label: {
|
|
39
|
+
type: StringConstructor;
|
|
40
|
+
};
|
|
41
|
+
showRemove: {
|
|
42
|
+
type: BooleanConstructor;
|
|
43
|
+
attribute: string;
|
|
44
|
+
};
|
|
45
|
+
showDimensions: {
|
|
46
|
+
type: BooleanConstructor;
|
|
47
|
+
attribute: string;
|
|
48
|
+
};
|
|
49
|
+
zIndex: {
|
|
50
|
+
type: NumberConstructor;
|
|
51
|
+
attribute: string;
|
|
52
|
+
};
|
|
53
|
+
padding: {
|
|
54
|
+
type: NumberConstructor;
|
|
55
|
+
};
|
|
56
|
+
interactive: {
|
|
57
|
+
type: BooleanConstructor;
|
|
58
|
+
};
|
|
59
|
+
_rect: {
|
|
60
|
+
state: boolean;
|
|
61
|
+
};
|
|
62
|
+
};
|
|
63
|
+
element: HTMLElement | null;
|
|
64
|
+
color: string;
|
|
65
|
+
bgColor: string;
|
|
66
|
+
borderStyle: 'solid' | 'dashed';
|
|
67
|
+
borderWidth: number;
|
|
68
|
+
label: string | undefined;
|
|
69
|
+
showRemove: boolean;
|
|
70
|
+
showDimensions: boolean;
|
|
71
|
+
zIndex: number;
|
|
72
|
+
padding: number;
|
|
73
|
+
/** When true, the highlight is clickable and emits 'highlight-click' events. */
|
|
74
|
+
interactive: boolean;
|
|
75
|
+
private _rect;
|
|
76
|
+
private _resizeObserver;
|
|
77
|
+
private _rafId;
|
|
78
|
+
createRenderRoot(): this;
|
|
79
|
+
connectedCallback(): void;
|
|
80
|
+
disconnectedCallback(): void;
|
|
81
|
+
updated(changed: Map<string, unknown>): void;
|
|
82
|
+
private _attachTracking;
|
|
83
|
+
private _detachTracking;
|
|
84
|
+
private _scheduleUpdate;
|
|
85
|
+
private _handleClick;
|
|
86
|
+
private _handleKeyDown;
|
|
87
|
+
private _handleRemove;
|
|
88
|
+
render(): typeof nothing | import("lit-html").TemplateResult<1>;
|
|
89
|
+
}
|
|
90
|
+
//# sourceMappingURL=ElementHighlightLit.d.ts.map
|
package/node_modules/@syntrologie/shared-editor-ui/dist/components/ElementHighlightLit.d.ts.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ElementHighlightLit.d.ts","sourceRoot":"","sources":["../../src/components/ElementHighlightLit.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,EAAQ,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAOhD,qBAAa,mBAAoB,SAAQ,UAAU;IACjD,OAAgB,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAcxB;IAEF,OAAO,EAAE,WAAW,GAAG,IAAI,CAAQ;IACnC,KAAK,EAAE,MAAM,CAAkB;IAC/B,OAAO,SAAiB;IACxB,WAAW,EAAE,OAAO,GAAG,QAAQ,CAAW;IAC1C,WAAW,SAAK;IAChB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,UAAU,UAAS;IACnB,cAAc,UAAS;IACvB,MAAM,SAAc;IACpB,OAAO,SAAK;IACZ,gFAAgF;IAChF,WAAW,UAAS;IAGpB,OAAO,CAAC,KAAK,CAAwB;IAGrC,OAAO,CAAC,eAAe,CAA+B;IACtD,OAAO,CAAC,MAAM,CAAuB;IAG5B,gBAAgB;IAIhB,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAUrD,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,eAAe;IAavB,OAAO,CAAC,eAAe,CAQrB;IAIF,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,aAAa;IAaZ,MAAM;CA4GhB"}
|
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* ElementHighlightLit — DOM overlay that highlights a specific element (Lit web component).
|
|
3
|
+
*
|
|
4
|
+
* Tracks element position via scroll/resize listeners and ResizeObserver.
|
|
5
|
+
* Renders with position: fixed and inline styles exclusively.
|
|
6
|
+
*
|
|
7
|
+
* Must stay in light DOM (document.body) for same-tree visual stacking context
|
|
8
|
+
* when highlighting host page elements.
|
|
9
|
+
*
|
|
10
|
+
* Lit port of ElementHighlight.tsx — preserves all behavior including:
|
|
11
|
+
* - Live DOMRect tracking (scroll, resize, ResizeObserver)
|
|
12
|
+
* - requestAnimationFrame-batched updates
|
|
13
|
+
* - Configurable border, label, remove button
|
|
14
|
+
* - Dimensions display mode
|
|
15
|
+
* - Click/keyboard interaction support
|
|
16
|
+
*/
|
|
17
|
+
import { colors } from '@syntro/design-system';
|
|
18
|
+
import { html, LitElement, nothing } from 'lit';
|
|
19
|
+
import { styleMap } from 'lit/directives/style-map.js';
|
|
20
|
+
// =============================================================================
|
|
21
|
+
// Component
|
|
22
|
+
// =============================================================================
|
|
23
|
+
export class ElementHighlightLit extends LitElement {
|
|
24
|
+
constructor() {
|
|
25
|
+
super(...arguments);
|
|
26
|
+
this.element = null;
|
|
27
|
+
this.color = colors.blue[4];
|
|
28
|
+
this.bgColor = 'transparent';
|
|
29
|
+
this.borderStyle = 'solid';
|
|
30
|
+
this.borderWidth = 2;
|
|
31
|
+
this.showRemove = false;
|
|
32
|
+
this.showDimensions = false;
|
|
33
|
+
this.zIndex = 2147483644;
|
|
34
|
+
this.padding = 2;
|
|
35
|
+
/** When true, the highlight is clickable and emits 'highlight-click' events. */
|
|
36
|
+
this.interactive = false;
|
|
37
|
+
// Internal tracked rect
|
|
38
|
+
this._rect = null;
|
|
39
|
+
// Observer/listener cleanup
|
|
40
|
+
this._resizeObserver = null;
|
|
41
|
+
this._rafId = null;
|
|
42
|
+
this._scheduleUpdate = () => {
|
|
43
|
+
if (this._rafId != null)
|
|
44
|
+
return;
|
|
45
|
+
this._rafId = requestAnimationFrame(() => {
|
|
46
|
+
this._rafId = null;
|
|
47
|
+
if (this.element) {
|
|
48
|
+
this._rect = this.element.getBoundingClientRect();
|
|
49
|
+
}
|
|
50
|
+
});
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
// No _bound* wrapper needed — method is an arrow class field
|
|
54
|
+
createRenderRoot() {
|
|
55
|
+
return this;
|
|
56
|
+
}
|
|
57
|
+
connectedCallback() {
|
|
58
|
+
super.connectedCallback();
|
|
59
|
+
this._attachTracking();
|
|
60
|
+
}
|
|
61
|
+
disconnectedCallback() {
|
|
62
|
+
super.disconnectedCallback();
|
|
63
|
+
this._detachTracking();
|
|
64
|
+
}
|
|
65
|
+
updated(changed) {
|
|
66
|
+
if (changed.has('element')) {
|
|
67
|
+
// Re-attach tracking when the element changes
|
|
68
|
+
this._detachTracking();
|
|
69
|
+
this._attachTracking();
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
// ---- RECT TRACKING (mirrors useElementRect) ----
|
|
73
|
+
_attachTracking() {
|
|
74
|
+
if (!this.element) {
|
|
75
|
+
this._rect = null;
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
// Initial measurement
|
|
79
|
+
this._rect = this.element.getBoundingClientRect();
|
|
80
|
+
// Scroll (capture phase catches nested scroll containers)
|
|
81
|
+
window.addEventListener('scroll', this._scheduleUpdate, true);
|
|
82
|
+
window.addEventListener('resize', this._scheduleUpdate);
|
|
83
|
+
// Observe element size changes
|
|
84
|
+
this._resizeObserver = new ResizeObserver(this._scheduleUpdate);
|
|
85
|
+
this._resizeObserver.observe(this.element);
|
|
86
|
+
}
|
|
87
|
+
_detachTracking() {
|
|
88
|
+
window.removeEventListener('scroll', this._scheduleUpdate, true);
|
|
89
|
+
window.removeEventListener('resize', this._scheduleUpdate);
|
|
90
|
+
if (this._resizeObserver) {
|
|
91
|
+
this._resizeObserver.disconnect();
|
|
92
|
+
this._resizeObserver = null;
|
|
93
|
+
}
|
|
94
|
+
if (this._rafId != null) {
|
|
95
|
+
cancelAnimationFrame(this._rafId);
|
|
96
|
+
this._rafId = null;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
// ---- EVENT HANDLERS ----
|
|
100
|
+
_handleClick(e) {
|
|
101
|
+
e.stopPropagation();
|
|
102
|
+
e.preventDefault();
|
|
103
|
+
this.dispatchEvent(new CustomEvent('highlight-click', {
|
|
104
|
+
bubbles: true,
|
|
105
|
+
composed: true,
|
|
106
|
+
}));
|
|
107
|
+
}
|
|
108
|
+
_handleKeyDown(e) {
|
|
109
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
110
|
+
e.stopPropagation();
|
|
111
|
+
e.preventDefault();
|
|
112
|
+
this.dispatchEvent(new CustomEvent('highlight-click', {
|
|
113
|
+
bubbles: true,
|
|
114
|
+
composed: true,
|
|
115
|
+
}));
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
_handleRemove(e) {
|
|
119
|
+
e.stopPropagation();
|
|
120
|
+
e.preventDefault();
|
|
121
|
+
this.dispatchEvent(new CustomEvent('highlight-remove', {
|
|
122
|
+
bubbles: true,
|
|
123
|
+
composed: true,
|
|
124
|
+
}));
|
|
125
|
+
}
|
|
126
|
+
// ---- RENDER ----
|
|
127
|
+
render() {
|
|
128
|
+
const rect = this._rect;
|
|
129
|
+
if (!rect)
|
|
130
|
+
return nothing;
|
|
131
|
+
const el = this.element;
|
|
132
|
+
const hasInteraction = this.interactive || this.showRemove;
|
|
133
|
+
// Build dimensions label from element metadata
|
|
134
|
+
let dimensionsLabel = null;
|
|
135
|
+
if (this.showDimensions && el) {
|
|
136
|
+
const tag = el.tagName.toLowerCase();
|
|
137
|
+
const id = el.id ? `#${el.id}` : '';
|
|
138
|
+
const cls = el.className && typeof el.className === 'string'
|
|
139
|
+
? `.${el.className.split(' ').filter(Boolean).slice(0, 2).join('.')}`
|
|
140
|
+
: '';
|
|
141
|
+
dimensionsLabel = `${tag}${id}${cls} \u2014 ${Math.round(rect.width)}\u00d7${Math.round(rect.height)}`;
|
|
142
|
+
}
|
|
143
|
+
const displayLabel = this.label || dimensionsLabel;
|
|
144
|
+
// Label background: semi-transparent for dimensions mode, solid for regular
|
|
145
|
+
const labelBg = this.showDimensions
|
|
146
|
+
? `${this.color.replace(')', ',0.85)').replace('rgb(', 'rgba(')}`
|
|
147
|
+
: this.color;
|
|
148
|
+
return html `
|
|
149
|
+
<div
|
|
150
|
+
data-syntro-highlight
|
|
151
|
+
data-syntro-editor-ui="highlight"
|
|
152
|
+
role=${this.interactive ? 'button' : nothing}
|
|
153
|
+
tabindex=${this.interactive ? '0' : nothing}
|
|
154
|
+
@click=${this.interactive ? this._handleClick : nothing}
|
|
155
|
+
@keydown=${this.interactive ? this._handleKeyDown : nothing}
|
|
156
|
+
style=${styleMap({
|
|
157
|
+
position: 'fixed',
|
|
158
|
+
top: `${rect.top - this.padding}px`,
|
|
159
|
+
left: `${rect.left - this.padding}px`,
|
|
160
|
+
width: `${rect.width + this.padding * 2}px`,
|
|
161
|
+
height: `${rect.height + this.padding * 2}px`,
|
|
162
|
+
border: `${this.borderWidth}px ${this.borderStyle} ${this.color}`,
|
|
163
|
+
backgroundColor: this.bgColor,
|
|
164
|
+
borderRadius: '4px',
|
|
165
|
+
zIndex: String(this.zIndex),
|
|
166
|
+
pointerEvents: hasInteraction ? 'auto' : 'none',
|
|
167
|
+
cursor: this.interactive ? 'pointer' : 'default',
|
|
168
|
+
transition: 'all 0.05s ease-out',
|
|
169
|
+
boxSizing: 'border-box',
|
|
170
|
+
})}
|
|
171
|
+
>
|
|
172
|
+
${displayLabel
|
|
173
|
+
? html `<div
|
|
174
|
+
data-syntro-highlight-label
|
|
175
|
+
data-syntro-editor-ui="highlight-label"
|
|
176
|
+
class="se-text-xs"
|
|
177
|
+
style=${styleMap({
|
|
178
|
+
position: 'absolute',
|
|
179
|
+
top: '-22px',
|
|
180
|
+
left: '0',
|
|
181
|
+
background: labelBg,
|
|
182
|
+
color: '#fff',
|
|
183
|
+
fontWeight: '600',
|
|
184
|
+
fontFamily: this.showDimensions ? 'monospace' : 'inherit',
|
|
185
|
+
padding: '1px 6px',
|
|
186
|
+
borderRadius: '4px',
|
|
187
|
+
whiteSpace: 'nowrap',
|
|
188
|
+
display: 'flex',
|
|
189
|
+
alignItems: 'center',
|
|
190
|
+
gap: '6px',
|
|
191
|
+
pointerEvents: 'auto',
|
|
192
|
+
})}
|
|
193
|
+
>
|
|
194
|
+
<slot name="label-icon"></slot>
|
|
195
|
+
${displayLabel}
|
|
196
|
+
${this.showRemove
|
|
197
|
+
? html `<button
|
|
198
|
+
type="button"
|
|
199
|
+
class="se-text-xs"
|
|
200
|
+
data-syntro-highlight-remove
|
|
201
|
+
data-syntro-editor-ui="highlight-remove"
|
|
202
|
+
@click=${this._handleRemove}
|
|
203
|
+
style=${styleMap({
|
|
204
|
+
background: 'rgba(0,0,0,0.4)',
|
|
205
|
+
border: 'none',
|
|
206
|
+
color: '#fff',
|
|
207
|
+
borderRadius: '50%',
|
|
208
|
+
width: '16px',
|
|
209
|
+
height: '16px',
|
|
210
|
+
cursor: 'pointer',
|
|
211
|
+
display: 'flex',
|
|
212
|
+
alignItems: 'center',
|
|
213
|
+
justifyContent: 'center',
|
|
214
|
+
padding: '0',
|
|
215
|
+
lineHeight: '1',
|
|
216
|
+
})}
|
|
217
|
+
>
|
|
218
|
+
\u00d7
|
|
219
|
+
</button>`
|
|
220
|
+
: nothing}
|
|
221
|
+
</div>`
|
|
222
|
+
: nothing}
|
|
223
|
+
</div>
|
|
224
|
+
`;
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
ElementHighlightLit.properties = {
|
|
228
|
+
element: { attribute: false },
|
|
229
|
+
color: { type: String },
|
|
230
|
+
bgColor: { type: String, attribute: 'bg-color' },
|
|
231
|
+
borderStyle: { type: String, attribute: 'border-style' },
|
|
232
|
+
borderWidth: { type: Number, attribute: 'border-width' },
|
|
233
|
+
label: { type: String },
|
|
234
|
+
showRemove: { type: Boolean, attribute: 'show-remove' },
|
|
235
|
+
showDimensions: { type: Boolean, attribute: 'show-dimensions' },
|
|
236
|
+
zIndex: { type: Number, attribute: 'z-index' },
|
|
237
|
+
padding: { type: Number },
|
|
238
|
+
interactive: { type: Boolean },
|
|
239
|
+
// Internal state
|
|
240
|
+
_rect: { state: true },
|
|
241
|
+
};
|
|
242
|
+
customElements.define('se-element-highlight', ElementHighlightLit);
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
export declare class EmptyStateLit extends LitElement {
|
|
3
|
+
static properties: {
|
|
4
|
+
message: {
|
|
5
|
+
type: StringConstructor;
|
|
6
|
+
};
|
|
7
|
+
};
|
|
8
|
+
message: string;
|
|
9
|
+
createRenderRoot(): this;
|
|
10
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
11
|
+
}
|
|
12
|
+
//# sourceMappingURL=EmptyStateLit.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EmptyStateLit.d.ts","sourceRoot":"","sources":["../../src/components/EmptyStateLit.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAEvC,qBAAa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,UAAU;;;;MAExB;IAEF,OAAO,SAAM;IAEJ,gBAAgB;IAIhB,MAAM;CAOhB"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { html, LitElement } from 'lit';
|
|
2
|
+
export class EmptyStateLit extends LitElement {
|
|
3
|
+
constructor() {
|
|
4
|
+
super(...arguments);
|
|
5
|
+
this.message = '';
|
|
6
|
+
}
|
|
7
|
+
createRenderRoot() {
|
|
8
|
+
return this;
|
|
9
|
+
}
|
|
10
|
+
render() {
|
|
11
|
+
return html `
|
|
12
|
+
<div class="se-text-center se-py-8 se-px-4 se-text-text-secondary se-text-sm">
|
|
13
|
+
${this.message}
|
|
14
|
+
</div>
|
|
15
|
+
`;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
EmptyStateLit.properties = {
|
|
19
|
+
message: { type: String },
|
|
20
|
+
};
|
|
21
|
+
customElements.define('se-empty-state', EmptyStateLit);
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
export declare class GroupHeaderLit extends LitElement {
|
|
3
|
+
static properties: {
|
|
4
|
+
label: {
|
|
5
|
+
type: StringConstructor;
|
|
6
|
+
};
|
|
7
|
+
count: {
|
|
8
|
+
type: NumberConstructor;
|
|
9
|
+
};
|
|
10
|
+
headerClass: {
|
|
11
|
+
type: StringConstructor;
|
|
12
|
+
attribute: string;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
label: string;
|
|
16
|
+
count: number;
|
|
17
|
+
headerClass: string | undefined;
|
|
18
|
+
createRenderRoot(): this;
|
|
19
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
20
|
+
}
|
|
21
|
+
//# sourceMappingURL=GroupHeaderLit.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GroupHeaderLit.d.ts","sourceRoot":"","sources":["../../src/components/GroupHeaderLit.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAEvC,qBAAa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,UAAU;;;;;;;;;;;MAIxB;IAEF,KAAK,SAAM;IACX,KAAK,SAAK;IACV,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAEvB,gBAAgB;IAIhB,MAAM;CAiBhB"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { html, LitElement } from 'lit';
|
|
2
|
+
export class GroupHeaderLit extends LitElement {
|
|
3
|
+
constructor() {
|
|
4
|
+
super(...arguments);
|
|
5
|
+
this.label = '';
|
|
6
|
+
this.count = 0;
|
|
7
|
+
}
|
|
8
|
+
createRenderRoot() {
|
|
9
|
+
return this;
|
|
10
|
+
}
|
|
11
|
+
render() {
|
|
12
|
+
const classes = [
|
|
13
|
+
'se-text-xs se-font-bold se-text-text-primary se-uppercase se-tracking-wide se-py-1 se-pb-2 se-flex se-items-center se-justify-between',
|
|
14
|
+
this.headerClass || '',
|
|
15
|
+
]
|
|
16
|
+
.filter(Boolean)
|
|
17
|
+
.join(' ');
|
|
18
|
+
return html `
|
|
19
|
+
<div class=${classes}>
|
|
20
|
+
<span>${this.label}</span>
|
|
21
|
+
<span class="se-text-xs se-text-text-secondary se-bg-badge-slate-bg se-px-1.5 se-py-0.5 se-rounded-lg">
|
|
22
|
+
${this.count}
|
|
23
|
+
</span>
|
|
24
|
+
</div>
|
|
25
|
+
`;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
GroupHeaderLit.properties = {
|
|
29
|
+
label: { type: String },
|
|
30
|
+
count: { type: Number },
|
|
31
|
+
headerClass: { type: String, attribute: 'header-class' },
|
|
32
|
+
};
|
|
33
|
+
customElements.define('se-group-header', GroupHeaderLit);
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
import type { TriggerWhenStatus } from './ConditionStatusLine';
|
|
3
|
+
/**
|
|
4
|
+
* TriggerJourneyLit — compact horizontal node graph for triggerWhen conditions.
|
|
5
|
+
*
|
|
6
|
+
* Displays each condition as a small circle node connected by lines.
|
|
7
|
+
* Nodes light up green as conditions are met.
|
|
8
|
+
*
|
|
9
|
+
* Attributes:
|
|
10
|
+
* status — TriggerWhenStatus (set via property)
|
|
11
|
+
*
|
|
12
|
+
* Usage:
|
|
13
|
+
* const el = document.createElement('se-trigger-journey');
|
|
14
|
+
* el.status = { visible: true, isFallback: false, conditions: [...] };
|
|
15
|
+
*/
|
|
16
|
+
export declare class TriggerJourneyLit extends LitElement {
|
|
17
|
+
static properties: {
|
|
18
|
+
status: {
|
|
19
|
+
type: ObjectConstructor;
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
status: TriggerWhenStatus | null;
|
|
23
|
+
createRenderRoot(): this;
|
|
24
|
+
private _renderProgressBar;
|
|
25
|
+
private _renderJourneyNode;
|
|
26
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
27
|
+
}
|
|
28
|
+
//# sourceMappingURL=TriggerJourneyLit.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TriggerJourneyLit.d.ts","sourceRoot":"","sources":["../../src/components/TriggerJourneyLit.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,KAAK,EAAmB,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAEhF;;;;;;;;;;;;GAYG;AACH,qBAAa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,UAAU;;;;MAExB;IAEF,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAQ;IAE/B,gBAAgB;IAIzB,OAAO,CAAC,kBAAkB;IAqB1B,OAAO,CAAC,kBAAkB;IAoDjB,MAAM;CA+BhB"}
|