@kritzel/editor 0.4.31

package/dist/collection/components/kritzel-master-detail/kritzel-master-detail.js

@@ -0,0 +1,201 @@
+import { Host, h } from "@stencil/core";
+export class KritzelMasterDetail {
+    host;
+    /** Array of menu items to display in the master (left) panel */
+    items = [];
+    /** ID of the currently selected item */
+    selectedItemId;
+    /** Emitted when an item is selected */
+    itemSelect;
+    focusedIndex = -1;
+    showMobileDetail = false;
+    tabRefs = [];
+    watchSelectedItemId(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.showMobileDetail = true;
+        }
+    }
+    componentWillRender() {
+        this.tabRefs = [];
+    }
+    handleItemClick = (item) => {
+        if (item.disabled)
+            return;
+        this.itemSelect.emit({ item });
+        this.showMobileDetail = true;
+    };
+    handleBackClick = () => {
+        this.showMobileDetail = false;
+    };
+    handleKeyDown = (event, item, index) => {
+        const enabledIndices = this.items
+            .map((it, idx) => (!it.disabled ? idx : -1))
+            .filter(idx => idx !== -1);
+        const currentEnabledIndex = enabledIndices.indexOf(index);
+        switch (event.key) {
+            case 'ArrowDown': {
+                event.preventDefault();
+                const nextIndex = enabledIndices[(currentEnabledIndex + 1) % enabledIndices.length];
+                this.focusTab(nextIndex);
+                break;
+            }
+            case 'ArrowUp': {
+                event.preventDefault();
+                const prevIndex = enabledIndices[(currentEnabledIndex - 1 + enabledIndices.length) % enabledIndices.length];
+                this.focusTab(prevIndex);
+                break;
+            }
+            case 'Home': {
+                event.preventDefault();
+                this.focusTab(enabledIndices[0]);
+                break;
+            }
+            case 'End': {
+                event.preventDefault();
+                this.focusTab(enabledIndices[enabledIndices.length - 1]);
+                break;
+            }
+            case 'Enter':
+            case ' ': {
+                event.preventDefault();
+                this.handleItemClick(item);
+                break;
+            }
+        }
+    };
+    focusTab(index) {
+        this.focusedIndex = index;
+        const tab = this.tabRefs[index];
+        if (tab) {
+            tab.focus();
+        }
+    }
+    handleFocus = (index) => {
+        this.focusedIndex = index;
+    };
+    handleBlur = () => {
+        this.focusedIndex = -1;
+    };
+    setTabRef = (el, index) => {
+        if (el) {
+            this.tabRefs[index] = el;
+        }
+    };
+    getTabIndex(item, _index) {
+        if (item.disabled)
+            return -1;
+        return 0;
+    }
+    render() {
+        const selectedItem = this.items.find(item => item.id === this.selectedItemId);
+        const panelId = 'master-detail-panel';
+        const selectedTabId = selectedItem ? `tab-${selectedItem.id}` : undefined;
+        return (h(Host, { key: 'ee642d3c2df215971244c6dc3807721324d1a08e' }, h("div", { key: 'a005e6614961033574062968df84c65bd496f0c3', class: {
+                'master-detail-container': true,
+                'is-mobile-detail-visible': this.showMobileDetail,
+            } }, h("nav", { key: 'abf9285d82c4d4c49041b4bfff1cf11e0aaee37d', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index) => (h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index), class: {
+                'menu-item': true,
+                'is-selected': item.id === this.selectedItemId,
+                'is-disabled': !!item.disabled,
+                'is-focused': index === this.focusedIndex,
+            }, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index), onFocus: () => this.handleFocus(index), onBlur: this.handleBlur }, item.icon && (h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), h("span", { class: "menu-item-label" }, item.label), h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "m9 18 6-6-6-6" }))))))), h("div", { key: '9f30af7be93c5982e78d789903ad54514e9f9bd9', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, h("button", { key: '0ce5b6f012fbbc84b4a950afbb0604380070f1bc', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, h("kritzel-icon", { key: '898bcfb6ccb1e07476599bc998a4b5d2e6de0cf2', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), h("slot", { key: '5ce1c6cdc8aa53fc3bd3c56c0ea5549d88a8f267' })))));
+    }
+    static get is() { return "kritzel-master-detail"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-master-detail.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-master-detail.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IKritzelMasterDetailItem[]",
+                    "resolved": "IKritzelMasterDetailItem[]",
+                    "references": {
+                        "IKritzelMasterDetailItem": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::IKritzelMasterDetailItem",
+                            "referenceLocation": "IKritzelMasterDetailItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of menu items to display in the master (left) panel"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "selectedItemId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of the currently selected item"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-item-id"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "focusedIndex": {},
+            "showMobileDetail": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "itemSelect",
+                "name": "itemSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an item is selected"
+                },
+                "complexType": {
+                    "original": "IKritzelMasterDetailSelectEvent",
+                    "resolved": "IKritzelMasterDetailSelectEvent",
+                    "references": {
+                        "IKritzelMasterDetailSelectEvent": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::IKritzelMasterDetailSelectEvent",
+                            "referenceLocation": "IKritzelMasterDetailSelectEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "selectedItemId",
+                "methodName": "watchSelectedItemId"
+            }];
+    }
+}

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

@@ -0,0 +1,34 @@
+:host {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--kritzel-menu-background-color, #ffffff);
+  width: var(--kritzel-menu-width, 200px);
+  padding: var(--kritzel-menu-padding, 8px);
+  border-radius: var(--kritzel-menu-border-radius, 12px);
+  box-shadow: var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
+  border: var(--kritzel-menu-border, 1px solid #ebebeb);
+  z-index: 2;
+  gap: var(--kritzel-menu-gap, 4px);
+  overflow-y: auto;
+  scrollbar-color: var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;
+  scrollbar-width: thin;
+  max-height: var(--kritzel-portal-max-height, 300px);
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  outline: none;
+  clip-path: inset(0 round var(--kritzel-menu-border-radius, 12px));
+}
+
+:host:focus-visible {
+  outline: auto;
+}
+
+.has-open-child-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 3;
+}

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

@@ -0,0 +1,297 @@
+import { Host, h } from "@stencil/core";
+export class KritzelMenu {
+    host;
+    items;
+    parent = null;
+    itemSelect;
+    itemSave;
+    itemCancel;
+    itemToggleChildMenu;
+    itemCloseChildMenu;
+    close;
+    selectedIndex = null;
+    async setScrollTop(scrollTop) {
+        this.host.scrollTop = scrollTop;
+        this.host.scrollTo({ top: scrollTop, behavior: 'auto' });
+    }
+    async setFocus() {
+        const firstItem = this.host.shadowRoot.querySelector('kritzel-menu-item');
+        if (firstItem) {
+            firstItem.focus();
+        }
+    }
+    get openChildMenuItem() {
+        return this.items.find(item => item.isChildMenuOpen);
+    }
+    get editingMenuItem() {
+        return this.items.find(item => item.isEditing);
+    }
+    onOverlayClick = (event) => {
+        event.stopPropagation();
+        this.itemCloseChildMenu.emit(this.openChildMenuItem);
+    };
+    handleItemSelect = (event) => {
+        event.stopPropagation();
+        this.itemSelect.emit(event.detail);
+    };
+    handleSave = (event) => {
+        event.stopPropagation();
+        this.itemSave.emit(event.detail);
+    };
+    handleCancel = (event) => {
+        event.stopPropagation();
+        this.itemCancel.emit(event.detail);
+    };
+    handleToggleChildMenu = (event) => {
+        event.stopPropagation();
+        this.itemToggleChildMenu.emit(event.detail);
+    };
+    handleCloseChildMenu = (event) => {
+        event.stopPropagation();
+        this.itemCloseChildMenu.emit(event.detail);
+    };
+    render() {
+        return (h(Host, { key: 'f9512c13eb4865b9953887d44f08b565eff5a247', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: 'c6dd6edce412716e9f2076670f5ec1eeb8f53dab', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (h("kritzel-menu-item", { key: item.id, "data-testid": `menu-item-${item.id}`, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
+    }
+    static get is() { return "kritzel-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-menu.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "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 {
+            "selectedIndex": {}
+        };
+    }
+    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"
+                        }
+                    }
+                }
+            }, {
+                "method": "close",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setScrollTop": {
+                "complexType": {
+                    "signature": "(scrollTop: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "scrollTop",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}