kritzel-stencil 0.4.25 → 0.4.26
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_47.cjs.entry.js → kritzel-active-users_46.cjs.entry.js} +54 -154
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/stencil.cjs.js +1 -1
- package/dist/collection/classes/core/core.class.js +0 -4
- package/dist/collection/classes/structures/object-map.structure.js +0 -65
- package/dist/collection/collection-manifest.json +0 -1
- package/dist/collection/components/core/kritzel-editor/kritzel-editor.js +10 -33
- package/dist/collection/components/core/kritzel-engine/kritzel-engine.js +0 -20
- 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-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 +0 -2
- package/dist/components/index.js +1 -2
- 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 +92 -107
- 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-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-fL9rl200.js → p-B38_9BJg.js} +1 -1
- package/dist/components/{p-eZXIu4yK.js → p-BPzdPKWE.js} +3 -3
- package/dist/components/{p-BoN700-O.js → p-Ba0c-tu2.js} +2 -2
- package/dist/components/{p-B-585egz.js → p-BeSKOETx.js} +2 -2
- package/dist/components/{p-2WiGyky4.js → p-BprEDRpA.js} +2 -2
- package/dist/components/{p-B5SWPDuq.js → p-C0FEC_gS.js} +1 -1
- package/dist/components/{p-BrNsOp2v.js → p-CAXR5-S9.js} +4 -4
- package/dist/components/{p-BPsKYMH6.js → p-CBrn5AIB.js} +1 -1
- package/dist/components/{p-C98Eb3_R.js → p-Ce1j1-Hg.js} +3 -3
- package/dist/components/{p-DDTMGbtA.js → p-CeffYwAK.js} +15 -15
- package/dist/components/{p-CwZ3KKFq.js → p-ChPs27Fd.js} +3 -3
- package/dist/components/{p-D1rjfWgJ.js → p-CoXN583u.js} +3 -3
- package/dist/components/{p-DwMqCX2P.js → p-CucCT7Qn.js} +2 -2
- package/dist/components/{p-DB58Oa5V.js → p-Cva3jIIU.js} +1 -1
- package/dist/components/{p-vqEUQ-4Q.js → p-D0Ed8epW.js} +3 -3
- package/dist/components/{p-DBqoPgev.js → p-DFMZEarE.js} +1 -1
- package/dist/components/{p-DtnMdWWB.js → p-DK0anxtL.js} +1 -1
- package/dist/components/{p-4SPnZZkH.js → p-DN9p3G9K.js} +3 -3
- package/dist/components/{p-Dt7-I2Xz.js → p-DOTdJ3JQ.js} +2 -2
- package/dist/components/{p-HoO86l1o.js → p-DOl-95VY.js} +6 -6
- package/dist/components/{p-DKGg-76-.js → p-DTB3ykgO.js} +1 -1
- package/dist/components/{p-CzW58DHM.js → p-DUmLsjKb.js} +1 -1
- package/dist/components/{p-gJcH-huF.js → p-DUoQyGKc.js} +1 -76
- package/dist/components/{p-Czhdc844.js → p-D_cyY7Nd.js} +1 -1
- package/dist/components/{p-CF8pLc07.js → p-DhabvHJM.js} +3 -3
- package/dist/components/{p-CaBbajU2.js → p-DkHYY72B.js} +2 -2
- package/dist/components/{p-CrHvaLRV.js → p-DnmVD1Mz.js} +1 -1
- package/dist/components/{p-GKmqCI8r.js → p-DoxFuOy1.js} +2 -2
- package/dist/components/{p-dsxHDlQ3.js → p-Dpm75DfV.js} +2 -2
- package/dist/components/{p-BozrueXV.js → p-Dvn6ad4a.js} +1 -1
- package/dist/components/{p-PjPPCHVL.js → p-NOWtUeeQ.js} +1 -1
- package/dist/components/{p-DVXTPI71.js → p-OUl5CA4Y.js} +1 -1
- package/dist/components/{p-0fhjWRmT.js → p-m7SeNszM.js} +5 -5
- package/dist/esm/index-Dhio9uis.js +2 -2
- package/dist/esm/{kritzel-active-users_47.entry.js → kritzel-active-users_46.entry.js} +55 -154
- package/dist/esm/loader.js +1 -1
- package/dist/esm/stencil.js +1 -1
- package/dist/stencil/{p-dc5783ee.entry.js → p-5c045d3e.entry.js} +55 -154
- package/dist/stencil/stencil.esm.js +1 -1
- package/dist/types/classes/structures/object-map.structure.d.ts +0 -14
- package/dist/types/components/core/kritzel-editor/kritzel-editor.d.ts +0 -3
- package/dist/types/components/core/kritzel-engine/kritzel-engine.d.ts +0 -3
- package/dist/types/components.d.ts +0 -44
- package/dist/types/constants/version.d.ts +1 -1
- package/package.json +1 -1
- package/dist/collection/components/shared/kritzel-sync-indicator/kritzel-sync-indicator.css +0 -50
- package/dist/collection/components/shared/kritzel-sync-indicator/kritzel-sync-indicator.js +0 -66
- package/dist/components/kritzel-sync-indicator.d.ts +0 -11
- package/dist/components/kritzel-sync-indicator.js +0 -6
- package/dist/components/p-CAoN_STZ.js +0 -39
- package/dist/types/components/shared/kritzel-sync-indicator/kritzel-sync-indicator.d.ts +0 -7
|
@@ -38,13 +38,13 @@ export class KritzelColorComponent {
|
|
|
38
38
|
render() {
|
|
39
39
|
const resolvedColor = this.resolveColor();
|
|
40
40
|
const isColorVeryLight = this.isLightColor(resolvedColor);
|
|
41
|
-
return (h(Host, { key: '
|
|
41
|
+
return (h(Host, { key: '17b5c44e1defe8f3fb41632391be093a12bb899b' }, h("div", { key: '545f4c4fd62dea22a4a5f36108a51d30c57f2652', class: "checkerboard-bg", style: {
|
|
42
42
|
width: `${this.size}px`,
|
|
43
43
|
height: `${this.size}px`,
|
|
44
44
|
borderRadius: '50%',
|
|
45
45
|
display: 'inline-block',
|
|
46
46
|
position: 'relative',
|
|
47
|
-
} }, h("div", { key: '
|
|
47
|
+
} }, h("div", { key: 'bbcb68f6e5f00d9a33b316d52ac86e49911e463c', class: {
|
|
48
48
|
'color-circle': true,
|
|
49
49
|
'white': isColorVeryLight,
|
|
50
50
|
}, style: {
|
|
@@ -33,7 +33,7 @@ export class KritzelColorPalette {
|
|
|
33
33
|
render() {
|
|
34
34
|
const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
|
|
35
35
|
const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
|
|
36
|
-
return (h(Host, { key: '
|
|
36
|
+
return (h(Host, { key: '5f25a2ead76106ba2ef9762b4d212d5a9d7ac2a8' }, h("div", { key: '764cc6a55cc1865aaf1c501ee89a161f74fefa1c', class: {
|
|
37
37
|
'color-grid': true,
|
|
38
38
|
'expanded': this.isExpanded,
|
|
39
39
|
}, style: {
|
|
@@ -4,7 +4,7 @@ export class KritzelFont {
|
|
|
4
4
|
size = 24;
|
|
5
5
|
color = '#000000';
|
|
6
6
|
render() {
|
|
7
|
-
return (h(Host, { key: '
|
|
7
|
+
return (h(Host, { key: '08ef3f41967f34f17cbbc42982b0edbb59edb2e2' }, h("div", { key: 'dc7b64d53dbee634a2da068c618a352e6b43bea7', class: "font-preview", style: {
|
|
8
8
|
fontFamily: this.fontFamily,
|
|
9
9
|
fontSize: `${this.size}px`,
|
|
10
10
|
color: this.color
|
|
@@ -17,7 +17,7 @@ export class KritzelFontSize {
|
|
|
17
17
|
render() {
|
|
18
18
|
const color = 'var(--kritzel-global-text-primary)';
|
|
19
19
|
const sizes = this.sizes ?? [];
|
|
20
|
-
return (h(Host, { key: '
|
|
20
|
+
return (h(Host, { key: 'c49be084faa8b5eb380ba9bc3382ba8404853e20' }, sizes.map(size => (h("div", { tabIndex: 0, class: {
|
|
21
21
|
'size-container': true,
|
|
22
22
|
'selected': this.selectedSize === size,
|
|
23
23
|
}, onClick: () => this.handleSizeClick(size), onKeyDown: event => this.handleKeyDown(event, size) }, h("kritzel-font", { fontFamily: this.fontFamily, size: size, color: color }))))));
|
|
@@ -28,7 +28,7 @@ export class KritzelInput {
|
|
|
28
28
|
this.valueChange.emit(input.value);
|
|
29
29
|
};
|
|
30
30
|
render() {
|
|
31
|
-
return (h(Host, { key: '
|
|
31
|
+
return (h(Host, { key: '92393344834011156bda2f682e559e7806864d19' }, h("div", { key: '5d569b8746d9285701259979ec554dbb41df4490', class: "input-container" }, this.label && h("label", { key: 'a27844d3da23d353b0ea2dede3c664fdbcbb6aab', class: "input-label" }, this.label), h("div", { key: 'fab4f3f1bda07c78f39ea96ba87c42be5de08286', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, h("input", { key: '4294687bc9f6006b0b64427c111af08d82ad5ffd', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && h("span", { key: '83adbd2978c92e969fedd9ad75f2c89b017b31a5', class: "input-suffix" }, this.suffix)))));
|
|
32
32
|
}
|
|
33
33
|
static get is() { return "kritzel-input"; }
|
|
34
34
|
static get encapsulation() { return "shadow"; }
|
|
@@ -90,15 +90,15 @@ export class KritzelMasterDetail {
|
|
|
90
90
|
const selectedItem = this.items.find(item => item.id === this.selectedItemId);
|
|
91
91
|
const panelId = 'master-detail-panel';
|
|
92
92
|
const selectedTabId = selectedItem ? `tab-${selectedItem.id}` : undefined;
|
|
93
|
-
return (h(Host, { key: '
|
|
93
|
+
return (h(Host, { key: 'fc187266604f9d48210096a1574bf86482498a40' }, h("div", { key: '2886b386c6e96df671ff4902b2c9f7084f0c3191', class: {
|
|
94
94
|
'master-detail-container': true,
|
|
95
95
|
'is-mobile-detail-visible': this.showMobileDetail,
|
|
96
|
-
} }, h("nav", { key: '
|
|
96
|
+
} }, h("nav", { key: '94a35861b7c97d7f5f1505e4c25bc7f584c6351f', 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: {
|
|
97
97
|
'menu-item': true,
|
|
98
98
|
'is-selected': item.id === this.selectedItemId,
|
|
99
99
|
'is-disabled': !!item.disabled,
|
|
100
100
|
'is-focused': index === this.focusedIndex,
|
|
101
|
-
}, 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: '
|
|
101
|
+
}, 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: 'd55507c8e818314bd548506d1b568357062378db', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, h("button", { key: 'f7bf50b2ecd7093110ee0fc91d49caf468ee9116', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, h("kritzel-icon", { key: 'c809cea0d279439ced7a580ea2a4f44d5ec2b8b6', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), h("slot", { key: '78babf63e193db45e26ea6602ab09dde045bf06e' })))));
|
|
102
102
|
}
|
|
103
103
|
static get is() { return "kritzel-master-detail"; }
|
|
104
104
|
static get encapsulation() { return "shadow"; }
|
|
@@ -51,7 +51,7 @@ export class KritzelMenu {
|
|
|
51
51
|
this.itemCloseChildMenu.emit(event.detail);
|
|
52
52
|
};
|
|
53
53
|
render() {
|
|
54
|
-
return (h(Host, { key: '
|
|
54
|
+
return (h(Host, { key: '0876a6a7e6dbb0daa984d228bac4c8b5d5790580', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: '499dde6694d7b98eb85d9bac314ab7ba2dcf1e71', 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 })))));
|
|
55
55
|
}
|
|
56
56
|
static get is() { return "kritzel-menu"; }
|
|
57
57
|
static get encapsulation() { return "shadow"; }
|
|
@@ -90,12 +90,12 @@ export class KritzelMenuItem {
|
|
|
90
90
|
];
|
|
91
91
|
}
|
|
92
92
|
render() {
|
|
93
|
-
return (h(Host, { key: '
|
|
93
|
+
return (h(Host, { key: '40bfb2f086d24080276f27d879216958dff0388a', tabIndex: this.item.isDisabled ? -1 : 0, class: {
|
|
94
94
|
'selected': this.item.isSelected,
|
|
95
95
|
'editing': this.item.isEditing,
|
|
96
96
|
'disabled': this.item.isDisabled,
|
|
97
97
|
'child-open': this.item.isChildMenuOpen,
|
|
98
|
-
}, onClick: this.handleItemSelect }, h("div", { key: '
|
|
98
|
+
}, onClick: this.handleItemSelect }, h("div", { key: '0aa55293dfc2cf1010c020f3f35ee3a3bd662c8a', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
|
|
99
99
|
}
|
|
100
100
|
static get is() { return "kritzel-menu-item"; }
|
|
101
101
|
static get encapsulation() { return "shadow"; }
|
|
@@ -86,7 +86,7 @@ export class KritzelNumericInput {
|
|
|
86
86
|
this.valueChange.emit(newValue);
|
|
87
87
|
};
|
|
88
88
|
render() {
|
|
89
|
-
return (h(Host, { key: '
|
|
89
|
+
return (h(Host, { key: '5ebdff964290d1d7f334d7e42e69f2fa09484a27' }, h("div", { key: '8d41fd9c5ba68fbeb927e262d5c2fe61436dee0a', class: "input-container" }, this.label && h("label", { key: 'f1172074424465be27ce5c3b6c3326457daf7fdc', class: "input-label" }, this.label), h("div", { key: 'ffdea4c84fe026c3bbd26bf288aab8a5da809d00', class: "input-wrapper" }, h("input", { key: '0705fa4415727e2689aa0dbfc56f17c9d72e3d18', 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: '8f46261cdb045ff20d171bd0a6c98541f65f079b', class: "spinner-buttons" }, h("button", { key: 'b61a5e60db34972c3242264b9aa872e295a09b38', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, h("svg", { key: '6c5a2be0a96b18ad204196fe59001211deedd038', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: '4905b8ffa669e0b00b050cee94fdb8aac3c477e4', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: 'df2ca8633ca8dbf54ef80a3cffbbcba28534d1fd', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, h("svg", { key: 'd4e8bd93fda3e9b1bd4db79f25c503e1057086a3', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: 'a6e343e373963ca86b703783c88efeb4516e87a9', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
|
|
90
90
|
}
|
|
91
91
|
static get is() { return "kritzel-numeric-input"; }
|
|
92
92
|
static get encapsulation() { return "shadow"; }
|
|
@@ -22,7 +22,7 @@ export class KritzelOpacitySlider {
|
|
|
22
22
|
}
|
|
23
23
|
render() {
|
|
24
24
|
const percentage = this.getPercentage();
|
|
25
|
-
return (h(Host, { key: '
|
|
25
|
+
return (h(Host, { key: '51b1e93e982f29f181f9f542dcc2939fca08d7de' }, h("div", { key: '3376dac02effb137c04efc5aa9de96d4a5b36452', class: "opacity-container" }, h("div", { key: '3d1d2c0fe1b4b4185e37dcbf61a6c3a955fe1356', class: "slider-wrapper" }, h("input", { key: '6c43f519ff5d7bbc17ce7804909e52efc6e9533b', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
|
|
26
26
|
'--slider-progress': `${percentage}%`,
|
|
27
27
|
'--kritzel-opacity-slider-thumb-border-color': this.previewColor,
|
|
28
28
|
} })))));
|
|
@@ -277,7 +277,7 @@ export class KritzelPortal {
|
|
|
277
277
|
this.portal.style.visibility = 'visible';
|
|
278
278
|
}
|
|
279
279
|
render() {
|
|
280
|
-
return (h(Host, { key: '
|
|
280
|
+
return (h(Host, { key: '51633f5b57002a821f73185811626439b0956479', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: 'f5cb7946de5775d1fd64d266f6ba5b952e9d89cb' })));
|
|
281
281
|
}
|
|
282
282
|
static get is() { return "kritzel-portal"; }
|
|
283
283
|
static get encapsulation() { return "shadow"; }
|
|
@@ -21,7 +21,7 @@ export class KritzelSlideToggle {
|
|
|
21
21
|
}
|
|
22
22
|
};
|
|
23
23
|
render() {
|
|
24
|
-
return (h(Host, { key: '
|
|
24
|
+
return (h(Host, { key: 'd8a9509138995da84fe798da448f0487d8c082b5', 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: '0966d487def99332139fe6f4a604fff310088d72', class: "toggle-track" }, h("div", { key: 'aeec11224dffa71178f38b0a96a7e15c35f67bcf', class: "toggle-thumb" }))));
|
|
25
25
|
}
|
|
26
26
|
static get is() { return "kritzel-slide-toggle"; }
|
|
27
27
|
static get encapsulation() { return "shadow"; }
|
|
@@ -82,7 +82,7 @@ export class KritzelSplitButton {
|
|
|
82
82
|
this.menuScrollTop = event.target.scrollTop;
|
|
83
83
|
};
|
|
84
84
|
render() {
|
|
85
|
-
return (h(Host, { key: '
|
|
85
|
+
return (h(Host, { key: '37185b37faa1e703f9457d4f4685c7d8ed40b342', class: { mobile: this.isTouchDevice } }, h("button", { key: 'b97d4df106fea68398116f1c44c6d5cd9f31997c', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && h("kritzel-icon", { key: '66dce735d160e23a16727c294f9ccb1bd3cda8c1', name: this.buttonIcon })), h("div", { key: '14ffaf9334090dc10df87d7b8744446be8bb2632', class: "split-divider" }), h("button", { key: '421e23ebb99e7b1ca656c0bc16f602a2a9812264', 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: 'affc13ef766d21030137a7feb44305553845dbfc', name: this.dropdownIcon })), h("kritzel-portal", { key: '326cef4696ebf9986e6c42e18822b90c399b16c2', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: 'e0800efbdefc9dce3dc548523ec10e810f3f7f73', 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 }))));
|
|
86
86
|
}
|
|
87
87
|
static get is() { return "kritzel-split-button"; }
|
|
88
88
|
static get encapsulation() { return "shadow"; }
|
|
@@ -9,7 +9,7 @@ export class KritzelStrokeSize {
|
|
|
9
9
|
}
|
|
10
10
|
render() {
|
|
11
11
|
const sizes = this.sizes ?? [];
|
|
12
|
-
return (h(Host, { key: '
|
|
12
|
+
return (h(Host, { key: '8b12f354a3395cd69c7199115ce998cf2eb26eb2' }, h("div", { key: '39008613327d50b75270dd78ea498113e5e9617b', class: "size-grid" }, sizes.map(size => (h("div", { tabIndex: 0, class: {
|
|
13
13
|
'size-container': true,
|
|
14
14
|
'selected': this.selectedSize === size,
|
|
15
15
|
}, onClick: () => this.handleSizeClick(size) }, h("kritzel-color", { value: 'var(--kritzel-global-text-primary)', size: size })))))));
|
|
@@ -128,14 +128,14 @@ export class KritzelTooltip {
|
|
|
128
128
|
}
|
|
129
129
|
}
|
|
130
130
|
render() {
|
|
131
|
-
return (h(Host, { key: '
|
|
131
|
+
return (h(Host, { key: '407a2f458626f02808fc9d718046a635de71662b', style: {
|
|
132
132
|
position: 'fixed',
|
|
133
133
|
zIndex: '9999',
|
|
134
134
|
transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
|
|
135
135
|
visibility: this.isVisible ? 'visible' : 'hidden',
|
|
136
136
|
left: `${this.positionX}px`,
|
|
137
137
|
bottom: `${this.positionY}px`,
|
|
138
|
-
} }, h("div", { key: '
|
|
138
|
+
} }, h("div", { key: '13c00678bd485f1f5bc2676e2c89fd0019f5e089', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: '67937f71c611f36a2c47ee2632a8657ced1d8cc7' }))));
|
|
139
139
|
}
|
|
140
140
|
static get is() { return "kritzel-tooltip"; }
|
|
141
141
|
static get encapsulation() { return "shadow"; }
|
|
@@ -16,7 +16,7 @@ export class KritzelBackToContent {
|
|
|
16
16
|
this.backToContent.emit();
|
|
17
17
|
};
|
|
18
18
|
render() {
|
|
19
|
-
return (h(Host, { key: '
|
|
19
|
+
return (h(Host, { key: '0a41ed93e39193416eebdaf786557bffd4653dd0' }, h("button", { key: '1f621de9699127a095e94d910d5c96328324b299', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, h("kritzel-icon", { key: '8ff49df055a0472edbbc57d84044a2de09b543c8', name: "chevrons-left" }))));
|
|
20
20
|
}
|
|
21
21
|
static get is() { return "kritzel-back-to-content"; }
|
|
22
22
|
static get encapsulation() { return "shadow"; }
|
|
@@ -232,13 +232,13 @@ export class KritzelControls {
|
|
|
232
232
|
// Separate tool controls from config control
|
|
233
233
|
const toolControls = this.internalControls.filter(c => c.type === 'tool' || c.type === 'separator');
|
|
234
234
|
const configControl = this.internalControls.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
|
|
235
|
-
return (h(Host, { key: '
|
|
235
|
+
return (h(Host, { key: '42f84f104e4b008a7c53a5e1ea9290c17ba792d2', style: { display: this.visible ? '' : 'none' }, class: {
|
|
236
236
|
mobile: this.isTouchDevice,
|
|
237
|
-
} }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '
|
|
237
|
+
} }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '8f6b3df9db735dfd847da9683db3fbdcc65b08a4', style: {
|
|
238
238
|
position: 'absolute',
|
|
239
239
|
bottom: '56px',
|
|
240
240
|
left: '12px',
|
|
241
|
-
}, undoState: this.undoState, terms: this.terms, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '
|
|
241
|
+
}, undoState: this.undoState, terms: this.terms, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '7a314d779882e2b42a39fdb2a52f434ccacff112', class: "kritzel-controls" }, h("div", { key: '23458bc04c2f1a610cff9c5e617d7be2c657bf4f', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: 'b17d817767c92ce7a6edf279759d3f1fb1097911', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
|
|
242
242
|
// Check if this control has sub-options (split-button)
|
|
243
243
|
if (control.subOptions?.length) {
|
|
244
244
|
const selectedSubOption = this.getSelectedSubOption(control);
|
|
@@ -268,10 +268,10 @@ export class KritzelControls {
|
|
|
268
268
|
'kritzel-control': true,
|
|
269
269
|
'selected': this.activeControl?.name === control?.name,
|
|
270
270
|
}, 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 })));
|
|
271
|
-
})), h("div", { key: '
|
|
271
|
+
})), h("div", { key: '740b52666bf823b7dc504a1072f68b59f94a3773', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
|
|
272
272
|
'kritzel-config-container': true,
|
|
273
273
|
'visible': hasConfigUI,
|
|
274
|
-
}, key: configControl.name }, h("div", { key: '
|
|
274
|
+
}, key: configControl.name }, h("div", { key: '7c5697faa2d03931ba9449b58a32e9f06166528e', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: '6e9bc7e5cf77778ec1dd2bee1c415344295acc00', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: 'fbfb910dacd4178aaffca5aa02e4e4422ba1b308', 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: '59d11a83e8c9968ba8d50df4275a892b4b75958c', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
|
|
275
275
|
if (el)
|
|
276
276
|
this.configTriggerRef = el;
|
|
277
277
|
}, onKeyDown: event => {
|
|
@@ -280,7 +280,7 @@ export class KritzelControls {
|
|
|
280
280
|
}
|
|
281
281
|
}, style: {
|
|
282
282
|
cursor: 'pointer',
|
|
283
|
-
} }, this.displayValues && (h("div", { key: '
|
|
283
|
+
} }, this.displayValues && (h("div", { key: '0ce5a0d8f51773b6e31feeee785606d637e06b42', class: "color-container" }, h("kritzel-color", { key: '29cc12dd6677b695b14e76e8a1704da78f910698', value: this.displayValues.color, theme: this.theme, size: 18, style: {
|
|
284
284
|
borderRadius: '50%',
|
|
285
285
|
border: 'none',
|
|
286
286
|
} })))))))));
|
|
@@ -11,7 +11,7 @@ export class KritzelCurrentUser {
|
|
|
11
11
|
/** Resolved localized strings keyed by term key, supplied by the editor. */
|
|
12
12
|
terms = {};
|
|
13
13
|
render() {
|
|
14
|
-
return (h(Host, { key: '
|
|
14
|
+
return (h(Host, { key: '30f2cedeefdef5817fcced6b84e74b53beba76ec' }, h("kritzel-avatar", { key: '41dc69bfbc13471fc686bb52e269dc98d2bfa3a8', user: this.user, size: this.avatarSize })));
|
|
15
15
|
}
|
|
16
16
|
static get is() { return "kritzel-current-user"; }
|
|
17
17
|
static get encapsulation() { return "shadow"; }
|
package/dist/collection/components/ui/kritzel-current-user-dialog/kritzel-current-user-dialog.js
CHANGED
|
@@ -29,7 +29,7 @@ export class KritzelCurrentUserDialog {
|
|
|
29
29
|
}
|
|
30
30
|
render() {
|
|
31
31
|
const displayName = this.getDisplayName();
|
|
32
|
-
return (h(Host, { key: '
|
|
32
|
+
return (h(Host, { key: '33baea01a828422f2bba5c2fba82dd82e5c5b32d' }, h("kritzel-dialog", { key: '5271e1eb5d36b74f8487c040e70424c26f7019f8', dialogTitle: this.terms['currentUser.dialogTitle'] ?? 'Account', isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '901697b9439eb8449f2f5c8e044c194f176633b1', class: "user-info" }, h("kritzel-avatar", { key: '76a17b9a2e4442b36b89747a5f5f168d2c59e7a1', user: this.user, size: 80 }), displayName && h("div", { key: '6aaedb1d2d8ea65de2460c15017d13b4e096223d', class: "user-name" }, displayName), this.user?.email && h("div", { key: '3cb78d0007087a18f798849f244399e5d6137e3b', class: "user-email" }, this.user.email), h("kritzel-button", { key: '67d416a1ac1be41cd6b658f79901cea29a287eb7', class: "logout-button", variant: "primary", onButtonClick: this.handleLogout }, this.terms['menu.logout'] ?? 'Logout')))));
|
|
33
33
|
}
|
|
34
34
|
static get is() { return "kritzel-current-user-dialog"; }
|
|
35
35
|
static get encapsulation() { return "shadow"; }
|
|
@@ -69,7 +69,7 @@ export class KritzelExport {
|
|
|
69
69
|
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 })));
|
|
70
70
|
}
|
|
71
71
|
render() {
|
|
72
|
-
return (h(Host, { key: '
|
|
72
|
+
return (h(Host, { key: '61ce7589d0453a1bd9fde8f33a711e06225eacde' }, h("kritzel-dialog", { key: '48da046edabdb5659b6edefaca56adb7531f9862', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: 'b7afc64ad1f558a78aa68c07b4dec65e6ca21c67', class: "export-content" }, h("kritzel-pill-tabs", { key: '59f759ade5a590eda6ba87f89eb433ced62da0cd', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport()), h("div", { key: 'a38bf30c9c5256d417cd3b0baf743e245a8cf3e4', slot: "footer" }, h("button", { key: '3dc9c53416ff9c8ca47df003f41767a2143fa4ef', class: "export-primary-button", onClick: this.handleExport }, this.terms['export.exportButton'] ?? 'Export')))));
|
|
73
73
|
}
|
|
74
74
|
static get is() { return "kritzel-export"; }
|
|
75
75
|
static get encapsulation() { return "shadow"; }
|
|
@@ -9,7 +9,7 @@ export class KritzelLoadingOverlay {
|
|
|
9
9
|
*/
|
|
10
10
|
text = 'Loading...';
|
|
11
11
|
render() {
|
|
12
|
-
return (h(Host, { key: '
|
|
12
|
+
return (h(Host, { key: '6795ffc47d57a27f0b58fb42715080bf47c836af' }, h("div", { key: '5359411fa326444a1bddf6f40a6e2bd0ccf1617d', class: { 'loading-overlay': true, visible: this.visible }, "aria-hidden": this.visible ? 'false' : 'true' }, h("span", { key: 'bd194c6fef9f2fbc4a4e38aee169d0a754e5dc96', class: "loading-spinner" }), this.text)));
|
|
13
13
|
}
|
|
14
14
|
static get is() { return "kritzel-loading-overlay"; }
|
|
15
15
|
static get encapsulation() { return "shadow"; }
|
|
@@ -44,7 +44,7 @@ export class KritzelLoginDialog {
|
|
|
44
44
|
this.dialogClosed.emit();
|
|
45
45
|
};
|
|
46
46
|
render() {
|
|
47
|
-
return (h(Host, { key: '
|
|
47
|
+
return (h(Host, { key: '17fe69ac34171a95bec92dcabc3196fe77549ede' }, h("kritzel-dialog", { key: '38ea1c3ed74675b21456cf8c1bfe1b97be029bf4', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '63b04f629c2d09a1ce6aeab90118bcac50d59fbc', class: "login-content" }, this.subtitle && (h("p", { key: '641597f030c268f2ffc90c914e53fd00fc131c74', class: "login-subtitle" }, this.subtitle)), h("div", { key: 'f36dc7b791d1beada21d7786c108319dedb516b9', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
|
|
48
48
|
'provider-button': true,
|
|
49
49
|
'is-loading': this.loadingProvider === provider.name,
|
|
50
50
|
'is-disabled': this.loadingProvider !== null && this.loadingProvider !== provider.name,
|
|
@@ -136,7 +136,7 @@ export class KritzelMoreMenu {
|
|
|
136
136
|
this.closeMenu();
|
|
137
137
|
};
|
|
138
138
|
render() {
|
|
139
|
-
return (h(Host, { key: '
|
|
139
|
+
return (h(Host, { key: 'ac84e832614f37f51b00f351fe70cf679d53ef15', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, h("div", { key: 'a9ead49428833b9bbaf6cfa9a1550e6df514e3d5', class: { 'more-menu-wrapper': true, visible: this.visible } }, h("button", { key: 'ddf026728d5b3170faeb1b5e291e3e61b13711d5', class: "more-menu-button", "data-testid": "more-menu-button", onClick: this.toggleMenu, "aria-label": this.terms['moreMenu.ariaLabel'] ?? 'More options' }, h("kritzel-icon", { key: 'de7e442b32c755c890579e7254d2cc6dad8bc21a', name: this.icon, size: this.iconSize })), h("kritzel-portal", { key: 'a426494a65dfe42a1d9a2040dcf5202d2daee559', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, h("kritzel-menu", { key: '4b0ba21f8da0d4149ae52e752c6dd1c6fb4ac0cc', items: this.resolveMenuLabels(this.visibleItems), onItemSelect: this.handleMenuItemSelect })))));
|
|
140
140
|
}
|
|
141
141
|
static get is() { return "kritzel-more-menu"; }
|
|
142
142
|
static get encapsulation() { return "shadow"; }
|
|
@@ -205,7 +205,7 @@ export class KritzelSettings {
|
|
|
205
205
|
return (h("div", { class: "settings-categories-wrapper" }, h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'general' } }, h("div", { class: "settings-content" }, h("h3", null, this.t('settings.general.title', 'General Settings')), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.general.theme.label', 'Theme')), h("p", { class: "settings-description" }, this.t('settings.general.theme.description', 'Select a registered color theme for the editor interface.')), h("kritzel-dropdown", { options: this.availableThemes.map(t => ({ value: t, label: t })), value: this.theme, onValueChanged: this.handleThemeChange })), this.availableLocales.length > 0 && (h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.general.language.label', 'Language')), h("p", { class: "settings-description" }, this.t('settings.general.language.description', 'Select the display language for the editor interface.')), h("kritzel-dropdown", { options: this.availableLocales.map(l => ({ value: l.code, label: l.label })), value: this.locale, onValueChanged: this.handleLocaleChange }))), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.general.lockDrawingScale.label', 'Lock Drawing Scale')), h("p", { class: "settings-description" }, this.t('settings.general.lockDrawingScale.description', 'When enabled, drawn objects maintain a fixed visual size regardless of the current zoom level.')), h("kritzel-slide-toggle", { checked: this.lockDrawingScale, label: this.t('settings.general.lockDrawingScale.label', 'Lock Drawing Scale'), onCheckedChange: this.handleLockDrawingScaleChange }))))), h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'viewport' } }, h("div", { class: "settings-content" }, h("h3", null, this.t('settings.viewport.title', 'Viewport Settings')), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.minZoom.label', 'Minimum Zoom Level')), h("p", { class: "settings-description" }, this.t('settings.viewport.minZoom.description', 'Sets the minimum zoom level. Lower values allow zooming out further to see more of the canvas.')), h("kritzel-numeric-input", { value: this.scaleMin, min: 0.0001, max: 1, step: 0.0001, onValueChange: this.handleScaleMinChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.maxZoom.label', 'Maximum Zoom Level')), h("p", { class: "settings-description" }, this.t('settings.viewport.maxZoom.description', 'Sets the maximum zoom level. Higher values allow zooming in closer for detailed work.')), h("kritzel-numeric-input", { value: this.scaleMax, min: 1, max: 1000, step: 1, onValueChange: this.handleScaleMaxChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryLeft.label', 'Viewport Boundary Left')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryLeft.description', 'Left boundary in world coordinates. Set to limit how far left the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryLeft, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryLeftChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryRight.label', 'Viewport Boundary Right')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryRight.description', 'Right boundary in world coordinates. Set to limit how far right the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryRight, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryRightChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryTop.label', 'Viewport Boundary Top')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryTop.description', 'Top boundary in world coordinates. Set to limit how far up the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryTop, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryTopChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryBottom.label', 'Viewport Boundary Bottom')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryBottom.description', 'Bottom boundary in world coordinates. Set to limit how far down the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryBottom, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryBottomChange }))))), h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'shortcuts' } }, h("div", { class: "settings-content" }, h("h3", null, this.t('settings.shortcuts.title', 'Keyboard Shortcuts')), h("div", { class: "shortcuts-list" }, Array.from(this.groupShortcutsByCategory()).map(([category, shortcuts]) => (h("div", { class: "shortcuts-category", key: category }, h("h4", { class: "shortcuts-category-title" }, category), h("div", { class: "shortcuts-group" }, shortcuts.map(shortcut => (h("div", { class: "shortcut-item", key: shortcut.key + shortcut.label }, h("span", { class: "shortcut-label" }, shortcut.label), h("kbd", { class: "shortcut-key" }, this.formatKeyCombo(shortcut)))))))))))), h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'developer' } }, h("div", { class: "settings-content" }, h("h3", null, this.t('settings.developer.title', 'Developer Options')), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showViewportInfo.label', 'Show Viewport Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showViewportInfo.description', 'Display viewport debug information such as position, zoom level, and boundaries.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showViewportInfo, label: this.t('settings.developer.showViewportInfo.label', 'Show Viewport Info'), onCheckedChange: this.handleDebugInfoChange('showViewportInfo') })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showObjectInfo.label', 'Show Object Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showObjectInfo.description', 'Display debug information about objects on the canvas.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showObjectInfo, label: this.t('settings.developer.showObjectInfo.label', 'Show Object Info'), onCheckedChange: this.handleDebugInfoChange('showObjectInfo') })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showSyncProviderInfo.label', 'Show Sync Provider Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showSyncProviderInfo.description', 'Display debug information about the sync provider connection status.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showSyncProviderInfo, label: this.t('settings.developer.showSyncProviderInfo.label', 'Show Sync Provider Info'), onCheckedChange: this.handleDebugInfoChange('showSyncProviderInfo') })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showMigrationInfo.label', 'Show Migration Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showMigrationInfo.description', 'Display debug information about data migrations.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showMigrationInfo, label: this.t('settings.developer.showMigrationInfo.label', 'Show Migration Info'), onCheckedChange: this.handleDebugInfoChange('showMigrationInfo') }))))), h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'about' } }, h("div", { class: "settings-content" }, h("h3", null, this.t('settings.about.title', 'About')), h("p", null, this.t('settings.about.description', 'Kritzel - A drawing application')), h("p", { class: "version-info" }, "Version ", KRITZEL_VERSION), h("p", { class: "version-info" }, "App-State Schema v", CURRENT_APP_STATE_SCHEMA_VERSION), h("p", { class: "version-info" }, "Workspace Schema v", CURRENT_WORKSPACE_SCHEMA_VERSION)))));
|
|
206
206
|
}
|
|
207
207
|
render() {
|
|
208
|
-
return (h(Host, { key: '
|
|
208
|
+
return (h(Host, { key: '96981b34953ffdda4cfdfa9e6acc832dedc0c64a' }, h("kritzel-dialog", { key: '792a68aa1fe66780a937a95db802e9c6a2135091', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: 'dc7d99c2b90ea4a86bc23527a39eaec70d95acc8', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
|
|
209
209
|
}
|
|
210
210
|
static get is() { return "kritzel-settings"; }
|
|
211
211
|
static get encapsulation() { return "shadow"; }
|
|
@@ -123,9 +123,9 @@ export class KritzelShareDialog {
|
|
|
123
123
|
this.dialogClosed.emit();
|
|
124
124
|
};
|
|
125
125
|
render() {
|
|
126
|
-
return (h(Host, { key: '
|
|
126
|
+
return (h(Host, { key: '13e718f70f46a0c71e70d7330e0bcf655ebb60a3' }, h("kritzel-dialog", { key: 'd96e31d7259cc5c5461d94395ceecfc7491f403f', dialogTitle: this.terms['share.dialogTitle'] ?? 'Share Workspace', size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, h("div", { key: '9a82641540675cb645e5520bfb1624e77b5eb382', class: "share-content" }, h("div", { key: '5eed405aaf5e39f71083e84d2db0c4177722915b', class: "share-section" }, h("div", { key: '2bb736f60448dcae354d2f7931c277fce9fe7964', class: "share-row" }, h("div", { key: 'f2b22b2ce9e3331b0bf142bcb280e3dae064f34d', class: "share-label-group" }, h("label", { key: '58daf90a8b4de173deaba2e93c31791d78c17214', class: "share-label" }, this.terms['share.linkSharing.label'] ?? 'Link sharing'), h("p", { key: 'ba5f9ee772ab44fd4cc9a3066894ee5da10c56d8', class: "share-description" }, this.internalIsPublic
|
|
127
127
|
? (this.terms['share.linkSharing.enabledDescription'] ?? 'Anyone with the link can access this workspace.')
|
|
128
|
-
: (this.terms['share.linkSharing.disabledDescription'] ?? 'Link sharing is disabled. Only you can access this workspace.'))), h("kritzel-slide-toggle", { key: '
|
|
128
|
+
: (this.terms['share.linkSharing.disabledDescription'] ?? 'Link sharing is disabled. Only you can access this workspace.'))), h("kritzel-slide-toggle", { key: '7f70df4db90f087d8d7a7efe98012f7bf897975d', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: this.terms['share.linkSharing.toggleLabel'] ?? 'Enable link sharing' }))), this.internalIsPublic && (h("div", { key: '999fe3550e149b7e3f0ebf28f312fa5f676dd945', class: "share-section" }, h("div", { key: 'ff623a78f50b8a5e27a978e05e2ee2ba4ac1991b', class: "share-url-container" }, h("input", { key: '5c3b5c3e82366ebe4f4e7a73c6afa42dbbf39a20', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), h("button", { key: '60ac0315841649722b32d098c787f2a0deeec979', 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: 'eacbd3b75c554d3c62a098ddd45b6723f59521b5', name: this.copySuccess ? 'check' : 'copy', size: 18 }))), this.qrCodeDataUrl && (h("div", { key: 'fc24d6a9673b5b16a35f905023e632a314cef4ce', class: "share-qr-container" }, h("img", { key: '3669f9138336cd4cf51d1e3de5caedaddac518e8', class: "share-qr-image", src: this.qrCodeDataUrl, alt: "QR code for share link" })))))))));
|
|
129
129
|
}
|
|
130
130
|
static get is() { return "kritzel-share-dialog"; }
|
|
131
131
|
static get encapsulation() { return "shadow"; }
|
|
@@ -19,7 +19,7 @@ export class KritzelUtilityPanel {
|
|
|
19
19
|
this.redo.emit();
|
|
20
20
|
}
|
|
21
21
|
render() {
|
|
22
|
-
return (h(Host, { key: '
|
|
22
|
+
return (h(Host, { key: '3485f5cc7c4f1fd71fe24c2337d0a1f7145012c0' }, h("button", { key: '0a5eb536282df4fec1d7eead330574412640ae8b', 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: '976805f2e645acf710b30a6dc089b93bf3d6efb3', name: "undo" })), h("button", { key: 'dd44f61e16f96e315d62c0e9278b0a09ec7169d7', 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: '4f3fb33d6bc5cfa5c3b23a39c10998efefec51a8', name: "redo" })), h("div", { key: '60124754529de5ac00e6ec281a2402d4c85e1906', class: "utility-separator" }), h("button", { key: '0b3cbd654f5a8c2319547a3314887435dfc5b1f7', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": this.terms['utility.delete'] ?? 'Delete selected items' }, h("kritzel-icon", { key: '7fe136ecc1513895b14e479a5d47e13d398f52b4', name: "delete" }))));
|
|
23
23
|
}
|
|
24
24
|
static get is() { return "kritzel-utility-panel"; }
|
|
25
25
|
static get encapsulation() { return "shadow"; }
|
|
@@ -26,7 +26,7 @@ export class KritzelZoomPanel {
|
|
|
26
26
|
return Number.isFinite(this.zoomPercent) ? Math.max(1, Math.round(this.zoomPercent)) : 100;
|
|
27
27
|
}
|
|
28
28
|
render() {
|
|
29
|
-
return (h(Host, { key: '
|
|
29
|
+
return (h(Host, { key: '6f39f043da7b8607efcfb0e99d58cebc80d3c031' }, h("div", { key: 'f7c7600760ea8d3d9c6efe26e6b398ba20b12e23', class: { panel: true, visible: this.visible } }, h("button", { key: '18c6ddc87155a36395b296aded7c15c55500a2c8', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomOut'] ?? 'Zoom out', disabled: this.disabled, onClick: this.handleZoomOut }, h("kritzel-icon", { key: '54fea3408bb38c7e5f19877c84fb96a74028693a', name: "minus" })), h("span", { key: 'b2b354eb16a0e2102e9214864c438dfab79d8968', class: "zoom-level", "aria-live": "polite" }, this.normalizedZoomPercent, "%"), h("button", { key: 'ddc3822e478ccfec770dcc5ba900d0276531b1ad', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomIn'] ?? 'Zoom in', disabled: this.disabled, onClick: this.handleZoomIn }, h("kritzel-icon", { key: '2069bf5aba39c362d472f57941ca8ae4f0bedb8a', name: "plus" })))));
|
|
30
30
|
}
|
|
31
31
|
static get is() { return "kritzel-zoom-panel"; }
|
|
32
32
|
static get encapsulation() { return "shadow"; }
|
|
@@ -81,8 +81,6 @@ export { KritzelSplitButton as KritzelSplitButton } from '../types/components/sh
|
|
|
81
81
|
export { defineCustomElement as defineCustomElementKritzelSplitButton } from './kritzel-split-button';
|
|
82
82
|
export { KritzelStrokeSize as KritzelStrokeSize } from '../types/components/shared/kritzel-stroke-size/kritzel-stroke-size';
|
|
83
83
|
export { defineCustomElement as defineCustomElementKritzelStrokeSize } from './kritzel-stroke-size';
|
|
84
|
-
export { KritzelSyncIndicator as KritzelSyncIndicator } from '../types/components/shared/kritzel-sync-indicator/kritzel-sync-indicator';
|
|
85
|
-
export { defineCustomElement as defineCustomElementKritzelSyncIndicator } from './kritzel-sync-indicator';
|
|
86
84
|
export { KritzelToolConfig as KritzelToolConfig } from '../types/components/ui/kritzel-tool-config/kritzel-tool-config';
|
|
87
85
|
export { defineCustomElement as defineCustomElementKritzelToolConfig } from './kritzel-tool-config';
|
|
88
86
|
export { KritzelTooltip as KritzelTooltip } from '../types/components/shared/kritzel-tooltip/kritzel-tooltip';
|
package/dist/components/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-B43upypT.js';
|
|
2
2
|
export { K as KritzelBaseObject, b as KritzelLine, a as KritzelPath } from './p-bAacqNHq.js';
|
|
3
|
-
export { u as APP_STATE_MIGRATIONS, A as AssetNotFoundError, D as DE_LOCALE, E as EN_LOCALE, F as FR_LOCALE, I as IndexedDBAssetProvider, s as KritzelAlignment, o as KritzelAnchorManager, n as KritzelAssetResolver, e as KritzelBaseTool, f as KritzelBrushTool, l as KritzelCursorHelper, d as KritzelCustomElement, r as KritzelCustomElementRendererRegistry, h as KritzelEraserTool, b as KritzelGroup, a as KritzelImage, i as KritzelImageTool, q as KritzelLicenseManager, g as KritzelLineTool, p as KritzelLocalizationManager, m as KritzelSelectionTool, c as KritzelShape, k as KritzelShapeTool, K as KritzelText, j as KritzelTextTool, S as ShapeType, W as WORKSPACE_MIGRATIONS, t as runMigrations } from './p-
|
|
3
|
+
export { u as APP_STATE_MIGRATIONS, A as AssetNotFoundError, D as DE_LOCALE, E as EN_LOCALE, F as FR_LOCALE, I as IndexedDBAssetProvider, s as KritzelAlignment, o as KritzelAnchorManager, n as KritzelAssetResolver, e as KritzelBaseTool, f as KritzelBrushTool, l as KritzelCursorHelper, d as KritzelCustomElement, r as KritzelCustomElementRendererRegistry, h as KritzelEraserTool, b as KritzelGroup, a as KritzelImage, i as KritzelImageTool, q as KritzelLicenseManager, g as KritzelLineTool, p as KritzelLocalizationManager, m as KritzelSelectionTool, c as KritzelShape, k as KritzelShapeTool, K as KritzelText, j as KritzelTextTool, S as ShapeType, W as WORKSPACE_MIGRATIONS, t as runMigrations } from './p-DUoQyGKc.js';
|
|
4
4
|
import * as Y from 'yjs';
|
|
5
5
|
import { IndexeddbPersistence } from 'y-indexeddb';
|
|
6
6
|
import { WebsocketProvider } from 'y-websocket';
|
|
@@ -50,7 +50,6 @@ export { KritzelShareDialog, defineCustomElement as defineCustomElementKritzelSh
|
|
|
50
50
|
export { KritzelSlideToggle, defineCustomElement as defineCustomElementKritzelSlideToggle } from './kritzel-slide-toggle.js';
|
|
51
51
|
export { KritzelSplitButton, defineCustomElement as defineCustomElementKritzelSplitButton } from './kritzel-split-button.js';
|
|
52
52
|
export { KritzelStrokeSize, defineCustomElement as defineCustomElementKritzelStrokeSize } from './kritzel-stroke-size.js';
|
|
53
|
-
export { KritzelSyncIndicator, defineCustomElement as defineCustomElementKritzelSyncIndicator } from './kritzel-sync-indicator.js';
|
|
54
53
|
export { KritzelToolConfig, defineCustomElement as defineCustomElementKritzelToolConfig } from './kritzel-tool-config.js';
|
|
55
54
|
export { KritzelTooltip, defineCustomElement as defineCustomElementKritzelTooltip } from './kritzel-tooltip.js';
|
|
56
55
|
export { KritzelUtilityPanel, defineCustomElement as defineCustomElementKritzelUtilityPanel } from './kritzel-utility-panel.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { K as KritzelActiveUsers$1, d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { K as KritzelActiveUsers$1, d as defineCustomElement$1 } from './p-DFMZEarE.js';
|
|
2
2
|
|
|
3
3
|
const KritzelActiveUsers = KritzelActiveUsers$1;
|
|
4
4
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { K as KritzelBackToContent$1, d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { K as KritzelBackToContent$1, d as defineCustomElement$1 } from './p-D_cyY7Nd.js';
|
|
2
2
|
|
|
3
3
|
const KritzelBackToContent = KritzelBackToContent$1;
|
|
4
4
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { K as KritzelColorPalette$1, d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { K as KritzelColorPalette$1, d as defineCustomElement$1 } from './p-BeSKOETx.js';
|
|
2
2
|
|
|
3
3
|
const KritzelColorPalette = KritzelColorPalette$1;
|
|
4
4
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { K as KritzelColorComponent, d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { K as KritzelColorComponent, d as defineCustomElement$1 } from './p-DOTdJ3JQ.js';
|
|
2
2
|
|
|
3
3
|
const KritzelColor = KritzelColorComponent;
|
|
4
4
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { K as KritzelControls$1, d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { K as KritzelControls$1, d as defineCustomElement$1 } from './p-CeffYwAK.js';
|
|
2
2
|
|
|
3
3
|
const KritzelControls = KritzelControls$1;
|
|
4
4
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { K as KritzelCurrentUserDialog$1, d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { K as KritzelCurrentUserDialog$1, d as defineCustomElement$1 } from './p-D0Ed8epW.js';
|
|
2
2
|
|
|
3
3
|
const KritzelCurrentUserDialog = KritzelCurrentUserDialog$1;
|
|
4
4
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { K as KritzelCurrentUser$1, d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { K as KritzelCurrentUser$1, d as defineCustomElement$1 } from './p-CucCT7Qn.js';
|
|
2
2
|
|
|
3
3
|
const KritzelCurrentUser = KritzelCurrentUser$1;
|
|
4
4
|
const defineCustomElement = defineCustomElement$1;
|