kritzel-stencil 0.4.30 → 0.4.31
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/LICENSE +21 -21
- package/LICENSE.md +49 -49
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/kritzel-active-users_46.cjs.entry.js +112 -112
- package/dist/cjs/kritzel-brush-style.cjs.entry.js +1 -1
- package/dist/cjs/{schema.constants-CcvqL5nJ.js → schema.constants-0ySX0cg3.js} +6 -6
- package/dist/collection/components/core/kritzel-awareness-cursors/kritzel-awareness-cursors.css +115 -115
- package/dist/collection/components/core/kritzel-awareness-cursors/kritzel-awareness-cursors.js +1 -1
- package/dist/collection/components/core/kritzel-cursor-trail/kritzel-cursor-trail.css +10 -10
- package/dist/collection/components/core/kritzel-cursor-trail/kritzel-cursor-trail.js +1 -1
- package/dist/collection/components/core/kritzel-editor/kritzel-editor.css +160 -160
- package/dist/collection/components/core/kritzel-editor/kritzel-editor.js +18 -18
- package/dist/collection/components/core/kritzel-engine/kritzel-engine.css +80 -80
- package/dist/collection/components/core/kritzel-engine/kritzel-engine.js +21 -21
- package/dist/collection/components/core/kritzel-watermark/kritzel-watermark.css +29 -29
- package/dist/collection/components/core/kritzel-watermark/kritzel-watermark.js +2 -2
- package/dist/collection/components/shared/kritzel-avatar/kritzel-avatar.css +58 -58
- package/dist/collection/components/shared/kritzel-avatar/kritzel-avatar.js +3 -3
- package/dist/collection/components/shared/kritzel-brush-style/kritzel-brush-style.css +42 -42
- package/dist/collection/components/shared/kritzel-brush-style/kritzel-brush-style.js +3 -3
- package/dist/collection/components/shared/kritzel-button/kritzel-button.css +73 -73
- package/dist/collection/components/shared/kritzel-button/kritzel-button.js +2 -2
- package/dist/collection/components/shared/kritzel-color/kritzel-color.css +24 -24
- package/dist/collection/components/shared/kritzel-color/kritzel-color.js +2 -2
- package/dist/collection/components/shared/kritzel-color-palette/kritzel-color-palette.css +46 -46
- package/dist/collection/components/shared/kritzel-color-palette/kritzel-color-palette.js +1 -1
- package/dist/collection/components/shared/kritzel-dialog/kritzel-dialog.css +209 -209
- package/dist/collection/components/shared/kritzel-dropdown/kritzel-dropdown.css +190 -190
- package/dist/collection/components/shared/kritzel-dropdown/kritzel-dropdown.js +2 -2
- package/dist/collection/components/shared/kritzel-font/kritzel-font.css +10 -10
- package/dist/collection/components/shared/kritzel-font/kritzel-font.js +1 -1
- package/dist/collection/components/shared/kritzel-font-family/kritzel-font-family.css +48 -48
- package/dist/collection/components/shared/kritzel-font-family/kritzel-font-family.js +2 -2
- package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.css +30 -30
- package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.js +1 -1
- package/dist/collection/components/shared/kritzel-icon/kritzel-icon.css +18 -18
- package/dist/collection/components/shared/kritzel-input/kritzel-input.css +69 -69
- package/dist/collection/components/shared/kritzel-input/kritzel-input.js +1 -1
- package/dist/collection/components/shared/kritzel-line-endings/kritzel-line-endings.css +60 -60
- package/dist/collection/components/shared/kritzel-line-endings/kritzel-line-endings.js +3 -3
- package/dist/collection/components/shared/kritzel-master-detail/kritzel-master-detail.css +190 -190
- package/dist/collection/components/shared/kritzel-master-detail/kritzel-master-detail.js +3 -3
- package/dist/collection/components/shared/kritzel-menu/kritzel-menu.css +34 -34
- package/dist/collection/components/shared/kritzel-menu/kritzel-menu.js +1 -1
- package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.css +166 -166
- 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.css +102 -102
- 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.css +85 -85
- package/dist/collection/components/shared/kritzel-opacity-slider/kritzel-opacity-slider.js +1 -1
- package/dist/collection/components/shared/kritzel-pill-tabs/kritzel-pill-tabs.css +68 -68
- package/dist/collection/components/shared/kritzel-pill-tabs/kritzel-pill-tabs.js +2 -2
- package/dist/collection/components/shared/kritzel-portal/kritzel-portal.js +1 -1
- package/dist/collection/components/shared/kritzel-shape-fill/kritzel-shape-fill.css +47 -47
- package/dist/collection/components/shared/kritzel-shape-fill/kritzel-shape-fill.js +4 -4
- package/dist/collection/components/shared/kritzel-slide-toggle/kritzel-slide-toggle.css +48 -48
- 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.css +78 -78
- 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.css +37 -37
- package/dist/collection/components/shared/kritzel-stroke-size/kritzel-stroke-size.js +1 -1
- package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.css +18 -18
- package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.js +2 -2
- package/dist/collection/components/ui/kritzel-active-users/kritzel-active-users.css +65 -65
- package/dist/collection/components/ui/kritzel-back-to-content/kritzel-back-to-content.css +42 -42
- package/dist/collection/components/ui/kritzel-back-to-content/kritzel-back-to-content.js +1 -1
- package/dist/collection/components/ui/kritzel-context-menu/kritzel-context-menu.css +112 -112
- package/dist/collection/components/ui/kritzel-controls/kritzel-controls.css +331 -331
- package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js +6 -6
- package/dist/collection/components/ui/kritzel-current-user/kritzel-current-user.css +11 -11
- 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.css +39 -39
- 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.css +89 -89
- package/dist/collection/components/ui/kritzel-export/kritzel-export.js +1 -1
- package/dist/collection/components/ui/kritzel-loading-overlay/kritzel-loading-overlay.css +54 -54
- 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.css +98 -98
- 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.css +58 -58
- package/dist/collection/components/ui/kritzel-more-menu/kritzel-more-menu.js +2 -2
- package/dist/collection/components/ui/kritzel-notification-card/kritzel-notification-card.css +101 -101
- package/dist/collection/components/ui/kritzel-settings/kritzel-settings.css +137 -137
- package/dist/collection/components/ui/kritzel-settings/kritzel-settings.js +1 -1
- package/dist/collection/components/ui/kritzel-share-dialog/kritzel-share-dialog.css +150 -150
- package/dist/collection/components/ui/kritzel-share-dialog/kritzel-share-dialog.js +2 -2
- package/dist/collection/components/ui/kritzel-tool-config/kritzel-tool-config.css +38 -38
- package/dist/collection/components/ui/kritzel-utility-panel/kritzel-utility-panel.css +45 -45
- package/dist/collection/components/ui/kritzel-utility-panel/kritzel-utility-panel.js +1 -1
- package/dist/collection/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.css +16 -16
- package/dist/collection/components/ui/kritzel-zoom-panel/kritzel-zoom-panel.css +72 -72
- package/dist/collection/components/ui/kritzel-zoom-panel/kritzel-zoom-panel.js +1 -1
- package/dist/collection/constants/version.js +1 -1
- package/dist/collection/helpers/cursor.helper.js +6 -6
- package/dist/collection/helpers/svg-export.helper.js +41 -41
- package/dist/components/index.js +2 -2
- package/dist/components/kritzel-active-users.js +1 -1
- package/dist/components/kritzel-avatar.js +1 -1
- package/dist/components/kritzel-awareness-cursors.js +1 -1
- package/dist/components/kritzel-back-to-content.js +1 -1
- package/dist/components/kritzel-brush-style.js +2 -2
- 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-cursor-trail.js +1 -1
- package/dist/components/kritzel-dialog.js +1 -1
- package/dist/components/kritzel-dropdown.js +1 -1
- package/dist/components/kritzel-editor.js +51 -51
- package/dist/components/kritzel-engine.js +1 -1
- package/dist/components/kritzel-export.js +1 -1
- package/dist/components/kritzel-font-family.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-line-endings.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-pill-tabs.js +1 -1
- package/dist/components/kritzel-portal.js +1 -1
- package/dist/components/kritzel-settings.js +1 -1
- package/dist/components/kritzel-shape-fill.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-DTB3ykgO.js → p-B65Z2K81.js} +1 -1
- package/dist/components/{p-4uoSa0Xl.js → p-B6cwfdo3.js} +2 -2
- package/dist/components/{p-ChPs27Fd.js → p-BBA9F6Bi.js} +4 -4
- package/dist/components/{p-Dvn6ad4a.js → p-BCrNNQKI.js} +1 -1
- package/dist/components/{p-CoXN583u.js → p-BGJ-1pXX.js} +3 -3
- package/dist/components/{p-CBrn5AIB.js → p-BTRiw0VC.js} +1 -1
- package/dist/components/{p-DoxFuOy1.js → p-Bu6TjCs0.js} +2 -2
- package/dist/components/{p-Ce1j1-Hg.js → p-BvpI1eL4.js} +3 -3
- package/dist/components/{p-CAXR5-S9.js → p-BwC3bHai.js} +4 -4
- package/dist/components/{p-DX2nriaq.js → p-C2NV0SgA.js} +1 -1
- package/dist/components/{p-BPzdPKWE.js → p-CAGey5Xt.js} +3 -3
- package/dist/components/{p-C0FEC_gS.js → p-C_4J10HD.js} +2 -2
- package/dist/components/{p-NOWtUeeQ.js → p-C_fBqaep.js} +1 -1
- package/dist/components/{p-Ba0c-tu2.js → p-CzibK3BJ.js} +2 -2
- package/dist/components/{p-Cm33td2O.js → p-D0SKmg_J.js} +1 -1
- package/dist/components/{p-OUl5CA4Y.js → p-D497dAd-.js} +1 -1
- package/dist/components/{p-BmBebQMI.js → p-DC7noKZD.js} +7 -7
- package/dist/components/{p-CXpv9Rxe.js → p-DGcug5rp.js} +2 -2
- package/dist/components/{p-DkHYY72B.js → p-DIE74Wkf.js} +2 -2
- package/dist/components/{p-DOTdJ3JQ.js → p-DKkQMbfN.js} +3 -3
- package/dist/components/{p-DnmVD1Mz.js → p-DKuxmP3T.js} +2 -2
- package/dist/components/{p-bAacqNHq.js → p-DQX5iqJB.js} +2 -2
- package/dist/components/{p-DUmLsjKb.js → p-DTzNzE9j.js} +1 -1
- package/dist/components/{p-Df3BwVGy.js → p-D_XWdMC3.js} +2 -2
- package/dist/components/{p-B38_9BJg.js → p-Da56LiC2.js} +1 -1
- package/dist/components/{p-CeffYwAK.js → p-DaE8xcJ8.js} +19 -19
- package/dist/components/{p-CYwoBiqy.js → p-DcG-UAoL.js} +50 -50
- package/dist/components/{p-BeSKOETx.js → p-Dm6TZsys.js} +2 -2
- package/dist/components/{p-DhabvHJM.js → p-DuyNKEne.js} +3 -3
- package/dist/components/{p-DFMZEarE.js → p-DyWg1f0y.js} +1 -1
- package/dist/components/{p-DN9p3G9K.js → p-FDwfHj3U.js} +3 -3
- package/dist/components/{p-DK0anxtL.js → p-P70dtHet.js} +1 -1
- package/dist/components/{p-CucCT7Qn.js → p-R6NeY_RA.js} +2 -2
- package/dist/components/{p-BFYtCsZu.js → p-XOXeNvvd.js} +2 -2
- package/dist/components/{p-jIKskj3S.js → p-ZwkkxMNZ.js} +1 -1
- package/dist/components/{p-BprEDRpA.js → p-auUCvUOc.js} +2 -2
- package/dist/components/{p-D0Ed8epW.js → p-b5XSApfh.js} +4 -4
- package/dist/components/{p-djJSnjAX.js → p-fp1y_eAN.js} +2 -2
- package/dist/components/{p-Dpm75DfV.js → p-mCRS0Vii.js} +5 -5
- package/dist/components/{p-DOl-95VY.js → p-ml3LLPFB.js} +10 -10
- package/dist/components/{p-D_cyY7Nd.js → p-xFCFDper.js} +1 -1
- package/dist/esm/index.js +2 -2
- package/dist/esm/kritzel-active-users_46.entry.js +112 -112
- package/dist/esm/kritzel-brush-style.entry.js +1 -1
- package/dist/esm/{schema.constants-De_S50eB.js → schema.constants-D3OqvrMh.js} +6 -6
- package/dist/stencil/index.esm.js +2 -2
- package/dist/stencil/{p-1a398b42.entry.js → p-307b09bd.entry.js} +112 -112
- package/dist/stencil/{p-fb32cd8f.entry.js → p-905f7ab4.entry.js} +1 -1
- package/dist/stencil/{p-De_S50eB.js → p-D3OqvrMh.js} +6 -6
- package/dist/stencil/stencil.esm.js +1 -1
- package/dist/types/constants/version.d.ts +1 -1
- package/package.json +2 -1
- package/readme.md +10 -10
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
|
|
2
2
|
import { K as KritzelDevicesHelper } from './p-jGOpkGDl.js';
|
|
3
3
|
import { d as defineCustomElement$4 } from './p-CSuU8frA.js';
|
|
4
|
-
import { d as defineCustomElement$2, a as defineCustomElement$3 } from './p-
|
|
5
|
-
import { d as defineCustomElement$1 } from './p-
|
|
4
|
+
import { d as defineCustomElement$2, a as defineCustomElement$3 } from './p-BwC3bHai.js';
|
|
5
|
+
import { d as defineCustomElement$1 } from './p-BTRiw0VC.js';
|
|
6
6
|
|
|
7
7
|
const kritzelSplitButtonCss = () => `:host{position:relative;display:flex;align-items:center;font-family:sans-serif;z-index:1;padding:var(--kritzel-split-button-padding, 4px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-split-button-border, 1px solid #ebebeb);gap:var(--kritzel-split-button-gap, 4px)}:host(.mobile){--kritzel-split-button-hover-background-color:transparent}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;color:var(--kritzel-split-button-color, #000000);-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:var(--kritzel-global-pointer-cursor, pointer);text-align:center;display:flex;align-items:center;justify-content:center;pointer-events:all;-webkit-tap-highlight-color:transparent}.split-main-button,.split-menu-button{height:auto;display:flex;align-items:center;padding:var(--kritzel-split-button-padding, 8px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);font-size:var(--kritzel-split-button-font-size, 14px)}.split-main-button:hover,.split-menu-button:hover{background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button:focus,.split-menu-button:focus{background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button{gap:var(--kritzel-split-button-gap, 4px)}.split-menu-button{border-left:none;justify-content:center}.split-divider{width:var(--kritzel-split-button-divider-width, 1px);height:24px;background-color:var(--kritzel-split-button-divider-background-color, hsl(0, 0%, 0%, 4.3%))}:disabled{pointer-events:none;opacity:0.5}`;
|
|
8
8
|
|
|
@@ -103,7 +103,7 @@ const KritzelSplitButton = /*@__PURE__*/ proxyCustomElement(class KritzelSplitBu
|
|
|
103
103
|
this.menuScrollTop = event.target.scrollTop;
|
|
104
104
|
};
|
|
105
105
|
render() {
|
|
106
|
-
return (h(Host, { key: '
|
|
106
|
+
return (h(Host, { key: '3c22426ef12446aa3424d6b4a103edc02bc631f0', class: { mobile: this.isTouchDevice } }, h("button", { key: '5be967c991f55fa6f11f90fb4c5ccd6ada7f7266', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && h("kritzel-icon", { key: 'c055ff3ba358ef2a1d7dac254b7ba8007b463901', name: this.buttonIcon })), h("div", { key: '1d9a060ecdeba49c49762399216709a573481cb3', class: "split-divider" }), h("button", { key: 'ab4fe9d216ccfe2f4418e461c1bd5f5800113125', 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: '88d6617385a697781eb12ae24a75eb2f4f14f790', name: this.dropdownIcon })), h("kritzel-portal", { key: '88a6164d40ecda76541bcb36f946aa4fd239a64d', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: '6cb950b17f81864490bdfa0095debd4a7f48b1c0', 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 }))));
|
|
107
107
|
}
|
|
108
108
|
static get style() { return kritzelSplitButtonCss(); }
|
|
109
109
|
}, [513, "kritzel-split-button", {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
|
|
2
2
|
import { d as defineCustomElement$3 } from './p-CSuU8frA.js';
|
|
3
3
|
import { K as KritzelDevicesHelper } from './p-jGOpkGDl.js';
|
|
4
|
-
import { d as defineCustomElement$2 } from './p-
|
|
4
|
+
import { d as defineCustomElement$2 } from './p-BTRiw0VC.js';
|
|
5
5
|
|
|
6
6
|
const kritzelMenuItemCss = () => `:host{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--kritzel-menu-item-padding, 8px);box-sizing:border-box;gap:16px;height:var(--kritzel-menu-item-height, 40px);min-height:var(--kritzel-menu-item-min-height, 40px);font-family:sans-serif;font-size:var(--kritzel-menu-item-font-size, 14px);color:var(--kritzel-menu-item-color, #333333);border-radius:var(--kritzel-menu-item-border-radius, 12px);-webkit-tap-highlight-color:transparent}:host:focus:not(:focus-visible){outline:none}:host(:hover) .menu-item-overlay,:host(:focus-within) .menu-item-overlay{background-color:var(--kritzel-menu-item-overlay-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.selected){background-color:var(--kritzel-menu-item-selected-background-color, #007aff);color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .action-button{color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected.editing){background-color:var(--kritzel-menu-item-selected-background-color, #007aff)}:host(.selected) .edit-input{color:var(--kritzel-menu-item-selected-color, #ffffff);caret-color:var(--kritzel-menu-item-input-caret-color-on-selected, #ffffff);border-color:var(--kritzel-menu-item-input-border-color-on-selected, #ffffff)}:host(.selected) .action-button kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-selected-color, #ffffff)}kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-color, #333333)}:host(.selected) kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color-on-selected, rgba(255, 255, 255, 0.3));color:var(--kritzel-menu-item-input-selection-text-color-on-selected, #ffffff)}:host(.editing){background-color:var(--kritzel-menu-item-editing-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.disabled){opacity:0.5;pointer-events:none !important}:host(.child-open){background-color:var(--kritzel-menu-item-child-open-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.child-open.selected){background-color:var(--kritzel-menu-item-selected-background-color, #007aff)}.menu-item-overlay{position:absolute;inset:0;background-color:transparent;z-index:0;pointer-events:none;border-radius:var(--kritzel-menu-item-border-radius, 12px)}.menu-item-content{display:flex;align-items:center;gap:8px;position:relative;z-index:1;height:100%}.menu-item-content span{display:flex;align-items:center;line-height:0}.left{justify-content:flex-start;flex:1;min-width:0}.left>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.right{justify-content:flex-end}.edit-input{flex:1;height:var(--kritzel-menu-item-input-height, 24px);padding:0;background-color:transparent;border-radius:0;border:none;border-bottom:var(--kritzel-menu-item-input-border, 1px solid #ccc);font-size:var(--kritzel-menu-item-font-size, 14px);width:100%;min-width:0;box-sizing:border-box;outline:none;color:inherit}.edit-input{caret-color:var(--kritzel-menu-item-input-caret-color, currentColor)}.edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color, #007bff);color:var(--kritzel-menu-item-input-selection-text-color, #ffffff)}.action-button{padding:4px;border-radius:8px;border:none;cursor:var(--kritzel-global-pointer-cursor, pointer);display:flex;align-items:center;justify-content:center;background-color:transparent;background:transparent;-webkit-tap-highlight-color:transparent}.action-button:hover,.action-button:focus{background-color:var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.action-button.disabled{pointer-events:none;opacity:0.5}`;
|
|
7
7
|
|
|
@@ -107,12 +107,12 @@ const KritzelMenuItem = /*@__PURE__*/ proxyCustomElement(class KritzelMenuItem e
|
|
|
107
107
|
];
|
|
108
108
|
}
|
|
109
109
|
render() {
|
|
110
|
-
return (h(Host, { key: '
|
|
110
|
+
return (h(Host, { key: '6c65413fe40115ed31536bba7b060b52e13bbcd3', tabIndex: this.item.isDisabled ? -1 : 0, class: {
|
|
111
111
|
'selected': this.item.isSelected,
|
|
112
112
|
'editing': this.item.isEditing,
|
|
113
113
|
'disabled': this.item.isDisabled,
|
|
114
114
|
'child-open': this.item.isChildMenuOpen,
|
|
115
|
-
}, onClick: this.handleItemSelect }, h("div", { key: '
|
|
115
|
+
}, onClick: this.handleItemSelect }, h("div", { key: '2fcc8bd4c9ed7445e5c32c9d466975175657f11c', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
|
|
116
116
|
}
|
|
117
117
|
static get watchers() { return {
|
|
118
118
|
"item": [{
|
|
@@ -230,7 +230,7 @@ const KritzelMenu = /*@__PURE__*/ proxyCustomElement(class KritzelMenu extends H
|
|
|
230
230
|
this.itemCloseChildMenu.emit(event.detail);
|
|
231
231
|
};
|
|
232
232
|
render() {
|
|
233
|
-
return (h(Host, { key: '
|
|
233
|
+
return (h(Host, { key: '94d4324ed7e4c0db21bd647df470345e1aa218ea', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: '7223b9484ce9f2ffc0177d1249b13d97cb9acfde', 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 })))));
|
|
234
234
|
}
|
|
235
235
|
static get style() { return kritzelMenuCss(); }
|
|
236
236
|
}, [513, "kritzel-menu", {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
|
|
2
2
|
import { K as KritzelHTMLHelper } from './p-WUdQqYnu.js';
|
|
3
3
|
|
|
4
|
-
const kritzelDialogCss = () => `:host{display:contents}.dialog-content{text-align:start;line-height:normal}.backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10002;display:flex;align-items:center;justify-content:center;background-color:var(--kritzel-dialog-backdrop-color, rgba(0, 0, 0, 0.5));opacity:1;transition:opacity 150ms ease-out}.backdrop.is-animating{opacity:0}.dialog-content{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-dialog-background-color, #ffffff);border-radius:var(--kritzel-dialog-border-radius, 12px);box-shadow:var(--kritzel-dialog-box-shadow, 0 4px 20px rgba(0, 0, 0, 0.15));border:var(--kritzel-dialog-border, 1px solid #ebebeb);max-height:var(--kritzel-dialog-max-height, 90vh);max-width:var(--kritzel-dialog-max-width, 90vw);overflow:hidden;transform:scale(1);opacity:1;transition:transform 200ms ease-out,
|
|
4
|
+
const kritzelDialogCss = () => `:host{display:contents}.dialog-content{text-align:start;line-height:normal}.backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10002;display:flex;align-items:center;justify-content:center;background-color:var(--kritzel-dialog-backdrop-color, rgba(0, 0, 0, 0.5));opacity:1;transition:opacity 150ms ease-out}.backdrop.is-animating{opacity:0}.dialog-content{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-dialog-background-color, #ffffff);border-radius:var(--kritzel-dialog-border-radius, 12px);box-shadow:var(--kritzel-dialog-box-shadow, 0 4px 20px rgba(0, 0, 0, 0.15));border:var(--kritzel-dialog-border, 1px solid #ebebeb);max-height:var(--kritzel-dialog-max-height, 90vh);max-width:var(--kritzel-dialog-max-width, 90vw);overflow:hidden;transform:scale(1);opacity:1;transition:transform 200ms ease-out, opacity 200ms ease-out;font-family:var(--kritzel-dialog-font-family, sans-serif)}.dialog-content.is-animating{transform:scale(0.95);opacity:0}.dialog-content.size-small{width:var(--kritzel-dialog-width-small, 320px);height:var(--kritzel-dialog-height-small, auto)}.dialog-content.size-medium{width:var(--kritzel-dialog-width-medium, 480px);height:var(--kritzel-dialog-height-medium, auto)}.dialog-content.size-large{width:var(--kritzel-dialog-width-large, 640px);height:var(--kritzel-dialog-height-large, auto)}.dialog-content.size-fullscreen{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}.backdrop.contained-fullscreen{background-color:transparent}.dialog-content.contained-fullscreen{border-radius:0}.dialog-content.contained-fullscreen .dialog-body{display:flex;flex-direction:column}.dialog-content.contained-fullscreen .dialog-body ::slotted(*){flex:1;min-height:0}@media (max-width: 576px), (max-height: 576px) and (orientation: landscape){.backdrop:has(.fullscreen-on-mobile){background-color:transparent}.dialog-content.fullscreen-on-mobile{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}.dialog-content.fullscreen-on-mobile .dialog-body{display:flex;flex-direction:column}.dialog-content.fullscreen-on-mobile .dialog-body ::slotted(*){flex:1;min-height:0}}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:var(--kritzel-dialog-header-padding, 16px 20px);border-bottom:var(--kritzel-dialog-header-border, 1px solid #ebebeb);gap:12px}.dialog-title{margin:0;font-size:var(--kritzel-dialog-title-font-size, 18px);font-weight:var(--kritzel-dialog-title-font-weight, 600);color:var(--kritzel-dialog-title-color, #1a1a1a);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.close-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--kritzel-dialog-close-button-border-radius, 6px);background-color:var(--kritzel-dialog-close-button-background, transparent);color:var(--kritzel-dialog-close-button-color, #666666);cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 150ms ease, color 150ms ease;flex-shrink:0;-webkit-tap-highlight-color:transparent}.close-button:hover{background-color:var(--kritzel-dialog-close-button-hover-background, #f5f5f5);color:var(--kritzel-dialog-close-button-hover-color, #1a1a1a)}.close-button:active{background-color:var(--kritzel-dialog-close-button-active-background, #ebebeb)}.close-button:focus-visible{outline:revert;outline-offset:revert}.dialog-body{padding:var(--kritzel-dialog-body-padding, 20px);overflow-y:auto;flex:1;min-height:0;scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}.dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--kritzel-dialog-footer-gap, 8px);padding:var(--kritzel-dialog-footer-padding, 16px 20px);border-top:var(--kritzel-dialog-footer-border, 1px solid #ebebeb)}::slotted([slot='header']){flex:1}::slotted([slot='footer']){display:contents}`;
|
|
5
5
|
|
|
6
6
|
const KritzelDialog = /*@__PURE__*/ proxyCustomElement(class KritzelDialog extends H {
|
|
7
7
|
constructor(registerHost) {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
|
|
2
2
|
import { K as KritzelDevicesHelper } from './p-jGOpkGDl.js';
|
|
3
3
|
import { d as defineCustomElement$4 } from './p-CSuU8frA.js';
|
|
4
|
-
import { d as defineCustomElement$2, a as defineCustomElement$3 } from './p-
|
|
5
|
-
import { d as defineCustomElement$1 } from './p-
|
|
4
|
+
import { d as defineCustomElement$2, a as defineCustomElement$3 } from './p-BwC3bHai.js';
|
|
5
|
+
import { d as defineCustomElement$1 } from './p-BTRiw0VC.js';
|
|
6
6
|
|
|
7
7
|
const kritzelMoreMenuCss = () => `:host{display:inline-flex;z-index:1}.more-menu-wrapper{display:inline-flex;padding:var(--kritzel-more-menu-padding, 4px);background-color:var(--kritzel-more-menu-background-color, #ffffff);border-radius:var(--kritzel-more-menu-border-radius, 12px);box-shadow:var(--kritzel-more-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-more-menu-border, 1px solid #ebebeb);opacity:0;pointer-events:none;transition:opacity 0.2s ease-out}.more-menu-wrapper.visible{opacity:1;pointer-events:auto}:host(.mobile){--kritzel-more-menu-button-hover-background-color:transparent;--kritzel-more-menu-button-active-background-color:transparent}.more-menu-button{display:flex;align-items:center;justify-content:center;width:var(--kritzel-more-menu-button-width, 40px);height:var(--kritzel-more-menu-button-height, 40px);padding:0;border:none;border-radius:var(--kritzel-more-menu-inner-border-radius, 12px);background-color:transparent;cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:none;transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--kritzel-more-menu-button-color, currentColor)}.more-menu-button:hover{background-color:var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.more-menu-button:focus-visible{background-color:var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.more-menu-button:active{background-color:var(--kritzel-more-menu-button-active-background-color, hsl(0, 0%, 0%, 4.3%))}`;
|
|
8
8
|
|
|
@@ -150,7 +150,7 @@ const KritzelMoreMenu = /*@__PURE__*/ proxyCustomElement(class KritzelMoreMenu e
|
|
|
150
150
|
this.closeMenu();
|
|
151
151
|
};
|
|
152
152
|
render() {
|
|
153
|
-
return (h(Host, { key: '
|
|
153
|
+
return (h(Host, { key: '9e8186973bb76bae0c742acf642a0cfc319d3489', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, h("div", { key: '7df4ae3c4234e47edac0c2bfad6163cfd4e3e842', class: { 'more-menu-wrapper': true, visible: this.visible } }, h("button", { key: '87ab50e192932130a1982ace26ba7d623471f6aa', class: "more-menu-button", "data-testid": "more-menu-button", onClick: this.toggleMenu, "aria-label": this.terms['moreMenu.ariaLabel'] ?? 'More options' }, h("kritzel-icon", { key: '2a62ed1579df2cb512d7b73aab93726e3610447f', name: this.icon, size: this.iconSize })), h("kritzel-portal", { key: '873a7ab1b46fc72dc65dfa0009b1e940d0d4c499', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, h("kritzel-menu", { key: '4fe817176a9d72c8a8368354394ab3d9b5e759f3', items: this.resolveMenuLabels(this.visibleItems), onItemSelect: this.handleMenuItemSelect })))));
|
|
154
154
|
}
|
|
155
155
|
static get watchers() { return {
|
|
156
156
|
"items": [{
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
|
|
2
|
-
import { d as defineCustomElement$2 } from './p-
|
|
2
|
+
import { d as defineCustomElement$2 } from './p-C2NV0SgA.js';
|
|
3
3
|
import { d as defineCustomElement$1 } from './p-CSuU8frA.js';
|
|
4
4
|
|
|
5
5
|
const kritzelLoginDialogCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-width-small:380px}.login-content{display:flex;flex-direction:column;gap:20px}.login-subtitle{font-size:13px;color:var(--kritzel-login-dialog-subtitle-color, #666666);margin:0;line-height:1.5;text-align:center}.login-providers{display:flex;flex-direction:column;gap:10px}.provider-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 16px;border:1px solid var(--kritzel-login-dialog-button-border-color, #e0e0e0);border-radius:8px;background:var(--kritzel-login-dialog-button-background, #ffffff);color:var(--kritzel-login-dialog-button-text-color, #333333);font-size:14px;font-weight:500;font-family:inherit;cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;-webkit-tap-highlight-color:transparent}.provider-button:hover:not(:disabled){background:var(--kritzel-login-dialog-button-hover-background, #f5f5f5);border-color:var(--kritzel-login-dialog-button-hover-border-color, #cccccc)}.provider-button:active:not(:disabled){background:var(--kritzel-login-dialog-button-active-background, #ebebeb)}.provider-button:focus-visible{outline:revert;outline-offset:revert}.provider-button.is-disabled{opacity:0.5;cursor:default;pointer-events:none}.provider-button.is-loading{cursor:default}.provider-label{flex-shrink:0}.provider-button.is-loading .provider-label{opacity:0.7}@keyframes kritzel-login-spin{to{transform:rotate(360deg)}}.spinner{width:20px;height:20px;box-sizing:border-box;display:block;flex-shrink:0;border:2px solid var(--kritzel-login-dialog-spinner-color, #cccccc);border-top-color:var(--kritzel-login-dialog-spinner-active-color, #333333);border-radius:50%;animation:kritzel-login-spin 0.6s linear infinite}`;
|
|
@@ -53,7 +53,7 @@ const KritzelLoginDialog = /*@__PURE__*/ proxyCustomElement(class KritzelLoginDi
|
|
|
53
53
|
this.dialogClosed.emit();
|
|
54
54
|
};
|
|
55
55
|
render() {
|
|
56
|
-
return (h(Host, { key: '
|
|
56
|
+
return (h(Host, { key: 'f964c3c57a99921d335384dcf6fcdc6d3bf3f78e' }, h("kritzel-dialog", { key: '5948afd7c79e292d9be6238f2aff44a93d9d124c', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '4e3ce9738e92c7c4184a8dd818e25f08ec201e5d', class: "login-content" }, this.subtitle && (h("p", { key: '2b2abf69302e5381479d48107bbfb4cdb17b7470', class: "login-subtitle" }, this.subtitle)), h("div", { key: '7c3d3b315cf1d9fcf1575c57480c99a8a097a545', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
|
|
57
57
|
'provider-button': true,
|
|
58
58
|
'is-loading': this.loadingProvider === provider.name,
|
|
59
59
|
'is-disabled': this.loadingProvider !== null && this.loadingProvider !== provider.name,
|
|
@@ -39,7 +39,7 @@ const KritzelInput = /*@__PURE__*/ proxyCustomElement(class KritzelInput extends
|
|
|
39
39
|
this.valueChange.emit(input.value);
|
|
40
40
|
};
|
|
41
41
|
render() {
|
|
42
|
-
return (h(Host, { key: '
|
|
42
|
+
return (h(Host, { key: '9fede62dc5fb2a98e6d01b90ba8badaeb7ce8179' }, h("div", { key: '117a70a874294cfeac95c1d8e5174f6fe5baaca0', class: "input-container" }, this.label && h("label", { key: 'afc0938751e56eb3684c41b28f6fb9fedf7c9849', class: "input-label" }, this.label), h("div", { key: 'fa51b324fa55b20bc3249437edbfffb9b9e86256', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, h("input", { key: 'ff716c017ce3f57f9a494cac2c5c3a4fa39577b5', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && h("span", { key: '5e3aed8888b1581a31f240c7b8c00b741931a5c5', class: "input-suffix" }, this.suffix)))));
|
|
43
43
|
}
|
|
44
44
|
static get watchers() { return {
|
|
45
45
|
"value": [{
|
|
@@ -26,11 +26,11 @@ const KritzelButton = /*@__PURE__*/ proxyCustomElement(class KritzelButton exten
|
|
|
26
26
|
this.buttonClick.emit();
|
|
27
27
|
};
|
|
28
28
|
render() {
|
|
29
|
-
return (h(Host, { key: '
|
|
29
|
+
return (h(Host, { key: 'a5f90834739101961dd128dba592cf53b877bb82' }, h("button", { key: '19cbfaeb85e14fbbc76b517ace1a1e084adbb65d', type: this.type, class: {
|
|
30
30
|
'kritzel-button': true,
|
|
31
31
|
[this.variant]: true,
|
|
32
32
|
'disabled': this.disabled,
|
|
33
|
-
}, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '
|
|
33
|
+
}, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '6e4c7cdfb295aa0dc79e494e5fdeb5527ab80383' }))));
|
|
34
34
|
}
|
|
35
35
|
static get style() { return kritzelButtonCss(); }
|
|
36
36
|
}, [769, "kritzel-button", {
|
|
@@ -79,7 +79,7 @@ const KritzelCursorTrail = /*@__PURE__*/ proxyCustomElement(class KritzelCursorT
|
|
|
79
79
|
}
|
|
80
80
|
}
|
|
81
81
|
render() {
|
|
82
|
-
return (h(Host, { key: '
|
|
82
|
+
return (h(Host, { key: 'cf2cf1c689bdc8ea393a7ea8f32698cfcdb0e375' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: 'df38c45537217982f7fb9513b954f3b0fa27acea', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
|
|
83
83
|
position: 'absolute',
|
|
84
84
|
left: '0',
|
|
85
85
|
top: '0',
|
|
@@ -14,7 +14,7 @@ const KritzelFont = /*@__PURE__*/ proxyCustomElement(class KritzelFont extends H
|
|
|
14
14
|
size = 24;
|
|
15
15
|
color = '#000000';
|
|
16
16
|
render() {
|
|
17
|
-
return (h(Host, { key: '
|
|
17
|
+
return (h(Host, { key: 'f21767de01c3bcb66832ca66b35507d241f6ed5e' }, h("div", { key: 'a2986382e2d65aa7f56be5b77518bd3be4a2f5c5', class: "font-preview", style: {
|
|
18
18
|
fontFamily: this.fontFamily,
|
|
19
19
|
fontSize: `${this.size}px`,
|
|
20
20
|
color: this.color
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
|
|
2
2
|
import { C as CURRENT_APP_STATE_SCHEMA_VERSION, a as CURRENT_WORKSPACE_SCHEMA_VERSION } from './p-CW-VyJgK.js';
|
|
3
|
-
import { d as defineCustomElement$6 } from './p-
|
|
4
|
-
import { d as defineCustomElement$5 } from './p-
|
|
3
|
+
import { d as defineCustomElement$6 } from './p-C2NV0SgA.js';
|
|
4
|
+
import { d as defineCustomElement$5 } from './p-D_XWdMC3.js';
|
|
5
5
|
import { d as defineCustomElement$4 } from './p-CSuU8frA.js';
|
|
6
|
-
import { d as defineCustomElement$3 } from './p-
|
|
7
|
-
import { d as defineCustomElement$2 } from './p-
|
|
8
|
-
import { d as defineCustomElement$1 } from './p-
|
|
6
|
+
import { d as defineCustomElement$3 } from './p-DuyNKEne.js';
|
|
7
|
+
import { d as defineCustomElement$2 } from './p-B65Z2K81.js';
|
|
8
|
+
import { d as defineCustomElement$1 } from './p-BCrNNQKI.js';
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
11
|
* The current version of the Kritzel library.
|
|
12
12
|
* This file is auto-generated by the version bump scripts.
|
|
13
13
|
* Do not modify manually.
|
|
14
14
|
*/
|
|
15
|
-
const KRITZEL_VERSION = '0.4.
|
|
15
|
+
const KRITZEL_VERSION = '0.4.31';
|
|
16
16
|
|
|
17
17
|
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-tab-panel{display:none}.settings-tab-panel.is-active{display:block}.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)}`;
|
|
18
18
|
|
|
@@ -228,7 +228,7 @@ const KritzelSettings = /*@__PURE__*/ proxyCustomElement(class KritzelSettings e
|
|
|
228
228
|
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)))));
|
|
229
229
|
}
|
|
230
230
|
render() {
|
|
231
|
-
return (h(Host, { key: '
|
|
231
|
+
return (h(Host, { key: '0ca8d95d2557e4f36f9461295be02ff9d60878d9' }, h("kritzel-dialog", { key: '9396bc5d7ecff839d1df6007fd54b3bb0da31c85', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: 'cf8a0f60c3884dac3e1cd324065030c278f4e119', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
|
|
232
232
|
}
|
|
233
233
|
static get watchers() { return {
|
|
234
234
|
"settings": [{
|
|
@@ -76,10 +76,10 @@ const KritzelLineEndings = /*@__PURE__*/ proxyCustomElement(class KritzelLineEnd
|
|
|
76
76
|
render() {
|
|
77
77
|
const startEnding = this.getStartEnding();
|
|
78
78
|
const endEnding = this.getEndEnding();
|
|
79
|
-
return (h(Host, { key: '
|
|
79
|
+
return (h(Host, { key: '81e3262408d26a06acb2677698832b89651292a1' }, h("div", { key: '85c67f948075b2d58abfbd9d168a84c89554e81f', class: "endings-section" }, h("div", { key: 'd10a0b1c58fd06926a83cd78e213417aca28d01c', class: "endings-row" }, this.styles.map(type => (h("button", { class: {
|
|
80
80
|
'ending-option': true,
|
|
81
81
|
'selected': startEnding === type,
|
|
82
|
-
}, onClick: () => this.handleStartChange(type), title: type === 'none' ? 'No start arrow' : `${type} start arrow` }, this.renderEndingIcon(type, true)))))), h("div", { key: '
|
|
82
|
+
}, onClick: () => this.handleStartChange(type), title: type === 'none' ? 'No start arrow' : `${type} start arrow` }, this.renderEndingIcon(type, true)))))), h("div", { key: 'fd99875f3cefa8c4e36e106e836088fa61c75432', class: "endings-section" }, h("div", { key: 'dbcd0a32f278cc0d0317913827034f912a14d2b4', class: "endings-row" }, this.styles.map(type => (h("button", { class: {
|
|
83
83
|
'ending-option': true,
|
|
84
84
|
'selected': endEnding === type,
|
|
85
85
|
}, onClick: () => this.handleEndChange(type), title: type === 'none' ? 'No end arrow' : `${type} end arrow` }, this.renderEndingIcon(type, false))))))));
|
|
@@ -140,14 +140,14 @@ const KritzelTooltip = /*@__PURE__*/ proxyCustomElement(class KritzelTooltip ext
|
|
|
140
140
|
}
|
|
141
141
|
}
|
|
142
142
|
render() {
|
|
143
|
-
return (h(Host, { key: '
|
|
143
|
+
return (h(Host, { key: 'e887f507f89031ebe7a6bfc1c66bd7c5613fea64', style: {
|
|
144
144
|
position: 'fixed',
|
|
145
145
|
zIndex: '9999',
|
|
146
146
|
transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
|
|
147
147
|
visibility: this.isVisible ? 'visible' : 'hidden',
|
|
148
148
|
left: `${this.positionX}px`,
|
|
149
149
|
bottom: `${this.positionY}px`,
|
|
150
|
-
} }, h("div", { key: '
|
|
150
|
+
} }, h("div", { key: 'b9e5efe7bdef3f8c9cd709e19220322b91f37415', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: 'f36dd5791f0a4996d0a1b488798bb3504ab471f6' }))));
|
|
151
151
|
}
|
|
152
152
|
static get watchers() { return {
|
|
153
153
|
"triggerElement": [{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-B43upypT.js';
|
|
2
2
|
import { a as KritzelColorHelper } from './p-7I4Uzjrw.js';
|
|
3
3
|
|
|
4
|
-
const kritzelColorCss = () => `:host{display:flex}.checkerboard-bg{background:repeating-conic-gradient(
|
|
4
|
+
const kritzelColorCss = () => `:host{display:flex}.checkerboard-bg{background:repeating-conic-gradient( var(--kritzel-checkerboard-color-dark, #ccc) 0% 25%, var(--kritzel-checkerboard-color-light, #fff) 0% 50% ) 50% / 8px 8px;position:relative;overflow:hidden}.color-circle{width:24px;height:24px;border-radius:50%;box-sizing:border-box;display:block}.color-circle.white{border:1px solid var(--kritzel-color-palette-circle-border-color, #dddcdc)}`;
|
|
5
5
|
|
|
6
6
|
const KritzelColorComponent = /*@__PURE__*/ proxyCustomElement(class KritzelColorComponent extends H {
|
|
7
7
|
constructor(registerHost) {
|
|
@@ -48,13 +48,13 @@ const KritzelColorComponent = /*@__PURE__*/ proxyCustomElement(class KritzelColo
|
|
|
48
48
|
render() {
|
|
49
49
|
const resolvedColor = this.resolveColor();
|
|
50
50
|
const isColorVeryLight = this.isLightColor(resolvedColor);
|
|
51
|
-
return (h(Host, { key: '
|
|
51
|
+
return (h(Host, { key: '230d6fa9bc597920e9b2ebc97d597d4f57df0b92' }, h("div", { key: '3146aac9869f34762c7f86ed8882d62ef01248ce', class: "checkerboard-bg", style: {
|
|
52
52
|
width: `${this.size}px`,
|
|
53
53
|
height: `${this.size}px`,
|
|
54
54
|
borderRadius: '50%',
|
|
55
55
|
display: 'inline-block',
|
|
56
56
|
position: 'relative',
|
|
57
|
-
} }, h("div", { key: '
|
|
57
|
+
} }, h("div", { key: 'bddf0776144a6bdfca9c005708fa1467e244546b', class: {
|
|
58
58
|
'color-circle': true,
|
|
59
59
|
'white': isColorVeryLight,
|
|
60
60
|
}, style: {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
|
|
2
2
|
|
|
3
|
-
const kritzelOpacitySliderCss = () => `:host{display:flex;flex-direction:column;padding:0;box-sizing:border-box}.opacity-container{display:flex;align-items:center;width:232px}.slider-wrapper{flex:1;display:flex;align-items:center}.opacity-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(
|
|
3
|
+
const kritzelOpacitySliderCss = () => `:host{display:flex;flex-direction:column;padding:0;box-sizing:border-box}.opacity-container{display:flex;align-items:center;width:232px}.slider-wrapper{flex:1;display:flex;align-items:center}.opacity-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient( to right, var(--kritzel-opacity-slider-active-color, #007AFF) 0%, var(--kritzel-opacity-slider-active-color, #007AFF) var(--slider-progress, 100%), var(--kritzel-opacity-slider-track-color, #e0e0e0) var(--slider-progress, 100%), var(--kritzel-opacity-slider-track-color, #e0e0e0) 100% );outline:none;cursor:var(--kritzel-global-pointer-cursor, pointer)}.opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--kritzel-opacity-slider-thumb-color, #ffffff);border:2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:transform 0.1s ease}.opacity-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.opacity-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--kritzel-opacity-slider-thumb-color, #ffffff);border:2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:transform 0.1s ease}.opacity-slider::-moz-range-thumb:hover{transform:scale(1.1)}.opacity-slider::-moz-range-track{height:6px;border-radius:3px;background:transparent}.opacity-slider:focus{outline:none}.opacity-slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}.opacity-slider:focus::-moz-range-thumb{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}`;
|
|
4
4
|
|
|
5
5
|
const KritzelOpacitySlider = /*@__PURE__*/ proxyCustomElement(class KritzelOpacitySlider extends H {
|
|
6
6
|
constructor(registerHost) {
|
|
@@ -33,7 +33,7 @@ const KritzelOpacitySlider = /*@__PURE__*/ proxyCustomElement(class KritzelOpaci
|
|
|
33
33
|
}
|
|
34
34
|
render() {
|
|
35
35
|
const percentage = this.getPercentage();
|
|
36
|
-
return (h(Host, { key: '
|
|
36
|
+
return (h(Host, { key: 'bc2d07dc28e3bf9599aac57823215445f1b41e4c' }, h("div", { key: '5d4106f36753d27b65b063021311e616185b3b88', class: "opacity-container" }, h("div", { key: '0766e8be775867dea4a6c44a79baf46d1361329c', class: "slider-wrapper" }, h("input", { key: 'ec9f6c6be684b1bb5cfab3574734c69428b22498', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
|
|
37
37
|
'--slider-progress': `${percentage}%`,
|
|
38
38
|
'--kritzel-opacity-slider-thumb-border-color': this.previewColor,
|
|
39
39
|
} })))));
|
|
@@ -1998,7 +1998,7 @@ class KritzelLine extends KritzelBaseObject {
|
|
|
1998
1998
|
}
|
|
1999
1999
|
}
|
|
2000
2000
|
|
|
2001
|
-
const kritzelAwarenessCursorsCss = () => `:host{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1}.awareness-cursor{position:absolute;top:0;left:0;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,
|
|
2001
|
+
const kritzelAwarenessCursorsCss = () => `:host{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1}.awareness-cursor{position:absolute;top:0;left:0;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out, opacity 300ms ease;will-change:transform}.awareness-cursor.stale{opacity:0}.awareness-cursor.tracking-object{transition-duration:0ms}.cursor-arrow{filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.cursor-label{position:absolute;left:16px;top:16px;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;user-select:none}.edge-indicator{position:absolute;top:-12px;left:-12px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out, opacity 300ms ease;will-change:transform;pointer-events:auto;user-select:none;cursor:pointer}.edge-indicator.stale{opacity:0}.edge-indicator.tracking-object{transition-duration:0ms}.edge-arrow{position:absolute;filter:drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));transition:opacity 300ms ease}.edge-arrow.stale{opacity:0}.edge-label{position:absolute;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;opacity:0;transform-origin:center;transition:opacity 150ms ease}.edge-indicator:hover .edge-label{opacity:1}.remote-selection-box{position:absolute;top:0;left:0;border-width:2px;border-style:solid;pointer-events:none;will-change:transform, width, height;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out, width var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out, height var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out}`;
|
|
2002
2002
|
|
|
2003
2003
|
const STALE_THRESHOLD_MS = 10_000;
|
|
2004
2004
|
const REMOVE_THRESHOLD_MS = 30_000;
|
|
@@ -2207,7 +2207,7 @@ const KritzelAwarenessCursors = /*@__PURE__*/ proxyCustomElement(class KritzelAw
|
|
|
2207
2207
|
}
|
|
2208
2208
|
render() {
|
|
2209
2209
|
const cursors = Array.from(this.remoteCursors.values());
|
|
2210
|
-
return (h(Host, { key: '
|
|
2210
|
+
return (h(Host, { key: 'b157f337127f7e5852acc0d6a246fa42e944a501' }, cursors.map(remoteCursor => {
|
|
2211
2211
|
if (!remoteCursor.cursor)
|
|
2212
2212
|
return null;
|
|
2213
2213
|
// When a remote user is actively drawing, derive cursor position from
|
|
@@ -33,7 +33,7 @@ const KritzelUtilityPanel = /*@__PURE__*/ proxyCustomElement(class KritzelUtilit
|
|
|
33
33
|
this.redo.emit();
|
|
34
34
|
}
|
|
35
35
|
render() {
|
|
36
|
-
return (h(Host, { key: '
|
|
36
|
+
return (h(Host, { key: 'f4258951cbf62fc932fa48fbd8aaf2128aef1aed' }, h("button", { key: '953365123f654cd683b810fe82b90e4a57467d1d', 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: 'cac7eade59c64b535a9b55e99feddc2f545246c2', name: "undo" })), h("button", { key: '45b1d0e3559c77215f85e17b46ba5d2fb86e6f50', 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: '7de37e1ebe98a5698b0f22769a5a79948de3df25', name: "redo" })), h("div", { key: 'f9fbd4bfaa66df93fba40089e294cbce70b45dda', class: "utility-separator" }), h("button", { key: '4ccfdc2423de61de4f108cf1a198d62d7d2b24c4', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": this.terms['utility.delete'] ?? 'Delete selected items' }, h("kritzel-icon", { key: '3af4d475defe1712a5e975d0860f849c3015597b', name: "delete" }))));
|
|
37
37
|
}
|
|
38
38
|
static get style() { return kritzelUtilityPanelCss(); }
|
|
39
39
|
}, [513, "kritzel-utility-panel", {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
|
|
2
2
|
|
|
3
|
-
const kritzelDropdownCss = () => `:host{display:inline-flex;vertical-align:middle;width:100%;position:relative}.dropdown-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-dropdown-border-color, #ebebeb);border-radius:var(--kritzel-dropdown-border-radius, 6px);overflow:visible;height:38px;width:100%;position:relative}.dropdown-wrapper:hover:not(:focus-within){border-color:var(--kritzel-dropdown-hover-border-color, #cccccc)}.dropdown-container{flex:1;height:100%;min-width:0}.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;height:100%;width:100%;box-sizing:border-box;border-radius:var(--kritzel-dropdown-border-radius, 6px);border:none;background-color:var(--kritzel-dropdown-background, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);outline:none;font-size:inherit;font-family:inherit;color:var(--kritzel-dropdown-text-color, #333333);-webkit-tap-highlight-color:transparent;text-align:left}.dropdown-trigger:focus-visible{outline:revert}.dropdown-trigger.has-suffix-border{border-right:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-right-radius:0;border-bottom-right-radius:0}.dropdown-trigger.has-prefix-border{border-left:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.dropdown-trigger-arrow{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;transition:transform 0.2s ease}.dropdown-trigger-arrow svg{width:100%;height:100%}.dropdown-trigger.is-open .dropdown-trigger-arrow{transform:rotate(180deg)}.dropdown-trigger.is-open.open-up .dropdown-trigger-arrow{transform:rotate(0deg)}.dropdown-menu{position:absolute;left:0;right:0;margin:0;padding:4px 0;list-style:none;background-color:var(--kritzel-dropdown-background, #ffffff);border:1px solid var(--kritzel-global-border-color, #ebebeb);border-radius:var(--kritzel-dropdown-menu-border-radius, var(--kritzel-dropdown-border-radius, 6px));box-shadow:var(--kritzel-controls-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));z-index:1000;max-height:240px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity 0.15s ease,
|
|
3
|
+
const kritzelDropdownCss = () => `:host{display:inline-flex;vertical-align:middle;width:100%;position:relative}.dropdown-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-dropdown-border-color, #ebebeb);border-radius:var(--kritzel-dropdown-border-radius, 6px);overflow:visible;height:38px;width:100%;position:relative}.dropdown-wrapper:hover:not(:focus-within){border-color:var(--kritzel-dropdown-hover-border-color, #cccccc)}.dropdown-container{flex:1;height:100%;min-width:0}.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;height:100%;width:100%;box-sizing:border-box;border-radius:var(--kritzel-dropdown-border-radius, 6px);border:none;background-color:var(--kritzel-dropdown-background, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);outline:none;font-size:inherit;font-family:inherit;color:var(--kritzel-dropdown-text-color, #333333);-webkit-tap-highlight-color:transparent;text-align:left}.dropdown-trigger:focus-visible{outline:revert}.dropdown-trigger.has-suffix-border{border-right:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-right-radius:0;border-bottom-right-radius:0}.dropdown-trigger.has-prefix-border{border-left:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.dropdown-trigger-arrow{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;transition:transform 0.2s ease}.dropdown-trigger-arrow svg{width:100%;height:100%}.dropdown-trigger.is-open .dropdown-trigger-arrow{transform:rotate(180deg)}.dropdown-trigger.is-open.open-up .dropdown-trigger-arrow{transform:rotate(0deg)}.dropdown-menu{position:absolute;left:0;right:0;margin:0;padding:4px 0;list-style:none;background-color:var(--kritzel-dropdown-background, #ffffff);border:1px solid var(--kritzel-global-border-color, #ebebeb);border-radius:var(--kritzel-dropdown-menu-border-radius, var(--kritzel-dropdown-border-radius, 6px));box-shadow:var(--kritzel-controls-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));z-index:1000;max-height:240px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;outline:none}.dropdown-menu.open-down{top:calc(100% + 4px);bottom:auto;transform:translateY(-8px)}.dropdown-menu.open-up{bottom:calc(100% + 4px);top:auto;transform:translateY(8px)}.dropdown-menu.is-open{opacity:1;visibility:inherit;transform:translateY(0)}.dropdown-menu.open-up{box-shadow:var(--kritzel-controls-box-shadow, 0 -4px 12px rgba(0, 0, 0, 0.15))}.dropdown-option{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-dropdown-text-color, #333333);transition:background-color 0.1s ease;-webkit-tap-highlight-color:transparent}.dropdown-option.is-focused{background-color:var(--kritzel-dropdown-hover-background-color, #f0f0f0)}.dropdown-option.is-selected{font-weight:600;background-color:var(--kritzel-dropdown-selected-background-color, #007bff1a)}.dropdown-option-check{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--kritzel-dropdown-accent-color, #007bff)}.dropdown-option-check svg{width:100%;height:100%}.dropdown-menu{scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}::slotted(*){height:100%;box-sizing:border-box}`;
|
|
4
4
|
|
|
5
5
|
const KritzelDropdown = /*@__PURE__*/ proxyCustomElement(class KritzelDropdown extends H {
|
|
6
6
|
constructor(registerHost) {
|
|
@@ -242,7 +242,7 @@ const KritzelDropdown = /*@__PURE__*/ proxyCustomElement(class KritzelDropdown e
|
|
|
242
242
|
'open-up': this.openDirection === 'up',
|
|
243
243
|
'open-down': this.openDirection === 'down',
|
|
244
244
|
};
|
|
245
|
-
return (h(Host, { key: '
|
|
245
|
+
return (h(Host, { key: '66ec6cbffa9fd25a7bad62d6e3477c0fe7726861' }, h("div", { key: '6dc1f20070dde95ab54f44d158659e99bd81b834', class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) }, h("slot", { key: 'd9655fc7f5e6a0d74b4a1904a12cc0bf478ccf4e', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), h("div", { key: '325af053df9588e99b493c422a1f369f0af2243a', class: "dropdown-container", style: { width: this.width } }, h("button", { key: '626d54cd8e01221b1cd61e61b9d53b534e7603db', type: "button", class: triggerClasses, style: { ...this.selectStyles, ...this.getSelectedStyle() }, onClick: this.toggleMenu, onKeyDown: this.handleTriggerKeyDown, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', ref: el => (this.triggerElement = el) }, h("span", { key: 'bbc3ec7297ee98c1903cfd547ca20daf3a5f1311', class: "dropdown-trigger-label" }, this.getSelectedLabel()), h("span", { key: '591b71aec72d2e6eaa96e8eb4c91b1f34eb2177a', class: "dropdown-trigger-arrow", "aria-hidden": "true" }, h("svg", { key: '317034d40ceab9ca72090f6a58fc0fa5b92f2db0', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '98867959ff1d7fd5515a3fe400bdc2378013dcb9', points: "6 9 12 15 18 9" }))))), h("slot", { key: 'f9d2f73f7b233a30f57ba4a9209e1a32a8ee5e70', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }), h("ul", { key: 'f15048910c0d24855fb1e940d2adc994dee83d06', class: menuClasses, role: "listbox", tabindex: "-1", onKeyDown: this.handleMenuKeyDown, ref: el => (this.menuElement = el) }, this.options.map((option, index) => {
|
|
246
246
|
const isSelected = option.value === this.internalValue;
|
|
247
247
|
const isFocused = index === this.focusedIndex;
|
|
248
248
|
const optionClasses = {
|
|
@@ -39,7 +39,7 @@ const KritzelZoomPanel = /*@__PURE__*/ proxyCustomElement(class KritzelZoomPanel
|
|
|
39
39
|
return Number.isFinite(this.zoomPercent) ? Math.max(1, Math.round(this.zoomPercent)) : 100;
|
|
40
40
|
}
|
|
41
41
|
render() {
|
|
42
|
-
return (h(Host, { key: '
|
|
42
|
+
return (h(Host, { key: 'e5fc3a34076aaeb454d74bc54b029f40d467fc0b' }, h("div", { key: 'a0591585327eb48385948e248970d3e999ee98f9', class: { panel: true, visible: this.visible } }, h("button", { key: '1bbf4f2fbed22f445ab8761c9855adb28cb70a5c', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomOut'] ?? 'Zoom out', disabled: this.disabled, onClick: this.handleZoomOut }, h("kritzel-icon", { key: 'ace269950514105d0cbda2d2e946ddd9831fd889', name: "minus" })), h("span", { key: '0f597c6c620a8f9c3f0877ab1b1e48bb4eef2716', class: "zoom-level", "aria-live": "polite" }, this.normalizedZoomPercent, "%"), h("button", { key: '694fbbee105e73d85e077258caeee5a2206e60a6', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomIn'] ?? 'Zoom in', disabled: this.disabled, onClick: this.handleZoomIn }, h("kritzel-icon", { key: 'c17749be45aedfff9317efd96661dcdfb09f7c7f', name: "plus" })))));
|
|
43
43
|
}
|
|
44
44
|
static get style() { return kritzelZoomPanelCss(); }
|
|
45
45
|
}, [513, "kritzel-zoom-panel", {
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
|
|
2
2
|
import { K as KritzelDevicesHelper } from './p-jGOpkGDl.js';
|
|
3
|
-
import { K as KritzelToolConfigHelper, d as defineCustomElement$3 } from './p-
|
|
3
|
+
import { K as KritzelToolConfigHelper, d as defineCustomElement$3 } from './p-ml3LLPFB.js';
|
|
4
4
|
import { a as KritzelColorHelper } from './p-7I4Uzjrw.js';
|
|
5
|
-
import { d as defineCustomElement$e } from './p-
|
|
6
|
-
import { d as defineCustomElement$d } from './p-
|
|
7
|
-
import { d as defineCustomElement$c } from './p-
|
|
8
|
-
import { d as defineCustomElement$b } from './p-
|
|
9
|
-
import { d as defineCustomElement$a } from './p-
|
|
10
|
-
import { d as defineCustomElement$9 } from './p-
|
|
5
|
+
import { d as defineCustomElement$e } from './p-DKkQMbfN.js';
|
|
6
|
+
import { d as defineCustomElement$d } from './p-Dm6TZsys.js';
|
|
7
|
+
import { d as defineCustomElement$c } from './p-D_XWdMC3.js';
|
|
8
|
+
import { d as defineCustomElement$b } from './p-D497dAd-.js';
|
|
9
|
+
import { d as defineCustomElement$a } from './p-fp1y_eAN.js';
|
|
10
|
+
import { d as defineCustomElement$9 } from './p-auUCvUOc.js';
|
|
11
11
|
import { d as defineCustomElement$8 } from './p-CSuU8frA.js';
|
|
12
|
-
import { d as defineCustomElement$7 } from './p-
|
|
13
|
-
import { d as defineCustomElement$6 } from './p-
|
|
14
|
-
import { d as defineCustomElement$5 } from './p-
|
|
15
|
-
import { d as defineCustomElement$4 } from './p-
|
|
16
|
-
import { d as defineCustomElement$2 } from './p-
|
|
17
|
-
import { d as defineCustomElement$1 } from './p-
|
|
12
|
+
import { d as defineCustomElement$7 } from './p-DGcug5rp.js';
|
|
13
|
+
import { d as defineCustomElement$6 } from './p-DKuxmP3T.js';
|
|
14
|
+
import { d as defineCustomElement$5 } from './p-XOXeNvvd.js';
|
|
15
|
+
import { d as defineCustomElement$4 } from './p-Bu6TjCs0.js';
|
|
16
|
+
import { d as defineCustomElement$2 } from './p-DIE74Wkf.js';
|
|
17
|
+
import { d as defineCustomElement$1 } from './p-DTzNzE9j.js';
|
|
18
18
|
|
|
19
19
|
const kritzelControlsCss = () => `:host{display:flex;flex-direction:column;user-select:none;max-width:100%;z-index:1}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:1;position:relative;max-width:100%;overflow:hidden}.kritzel-tools-scroll{display:flex;flex-direction:row;align-items:center;gap:var(--kritzel-controls-gap, 8px);overflow-x:auto;overflow-y:hidden;flex:1 1 auto;min-width:0;padding:4px;margin:-4px;scrollbar-width:none;-ms-overflow-style:none}.kritzel-tools-scroll::-webkit-scrollbar{display:none}.scroll-indicator-left,.scroll-indicator-right{position:absolute;top:0;bottom:0;width:32px;pointer-events:none;opacity:0;transition:opacity 0.2s ease-out;z-index:1}.scroll-indicator-left{left:0;background:linear-gradient(to right, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:var(--kritzel-controls-border-radius, 16px) 0 0 var(--kritzel-controls-border-radius, 16px)}.scroll-indicator-right{right:0;background:linear-gradient(to left, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:0 var(--kritzel-controls-border-radius, 16px) var(--kritzel-controls-border-radius, 16px) 0}.scroll-indicator-left.visible,.scroll-indicator-right.visible{opacity:1}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-control-separator{width:1px;height:24px;background-color:var(--kritzel-controls-separator-color, #ebebeb);margin:0 4px}.kritzel-control-split{position:relative;display:flex;align-items:center;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:var(--kritzel-controls-control-color, #000000)}.kritzel-control-split .kritzel-control-main{display:flex;justify-content:center;align-items:center;padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:inherit}.kritzel-control-split.selected .kritzel-control-main{border-radius:var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px)}.kritzel-control-split .kritzel-control-dropdown{display:flex;justify-content:center;align-items:center;align-self:stretch;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;color:inherit;width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;transition:width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out}.kritzel-control-split .kritzel-control-dropdown.visible{width:auto;padding:0 6px;opacity:1;pointer-events:auto}.kritzel-control-split .kritzel-control-main:focus,.kritzel-control-split .kritzel-control-main:hover,.kritzel-control-split .kritzel-control-dropdown:focus,.kritzel-control-split .kritzel-control-dropdown:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control-split .kritzel-control-main:active,.kritzel-control-split .kritzel-control-dropdown:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control-split.selected{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control-split.selected .kritzel-control-main:hover,.kritzel-control-split.selected .kritzel-control-dropdown:hover{background-color:rgba(255, 255, 255, 0.15)}.kritzel-submenu-content{display:flex;flex-direction:column;gap:var(--kritzel-submenu-gap, 4px);min-width:140px}.kritzel-submenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:8px;color:var(--kritzel-controls-control-color, #000000);font-size:14px;text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent}.kritzel-submenu-item:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-submenu-item.active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF);color:var(--kritzel-controls-control-selected-color, #ffffff)}.kritzel-submenu-item.active:hover{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;flex-shrink:0;width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:calc(-1 * var(--kritzel-controls-gap, 8px));transition:width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out}.kritzel-config-container.visible{width:40px;opacity:1;pointer-events:auto;margin-left:0;overflow:visible}.config-gradient-left{position:absolute;top:0;bottom:0;left:-32px;width:32px;background:linear-gradient(to right, transparent, var(--kritzel-controls-background-color, #ffffff));pointer-events:none;z-index:1;opacity:0;transition:opacity 0.2s ease-out}.config-gradient-left.visible{opacity:1}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{z-index:10001}`;
|
|
20
20
|
|
|
@@ -256,13 +256,13 @@ const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls e
|
|
|
256
256
|
// Separate tool controls from config control
|
|
257
257
|
const toolControls = this.internalControls.filter(c => c.type === 'tool' || c.type === 'separator');
|
|
258
258
|
const configControl = this.internalControls.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
|
|
259
|
-
return (h(Host, { key: '
|
|
259
|
+
return (h(Host, { key: 'b24e74fd097649b287ed531539f9870e307e7bd9', style: { display: this.visible ? '' : 'none' }, class: {
|
|
260
260
|
mobile: this.isTouchDevice,
|
|
261
|
-
} }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '
|
|
261
|
+
} }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: 'f6b0c86a4a56292692ad803f8bfa3ae17bbafb46', style: {
|
|
262
262
|
position: 'absolute',
|
|
263
263
|
bottom: '56px',
|
|
264
264
|
left: '12px',
|
|
265
|
-
}, undoState: this.undoState, terms: this.terms, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '
|
|
265
|
+
}, undoState: this.undoState, terms: this.terms, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: 'ed6cd48baea27dd26136c2325a1e3f5bb2c25583', class: "kritzel-controls" }, h("div", { key: '63396ad42750244a3f19973421396d29593a6ca9', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: 'fe26d6c155cf365d4d84d6bd10f3675cf224afd4', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
|
|
266
266
|
// Check if this control has sub-options (split-button)
|
|
267
267
|
if (control.subOptions?.length) {
|
|
268
268
|
const selectedSubOption = this.getSelectedSubOption(control);
|
|
@@ -292,10 +292,10 @@ const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls e
|
|
|
292
292
|
'kritzel-control': true,
|
|
293
293
|
'selected': this.activeControl?.name === control?.name,
|
|
294
294
|
}, 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 })));
|
|
295
|
-
})), h("div", { key: '
|
|
295
|
+
})), h("div", { key: 'ba5b229ad298a52cf3fff9898e52b1facb64fb26', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
|
|
296
296
|
'kritzel-config-container': true,
|
|
297
297
|
'visible': hasConfigUI,
|
|
298
|
-
}, key: configControl.name }, h("div", { key: '
|
|
298
|
+
}, key: configControl.name }, h("div", { key: '5d8f80c0f0c3a9068196196bbe1d1f7f3ad822d4', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: '986bde3449a3d0f524d11996851c9c1c23ea7732', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: '7338acd8fc97e684b583413d6cf8f22bcedbe5ca', 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: '08e7597220bed80377dc677a6340b037168b7fa3', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
|
|
299
299
|
if (el)
|
|
300
300
|
this.configTriggerRef = el;
|
|
301
301
|
}, onKeyDown: event => {
|
|
@@ -304,7 +304,7 @@ const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls e
|
|
|
304
304
|
}
|
|
305
305
|
}, style: {
|
|
306
306
|
cursor: 'pointer',
|
|
307
|
-
} }, this.displayValues && (h("div", { key: '
|
|
307
|
+
} }, this.displayValues && (h("div", { key: 'bec7b1ff440dbd8a3517b4bc0d757aede0877a8e', class: "color-container" }, h("kritzel-color", { key: '3d6af3817779445b6879b7e6626a738dcb3099ec', value: this.displayValues.color, theme: this.theme, size: 18, style: {
|
|
308
308
|
borderRadius: '50%',
|
|
309
309
|
border: 'none',
|
|
310
310
|
} })))))))));
|