kritzel-stencil 0.0.171 → 0.0.172

package/dist/stencil/stencil.esm.js

@@ -1,2 +1,2 @@
-import{p as e,b as t}from"./p-SGde3HXB.js";export{s as setNonce}from"./p-SGde3HXB.js";import{g as o}from"./p-DQuL1Twl.js";var n=()=>{const t=import.meta.url;const o={};if(t!==""){o.resourcesUrl=new URL(".",t).href}return e(o)};n().then((async e=>{await o();return t([["p-d3f7214e",[[768,"kritzel-editor",{scaleMax:[2,"scale-max"],scaleMin:[2,"scale-min"],controls:[16],globalContextMenuItems:[16],objectContextMenuItems:[16],customSvgIcons:[16],isControlsVisible:[4,"is-controls-visible"],isUtilityPanelVisible:[4,"is-utility-panel-visible"],syncConfig:[16],isEngineReady:[32],isControlsReady:[32],isWorkspaceManagerReady:[32],workspaces:[32],activeWorkspace:[32],isVirtualKeyboardOpen:[32],undoState:[32],getObjectById:[64],addObject:[64],updateObject:[64],removeObject:[64],getSelectedObjects:[64],selectObjects:[64],selectAllObjectsInViewport:[64],clearSelection:[64],centerObjectInViewport:[64],createWorkspace:[64],updateWorkspace:[64],deleteWorkspace:[64],getWorkspaces:[64],getActiveWorkspace:[64]},[[0,"dblclick","onTouchStart"]],{isEngineReady:["onIsEngineReady"],isControlsReady:["onIsControlsReady"],workspaces:["onWorkspacesChange"]}],[769,"kritzel-controls",{controls:[16],activeControl:[1040],isUtilityPanelVisible:[4,"is-utility-panel-visible"],undoState:[16],firstConfig:[32],isTooltipVisible:[32],isTouchDevice:[32],selectedSubOptions:[32],openSubMenuControl:[32],closeTooltip:[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"]]],[769,"kritzel-workspace-manager",{activeWorkspace:[1040],workspaces:[16],childMenuAnchor:[32],openChildMenuItem:[32],newWorkspace:[32],editingItemId:[32]},[[8,"wheel","handleWheel"]]],[769,"kritzel-engine",{workspace:[16],syncConfig:[16],activeTool:[16],globalContextMenuItems:[16],objectContextMenuItems:[16],scaleMax:[1026,"scale-max"],scaleMin:[1026,"scale-min"],cursorTarget:[16],forceUpdate:[32],registerTool:[64],changeActiveTool:[64],disable:[64],enable:[64],delete:[64],copy:[64],paste:[64],bringForward:[64],sendBackward:[64],bringToFront:[64],sendToBack:[64],group:[64],ungroup:[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],getActiveWorkspace:[64]},[[0,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[0,"longpress","handleLongPress"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[4,"dblclick","preventDoubleTapZoomOnTouchDevices"]],{workspace:["onWorkspaceChange"],scaleMax:["validateScaleMax"],scaleMin:["validateScaleMin"],cursorTarget:["onCursorTargetChange"]}],[769,"kritzel-control-text-config",{tool:[1040],isExpanded:[1028,"is-expanded"]}],[769,"kritzel-control-brush-config",{tool:[1040],isExpanded:[1028,"is-expanded"],palette:[32]},null,{tool:["handleToolChange"]}],[769,"kritzel-split-button",{buttonIcon:[1,"button-icon"],dropdownIcon:[1,"dropdown-icon"],items:[16],mainButtonDisabled:[4,"main-button-disabled"],menuButtonDisabled:[4,"menu-button-disabled"],isMenuOpen:[32],isTouchDevice:[32],anchorElement:[32],menuScrollTop:[32],open:[64],focusMenu:[64]}],[769,"kritzel-context-menu",{items:[16],objects:[16],processedItems:[32]},[[9,"pointerdown","handleOutsideClick"]],{items:["onItemsChanged"]}],[769,"kritzel-utility-panel",{undoState:[16]}],[769,"kritzel-cursor-trail",{core:[16],cursorTrailPoints:[32],isLeftButtonDown:[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[769,"kritzel-tooltip",{isVisible:[4,"is-visible"],anchorElement:[16],offsetY:[2,"offset-y"],positionX:[32],positionY:[32],focusContent:[64]},[[4,"click","handleOutsideClick"],[9,"resize","handleWindowResize"]]],[769,"kritzel-font-family",{fontOptions:[16],selectedFontFamily:[1025,"selected-font-family"]}],[769,"kritzel-font-size",{sizes:[16],selectedSize:[1026,"selected-size"],fontFamily:[1,"font-family"]}],[769,"kritzel-stroke-size",{sizes:[16],selectedSize:[1026,"selected-size"]}],[769,"kritzel-color-palette",{colors:[16],selectedColor:[1025,"selected-color"],isExpanded:[4,"is-expanded"],isOpaque:[4,"is-opaque"]}],[769,"kritzel-font",{fontFamily:[1,"font-family"],size:[2],color:[1]}],[769,"kritzel-menu",{items:[16],parent:[16],selectedIndex:[32],setScrollTop:[64],setFocus:[64]}],[769,"kritzel-menu-item",{item:[16],parent:[16],isDirty:[32]},null,{item:["onItemChange"]}],[769,"kritzel-dropdown",{options:[16],value:[1],width:[1],selectStyles:[8,"select-styles"],internalValue:[32],hasSuffixContent:[32],hasPrefixContent:[32]},null,{options:["optionsChanged"],value:["externalValueChanged"]}],[769,"kritzel-portal",{anchor:[16],offsetX:[2,"offset-x"],offsetY:[2,"offset-y"],autoFocus:[4,"auto-focus"]},[[8,"click","handleOutsideClick"],[8,"keydown","handleKeyDown"],[11,"resize","handleResize"],[11,"scroll","handleWindowScroll"]],{anchor:["anchorChanged"]}],[769,"kritzel-color",{value:[1],size:[2]}],[769,"kritzel-icon",{name:[1],label:[1],size:[2]}]]],["p-385bab97",[[769,"kritzel-brush-style",{type:[1],brushOptions:[16]}]]]],e)}));
+import{p as e,b as t}from"./p-SGde3HXB.js";export{s as setNonce}from"./p-SGde3HXB.js";import{g as o}from"./p-DQuL1Twl.js";var n=()=>{const t=import.meta.url;const o={};if(t!==""){o.resourcesUrl=new URL(".",t).href}return e(o)};n().then((async e=>{await o();return t([["p-0fdce6ce",[[768,"kritzel-editor",{scaleMax:[2,"scale-max"],scaleMin:[2,"scale-min"],controls:[16],globalContextMenuItems:[16],objectContextMenuItems:[16],customSvgIcons:[16],isControlsVisible:[4,"is-controls-visible"],isUtilityPanelVisible:[4,"is-utility-panel-visible"],syncConfig:[16],isEngineReady:[32],isControlsReady:[32],isWorkspaceManagerReady:[32],workspaces:[32],activeWorkspace:[32],isVirtualKeyboardOpen:[32],undoState:[32],getObjectById:[64],addObject:[64],updateObject:[64],removeObject:[64],getSelectedObjects:[64],selectObjects:[64],selectAllObjectsInViewport:[64],clearSelection:[64],centerObjectInViewport:[64],createWorkspace:[64],updateWorkspace:[64],deleteWorkspace:[64],getWorkspaces:[64],getActiveWorkspace:[64]},[[0,"dblclick","onTouchStart"]],{isEngineReady:["onIsEngineReady"],isControlsReady:["onIsControlsReady"],workspaces:["onWorkspacesChange"]}],[769,"kritzel-controls",{controls:[16],activeControl:[1040],isUtilityPanelVisible:[4,"is-utility-panel-visible"],undoState:[16],firstConfig:[32],isTooltipVisible:[32],isTouchDevice:[32],selectedSubOptions:[32],openSubMenuControl:[32],closeTooltip:[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"]]],[769,"kritzel-workspace-manager",{activeWorkspace:[1040],workspaces:[16],childMenuAnchor:[32],openChildMenuItem:[32],newWorkspace:[32],editingItemId:[32]},[[8,"wheel","handleWheel"]]],[769,"kritzel-engine",{workspace:[16],syncConfig:[16],activeTool:[16],globalContextMenuItems:[16],objectContextMenuItems:[16],scaleMax:[1026,"scale-max"],scaleMin:[1026,"scale-min"],cursorTarget:[16],forceUpdate:[32],registerTool:[64],changeActiveTool:[64],disable:[64],enable:[64],delete:[64],copy:[64],paste:[64],bringForward:[64],sendBackward:[64],bringToFront:[64],sendToBack:[64],group:[64],ungroup:[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],getActiveWorkspace:[64]},[[0,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[0,"longpress","handleLongPress"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[4,"dblclick","preventDoubleTapZoomOnTouchDevices"]],{workspace:["onWorkspaceChange"],scaleMax:["validateScaleMax"],scaleMin:["validateScaleMin"],cursorTarget:["onCursorTargetChange"]}],[769,"kritzel-control-text-config",{tool:[1040],isExpanded:[1028,"is-expanded"]}],[769,"kritzel-control-brush-config",{tool:[1040],isExpanded:[1028,"is-expanded"],palette:[32]},null,{tool:["handleToolChange"]}],[769,"kritzel-split-button",{buttonIcon:[1,"button-icon"],dropdownIcon:[1,"dropdown-icon"],items:[16],mainButtonDisabled:[4,"main-button-disabled"],menuButtonDisabled:[4,"menu-button-disabled"],isMenuOpen:[32],isTouchDevice:[32],anchorElement:[32],menuScrollTop:[32],open:[64],focusMenu:[64]}],[769,"kritzel-context-menu",{items:[16],objects:[16],processedItems:[32]},[[9,"pointerdown","handleOutsideClick"]],{items:["onItemsChanged"]}],[769,"kritzel-utility-panel",{undoState:[16]}],[769,"kritzel-cursor-trail",{core:[16],cursorTrailPoints:[32],isLeftButtonDown:[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[769,"kritzel-tooltip",{isVisible:[4,"is-visible"],anchorElement:[16],offsetY:[2,"offset-y"],positionX:[32],positionY:[32],focusContent:[64]},[[4,"click","handleOutsideClick"],[9,"resize","handleWindowResize"]]],[769,"kritzel-font-family",{fontOptions:[16],selectedFontFamily:[1025,"selected-font-family"]}],[769,"kritzel-font-size",{sizes:[16],selectedSize:[1026,"selected-size"],fontFamily:[1,"font-family"]}],[769,"kritzel-stroke-size",{sizes:[16],selectedSize:[1026,"selected-size"]}],[769,"kritzel-color-palette",{colors:[16],selectedColor:[1025,"selected-color"],isExpanded:[4,"is-expanded"],isOpaque:[4,"is-opaque"]}],[769,"kritzel-font",{fontFamily:[1,"font-family"],size:[2],color:[1]}],[769,"kritzel-menu",{items:[16],parent:[16],selectedIndex:[32],setScrollTop:[64],setFocus:[64]}],[769,"kritzel-menu-item",{item:[16],parent:[16],isDirty:[32]},null,{item:["onItemChange"]}],[769,"kritzel-dropdown",{options:[16],value:[1],width:[1],selectStyles:[16],internalValue:[32],hasSuffixContent:[32],hasPrefixContent:[32],isOpen:[32],focusedIndex:[32],openDirection:[32]},[[4,"click","handleDocumentClick"],[4,"keydown","handleDocumentKeydown"]],{options:["optionsChanged"],value:["externalValueChanged"]}],[769,"kritzel-portal",{anchor:[16],offsetX:[2,"offset-x"],offsetY:[2,"offset-y"],autoFocus:[4,"auto-focus"]},[[8,"click","handleOutsideClick"],[8,"keydown","handleKeyDown"],[11,"resize","handleResize"],[11,"scroll","handleWindowScroll"]],{anchor:["anchorChanged"]}],[769,"kritzel-color",{value:[1],size:[2]}],[769,"kritzel-icon",{name:[1],label:[1],size:[2]}]]],["p-0a9b6696",[[769,"kritzel-brush-style",{type:[1],brushOptions:[16]}]]]],e)}));
 //# sourceMappingURL=stencil.esm.js.map

package/dist/types/components/shared/kritzel-dropdown/kritzel-dropdown.d.ts

@@ -2,25 +2,44 @@ import { EventEmitter } from '../../../stencil-public-runtime';
 export interface DropdownOption {
     value: string;
     label: string;
-    style?: any;
+    style?: Record<string, string>;
 }
 export declare class KritzelDropdown {
+    el: HTMLElement;
     options: DropdownOption[];
     optionsChanged(): void;
     value: string;
     externalValueChanged(newValue: string): void;
     width?: string;
-    selectStyles?: any;
+    selectStyles?: Record<string, string>;
     internalValue: string;
     hasSuffixContent: boolean;
     hasPrefixContent: boolean;
+    isOpen: boolean;
+    focusedIndex: number;
+    openDirection: 'down' | 'up';
     valueChanged: EventEmitter<string>;
     private suffixSlotElement?;
     private prefixSlotElement?;
+    private triggerElement?;
+    private menuElement?;
+    private wrapperElement?;
     componentWillLoad(): void;
+    handleDocumentClick(event: MouseEvent): void;
+    handleDocumentKeydown(event: KeyboardEvent): void;
     private updateInternalValue;
-    private handleSelectChange;
+    private toggleMenu;
+    private openMenu;
+    private calculateMenuDirection;
+    private closeMenu;
+    private selectOption;
+    private handleTriggerKeyDown;
+    private handleMenuKeyDown;
+    private scrollFocusedOptionIntoView;
+    private handleOptionMouseEnter;
     private evaluateSuffixContent;
     private evaluatePrefixContent;
+    private getSelectedLabel;
+    private getSelectedStyle;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -123,7 +123,7 @@ export namespace Components {
         /**
           * @default {}
          */
-        "selectStyles"?: any;
+        "selectStyles"?: Record<string, string>;
         "value": string;
         "width"?: string;
     }
@@ -919,7 +919,7 @@ declare namespace LocalJSX {
         /**
           * @default {}
          */
-        "selectStyles"?: any;
+        "selectStyles"?: Record<string, string>;
         "value"?: string;
         "width"?: string;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kritzel-stencil",
-  "version": "0.0.171",
+  "version": "0.0.172",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/components/p-BdwB-S9G.js

@@ -1,130 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CwkUrTy1.js';
-
-const kritzelDropdownCss = ":host{display:inline-flex;vertical-align:middle;width:100%;}.dropdown-wrapper{display:flex;align-items:center;border:1px solid #333333;border-radius:var(--kritzel-controls-control-border-radius, 12px);overflow:hidden;height:32px;width:100%}.custom-select{padding:0 8px;padding-right:30px;height:100%;width:100%;box-sizing:border-box;border-radius:0;border:none;background-color:#fff;cursor:var(--kritzel-pointer-cursor, pointer);outline:none;font-size:inherit;color:var(--kritzel-controls-text-color, #333333);-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23333333\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"/></svg>');background-size:16px 16px;background-repeat:no-repeat;background-position:right 8px center}.custom-select.has-suffix-border{border-right:1px solid #333333}.custom-select.has-prefix-border{border-left:1px solid #333333}::slotted(*){height:100%;box-sizing:border-box}";
-
-const KritzelDropdown = /*@__PURE__*/ proxyCustomElement(class KritzelDropdown extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.valueChanged = createEvent(this, "valueChanged");
-    }
-    options = [];
-    optionsChanged() {
-        this.updateInternalValue(this.internalValue, true);
-    }
-    value;
-    externalValueChanged(newValue) {
-        if (newValue !== this.internalValue) {
-            this.updateInternalValue(newValue, false);
-        }
-    }
-    width;
-    selectStyles = {};
-    internalValue;
-    hasSuffixContent = false;
-    hasPrefixContent = false;
-    valueChanged;
-    suffixSlotElement;
-    prefixSlotElement;
-    componentWillLoad() {
-        this.updateInternalValue(this.value, false);
-        this.evaluateSuffixContent();
-        this.evaluatePrefixContent();
-    }
-    updateInternalValue(proposedValue, emitChange) {
-        let finalValue = proposedValue;
-        if (this.options && this.options.length > 0) {
-            const isValidValue = this.options.some(opt => opt.value === finalValue);
-            if (!finalValue || !isValidValue) {
-                finalValue = this.options[0].value;
-            }
-        }
-        else {
-            finalValue = undefined;
-        }
-        if (this.internalValue !== finalValue) {
-            this.internalValue = finalValue;
-            if (emitChange || (proposedValue !== finalValue && proposedValue !== undefined)) {
-                this.valueChanged.emit(this.internalValue);
-            }
-        }
-    }
-    handleSelectChange = (event) => {
-        const newValue = event.target.value;
-        if (this.internalValue !== newValue) {
-            this.internalValue = newValue;
-            this.valueChanged.emit(this.internalValue);
-        }
-    };
-    evaluateSuffixContent = () => {
-        if (this.suffixSlotElement) {
-            const newHasContent = this.suffixSlotElement.assignedNodes({ flatten: true }).length > 0;
-            if (this.hasSuffixContent !== newHasContent) {
-                this.hasSuffixContent = newHasContent;
-            }
-        }
-        else {
-            if (this.hasSuffixContent !== false) {
-                this.hasSuffixContent = false;
-            }
-        }
-    };
-    evaluatePrefixContent = () => {
-        if (this.prefixSlotElement) {
-            const newHasContent = this.prefixSlotElement.assignedNodes({ flatten: true }).length > 0;
-            if (this.hasPrefixContent !== newHasContent) {
-                this.hasPrefixContent = newHasContent;
-            }
-        }
-        else {
-            if (this.hasPrefixContent !== false) {
-                this.hasPrefixContent = false;
-            }
-        }
-    };
-    render() {
-        const selectClasses = {
-            'custom-select': true,
-            'has-suffix-border': this.hasSuffixContent,
-            'has-prefix-border': this.hasPrefixContent,
-        };
-        return (h(Host, { key: 'f24911715685ced571843ba7be6631248c8519b7' }, h("div", { key: '520fdb74afdef8bd5228f76074e51981f44b910d', class: "dropdown-wrapper" }, h("slot", { key: 'cf6628437946b57ad0b27c066639e0b64b5a28f8', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), h("select", { key: '3203ccd5b9c8b84e8f41bddfcb07786e879f0035', class: selectClasses, style: { ...this.selectStyles, width: this.width }, onInput: this.handleSelectChange }, this.options.map(option => (h("option", { value: option.value, style: option.style, selected: option.value === this.internalValue }, option.label)))), h("slot", { key: 'd0abb52e082db81860c09d2c48b7c065adb406f3', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }))));
-    }
-    static get watchers() { return {
-        "options": ["optionsChanged"],
-        "value": ["externalValueChanged"]
-    }; }
-    static get style() { return kritzelDropdownCss; }
-}, [769, "kritzel-dropdown", {
-        "options": [16],
-        "value": [1],
-        "width": [1],
-        "selectStyles": [8, "select-styles"],
-        "internalValue": [32],
-        "hasSuffixContent": [32],
-        "hasPrefixContent": [32]
-    }, undefined, {
-        "options": ["optionsChanged"],
-        "value": ["externalValueChanged"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["kritzel-dropdown"];
-    components.forEach(tagName => { switch (tagName) {
-        case "kritzel-dropdown":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, KritzelDropdown);
-            }
-            break;
-    } });
-}
-
-export { KritzelDropdown as K, defineCustomElement as d };
-//# sourceMappingURL=p-BdwB-S9G.js.map
-
-//# sourceMappingURL=p-BdwB-S9G.js.map

package/dist/components/p-BdwB-S9G.js.map

@@ -1 +0,0 @@
-{"file":"p-BdwB-S9G.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,mnCAAmnC;;MCajoC,eAAe,iBAAAA,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;;;;;;;;;IAClB,OAAO,GAAqB,EAAE;IAEtC,cAAc,GAAA;QACZ,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC;;AAE5C,IAAA,KAAK;AAEb,IAAA,oBAAoB,CAAC,QAAgB,EAAA;AACnC,QAAA,IAAI,QAAQ,KAAK,IAAI,CAAC,aAAa,EAAE;AACnC,YAAA,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,KAAK,CAAC;;;AAGrC,IAAA,KAAK;IACL,YAAY,GAAS,EAAE;AAEtB,IAAA,aAAa;IACb,gBAAgB,GAAY,KAAK;IACjC,gBAAgB,GAAY,KAAK;AAEjC,IAAA,YAAY;AAEb,IAAA,iBAAiB;AACjB,IAAA,iBAAiB;IAEzB,iBAAiB,GAAA;QACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC;QAC3C,IAAI,CAAC,qBAAqB,EAAE;QAC5B,IAAI,CAAC,qBAAqB,EAAE;;IAGtB,mBAAmB,CAAC,aAAqB,EAAE,UAAmB,EAAA;QACpE,IAAI,UAAU,GAAG,aAAa;AAC9B,QAAA,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;AAC3C,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,KAAK,KAAK,UAAU,CAAC;AACvE,YAAA,IAAI,CAAC,UAAU,IAAI,CAAC,YAAY,EAAE;gBAChC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK;;;aAE/B;YACL,UAAU,GAAG,SAAS;;AAGxB,QAAA,IAAI,IAAI,CAAC,aAAa,KAAK,UAAU,EAAE;AACrC,YAAA,IAAI,CAAC,aAAa,GAAG,UAAU;AAC/B,YAAA,IAAI,UAAU,KAAK,aAAa,KAAK,UAAU,IAAI,aAAa,KAAK,SAAS,CAAC,EAAE;gBAC/E,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;;;;AAKxC,IAAA,kBAAkB,GAAG,CAAC,KAAY,KAAI;AAC5C,QAAA,MAAM,QAAQ,GAAI,KAAK,CAAC,MAA4B,CAAC,KAAK;AAC1D,QAAA,IAAI,IAAI,CAAC,aAAa,KAAK,QAAQ,EAAE;AACnC,YAAA,IAAI,CAAC,aAAa,GAAG,QAAQ;YAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;;AAE9C,KAAC;IAEO,qBAAqB,GAAG,MAAK;AACnC,QAAA,IAAI,IAAI,CAAC,iBAAiB,EAAE;AAC1B,YAAA,MAAM,aAAa,GAAG,IAAI,CAAC,iBAAiB,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC;AACxF,YAAA,IAAI,IAAI,CAAC,gBAAgB,KAAK,aAAa,EAAE;AAC3C,gBAAA,IAAI,CAAC,gBAAgB,GAAG,aAAa;;;aAElC;AACL,YAAA,IAAI,IAAI,CAAC,gBAAgB,KAAK,KAAK,EAAE;AACnC,gBAAA,IAAI,CAAC,gBAAgB,GAAG,KAAK;;;AAGnC,KAAC;IAEO,qBAAqB,GAAG,MAAK;AACnC,QAAA,IAAI,IAAI,CAAC,iBAAiB,EAAE;AAC1B,YAAA,MAAM,aAAa,GAAG,IAAI,CAAC,iBAAiB,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC;AACxF,YAAA,IAAI,IAAI,CAAC,gBAAgB,KAAK,aAAa,EAAE;AAC3C,gBAAA,IAAI,CAAC,gBAAgB,GAAG,aAAa;;;aAElC;AACL,YAAA,IAAI,IAAI,CAAC,gBAAgB,KAAK,KAAK,EAAE;AACnC,gBAAA,IAAI,CAAC,gBAAgB,GAAG,KAAK;;;AAGnC,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,eAAe,EAAE,IAAI;YACrB,mBAAmB,EAAE,IAAI,CAAC,gBAAgB;YAC1C,mBAAmB,EAAE,IAAI,CAAC,gBAAgB;SAC3C;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,iBAAiB,GAAG,EAAqB,CAAC,EAAE,YAAY,EAAE,IAAI,CAAC,qBAAqB,EAAS,CAAA,EAClI,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAA,EAC/G,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KACtB,CAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,aAAa,EAC5F,EAAA,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACK,EACT,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,iBAAiB,GAAG,EAAqB,CAAC,EAAE,YAAY,EAAE,IAAI,CAAC,qBAAqB,EAAS,CAAA,CAC9H,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-dropdown/kritzel-dropdown.css?tag=kritzel-dropdown&encapsulation=shadow","src/components/shared/kritzel-dropdown/kritzel-dropdown.tsx"],"sourcesContent":[":host {\r\n  display: inline-flex; /* Ensures the host shrinks/grows with the wrapper */\r\n  vertical-align: middle; /* Aligns with other inline-block or inline-flex elements */\r\n  width: 100%; /* Ensures the host takes full width of the parent */\r\n}\r\n\r\n.dropdown-wrapper {\r\n  display: flex;\r\n  align-items: center;\r\n  border: 1px solid #333333;\r\n  border-radius: var(--kritzel-controls-control-border-radius, 12px);\r\n  overflow: hidden;\r\n  height: 32px;\r\n  width: 100%;\r\n}\r\n\r\n.custom-select {\r\n  padding: 0 8px;\r\n  padding-right: 30px; \r\n  height: 100%;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  border-radius: 0; \r\n  border: none; \r\n  background-color: #fff;\r\n  cursor: var(--kritzel-pointer-cursor, pointer);\r\n  outline: none;\r\n  font-size: inherit;\r\n  color: var(--kritzel-controls-text-color, #333333); /* Use CSS var with fallback */\r\n  -webkit-tap-highlight-color: transparent;\r\n\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  appearance: none;\r\n\r\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23333333\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"/></svg>');\r\n  background-size: 16px 16px;\r\n  background-repeat: no-repeat;\r\n  background-position: right 8px center; \r\n}\r\n\r\n.custom-select.has-suffix-border {\r\n  border-right: 1px solid #333333; \r\n}\r\n\r\n.custom-select.has-prefix-border {\r\n  border-left: 1px solid #333333; \r\n}\r\n\r\n::slotted(*) {\r\n  height: 100%; \r\n  box-sizing: border-box;\r\n}\r\n","import { Component, Host, h, Prop, State, Event, EventEmitter, Watch } from '@stencil/core';\r\n\r\nexport interface DropdownOption {\r\n  value: string;\r\n  label: string;\r\n  style?: any; // For individual option styling, e.g., font family\r\n}\r\n\r\n@Component({\r\n  tag: 'kritzel-dropdown',\r\n  styleUrl: 'kritzel-dropdown.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelDropdown {\r\n  @Prop() options: DropdownOption[] = [];\r\n  @Watch('options')\r\n  optionsChanged() {\r\n    this.updateInternalValue(this.internalValue, true);\r\n  }\r\n  @Prop() value: string;\r\n  @Watch('value')\r\n  externalValueChanged(newValue: string) {\r\n    if (newValue !== this.internalValue) {\r\n      this.updateInternalValue(newValue, false);\r\n    }\r\n  }\r\n  @Prop() width?: string;\r\n  @Prop() selectStyles?: any = {};\r\n\r\n  @State() internalValue: string;\r\n  @State() hasSuffixContent: boolean = false;\r\n  @State() hasPrefixContent: boolean = false;\r\n\r\n  @Event() valueChanged: EventEmitter<string>;\r\n\r\n  private suffixSlotElement?: HTMLSlotElement;\r\n  private prefixSlotElement?: HTMLSlotElement;\r\n\r\n  componentWillLoad() {\r\n    this.updateInternalValue(this.value, false);\r\n    this.evaluateSuffixContent();\r\n    this.evaluatePrefixContent();\r\n  }\r\n\r\n  private updateInternalValue(proposedValue: string, emitChange: boolean) {\r\n    let finalValue = proposedValue;\r\n    if (this.options && this.options.length > 0) {\r\n      const isValidValue = this.options.some(opt => opt.value === finalValue);\r\n      if (!finalValue || !isValidValue) {\r\n        finalValue = this.options[0].value;\r\n      }\r\n    } else {\r\n      finalValue = undefined;\r\n    }\r\n\r\n    if (this.internalValue !== finalValue) {\r\n      this.internalValue = finalValue;\r\n      if (emitChange || (proposedValue !== finalValue && proposedValue !== undefined)) {\r\n        this.valueChanged.emit(this.internalValue);\r\n      }\r\n    }\r\n  }\r\n\r\n  private handleSelectChange = (event: Event) => {\r\n    const newValue = (event.target as HTMLSelectElement).value;\r\n    if (this.internalValue !== newValue) {\r\n      this.internalValue = newValue;\r\n      this.valueChanged.emit(this.internalValue);\r\n    }\r\n  };\r\n\r\n  private evaluateSuffixContent = () => {\r\n    if (this.suffixSlotElement) {\r\n      const newHasContent = this.suffixSlotElement.assignedNodes({ flatten: true }).length > 0;\r\n      if (this.hasSuffixContent !== newHasContent) {\r\n        this.hasSuffixContent = newHasContent;\r\n      }\r\n    } else {\r\n      if (this.hasSuffixContent !== false) {\r\n        this.hasSuffixContent = false;\r\n      }\r\n    }\r\n  };\r\n\r\n  private evaluatePrefixContent = () => {\r\n    if (this.prefixSlotElement) {\r\n      const newHasContent = this.prefixSlotElement.assignedNodes({ flatten: true }).length > 0;\r\n      if (this.hasPrefixContent !== newHasContent) {\r\n        this.hasPrefixContent = newHasContent;\r\n      }\r\n    } else {\r\n      if (this.hasPrefixContent !== false) {\r\n        this.hasPrefixContent = false;\r\n      }\r\n    }\r\n  };\r\n\r\n  render() {\r\n    const selectClasses = {\r\n      'custom-select': true,\r\n      'has-suffix-border': this.hasSuffixContent,\r\n      'has-prefix-border': this.hasPrefixContent,\r\n    };\r\n\r\n    return (\r\n      <Host>\r\n        <div class=\"dropdown-wrapper\">\r\n          <slot name=\"prefix\" ref={el => (this.prefixSlotElement = el as HTMLSlotElement)} onSlotchange={this.evaluatePrefixContent}></slot>\r\n          <select class={selectClasses} style={{ ...this.selectStyles, width: this.width }} onInput={this.handleSelectChange}>\r\n            {this.options.map(option => (\r\n              <option value={option.value} style={option.style} selected={option.value === this.internalValue}>\r\n                {option.label}\r\n              </option>\r\n            ))}\r\n          </select>\r\n          <slot name=\"suffix\" ref={el => (this.suffixSlotElement = el as HTMLSlotElement)} onSlotchange={this.evaluateSuffixContent}></slot>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/p-BhLtP5Cg.js.map

@@ -1 +0,0 @@
-{"file":"p-BhLtP5Cg.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-controls/kritzel-controls.css?tag=kritzel-controls&encapsulation=shadow","src/components/ui/kritzel-controls/kritzel-controls.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  flex-direction: column;\r\n  user-select: none;\r\n}\r\n\r\n:host(.mobile) {\r\n  --kritzel-controls-control-hover-background-color: transparent;\r\n  --kritzel-controls-control-active-background-color: transparent;\r\n}\r\n\r\n.kritzel-controls {\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n  gap: var(--kritzel-controls-gap, 8px);\r\n  height: 100%;\r\n  padding: var(--kritzel-controls-padding, 8px);\r\n  background-color: var(--kritzel-controls-background-color, #ffffff);\r\n  border-radius: var(--kritzel-controls-border-radius, 16px);\r\n  box-shadow: var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));\r\n  border: var(--kritzel-controls-border, 1px solid #ebebeb);\r\n  z-index: 10000;\r\n  position: relative;\r\n}\r\n\r\n.kritzel-control {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  color: var(--kritzel-controls-control-color, #000000);\r\n  border-radius: var(--kritzel-controls-control-border-radius, 12px);\r\n  padding: var(--kritzel-controls-control-padding, 8px);\r\n  border: none;\r\n  background: none;\r\n  cursor: var(--kritzel-pointer-cursor, pointer);\r\n  -webkit-tap-highlight-color: transparent;\r\n  font-weight: bold;\r\n}\r\n\r\n.kritzel-control:focus,\r\n.kritzel-control:hover {\r\n  background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.kritzel-control:active {\r\n  background-color: var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%));\r\n}\r\n\r\n.kritzel-control.selected,\r\n.kritzel-control.selected:hover,\r\n.kritzel-control.selected:active {\r\n  background-color: var(--kritzel-controls-control-selected-background-color, #007AFF) !important;\r\n  color: var(--kritzel-controls-control-selected-color, #ffffff) !important;\r\n}\r\n\r\n.kritzel-control.selected:focus {\r\n    background-color: var(--kritzel-controls-control-selected-background-color, #007bffe3) !important;\r\n\r\n}\r\n\r\n\r\n/* Split-button control styles */\r\n.kritzel-control-split {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  border-radius: var(--kritzel-controls-control-border-radius, 12px);\r\n  color: var(--kritzel-controls-control-color, #000000);\r\n}\r\n\r\n.kritzel-control-split .kritzel-control-main {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  padding: var(--kritzel-controls-control-padding, 8px);\r\n  border: none;\r\n  background: none;\r\n  cursor: var(--kritzel-pointer-cursor, pointer);\r\n  -webkit-tap-highlight-color: transparent;\r\n  border-radius: var(--kritzel-controls-control-border-radius, 12px);\r\n  color: inherit;\r\n}\r\n\r\n/* When selected, main button only has left-rounded corners (dropdown appears on right) */\r\n.kritzel-control-split.selected .kritzel-control-main {\r\n  border-radius: var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px);\r\n}\r\n\r\n.kritzel-control-split .kritzel-control-dropdown {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  align-self: stretch;\r\n  border: none;\r\n  background: none;\r\n  cursor: var(--kritzel-pointer-cursor, pointer);\r\n  -webkit-tap-highlight-color: transparent;\r\n  border-radius: 0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;\r\n  color: inherit;\r\n  \r\n  /* Hidden state - collapsed with no visibility */\r\n  width: 0;\r\n  padding: 0;\r\n  opacity: 0;\r\n  overflow: hidden;\r\n  pointer-events: none;\r\n  \r\n  /* Smooth transition */\r\n  transition: width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out;\r\n}\r\n\r\n.kritzel-control-split .kritzel-control-dropdown.visible {\r\n  width: auto;\r\n  padding: 0 6px;\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n}\r\n\r\n.kritzel-control-split .kritzel-control-main:focus,\r\n.kritzel-control-split .kritzel-control-main:hover,\r\n.kritzel-control-split .kritzel-control-dropdown:focus,\r\n.kritzel-control-split .kritzel-control-dropdown:hover {\r\n  background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.kritzel-control-split .kritzel-control-main:active,\r\n.kritzel-control-split .kritzel-control-dropdown:active {\r\n  background-color: var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%));\r\n}\r\n\r\n.kritzel-control-split.selected {\r\n  background-color: var(--kritzel-controls-control-selected-background-color, #007AFF) !important;\r\n  color: var(--kritzel-controls-control-selected-color, #ffffff) !important;\r\n}\r\n\r\n.kritzel-control-split.selected .kritzel-control-main:hover,\r\n.kritzel-control-split.selected .kritzel-control-dropdown:hover {\r\n  background-color: rgba(255, 255, 255, 0.15);\r\n}\r\n\r\n/* Submenu content styles (positioned by kritzel-tooltip) */\r\n.kritzel-submenu-content {\r\n  display: flex;\r\n  flex-direction: column;\r\n  min-width: 140px;\r\n}\r\n\r\n.kritzel-submenu-item {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  padding: 10px 12px;\r\n  border: none;\r\n  background: none;\r\n  cursor: var(--kritzel-pointer-cursor, pointer);\r\n  border-radius: 8px;\r\n  color: var(--kritzel-controls-control-color, #000000);\r\n  font-size: 14px;\r\n  text-align: left;\r\n  white-space: nowrap;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.kritzel-submenu-item:hover {\r\n  background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.kritzel-submenu-item.active {\r\n  background-color: var(--kritzel-controls-control-selected-background-color, #007AFF);\r\n  color: var(--kritzel-controls-control-selected-color, #ffffff);\r\n}\r\n\r\n.kritzel-submenu-item.active:hover {\r\n  background-color: var(--kritzel-controls-control-selected-background-color, #007AFF);\r\n}\r\n\r\n\r\n.kritzel-config-container {\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  height: 40px;\r\n  box-sizing: border-box;\r\n  -webkit-tap-highlight-color: transparent;\r\n  \r\n  /* Hidden state - collapsed */\r\n  width: 0;\r\n  opacity: 0;\r\n  overflow: hidden;\r\n  pointer-events: none;\r\n  margin-left: calc(-1 * var(--kritzel-controls-gap, 8px));\r\n  \r\n  /* Smooth transition */\r\n  transition: width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out;\r\n}\r\n\r\n.kritzel-config-container.visible {\r\n  width: 40px;\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n  margin-left: 0;\r\n}\r\n\r\n\r\n.kritzel-config {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  cursor: var(--kritzel-pointer-cursor, pointer);\r\n  border-radius: 50%;\r\n}\r\n\r\n.color-container {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 50%;\r\n  cursor: var(--kritzel-pointer-cursor, pointer);\r\n  border: 2px solid transparent;\r\n  box-sizing: border-box;\r\n  background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);\r\n}\r\n\r\n.font-container {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 50%;\r\n  cursor: var(--kritzel-pointer-cursor, pointer);\r\n  border: 2px solid transparent;\r\n  box-sizing: border-box;\r\n  background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);\r\n}\r\n\r\n.no-config {\r\n    height: 24px;\r\n    width: 24px;\r\n    border-radius: 50%;\r\n    border: 1px dashed gray;\r\n}\r\n\r\nkritzel-tooltip {\r\n  z-index: 10001;\r\n}\r\n","import { Component, h, Prop, State, Element, Host, Listen, Event, EventEmitter, Method } from '@stencil/core';\r\nimport { KritzelBrushTool } from '../../../classes/tools/brush-tool.class';\r\nimport { KritzelTextTool } from '../../../classes/tools/text-tool.class';\r\nimport { KritzelToolbarControl, KritzelToolbarSubOption } from '../../../interfaces/toolbar-control.interface';\r\nimport { KritzelBaseTool } from '../../../classes/tools/base-tool.class';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\nimport { KritzelUndoState } from '../../../interfaces/undo-state.interface';\r\n\r\ntype ToolConfig = Record<string, any>;\r\n\r\n@Component({\r\n  tag: 'kritzel-controls',\r\n  styleUrl: 'kritzel-controls.css',\r\n  shadow: true,\r\n  assetsDirs: ['../assets'],\r\n})\r\nexport class KritzelControls {\r\n  @Element() host!: HTMLElement;\r\n\r\n  @Prop() controls: KritzelToolbarControl[] = [];\r\n  @Prop({ mutable: true }) activeControl: KritzelToolbarControl | null = null;\r\n  @Prop() isUtilityPanelVisible: boolean = true;\r\n  @Prop() undoState: KritzelUndoState = null;\r\n\r\n  @Event() isControlsReady: EventEmitter<void>;\r\n\r\n  @State() firstConfig: ToolConfig | null = null;\r\n  @State() isTooltipVisible: boolean = false;\r\n  @State() isTouchDevice: boolean = KritzelDevicesHelper.isTouchDevice();\r\n  @State() selectedSubOptions: Map<string, KritzelToolbarSubOption> = new Map();\r\n  @State() openSubMenuControl: KritzelToolbarControl | null = null;\r\n\r\n  @Listen('click', { target: 'document' })\r\n  handleDocumentClick(event: MouseEvent) {\r\n    const element = event.target as HTMLElement;\r\n\r\n    if (!this.kritzelEngine || element.closest('.kritzel-tooltip')) {\r\n      return;\r\n    }\r\n\r\n    this.isTooltipVisible = false;\r\n  }\r\n\r\n  @Listen('keydown', { target: 'window' })\r\n  handleKeyDown(event) {\r\n    if (event.key === 'Escape') {\r\n      event.preventDefault();\r\n      this.closeTooltip();\r\n      this.openSubMenuControl = null;\r\n      this.kritzelEngine?.enable();\r\n    }\r\n  }\r\n\r\n  @Listen('activeToolChange', { target: 'document' })\r\n  async handleActiveToolChange(event: CustomEvent) {\r\n    this.activeControl = this.controls.find(control => control.tool === event.detail) || null;\r\n  }\r\n\r\n  @Method()\r\n  async closeTooltip() {\r\n    this.isTooltipVisible = false;\r\n  }\r\n\r\n  kritzelEngine: HTMLKritzelEngineElement | null = null;\r\n  tooltipRef: HTMLKritzelTooltipElement | null = null;\r\n\r\n  get activeToolAsTextTool() {\r\n    return this.activeControl?.tool as KritzelTextTool;\r\n  }\r\n\r\n  get activeToolAsBrushTool() {\r\n    return this.activeControl?.tool as KritzelBrushTool;\r\n  }\r\n\r\n  async componentWillLoad() {\r\n    await this.initializeEngine();\r\n    await this.initializeTools();\r\n    this.isControlsReady.emit();\r\n  }\r\n\r\n  private async initializeEngine() {\r\n    await customElements.whenDefined('kritzel-engine');\r\n    this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');\r\n\r\n    if (!this.kritzelEngine) {\r\n      throw new Error('kritzel-engine not found in parent element.');\r\n    }\r\n  }\r\n\r\n  private async initializeTools() {\r\n    for (const c of this.controls) {\r\n      if (c.type === 'tool' && c.tool) {\r\n        c.tool = await this.kritzelEngine.registerTool(c.name, c.tool, c.config);\r\n      }\r\n\r\n      if (c.type === 'tool' && c.isDefault && c.tool) {\r\n        await this.kritzelEngine.changeActiveTool(c.tool as KritzelBaseTool);\r\n        this.activeControl = c;\r\n      }\r\n\r\n      if (c.type === 'config') {\r\n        if (this.firstConfig === null) {\r\n          this.firstConfig = c;\r\n        } else {\r\n          console.warn('Only one config control is allowed. The first one will be used.');\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  private async handleControlClick(control: KritzelToolbarControl) {\r\n    this.activeControl = control;\r\n\r\n    if (this.activeControl.type === 'tool') {\r\n      await this.kritzelEngine.changeActiveTool(this.activeControl.tool as KritzelBaseTool);\r\n    }\r\n  }\r\n\r\n  private handleConfigClick(event: MouseEvent) {\r\n    event.stopPropagation();\r\n    this.isTooltipVisible = !this.isTooltipVisible;\r\n    if(this.isTooltipVisible){\r\n      this.kritzelEngine?.disable();\r\n    } else {\r\n      this.kritzelEngine?.enable();\r\n    }\r\n\r\n    setTimeout(() => {\r\n      this.tooltipRef?.focusContent();\r\n    }, 100);\r\n  }\r\n\r\n  private async handleToolChange(event: CustomEvent) {\r\n    this.activeControl = { ...this.activeControl, tool: event.detail };\r\n    await this.kritzelEngine.changeActiveTool((this.activeControl as any).tool);\r\n  }\r\n\r\n  private handleTooltipClosed() {\r\n    this.isTooltipVisible = false;\r\n    this.kritzelEngine?.enable();\r\n  }\r\n\r\n  /**\r\n   * Get the currently selected sub-option for a control.\r\n   * Returns the first sub-option as default if none is selected.\r\n   */\r\n  private getSelectedSubOption(control: KritzelToolbarControl): KritzelToolbarSubOption | undefined {\r\n    if (!control.subOptions?.length) return undefined;\r\n    return this.selectedSubOptions.get(control.name) || control.subOptions[0];\r\n  }\r\n\r\n  /**\r\n   * Toggle the submenu for a split-button control\r\n   */\r\n  private toggleSubMenu(event: MouseEvent, control: KritzelToolbarControl) {\r\n    event.stopPropagation();\r\n    if (this.openSubMenuControl?.name === control.name) {\r\n      this.openSubMenuControl = null;\r\n    } else {\r\n      this.openSubMenuControl = control;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Select a sub-option and update the tool property\r\n   */\r\n  private async selectSubOption(control: KritzelToolbarControl, option: KritzelToolbarSubOption) {\r\n    // Update the selected sub-options map (create new Map for reactivity)\r\n    const newMap = new Map(this.selectedSubOptions);\r\n    newMap.set(control.name, option);\r\n    this.selectedSubOptions = newMap;\r\n\r\n    // Update the tool property if the tool is instantiated\r\n    if (control.tool && typeof control.tool !== 'function') {\r\n      (control.tool as any)[option.toolProperty] = option.value;\r\n    }\r\n\r\n    // Close the submenu\r\n    this.openSubMenuControl = null;\r\n\r\n    // Activate this control\r\n    await this.handleControlClick(control);\r\n  }\r\n\r\n  render() {\r\n    const hasConfigUI = this.activeControl?.tool instanceof KritzelBrushTool || \r\n                        this.activeControl?.tool instanceof KritzelTextTool;\r\n\r\n    return (\r\n      <Host\r\n        class={{\r\n          mobile: this.isTouchDevice,\r\n        }}\r\n      >\r\n        {this.isUtilityPanelVisible && (\r\n          <kritzel-utility-panel\r\n            style={{\r\n              position: 'absolute',\r\n              bottom: '56px',\r\n              left: '12px',\r\n            }}\r\n            undoState={this.undoState}\r\n            onUndo={() => this.kritzelEngine?.undo()}\r\n            onRedo={() => this.kritzelEngine?.redo()}\r\n            onDelete={() => this.kritzelEngine?.delete()}\r\n          ></kritzel-utility-panel>\r\n        )}\r\n\r\n        <div class=\"kritzel-controls\">\r\n          {this.controls.map(control => {\r\n            if (control.type === 'tool') {\r\n              // Check if this control has sub-options (split-button)\r\n              if (control.subOptions?.length) {\r\n                const selectedSubOption = this.getSelectedSubOption(control);\r\n                const isActive = this.activeControl?.name === control.name;\r\n                const isSubMenuOpen = this.openSubMenuControl?.name === control.name;\r\n\r\n              return (\r\n                  <div\r\n                    class={{\r\n                      'kritzel-control-split': true,\r\n                      'selected': isActive,\r\n                    }}\r\n                    key={control.name}\r\n                    ref={el => { if (el) (control as any)._anchorRef = el; }}\r\n                  >\r\n                    <button\r\n                      class=\"kritzel-control-main\"\r\n                      onClick={() => this.handleControlClick(control)}\r\n                      title={selectedSubOption?.label}\r\n                    >\r\n                      <kritzel-icon name={selectedSubOption?.icon || control.icon}></kritzel-icon>\r\n                    </button>\r\n                    <button\r\n                      class={{\r\n                        'kritzel-control-dropdown': true,\r\n                        'visible': isActive,\r\n                      }}\r\n                      onClick={(e) => this.toggleSubMenu(e, control)}\r\n                      aria-label=\"Select shape type\"\r\n                      aria-expanded={isSubMenuOpen ? 'true' : 'false'}\r\n                      tabIndex={isActive ? 0 : -1}\r\n                    >\r\n                      <kritzel-icon name=\"chevron-down\" size={12}></kritzel-icon>\r\n                    </button>\r\n\r\n                    <kritzel-tooltip\r\n                      isVisible={isSubMenuOpen}\r\n                      anchorElement={(control as any)._anchorRef}\r\n                      onTooltipClosed={() => { this.openSubMenuControl = null; }}\r\n                    >\r\n                      <div class=\"kritzel-submenu-content\">\r\n                        {control.subOptions.map(option => (\r\n                          <button\r\n                            class={{\r\n                              'kritzel-submenu-item': true,\r\n                              'active': option.id === selectedSubOption?.id,\r\n                            }}\r\n                            key={option.id}\r\n                            onClick={() => this.selectSubOption(control, option)}\r\n                          >\r\n                            <kritzel-icon name={option.icon} size={20}></kritzel-icon>\r\n                            <span>{option.label}</span>\r\n                          </button>\r\n                        ))}\r\n                      </div>\r\n                    </kritzel-tooltip>\r\n                  </div>\r\n                );\r\n              }\r\n\r\n              // Regular tool control (no sub-options)\r\n              return (\r\n                <button\r\n                  class={{\r\n                    'kritzel-control': true,\r\n                    'selected': this.activeControl?.name === control?.name,\r\n                  }}\r\n                  key={control.name}\r\n                  onClick={_event => this.handleControlClick?.(control)}\r\n                >\r\n                  <kritzel-icon name={control.icon}></kritzel-icon>\r\n                </button>\r\n              );\r\n            }\r\n\r\n            if (control.type === 'config' && control.name === this.firstConfig?.name && this.activeControl) {\r\n              return (\r\n                <div \r\n                  class={{\r\n                    'kritzel-config-container': true,\r\n                    'visible': hasConfigUI,\r\n                  }}\r\n                  key={control.name}\r\n                >\r\n                  <kritzel-tooltip\r\n                    ref={el => (this.tooltipRef = el)}\r\n                    isVisible={this.isTooltipVisible}\r\n                    anchorElement={this.host.shadowRoot?.querySelector('.kritzel-config-container') as HTMLElement}\r\n                    onTooltipClosed={() => this.handleTooltipClosed()}\r\n                  >\r\n                    <div style={{ width: '294px', height: '100%' }}>\r\n                      {this.activeControl.name === 'brush' && (\r\n                        <kritzel-control-brush-config tool={this.activeToolAsBrushTool} onToolChange={event => this.handleToolChange?.(event)}></kritzel-control-brush-config>\r\n                      )}\r\n\r\n                      {this.activeControl.name === 'text' && (\r\n                        <kritzel-control-text-config tool={this.activeToolAsTextTool} onToolChange={event => this.handleToolChange?.(event)}></kritzel-control-text-config>\r\n                      )}\r\n                    </div>\r\n                  </kritzel-tooltip>\r\n\r\n                  <div\r\n                    tabIndex={hasConfigUI ? 0 : -1}\r\n                    class=\"kritzel-config\"\r\n                    onClick={event => this.handleConfigClick?.(event)}\r\n                    onKeyDown={event => {\r\n                      if (event.key === 'Enter') {\r\n                        this.handleConfigClick?.(event as any);\r\n                      }\r\n                    }}\r\n                    style={{\r\n                      cursor: 'pointer',\r\n                    }}\r\n                  >\r\n                    {this.activeControl.tool instanceof KritzelBrushTool && (\r\n                      <div class=\"color-container\">\r\n                        <kritzel-color\r\n                          value={this.activeToolAsBrushTool?.color}\r\n                          size={this.activeToolAsBrushTool?.size}\r\n                          style={{\r\n                            borderRadius: '50%',\r\n                            border: 'none',\r\n                          }}\r\n                        ></kritzel-color>\r\n                      </div>\r\n                    )}\r\n\r\n                    {this.activeControl.tool instanceof KritzelTextTool && (\r\n                      <div class=\"font-container\">\r\n                        <kritzel-font\r\n                          fontFamily={this.activeToolAsTextTool?.fontFamily}\r\n                          size={this.activeToolAsTextTool?.fontSize}\r\n                          color={this.activeToolAsTextTool?.fontColor}\r\n                        ></kritzel-font>\r\n                      </div>\r\n                    )}\r\n                  </div>\r\n                </div>\r\n              );\r\n            }\r\n          })}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/p-CFH6XRL5.js.map

@@ -1 +0,0 @@
-{"file":"p-CFH6XRL5.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,uzBAAuzB;;MCYv0B,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;;;;;;;;;AACpB,IAAA,WAAW,GAAiB;AAClC,QAAA,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;AAClC,QAAA,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;AACtC,QAAA,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE;AAC1C,QAAA,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;AACpC,QAAA,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,EAAE;AAChD,QAAA,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;AACtD,QAAA,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;AACtC,QAAA,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;AACxC,QAAA,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;AAC9C,QAAA,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;KACvD;AAEwB,IAAA,kBAAkB;AAElC,IAAA,gBAAgB;IAEzB,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;YACnD,MAAM,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,kBAAkB,CAAC;YAC9F,IAAI,CAAC,IAAI,CAAC,kBAAkB,IAAI,CAAC,kBAAkB,EAAE;gBACnD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK;;;;AAKjD,IAAA,yBAAyB,GAAG,CAAC,KAA0B,KAAI;QACjE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;AAC1C,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,KAAK;YACtD,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,KAAK,EAAE,MAAM,CAAC,KAAK;AACnB,YAAA,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,KAAK,EAAE;AACpC,SAAA,CAAC,CAAC;AAEH,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CACE,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,eAAe,EACxB,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAC9B,cAAc,EAAE,IAAI,CAAC,yBAAyB,EAC9C,YAAY,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,kBAAkB,EAAE,EAAA,EAErD,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,QAAQ,EAAW,EAAA,GAAA,CAAA,EAC1D,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAC,IAAI,EAAC,QAAQ,EAAW,EAAA,GAAA,CAAA,CACrD,CACd;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-font-family/kritzel-font-family.css?tag=kritzel-font-family&encapsulation=shadow","src/components/shared/kritzel-font-family/kritzel-font-family.tsx"],"sourcesContent":[":host {\r\n  display: flex; \r\n  align-items: flex-start; \r\n  gap: 8px; \r\n  padding: 8px; \r\n  box-sizing: border-box; \r\n  width: 100%;\r\n}\r\n\r\n.font-style-button {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 42px;\r\n  height: 32px;\r\n  padding: 0;\r\n  border: none;\r\n  outline: none;\r\n  background: none;\r\n  cursor: var(--kritzel-pointer-cursor, pointer);\r\n  border-radius: 0; \r\n  color: var(--control-text-color);\r\n  font-weight: bold;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.font-style-button:not(:last-child) {\r\n  border-right: 1px solid #333333; \r\n}\r\n\r\n.font-style-button:hover {\r\n  background-color: var(--control-hover-bg);\r\n}\r\n\r\n.font-style-button:active {\r\n  background-color: var(--control-active-bg);\r\n}\r\n\r\n.font-style-button.selected,\r\n.font-style-button.selected:hover,\r\n.font-style-button.selected:active {\r\n  background-color: var(--control-selected-bg);\r\n  color: var(--control-selected-color);\r\n}\r\n\r\n.font-style-button.italic-text {\r\n  font-style: italic;\r\n}\r\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\nexport interface FontOption {\r\n  value: string;\r\n  label: string;\r\n}\r\n\r\n@Component({\r\n  tag: 'kritzel-font-family',\r\n  styleUrl: 'kritzel-font-family.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelFontFamily {\r\n  @Prop() fontOptions: FontOption[] = [\r\n    { value: 'arial', label: 'Arial' },\r\n    { value: 'verdana', label: 'Verdana' },\r\n    { value: 'helvetica', label: 'Helvetica' },\r\n    { value: 'tahoma', label: 'Tahoma' },\r\n    { value: 'trebuchet ms', label: 'Trebuchet MS' },\r\n    { value: 'times new roman', label: 'Times New Roman' },\r\n    { value: 'georgia', label: 'Georgia' },\r\n    { value: 'garamond', label: 'Garamond' },\r\n    { value: 'courier new', label: 'Courier New' },\r\n    { value: 'brush script mt', label: 'Brush Script MT' },\r\n  ];\r\n\r\n  @Prop({ mutable: true }) selectedFontFamily: string;\r\n\r\n  @Event() fontFamilyChange: EventEmitter<string>;\r\n\r\n  componentWillLoad() {\r\n    if (this.fontOptions && this.fontOptions.length > 0) {\r\n      const isValidCurrentFont = this.fontOptions.some(opt => opt.value === this.selectedFontFamily);\r\n      if (!this.selectedFontFamily || !isValidCurrentFont) {\r\n        this.selectedFontFamily = this.fontOptions[0].value;\r\n      }\r\n    }\r\n  }\r\n\r\n  private handleDropdownValueChange = (event: CustomEvent<string>) => {\r\n    this.fontFamilyChange.emit(event.detail);\r\n  };\r\n\r\n  render() {\r\n    const dropdownOptions = this.fontOptions.map(option => ({\r\n      value: option.value,\r\n      label: option.label,\r\n      style: { fontFamily: option.value },\r\n    }));\r\n\r\n    return (\r\n      <Host>\r\n        <kritzel-dropdown\r\n          options={dropdownOptions}\r\n          value={this.selectedFontFamily}\r\n          onValueChanged={this.handleDropdownValueChange}\r\n          selectStyles={{ fontFamily: this.selectedFontFamily }}\r\n        >\r\n          <button class=\"font-style-button\" slot=\"suffix\">B</button>\r\n          <button class=\"font-style-button italic-text\" slot=\"suffix\">I</button>\r\n        </kritzel-dropdown>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}