@syntrologie/adapt-nav 2.16.0 → 2.17.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/NavWidgetLit.d.ts.map +1 -1
- package/dist/chunk-HMLY7DHA.js +16 -0
- package/dist/chunk-HMLY7DHA.js.map +7 -0
- package/dist/chunk-ZYHZ6JAD.js +447 -0
- package/dist/chunk-ZYHZ6JAD.js.map +7 -0
- package/dist/editor.d.ts +42 -21
- package/dist/editor.d.ts.map +1 -1
- package/dist/editor.js +310 -313
- package/dist/editor.js.map +7 -0
- package/dist/resolveNavTarget.d.ts +61 -0
- package/dist/resolveNavTarget.d.ts.map +1 -0
- package/dist/resolveNavTarget.test.d.ts +2 -0
- package/dist/resolveNavTarget.test.d.ts.map +1 -0
- package/dist/runtime.d.ts +3 -4
- package/dist/runtime.d.ts.map +1 -1
- package/dist/runtime.js +612 -221
- package/dist/runtime.js.map +7 -0
- package/dist/schema.d.ts +182 -72
- package/dist/schema.d.ts.map +1 -1
- package/dist/schema.js +155 -125
- package/dist/schema.js.map +7 -0
- package/package.json +9 -24
- package/dist/NavWidget.d.ts +0 -31
- package/dist/NavWidget.d.ts.map +0 -1
- package/dist/NavWidget.js +0 -476
- package/dist/NavWidgetLit.js +0 -495
- package/dist/NavWidgetLit.test.js +0 -199
- package/dist/cdn.d.ts +0 -62
- package/dist/cdn.d.ts.map +0 -1
- package/dist/cdn.js +0 -48
- package/dist/editor-lit.d.ts +0 -49
- package/dist/editor-lit.d.ts.map +0 -1
- package/dist/editor-lit.js +0 -319
- package/dist/runtime-lit.d.ts +0 -108
- package/dist/runtime-lit.d.ts.map +0 -1
- package/dist/runtime-lit.js +0 -241
- package/dist/summarize.js +0 -51
- package/dist/types.js +0 -18
- package/node_modules/@syntro/design-system/README.md +0 -335
- package/node_modules/@syntro/design-system/dist/assets/syntrologie-logo.svg +0 -21
- package/node_modules/@syntro/design-system/dist/assets/syntrologie-logomark.svg +0 -10
- package/node_modules/@syntro/design-system/dist/index.d.ts +0 -8
- package/node_modules/@syntro/design-system/dist/index.d.ts.map +0 -1
- package/node_modules/@syntro/design-system/dist/index.js +0 -7
- package/node_modules/@syntro/design-system/dist/tailwind-preset.d.ts +0 -19
- package/node_modules/@syntro/design-system/dist/tailwind-preset.d.ts.map +0 -1
- package/node_modules/@syntro/design-system/dist/tailwind-preset.js +0 -455
- package/node_modules/@syntro/design-system/dist/tokens/colors.css +0 -464
- package/node_modules/@syntro/design-system/dist/tokens/colors.d.ts +0 -874
- package/node_modules/@syntro/design-system/dist/tokens/colors.d.ts.map +0 -1
- package/node_modules/@syntro/design-system/dist/tokens/colors.js +0 -564
- package/node_modules/@syntro/design-system/dist/tokens/effects.css +0 -43
- package/node_modules/@syntro/design-system/dist/tokens/effects.d.ts +0 -139
- package/node_modules/@syntro/design-system/dist/tokens/effects.d.ts.map +0 -1
- package/node_modules/@syntro/design-system/dist/tokens/effects.js +0 -121
- package/node_modules/@syntro/design-system/dist/tokens/index.d.ts +0 -12
- package/node_modules/@syntro/design-system/dist/tokens/index.d.ts.map +0 -1
- package/node_modules/@syntro/design-system/dist/tokens/index.js +0 -11
- package/node_modules/@syntro/design-system/dist/tokens/panel-shell.d.ts +0 -93
- package/node_modules/@syntro/design-system/dist/tokens/panel-shell.d.ts.map +0 -1
- package/node_modules/@syntro/design-system/dist/tokens/panel-shell.js +0 -72
- package/node_modules/@syntro/design-system/package.json +0 -55
- package/node_modules/@syntro/design-system/src/assets/syntrologie-logo.svg +0 -21
- package/node_modules/@syntro/design-system/src/assets/syntrologie-logomark.svg +0 -10
- package/node_modules/@syntrologie/sdk-contracts/dist/index.d.ts +0 -129
- package/node_modules/@syntrologie/sdk-contracts/dist/index.js +0 -17
- package/node_modules/@syntrologie/sdk-contracts/dist/schemas.d.ts +0 -2296
- package/node_modules/@syntrologie/sdk-contracts/dist/schemas.js +0 -361
- package/node_modules/@syntrologie/sdk-contracts/package.json +0 -33
- package/node_modules/@syntrologie/shared-editor-ui/dist/cn.d.ts +0 -2
- package/node_modules/@syntrologie/shared-editor-ui/dist/cn.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/cn.js +0 -3
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPicker.d.ts +0 -34
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPicker.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPicker.js +0 -161
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPickerLit.d.ts +0 -84
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPickerLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPickerLit.js +0 -323
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggle.d.ts +0 -7
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggle.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggle.js +0 -9
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggleLit.d.ts +0 -25
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggleLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggleLit.js +0 -55
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLine.d.ts +0 -23
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLine.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLine.js +0 -40
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLineLit.d.ts +0 -33
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLineLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLineLit.js +0 -118
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DetectionBadge.d.ts +0 -7
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DetectionBadge.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DetectionBadge.js +0 -22
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DetectionBadgeLit.d.ts +0 -32
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DetectionBadgeLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DetectionBadgeLit.js +0 -68
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DismissedSection.d.ts +0 -8
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DismissedSection.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DismissedSection.js +0 -9
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DismissedSectionLit.d.ts +0 -34
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DismissedSectionLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DismissedSectionLit.js +0 -57
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditBackButton.d.ts +0 -7
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditBackButton.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditBackButton.js +0 -4
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditBackButtonLit.d.ts +0 -13
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditBackButtonLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditBackButtonLit.js +0 -31
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorBody.d.ts +0 -7
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorBody.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorBody.js +0 -4
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorBodyLit.d.ts +0 -7
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorBodyLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorBodyLit.js +0 -15
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorCard.d.ts +0 -13
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorCard.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorCard.js +0 -15
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorCardLit.d.ts +0 -36
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorCardLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorCardLit.js +0 -102
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorFooter.d.ts +0 -7
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorFooter.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorFooter.js +0 -4
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorFooterLit.d.ts +0 -20
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorFooterLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorFooterLit.js +0 -48
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorHeader.d.ts +0 -9
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorHeader.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorHeader.js +0 -4
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorHeaderLit.d.ts +0 -16
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorHeaderLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorHeaderLit.js +0 -25
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorInput.d.ts +0 -8
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorInput.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorInput.js +0 -8
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorInputLit.d.ts +0 -66
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorInputLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorInputLit.js +0 -87
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorLayout.d.ts +0 -7
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorLayout.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorLayout.js +0 -4
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorLayoutLit.d.ts +0 -7
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorLayoutLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorLayoutLit.js +0 -15
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorPanelShell.d.ts +0 -25
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorPanelShell.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorPanelShell.js +0 -390
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorPanelShellLit.d.ts +0 -66
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorPanelShellLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorPanelShellLit.js +0 -528
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorSelect.d.ts +0 -8
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorSelect.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorSelect.js +0 -8
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorSelectLit.d.ts +0 -41
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorSelectLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorSelectLit.js +0 -63
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorTextarea.d.ts +0 -8
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorTextarea.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorTextarea.js +0 -17
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorTextareaLit.d.ts +0 -55
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorTextareaLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorTextareaLit.js +0 -92
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ElementHighlight.d.ts +0 -32
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ElementHighlight.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ElementHighlight.js +0 -85
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ElementHighlightLit.d.ts +0 -90
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ElementHighlightLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ElementHighlightLit.js +0 -242
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EmptyState.d.ts +0 -6
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EmptyState.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EmptyState.js +0 -4
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EmptyStateLit.d.ts +0 -12
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EmptyStateLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EmptyStateLit.js +0 -21
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/GroupHeader.d.ts +0 -8
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/GroupHeader.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/GroupHeader.js +0 -5
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/GroupHeaderLit.d.ts +0 -21
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/GroupHeaderLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/GroupHeaderLit.js +0 -33
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/TriggerJourney.d.ts +0 -12
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/TriggerJourney.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/TriggerJourney.js +0 -40
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/TriggerJourneyLit.d.ts +0 -28
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/TriggerJourneyLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/TriggerJourneyLit.js +0 -121
- package/node_modules/@syntrologie/shared-editor-ui/dist/controllers/PanelShellController.d.ts +0 -110
- package/node_modules/@syntrologie/shared-editor-ui/dist/controllers/PanelShellController.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/controllers/PanelShellController.js +0 -481
- package/node_modules/@syntrologie/shared-editor-ui/dist/formatConditionLabel.d.ts +0 -26
- package/node_modules/@syntrologie/shared-editor-ui/dist/formatConditionLabel.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/formatConditionLabel.js +0 -202
- package/node_modules/@syntrologie/shared-editor-ui/dist/hooks/useElementRect.d.ts +0 -8
- package/node_modules/@syntrologie/shared-editor-ui/dist/hooks/useElementRect.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/hooks/useElementRect.js +0 -46
- package/node_modules/@syntrologie/shared-editor-ui/dist/hooks/useTriggerWhenStatus.d.ts +0 -24
- package/node_modules/@syntrologie/shared-editor-ui/dist/hooks/useTriggerWhenStatus.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/hooks/useTriggerWhenStatus.js +0 -86
- package/node_modules/@syntrologie/shared-editor-ui/dist/index.d.ts +0 -36
- package/node_modules/@syntrologie/shared-editor-ui/dist/index.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/index.js +0 -26
- package/node_modules/@syntrologie/shared-editor-ui/dist/lit-elements.d.ts +0 -15
- package/node_modules/@syntrologie/shared-editor-ui/dist/lit-elements.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/lit-elements.js +0 -14
- package/node_modules/@syntrologie/shared-editor-ui/dist/utils/elementChainRecommender.d.ts +0 -33
- package/node_modules/@syntrologie/shared-editor-ui/dist/utils/elementChainRecommender.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/utils/elementChainRecommender.js +0 -68
- package/node_modules/@syntrologie/shared-editor-ui/dist/utils/selectorGenerator.d.ts +0 -22
- package/node_modules/@syntrologie/shared-editor-ui/dist/utils/selectorGenerator.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/utils/selectorGenerator.js +0 -143
- package/node_modules/@syntrologie/shared-editor-ui/package.json +0 -55
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useId, useRef } from 'react';
|
|
3
|
-
import { cn } from '../cn';
|
|
4
|
-
export function EditorTextarea({ label, className, value, id, ...props }) {
|
|
5
|
-
const ref = useRef(null);
|
|
6
|
-
const generatedId = useId();
|
|
7
|
-
const textareaId = id || generatedId;
|
|
8
|
-
// Auto-resize to fit content
|
|
9
|
-
useEffect(() => {
|
|
10
|
-
const el = ref.current;
|
|
11
|
-
if (!el)
|
|
12
|
-
return;
|
|
13
|
-
el.style.height = 'auto';
|
|
14
|
-
el.style.height = `${el.scrollHeight}px`;
|
|
15
|
-
}, []);
|
|
16
|
-
return (_jsxs("div", { children: [label && (_jsx("label", { htmlFor: textareaId, className: "se-text-sm se-font-medium se-text-input-field-text-label se-mb-1 se-block", children: label })), _jsx("textarea", { id: textareaId, ref: ref, value: value, ...props, className: cn('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', 'placeholder:se-text-input-field-text-placeholder', 'focus:se-border-input-field-border-selected focus:se-outline-none focus:se-shadow-focus-primary', 'disabled:se-bg-input-field-bg-disabled disabled:se-cursor-not-allowed disabled:se-opacity-50', className) })] }));
|
|
17
|
-
}
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
2
|
-
export declare class EditorTextareaLit extends LitElement {
|
|
3
|
-
static properties: {
|
|
4
|
-
label: {
|
|
5
|
-
type: StringConstructor;
|
|
6
|
-
};
|
|
7
|
-
textareaClass: {
|
|
8
|
-
type: StringConstructor;
|
|
9
|
-
attribute: string;
|
|
10
|
-
};
|
|
11
|
-
textareaId: {
|
|
12
|
-
type: StringConstructor;
|
|
13
|
-
attribute: string;
|
|
14
|
-
};
|
|
15
|
-
name: {
|
|
16
|
-
type: StringConstructor;
|
|
17
|
-
};
|
|
18
|
-
value: {
|
|
19
|
-
type: StringConstructor;
|
|
20
|
-
};
|
|
21
|
-
placeholder: {
|
|
22
|
-
type: StringConstructor;
|
|
23
|
-
};
|
|
24
|
-
disabled: {
|
|
25
|
-
type: BooleanConstructor;
|
|
26
|
-
};
|
|
27
|
-
required: {
|
|
28
|
-
type: BooleanConstructor;
|
|
29
|
-
};
|
|
30
|
-
readonly: {
|
|
31
|
-
type: BooleanConstructor;
|
|
32
|
-
};
|
|
33
|
-
rows: {
|
|
34
|
-
type: NumberConstructor;
|
|
35
|
-
};
|
|
36
|
-
};
|
|
37
|
-
label: string | undefined;
|
|
38
|
-
textareaClass: string | undefined;
|
|
39
|
-
textareaId: string | undefined;
|
|
40
|
-
name: string | undefined;
|
|
41
|
-
value: string | undefined;
|
|
42
|
-
placeholder: string | undefined;
|
|
43
|
-
disabled: boolean;
|
|
44
|
-
required: boolean;
|
|
45
|
-
readonly: boolean;
|
|
46
|
-
rows: number | undefined;
|
|
47
|
-
private _generatedId;
|
|
48
|
-
constructor();
|
|
49
|
-
createRenderRoot(): this;
|
|
50
|
-
updated(): void;
|
|
51
|
-
private _handleChange;
|
|
52
|
-
private _handleInput;
|
|
53
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
54
|
-
}
|
|
55
|
-
//# sourceMappingURL=EditorTextareaLit.d.ts.map
|
package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorTextareaLit.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
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"}
|
|
@@ -1,92 +0,0 @@
|
|
|
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);
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* ElementHighlight — Shared overlay highlight for DOM elements.
|
|
3
|
-
*
|
|
4
|
-
* Tracks element position via useElementRect (scroll/resize-aware).
|
|
5
|
-
* Renders via createPortal to document.body with position: fixed.
|
|
6
|
-
*
|
|
7
|
-
* EXCEPTION: This component MUST stay on document.body (not in shadow root).
|
|
8
|
-
* It tracks and highlights host page elements, and needs same-tree visual
|
|
9
|
-
* stacking context. Uses inline styles exclusively (no CSS leaking concerns).
|
|
10
|
-
*
|
|
11
|
-
* Replaces: InspectHighlight, HighlightOverlay, DiscoveryHighlightOverlay,
|
|
12
|
-
* ReviewHighlightOverlay.
|
|
13
|
-
*/
|
|
14
|
-
import type React from 'react';
|
|
15
|
-
export interface ElementHighlightProps {
|
|
16
|
-
element: HTMLElement;
|
|
17
|
-
color: string;
|
|
18
|
-
bgColor?: string;
|
|
19
|
-
borderStyle?: 'solid' | 'dashed';
|
|
20
|
-
borderWidth?: number;
|
|
21
|
-
label?: string;
|
|
22
|
-
labelIcon?: React.ReactNode;
|
|
23
|
-
showRemove?: boolean;
|
|
24
|
-
onRemove?: () => void;
|
|
25
|
-
onClick?: () => void;
|
|
26
|
-
zIndex?: number;
|
|
27
|
-
padding?: number;
|
|
28
|
-
showDimensions?: boolean;
|
|
29
|
-
className?: string;
|
|
30
|
-
}
|
|
31
|
-
export declare function ElementHighlight({ element, color, bgColor, borderStyle, borderWidth, label, labelIcon, showRemove, onRemove, onClick, zIndex, padding, showDimensions, className, }: ElementHighlightProps): React.ReactPortal | null;
|
|
32
|
-
//# sourceMappingURL=ElementHighlight.d.ts.map
|
package/node_modules/@syntrologie/shared-editor-ui/dist/components/ElementHighlight.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ElementHighlight.d.ts","sourceRoot":"","sources":["../../src/components/ElementHighlight.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,KAAK,EACL,OAAuB,EACvB,WAAqB,EACrB,WAAe,EACf,KAAK,EACL,SAAS,EACT,UAAU,EACV,QAAQ,EACR,OAAO,EACP,MAAmB,EACnB,OAAW,EACX,cAAc,EACd,SAAS,GACV,EAAE,qBAAqB,4BA4HvB"}
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { createPortal } from 'react-dom';
|
|
3
|
-
import { useElementRect } from '../hooks/useElementRect';
|
|
4
|
-
export function ElementHighlight({ element, color, bgColor = 'transparent', borderStyle = 'solid', borderWidth = 2, label, labelIcon, showRemove, onRemove, onClick, zIndex = 2147483644, padding = 2, showDimensions, className, }) {
|
|
5
|
-
const rect = useElementRect(element);
|
|
6
|
-
if (!rect)
|
|
7
|
-
return null;
|
|
8
|
-
// Build dimensions label from element metadata
|
|
9
|
-
const dimensionsLabel = showDimensions
|
|
10
|
-
? (() => {
|
|
11
|
-
const tag = element.tagName.toLowerCase();
|
|
12
|
-
const id = element.id ? `#${element.id}` : '';
|
|
13
|
-
const cls = element.className && typeof element.className === 'string'
|
|
14
|
-
? `.${element.className.split(' ').filter(Boolean).slice(0, 2).join('.')}`
|
|
15
|
-
: '';
|
|
16
|
-
return `${tag}${id}${cls} \u2014 ${Math.round(rect.width)}\u00d7${Math.round(rect.height)}`;
|
|
17
|
-
})()
|
|
18
|
-
: null;
|
|
19
|
-
const displayLabel = label || dimensionsLabel;
|
|
20
|
-
return createPortal(
|
|
21
|
-
// biome-ignore lint/a11y/noStaticElementInteractions: overlay highlight element is conditionally interactive based on onClick prop
|
|
22
|
-
_jsx("div", { "data-syntro-highlight": true, "data-syntro-editor-ui": "highlight", className: className, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, onClick: onClick
|
|
23
|
-
? (e) => {
|
|
24
|
-
e.stopPropagation();
|
|
25
|
-
e.preventDefault();
|
|
26
|
-
onClick();
|
|
27
|
-
}
|
|
28
|
-
: undefined, onKeyDown: onClick
|
|
29
|
-
? (e) => {
|
|
30
|
-
if (e.key === 'Enter' || e.key === ' ') {
|
|
31
|
-
e.stopPropagation();
|
|
32
|
-
e.preventDefault();
|
|
33
|
-
onClick();
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
: undefined, style: {
|
|
37
|
-
position: 'fixed',
|
|
38
|
-
top: rect.top - padding,
|
|
39
|
-
left: rect.left - padding,
|
|
40
|
-
width: rect.width + padding * 2,
|
|
41
|
-
height: rect.height + padding * 2,
|
|
42
|
-
border: `${borderWidth}px ${borderStyle} ${color}`,
|
|
43
|
-
backgroundColor: bgColor,
|
|
44
|
-
borderRadius: '4px',
|
|
45
|
-
zIndex,
|
|
46
|
-
pointerEvents: onClick || onRemove ? 'auto' : 'none',
|
|
47
|
-
cursor: onClick ? 'pointer' : 'default',
|
|
48
|
-
transition: 'all 0.05s ease-out',
|
|
49
|
-
boxSizing: 'border-box',
|
|
50
|
-
}, children: displayLabel && (_jsxs("div", { "data-syntro-highlight-label": true, "data-syntro-editor-ui": "highlight-label", className: "se-text-xs", style: {
|
|
51
|
-
position: 'absolute',
|
|
52
|
-
top: '-22px',
|
|
53
|
-
left: 0,
|
|
54
|
-
background: showDimensions
|
|
55
|
-
? `${color.replace(')', ',0.85)').replace('rgb(', 'rgba(')}`
|
|
56
|
-
: color,
|
|
57
|
-
color: '#fff',
|
|
58
|
-
fontWeight: 600,
|
|
59
|
-
fontFamily: showDimensions ? 'monospace' : 'inherit',
|
|
60
|
-
padding: '1px 6px',
|
|
61
|
-
borderRadius: '4px',
|
|
62
|
-
whiteSpace: 'nowrap',
|
|
63
|
-
display: 'flex',
|
|
64
|
-
alignItems: 'center',
|
|
65
|
-
gap: '6px',
|
|
66
|
-
pointerEvents: 'auto',
|
|
67
|
-
}, children: [labelIcon, displayLabel, showRemove && onRemove && (_jsx("button", { type: "button", className: "se-text-xs", "data-syntro-highlight-remove": true, "data-syntro-editor-ui": "highlight-remove", onClick: (e) => {
|
|
68
|
-
e.stopPropagation();
|
|
69
|
-
e.preventDefault();
|
|
70
|
-
onRemove();
|
|
71
|
-
}, style: {
|
|
72
|
-
background: 'rgba(0,0,0,0.4)',
|
|
73
|
-
border: 'none',
|
|
74
|
-
color: '#fff',
|
|
75
|
-
borderRadius: '50%',
|
|
76
|
-
width: '16px',
|
|
77
|
-
height: '16px',
|
|
78
|
-
cursor: 'pointer',
|
|
79
|
-
display: 'flex',
|
|
80
|
-
alignItems: 'center',
|
|
81
|
-
justifyContent: 'center',
|
|
82
|
-
padding: 0,
|
|
83
|
-
lineHeight: 1,
|
|
84
|
-
}, children: "\u00D7" }))] })) }), document.body);
|
|
85
|
-
}
|
|
@@ -1,90 +0,0 @@
|
|
|
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
DELETED
|
@@ -1 +0,0 @@
|
|
|
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"}
|
|
@@ -1,242 +0,0 @@
|
|
|
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);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/components/EmptyState.tsx"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,eAAe,2CAMtD"}
|
|
@@ -1,12 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
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"}
|