kritzel-stencil 0.0.128 → 0.0.129

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.
Files changed (42) hide show
  1. package/dist/cjs/kritzel-brush-style_22.cjs.entry.js +35 -17
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/stencil.cjs.js +1 -1
  4. package/dist/collection/components/shared/kritzel-menu/kritzel-menu.css +17 -4
  5. package/dist/collection/components/shared/kritzel-menu/kritzel-menu.js +29 -13
  6. package/dist/collection/components/shared/kritzel-menu/kritzel-menu.js.map +1 -1
  7. package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.css +4 -0
  8. package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.js +5 -2
  9. package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.js.map +1 -1
  10. package/dist/collection/components/ui/kritzel-controls/kritzel-controls.css +5 -8
  11. package/dist/collection/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.js +6 -3
  12. package/dist/collection/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.js.map +1 -1
  13. package/dist/components/kritzel-controls.js +1 -1
  14. package/dist/components/kritzel-editor.js +4 -4
  15. package/dist/components/kritzel-menu.js +1 -1
  16. package/dist/components/kritzel-split-button.js +1 -1
  17. package/dist/components/kritzel-workspace-manager.js +1 -1
  18. package/dist/components/{p-hSuNJiIq.js → p-C6OxvITm.js} +31 -15
  19. package/dist/components/p-C6OxvITm.js.map +1 -0
  20. package/dist/components/p-CJKA5zIE.js +10 -0
  21. package/dist/components/p-CJKA5zIE.js.map +1 -0
  22. package/dist/components/{p-DV4ERZv5.js → p-Dozs0Zfn.js} +8 -5
  23. package/dist/components/p-Dozs0Zfn.js.map +1 -0
  24. package/dist/components/{p-sQmW5NRu.js → p-aaxf-h5S.js} +10 -7
  25. package/dist/components/p-aaxf-h5S.js.map +1 -0
  26. package/dist/components/{p-BB22cVkU.js → p-yZFrTtMQ.js} +4 -9
  27. package/dist/components/p-yZFrTtMQ.js.map +1 -0
  28. package/dist/esm/kritzel-brush-style_22.entry.js +35 -17
  29. package/dist/esm/loader.js +1 -1
  30. package/dist/esm/stencil.js +1 -1
  31. package/dist/stencil/p-43202395.entry.js +2 -0
  32. package/dist/stencil/p-43202395.entry.js.map +1 -0
  33. package/dist/stencil/stencil.esm.js +1 -1
  34. package/dist/types/components/shared/kritzel-menu/kritzel-menu.d.ts +3 -1
  35. package/dist/types/components/shared/kritzel-split-button/kritzel-split-button.d.ts +2 -1
  36. package/package.json +1 -1
  37. package/dist/components/p-BB22cVkU.js.map +0 -1
  38. package/dist/components/p-DV4ERZv5.js.map +0 -1
  39. package/dist/components/p-hSuNJiIq.js.map +0 -1
  40. package/dist/components/p-sQmW5NRu.js.map +0 -1
  41. package/dist/stencil/p-4a0009e7.entry.js +0 -2
  42. package/dist/stencil/p-4a0009e7.entry.js.map +0 -1
package/dist/cjs/kritzel-brush-style_22.cjs.entry.js CHANGED
@@ -261,7 +261,7 @@ class KritzelDevicesHelper {
261
261
  }
262
262
  }
263
263
 
264
- const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select:none}.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:10000;position:relative}.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;outline:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.mobile) .kritzel-control:hover{background-color:unset}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}:host(.mobile) .kritzel-control:active{background-color:unset}.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-divider{width:var(--kritzel-controls-divider-width, 1px);height:var(--kritzel-controls-divider-height, 24px);background-color:var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;width:40px;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:pointer}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;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: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{position:fixed;bottom:66px;left:50%;transform:translateX(-50%);z-index:10001}";
264
+ const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select:none}: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:10000;position:relative}.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;outline:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;font-weight:bold}.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-divider{width:var(--kritzel-controls-divider-width, 1px);height:var(--kritzel-controls-divider-height, 24px);background-color:var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;width:40px;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:pointer}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;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: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{position:fixed;bottom:66px;left:50%;transform:translateX(-50%);z-index:10001}";
265
265
 
266
266
  const KritzelControls = class {
267
267
  constructor(hostRef) {
@@ -2588,7 +2588,7 @@ const KritzelIcon = class {
2588
2588
  };
2589
2589
  KritzelIcon.style = kritzelIconCss;
2590
2590
 
2591
- const kritzelMenuCss = ":host{display:flex;flex-direction:column;min-width:180px;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 12px);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:2;gap:var(--kritzel-menu-item-gap, 4px);overflow-y:auto;scrollbar-color:#ebebeb transparent;scrollbar-width:thin}button{all:unset;background:transparent;border:0;padding:0;margin:0;font:inherit;color:inherit;line-height:inherit;text-align:inherit;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;border-radius:0;-webkit-tap-highlight-color:transparent}button:focus{outline:none}:host(:focus){outline:none}.menu-item{display:flex;align-items:center;justify-content:space-between;padding:var(--kritzel-context-menu-item-padding, 8px);border-radius:var(--kritzel-context-menu-item-border-radius, 12px);cursor:pointer;font-family:sans-serif;font-size:var(--kritzel-context-menu-item-font-size, 14px);color:var(--kritzel-context-menu-item-color, #333333);gap:var(--kritzel-context-menu-item-gap, 12px)}.menu-item:focus,.menu-item:focus-within{outline:none;background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.menu-item:not(.disabled):not(.inactive):not(.active):hover{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item:not(.disabled):not(.inactive):not(.active):active{background-color:var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%))}.menu-item.active{color:var(--kritzel-controls-background-color, #ffffff);background-color:var(--kritzel-controls-control-selected-background-color, #007aff)}.menu-item.active kritzel-icon{filter:brightness(0) invert(1)}.menu-item.active:hover{background-color:var(--kritzel-controls-control-selected-hover-background-color, #0075f1)}.menu-item.disabled{color:var(--kritzel-context-menu-item-disabled-color, #aaaaaa);background-color:transparent;cursor:default}.menu-item.child-open{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%)) !important}.menu-item.active.menu-item.child-open{background-color:var(--kritzel-controls-control-selected-active-background-color, #0075f1) !important}.menu-item kritzel-icon{opacity:0.8;flex-shrink:0}.menu-item.disabled kritzel-icon{opacity:0.4}.menu-item.edit-mode input{background:transparent;border:none;outline:none;font-size:inherit;font-family:inherit;color:inherit;padding:0;width:100%;padding:2px 0px;border-bottom:1px solid var(--kritzel-context-menu-item-color, #333333)}.menu-item.active.edit-mode input{border-bottom:1px solid var(--kritzel-controls-background-color, #ffffff)}.menu-item.edit-mode input::selection{background-color:var(--kritzel-controls-control-selected-background-color, #007aff);border-radius:4px;color:var(--kritzel-controls-background-color, #ffffff)}.menu-item.active.edit-mode input::selection{background-color:var(--kritzel-menu-item-selected-input-background-color, #ffffff34)}.menu-item-button{background:transparent;border:none;outline:none;cursor:pointer;padding:4px;border-radius:8px;display:flex;align-items:center;justify-content:center}.menu-item-button:hover{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item-button:focus{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.edit-container,.view-container{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--kritzel-context-menu-item-gap, 4px)}";
2591
+ const kritzelMenuCss = ":host{display:flex;flex-direction:column;min-width:180px;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 12px);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:2;gap:var(--kritzel-menu-item-gap, 4px);overflow-y:auto;scrollbar-color:#ebebeb transparent;scrollbar-width:thin}:host(.mobile){--kritzel-menu-item-button-hover-background-color:transparent;--kritzel-menu-item-button-focus-background-color:transparent}button{all:unset;background:transparent;border:0;padding:0;margin:0;font:inherit;color:inherit;line-height:inherit;text-align:inherit;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;border-radius:0;-webkit-tap-highlight-color:transparent}button:focus{outline:none}:host(:focus){outline:none}.menu-item{display:flex;align-items:center;justify-content:space-between;padding:var(--kritzel-context-menu-item-padding, 8px);border-radius:var(--kritzel-context-menu-item-border-radius, 12px);cursor:pointer;font-family:sans-serif;font-size:var(--kritzel-context-menu-item-font-size, 14px);color:var(--kritzel-context-menu-item-color, #333333);gap:var(--kritzel-context-menu-item-gap, 12px)}.menu-item:focus,.menu-item:focus-within{outline:none;background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.menu-item:not(.disabled):not(.active):hover{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item:not(.disabled):not(.active):active{background-color:var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%))}.menu-item.active{color:var(--kritzel-controls-background-color, #ffffff);background-color:var(--kritzel-controls-control-selected-background-color, #007aff)}.menu-item.active kritzel-icon{filter:brightness(0) invert(1)}.menu-item.active:hover{background-color:var(--kritzel-controls-control-selected-hover-background-color, #0075f1)}.menu-item.disabled{color:var(--kritzel-context-menu-item-disabled-color, #aaaaaa);background-color:transparent;cursor:default}.menu-item.child-open{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%)) !important}.menu-item.active.menu-item.child-open{background-color:var(--kritzel-controls-control-selected-active-background-color, #0075f1) !important}.menu-item kritzel-icon{opacity:0.8;flex-shrink:0}.menu-item.disabled kritzel-icon{opacity:0.4}.menu-item.edit-mode input{background:transparent;border:none;outline:none;font-size:inherit;font-family:inherit;color:inherit;padding:0;width:100%;padding:2px 0px;border-bottom:1px solid var(--kritzel-context-menu-item-color, #333333)}.menu-item.active.edit-mode input{border-bottom:1px solid var(--kritzel-controls-background-color, #ffffff)}.menu-item.edit-mode input::selection{background-color:var(--kritzel-controls-control-selected-background-color, #007aff);border-radius:4px;color:var(--kritzel-controls-background-color, #ffffff)}.menu-item.active.edit-mode input::selection{background-color:var(--kritzel-menu-item-selected-input-background-color, #ffffff34)}.menu-item.edit-mode{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item.edit-mode.active{background-color:var(--kritzel-context-menu-item-hover-background-color, #007aff)}.menu-item-button{background:transparent;border:none;outline:none;cursor:pointer;padding:4px;border-radius:8px;display:flex;align-items:center;justify-content:center}.menu-item-button:hover{background-color:var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item-button:focus{background-color:var(--kritzel-menu-item-button-focus-background-color, hsl(0, 0%, 0%, 4.3%))}.edit-container,.view-container{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--kritzel-context-menu-item-gap, 4px)}";
2592
2592
 
2593
2593
  const KritzelMenu = class {
2594
2594
  constructor(hostRef) {
@@ -2600,7 +2600,9 @@ const KritzelMenu = class {
2600
2600
  this.activeItemIndex = null;
2601
2601
  this.editingIndex = null;
2602
2602
  this.openChildMenuIndex = null;
2603
+ this.isTouchDevice = KritzelDevicesHelper.isTouchDevice();
2603
2604
  this.childMenuAnchor = null;
2605
+ this.childMenu = null;
2604
2606
  this.cancelButton = null;
2605
2607
  this.saveButton = null;
2606
2608
  }
@@ -2612,13 +2614,15 @@ const KritzelMenu = class {
2612
2614
  }
2613
2615
  }
2614
2616
  handleWindowClick(event) {
2615
- if (this.openChildMenuIndex === null) {
2616
- return;
2617
- }
2618
- const target = event.target;
2619
- if (!this.host.contains(target)) {
2620
- this.openChildMenuIndex = null;
2621
- }
2617
+ requestAnimationFrame(() => {
2618
+ if (this.childMenu === null) {
2619
+ return;
2620
+ }
2621
+ const target = event.target;
2622
+ if (!target.contains(this.childMenu)) {
2623
+ this.openChildMenuIndex = null;
2624
+ }
2625
+ });
2622
2626
  }
2623
2627
  handleEscape(event) {
2624
2628
  var _a;
@@ -2658,20 +2662,24 @@ const KritzelMenu = class {
2658
2662
  (_a = item.select) === null || _a === void 0 ? void 0 : _a.call(item, item);
2659
2663
  }
2660
2664
  render() {
2661
- return (index.h(index.Host, { key: '6d98c1d40c1af36b7b36c45ddc96fb89ab6ebdca', tabIndex: 0 }, this.items.map((item, index$1) => (index.h("button", { tabIndex: 0, class: {
2665
+ return (index.h(index.Host, { key: 'b5321fa13564d847a9432eb26e777d33f4b8412c', tabIndex: 0, class: { mobile: this.isTouchDevice } }, this.items.map((item, index$1) => (index.h("button", { tabIndex: 0, class: {
2662
2666
  'menu-item': true,
2663
2667
  'disabled': item.disabled,
2664
2668
  'inactive': this.openChildMenuIndex !== null && this.openChildMenuIndex !== index$1,
2665
2669
  'child-open': this.openChildMenuIndex === index$1,
2666
2670
  'edit-mode': this.editingIndex === index$1,
2667
2671
  'active': this.activeItemIndex === index$1,
2672
+ }, style: {
2673
+ pointerEvents: (this.editingIndex !== null && this.editingIndex !== index$1) || (this.openChildMenuIndex !== null && this.openChildMenuIndex !== index$1) ? 'none' : 'auto',
2668
2674
  }, onClick: () => this.handleSelect(item) }, this.isViewMode(index$1) === true && (index.h("div", { class: "view-container" }, index.h("span", { class: "menu-item-label" }, item.label), index.h("div", null, item.children && item.children.length > 0 && (index.h("button", { class: "menu-item-button", tabIndex: 0, onClick: event => {
2669
2675
  if (this.editingIndex !== null)
2670
2676
  return;
2671
2677
  event.stopPropagation();
2672
2678
  this.childMenuAnchor = this.openChildMenuIndex === index$1 ? null : event.currentTarget;
2673
2679
  this.openChildMenuIndex = this.openChildMenuIndex === index$1 ? null : index$1;
2674
- } }, index.h("kritzel-icon", { name: "ellipsis-vertical", size: 16 }))), this.openChildMenuIndex === index$1 && (index.h("kritzel-portal", { anchor: this.childMenuAnchor, offsetY: 4, onClose: () => this.openChildMenuIndex = null }, index.h("kritzel-menu", { style: { minWidth: '100px' }, items: item.children, parentIndex: index$1, parent: item, onClose: () => {
2680
+ } }, index.h("kritzel-icon", { name: "ellipsis-vertical", size: 16 }))), this.openChildMenuIndex === index$1 && (index.h("kritzel-portal", { anchor: this.childMenuAnchor, offsetY: 4, onClose: () => (this.openChildMenuIndex = null) }, index.h("kritzel-menu", { ref: el => {
2681
+ this.childMenu = el;
2682
+ }, style: { minWidth: '100px' }, items: item.children, parentIndex: index$1, parent: item, onClose: () => {
2675
2683
  var _a;
2676
2684
  this.openChildMenuIndex = null;
2677
2685
  (_a = this.childMenuAnchor) === null || _a === void 0 ? void 0 : _a.focus();
@@ -2682,7 +2690,13 @@ const KritzelMenu = class {
2682
2690
  (_a = this.editInput) === null || _a === void 0 ? void 0 : _a.focus();
2683
2691
  (_b = this.editInput) === null || _b === void 0 ? void 0 : _b.select();
2684
2692
  });
2685
- }, type: "text", name: 'menu-item-' + index$1, value: item.label, onInput: e => (item.label = e.target.value) }), index.h("div", { style: { display: 'flex', gap: '8px' } }, index.h("button", { ref: el => (this.cancelButton = el), class: "menu-item-button", tabIndex: 0, onClick: () => { var _a; return (_a = item.cancel) === null || _a === void 0 ? void 0 : _a.call(item, item); } }, index.h("kritzel-icon", { name: "x", size: 16 })), index.h("button", { ref: el => (this.saveButton = el), class: "menu-item-button", tabIndex: 0, onClick: () => { var _a; return (_a = item.save) === null || _a === void 0 ? void 0 : _a.call(item, item); } }, index.h("kritzel-icon", { name: "check", size: 16 }))))))))));
2693
+ }, type: "text", name: 'menu-item-' + index$1, value: item.label, onInput: e => (item.label = e.target.value) }), index.h("div", { style: { display: 'flex', gap: '8px' } }, index.h("div", { class: "menu-item-button", ref: el => (this.cancelButton = el), tabIndex: 0, onClick: () => {
2694
+ var _a;
2695
+ (_a = item.cancel) === null || _a === void 0 ? void 0 : _a.call(item, item);
2696
+ } }, index.h("kritzel-icon", { name: "x", size: 16 })), index.h("div", { class: "menu-item-button", ref: el => (this.saveButton = el), tabIndex: 0, onClick: () => {
2697
+ var _a;
2698
+ (_a = item.save) === null || _a === void 0 ? void 0 : _a.call(item, item);
2699
+ } }, index.h("kritzel-icon", { name: "check", size: 16 }))))))))));
2686
2700
  }
2687
2701
  get host() { return index.getElement(this); }
2688
2702
  static get watchers() { return {
@@ -2828,7 +2842,7 @@ const KritzelPortal = class {
2828
2842
  }; }
2829
2843
  };
2830
2844
 
2831
- const kritzelSplitButtonCss = ":host{position:relative;display:flex;align-items:center;font-family:sans-serif;z-index:1;padding:var(--kritzel-controls-padding, 4px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 12px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);gap:var(--kritzel-context-menu-item-gap, 4px)}:host(:focus){outline:none}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;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-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 12px);font-size:var(--kritzel-context-menu-item-font-size, 14px)}.split-main-button:hover,.split-menu-button:hover{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button:focus,.split-menu-button:focus{outline:none;background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button{gap:var(--kritzel-context-menu-item-gap, 4px)}.split-menu-button{border-left:none;justify-content:center}.split-divider{width:var(--kritzel-controls-divider-width, 1px);height:24px;background-color:var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%))}";
2845
+ const kritzelSplitButtonCss = ":host{position:relative;display:flex;align-items:center;font-family:sans-serif;z-index:1;padding:var(--kritzel-controls-padding, 4px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 12px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);gap:var(--kritzel-context-menu-item-gap, 4px)}:host(:focus){outline:none}:host(.mobile){--kritzel-context-menu-item-hover-background-color:transparent}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;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-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 12px);font-size:var(--kritzel-context-menu-item-font-size, 14px)}.split-main-button:hover,.split-menu-button:hover{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button:focus,.split-menu-button:focus{outline:none;background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button{gap:var(--kritzel-context-menu-item-gap, 4px)}.split-menu-button{border-left:none;justify-content:center}.split-divider{width:var(--kritzel-controls-divider-width, 1px);height:24px;background-color:var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%))}";
2832
2846
 
2833
2847
  const KritzelSplitButton = class {
2834
2848
  constructor(hostRef) {
@@ -2843,6 +2857,7 @@ const KritzelSplitButton = class {
2843
2857
  this.activeItemIndex = null;
2844
2858
  this.editingIndex = null;
2845
2859
  this.isMenuOpen = false;
2860
+ this.isTouchDevice = KritzelDevicesHelper.isTouchDevice();
2846
2861
  this.handleDocumentClick = (event) => {
2847
2862
  const path = (event.composedPath && event.composedPath()) || [];
2848
2863
  const clickedInside = path.some(node => (node === null || node === void 0 ? void 0 : node.tagName) === 'KRITZEL-SPLIT-BUTTON' || (node === null || node === void 0 ? void 0 : node.tagName) === 'KRITZEL-MENU');
@@ -2882,7 +2897,7 @@ const KritzelSplitButton = class {
2882
2897
  this.host.focus();
2883
2898
  }
2884
2899
  render() {
2885
- return (index.h(index.Host, { key: 'cf133b2867dffe6b9d70259c7d44b86342411d38', tabIndex: 0 }, index.h("button", { key: '3044cd9cbe02dde919a276b9f1d8f1f24b8514e9', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.disabled }, this.buttonIcon && index.h("kritzel-icon", { key: '4ed314f7288df567bb35a909c4919cf353788dd2', name: this.buttonIcon }), this.buttonText && (index.h("span", { key: '68b2148200e4698468aae137d16a4b5f17764f9f' }, this.buttonText, " (", this.options.length, ")"))), index.h("div", { key: '5047a2aea1d31e80fba8f6350e4b64572198c87d', class: "split-divider" }), index.h("button", { key: 'd7b33d9c717553d7cff3c3d2fafe90ce9dce1e67', ref: el => (this.splitMenuButton = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.disabled }, index.h("kritzel-icon", { key: 'a3d485aee5e9843c2d07d367a0d5743bfc8f3d5c', name: this.dropdownIcon })), index.h("kritzel-portal", { key: '2bb8f5c58884e6c73d3d7025a8e6efce770ab039', anchor: this.host, offsetY: 4 }, this.isMenuOpen && (index.h("kritzel-menu", { key: '3f2bb51a43ec78ff8664d5f625afa21cf9ecfb8c', style: { maxHeight: '300px', width: '180px' }, items: this.options, activeItemIndex: this.activeItemIndex, editingIndex: this.editingIndex, onClose: () => this.closeMenu() })))));
2900
+ return (index.h(index.Host, { key: '1c0010ff46e3e6ac4753f332e683752f82bfb699', tabIndex: 0, class: { mobile: this.isTouchDevice } }, index.h("button", { key: 'b9e60cea56197641c15a58a3899d09a604a0ca20', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.disabled }, this.buttonIcon && index.h("kritzel-icon", { key: '3bd9a97e9511eb734665bd45e646f68d9cdcafc5', name: this.buttonIcon }), this.buttonText && (index.h("span", { key: 'f4a7bbd42bfdf8b748167b439a25ec7cc9f72ecf' }, this.buttonText, " (", this.options.length, ")"))), index.h("div", { key: 'bd6ce66c2debee87fa78904730a7fa09bcfe6514', class: "split-divider" }), index.h("button", { key: '5a7b918856ebfc77dd8aa290acb62f4fceaff2b3', ref: el => (this.splitMenuButton = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.disabled }, index.h("kritzel-icon", { key: '28ab4da8d1c4703f0df6551dd85791528b6af793', name: this.dropdownIcon })), index.h("kritzel-portal", { key: '72746c9acfcbdc56f2a053662d3f1e8596d71eb9', anchor: this.host, offsetY: 4 }, this.isMenuOpen && (index.h("kritzel-menu", { key: '98af211f4dbc21c4a5fd7223c9441a54451b38a2', style: { maxHeight: '300px', width: '180px' }, items: this.options, activeItemIndex: this.activeItemIndex, editingIndex: this.editingIndex, onClose: () => this.closeMenu() })))));
2886
2901
  }
2887
2902
  get host() { return index.getElement(this); }
2888
2903
  };
@@ -3034,13 +3049,15 @@ const KritzelWorkspaceManager = class {
3034
3049
  const updatedWorkspace = Object.assign(Object.assign({}, workspace), { name: item.label });
3035
3050
  if (this.newWorkspace) {
3036
3051
  await this.kritzelEngine.createWorkspace(updatedWorkspace);
3052
+ this.editingIndex = null;
3053
+ this.newWorkspace = null;
3037
3054
  this.selectWorkspace(updatedWorkspace);
3038
3055
  }
3039
3056
  else {
3040
3057
  await this.kritzelEngine.updateWorkspace(updatedWorkspace);
3058
+ this.editingIndex = null;
3059
+ this.newWorkspace = null;
3041
3060
  }
3042
- this.editingIndex = null;
3043
- this.newWorkspace = null;
3044
3061
  };
3045
3062
  this.handleRename = (index) => {
3046
3063
  this.editingIndex = index;
@@ -3076,6 +3093,7 @@ const KritzelWorkspaceManager = class {
3076
3093
  this.selectWorkspace(workspace);
3077
3094
  }
3078
3095
  selectWorkspace(workspace) {
3096
+ debugger;
3079
3097
  if (this.editingIndex !== null)
3080
3098
  return;
3081
3099
  this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id === workspace.id);
@@ -3102,7 +3120,7 @@ const KritzelWorkspaceManager = class {
3102
3120
  },
3103
3121
  ],
3104
3122
  }));
3105
- return (index.h(index.Host, { key: '1703451717d5583d6520edfbcdbe38a5b8f6840f' }, index.h("kritzel-split-button", { key: 'efd5d9b714ee72b23fd28c9b20ea6985957fe9b9', ref: el => (this.splitButtonRef = el), buttonIcon: "plus", options: workspaceSelectionOptions, activeItemIndex: this.activeItemIndex, editingIndex: this.editingIndex, onButtonClick: this.handleNewWorkspace, onMenuClosed: this.handleMenuClosed })));
3123
+ return (index.h(index.Host, { key: '4d060aee853a47ea451f707c6de345b6efcbd678' }, index.h("kritzel-split-button", { key: 'cb52b41b25c7ddc8584e96a2151efc6406166e99', ref: el => (this.splitButtonRef = el), buttonIcon: "plus", options: workspaceSelectionOptions, activeItemIndex: this.activeItemIndex, editingIndex: this.editingIndex, onButtonClick: this.handleNewWorkspace, onMenuClosed: this.handleMenuClosed })));
3106
3124
  }
3107
3125
  get host() { return index.getElement(this); }
3108
3126
  };
package/dist/cjs/loader.cjs.js CHANGED
@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
6
6
  const defineCustomElements = async (win, options) => {
7
7
  if (typeof window === 'undefined') return undefined;
8
8
  await appGlobals.globalScripts();
9
- return index.bootstrapLazy([["kritzel-brush-style_22.cjs",[[256,"kritzel-editor",{"scaleMax":[2,"scale-max"],"scaleMin":[2,"scale-min"],"controls":[16],"globalContextMenuItems":[16,"global-context-menu-items"],"objectContextMenuItems":[16,"object-context-menu-items"],"customSvgIcons":[16,"custom-svg-icons"],"isControlsVisible":[4,"is-controls-visible"],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"isEngineReady":[32],"isControlsReady":[32],"isWorkspaceManagerReady":[32],"workspaces":[32],"activeWorkspace":[32],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64]},[[0,"dblclick","handleTouchStart"]],{"isEngineReady":["onIsEngineReady"],"isControlsReady":["onIsControlsReady"]}],[257,"kritzel-controls",{"controls":[16],"activeControl":[1040,"active-control"],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"firstConfig":[32],"isTooltipVisible":[32],"isTouchDevice":[32],"closeTooltip":[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"]]],[257,"kritzel-workspace-manager",{"workspaces":[16],"activeWorkspace":[1040,"active-workspace"],"editingIndex":[32],"newWorkspace":[32]}],[257,"kritzel-engine",{"workspace":[16],"activeTool":[16,"active-tool"],"globalContextMenuItems":[16,"global-context-menu-items"],"objectContextMenuItems":[16,"object-context-menu-items"],"scaleMax":[1026,"scale-max"],"scaleMin":[1026,"scale-min"],"forceUpdate":[32],"registerTool":[64],"changeActiveTool":[64],"setFocus":[64],"disable":[64],"enable":[64],"delete":[64],"copy":[64],"paste":[64],"bringForward":[64],"sendBackward":[64],"bringToFront":[64],"sendToBack":[64],"undo":[64],"redo":[64],"hideContextMenu":[64],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"getCopiedObjects":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64]},[[0,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[9,"mousedown","updateFocus"],[0,"click","handleClick"]],{"workspace":["onWorkspaceChange"],"scaleMax":["validateScaleMax"],"scaleMin":["validateScaleMin"]}],[257,"kritzel-control-text-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"]}],[257,"kritzel-control-brush-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"],"palette":[32]},null,{"tool":["handleToolChange"]}],[257,"kritzel-split-button",{"buttonText":[1,"button-text"],"buttonIcon":[1,"button-icon"],"dropdownIcon":[1,"dropdown-icon"],"options":[16],"disabled":[4],"activeItemIndex":[2,"active-item-index"],"editingIndex":[2,"editing-index"],"isMenuOpen":[32],"openMenu":[64],"closeMenu":[64]}],[257,"kritzel-context-menu",{"items":[16],"objects":[16],"processedItems":[32]},null,{"items":["onItemsChanged"]}],[257,"kritzel-utility-panel"],[257,"kritzel-cursor-trail",{"store":[16],"cursorTrailPoints":[32],"isLeftButtonDown":[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[257,"kritzel-tooltip",{"isVisible":[4,"is-visible"],"anchorElement":[16,"anchor-element"],"arrowSize":[2,"arrow-size"],"offsetY":[2,"offset-y"],"positionX":[32],"arrowOffset":[32],"isMobileView":[32]},[[9,"resize","handleWindowResize"]]],[257,"kritzel-brush-style",{"type":[1],"brushOptions":[16,"brush-options"]}],[257,"kritzel-font-family",{"fontOptions":[16,"font-options"],"selectedFontFamily":[1025,"selected-font-family"]}],[257,"kritzel-font-size",{"sizes":[16],"selectedSize":[1026,"selected-size"],"fontFamily":[1,"font-family"]}],[257,"kritzel-stroke-size",{"sizes":[16],"selectedSize":[1026,"selected-size"]}],[257,"kritzel-menu",{"items":[16],"parentIndex":[2,"parent-index"],"parent":[16],"activeItemIndex":[2,"active-item-index"],"editingIndex":[2,"editing-index"],"openChildMenuIndex":[32]},[[8,"click","handleWindowClick"],[8,"keydown","handleEscape"],[8,"keydown","handleEnter"]],{"editingIndex":["onEditingIndexChange"]}],[257,"kritzel-color-palette",{"colors":[16],"selectedColor":[1025,"selected-color"],"isExpanded":[4,"is-expanded"],"isOpaque":[4,"is-opaque"]}],[257,"kritzel-font",{"fontFamily":[1,"font-family"],"size":[2],"color":[1]}],[257,"kritzel-portal",{"anchor":[16],"offsetX":[2,"offset-x"],"offsetY":[2,"offset-y"],"autoFocus":[4,"auto-focus"]},[[11,"resize","handleResize"]],{"anchor":["anchorChanged"]}],[257,"kritzel-color",{"value":[1],"size":[2]}],[257,"kritzel-dropdown",{"options":[16],"value":[1],"width":[1],"selectStyles":[8,"select-styles"],"internalValue":[32],"hasSuffixContent":[32],"hasPrefixContent":[32]},null,{"value":["externalValueChanged"],"options":["optionsChanged"]}],[257,"kritzel-icon",{"name":[1],"label":[1],"size":[2]}]]]], options);
9
+ return index.bootstrapLazy([["kritzel-brush-style_22.cjs",[[256,"kritzel-editor",{"scaleMax":[2,"scale-max"],"scaleMin":[2,"scale-min"],"controls":[16],"globalContextMenuItems":[16,"global-context-menu-items"],"objectContextMenuItems":[16,"object-context-menu-items"],"customSvgIcons":[16,"custom-svg-icons"],"isControlsVisible":[4,"is-controls-visible"],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"isEngineReady":[32],"isControlsReady":[32],"isWorkspaceManagerReady":[32],"workspaces":[32],"activeWorkspace":[32],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64]},[[0,"dblclick","handleTouchStart"]],{"isEngineReady":["onIsEngineReady"],"isControlsReady":["onIsControlsReady"]}],[257,"kritzel-controls",{"controls":[16],"activeControl":[1040,"active-control"],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"firstConfig":[32],"isTooltipVisible":[32],"isTouchDevice":[32],"closeTooltip":[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"]]],[257,"kritzel-workspace-manager",{"workspaces":[16],"activeWorkspace":[1040,"active-workspace"],"editingIndex":[32],"newWorkspace":[32]}],[257,"kritzel-engine",{"workspace":[16],"activeTool":[16,"active-tool"],"globalContextMenuItems":[16,"global-context-menu-items"],"objectContextMenuItems":[16,"object-context-menu-items"],"scaleMax":[1026,"scale-max"],"scaleMin":[1026,"scale-min"],"forceUpdate":[32],"registerTool":[64],"changeActiveTool":[64],"setFocus":[64],"disable":[64],"enable":[64],"delete":[64],"copy":[64],"paste":[64],"bringForward":[64],"sendBackward":[64],"bringToFront":[64],"sendToBack":[64],"undo":[64],"redo":[64],"hideContextMenu":[64],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"getCopiedObjects":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64]},[[0,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[9,"mousedown","updateFocus"],[0,"click","handleClick"]],{"workspace":["onWorkspaceChange"],"scaleMax":["validateScaleMax"],"scaleMin":["validateScaleMin"]}],[257,"kritzel-control-text-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"]}],[257,"kritzel-control-brush-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"],"palette":[32]},null,{"tool":["handleToolChange"]}],[257,"kritzel-split-button",{"buttonText":[1,"button-text"],"buttonIcon":[1,"button-icon"],"dropdownIcon":[1,"dropdown-icon"],"options":[16],"disabled":[4],"activeItemIndex":[2,"active-item-index"],"editingIndex":[2,"editing-index"],"isMenuOpen":[32],"isTouchDevice":[32],"openMenu":[64],"closeMenu":[64]}],[257,"kritzel-context-menu",{"items":[16],"objects":[16],"processedItems":[32]},null,{"items":["onItemsChanged"]}],[257,"kritzel-utility-panel"],[257,"kritzel-cursor-trail",{"store":[16],"cursorTrailPoints":[32],"isLeftButtonDown":[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[257,"kritzel-tooltip",{"isVisible":[4,"is-visible"],"anchorElement":[16,"anchor-element"],"arrowSize":[2,"arrow-size"],"offsetY":[2,"offset-y"],"positionX":[32],"arrowOffset":[32],"isMobileView":[32]},[[9,"resize","handleWindowResize"]]],[257,"kritzel-brush-style",{"type":[1],"brushOptions":[16,"brush-options"]}],[257,"kritzel-font-family",{"fontOptions":[16,"font-options"],"selectedFontFamily":[1025,"selected-font-family"]}],[257,"kritzel-font-size",{"sizes":[16],"selectedSize":[1026,"selected-size"],"fontFamily":[1,"font-family"]}],[257,"kritzel-stroke-size",{"sizes":[16],"selectedSize":[1026,"selected-size"]}],[257,"kritzel-menu",{"items":[16],"parentIndex":[2,"parent-index"],"parent":[16],"activeItemIndex":[2,"active-item-index"],"editingIndex":[2,"editing-index"],"openChildMenuIndex":[32],"isTouchDevice":[32]},[[9,"pointerup","handleWindowClick"],[8,"keydown","handleEscape"],[8,"keydown","handleEnter"]],{"editingIndex":["onEditingIndexChange"]}],[257,"kritzel-color-palette",{"colors":[16],"selectedColor":[1025,"selected-color"],"isExpanded":[4,"is-expanded"],"isOpaque":[4,"is-opaque"]}],[257,"kritzel-font",{"fontFamily":[1,"font-family"],"size":[2],"color":[1]}],[257,"kritzel-portal",{"anchor":[16],"offsetX":[2,"offset-x"],"offsetY":[2,"offset-y"],"autoFocus":[4,"auto-focus"]},[[11,"resize","handleResize"]],{"anchor":["anchorChanged"]}],[257,"kritzel-color",{"value":[1],"size":[2]}],[257,"kritzel-dropdown",{"options":[16],"value":[1],"width":[1],"selectStyles":[8,"select-styles"],"internalValue":[32],"hasSuffixContent":[32],"hasPrefixContent":[32]},null,{"value":["externalValueChanged"],"options":["optionsChanged"]}],[257,"kritzel-icon",{"name":[1],"label":[1],"size":[2]}]]]], options);
10
10
  };
11
11
 
12
12
  exports.setNonce = index.setNonce;
package/dist/cjs/stencil.cjs.js CHANGED
@@ -19,7 +19,7 @@ var patchBrowser = () => {
19
19
 
20
20
  patchBrowser().then(async (options) => {
21
21
  await appGlobals.globalScripts();
22
- return index.bootstrapLazy([["kritzel-brush-style_22.cjs",[[256,"kritzel-editor",{"scaleMax":[2,"scale-max"],"scaleMin":[2,"scale-min"],"controls":[16],"globalContextMenuItems":[16,"global-context-menu-items"],"objectContextMenuItems":[16,"object-context-menu-items"],"customSvgIcons":[16,"custom-svg-icons"],"isControlsVisible":[4,"is-controls-visible"],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"isEngineReady":[32],"isControlsReady":[32],"isWorkspaceManagerReady":[32],"workspaces":[32],"activeWorkspace":[32],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64]},[[0,"dblclick","handleTouchStart"]],{"isEngineReady":["onIsEngineReady"],"isControlsReady":["onIsControlsReady"]}],[257,"kritzel-controls",{"controls":[16],"activeControl":[1040,"active-control"],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"firstConfig":[32],"isTooltipVisible":[32],"isTouchDevice":[32],"closeTooltip":[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"]]],[257,"kritzel-workspace-manager",{"workspaces":[16],"activeWorkspace":[1040,"active-workspace"],"editingIndex":[32],"newWorkspace":[32]}],[257,"kritzel-engine",{"workspace":[16],"activeTool":[16,"active-tool"],"globalContextMenuItems":[16,"global-context-menu-items"],"objectContextMenuItems":[16,"object-context-menu-items"],"scaleMax":[1026,"scale-max"],"scaleMin":[1026,"scale-min"],"forceUpdate":[32],"registerTool":[64],"changeActiveTool":[64],"setFocus":[64],"disable":[64],"enable":[64],"delete":[64],"copy":[64],"paste":[64],"bringForward":[64],"sendBackward":[64],"bringToFront":[64],"sendToBack":[64],"undo":[64],"redo":[64],"hideContextMenu":[64],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"getCopiedObjects":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64]},[[0,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[9,"mousedown","updateFocus"],[0,"click","handleClick"]],{"workspace":["onWorkspaceChange"],"scaleMax":["validateScaleMax"],"scaleMin":["validateScaleMin"]}],[257,"kritzel-control-text-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"]}],[257,"kritzel-control-brush-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"],"palette":[32]},null,{"tool":["handleToolChange"]}],[257,"kritzel-split-button",{"buttonText":[1,"button-text"],"buttonIcon":[1,"button-icon"],"dropdownIcon":[1,"dropdown-icon"],"options":[16],"disabled":[4],"activeItemIndex":[2,"active-item-index"],"editingIndex":[2,"editing-index"],"isMenuOpen":[32],"openMenu":[64],"closeMenu":[64]}],[257,"kritzel-context-menu",{"items":[16],"objects":[16],"processedItems":[32]},null,{"items":["onItemsChanged"]}],[257,"kritzel-utility-panel"],[257,"kritzel-cursor-trail",{"store":[16],"cursorTrailPoints":[32],"isLeftButtonDown":[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[257,"kritzel-tooltip",{"isVisible":[4,"is-visible"],"anchorElement":[16,"anchor-element"],"arrowSize":[2,"arrow-size"],"offsetY":[2,"offset-y"],"positionX":[32],"arrowOffset":[32],"isMobileView":[32]},[[9,"resize","handleWindowResize"]]],[257,"kritzel-brush-style",{"type":[1],"brushOptions":[16,"brush-options"]}],[257,"kritzel-font-family",{"fontOptions":[16,"font-options"],"selectedFontFamily":[1025,"selected-font-family"]}],[257,"kritzel-font-size",{"sizes":[16],"selectedSize":[1026,"selected-size"],"fontFamily":[1,"font-family"]}],[257,"kritzel-stroke-size",{"sizes":[16],"selectedSize":[1026,"selected-size"]}],[257,"kritzel-menu",{"items":[16],"parentIndex":[2,"parent-index"],"parent":[16],"activeItemIndex":[2,"active-item-index"],"editingIndex":[2,"editing-index"],"openChildMenuIndex":[32]},[[8,"click","handleWindowClick"],[8,"keydown","handleEscape"],[8,"keydown","handleEnter"]],{"editingIndex":["onEditingIndexChange"]}],[257,"kritzel-color-palette",{"colors":[16],"selectedColor":[1025,"selected-color"],"isExpanded":[4,"is-expanded"],"isOpaque":[4,"is-opaque"]}],[257,"kritzel-font",{"fontFamily":[1,"font-family"],"size":[2],"color":[1]}],[257,"kritzel-portal",{"anchor":[16],"offsetX":[2,"offset-x"],"offsetY":[2,"offset-y"],"autoFocus":[4,"auto-focus"]},[[11,"resize","handleResize"]],{"anchor":["anchorChanged"]}],[257,"kritzel-color",{"value":[1],"size":[2]}],[257,"kritzel-dropdown",{"options":[16],"value":[1],"width":[1],"selectStyles":[8,"select-styles"],"internalValue":[32],"hasSuffixContent":[32],"hasPrefixContent":[32]},null,{"value":["externalValueChanged"],"options":["optionsChanged"]}],[257,"kritzel-icon",{"name":[1],"label":[1],"size":[2]}]]]], options);
22
+ return index.bootstrapLazy([["kritzel-brush-style_22.cjs",[[256,"kritzel-editor",{"scaleMax":[2,"scale-max"],"scaleMin":[2,"scale-min"],"controls":[16],"globalContextMenuItems":[16,"global-context-menu-items"],"objectContextMenuItems":[16,"object-context-menu-items"],"customSvgIcons":[16,"custom-svg-icons"],"isControlsVisible":[4,"is-controls-visible"],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"isEngineReady":[32],"isControlsReady":[32],"isWorkspaceManagerReady":[32],"workspaces":[32],"activeWorkspace":[32],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64]},[[0,"dblclick","handleTouchStart"]],{"isEngineReady":["onIsEngineReady"],"isControlsReady":["onIsControlsReady"]}],[257,"kritzel-controls",{"controls":[16],"activeControl":[1040,"active-control"],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"firstConfig":[32],"isTooltipVisible":[32],"isTouchDevice":[32],"closeTooltip":[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"]]],[257,"kritzel-workspace-manager",{"workspaces":[16],"activeWorkspace":[1040,"active-workspace"],"editingIndex":[32],"newWorkspace":[32]}],[257,"kritzel-engine",{"workspace":[16],"activeTool":[16,"active-tool"],"globalContextMenuItems":[16,"global-context-menu-items"],"objectContextMenuItems":[16,"object-context-menu-items"],"scaleMax":[1026,"scale-max"],"scaleMin":[1026,"scale-min"],"forceUpdate":[32],"registerTool":[64],"changeActiveTool":[64],"setFocus":[64],"disable":[64],"enable":[64],"delete":[64],"copy":[64],"paste":[64],"bringForward":[64],"sendBackward":[64],"bringToFront":[64],"sendToBack":[64],"undo":[64],"redo":[64],"hideContextMenu":[64],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"getCopiedObjects":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64]},[[0,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[9,"mousedown","updateFocus"],[0,"click","handleClick"]],{"workspace":["onWorkspaceChange"],"scaleMax":["validateScaleMax"],"scaleMin":["validateScaleMin"]}],[257,"kritzel-control-text-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"]}],[257,"kritzel-control-brush-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"],"palette":[32]},null,{"tool":["handleToolChange"]}],[257,"kritzel-split-button",{"buttonText":[1,"button-text"],"buttonIcon":[1,"button-icon"],"dropdownIcon":[1,"dropdown-icon"],"options":[16],"disabled":[4],"activeItemIndex":[2,"active-item-index"],"editingIndex":[2,"editing-index"],"isMenuOpen":[32],"isTouchDevice":[32],"openMenu":[64],"closeMenu":[64]}],[257,"kritzel-context-menu",{"items":[16],"objects":[16],"processedItems":[32]},null,{"items":["onItemsChanged"]}],[257,"kritzel-utility-panel"],[257,"kritzel-cursor-trail",{"store":[16],"cursorTrailPoints":[32],"isLeftButtonDown":[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[257,"kritzel-tooltip",{"isVisible":[4,"is-visible"],"anchorElement":[16,"anchor-element"],"arrowSize":[2,"arrow-size"],"offsetY":[2,"offset-y"],"positionX":[32],"arrowOffset":[32],"isMobileView":[32]},[[9,"resize","handleWindowResize"]]],[257,"kritzel-brush-style",{"type":[1],"brushOptions":[16,"brush-options"]}],[257,"kritzel-font-family",{"fontOptions":[16,"font-options"],"selectedFontFamily":[1025,"selected-font-family"]}],[257,"kritzel-font-size",{"sizes":[16],"selectedSize":[1026,"selected-size"],"fontFamily":[1,"font-family"]}],[257,"kritzel-stroke-size",{"sizes":[16],"selectedSize":[1026,"selected-size"]}],[257,"kritzel-menu",{"items":[16],"parentIndex":[2,"parent-index"],"parent":[16],"activeItemIndex":[2,"active-item-index"],"editingIndex":[2,"editing-index"],"openChildMenuIndex":[32],"isTouchDevice":[32]},[[9,"pointerup","handleWindowClick"],[8,"keydown","handleEscape"],[8,"keydown","handleEnter"]],{"editingIndex":["onEditingIndexChange"]}],[257,"kritzel-color-palette",{"colors":[16],"selectedColor":[1025,"selected-color"],"isExpanded":[4,"is-expanded"],"isOpaque":[4,"is-opaque"]}],[257,"kritzel-font",{"fontFamily":[1,"font-family"],"size":[2],"color":[1]}],[257,"kritzel-portal",{"anchor":[16],"offsetX":[2,"offset-x"],"offsetY":[2,"offset-y"],"autoFocus":[4,"auto-focus"]},[[11,"resize","handleResize"]],{"anchor":["anchorChanged"]}],[257,"kritzel-color",{"value":[1],"size":[2]}],[257,"kritzel-dropdown",{"options":[16],"value":[1],"width":[1],"selectStyles":[8,"select-styles"],"internalValue":[32],"hasSuffixContent":[32],"hasPrefixContent":[32]},null,{"value":["externalValueChanged"],"options":["optionsChanged"]}],[257,"kritzel-icon",{"name":[1],"label":[1],"size":[2]}]]]], options);
23
23
  });
24
24
 
25
25
  exports.setNonce = index.setNonce;
package/dist/collection/components/shared/kritzel-menu/kritzel-menu.css CHANGED
@@ -14,6 +14,11 @@
14
14
  scrollbar-width: thin;
15
15
  }
16
16
 
17
+ :host(.mobile){
18
+ --kritzel-menu-item-button-hover-background-color: transparent;
19
+ --kritzel-menu-item-button-focus-background-color: transparent;
20
+ }
21
+
17
22
  button {
18
23
  all: unset;
19
24
  background: transparent;
@@ -65,11 +70,11 @@ button:focus {
65
70
  text-overflow: ellipsis;
66
71
  }
67
72
 
68
- .menu-item:not(.disabled):not(.inactive):not(.active):hover {
73
+ .menu-item:not(.disabled):not(.active):hover {
69
74
  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%));
70
75
  }
71
76
 
72
- .menu-item:not(.disabled):not(.inactive):not(.active):active {
77
+ .menu-item:not(.disabled):not(.active):active {
73
78
  background-color: var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%));
74
79
  }
75
80
 
@@ -136,6 +141,14 @@ button:focus {
136
141
  background-color: var(--kritzel-menu-item-selected-input-background-color, #ffffff34);
137
142
  }
138
143
 
144
+ .menu-item.edit-mode {
145
+ background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%));
146
+ }
147
+
148
+ .menu-item.edit-mode.active {
149
+ background-color: var(--kritzel-context-menu-item-hover-background-color, #007aff);
150
+ }
151
+
139
152
  .menu-item-button {
140
153
  background: transparent;
141
154
  border: none;
@@ -149,11 +162,11 @@ button:focus {
149
162
  }
150
163
 
151
164
  .menu-item-button:hover {
152
- background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%));
165
+ background-color: var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
153
166
  }
154
167
 
155
168
  .menu-item-button:focus {
156
- background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%));
169
+ background-color: var(--kritzel-menu-item-button-focus-background-color, hsl(0, 0%, 0%, 4.3%));
157
170
  }
158
171
 
159
172
  .edit-container,
package/dist/collection/components/shared/kritzel-menu/kritzel-menu.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { h, Host } from "@stencil/core";
2
+ import { KritzelDevicesHelper } from "../../../helpers/devices.helper";
2
3
  export class KritzelMenu {
3
4
  constructor() {
4
5
  this.items = [];
@@ -7,7 +8,9 @@ export class KritzelMenu {
7
8
  this.activeItemIndex = null;
8
9
  this.editingIndex = null;
9
10
  this.openChildMenuIndex = null;
11
+ this.isTouchDevice = KritzelDevicesHelper.isTouchDevice();
10
12
  this.childMenuAnchor = null;
13
+ this.childMenu = null;
11
14
  this.cancelButton = null;
12
15
  this.saveButton = null;
13
16
  }
@@ -19,13 +22,15 @@ export class KritzelMenu {
19
22
  }
20
23
  }
21
24
  handleWindowClick(event) {
22
- if (this.openChildMenuIndex === null) {
23
- return;
24
- }
25
- const target = event.target;
26
- if (!this.host.contains(target)) {
27
- this.openChildMenuIndex = null;
28
- }
25
+ requestAnimationFrame(() => {
26
+ if (this.childMenu === null) {
27
+ return;
28
+ }
29
+ const target = event.target;
30
+ if (!target.contains(this.childMenu)) {
31
+ this.openChildMenuIndex = null;
32
+ }
33
+ });
29
34
  }
30
35
  handleEscape(event) {
31
36
  var _a;
@@ -65,20 +70,24 @@ export class KritzelMenu {
65
70
  (_a = item.select) === null || _a === void 0 ? void 0 : _a.call(item, item);
66
71
  }
67
72
  render() {
68
- return (h(Host, { key: '6d98c1d40c1af36b7b36c45ddc96fb89ab6ebdca', tabIndex: 0 }, this.items.map((item, index) => (h("button", { tabIndex: 0, class: {
73
+ return (h(Host, { key: 'b5321fa13564d847a9432eb26e777d33f4b8412c', tabIndex: 0, class: { mobile: this.isTouchDevice } }, this.items.map((item, index) => (h("button", { tabIndex: 0, class: {
69
74
  'menu-item': true,
70
75
  'disabled': item.disabled,
71
76
  'inactive': this.openChildMenuIndex !== null && this.openChildMenuIndex !== index,
72
77
  'child-open': this.openChildMenuIndex === index,
73
78
  'edit-mode': this.editingIndex === index,
74
79
  'active': this.activeItemIndex === index,
80
+ }, style: {
81
+ pointerEvents: (this.editingIndex !== null && this.editingIndex !== index) || (this.openChildMenuIndex !== null && this.openChildMenuIndex !== index) ? 'none' : 'auto',
75
82
  }, onClick: () => this.handleSelect(item) }, this.isViewMode(index) === true && (h("div", { class: "view-container" }, h("span", { class: "menu-item-label" }, item.label), h("div", null, item.children && item.children.length > 0 && (h("button", { class: "menu-item-button", tabIndex: 0, onClick: event => {
76
83
  if (this.editingIndex !== null)
77
84
  return;
78
85
  event.stopPropagation();
79
86
  this.childMenuAnchor = this.openChildMenuIndex === index ? null : event.currentTarget;
80
87
  this.openChildMenuIndex = this.openChildMenuIndex === index ? null : index;
81
- } }, h("kritzel-icon", { name: "ellipsis-vertical", size: 16 }))), this.openChildMenuIndex === index && (h("kritzel-portal", { anchor: this.childMenuAnchor, offsetY: 4, onClose: () => this.openChildMenuIndex = null }, h("kritzel-menu", { style: { minWidth: '100px' }, items: item.children, parentIndex: index, parent: item, onClose: () => {
88
+ } }, h("kritzel-icon", { name: "ellipsis-vertical", size: 16 }))), this.openChildMenuIndex === index && (h("kritzel-portal", { anchor: this.childMenuAnchor, offsetY: 4, onClose: () => (this.openChildMenuIndex = null) }, h("kritzel-menu", { ref: el => {
89
+ this.childMenu = el;
90
+ }, style: { minWidth: '100px' }, items: item.children, parentIndex: index, parent: item, onClose: () => {
82
91
  var _a;
83
92
  this.openChildMenuIndex = null;
84
93
  (_a = this.childMenuAnchor) === null || _a === void 0 ? void 0 : _a.focus();
@@ -89,7 +98,13 @@ export class KritzelMenu {
89
98
  (_a = this.editInput) === null || _a === void 0 ? void 0 : _a.focus();
90
99
  (_b = this.editInput) === null || _b === void 0 ? void 0 : _b.select();
91
100
  });
92
- }, type: "text", name: 'menu-item-' + index, value: item.label, onInput: e => (item.label = e.target.value) }), h("div", { style: { display: 'flex', gap: '8px' } }, h("button", { ref: el => (this.cancelButton = el), class: "menu-item-button", tabIndex: 0, onClick: () => { var _a; return (_a = item.cancel) === null || _a === void 0 ? void 0 : _a.call(item, item); } }, h("kritzel-icon", { name: "x", size: 16 })), h("button", { ref: el => (this.saveButton = el), class: "menu-item-button", tabIndex: 0, onClick: () => { var _a; return (_a = item.save) === null || _a === void 0 ? void 0 : _a.call(item, item); } }, h("kritzel-icon", { name: "check", size: 16 }))))))))));
101
+ }, type: "text", name: 'menu-item-' + index, value: item.label, onInput: e => (item.label = e.target.value) }), h("div", { style: { display: 'flex', gap: '8px' } }, h("div", { class: "menu-item-button", ref: el => (this.cancelButton = el), tabIndex: 0, onClick: () => {
102
+ var _a;
103
+ (_a = item.cancel) === null || _a === void 0 ? void 0 : _a.call(item, item);
104
+ } }, h("kritzel-icon", { name: "x", size: 16 })), h("div", { class: "menu-item-button", ref: el => (this.saveButton = el), tabIndex: 0, onClick: () => {
105
+ var _a;
106
+ (_a = item.save) === null || _a === void 0 ? void 0 : _a.call(item, item);
107
+ } }, h("kritzel-icon", { name: "check", size: 16 }))))))))));
93
108
  }
94
109
  static get is() { return "kritzel-menu"; }
95
110
  static get encapsulation() { return "shadow"; }
@@ -219,7 +234,8 @@ export class KritzelMenu {
219
234
  }
220
235
  static get states() {
221
236
  return {
222
- "openChildMenuIndex": {}
237
+ "openChildMenuIndex": {},
238
+ "isTouchDevice": {}
223
239
  };
224
240
  }
225
241
  static get events() {
@@ -249,11 +265,11 @@ export class KritzelMenu {
249
265
  }
250
266
  static get listeners() {
251
267
  return [{
252
- "name": "click",
268
+ "name": "pointerup",
253
269
  "method": "handleWindowClick",
254
270
  "target": "window",
255
271
  "capture": false,
256
- "passive": false
272
+ "passive": true
257
273
  }, {
258
274
  "name": "keydown",
259
275
  "method": "handleEscape",
package/dist/collection/components/shared/kritzel-menu/kritzel-menu.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"kritzel-menu.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-menu/kritzel-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Host, State, Listen, Element, Watch, Event, EventEmitter } from '@stencil/core';\r\nimport { KritzelMenuItem } from '../../../interfaces/menu-item.interface';\r\n\r\n\r\n@Component({\r\n tag: 'kritzel-menu',\r\n styleUrl: 'kritzel-menu.css',\r\n shadow: true,\r\n})\r\nexport class KritzelMenu {\r\n @Element()\r\n host: HTMLElement;\r\n\r\n @Prop()\r\n items: KritzelMenuItem[] = [];\r\n\r\n @Prop()\r\n parentIndex: number | null = null;\r\n\r\n @Prop()\r\n parent: KritzelMenuItem = null;\r\n\r\n @Prop()\r\n activeItemIndex: number | null = null;\r\n\r\n @Prop()\r\n editingIndex: number | null = null;\r\n\r\n @Event()\r\n close: EventEmitter<void>;\r\n\r\n @State()\r\n openChildMenuIndex: number | null = null;\r\n\r\n private editInput?: HTMLInputElement;\r\n\r\n private childMenuAnchor?: HTMLElement = null;\r\n\r\n private cancelButton?: HTMLElement = null;\r\n\r\n private saveButton?: HTMLElement = null;\r\n\r\n @Watch('editingIndex')\r\n onEditingIndexChange(newValue: number | null) {\r\n if (newValue === null) {\r\n this.openChildMenuIndex = null;\r\n this.editInput = undefined;\r\n return;\r\n }\r\n }\r\n\r\n @Listen('click', { target: 'window' })\r\n handleWindowClick(event: MouseEvent) {\r\n if (this.openChildMenuIndex === null) {\r\n return;\r\n }\r\n\r\n const target = event.target as HTMLElement;\r\n if (!this.host.contains(target)) {\r\n this.openChildMenuIndex = null;\r\n }\r\n }\r\n\r\n @Listen('keydown', { target: 'window' })\r\n handleEscape(event: KeyboardEvent) {\r\n if (event.key === 'Escape') {\r\n if (this.openChildMenuIndex !== null) {\r\n return;\r\n }\r\n\r\n if (this.editingIndex !== null) {\r\n this.cancelButton?.click();\r\n return;\r\n }\r\n\r\n this.close.emit();\r\n }\r\n }\r\n\r\n @Listen('keydown', { target: 'window' })\r\n handleEnter(event: KeyboardEvent) {\r\n if (event.key === 'Enter') {\r\n if (this.editingIndex !== null) {\r\n this.saveButton?.click();\r\n return;\r\n }\r\n }\r\n }\r\n\r\n componentDidLoad() {\r\n requestAnimationFrame(() => {\r\n this.host.focus();\r\n });\r\n }\r\n\r\n isViewMode(index: number): boolean {\r\n return this.editingIndex !== index;\r\n }\r\n\r\n handleSelect(item: KritzelMenuItem) {\r\n if (item.disabled || this.editingIndex !== null || this.openChildMenuIndex !== null) {\r\n return;\r\n }\r\n item.select?.(item);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host tabIndex={0}>\r\n {this.items.map((item, index) => (\r\n <button\r\n tabIndex={0}\r\n class={{\r\n 'menu-item': true,\r\n 'disabled': item.disabled,\r\n 'inactive': this.openChildMenuIndex !== null && this.openChildMenuIndex !== index,\r\n 'child-open': this.openChildMenuIndex === index,\r\n 'edit-mode': this.editingIndex === index,\r\n 'active': this.activeItemIndex === index,\r\n }}\r\n onClick={() => this.handleSelect(item)}\r\n >\r\n {this.isViewMode(index) === true && (\r\n <div class=\"view-container\">\r\n <span class=\"menu-item-label\">{item.label}</span>\r\n\r\n <div>\r\n {item.children && item.children.length > 0 && (\r\n <button\r\n class=\"menu-item-button\"\r\n tabIndex={0}\r\n onClick={event => {\r\n if (this.editingIndex !== null) return;\r\n event.stopPropagation();\r\n this.childMenuAnchor = this.openChildMenuIndex === index ? null : (event.currentTarget as HTMLElement);\r\n this.openChildMenuIndex = this.openChildMenuIndex === index ? null : index;\r\n }}\r\n >\r\n <kritzel-icon name=\"ellipsis-vertical\" size={16}></kritzel-icon>\r\n </button>\r\n )}\r\n\r\n {this.openChildMenuIndex === index && (\r\n <kritzel-portal\r\n anchor={this.childMenuAnchor}\r\n offsetY={4}\r\n onClose={() => this.openChildMenuIndex = null}\r\n >\r\n <kritzel-menu\r\n style={{ minWidth: '100px' }}\r\n items={item.children}\r\n parentIndex={index}\r\n parent={item}\r\n onClose={() => {\r\n this.openChildMenuIndex = null;\r\n this.childMenuAnchor?.focus();\r\n }}\r\n ></kritzel-menu>\r\n </kritzel-portal>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n\r\n {this.isViewMode(index) === false && (\r\n <div class=\"edit-container\">\r\n <input\r\n tabIndex={0}\r\n ref={el => {\r\n this.editInput = el as HTMLInputElement;\r\n requestAnimationFrame(() => {\r\n this.editInput?.focus();\r\n this.editInput?.select();\r\n });\r\n }}\r\n type=\"text\"\r\n name={'menu-item-' + index}\r\n value={item.label}\r\n onInput={e => (item.label = (e.target as HTMLInputElement).value)}\r\n />\r\n\r\n <div style={{ display: 'flex', gap: '8px' }}>\r\n <button ref={el => (this.cancelButton = el)} class=\"menu-item-button\" tabIndex={0} onClick={() => item.cancel?.(item)}>\r\n <kritzel-icon name=\"x\" size={16}></kritzel-icon>\r\n </button>\r\n\r\n <button ref={el => (this.saveButton = el)} class=\"menu-item-button\" tabIndex={0} onClick={() => item.save?.(item)}>\r\n <kritzel-icon name=\"check\" size={16}></kritzel-icon>\r\n </button>\r\n </div>\r\n </div>\r\n )}\r\n </button>\r\n ))}\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
1
+ {"version":3,"file":"kritzel-menu.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-menu/kritzel-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Host, State, Listen, Element, Watch, Event, EventEmitter } from '@stencil/core';\r\nimport { KritzelMenuItem } from '../../../interfaces/menu-item.interface';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\n\r\n@Component({\r\n tag: 'kritzel-menu',\r\n styleUrl: 'kritzel-menu.css',\r\n shadow: true,\r\n})\r\nexport class KritzelMenu {\r\n @Element()\r\n host: HTMLElement;\r\n\r\n @Prop()\r\n items: KritzelMenuItem[] = [];\r\n\r\n @Prop()\r\n parentIndex: number | null = null;\r\n\r\n @Prop()\r\n parent: KritzelMenuItem = null;\r\n\r\n @Prop()\r\n activeItemIndex: number | null = null;\r\n\r\n @Prop()\r\n editingIndex: number | null = null;\r\n\r\n @Event()\r\n close: EventEmitter<void>;\r\n\r\n @State()\r\n openChildMenuIndex: number | null = null;\r\n\r\n @State()\r\n isTouchDevice: boolean = KritzelDevicesHelper.isTouchDevice();\r\n\r\n private editInput?: HTMLInputElement;\r\n\r\n private childMenuAnchor?: HTMLElement = null;\r\n\r\n private childMenu?: HTMLKritzelMenuElement = null;\r\n\r\n private cancelButton?: HTMLElement = null;\r\n\r\n private saveButton?: HTMLElement = null;\r\n\r\n @Watch('editingIndex')\r\n onEditingIndexChange(newValue: number | null) {\r\n if (newValue === null) {\r\n this.openChildMenuIndex = null;\r\n this.editInput = undefined;\r\n return;\r\n }\r\n }\r\n\r\n @Listen('pointerup', { target: 'window' })\r\n handleWindowClick(event: PointerEvent) {\r\n requestAnimationFrame(() => {\r\n if (this.childMenu === null) {\r\n return;\r\n }\r\n\r\n const target = event.target as HTMLElement;\r\n\r\n if (!target.contains(this.childMenu)) {\r\n this.openChildMenuIndex = null;\r\n }\r\n });\r\n }\r\n\r\n @Listen('keydown', { target: 'window' })\r\n handleEscape(event: KeyboardEvent) {\r\n if (event.key === 'Escape') {\r\n if (this.openChildMenuIndex !== null) {\r\n return;\r\n }\r\n\r\n if (this.editingIndex !== null) {\r\n this.cancelButton?.click();\r\n return;\r\n }\r\n\r\n this.close.emit();\r\n }\r\n }\r\n\r\n @Listen('keydown', { target: 'window' })\r\n handleEnter(event: KeyboardEvent) {\r\n if (event.key === 'Enter') {\r\n if (this.editingIndex !== null) {\r\n this.saveButton?.click();\r\n return;\r\n }\r\n }\r\n }\r\n\r\n componentDidLoad() {\r\n requestAnimationFrame(() => {\r\n this.host.focus();\r\n });\r\n }\r\n\r\n isViewMode(index: number): boolean {\r\n return this.editingIndex !== index;\r\n }\r\n\r\n handleSelect(item: KritzelMenuItem) {\r\n if (item.disabled || this.editingIndex !== null || this.openChildMenuIndex !== null) {\r\n return;\r\n }\r\n item.select?.(item);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host tabIndex={0} class={{ mobile: this.isTouchDevice }}>\r\n {this.items.map((item, index) => (\r\n <button\r\n tabIndex={0}\r\n class={{\r\n 'menu-item': true,\r\n 'disabled': item.disabled,\r\n 'inactive': this.openChildMenuIndex !== null && this.openChildMenuIndex !== index,\r\n 'child-open': this.openChildMenuIndex === index,\r\n 'edit-mode': this.editingIndex === index,\r\n 'active': this.activeItemIndex === index,\r\n }}\r\n style={{\r\n pointerEvents:\r\n (this.editingIndex !== null && this.editingIndex !== index) || (this.openChildMenuIndex !== null && this.openChildMenuIndex !== index) ? 'none' : 'auto',\r\n }}\r\n onClick={() => this.handleSelect(item)}\r\n >\r\n {this.isViewMode(index) === true && (\r\n <div class=\"view-container\">\r\n <span class=\"menu-item-label\">{item.label}</span>\r\n\r\n <div>\r\n {item.children && item.children.length > 0 && (\r\n <button\r\n class=\"menu-item-button\"\r\n tabIndex={0}\r\n onClick={event => {\r\n if (this.editingIndex !== null) return;\r\n event.stopPropagation();\r\n this.childMenuAnchor = this.openChildMenuIndex === index ? null : (event.currentTarget as HTMLElement);\r\n this.openChildMenuIndex = this.openChildMenuIndex === index ? null : index;\r\n }}\r\n >\r\n <kritzel-icon name=\"ellipsis-vertical\" size={16}></kritzel-icon>\r\n </button>\r\n )}\r\n\r\n {this.openChildMenuIndex === index && (\r\n <kritzel-portal anchor={this.childMenuAnchor} offsetY={4} onClose={() => (this.openChildMenuIndex = null)}>\r\n <kritzel-menu\r\n ref={el => {\r\n this.childMenu = el;\r\n }}\r\n style={{ minWidth: '100px' }}\r\n items={item.children}\r\n parentIndex={index}\r\n parent={item}\r\n onClose={() => {\r\n this.openChildMenuIndex = null;\r\n this.childMenuAnchor?.focus();\r\n }}\r\n ></kritzel-menu>\r\n </kritzel-portal>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n\r\n {this.isViewMode(index) === false && (\r\n <div class=\"edit-container\">\r\n <input\r\n tabIndex={0}\r\n ref={el => {\r\n this.editInput = el as HTMLInputElement;\r\n requestAnimationFrame(() => {\r\n this.editInput?.focus();\r\n this.editInput?.select();\r\n });\r\n }}\r\n type=\"text\"\r\n name={'menu-item-' + index}\r\n value={item.label}\r\n onInput={e => (item.label = (e.target as HTMLInputElement).value)}\r\n />\r\n\r\n <div style={{ display: 'flex', gap: '8px' }}>\r\n <div\r\n class=\"menu-item-button\"\r\n ref={el => (this.cancelButton = el)}\r\n tabIndex={0}\r\n onClick={() => {\r\n item.cancel?.(item);\r\n }}\r\n >\r\n <kritzel-icon name=\"x\" size={16}></kritzel-icon>\r\n </div>\r\n\r\n <div\r\n class=\"menu-item-button\"\r\n ref={el => (this.saveButton = el)}\r\n tabIndex={0}\r\n onClick={() => {\r\n item.save?.(item);\r\n }}\r\n >\r\n <kritzel-icon name=\"check\" size={16}></kritzel-icon>\r\n </div>\r\n </div>\r\n </div>\r\n )}\r\n </button>\r\n ))}\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.css CHANGED
@@ -16,6 +16,10 @@
16
16
  outline: none;
17
17
  }
18
18
 
19
+ :host(.mobile){
20
+ --kritzel-context-menu-item-hover-background-color: transparent;
21
+ }
22
+
19
23
  button {
20
24
  border: none;
21
25
  background-color: transparent;
package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { h, Host } from "@stencil/core";
2
+ import { KritzelDevicesHelper } from "../../../helpers/devices.helper";
2
3
  export class KritzelSplitButton {
3
4
  constructor() {
4
5
  this.dropdownIcon = 'chevron-down';
@@ -7,6 +8,7 @@ export class KritzelSplitButton {
7
8
  this.activeItemIndex = null;
8
9
  this.editingIndex = null;
9
10
  this.isMenuOpen = false;
11
+ this.isTouchDevice = KritzelDevicesHelper.isTouchDevice();
10
12
  this.handleDocumentClick = (event) => {
11
13
  const path = (event.composedPath && event.composedPath()) || [];
12
14
  const clickedInside = path.some(node => (node === null || node === void 0 ? void 0 : node.tagName) === 'KRITZEL-SPLIT-BUTTON' || (node === null || node === void 0 ? void 0 : node.tagName) === 'KRITZEL-MENU');
@@ -46,7 +48,7 @@ export class KritzelSplitButton {
46
48
  this.host.focus();
47
49
  }
48
50
  render() {
49
- return (h(Host, { key: 'cf133b2867dffe6b9d70259c7d44b86342411d38', tabIndex: 0 }, h("button", { key: '3044cd9cbe02dde919a276b9f1d8f1f24b8514e9', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.disabled }, this.buttonIcon && h("kritzel-icon", { key: '4ed314f7288df567bb35a909c4919cf353788dd2', name: this.buttonIcon }), this.buttonText && (h("span", { key: '68b2148200e4698468aae137d16a4b5f17764f9f' }, this.buttonText, " (", this.options.length, ")"))), h("div", { key: '5047a2aea1d31e80fba8f6350e4b64572198c87d', class: "split-divider" }), h("button", { key: 'd7b33d9c717553d7cff3c3d2fafe90ce9dce1e67', ref: el => (this.splitMenuButton = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.disabled }, h("kritzel-icon", { key: 'a3d485aee5e9843c2d07d367a0d5743bfc8f3d5c', name: this.dropdownIcon })), h("kritzel-portal", { key: '2bb8f5c58884e6c73d3d7025a8e6efce770ab039', anchor: this.host, offsetY: 4 }, this.isMenuOpen && (h("kritzel-menu", { key: '3f2bb51a43ec78ff8664d5f625afa21cf9ecfb8c', style: { maxHeight: '300px', width: '180px' }, items: this.options, activeItemIndex: this.activeItemIndex, editingIndex: this.editingIndex, onClose: () => this.closeMenu() })))));
51
+ return (h(Host, { key: '1c0010ff46e3e6ac4753f332e683752f82bfb699', tabIndex: 0, class: { mobile: this.isTouchDevice } }, h("button", { key: 'b9e60cea56197641c15a58a3899d09a604a0ca20', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.disabled }, this.buttonIcon && h("kritzel-icon", { key: '3bd9a97e9511eb734665bd45e646f68d9cdcafc5', name: this.buttonIcon }), this.buttonText && (h("span", { key: 'f4a7bbd42bfdf8b748167b439a25ec7cc9f72ecf' }, this.buttonText, " (", this.options.length, ")"))), h("div", { key: 'bd6ce66c2debee87fa78904730a7fa09bcfe6514', class: "split-divider" }), h("button", { key: '5a7b918856ebfc77dd8aa290acb62f4fceaff2b3', ref: el => (this.splitMenuButton = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.disabled }, h("kritzel-icon", { key: '28ab4da8d1c4703f0df6551dd85791528b6af793', name: this.dropdownIcon })), h("kritzel-portal", { key: '72746c9acfcbdc56f2a053662d3f1e8596d71eb9', anchor: this.host, offsetY: 4 }, this.isMenuOpen && (h("kritzel-menu", { key: '98af211f4dbc21c4a5fd7223c9441a54451b38a2', style: { maxHeight: '300px', width: '180px' }, items: this.options, activeItemIndex: this.activeItemIndex, editingIndex: this.editingIndex, onClose: () => this.closeMenu() })))));
50
52
  }
51
53
  static get is() { return "kritzel-split-button"; }
52
54
  static get encapsulation() { return "shadow"; }
@@ -209,7 +211,8 @@ export class KritzelSplitButton {
209
211
  }
210
212
  static get states() {
211
213
  return {
212
- "isMenuOpen": {}
214
+ "isMenuOpen": {},
215
+ "isTouchDevice": {}
213
216
  };
214
217
  }
215
218
  static get events() {
package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"kritzel-split-button.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-split-button/kritzel-split-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Event, EventEmitter, Host, Element, Method } from '@stencil/core';\r\nimport { KritzelMenuItem } from '../../../interfaces/menu-item.interface';\r\n\r\n@Component({\r\n tag: 'kritzel-split-button',\r\n styleUrl: 'kritzel-split-button.css',\r\n shadow: true,\r\n})\r\nexport class KritzelSplitButton {\r\n @Prop()\r\n buttonText: string;\r\n\r\n @Prop()\r\n buttonIcon: string;\r\n\r\n @Prop()\r\n dropdownIcon = 'chevron-down';\r\n\r\n @Prop()\r\n options: KritzelMenuItem[] = [];\r\n\r\n @Prop()\r\n disabled = false;\r\n\r\n @Prop()\r\n activeItemIndex: number | null = null;\r\n\r\n @Prop()\r\n editingIndex: number | null = null;\r\n\r\n @State()\r\n isMenuOpen = false;\r\n\r\n @Event()\r\n buttonClick: EventEmitter<void>;\r\n\r\n @Event()\r\n optionSelect: EventEmitter<KritzelMenuItem>;\r\n\r\n @Event()\r\n menuOpened: EventEmitter<void>;\r\n\r\n @Event()\r\n menuClosed: EventEmitter<void>;\r\n\r\n @Element()\r\n host!: HTMLElement;\r\n\r\n splitMenuButton: HTMLButtonElement;\r\n\r\n @Method()\r\n async openMenu() {\r\n if (this.disabled || this.isMenuOpen) return;\r\n\r\n this.isMenuOpen = true;\r\n this.menuOpened.emit();\r\n document.addEventListener('click', this.handleDocumentClick, { once: true });\r\n }\r\n\r\n @Method()\r\n async closeMenu() {\r\n if (this.disabled || !this.isMenuOpen) return;\r\n\r\n this.isMenuOpen = false;\r\n this.menuClosed.emit();\r\n\r\n this.host.focus();\r\n }\r\n\r\n private handleDocumentClick = (event: MouseEvent) => {\r\n const path = (event.composedPath && event.composedPath()) || [];\r\n const clickedInside = path.some(node => (node as HTMLElement)?.tagName === 'KRITZEL-SPLIT-BUTTON' || (node as HTMLElement)?.tagName === 'KRITZEL-MENU');\r\n\r\n if (!clickedInside) {\r\n this.closeMenu();\r\n } else if (this.isMenuOpen) {\r\n document.addEventListener('click', this.handleDocumentClick, { once: true });\r\n }\r\n };\r\n\r\n private toggleMenu = () => {\r\n if (this.isMenuOpen) {\r\n this.closeMenu();\r\n } else {\r\n this.openMenu();\r\n }\r\n };\r\n\r\n private handleButtonClick = () => {\r\n if (!this.disabled) {\r\n this.buttonClick.emit();\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n <Host tabIndex={0}>\r\n <button class=\"split-main-button\" tabIndex={0} onClick={this.handleButtonClick} disabled={this.disabled}>\r\n {this.buttonIcon && <kritzel-icon name={this.buttonIcon}></kritzel-icon>}\r\n {this.buttonText && (\r\n <span>\r\n {this.buttonText} ({this.options.length})\r\n </span>\r\n )}\r\n </button>\r\n\r\n <div class=\"split-divider\"></div>\r\n\r\n <button ref={el => (this.splitMenuButton = el)} class=\"split-menu-button\" tabIndex={0} onClick={this.toggleMenu} disabled={this.disabled}>\r\n <kritzel-icon name={this.dropdownIcon}></kritzel-icon>\r\n </button>\r\n\r\n <kritzel-portal anchor={this.host} offsetY={4}>\r\n {this.isMenuOpen && (\r\n <kritzel-menu\r\n style={{ maxHeight: '300px', width: '180px' }}\r\n items={this.options}\r\n activeItemIndex={this.activeItemIndex}\r\n editingIndex={this.editingIndex}\r\n onClose={() => this.closeMenu()}\r\n ></kritzel-menu>\r\n )}\r\n </kritzel-portal>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
1
+ {"version":3,"file":"kritzel-split-button.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-split-button/kritzel-split-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Event, EventEmitter, Host, Element, Method } from '@stencil/core';\r\nimport { KritzelMenuItem } from '../../../interfaces/menu-item.interface';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\n\r\n@Component({\r\n tag: 'kritzel-split-button',\r\n styleUrl: 'kritzel-split-button.css',\r\n shadow: true,\r\n})\r\nexport class KritzelSplitButton {\r\n @Prop()\r\n buttonText: string;\r\n\r\n @Prop()\r\n buttonIcon: string;\r\n\r\n @Prop()\r\n dropdownIcon = 'chevron-down';\r\n\r\n @Prop()\r\n options: KritzelMenuItem[] = [];\r\n\r\n @Prop()\r\n disabled = false;\r\n\r\n @Prop()\r\n activeItemIndex: number | null = null;\r\n\r\n @Prop()\r\n editingIndex: number | null = null;\r\n\r\n @Event()\r\n buttonClick: EventEmitter<void>;\r\n\r\n @Event()\r\n optionSelect: EventEmitter<KritzelMenuItem>;\r\n\r\n @Event()\r\n menuOpened: EventEmitter<void>;\r\n\r\n @Event()\r\n menuClosed: EventEmitter<void>;\r\n\r\n @Element()\r\n host!: HTMLElement;\r\n\r\n @State()\r\n isMenuOpen = false;\r\n\r\n @State()\r\n isTouchDevice: boolean = KritzelDevicesHelper.isTouchDevice();\r\n\r\n splitMenuButton: HTMLButtonElement;\r\n\r\n @Method()\r\n async openMenu() {\r\n if (this.disabled || this.isMenuOpen) return;\r\n\r\n this.isMenuOpen = true;\r\n this.menuOpened.emit();\r\n document.addEventListener('click', this.handleDocumentClick, { once: true });\r\n }\r\n\r\n @Method()\r\n async closeMenu() {\r\n if (this.disabled || !this.isMenuOpen) return;\r\n\r\n this.isMenuOpen = false;\r\n this.menuClosed.emit();\r\n\r\n this.host.focus();\r\n }\r\n\r\n private handleDocumentClick = (event: MouseEvent) => {\r\n const path = (event.composedPath && event.composedPath()) || [];\r\n const clickedInside = path.some(node => (node as HTMLElement)?.tagName === 'KRITZEL-SPLIT-BUTTON' || (node as HTMLElement)?.tagName === 'KRITZEL-MENU');\r\n\r\n if (!clickedInside) {\r\n this.closeMenu();\r\n } else if (this.isMenuOpen) {\r\n document.addEventListener('click', this.handleDocumentClick, { once: true });\r\n }\r\n };\r\n\r\n private toggleMenu = () => {\r\n if (this.isMenuOpen) {\r\n this.closeMenu();\r\n } else {\r\n this.openMenu();\r\n }\r\n };\r\n\r\n private handleButtonClick = () => {\r\n if (!this.disabled) {\r\n this.buttonClick.emit();\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n <Host tabIndex={0} class={{ mobile: this.isTouchDevice }}>\r\n <button class=\"split-main-button\" tabIndex={0} onClick={this.handleButtonClick} disabled={this.disabled}>\r\n {this.buttonIcon && <kritzel-icon name={this.buttonIcon}></kritzel-icon>}\r\n {this.buttonText && (\r\n <span>\r\n {this.buttonText} ({this.options.length})\r\n </span>\r\n )}\r\n </button>\r\n\r\n <div class=\"split-divider\"></div>\r\n\r\n <button ref={el => (this.splitMenuButton = el)} class=\"split-menu-button\" tabIndex={0} onClick={this.toggleMenu} disabled={this.disabled}>\r\n <kritzel-icon name={this.dropdownIcon}></kritzel-icon>\r\n </button>\r\n\r\n <kritzel-portal anchor={this.host} offsetY={4}>\r\n {this.isMenuOpen && (\r\n <kritzel-menu\r\n style={{ maxHeight: '300px', width: '180px' }}\r\n items={this.options}\r\n activeItemIndex={this.activeItemIndex}\r\n editingIndex={this.editingIndex}\r\n onClose={() => this.closeMenu()}\r\n ></kritzel-menu>\r\n )}\r\n </kritzel-portal>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}