@kritzel/editor 0.4.31

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

@@ -0,0 +1,588 @@
+import { h, Host } from "@stencil/core";
+import { KritzelDevicesHelper } from "@kritzel/engine";
+import { KritzelToolConfigHelper } from "@kritzel/engine";
+import { KritzelColorHelper } from "@kritzel/engine";
+export class KritzelToolbar {
+    host;
+    visible = true;
+    toolbarItems = [];
+    activeControl = null;
+    isUtilityPanelVisible = true;
+    undoState = null;
+    theme = 'light';
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
+    isToolbarReady;
+    firstConfig = null;
+    isTouchDevice = KritzelDevicesHelper.isTouchDevice();
+    selectedSubOptions = new Map();
+    canScrollLeft = false;
+    canScrollRight = false;
+    needsScrolling = false;
+    displayValues = null;
+    internalToolbar = [];
+    resolvedDisabled = new Map();
+    handleActiveToolChangeBound = this.handleActiveToolChange.bind(this);
+    handleSelectionChangeBound = this.handleSelectionChange.bind(this);
+    handleKeyDown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.closeTooltip();
+            this.kritzelEngine?.enable();
+        }
+    }
+    async handleActiveToolChange(event) {
+        this.activeControl = this.internalToolbar.find(control => control.tool === event.detail) || null;
+        if (this.activeControl?.tool) {
+            this.updateDisplayValues(this.activeControl.tool);
+        }
+        this.closeTooltip();
+    }
+    handleSelectionChange() {
+        const tool = this.activeControl?.tool;
+        if (tool && typeof tool !== 'function' && tool.toolType === 'selection') {
+            this.updateDisplayValues(tool);
+        }
+    }
+    async onToolbarItemsChange() {
+        if (this.kritzelEngine) {
+            await this.initializeTools();
+        }
+    }
+    onThemeChange() {
+        if (this.activeControl?.tool) {
+            this.updateDisplayValues(this.activeControl.tool);
+        }
+    }
+    async closeTooltip() {
+        document.dispatchEvent(new CustomEvent('kritzelTooltipCloseAll'));
+    }
+    kritzelEngine = null;
+    toolsScrollRef = null;
+    configTriggerRef = null;
+    get activeToolAsTextTool() {
+        return this.activeControl?.tool;
+    }
+    get activeToolAsBrushTool() {
+        return this.activeControl?.tool;
+    }
+    get activeToolAsLineTool() {
+        return this.activeControl?.tool;
+    }
+    get activeToolAsShapeTool() {
+        return this.activeControl?.tool;
+    }
+    handleDisplayValuesChange = (event) => {
+        const newVal = event.detail;
+        if (this.displayValues && this.displayValues.color === newVal.color && this.displayValues.size === newVal.size && this.displayValues.fontFamily === newVal.fontFamily) {
+            return;
+        }
+        this.displayValues = newVal;
+    };
+    updateDisplayValues(tool) {
+        const config = KritzelToolConfigHelper.getToolConfig(tool);
+        if (!config) {
+            this.displayValues = null;
+            return;
+        }
+        const color = tool[config.colorProperty];
+        const opacity = tool[config.opacityProperty] ?? 1;
+        const size = tool[config.sizeProperty];
+        const displayValues = {
+            color: KritzelColorHelper.applyOpacity(color, opacity, this.theme),
+            size,
+        };
+        if (tool.toolType === 'text') {
+            displayValues.fontFamily = tool.fontFamily;
+        }
+        // Check for equality implementation to prevent unnecessary re-renders
+        if (this.displayValues &&
+            this.displayValues.color === displayValues.color &&
+            this.displayValues.size === displayValues.size &&
+            this.displayValues.fontFamily === displayValues.fontFamily) {
+            return;
+        }
+        this.displayValues = displayValues;
+    }
+    async componentWillLoad() {
+        await this.initializeEngine();
+        await this.initializeTools();
+        this.isToolbarReady.emit();
+    }
+    componentDidLoad() {
+        this.updateScrollIndicators();
+    }
+    componentDidRender() {
+        this.updateScrollIndicators();
+    }
+    disconnectedCallback() {
+        if (this.kritzelEngine) {
+            this.kritzelEngine.removeEventListener('activeToolChange', this.handleActiveToolChangeBound);
+            this.kritzelEngine.removeEventListener('objectsSelectionChange', this.handleSelectionChangeBound);
+        }
+    }
+    updateScrollIndicators() {
+        if (!this.toolsScrollRef)
+            return;
+        const { scrollLeft, scrollWidth, clientWidth } = this.toolsScrollRef;
+        const threshold = 2; // Small threshold to account for rounding
+        const canScrollLeft = scrollLeft > threshold;
+        const canScrollRight = scrollLeft + clientWidth < scrollWidth - threshold;
+        const needsScrolling = scrollWidth > clientWidth;
+        if (this.canScrollLeft !== canScrollLeft)
+            this.canScrollLeft = canScrollLeft;
+        if (this.canScrollRight !== canScrollRight)
+            this.canScrollRight = canScrollRight;
+        if (this.needsScrolling !== needsScrolling)
+            this.needsScrolling = needsScrolling;
+    }
+    handleToolsScroll = () => {
+        this.updateScrollIndicators();
+    };
+    async initializeEngine() {
+        await customElements.whenDefined('kritzel-engine');
+        this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');
+        if (!this.kritzelEngine) {
+            throw new Error('kritzel-engine not found in parent element.');
+        }
+        this.kritzelEngine.addEventListener('activeToolChange', this.handleActiveToolChangeBound);
+        this.kritzelEngine.addEventListener('objectsSelectionChange', this.handleSelectionChangeBound);
+    }
+    async initializeTools() {
+        let hasDefault = false;
+        const newToolbar = this.toolbarItems.map(c => ({ ...c }));
+        await this.resolveDisabledStates(newToolbar);
+        for (const c of newToolbar) {
+            if (c.type === 'tool' && c.tool) {
+                let toolConstructor = c.tool;
+                if (typeof toolConstructor !== 'function') {
+                    toolConstructor = toolConstructor.constructor;
+                }
+                const registered = await this.kritzelEngine.registerTool(c.name, toolConstructor, c.config);
+                if (registered) {
+                    c.tool = registered;
+                }
+            }
+            if (c.type === 'tool' && c.isDefault && !this.isControlDisabled(c) && c.tool) {
+                await this.kritzelEngine.changeActiveTool(c.name);
+                this.activeControl = c;
+                this.updateDisplayValues(c.tool);
+                hasDefault = true;
+            }
+            if (c.type === 'config') {
+                if (this.firstConfig === null) {
+                    this.firstConfig = c;
+                }
+                else {
+                    console.warn('Only one config control is allowed. The first one will be used.');
+                }
+            }
+        }
+        this.internalToolbar = newToolbar;
+        // If no tool is marked as default, activate the first tool control
+        if (!hasDefault) {
+            const firstTool = this.internalToolbar.find(c => c.type === 'tool' && c.tool && !this.isControlDisabled(c));
+            if (firstTool) {
+                await this.kritzelEngine.changeActiveTool(firstTool.name);
+                this.activeControl = firstTool;
+                this.updateDisplayValues(firstTool.tool);
+            }
+        }
+    }
+    /**
+     * Resolves each tool's `isDisabled` (boolean or sync/async function) into `resolvedDisabled`.
+     */
+    async resolveDisabledStates(items) {
+        const entries = await Promise.all(items
+            .filter(item => item.type === 'tool')
+            .map(async (item) => [item.name, await this.evaluateDisabled(item.isDisabled)]));
+        this.resolvedDisabled = new Map(entries);
+    }
+    async evaluateDisabled(value) {
+        if (typeof value === 'function') {
+            try {
+                return !!(await value());
+            }
+            catch {
+                return false;
+            }
+        }
+        return !!value;
+    }
+    isControlDisabled(control) {
+        return this.resolvedDisabled.get(control.name) ?? false;
+    }
+    async handleControlClick(control) {
+        if (this.isControlDisabled(control)) {
+            return;
+        }
+        this.activeControl = control;
+        if (this.activeControl.type === 'tool') {
+            this.updateDisplayValues(this.activeControl.tool);
+            await this.kritzelEngine.changeActiveTool(this.activeControl.name);
+        }
+    }
+    async handleToolChange(event) {
+        this.activeControl = { ...this.activeControl, tool: event.detail };
+        await this.kritzelEngine.changeActiveTool(this.activeControl.name);
+    }
+    /**
+     * Get the currently selected sub-option for a control.
+     * Returns the first sub-option as default if none is selected.
+     */
+    getSelectedSubOption(control) {
+        if (!control.subOptions?.length)
+            return undefined;
+        return this.selectedSubOptions.get(control.name) || control.subOptions[0];
+    }
+    /**
+     * Select a sub-option and update the tool property
+     */
+    async selectSubOption(control, option) {
+        if (this.isControlDisabled(control)) {
+            return;
+        }
+        // Update the selected sub-options map (create new Map for reactivity)
+        const newMap = new Map(this.selectedSubOptions);
+        newMap.set(control.name, option);
+        this.selectedSubOptions = newMap;
+        // Update the tool property if the tool is instantiated
+        if (control.tool && typeof control.tool !== 'function') {
+            control.tool[option.toolProperty] = option.value;
+        }
+        // Close the submenu
+        this.closeTooltip();
+        // Activate this control
+        await this.handleControlClick(control);
+    }
+    render() {
+        const activeToolConfig = this.activeControl?.tool
+            ? KritzelToolConfigHelper.getToolConfig(this.activeControl.tool)
+            : null;
+        const hasConfigUI = activeToolConfig !== null;
+        // Separate tool controls from config control
+        const toolControls = this.internalToolbar.filter(c => c.type === 'tool' || c.type === 'separator');
+        const configControl = this.internalToolbar.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
+        return (h(Host, { key: '138b1071841d6d8de85379e953f5f597216569d3', style: { display: this.visible ? '' : 'none' }, class: {
+                mobile: this.isTouchDevice,
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '566c48a8ebe036f2bd5972b25e1f937cab45e34b', style: {
+                position: 'absolute',
+                bottom: '56px',
+                left: '12px',
+            }, undoState: this.undoState, terms: this.terms, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: 'eda49dc67a1e4da92e4b47e5a97366810464d998', class: "kritzel-toolbar" }, h("div", { key: '018b3062a233b92424a9c64002fe69bb48d6a2d3', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: '8afc779f4137ad4410765e7c37fe49e32fe94624', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
+            // Check if this control has sub-options (split-button)
+            if (control.subOptions?.length) {
+                const selectedSubOption = this.getSelectedSubOption(control);
+                const isActive = this.activeControl?.name === control.name;
+                const isDisabled = this.isControlDisabled(control);
+                return (h("div", { class: {
+                        'kritzel-control-split': true,
+                        'selected': isActive,
+                    }, key: control.name, "data-testid": `tool-${control.name}`, ref: el => {
+                        if (el)
+                            control._anchorRef = el;
+                    } }, h("button", { class: {
+                        'kritzel-control-main': true,
+                        'disabled': isDisabled,
+                    }, disabled: isDisabled, onClick: () => this.handleControlClick(control), "aria-label": selectedSubOption?.label, "aria-disabled": isDisabled, "data-testid": `tool-${control.name}-main` }, h("kritzel-icon", { name: selectedSubOption?.icon || control.icon })), h("button", { class: {
+                        'kritzel-control-dropdown': true,
+                        'visible': isActive,
+                        'disabled': isDisabled,
+                    }, disabled: isDisabled, ref: el => {
+                        if (el)
+                            control._triggerRef = el;
+                    }, "aria-label": `Select ${control.name} options`, "aria-disabled": isDisabled, "data-testid": `tool-${control.name}-dropdown`, tabIndex: isActive ? 0 : -1 }, h("kritzel-icon", { name: "chevron-down", size: 12 })), h("kritzel-tooltip", { anchorElement: control._anchorRef, triggerElement: control._triggerRef }, h("div", { class: "kritzel-submenu-content" }, control.subOptions.map(option => (h("button", { class: {
+                        'kritzel-submenu-item': true,
+                        'active': option.id === selectedSubOption?.id,
+                    }, key: option.id, "data-testid": `suboption-${option.id}`, onClick: () => this.selectSubOption(control, option) }, h("kritzel-icon", { name: option.icon, size: 20 }), h("span", null, option.label))))))));
+            }
+            if (control.type === 'separator') {
+                return h("div", { class: "kritzel-control-separator", key: control.name });
+            }
+            // Regular tool control (no sub-options)
+            return (h("button", { class: {
+                    'kritzel-control': true,
+                    'selected': this.activeControl?.name === control?.name,
+                    'disabled': this.isControlDisabled(control),
+                }, disabled: this.isControlDisabled(control), key: control.name, "data-testid": `tool-${control.name}`, onClick: _event => this.handleControlClick?.(control), "aria-label": control.name.charAt(0).toUpperCase() + control.name.slice(1), "aria-disabled": this.isControlDisabled(control) }, h("kritzel-icon", { name: control.icon })));
+        })), h("div", { key: '08de74d08ced9a4d34d61740729f317fee7724e0', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
+                'kritzel-config-container': true,
+                'visible': hasConfigUI,
+            }, key: configControl.name }, h("div", { key: 'c453af061cbf23f83c2418fe5db315008550afeb', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: '9818cdc44e0da2f5bbae24697a22add9499aaa9b', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: 'f957bba0e15a7771856c4f04346ada370f0730c8', tool: this.activeControl.tool, theme: this.theme, engine: this.kritzelEngine, terms: this.terms, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: '49657d004467ae5f6ec97f70c3d88cfc48e6e3d8', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
+                if (el)
+                    this.configTriggerRef = el;
+            }, onKeyDown: event => {
+                if (event.key === 'Enter') {
+                    event.target.click();
+                }
+            }, style: {
+                cursor: 'pointer',
+            } }, this.displayValues && (h("div", { key: '6a8f4f549919b7e87a3338145347597f6e41019c', class: "color-container" }, h("kritzel-color", { key: 'c050efb35a31ac668fcb25fec3cd036f871d6a8f', value: this.displayValues.color, theme: this.theme, size: 18, style: {
+                borderRadius: '50%',
+                border: 'none',
+            } })))))))));
+    }
+    static get is() { return "kritzel-toolbar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-toolbar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-toolbar.css"]
+        };
+    }
+    static get assetsDirs() { return ["../assets"]; }
+    static get properties() {
+        return {
+            "visible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "visible",
+                "defaultValue": "true"
+            },
+            "toolbarItems": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KritzelToolbarItem[]",
+                    "resolved": "KritzelToolbarItem[]",
+                    "references": {
+                        "KritzelToolbarItem": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::KritzelToolbarItem",
+                            "referenceLocation": "KritzelToolbarItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "activeControl": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "KritzelToolbarItem | null",
+                    "resolved": "KritzelToolbarItem",
+                    "references": {
+                        "KritzelToolbarItem": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::KritzelToolbarItem",
+                            "referenceLocation": "KritzelToolbarItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "isUtilityPanelVisible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-utility-panel-visible",
+                "defaultValue": "true"
+            },
+            "undoState": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KritzelUndoState",
+                    "resolved": "KritzelUndoState",
+                    "references": {
+                        "KritzelUndoState": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::KritzelUndoState",
+                            "referenceLocation": "KritzelUndoState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ThemeName",
+                    "resolved": "\"dark\" | \"light\" | string & {}",
+                    "references": {
+                        "ThemeName": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::ThemeName",
+                            "referenceLocation": "ThemeName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "'light'"
+            },
+            "terms": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Partial<Record<KritzelTermKey, string>>",
+                    "resolved": "\"backToContent.label\" | \"currentUser.dialogTitle\" | \"editor.loading\" | \"export.dialogTitle\" | \"export.exportButton\" | \"export.filename.label\" | \"export.filename.placeholder\" | \"export.format.label\" | \"export.tabs.viewport\" | \"export.tabs.workspace\" | \"login.dialogTitle\" | \"menu.align\" | \"menu.alignBottom\" | \"menu.alignCenterHorizontal\" | \"menu.alignCenterVertical\" | \"menu.alignLeft\" | \"menu.alignRight\" | \"menu.alignTop\" | \"menu.bringToFront\" | \"menu.copy\" | \"menu.cut\" | \"menu.delete\" | \"menu.export\" | \"menu.exportAsPng\" | \"menu.exportAsSvg\" | \"menu.group\" | \"menu.import\" | \"menu.logout\" | \"menu.moveDown\" | \"menu.moveUp\" | \"menu.order\" | \"menu.paste\" | \"menu.selectAll\" | \"menu.sendToBack\" | \"menu.settings\" | \"menu.share\" | \"menu.ungroup\" | \"moreMenu.ariaLabel\" | \"settings.about.description\" | \"settings.about.title\" | \"settings.categories.about\" | \"settings.categories.developer\" | \"settings.categories.general\" | \"settings.categories.shortcuts\" | \"settings.categories.viewport\" | \"settings.developer.showMigrationInfo.description\" | \"settings.developer.showMigrationInfo.label\" | \"settings.developer.showObjectInfo.description\" | \"settings.developer.showObjectInfo.label\" | \"settings.developer.showSyncProviderInfo.description\" | \"settings.developer.showSyncProviderInfo.label\" | \"settings.developer.showViewportInfo.description\" | \"settings.developer.showViewportInfo.label\" | \"settings.developer.title\" | \"settings.dialogTitle\" | \"settings.general.language.description\" | \"settings.general.language.label\" | \"settings.general.lockDrawingScale.description\" | \"settings.general.lockDrawingScale.label\" | \"settings.general.theme.description\" | \"settings.general.theme.label\" | \"settings.general.title\" | \"settings.shortcuts.title\" | \"settings.viewport.boundaryBottom.description\" | \"settings.viewport.boundaryBottom.label\" | \"settings.viewport.boundaryLeft.description\" | \"settings.viewport.boundaryLeft.label\" | \"settings.viewport.boundaryPlaceholder\" | \"settings.viewport.boundaryRight.description\" | \"settings.viewport.boundaryRight.label\" | \"settings.viewport.boundaryTop.description\" | \"settings.viewport.boundaryTop.label\" | \"settings.viewport.maxZoom.description\" | \"settings.viewport.maxZoom.label\" | \"settings.viewport.minZoom.description\" | \"settings.viewport.minZoom.label\" | \"settings.viewport.title\" | \"share.copyLink.copied\" | \"share.copyLink.title\" | \"share.dialogTitle\" | \"share.linkSharing.disabledDescription\" | \"share.linkSharing.enabledDescription\" | \"share.linkSharing.label\" | \"share.linkSharing.toggleLabel\" | \"toolConfig.collapse\" | \"toolConfig.expand\" | \"utility.delete\" | \"utility.redo\" | \"utility.undo\" | \"watermark.poweredBy\" | \"workspace.delete\" | \"workspace.rename\" | \"workspace.sharedTooltip\" | \"zoom.zoomIn\" | \"zoom.zoomOut\" | string",
+                    "references": {
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        },
+                        "KritzelTermKey": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::KritzelTermKey",
+                            "referenceLocation": "KritzelTermKey"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Resolved localized strings keyed by term key, supplied by the editor."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "firstConfig": {},
+            "isTouchDevice": {},
+            "selectedSubOptions": {},
+            "canScrollLeft": {},
+            "canScrollRight": {},
+            "needsScrolling": {},
+            "displayValues": {},
+            "internalToolbar": {},
+            "resolvedDisabled": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "isToolbarReady",
+                "name": "isToolbarReady",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "closeTooltip": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "toolbarItems",
+                "methodName": "onToolbarItemsChange"
+            }, {
+                "propName": "theme",
+                "methodName": "onThemeChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -0,0 +1,18 @@
+:host {
+  width: auto;
+}
+
+.tooltip-content {
+  position: relative;
+  padding: 8px 12px;
+  border-radius: 4px;
+  width: fit-content;
+  background-color: var(--kritzel-tooltip-background-color, #ffffff);
+  color: var(--kritzel-tooltip-color, #000000);
+  padding: var(--kritzel-tooltip-padding, 12px);
+  border: var(--kritzel-tooltip-border, 1px solid #ebebeb);
+  border-radius: var(--kritzel-tooltip-border-radius, 16px);
+  white-space: nowrap;
+  box-shadow: var(--kritzel-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));
+}
+