@kritzel/editor 0.4.31

package/dist/collection/components/kritzel-menu-item/kritzel-menu-item.css

@@ -0,0 +1,167 @@
+: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;
+}

package/dist/collection/components/kritzel-menu-item/kritzel-menu-item.js

@@ -0,0 +1,298 @@
+import { Host, h } from "@stencil/core";
+import { KritzelDevicesHelper } from "@kritzel/engine";
+export class KritzelMenuItem {
+    host;
+    item;
+    onItemChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.isDirty = false;
+        }
+    }
+    parent = null;
+    itemSelect;
+    itemSave;
+    itemCancel;
+    itemToggleChildMenu;
+    itemCloseChildMenu;
+    isDirty = false;
+    inputRef;
+    focusInput() {
+        if (this.item.isEditing && !this.isDirty) {
+            requestAnimationFrame(() => {
+                if (this.inputRef) {
+                    this.inputRef.focus();
+                    if (KritzelDevicesHelper.isIOS()) {
+                        const length = this.inputRef.value.length;
+                        this.inputRef.setSelectionRange(length, length);
+                    }
+                    else {
+                        this.inputRef.select();
+                    }
+                }
+            });
+        }
+    }
+    componentDidLoad() {
+        this.setDeviceSpecificStyles();
+        this.focusInput();
+    }
+    componentDidUpdate() {
+        this.focusInput();
+    }
+    setDeviceSpecificStyles = () => {
+        const isTouchDevice = KritzelDevicesHelper.isTouchDevice();
+        if (isTouchDevice) {
+            this.host.style.setProperty('--kritzel-menu-item-overlay-background-color', 'transparent');
+            this.host.style.setProperty('--kritzel-menu-item-button-hover-background-color', 'transparent');
+        }
+    };
+    handleItemSelect = (event) => {
+        event.stopPropagation();
+        this.itemSelect.emit({ item: this.item, parent: this.parent });
+    };
+    handleInputChange = (event) => {
+        event.stopPropagation();
+        const target = event.target;
+        this.item.label = target.value;
+        this.isDirty = true;
+    };
+    handleSave = (event) => {
+        event.stopPropagation();
+        this.host.focus();
+        this.itemSave.emit(this.item);
+    };
+    handleCancel = (event) => {
+        event.stopPropagation();
+        this.host.focus();
+        this.itemCancel.emit(this.item);
+    };
+    handleMenuToggle = (event) => {
+        event.stopPropagation();
+        this.itemToggleChildMenu.emit({ item: this.item, childMenuAnchor: event.target });
+    };
+    handleMenuClose = () => {
+        this.itemCloseChildMenu.emit(this.item);
+    };
+    renderViewMode() {
+        const childMenuTag = ['kritzel', 'menu'].join('-');
+        return [
+            h("div", { class: "menu-item-content left" }, this.item.icon && (h("span", { title: this.item.iconTooltip }, h("kritzel-icon", { name: this.item.icon, size: 16, style: this.item.color ? { '--kritzel-icon-color': this.item.color } : undefined }))), h("div", { style: this.item.color ? { color: this.item.color } : undefined }, this.item.label)),
+            h("div", { class: "menu-item-content right" }, this.item.children &&
+                this.item.children.length > 0 && [
+                h("button", { id: "child-menu-toggle", class: "action-button", onClick: this.handleMenuToggle, disabled: this.item.isDisabled }, h("kritzel-icon", { name: "ellipsis-vertical", size: 16 })),
+                h("kritzel-portal", { anchor: this.item.childMenuAnchor, offsetY: 4, onClose: this.handleMenuClose }, h(childMenuTag, {
+                    items: this.item.children,
+                    parent: this.item,
+                    onItemSelect: event => this.itemSelect.emit(event.detail),
+                    onItemSave: event => this.itemSave.emit(event.detail),
+                    onItemCancel: event => this.itemCancel.emit(event.detail),
+                    onClose: this.handleMenuClose,
+                })),
+            ]),
+        ];
+    }
+    renderEditMode() {
+        return [
+            h("div", { class: "menu-item-content left" }, h("input", { ref: el => (this.inputRef = el), type: "text", class: "edit-input", value: this.item.label, onInput: this.handleInputChange })),
+            h("div", { class: "menu-item-content right" }, h("div", { tabIndex: 0, class: "action-button", onClick: this.handleCancel }, h("kritzel-icon", { name: "x", size: 16 })), h("div", { tabIndex: !this.isDirty && !this.item.isNewItem ? -1 : 0, class: { 'action-button': true, 'disabled': !this.isDirty && !this.item.isNewItem }, onClick: this.handleSave }, h("kritzel-icon", { name: "check", size: 16 }))),
+        ];
+    }
+    render() {
+        return (h(Host, { key: '780f02a30f188baae7027e8268bbed85bd6924a3', tabIndex: this.item.isDisabled ? -1 : 0, class: {
+                'selected': this.item.isSelected,
+                'editing': this.item.isEditing,
+                'disabled': this.item.isDisabled,
+                'child-open': this.item.isChildMenuOpen,
+            }, onClick: this.handleItemSelect }, h("div", { key: 'c3ecefff3a6883890938d84337ea91681585e8d9', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
+    }
+    static get is() { return "kritzel-menu-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-menu-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-menu-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "item": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IKritzelMenuItem",
+                    "resolved": "IKritzelMenuItem<any>",
+                    "references": {
+                        "IKritzelMenuItem": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::IKritzelMenuItem",
+                            "referenceLocation": "IKritzelMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "parent": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IKritzelMenuItem",
+                    "resolved": "IKritzelMenuItem<any>",
+                    "references": {
+                        "IKritzelMenuItem": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::IKritzelMenuItem",
+                            "referenceLocation": "IKritzelMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isDirty": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "itemSelect",
+                "name": "itemSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "IKritzelMenuItemSelectEvent",
+                    "resolved": "IKritzelMenuItemSelectEvent",
+                    "references": {
+                        "IKritzelMenuItemSelectEvent": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::IKritzelMenuItemSelectEvent",
+                            "referenceLocation": "IKritzelMenuItemSelectEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "itemSave",
+                "name": "itemSave",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "IKritzelMenuItem",
+                    "resolved": "IKritzelMenuItem<any>",
+                    "references": {
+                        "IKritzelMenuItem": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::IKritzelMenuItem",
+                            "referenceLocation": "IKritzelMenuItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "itemCancel",
+                "name": "itemCancel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "IKritzelMenuItem",
+                    "resolved": "IKritzelMenuItem<any>",
+                    "references": {
+                        "IKritzelMenuItem": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::IKritzelMenuItem",
+                            "referenceLocation": "IKritzelMenuItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "itemToggleChildMenu",
+                "name": "itemToggleChildMenu",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "IKritzelMenuItemToggleChildMenuEvent",
+                    "resolved": "IKritzelMenuItemToggleChildMenuEvent",
+                    "references": {
+                        "IKritzelMenuItemToggleChildMenuEvent": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::IKritzelMenuItemToggleChildMenuEvent",
+                            "referenceLocation": "IKritzelMenuItemToggleChildMenuEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "itemCloseChildMenu",
+                "name": "itemCloseChildMenu",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "IKritzelMenuItem",
+                    "resolved": "IKritzelMenuItem<any>",
+                    "references": {
+                        "IKritzelMenuItem": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::IKritzelMenuItem",
+                            "referenceLocation": "IKritzelMenuItem"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "item",
+                "methodName": "onItemChange"
+            }];
+    }
+}

package/dist/collection/components/kritzel-more-menu/kritzel-more-menu.css

@@ -0,0 +1,58 @@
+: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%));
+}