kritzel-stencil 0.3.42 → 0.3.45
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/cjs/index-Xav9JFHg.js +2 -2
- package/dist/cjs/{kritzel-active-users_46.cjs.entry.js → kritzel-active-users_47.cjs.entry.js} +96 -70
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/stencil.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/core/kritzel-editor/kritzel-editor.js +9 -16
- package/dist/collection/components/core/kritzel-engine/kritzel-engine.css +0 -7
- package/dist/collection/components/core/kritzel-engine/kritzel-engine.js +40 -11
- package/dist/collection/components/core/kritzel-watermark/kritzel-watermark.js +1 -1
- package/dist/collection/components/shared/kritzel-avatar/kritzel-avatar.js +3 -3
- package/dist/collection/components/shared/kritzel-button/kritzel-button.js +2 -2
- package/dist/collection/components/shared/kritzel-color/kritzel-color.js +2 -2
- package/dist/collection/components/shared/kritzel-color-palette/kritzel-color-palette.js +1 -1
- package/dist/collection/components/shared/kritzel-font/kritzel-font.js +1 -1
- package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.js +1 -1
- package/dist/collection/components/shared/kritzel-input/kritzel-input.js +1 -1
- package/dist/collection/components/shared/kritzel-master-detail/kritzel-master-detail.js +3 -3
- package/dist/collection/components/shared/kritzel-menu/kritzel-menu.js +1 -1
- package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.js +2 -2
- package/dist/collection/components/shared/kritzel-numeric-input/kritzel-numeric-input.js +1 -1
- package/dist/collection/components/shared/kritzel-opacity-slider/kritzel-opacity-slider.js +1 -1
- package/dist/collection/components/shared/kritzel-portal/kritzel-portal.js +1 -1
- package/dist/collection/components/shared/kritzel-slide-toggle/kritzel-slide-toggle.js +1 -1
- package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.js +1 -1
- package/dist/collection/components/shared/kritzel-stroke-size/kritzel-stroke-size.js +1 -1
- package/dist/collection/components/shared/kritzel-sync-indicator/kritzel-sync-indicator.css +50 -0
- package/dist/collection/components/shared/kritzel-sync-indicator/kritzel-sync-indicator.js +66 -0
- package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.js +2 -2
- package/dist/collection/components/ui/kritzel-back-to-content/kritzel-back-to-content.js +1 -1
- package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js +6 -6
- package/dist/collection/components/ui/kritzel-current-user/kritzel-current-user.js +1 -1
- package/dist/collection/components/ui/kritzel-current-user-dialog/kritzel-current-user-dialog.js +1 -1
- package/dist/collection/components/ui/kritzel-export/kritzel-export.js +1 -1
- package/dist/collection/components/ui/kritzel-loading-overlay/kritzel-loading-overlay.js +1 -1
- package/dist/collection/components/ui/kritzel-login-dialog/kritzel-login-dialog.js +1 -1
- package/dist/collection/components/ui/kritzel-more-menu/kritzel-more-menu.js +1 -1
- package/dist/collection/components/ui/kritzel-settings/kritzel-settings.js +1 -1
- package/dist/collection/components/ui/kritzel-share-dialog/kritzel-share-dialog.js +2 -2
- package/dist/collection/components/ui/kritzel-utility-panel/kritzel-utility-panel.js +1 -1
- package/dist/collection/components/ui/kritzel-zoom-panel/kritzel-zoom-panel.js +1 -1
- package/dist/collection/constants/version.js +1 -1
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.js +1 -1
- package/dist/components/kritzel-active-users.js +1 -1
- package/dist/components/kritzel-avatar.js +1 -1
- package/dist/components/kritzel-back-to-content.js +1 -1
- package/dist/components/kritzel-button.js +1 -1
- package/dist/components/kritzel-color-palette.js +1 -1
- package/dist/components/kritzel-color.js +1 -1
- package/dist/components/kritzel-controls.js +1 -1
- package/dist/components/kritzel-current-user-dialog.js +1 -1
- package/dist/components/kritzel-current-user.js +1 -1
- package/dist/components/kritzel-editor.js +1 -1
- package/dist/components/kritzel-engine.js +1 -1
- package/dist/components/kritzel-export.js +1 -1
- package/dist/components/kritzel-font-size.js +1 -1
- package/dist/components/kritzel-font.js +1 -1
- package/dist/components/kritzel-input.js +1 -1
- package/dist/components/kritzel-loading-overlay.js +1 -1
- package/dist/components/kritzel-login-dialog.js +1 -1
- package/dist/components/kritzel-master-detail.js +1 -1
- package/dist/components/kritzel-menu-item.js +1 -1
- package/dist/components/kritzel-menu.js +1 -1
- package/dist/components/kritzel-more-menu.js +1 -1
- package/dist/components/kritzel-numeric-input.js +1 -1
- package/dist/components/kritzel-opacity-slider.js +1 -1
- package/dist/components/kritzel-portal.js +1 -1
- package/dist/components/kritzel-settings.js +1 -1
- package/dist/components/kritzel-share-dialog.js +1 -1
- package/dist/components/kritzel-slide-toggle.js +1 -1
- package/dist/components/kritzel-split-button.js +1 -1
- package/dist/components/kritzel-stroke-size.js +1 -1
- package/dist/components/kritzel-sync-indicator.d.ts +11 -0
- package/dist/components/kritzel-sync-indicator.js +1 -0
- package/dist/components/kritzel-tool-config.js +1 -1
- package/dist/components/kritzel-tooltip.js +1 -1
- package/dist/components/kritzel-utility-panel.js +1 -1
- package/dist/components/kritzel-watermark.js +1 -1
- package/dist/components/kritzel-workspace-manager.js +1 -1
- package/dist/components/kritzel-zoom-panel.js +1 -1
- package/dist/components/p-894OnDQV.js +1 -0
- package/dist/components/{p-BulDbBWB.js → p-9692OaI_.js} +1 -1
- package/dist/components/{p-Ds-P2bYH.js → p-B5oHmPJb.js} +1 -1
- package/dist/components/{p-BzrxIesp.js → p-B6t5q-V4.js} +1 -1
- package/dist/components/{p-DgnK50xO.js → p-B8Xi4Clg.js} +1 -1
- package/dist/components/{p-DIMNEOTW.js → p-BDzlx2hB.js} +1 -1
- package/dist/components/{p-8xkoVMfO.js → p-BI2ng9I_.js} +1 -1
- package/dist/components/{p-DZcwchEg.js → p-BTzlrIxe.js} +1 -1
- package/dist/components/{p-CVhcOiEA.js → p-BsANVili.js} +1 -1
- package/dist/components/{p-C4XDwGU0.js → p-C2ocjA6D.js} +1 -1
- package/dist/components/{p-DSOc0eIT.js → p-C4NrrUfN.js} +1 -1
- package/dist/components/p-C7rN6L3d.js +9 -0
- package/dist/components/{p-BzJEwFtn.js → p-CWRSGYOE.js} +1 -1
- package/dist/components/{p-BLOPBDUF.js → p-Ca-igU1f.js} +1 -1
- package/dist/components/{p-zd7zXld8.js → p-CqLgB8JK.js} +1 -1
- package/dist/components/{p-D8TOEhPY.js → p-Cr682JI_.js} +1 -1
- package/dist/components/{p-Bd_yPNfg.js → p-CsvMgk_f.js} +1 -1
- package/dist/components/{p-BKOsmXB5.js → p-CwJwsRR3.js} +1 -1
- package/dist/components/{p-1nG2hxfJ.js → p-Cymum41a.js} +1 -1
- package/dist/components/p-D2q_wTyG.js +1 -0
- package/dist/components/{p-jzuGPW5o.js → p-D30zs0kA.js} +1 -1
- package/dist/components/{p-D52oKO_e.js → p-D3y_Hauo.js} +1 -1
- package/dist/components/{p-DXcjIb_a.js → p-D5jf8wAu.js} +1 -1
- package/dist/components/{p-Bm_BWQa4.js → p-D82VaHce.js} +1 -1
- package/dist/components/{p-oGAPPwAL.js → p-DEBwmRTC.js} +1 -1
- package/dist/components/{p-Di5dpXrF.js → p-DIazmg6w.js} +1 -1
- package/dist/components/{p-yD_3Z3K1.js → p-DJ88BrIW.js} +1 -1
- package/dist/components/{p-DEqpY4K2.js → p-DUYmwrWV.js} +1 -1
- package/dist/components/{p-B_6RNask.js → p-DgJ0ufzr.js} +1 -1
- package/dist/components/{p-CMphprF1.js → p-DkUb2czk.js} +1 -1
- package/dist/components/{p-DMAScsJF.js → p-Dlp84thc.js} +1 -1
- package/dist/components/{p-CwuGA058.js → p-PSFAfAyd.js} +1 -1
- package/dist/components/{p-DPpPd5GI.js → p-e6Zpc9Vp.js} +1 -1
- package/dist/components/{p-CGGLMeG_.js → p-s7PqL1NE.js} +1 -1
- package/dist/esm/index-Dhio9uis.js +2 -2
- package/dist/esm/{kritzel-active-users_46.entry.js → kritzel-active-users_47.entry.js} +96 -71
- package/dist/esm/loader.js +1 -1
- package/dist/esm/stencil.js +1 -1
- package/dist/stencil/p-ad326bf7.entry.js +9 -0
- package/dist/stencil/stencil.esm.js +1 -1
- package/dist/types/components/core/kritzel-editor/kritzel-editor.d.ts +0 -3
- package/dist/types/components/core/kritzel-engine/kritzel-engine.d.ts +4 -1
- package/dist/types/components/shared/kritzel-sync-indicator/kritzel-sync-indicator.d.ts +7 -0
- package/dist/types/components.d.ts +42 -0
- package/dist/types/constants/version.d.ts +1 -1
- package/package.json +1 -1
- package/dist/components/p-BR0Hnrhc.js +0 -1
- package/dist/components/p-hkYKD6tT.js +0 -9
- package/dist/stencil/p-5fc166d8.entry.js +0 -9
|
@@ -136,16 +136,16 @@ const KritzelAvatar = class {
|
|
|
136
136
|
height: `${this.size}px`,
|
|
137
137
|
fontSize: `${Math.round(this.size * 0.4)}px`,
|
|
138
138
|
};
|
|
139
|
-
return (h(Host, { key: '
|
|
139
|
+
return (h(Host, { key: 'a25cae3d0597e53606a00855e3175c89ff90d58e', style: containerStyles, class: {
|
|
140
140
|
'has-image': !!showImage,
|
|
141
141
|
'has-initials': !!showInitials,
|
|
142
142
|
'has-default': !!showDefaultIcon,
|
|
143
|
-
}, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: '
|
|
143
|
+
}, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: 'c3288f0ba9e0d8876403244fe3942dd91e685a79', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
|
|
144
144
|
if (el) {
|
|
145
145
|
el.referrerPolicy = 'no-referrer';
|
|
146
146
|
el.crossOrigin = 'anonymous';
|
|
147
147
|
}
|
|
148
|
-
}, onError: this.handleImageError })), showInitials && (h("span", { key: '
|
|
148
|
+
}, onError: this.handleImageError })), showInitials && (h("span", { key: 'ae0ca459b87e90a1f67abe747b75d8dd61247ead', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: '2a60a0347ae21732828920339f53803330c9c6c6', class: "avatar-default" }, h("svg", { key: 'ee057dc02ae61206164775b35ad1408fe04dfed9', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '2190046ba2e2c659d47f8a7f4a12bb10ae626f07', d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }))))));
|
|
149
149
|
}
|
|
150
150
|
static get watchers() { return {
|
|
151
151
|
"user": [{
|
|
@@ -455,7 +455,7 @@ const KritzelBackToContent = class {
|
|
|
455
455
|
this.backToContent.emit();
|
|
456
456
|
};
|
|
457
457
|
render() {
|
|
458
|
-
return (h(Host, { key: '
|
|
458
|
+
return (h(Host, { key: '9a087efd5b544a5633b89fcdfa9609a207eb70fc' }, h("button", { key: 'd02c237dd9fe08a5e65b2c72cc47f4444b47338c', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, h("kritzel-icon", { key: '3345e1bd20a1a4e2f6e46b1a365e3405a8304f4e', name: "chevrons-left" }))));
|
|
459
459
|
}
|
|
460
460
|
};
|
|
461
461
|
KritzelBackToContent.style = kritzelBackToContentCss();
|
|
@@ -482,11 +482,11 @@ const KritzelButton = class {
|
|
|
482
482
|
this.buttonClick.emit();
|
|
483
483
|
};
|
|
484
484
|
render() {
|
|
485
|
-
return (h(Host, { key: '
|
|
485
|
+
return (h(Host, { key: 'ee7da1d8d86cdd6f920d15642203265cc93cda4e' }, h("button", { key: '15b1f11be5157c70ef5a4b3cd917bacb8f90ee4a', type: this.type, class: {
|
|
486
486
|
'kritzel-button': true,
|
|
487
487
|
[this.variant]: true,
|
|
488
488
|
'disabled': this.disabled,
|
|
489
|
-
}, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '
|
|
489
|
+
}, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '8500172bd4540f4fa9c5e629d1ceb1816dcf556a' }))));
|
|
490
490
|
}
|
|
491
491
|
};
|
|
492
492
|
KritzelButton.style = kritzelButtonCss();
|
|
@@ -534,13 +534,13 @@ const KritzelColorComponent = class {
|
|
|
534
534
|
render() {
|
|
535
535
|
const resolvedColor = this.resolveColor();
|
|
536
536
|
const isColorVeryLight = this.isLightColor(resolvedColor);
|
|
537
|
-
return (h(Host, { key: '
|
|
537
|
+
return (h(Host, { key: 'a898705a76a25b051b046cb3d5274c1701482a4c' }, h("div", { key: '7d5ce83a17f710a1d808ff7d572b75585caada72', class: "checkerboard-bg", style: {
|
|
538
538
|
width: `${this.size}px`,
|
|
539
539
|
height: `${this.size}px`,
|
|
540
540
|
borderRadius: '50%',
|
|
541
541
|
display: 'inline-block',
|
|
542
542
|
position: 'relative',
|
|
543
|
-
} }, h("div", { key: '
|
|
543
|
+
} }, h("div", { key: '8d318c989b7e69bc61dd653688a9e7480c4ee34d', class: {
|
|
544
544
|
'color-circle': true,
|
|
545
545
|
'white': isColorVeryLight,
|
|
546
546
|
}, style: {
|
|
@@ -596,7 +596,7 @@ const KritzelColorPalette = class {
|
|
|
596
596
|
render() {
|
|
597
597
|
const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
|
|
598
598
|
const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
|
|
599
|
-
return (h(Host, { key: '
|
|
599
|
+
return (h(Host, { key: '6e16fdd13c09ab2bcffb83df7ed861560f486518' }, h("div", { key: '48cc257315e13822dcc8bea314d26f1137d9b3cc', class: {
|
|
600
600
|
'color-grid': true,
|
|
601
601
|
'expanded': this.isExpanded,
|
|
602
602
|
}, style: {
|
|
@@ -1164,13 +1164,13 @@ const KritzelControls = class {
|
|
|
1164
1164
|
// Separate tool controls from config control
|
|
1165
1165
|
const toolControls = this.internalControls.filter(c => c.type === 'tool' || c.type === 'separator');
|
|
1166
1166
|
const configControl = this.internalControls.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
|
|
1167
|
-
return (h(Host, { key: '
|
|
1167
|
+
return (h(Host, { key: '5a23a0a1baa407097b18b9bc43f41186c0c333b2', style: { display: this.visible ? '' : 'none' }, class: {
|
|
1168
1168
|
mobile: this.isTouchDevice,
|
|
1169
|
-
} }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '
|
|
1169
|
+
} }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '6d3878904bd13266be79cef0e0d1ee55d760b3da', style: {
|
|
1170
1170
|
position: 'absolute',
|
|
1171
1171
|
bottom: '56px',
|
|
1172
1172
|
left: '12px',
|
|
1173
|
-
}, undoState: this.undoState, terms: this.terms, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '
|
|
1173
|
+
}, undoState: this.undoState, terms: this.terms, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '5e066964eba04ad9b0d1abf36f61b93464254f48', class: "kritzel-controls" }, h("div", { key: '76e49fd459e0a312837ec0b5e552355395b8814e', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: 'd4cffe56418dae5c569a47fe2ffc3f810f221455', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
|
|
1174
1174
|
// Check if this control has sub-options (split-button)
|
|
1175
1175
|
if (control.subOptions?.length) {
|
|
1176
1176
|
const selectedSubOption = this.getSelectedSubOption(control);
|
|
@@ -1200,10 +1200,10 @@ const KritzelControls = class {
|
|
|
1200
1200
|
'kritzel-control': true,
|
|
1201
1201
|
'selected': this.activeControl?.name === control?.name,
|
|
1202
1202
|
}, key: control.name, "data-testid": `tool-${control.name}`, onClick: _event => this.handleControlClick?.(control), "aria-label": control.name.charAt(0).toUpperCase() + control.name.slice(1) }, h("kritzel-icon", { name: control.icon })));
|
|
1203
|
-
})), h("div", { key: '
|
|
1203
|
+
})), h("div", { key: '49806e8e06b8756a097eeec53203a55586214a4a', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
|
|
1204
1204
|
'kritzel-config-container': true,
|
|
1205
1205
|
'visible': hasConfigUI,
|
|
1206
|
-
}, key: configControl.name }, h("div", { key: '
|
|
1206
|
+
}, key: configControl.name }, h("div", { key: 'da0ec9cf776dee0872bbb7f0369a6a5a56ebb955', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: 'c848a63392d4ed9a30f467512421fbea3096d876', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: 'c7ed50fbdfbdab1847fb8c5c6e73d0e743b45706', tool: this.activeControl.tool, theme: this.theme, engine: this.kritzelEngine, terms: this.terms, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: 'de6c9801d3e9e89674b60b1c4e270b8520014aae', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
|
|
1207
1207
|
if (el)
|
|
1208
1208
|
this.configTriggerRef = el;
|
|
1209
1209
|
}, onKeyDown: event => {
|
|
@@ -1212,7 +1212,7 @@ const KritzelControls = class {
|
|
|
1212
1212
|
}
|
|
1213
1213
|
}, style: {
|
|
1214
1214
|
cursor: 'pointer',
|
|
1215
|
-
} }, this.displayValues && (h("div", { key: '
|
|
1215
|
+
} }, this.displayValues && (h("div", { key: '140bbf567b0bbd2a2fe878536e93d8646a58b209', class: "color-container" }, h("kritzel-color", { key: 'eeb1d94fa41bbc177d39b4158ae3c4c1d692c0ec', value: this.displayValues.color, theme: this.theme, size: 18, style: {
|
|
1216
1216
|
borderRadius: '50%',
|
|
1217
1217
|
border: 'none',
|
|
1218
1218
|
} })))))))));
|
|
@@ -1246,7 +1246,7 @@ const KritzelCurrentUser = class {
|
|
|
1246
1246
|
/** Resolved localized strings keyed by term key, supplied by the editor. */
|
|
1247
1247
|
terms = {};
|
|
1248
1248
|
render() {
|
|
1249
|
-
return (h(Host, { key: '
|
|
1249
|
+
return (h(Host, { key: '606ff4d621467d24c30d06a2cf9191a883497f1b' }, h("kritzel-avatar", { key: 'a215f36bcfa55e2d649e79ef2e4ae4503ebb325d', user: this.user, size: this.avatarSize })));
|
|
1250
1250
|
}
|
|
1251
1251
|
};
|
|
1252
1252
|
KritzelCurrentUser.style = kritzelCurrentUserCss();
|
|
@@ -1287,7 +1287,7 @@ const KritzelCurrentUserDialog = class {
|
|
|
1287
1287
|
}
|
|
1288
1288
|
render() {
|
|
1289
1289
|
const displayName = this.getDisplayName();
|
|
1290
|
-
return (h(Host, { key: '
|
|
1290
|
+
return (h(Host, { key: '46fa9107dd133e2896a80bf337874b69943156c6' }, h("kritzel-dialog", { key: '9270ec727f41b73fb37eaec2ee601689d3c26292', dialogTitle: this.terms['currentUser.dialogTitle'] ?? 'Account', isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '3c877db40a63bef3624f252ab39842cbc0b9bdc8', class: "user-info" }, h("kritzel-avatar", { key: '821130a92f385de1fa4e796b99830c4c3b317c15', user: this.user, size: 80 }), displayName && h("div", { key: 'e9c44284d50c97aed00523541360dbbaf6e37566', class: "user-name" }, displayName), this.user?.email && h("div", { key: '46f24e37629e6bd1c1dd5c52cfd7281c1d2e2308', class: "user-email" }, this.user.email), h("kritzel-button", { key: '929483c1bb270eb8dcf8e9d9e0d087b8476cd23f', class: "logout-button", variant: "primary", onButtonClick: this.handleLogout }, this.terms['menu.logout'] ?? 'Logout')))));
|
|
1291
1291
|
}
|
|
1292
1292
|
};
|
|
1293
1293
|
KritzelCurrentUserDialog.style = kritzelCurrentUserDialogCss();
|
|
@@ -2342,8 +2342,6 @@ const KritzelEditor = class {
|
|
|
2342
2342
|
isEditorVisible = false;
|
|
2343
2343
|
activeNotification;
|
|
2344
2344
|
isNotificationDismissing = false;
|
|
2345
|
-
/** Combined loading state reported by the engine (external `isLoading` prop or internal workspace loading). Starts true so the overlay is shown until the engine reports otherwise. */
|
|
2346
|
-
isEngineLoading = true;
|
|
2347
2345
|
notificationDismissTimeout;
|
|
2348
2346
|
notificationDismissAnimationTimeout;
|
|
2349
2347
|
notificationDisplayDurationMs = 5000;
|
|
@@ -2770,10 +2768,6 @@ const KritzelEditor = class {
|
|
|
2770
2768
|
event.stopPropagation();
|
|
2771
2769
|
this.awarenessChange.emit(event.detail);
|
|
2772
2770
|
}
|
|
2773
|
-
handleLoadingChange(event) {
|
|
2774
|
-
event.stopPropagation();
|
|
2775
|
-
this.isEngineLoading = event.detail;
|
|
2776
|
-
}
|
|
2777
2771
|
handleNotificationsChange(event) {
|
|
2778
2772
|
event.stopPropagation();
|
|
2779
2773
|
this.clearNotificationDismissAnimationTimer();
|
|
@@ -3058,36 +3052,36 @@ const KritzelEditor = class {
|
|
|
3058
3052
|
const isLoggedIn = this.isLoggedIn;
|
|
3059
3053
|
const shouldShowCurrentUser = isLoggedIn;
|
|
3060
3054
|
const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
|
|
3061
|
-
return (h(Host, { key: '
|
|
3055
|
+
return (h(Host, { key: '3128b38a04cd636abc1f2466f1ac1aa3dcea2262' }, h("div", { key: 'b1fbb051cb1144fd84f28cfea4ad824f92189dbd', class: "editor-content", style: {
|
|
3062
3056
|
opacity: this.isEditorVisible ? '1' : '0',
|
|
3063
3057
|
visibility: this.isEditorVisible ? 'visible' : 'hidden',
|
|
3064
3058
|
transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out',
|
|
3065
|
-
} }, h("div", { key: '
|
|
3059
|
+
} }, h("div", { key: '2b896fa8bd00a7c68b74df7a9846e8c3e0f6efc4', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: '13244251aa8999d78d275eefe5583d592f3506fc', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, terms: this.resolvedTerms, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: '7d3015918e4af7ee435aee8da37ddfa206cdfd66', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: '49f13f23698db9b804d139e0f35696be06569346', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: '765aa6995398aca3c7738758bedb7d9a7c2f099a', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, h("kritzel-notification-card", { key: 'fe0dfa30aa498a608f9167b01e0a2309dfa67162', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), h("kritzel-engine", { key: '5aeb7979faa8779653ff6a2930d288fd601cb0e9', ref: el => {
|
|
3066
3060
|
if (el) {
|
|
3067
3061
|
this.engineRef = el;
|
|
3068
3062
|
}
|
|
3069
|
-
}, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, isPanningEnabled: this.isPanningEnabled, isZoomingEnabled: this.isZoomingEnabled, theme: this.theme, themes: this.themes, licenseKey: this.licenseKey, locale: this.locale, locales: this.locales, fallbackLocale: this.fallbackLocale, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event), onNotificationsChange: event => this.handleNotificationsChange(event)
|
|
3063
|
+
}, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, isPanningEnabled: this.isPanningEnabled, isZoomingEnabled: this.isZoomingEnabled, theme: this.theme, themes: this.themes, licenseKey: this.licenseKey, locale: this.locale, locales: this.locales, fallbackLocale: this.fallbackLocale, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event), onNotificationsChange: event => this.handleNotificationsChange(event) }), h("kritzel-controls", { key: 'eda4dc93fe663c8472638190216bea5bf64d7153', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
|
|
3070
3064
|
if (el) {
|
|
3071
3065
|
this.controlsRef = el;
|
|
3072
3066
|
}
|
|
3073
|
-
}, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: '
|
|
3067
|
+
}, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'ffdb548da8aac3498b1b3e9bfdc9a41f8c448675', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: 'af6f6a86212195fd3ee13bc33c16574e0a5236a6', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: '0870c0e47838fc99b4041718a431535827e199cf', class: "top-right-buttons" }, h("kritzel-settings", { key: 'b95beb43dbe1a9c99454fc4ff74f0630aca7ad83', ref: el => {
|
|
3074
3068
|
if (el) {
|
|
3075
3069
|
this.settingsRef = el;
|
|
3076
3070
|
}
|
|
3077
|
-
}, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], availableLocales: this.availableLocaleOptions, settings: this.currentSettingsConfig, terms: this.resolvedTerms, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: '
|
|
3071
|
+
}, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], availableLocales: this.availableLocaleOptions, settings: this.currentSettingsConfig, terms: this.resolvedTerms, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: 'ef6fea2715ff99226fde937185a693efc2a7dd75', ref: el => {
|
|
3078
3072
|
if (el) {
|
|
3079
3073
|
this.exportRef = el;
|
|
3080
3074
|
}
|
|
3081
|
-
}, workspaceName: this.activeWorkspace?.name || 'workspace', terms: this.resolvedTerms, onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: '
|
|
3075
|
+
}, workspaceName: this.activeWorkspace?.name || 'workspace', terms: this.resolvedTerms, onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: '872b7fa12d49410d1c370baed3386a34f89d3e2a', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: 'da19825b4fba6a516803f8330cdfdfac6b6c9db1', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (h("kritzel-current-user-dialog", { key: '9336ce611286d3ecf9318317ab4bedb8c3f79f05', ref: el => {
|
|
3082
3076
|
if (el) {
|
|
3083
3077
|
this.currentUserDialogRef = el;
|
|
3084
3078
|
this.currentUserDialogRef.addEventListener('logoutRequest', this.handleCurrentUserLogout);
|
|
3085
3079
|
}
|
|
3086
|
-
}, user: this.user, terms: this.resolvedTerms })), shouldShowLoginButton && (h("kritzel-button", { key: '
|
|
3080
|
+
}, user: this.user, terms: this.resolvedTerms })), shouldShowLoginButton && (h("kritzel-button", { key: 'a9e38ad3e13c785f6a4223ebde95f60451c6515f', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in')), h("kritzel-more-menu", { key: 'b8f63a63ae4e75a70d0069410170af902f2a362b', items: this.moreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: '7a923fd51e8d2bd1e2833e0941622efadd55f881', ref: el => {
|
|
3087
3081
|
if (el) {
|
|
3088
3082
|
this.shareDialogRef = el;
|
|
3089
3083
|
}
|
|
3090
|
-
}, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '
|
|
3084
|
+
}, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: 'ac54c699a94bb2657a6817c37d6220b75d931cd3', ref: el => {
|
|
3091
3085
|
if (el) {
|
|
3092
3086
|
this.loginDialogRef = el;
|
|
3093
3087
|
}
|
|
@@ -27417,7 +27411,7 @@ class KritzelWheelHelper {
|
|
|
27417
27411
|
}
|
|
27418
27412
|
}
|
|
27419
27413
|
|
|
27420
|
-
const kritzelEngineCss = () => `:host{display:block;position:relative;height:100%;width:100%;overflow:hidden;isolation:isolate;background-color:var(--kritzel-engine-background-color, #ffffff)
|
|
27414
|
+
const kritzelEngineCss = () => `:host{display:block;position:relative;height:100%;width:100%;overflow:hidden;isolation:isolate;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.ProseMirror{outline:none}p,h1,h2,h3,h4,h5,h6,blockquote,pre{margin:0;padding:0}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}.PlaygroundEditorTheme__quote{margin:0;margin-left:20px;margin-bottom:10px;font-size:15px;color:rgb(101, 103, 107);border-left-color:rgb(206, 208, 212);border-left-width:4px;border-left-style:solid;padding-left:16px}`;
|
|
27421
27415
|
|
|
27422
27416
|
const KritzelEngine = class {
|
|
27423
27417
|
get host() { return getElement(this); }
|
|
@@ -27649,8 +27643,10 @@ const KritzelEngine = class {
|
|
|
27649
27643
|
notificationsChange;
|
|
27650
27644
|
/** Emitted when the combined loading state (external `isLoading` prop or internal workspace loading) changes. */
|
|
27651
27645
|
loadingChange;
|
|
27646
|
+
/** Emitted when remote workspace synchronization is in progress. */
|
|
27647
|
+
syncingChange;
|
|
27652
27648
|
forceUpdate = 0;
|
|
27653
|
-
|
|
27649
|
+
isSyncing = false;
|
|
27654
27650
|
/** Manually triggers the `objectsSelectionChange` event. */
|
|
27655
27651
|
async triggerSelectionChange() {
|
|
27656
27652
|
this.objectsSelectionChange.emit();
|
|
@@ -29107,12 +29103,12 @@ const KritzelEngine = class {
|
|
|
29107
29103
|
_objectDistanceFadeCloseMaxScale = 4;
|
|
29108
29104
|
_objectDistanceFadeCloseMinOpacity = 0;
|
|
29109
29105
|
syncLoadingState() {
|
|
29110
|
-
|
|
29111
|
-
this.core.store.state.isLoading
|
|
29112
|
-
|
|
29113
|
-
|
|
29114
|
-
|
|
29115
|
-
this.
|
|
29106
|
+
this.core.store.state.isLoading = this._isWorkspaceLoading || this.isLoading;
|
|
29107
|
+
this.loadingChange.emit(this.core.store.state.isLoading);
|
|
29108
|
+
}
|
|
29109
|
+
syncSyncingState(isSyncing) {
|
|
29110
|
+
this.isSyncing = isSyncing;
|
|
29111
|
+
this.syncingChange.emit(isSyncing);
|
|
29116
29112
|
}
|
|
29117
29113
|
applyToolConfig(tool, toolConfig) {
|
|
29118
29114
|
Object.entries(toolConfig).forEach(([key, value]) => {
|
|
@@ -29159,6 +29155,7 @@ const KritzelEngine = class {
|
|
|
29159
29155
|
this.awarenessChange = createEvent(this, "awarenessChange");
|
|
29160
29156
|
this.notificationsChange = createEvent(this, "notificationsChange");
|
|
29161
29157
|
this.loadingChange = createEvent(this, "loadingChange");
|
|
29158
|
+
this.syncingChange = createEvent(this, "syncingChange");
|
|
29162
29159
|
this.core = new KritzelCore(this);
|
|
29163
29160
|
}
|
|
29164
29161
|
disconnectedCallback() {
|
|
@@ -29387,9 +29384,21 @@ const KritzelEngine = class {
|
|
|
29387
29384
|
this._workspaceInitializationTargetKey = targetKey;
|
|
29388
29385
|
try {
|
|
29389
29386
|
await initializationPromise;
|
|
29390
|
-
//
|
|
29387
|
+
// Track remote sync in the background without blocking the loading overlay.
|
|
29391
29388
|
const initializedObjects = this.core.store.objects;
|
|
29392
|
-
|
|
29389
|
+
const networkSyncPromise = initializedObjects?.whenNetworkSynced();
|
|
29390
|
+
if (networkSyncPromise) {
|
|
29391
|
+
this.syncSyncingState(true);
|
|
29392
|
+
void networkSyncPromise.finally(() => {
|
|
29393
|
+
// Only clear syncing for the currently active object map.
|
|
29394
|
+
if (this.core.store.objects === initializedObjects) {
|
|
29395
|
+
this.syncSyncingState(false);
|
|
29396
|
+
}
|
|
29397
|
+
});
|
|
29398
|
+
}
|
|
29399
|
+
else {
|
|
29400
|
+
this.syncSyncingState(false);
|
|
29401
|
+
}
|
|
29393
29402
|
}
|
|
29394
29403
|
finally {
|
|
29395
29404
|
// Only the most recent init clears loading state to prevent race conditions
|
|
@@ -29574,7 +29583,7 @@ const KritzelEngine = class {
|
|
|
29574
29583
|
this.emitObjectsInViewportChange();
|
|
29575
29584
|
}
|
|
29576
29585
|
}
|
|
29577
|
-
return (h(Host, {
|
|
29586
|
+
return (h(Host, null, h("kritzel-loading-overlay", { visible: this.core.store.state.isLoading, text: this.core.localizationManager.translate('engine.loading') }), h("kritzel-sync-indicator", { visible: this.isSyncing, text: "Syncing..." }), this.core.store.state.debugInfo.showViewportInfo && (h("div", { class: "debug-panel" }, h("div", null, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", null, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", null, "TranslateX: ", this.core.store.state?.translateX), h("div", null, "TranslateY: ", this.core.store.state?.translateY), h("div", null, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", null, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", null, "PointerCount: ", this.core.store.state.pointers.size), h("div", null, "Scale: ", this.core.store.state?.scale), h("div", null, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", null, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", null, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", null, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", null, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", null, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", null, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", null, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", null, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", null, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", null, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", null, "PointerX: ", this.core.store.state?.pointerX), h("div", null, "PointerY: ", this.core.store.state?.pointerY), h("div", null, "TotalObjects: ", this.core.store.totalObjectCount), h("div", null, "ObjectsInViewport: ", this.core.store.objectsInViewport.length), h("div", null, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", null, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { id: "origin", class: "origin", style: {
|
|
29578
29587
|
transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
|
|
29579
29588
|
} }, visibleObjects?.map(object => {
|
|
29580
29589
|
const { multiplied: effectiveOpacity, overridden: effectiveOpacityString } = this.getObjectEffectiveOpacity(object, viewportScale);
|
|
@@ -30172,7 +30181,7 @@ const KritzelExport = class {
|
|
|
30172
30181
|
return (h("div", { class: "export-tab-content" }, h("kritzel-input", { label: this.terms['export.filename.label'] ?? 'Filename', value: this.exportFilename, placeholder: this.terms['export.filename.placeholder'] ?? 'Enter filename', suffix: ".json", onValueChange: this.handleFilenameChange })));
|
|
30173
30182
|
}
|
|
30174
30183
|
render() {
|
|
30175
|
-
return (h(Host, { key: '
|
|
30184
|
+
return (h(Host, { key: '2f12ec7f4754e3f2aa0364809bdbde60102d76e4' }, h("kritzel-dialog", { key: '0e5929e175ac41dd7f480aabaef2aa109a15f679', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: '6afffd8098e414c117582f3485dbaa348747eb4c', class: "export-content" }, h("kritzel-pill-tabs", { key: 'dd901f356e80fb71033311825e4d83af36b9c561', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport(), h("button", { key: '9fab5c1037cc9187c4f14c9534c8f395fde0d7cf', class: "export-primary-button", onClick: this.handleExport }, this.terms['export.exportButton'] ?? 'Export')))));
|
|
30176
30185
|
}
|
|
30177
30186
|
};
|
|
30178
30187
|
KritzelExport.style = kritzelExportCss();
|
|
@@ -30187,7 +30196,7 @@ const KritzelFont = class {
|
|
|
30187
30196
|
size = 24;
|
|
30188
30197
|
color = '#000000';
|
|
30189
30198
|
render() {
|
|
30190
|
-
return (h(Host, { key: '
|
|
30199
|
+
return (h(Host, { key: '57369ac95d0c99a52a8580e7659ec10e0e8ab38e' }, h("div", { key: 'e8f128fd7b8d26debb2c4ad2075b27f969d731bd', class: "font-preview", style: {
|
|
30191
30200
|
fontFamily: this.fontFamily,
|
|
30192
30201
|
fontSize: `${this.size}px`,
|
|
30193
30202
|
color: this.color
|
|
@@ -30263,7 +30272,7 @@ const KritzelFontSize = class {
|
|
|
30263
30272
|
render() {
|
|
30264
30273
|
const color = 'var(--kritzel-global-text-primary)';
|
|
30265
30274
|
const sizes = this.sizes ?? [];
|
|
30266
|
-
return (h(Host, { key: '
|
|
30275
|
+
return (h(Host, { key: '298b8c232c4d96583f4899efea86482ae8ebd319' }, sizes.map(size => (h("div", { tabIndex: 0, class: {
|
|
30267
30276
|
'size-container': true,
|
|
30268
30277
|
'selected': this.selectedSize === size,
|
|
30269
30278
|
}, onClick: () => this.handleSizeClick(size), onKeyDown: event => this.handleKeyDown(event, size) }, h("kritzel-font", { fontFamily: this.fontFamily, size: size, color: color }))))));
|
|
@@ -30330,7 +30339,7 @@ const KritzelInput = class {
|
|
|
30330
30339
|
this.valueChange.emit(input.value);
|
|
30331
30340
|
};
|
|
30332
30341
|
render() {
|
|
30333
|
-
return (h(Host, { key: '
|
|
30342
|
+
return (h(Host, { key: 'a59aa026922a3267ec7e6177973e80edfa97202c' }, h("div", { key: '46b1f191072bfb2a26579a329f8fd6ec86ca3ef9', class: "input-container" }, this.label && h("label", { key: '5409f811792034be56c3269b31ff374d8ed33de2', class: "input-label" }, this.label), h("div", { key: 'f51219b2a6384aeee63a7c8214821abd853a0ea5', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, h("input", { key: '05c93a526aa2f2d757a7c139fa3a47d84a4e2d95', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && h("span", { key: '91b60b25a7ff750720ff1961e224a035a2d86096', class: "input-suffix" }, this.suffix)))));
|
|
30334
30343
|
}
|
|
30335
30344
|
static get watchers() { return {
|
|
30336
30345
|
"value": [{
|
|
@@ -30438,7 +30447,7 @@ const KritzelLoadingOverlay = class {
|
|
|
30438
30447
|
*/
|
|
30439
30448
|
text = 'Loading...';
|
|
30440
30449
|
render() {
|
|
30441
|
-
return (h(Host, { key: '
|
|
30450
|
+
return (h(Host, { key: '30e6a9bd7337d74a2d33f27e8b9facfe1e5fdcce' }, h("div", { key: '4d0f7561372c2b28f748d5338dc28146fd1f8d31', class: { 'loading-overlay': true, visible: this.visible }, "aria-hidden": this.visible ? 'false' : 'true' }, h("span", { key: '303c5037522c00840089d7200a63525cffa05b82', class: "loading-spinner" }), this.text)));
|
|
30442
30451
|
}
|
|
30443
30452
|
};
|
|
30444
30453
|
KritzelLoadingOverlay.style = kritzelLoadingOverlayCss();
|
|
@@ -30490,7 +30499,7 @@ const KritzelLoginDialog = class {
|
|
|
30490
30499
|
this.dialogClosed.emit();
|
|
30491
30500
|
};
|
|
30492
30501
|
render() {
|
|
30493
|
-
return (h(Host, { key: '
|
|
30502
|
+
return (h(Host, { key: 'd2b393ac37292a0cf88d0e18e9768ca666b238b2' }, h("kritzel-dialog", { key: '6e302e9030b5da0baf307fe261285e484b3c1f08', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: 'f32b073d70acb3874dc3ab4c3905543067a543d8', class: "login-content" }, this.subtitle && (h("p", { key: '42a6ec7d6c9ca0a14700bd13cbe8ee9edbbcc18b', class: "login-subtitle" }, this.subtitle)), h("div", { key: 'cbb5497abd1c88fc364ac8bb7c3d356df6df0dad', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
|
|
30494
30503
|
'provider-button': true,
|
|
30495
30504
|
'is-loading': this.loadingProvider === provider.name,
|
|
30496
30505
|
'is-disabled': this.loadingProvider !== null && this.loadingProvider !== provider.name,
|
|
@@ -30596,15 +30605,15 @@ const KritzelMasterDetail = class {
|
|
|
30596
30605
|
const selectedItem = this.items.find(item => item.id === this.selectedItemId);
|
|
30597
30606
|
const panelId = 'master-detail-panel';
|
|
30598
30607
|
const selectedTabId = selectedItem ? `tab-${selectedItem.id}` : undefined;
|
|
30599
|
-
return (h(Host, { key: '
|
|
30608
|
+
return (h(Host, { key: 'e363142a5175b1f711cebfc98cfeedf07cd2c6c3' }, h("div", { key: 'eebf863ecdb4a53289cb56e14c02977375781167', class: {
|
|
30600
30609
|
'master-detail-container': true,
|
|
30601
30610
|
'is-mobile-detail-visible': this.showMobileDetail,
|
|
30602
|
-
} }, h("nav", { key: '
|
|
30611
|
+
} }, h("nav", { key: '06660d3cd7de29ba46e3437169f99cb00eef1cc6', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index) => (h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index), class: {
|
|
30603
30612
|
'menu-item': true,
|
|
30604
30613
|
'is-selected': item.id === this.selectedItemId,
|
|
30605
30614
|
'is-disabled': !!item.disabled,
|
|
30606
30615
|
'is-focused': index === this.focusedIndex,
|
|
30607
|
-
}, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index), onFocus: () => this.handleFocus(index), onBlur: this.handleBlur }, item.icon && (h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), h("span", { class: "menu-item-label" }, item.label), h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "m9 18 6-6-6-6" }))))))), h("div", { key: '
|
|
30616
|
+
}, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index), onFocus: () => this.handleFocus(index), onBlur: this.handleBlur }, item.icon && (h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), h("span", { class: "menu-item-label" }, item.label), h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "m9 18 6-6-6-6" }))))))), h("div", { key: '0d6b6722ecbf64b28d27754161f861edafa3882c', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, h("button", { key: '3d8ac88c0f8a7a840b5560c4917d74ff910a99c8', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, h("kritzel-icon", { key: '03cf6ca5ea2b9d16ff21b1b38fd0b6148d35ff1f', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), h("slot", { key: '3323357889024c0d2126c30d976c3ece7ddd706a' })))));
|
|
30608
30617
|
}
|
|
30609
30618
|
static get watchers() { return {
|
|
30610
30619
|
"selectedItemId": [{
|
|
@@ -30677,7 +30686,7 @@ const KritzelMenu = class {
|
|
|
30677
30686
|
this.itemCloseChildMenu.emit(event.detail);
|
|
30678
30687
|
};
|
|
30679
30688
|
render() {
|
|
30680
|
-
return (h(Host, { key: '
|
|
30689
|
+
return (h(Host, { key: '9edadb795e13a5242a0a086bd78c21f0f420e88c', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: '4925a8698c1ac61787ba8c44beeed46461c62625', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (h("kritzel-menu-item", { key: item.id, "data-testid": `menu-item-${item.id}`, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
|
|
30681
30690
|
}
|
|
30682
30691
|
};
|
|
30683
30692
|
KritzelMenu.style = kritzelMenuCss();
|
|
@@ -30782,12 +30791,12 @@ const KritzelMenuItem = class {
|
|
|
30782
30791
|
];
|
|
30783
30792
|
}
|
|
30784
30793
|
render() {
|
|
30785
|
-
return (h(Host, { key: '
|
|
30794
|
+
return (h(Host, { key: '89e05e4ec01b4de48019a2459f625e34669b8429', tabIndex: this.item.isDisabled ? -1 : 0, class: {
|
|
30786
30795
|
'selected': this.item.isSelected,
|
|
30787
30796
|
'editing': this.item.isEditing,
|
|
30788
30797
|
'disabled': this.item.isDisabled,
|
|
30789
30798
|
'child-open': this.item.isChildMenuOpen,
|
|
30790
|
-
}, onClick: this.handleItemSelect }, h("div", { key: '
|
|
30799
|
+
}, onClick: this.handleItemSelect }, h("div", { key: '5de01524315482194c26e4bd4969f2ead4d852ec', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
|
|
30791
30800
|
}
|
|
30792
30801
|
static get watchers() { return {
|
|
30793
30802
|
"item": [{
|
|
@@ -30860,7 +30869,7 @@ const KritzelMoreMenu = class {
|
|
|
30860
30869
|
this.closeMenu();
|
|
30861
30870
|
};
|
|
30862
30871
|
render() {
|
|
30863
|
-
return (h(Host, { key: '
|
|
30872
|
+
return (h(Host, { key: '4ebbcbdf3464aeeb0585b571b424375e0493c7e9', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, h("div", { key: '080b74a0e4e4d4a2e9dee3d23cce22ea5bed7423', class: { 'more-menu-wrapper': true, visible: this.visible } }, h("button", { key: 'b8bfb586ca544a1c6711ba76fe55246c844f7425', class: "more-menu-button", "data-testid": "more-menu-button", onClick: this.toggleMenu, "aria-label": this.terms['moreMenu.ariaLabel'] ?? 'More options' }, h("kritzel-icon", { key: 'c76314d63048ef91d24e09aab646098c15ec7edf', name: this.icon, size: this.iconSize })), h("kritzel-portal", { key: '07c10d2bdb2b0ded07206efe82bd5e1edc49d736', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, h("kritzel-menu", { key: 'b5a6d63d6f8a0ffb9fae4dcab6bae276b45c46b6', items: this.visibleItems, onItemSelect: this.handleMenuItemSelect })))));
|
|
30864
30873
|
}
|
|
30865
30874
|
};
|
|
30866
30875
|
KritzelMoreMenu.style = kritzelMoreMenuCss();
|
|
@@ -31027,7 +31036,7 @@ const KritzelNumericInput = class {
|
|
|
31027
31036
|
this.valueChange.emit(newValue);
|
|
31028
31037
|
};
|
|
31029
31038
|
render() {
|
|
31030
|
-
return (h(Host, { key: '
|
|
31039
|
+
return (h(Host, { key: 'eb766b22717d856d096bd1a4a44279f6ac994892' }, h("div", { key: '2394e2b2af48f560e77e7a37b34d00656b0dd344', class: "input-container" }, this.label && h("label", { key: 'd8889aa93d4a86fa841f4da1f0b97411ab039cb1', class: "input-label" }, this.label), h("div", { key: 'b55ae2edf164cdfcdda356119b148c8bfb8fbd24', class: "input-wrapper" }, h("input", { key: 'ee1f1663f19c5ca66d64b6c5142005da318e03e4', type: "number", class: "numeric-input", title: "", min: this.min === Number.MIN_SAFE_INTEGER ? undefined : this.min, max: this.max === Number.MAX_SAFE_INTEGER ? undefined : this.max, step: this.step, value: this.inputValue, placeholder: this.placeholder, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onInvalid: this.handleInvalid }), h("div", { key: '82e127b045e631616e6368c437473bbf9732445d', class: "spinner-buttons" }, h("button", { key: 'e7412dffccbdacbb5743ae2e2e7bd33c68e6fceb', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, h("svg", { key: '7e471bf2bee5d4d161fea2e838b26e2f28bb84d9', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: '69e4c80eed03b2ee2a044d07f35420b7618f4e75', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: 'a0c2350d48c398f7396cebd973438c0e390d0aff', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, h("svg", { key: 'c1f6264d187936d5eb0cc43c0275dc2e2c93b854', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: 'facbdd171b43868ec41b469b0d11d6c9bfcec3aa', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
|
|
31031
31040
|
}
|
|
31032
31041
|
static get watchers() { return {
|
|
31033
31042
|
"value": [{
|
|
@@ -31066,7 +31075,7 @@ const KritzelOpacitySlider = class {
|
|
|
31066
31075
|
}
|
|
31067
31076
|
render() {
|
|
31068
31077
|
const percentage = this.getPercentage();
|
|
31069
|
-
return (h(Host, { key: '
|
|
31078
|
+
return (h(Host, { key: 'a175945928dac5ae5b4464c0b11c4d812f8a3ef6' }, h("div", { key: 'a045d452d459577f8d657e00dd9189797dd4de66', class: "opacity-container" }, h("div", { key: '11a4217a4b6e1f0b1981a8fd8e03f505a9d4a3b5', class: "slider-wrapper" }, h("input", { key: '2cbf72a10026c4201727208230b8832ea2309a76', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
|
|
31070
31079
|
'--slider-progress': `${percentage}%`,
|
|
31071
31080
|
'--kritzel-opacity-slider-thumb-border-color': this.previewColor,
|
|
31072
31081
|
} })))));
|
|
@@ -31419,7 +31428,7 @@ const KritzelPortal = class {
|
|
|
31419
31428
|
this.portal.style.visibility = 'visible';
|
|
31420
31429
|
}
|
|
31421
31430
|
render() {
|
|
31422
|
-
return (h(Host, { key: '
|
|
31431
|
+
return (h(Host, { key: 'f919789973cd7828b393028171594d481113fb45', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '21b837fe7162c0a0a8d01bb5c41d3736a265714c' })));
|
|
31423
31432
|
}
|
|
31424
31433
|
static get watchers() { return {
|
|
31425
31434
|
"anchor": [{
|
|
@@ -31433,7 +31442,7 @@ const KritzelPortal = class {
|
|
|
31433
31442
|
* This file is auto-generated by the version bump scripts.
|
|
31434
31443
|
* Do not modify manually.
|
|
31435
31444
|
*/
|
|
31436
|
-
const KRITZEL_VERSION = '0.3.
|
|
31445
|
+
const KRITZEL_VERSION = '0.3.45';
|
|
31437
31446
|
|
|
31438
31447
|
const kritzelSettingsCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}.shortcuts-list{display:flex;flex-direction:column;gap:24px}.shortcuts-category{display:flex;flex-direction:column;gap:8px}.shortcuts-category-title{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.shortcuts-group{display:flex;flex-direction:column;gap:4px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-item-bg, rgba(0, 0, 0, 0.02))}.shortcut-label{font-size:14px;color:var(--kritzel-settings-content-text-color, #666666)}.shortcut-key{font-family:monospace;font-size:12px;padding:2px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-key-bg, #f0f0f0);color:var(--kritzel-settings-shortcut-key-color, #333333);border:1px solid var(--kritzel-settings-shortcut-key-border, #ddd)}`;
|
|
31439
31448
|
|
|
@@ -31658,7 +31667,7 @@ const KritzelSettings = class {
|
|
|
31658
31667
|
}
|
|
31659
31668
|
}
|
|
31660
31669
|
render() {
|
|
31661
|
-
return (h(Host, { key: '
|
|
31670
|
+
return (h(Host, { key: '1fb0bca35cb20633f017a927d39e2a66ebfb403b' }, h("kritzel-dialog", { key: '6366a8d8e7f65ef3f715248db3dc7c7e36dd3f4a', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: '2f4891d1ef0b3f130c591790b2e53e7264a61145', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
|
|
31662
31671
|
}
|
|
31663
31672
|
static get watchers() { return {
|
|
31664
31673
|
"settings": [{
|
|
@@ -34898,9 +34907,9 @@ const KritzelShareDialog = class {
|
|
|
34898
34907
|
this.dialogClosed.emit();
|
|
34899
34908
|
};
|
|
34900
34909
|
render() {
|
|
34901
|
-
return (h(Host, { key: '
|
|
34910
|
+
return (h(Host, { key: '3125a157e71a0f5e5e4762cb4069c457bd7d44f6' }, h("kritzel-dialog", { key: '948007c3f631ac8c6d2b163d8c41e5d85d17990e', dialogTitle: this.terms['share.dialogTitle'] ?? 'Share Workspace', size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, h("div", { key: '6eda07bd40162baba728648e266d819705608990', class: "share-content" }, h("div", { key: 'f693904e3541b2b248ac9a965c4c65d407c63d42', class: "share-section" }, h("div", { key: '5d76c4944fe5e40469de2c92fdbe939936cfede7', class: "share-row" }, h("div", { key: '84d4cbeacaa4b83f1570ed36de8311f9c20225ed', class: "share-label-group" }, h("label", { key: '0b666d1b26bd7a7ec05705be97c6c01b98f3bcab', class: "share-label" }, this.terms['share.linkSharing.label'] ?? 'Link sharing'), h("p", { key: '41b0df856dd7cf80f40ba8e485816a2ca794c23e', class: "share-description" }, this.internalIsPublic
|
|
34902
34911
|
? (this.terms['share.linkSharing.enabledDescription'] ?? 'Anyone with the link can access this workspace.')
|
|
34903
|
-
: (this.terms['share.linkSharing.disabledDescription'] ?? 'Link sharing is disabled. Only you can access this workspace.'))), h("kritzel-slide-toggle", { key: '
|
|
34912
|
+
: (this.terms['share.linkSharing.disabledDescription'] ?? 'Link sharing is disabled. Only you can access this workspace.'))), h("kritzel-slide-toggle", { key: '1e2a9437714bcf3d85e40f4f7a69e027f4c05e9c', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: this.terms['share.linkSharing.toggleLabel'] ?? 'Enable link sharing' }))), this.internalIsPublic && (h("div", { key: 'b64439cced536c440afb93eb4d674221299101ae', class: "share-section" }, h("div", { key: '905ddd55dfef9bb4e2388228237c49d59b633658', class: "share-url-container" }, h("input", { key: '62797e8efa4a918302198c8dbd6fb04bbb13d032', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), h("button", { key: '7a018f0ec803644fefa16a3678cd32503704a3b8', class: { 'copy-button': true, 'copy-success': this.copySuccess }, onClick: this.handleCopyUrl, title: this.copySuccess ? (this.terms['share.copyLink.copied'] ?? 'Copied!') : (this.terms['share.copyLink.title'] ?? 'Copy link') }, h("kritzel-icon", { key: '6321962e43123c7798685821051fd33f702b9156', name: this.copySuccess ? 'check' : 'copy', size: 18 }))), this.qrCodeDataUrl && (h("div", { key: 'db4e5c19d2ece15523a4746a84b62bb3b55177ab', class: "share-qr-container" }, h("img", { key: '403477b5cd526beefabc3576050d399a2520d51b', class: "share-qr-image", src: this.qrCodeDataUrl, alt: "QR code for share link" })))))))));
|
|
34904
34913
|
}
|
|
34905
34914
|
static get watchers() { return {
|
|
34906
34915
|
"isPublic": [{
|
|
@@ -34941,7 +34950,7 @@ const KritzelSlideToggle = class {
|
|
|
34941
34950
|
}
|
|
34942
34951
|
};
|
|
34943
34952
|
render() {
|
|
34944
|
-
return (h(Host, { key: '
|
|
34953
|
+
return (h(Host, { key: 'e132e2614dcf2c7afc51e8aa064de36ea4a84710', class: { checked: this.checked, disabled: this.disabled }, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label, onClick: this.handleToggle, onKeyDown: this.handleKeyDown }, h("div", { key: 'c7857aa2b747aba1851f7df1bde3d0469898d32a', class: "toggle-track" }, h("div", { key: '6beb1821fdc265b4fb5d0a6813a33fb768366984', class: "toggle-thumb" }))));
|
|
34945
34954
|
}
|
|
34946
34955
|
};
|
|
34947
34956
|
KritzelSlideToggle.style = kritzelSlideToggleCss();
|
|
@@ -35041,7 +35050,7 @@ const KritzelSplitButton = class {
|
|
|
35041
35050
|
this.menuScrollTop = event.target.scrollTop;
|
|
35042
35051
|
};
|
|
35043
35052
|
render() {
|
|
35044
|
-
return (h(Host, { key: '
|
|
35053
|
+
return (h(Host, { key: 'b3b5b4a63df6e6a4bd2902716a8c26830e31127d', class: { mobile: this.isTouchDevice } }, h("button", { key: 'a25f723f41c1604172fa96d036eab6b80a22add5', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && h("kritzel-icon", { key: '6999b1baefa3c940c2a25772b0c03ab0c809cd79', name: this.buttonIcon })), h("div", { key: 'dcbff30cae4a73b5c214c0ae98b16c8d681b8eed', class: "split-divider" }), h("button", { key: 'bdbe0b300b3c5df31df58574ee055f05787acceb', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled, "aria-label": "Open menu" }, h("kritzel-icon", { key: '66969517639c73140a745bc189730dfa09eafa08', name: this.dropdownIcon })), h("kritzel-portal", { key: '197d002ea78ddb535743d6d2f872b9779dfc462b', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: '15f1d42042e2368ff04e54f7872480f9f8841900', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
|
|
35045
35054
|
}
|
|
35046
35055
|
};
|
|
35047
35056
|
KritzelSplitButton.style = kritzelSplitButtonCss();
|
|
@@ -35062,7 +35071,7 @@ const KritzelStrokeSize = class {
|
|
|
35062
35071
|
}
|
|
35063
35072
|
render() {
|
|
35064
35073
|
const sizes = this.sizes ?? [];
|
|
35065
|
-
return (h(Host, { key: '
|
|
35074
|
+
return (h(Host, { key: 'a097daf527501b07874b449ac75ecb765cdd81b2' }, h("div", { key: '0e2b3ade9bae7d4f97d5de8ecd44424fe914f3e7', class: "size-grid" }, sizes.map(size => (h("div", { tabIndex: 0, class: {
|
|
35066
35075
|
'size-container': true,
|
|
35067
35076
|
'selected': this.selectedSize === size,
|
|
35068
35077
|
}, onClick: () => this.handleSizeClick(size) }, h("kritzel-color", { value: 'var(--kritzel-global-text-primary)', size: size })))))));
|
|
@@ -35070,6 +35079,22 @@ const KritzelStrokeSize = class {
|
|
|
35070
35079
|
};
|
|
35071
35080
|
KritzelStrokeSize.style = kritzelStrokeSizeCss();
|
|
35072
35081
|
|
|
35082
|
+
const kritzelSyncIndicatorCss = () => `:host{display:contents}.indicator{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:var(--kritzel-sync-indicator-z-index, 10001);pointer-events:none;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:var(--kritzel-sync-indicator-background, rgba(255, 255, 255, 0.92));color:var(--kritzel-sync-indicator-color, #334155);box-shadow:0 2px 10px rgba(0, 0, 0, 0.12);font-family:var(--kritzel-font-family, sans-serif);font-size:12px;line-height:1;font-weight:500;opacity:0;visibility:hidden}.indicator.visible{opacity:1;visibility:visible}.spinner{width:12px;height:12px;border-radius:50%;border:2px solid var(--kritzel-sync-indicator-spinner-track, rgba(148, 163, 184, 0.35));border-top-color:var(--kritzel-sync-indicator-spinner-color, #2563eb);animation:kritzel-sync-indicator-spin 0.8s linear infinite}@keyframes kritzel-sync-indicator-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;
|
|
35083
|
+
|
|
35084
|
+
const KritzelSyncIndicator = class {
|
|
35085
|
+
constructor(hostRef) {
|
|
35086
|
+
registerInstance(this, hostRef);
|
|
35087
|
+
}
|
|
35088
|
+
/** Whether the indicator is visible. */
|
|
35089
|
+
visible = false;
|
|
35090
|
+
/** The text displayed next to the spinner. */
|
|
35091
|
+
text = 'Syncing...';
|
|
35092
|
+
render() {
|
|
35093
|
+
return (h(Host, { key: '833aa19a39357398a9fc2d97246398b77f1b990f' }, h("div", { key: 'cabb31890ea7c6afdafa6427306caa19a2d8f818', class: { indicator: true, visible: this.visible }, role: "status", "aria-live": "polite", "aria-label": "Synchronizing workspace" }, h("span", { key: '086105d00156d8556d8a78cfb0cec47d65b40a1f', class: "spinner", "aria-hidden": "true" }), h("span", { key: '9934152bb9f55399a20112f4230c4efc1518a2e1' }, this.text))));
|
|
35094
|
+
}
|
|
35095
|
+
};
|
|
35096
|
+
KritzelSyncIndicator.style = kritzelSyncIndicatorCss();
|
|
35097
|
+
|
|
35073
35098
|
const kritzelToolConfigCss = () => `.expand-toggle{background:none;border:none;cursor:var(--kritzel-global-pointer-cursor, pointer);padding:0;margin:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--kritzel-icon-color, currentColor);transition:transform 0.2s ease}.expand-toggle:hover{opacity:0.7}.expand-toggle:focus{outline:none}.expand-toggle:focus-visible{outline:2px solid var(--kritzel-focus-color, #007acc);outline-offset:2px}.expand-toggle:active{transform:scale(0.95)}.divider{height:1px;background-color:var(--kritzel-divider-color, #e0e0e0);margin:4px 0;width:100%}`;
|
|
35074
35099
|
|
|
35075
35100
|
const KritzelToolConfig = class {
|
|
@@ -35443,14 +35468,14 @@ const KritzelTooltip = class {
|
|
|
35443
35468
|
}
|
|
35444
35469
|
}
|
|
35445
35470
|
render() {
|
|
35446
|
-
return (h(Host, { key: '
|
|
35471
|
+
return (h(Host, { key: 'c0a4b682b3279b8c830dfa758284979e91c0ce2a', style: {
|
|
35447
35472
|
position: 'fixed',
|
|
35448
35473
|
zIndex: '9999',
|
|
35449
35474
|
transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
|
|
35450
35475
|
visibility: this.isVisible ? 'visible' : 'hidden',
|
|
35451
35476
|
left: `${this.positionX}px`,
|
|
35452
35477
|
bottom: `${this.positionY}px`,
|
|
35453
|
-
} }, h("div", { key: '
|
|
35478
|
+
} }, h("div", { key: '09fd259d19d42db513161b645aa19206ae81c76a', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: 'f743c0ca8c415d71e0af53cdab8304df60dd9a37' }))));
|
|
35454
35479
|
}
|
|
35455
35480
|
static get watchers() { return {
|
|
35456
35481
|
"triggerElement": [{
|
|
@@ -35491,7 +35516,7 @@ const KritzelUtilityPanel = class {
|
|
|
35491
35516
|
this.redo.emit();
|
|
35492
35517
|
}
|
|
35493
35518
|
render() {
|
|
35494
|
-
return (h(Host, { key: '
|
|
35519
|
+
return (h(Host, { key: '0ea9faf487a37d04097ee64e080f8f9bd8e6c901' }, h("button", { key: 'dbd4c0972188904b4c3cbbbf46c272fde462df0d', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event), "aria-label": this.terms['utility.undo'] ?? 'Undo' }, h("kritzel-icon", { key: '6d7db899d6dc205d5b8dbf9404d916676e8bb345', name: "undo" })), h("button", { key: '290a4d9e67130b24068c0c9a958b5532492b1c03', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event), "aria-label": this.terms['utility.redo'] ?? 'Redo' }, h("kritzel-icon", { key: 'c88c575084ffe6df27d58d2f17e4b50253143158', name: "redo" })), h("div", { key: '195d4a77c76097c0e5fbe56266a3ad7ce246115f', class: "utility-separator" }), h("button", { key: 'c55b7a8f8e355d8ce046784a2e465ab96d5df5b7', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": this.terms['utility.delete'] ?? 'Delete selected items' }, h("kritzel-icon", { key: 'b429e334f6117c6a9c7de642e5290fb848576cd4', name: "delete" }))));
|
|
35495
35520
|
}
|
|
35496
35521
|
};
|
|
35497
35522
|
KritzelUtilityPanel.style = kritzelUtilityPanelCss();
|
|
@@ -35512,7 +35537,7 @@ const KritzelWatermark = class {
|
|
|
35512
35537
|
label;
|
|
35513
35538
|
render() {
|
|
35514
35539
|
const label = this.label ?? this.core.localizationManager.translate('watermark.poweredBy');
|
|
35515
|
-
return (h(Host, { key: '
|
|
35540
|
+
return (h(Host, { key: '143ea32342e30351c93751714dfd12b725ddca24' }, h("a", { key: '95fb2dfa0d806367e6a71dad3932b321d7ae5a76', class: "watermark-link", href: KRITZEL_WEBSITE_URL, target: "_blank", rel: "noopener noreferrer", part: "watermark", onPointerDown: (ev) => ev.stopPropagation(), onPointerUp: (ev) => ev.stopPropagation() }, label)));
|
|
35516
35541
|
}
|
|
35517
35542
|
};
|
|
35518
35543
|
KritzelWatermark.style = kritzelWatermarkCss();
|
|
@@ -35700,9 +35725,9 @@ const KritzelZoomPanel = class {
|
|
|
35700
35725
|
return Number.isFinite(this.zoomPercent) ? Math.max(1, Math.round(this.zoomPercent)) : 100;
|
|
35701
35726
|
}
|
|
35702
35727
|
render() {
|
|
35703
|
-
return (h(Host, { key: '
|
|
35728
|
+
return (h(Host, { key: 'e772e5c838c0d0372302f624e5030a7cd04353eb' }, h("div", { key: '69795e24e44cabd3c7ebb65f3e1e1d039fef290e', class: { panel: true, visible: this.visible } }, h("button", { key: 'ceade9417dc5aadb18c6312d190343a1d0538485', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomOut'] ?? 'Zoom out', disabled: this.disabled, onClick: this.handleZoomOut }, h("kritzel-icon", { key: 'ae45acfd6b438bc97c2a7e6b15a256d8600cd51d', name: "minus" })), h("span", { key: '2017b9c99989a26383123210cd402bf80a8591bd', class: "zoom-level", "aria-live": "polite" }, this.normalizedZoomPercent, "%"), h("button", { key: '925420fa6616b5ea1b995e07a989159b28cdbb48', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomIn'] ?? 'Zoom in', disabled: this.disabled, onClick: this.handleZoomIn }, h("kritzel-icon", { key: '569aec9686e6af6aa41d455d29b3eb6fad672f64', name: "plus" })))));
|
|
35704
35729
|
}
|
|
35705
35730
|
};
|
|
35706
35731
|
KritzelZoomPanel.style = kritzelZoomPanelCss();
|
|
35707
35732
|
|
|
35708
|
-
export { KritzelActiveUsers as kritzel_active_users, KritzelAvatar as kritzel_avatar, KritzelAwarenessCursors as kritzel_awareness_cursors, KritzelBackToContent as kritzel_back_to_content, KritzelButton as kritzel_button, KritzelColorComponent as kritzel_color, KritzelColorPalette as kritzel_color_palette, KritzelContextMenu as kritzel_context_menu, KritzelControls as kritzel_controls, KritzelCurrentUser as kritzel_current_user, KritzelCurrentUserDialog as kritzel_current_user_dialog, KritzelCursorTrail as kritzel_cursor_trail, KritzelDialog as kritzel_dialog, KritzelDropdown as kritzel_dropdown, KritzelEditor as kritzel_editor, KritzelEngine as kritzel_engine, KritzelExport as kritzel_export, KritzelFont as kritzel_font, KritzelFontFamily as kritzel_font_family, KritzelFontSize as kritzel_font_size, KritzelIcon as kritzel_icon, KritzelInput as kritzel_input, KritzelLineEndings as kritzel_line_endings, KritzelLoadingOverlay as kritzel_loading_overlay, KritzelLoginDialog as kritzel_login_dialog, KritzelMasterDetail as kritzel_master_detail, KritzelMenu as kritzel_menu, KritzelMenuItem as kritzel_menu_item, KritzelMoreMenu as kritzel_more_menu, KritzelNotificationCard as kritzel_notification_card, KritzelNumericInput as kritzel_numeric_input, KritzelOpacitySlider as kritzel_opacity_slider, KritzelPillTabs as kritzel_pill_tabs, KritzelPortal as kritzel_portal, KritzelSettings as kritzel_settings, KritzelShapeFill as kritzel_shape_fill, KritzelShareDialog as kritzel_share_dialog, KritzelSlideToggle as kritzel_slide_toggle, KritzelSplitButton as kritzel_split_button, KritzelStrokeSize as kritzel_stroke_size, KritzelToolConfig as kritzel_tool_config, KritzelTooltip as kritzel_tooltip, KritzelUtilityPanel as kritzel_utility_panel, KritzelWatermark as kritzel_watermark, KritzelWorkspaceManager as kritzel_workspace_manager, KritzelZoomPanel as kritzel_zoom_panel };
|
|
35733
|
+
export { KritzelActiveUsers as kritzel_active_users, KritzelAvatar as kritzel_avatar, KritzelAwarenessCursors as kritzel_awareness_cursors, KritzelBackToContent as kritzel_back_to_content, KritzelButton as kritzel_button, KritzelColorComponent as kritzel_color, KritzelColorPalette as kritzel_color_palette, KritzelContextMenu as kritzel_context_menu, KritzelControls as kritzel_controls, KritzelCurrentUser as kritzel_current_user, KritzelCurrentUserDialog as kritzel_current_user_dialog, KritzelCursorTrail as kritzel_cursor_trail, KritzelDialog as kritzel_dialog, KritzelDropdown as kritzel_dropdown, KritzelEditor as kritzel_editor, KritzelEngine as kritzel_engine, KritzelExport as kritzel_export, KritzelFont as kritzel_font, KritzelFontFamily as kritzel_font_family, KritzelFontSize as kritzel_font_size, KritzelIcon as kritzel_icon, KritzelInput as kritzel_input, KritzelLineEndings as kritzel_line_endings, KritzelLoadingOverlay as kritzel_loading_overlay, KritzelLoginDialog as kritzel_login_dialog, KritzelMasterDetail as kritzel_master_detail, KritzelMenu as kritzel_menu, KritzelMenuItem as kritzel_menu_item, KritzelMoreMenu as kritzel_more_menu, KritzelNotificationCard as kritzel_notification_card, KritzelNumericInput as kritzel_numeric_input, KritzelOpacitySlider as kritzel_opacity_slider, KritzelPillTabs as kritzel_pill_tabs, KritzelPortal as kritzel_portal, KritzelSettings as kritzel_settings, KritzelShapeFill as kritzel_shape_fill, KritzelShareDialog as kritzel_share_dialog, KritzelSlideToggle as kritzel_slide_toggle, KritzelSplitButton as kritzel_split_button, KritzelStrokeSize as kritzel_stroke_size, KritzelSyncIndicator as kritzel_sync_indicator, KritzelToolConfig as kritzel_tool_config, KritzelTooltip as kritzel_tooltip, KritzelUtilityPanel as kritzel_utility_panel, KritzelWatermark as kritzel_watermark, KritzelWorkspaceManager as kritzel_workspace_manager, KritzelZoomPanel as kritzel_zoom_panel };
|