kritzel-stencil 0.1.10 → 0.1.11

package/dist/components/{p-CQV1Azq8.js → p-BvoIoyaZ.js}

@@ -1 +1 @@
-import{p as t,H as o,c as e,h as r,d as i,t as l}from"./p-Cj-I2_Og.js";import{h as n,e as s,g as c,f as a,i as d}from"./p-CVPA34Tp.js";import{K as p}from"./p-l10It7Nm.js";import{K as h,d as k}from"./p-21gD4R2M.js";import{a as u,d as f}from"./p-4IV4i5r-.js";import{d as b}from"./p-CCiIxqPN.js";import{d as z}from"./p-CIiUpoDZ.js";import{d as g}from"./p-BNYfuHT_.js";import{d as m}from"./p-DN1_B6ky.js";import{d as v}from"./p-CnO82wQT.js";import{d as y}from"./p-DPPpa9So.js";import{d as x}from"./p-5Vxv1ZKh.js";import{d as w}from"./p-yzi-W-0P.js";import{d as C}from"./p-BdnNVYxB.js";import{d as T}from"./p-K1KgiJP8.js";import{d as j}from"./p-zoMPunTt.js";import{d as S}from"./p-BhTMzfWj.js";const E=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.isControlsReady=e(this,"isControlsReady")}get host(){return this}controls=[];activeControl=null;isUtilityPanelVisible=!0;undoState=null;isControlsReady;firstConfig=null;isTooltipVisible=!1;isTouchDevice=p.isTouchDevice();selectedSubOptions=new Map;openSubMenuControl=null;canScrollLeft=!1;canScrollRight=!1;needsScrolling=!1;displayValues=null;handleDocumentClick(t){this.kritzelEngine&&(t.composedPath().some((t=>{const o=t;return!!o.tagName&&("kritzel-tooltip"===o.tagName.toLowerCase()||o.classList?.contains("kritzel-tooltip"))}))||(this.isTooltipVisible=!1))}handleKeyDown(t){"Escape"===t.key&&(t.preventDefault(),this.closeTooltip(),this.openSubMenuControl=null,this.kritzelEngine?.enable())}async handleActiveToolChange(t){this.activeControl=this.controls.find((o=>o.tool===t.detail))||null,this.activeControl?.tool&&this.updateDisplayValues(this.activeControl.tool)}handleSelectionChange(){this.activeControl?.tool instanceof n&&this.updateDisplayValues(this.activeControl.tool)}async closeTooltip(){this.isTooltipVisible=!1}kritzelEngine=null;tooltipRef=null;toolsScrollRef=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=t=>{const o=t.detail;this.displayValues&&this.displayValues.color===o.color&&this.displayValues.size===o.size&&this.displayValues.fontFamily===o.fontFamily||(this.displayValues=o)};updateDisplayValues(t){const o=h.getToolConfig(t);if(!o)return void(this.displayValues=null);const e=t[o.sizeProperty],r={color:u.applyOpacity(t[o.colorProperty],t[o.opacityProperty]??1),size:e};t instanceof c&&(r.fontFamily=t.fontFamily),this.displayValues&&this.displayValues.color===r.color&&this.displayValues.size===r.size&&this.displayValues.fontFamily===r.fontFamily||(this.displayValues=r)}async componentWillLoad(){await this.initializeEngine(),await this.initializeTools(),this.isControlsReady.emit()}componentDidLoad(){this.updateScrollIndicators()}updateScrollIndicators(){if(!this.toolsScrollRef)return;const{scrollLeft:t,scrollWidth:o,clientWidth:e}=this.toolsScrollRef;this.canScrollLeft=t>2,this.canScrollRight=t+e<o-2,this.needsScrolling=o>e}handleToolsScroll=()=>{this.updateScrollIndicators()};async initializeEngine(){if(await customElements.whenDefined("kritzel-engine"),this.kritzelEngine=this.host.parentElement.querySelector("kritzel-engine"),!this.kritzelEngine)throw new Error("kritzel-engine not found in parent element.")}async initializeTools(){for(const t of this.controls)"tool"===t.type&&t.tool&&(t.tool=await this.kritzelEngine.registerTool(t.name,t.tool,t.config)),"tool"===t.type&&t.isDefault&&t.tool&&(await this.kritzelEngine.changeActiveTool(t.tool),this.activeControl=t,this.updateDisplayValues(t.tool)),"config"===t.type&&(null===this.firstConfig?this.firstConfig=t:console.warn("Only one config control is allowed. The first one will be used."))}async handleControlClick(t){this.activeControl=t,"tool"===this.activeControl.type&&(this.updateDisplayValues(this.activeControl.tool),await this.kritzelEngine.changeActiveTool(this.activeControl.tool))}handleConfigClick(t){t.stopPropagation(),this.isTooltipVisible=!this.isTooltipVisible,this.isTooltipVisible?this.kritzelEngine?.disable():this.kritzelEngine?.enable(),setTimeout((()=>{this.tooltipRef?.focusContent()}),100)}async handleToolChange(t){this.activeControl={...this.activeControl,tool:t.detail},await this.kritzelEngine.changeActiveTool(this.activeControl.tool)}handleTooltipClosed(){this.isTooltipVisible=!1,this.kritzelEngine?.enable()}getSelectedSubOption(t){if(t.subOptions?.length)return this.selectedSubOptions.get(t.name)||t.subOptions[0]}toggleSubMenu(t,o){t.stopPropagation(),this.openSubMenuControl=this.openSubMenuControl?.name===o.name?null:o}async selectSubOption(t,o){const e=new Map(this.selectedSubOptions);e.set(t.name,o),this.selectedSubOptions=e,t.tool&&"function"!=typeof t.tool&&(t.tool[o.toolProperty]=o.value),this.openSubMenuControl=null,await this.handleControlClick(t)}render(){const t=this.activeControl?.tool instanceof s||this.activeControl?.tool instanceof c||this.activeControl?.tool instanceof a||this.activeControl?.tool instanceof d||this.activeControl?.tool instanceof n&&this.activeControl.tool.hasSelection(),o=this.controls.filter((t=>"tool"===t.type)),e=this.controls.find((t=>"config"===t.type&&t.name===this.firstConfig?.name));return r(i,{key:"2a96690d91dc61301b88ad6869944c6a967f84c0",class:{mobile:this.isTouchDevice}},this.isUtilityPanelVisible&&r("kritzel-utility-panel",{key:"de4adca1a4067767062357b1ec9399bd3b4a1120",style:{position:"absolute",bottom:"56px",left:"12px"},undoState:this.undoState,onUndo:()=>this.kritzelEngine?.undo(),onRedo:()=>this.kritzelEngine?.redo(),onDelete:()=>this.kritzelEngine?.delete()}),r("div",{key:"8bdd03a0f6e830c23c71b567116102c80fb1078d",class:"kritzel-controls"},r("div",{key:"42cd7de6aa6402d3599a5565c866b63bdd441052",class:{"scroll-indicator-left":!0,visible:this.canScrollLeft}}),r("div",{key:"3e6ccb6f818218582ce3275a68068d8a51703e33",class:"kritzel-tools-scroll",ref:t=>{this.toolsScrollRef=t,t&&this.updateScrollIndicators()},onScroll:this.handleToolsScroll},o.map((t=>{if(t.subOptions?.length){const o=this.getSelectedSubOption(t),e=this.activeControl?.name===t.name,i=this.openSubMenuControl?.name===t.name;return r("div",{class:{"kritzel-control-split":!0,selected:e},key:t.name,ref:o=>{o&&(t._anchorRef=o)}},r("button",{class:"kritzel-control-main",onClick:()=>this.handleControlClick(t),title:o?.label},r("kritzel-icon",{name:o?.icon||t.icon})),r("button",{class:{"kritzel-control-dropdown":!0,visible:e},onClick:o=>this.toggleSubMenu(o,t),"aria-label":"Select shape type","aria-expanded":i?"true":"false",tabIndex:e?0:-1},r("kritzel-icon",{name:"chevron-down",size:12})),r("kritzel-tooltip",{isVisible:i,anchorElement:t._anchorRef,onTooltipClosed:()=>{this.openSubMenuControl=null}},r("div",{class:"kritzel-submenu-content"},t.subOptions.map((e=>r("button",{class:{"kritzel-submenu-item":!0,active:e.id===o?.id},key:e.id,onClick:()=>this.selectSubOption(t,e)},r("kritzel-icon",{name:e.icon,size:20}),r("span",null,e.label)))))))}return r("button",{class:{"kritzel-control":!0,selected:this.activeControl?.name===t?.name},key:t.name,onClick:()=>this.handleControlClick?.(t)},r("kritzel-icon",{name:t.icon}))}))),r("div",{key:"74644e3208248737d782fb0da927c793dd300b21",class:{"scroll-indicator-right":!0,visible:this.canScrollRight&&!(e&&this.activeControl&&t)}}),e&&this.activeControl&&r("div",{class:{"kritzel-config-container":!0,visible:t},key:e.name},r("div",{key:"9870a55579c1e43f8463aac4031860bf1394e1e3",class:{"config-gradient-left":!0,visible:this.needsScrolling}}),r("kritzel-tooltip",{key:"1c1a5161a6f1a85b528c0f3331a72abbe4ebe46e",ref:t=>this.tooltipRef=t,isVisible:this.isTooltipVisible,anchorElement:this.host.shadowRoot?.querySelector(".kritzel-config-container"),onTooltipClosed:()=>this.handleTooltipClosed()},r("kritzel-tool-config",{key:"3e31d93ed47910c3ba8bbe1eb4be44f2be88bae6",tool:this.activeControl.tool,onToolChange:t=>this.handleToolChange?.(t),onDisplayValuesChange:this.handleDisplayValuesChange,style:{width:"100%",height:"100%"}})),r("div",{key:"80d8b0f4fa2c8bcf111567c09204275814fe6246",tabIndex:t?0:-1,class:"kritzel-config",onClick:t=>this.handleConfigClick?.(t),onKeyDown:t=>{"Enter"===t.key&&this.handleConfigClick?.(t)},style:{cursor:"pointer"}},this.activeControl.tool instanceof c&&this.displayValues?r("div",{class:"font-container"},r("kritzel-font",{fontFamily:this.displayValues.fontFamily,size:this.displayValues.size,color:this.displayValues.color})):this.displayValues&&r("div",{class:"color-container"},r("kritzel-color",{value:this.displayValues.color,size:this.displayValues.size,style:{borderRadius:"50%",border:"none"}}))))))}static get assetsDirs(){return["../assets"]}static get style(){return":host{display:flex;flex-direction:column;user-select:none;max-width:calc(100vw - 16px)}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:10000;position:relative;max-width:100%;overflow:hidden}.kritzel-tools-scroll{display:flex;flex-direction:row;align-items:center;gap:var(--kritzel-controls-gap, 8px);overflow-x:auto;overflow-y:hidden;flex:1 1 auto;min-width:0;scrollbar-width:none;-ms-overflow-style:none}.kritzel-tools-scroll::-webkit-scrollbar{display:none}.scroll-indicator-left,.scroll-indicator-right{position:absolute;top:0;bottom:0;width:32px;pointer-events:none;opacity:0;transition:opacity 0.2s ease-out;z-index:1}.scroll-indicator-left{left:0;background:linear-gradient(to right, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:var(--kritzel-controls-border-radius, 16px) 0 0 var(--kritzel-controls-border-radius, 16px)}.scroll-indicator-right{right:0;background:linear-gradient(to left, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:0 var(--kritzel-controls-border-radius, 16px) var(--kritzel-controls-border-radius, 16px) 0}.scroll-indicator-left.visible,.scroll-indicator-right.visible{opacity:1}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-control-split{position:relative;display:flex;align-items:center;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:var(--kritzel-controls-control-color, #000000)}.kritzel-control-split .kritzel-control-main{display:flex;justify-content:center;align-items:center;padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:inherit}.kritzel-control-split.selected .kritzel-control-main{border-radius:var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px)}.kritzel-control-split .kritzel-control-dropdown{display:flex;justify-content:center;align-items:center;align-self:stretch;border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;color:inherit;width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;transition:width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out}.kritzel-control-split .kritzel-control-dropdown.visible{width:auto;padding:0 6px;opacity:1;pointer-events:auto}.kritzel-control-split .kritzel-control-main:focus,.kritzel-control-split .kritzel-control-main:hover,.kritzel-control-split .kritzel-control-dropdown:focus,.kritzel-control-split .kritzel-control-dropdown:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control-split .kritzel-control-main:active,.kritzel-control-split .kritzel-control-dropdown:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control-split.selected{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control-split.selected .kritzel-control-main:hover,.kritzel-control-split.selected .kritzel-control-dropdown:hover{background-color:rgba(255, 255, 255, 0.15)}.kritzel-submenu-content{display:flex;flex-direction:column;gap:var(--kritzel-submenu-gap, 4px);min-width:140px}.kritzel-submenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:8px;color:var(--kritzel-controls-control-color, #000000);font-size:14px;text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent}.kritzel-submenu-item:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-submenu-item.active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF);color:var(--kritzel-controls-control-selected-color, #ffffff)}.kritzel-submenu-item.active:hover{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;flex-shrink:0;width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:calc(-1 * var(--kritzel-controls-gap, 8px));transition:width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out}.kritzel-config-container.visible{width:40px;opacity:1;pointer-events:auto;margin-left:0;overflow:visible}.config-gradient-left{position:absolute;top:0;bottom:0;left:-32px;width:32px;background:linear-gradient(to right, transparent, var(--kritzel-controls-background-color, #ffffff));pointer-events:none;z-index:1;opacity:0;transition:opacity 0.2s ease-out}.config-gradient-left.visible{opacity:1}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{z-index:10001}"}},[513,"kritzel-controls",{controls:[16],activeControl:[1040],isUtilityPanelVisible:[4,"is-utility-panel-visible"],undoState:[16],firstConfig:[32],isTooltipVisible:[32],isTouchDevice:[32],selectedSubOptions:[32],openSubMenuControl:[32],canScrollLeft:[32],canScrollRight:[32],needsScrolling:[32],displayValues:[32],closeTooltip:[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"],[4,"objectsSelectionChange","handleSelectionChange"]]]);function D(){"undefined"!=typeof customElements&&["kritzel-controls","kritzel-color","kritzel-color-palette","kritzel-dropdown","kritzel-font","kritzel-font-family","kritzel-font-size","kritzel-icon","kritzel-line-endings","kritzel-opacity-slider","kritzel-shape-fill","kritzel-stroke-size","kritzel-tool-config","kritzel-tooltip","kritzel-utility-panel"].forEach((t=>{switch(t){case"kritzel-controls":customElements.get(l(t))||customElements.define(l(t),E);break;case"kritzel-color":customElements.get(l(t))||b();break;case"kritzel-color-palette":customElements.get(l(t))||f();break;case"kritzel-dropdown":customElements.get(l(t))||z();break;case"kritzel-font":customElements.get(l(t))||g();break;case"kritzel-font-family":customElements.get(l(t))||m();break;case"kritzel-font-size":customElements.get(l(t))||v();break;case"kritzel-icon":customElements.get(l(t))||y();break;case"kritzel-line-endings":customElements.get(l(t))||x();break;case"kritzel-opacity-slider":customElements.get(l(t))||w();break;case"kritzel-shape-fill":customElements.get(l(t))||C();break;case"kritzel-stroke-size":customElements.get(l(t))||T();break;case"kritzel-tool-config":customElements.get(l(t))||k();break;case"kritzel-tooltip":customElements.get(l(t))||j();break;case"kritzel-utility-panel":customElements.get(l(t))||S()}}))}export{E as K,D as d}
+import{p as t,H as o,c as e,h as r,d as i,t as l}from"./p-Cj-I2_Og.js";import{h as n,e as s,g as c,f as a,i as d}from"./p-CuifaWTr.js";import{K as h}from"./p-l10It7Nm.js";import{K as p,d as k}from"./p-DuK31Tjt.js";import{a as u,d as f}from"./p-4IV4i5r-.js";import{d as b}from"./p-CCiIxqPN.js";import{d as z}from"./p-CIiUpoDZ.js";import{d as g}from"./p-BNYfuHT_.js";import{d as m}from"./p-DN1_B6ky.js";import{d as v}from"./p-CnO82wQT.js";import{d as y}from"./p-DPPpa9So.js";import{d as x}from"./p-5Vxv1ZKh.js";import{d as w}from"./p-yzi-W-0P.js";import{d as C}from"./p-BdnNVYxB.js";import{d as T}from"./p-K1KgiJP8.js";import{d as j}from"./p-zoMPunTt.js";import{d as S}from"./p-BhTMzfWj.js";const E=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.isControlsReady=e(this,"isControlsReady")}get host(){return this}controls=[];activeControl=null;isUtilityPanelVisible=!0;undoState=null;isControlsReady;firstConfig=null;isTooltipVisible=!1;isTouchDevice=h.isTouchDevice();selectedSubOptions=new Map;openSubMenuControl=null;canScrollLeft=!1;canScrollRight=!1;needsScrolling=!1;displayValues=null;handleDocumentClick(t){this.kritzelEngine&&(t.composedPath().some((t=>{const o=t;return!!o.tagName&&("kritzel-tooltip"===o.tagName.toLowerCase()||o.classList?.contains("kritzel-tooltip"))}))||(this.isTooltipVisible=!1))}handleKeyDown(t){"Escape"===t.key&&(t.preventDefault(),this.closeTooltip(),this.openSubMenuControl=null,this.kritzelEngine?.enable())}async handleActiveToolChange(t){this.activeControl=this.controls.find((o=>o.tool===t.detail))||null,this.activeControl?.tool&&this.updateDisplayValues(this.activeControl.tool)}handleSelectionChange(){this.activeControl?.tool instanceof n&&this.updateDisplayValues(this.activeControl.tool)}async closeTooltip(){this.isTooltipVisible=!1}kritzelEngine=null;tooltipRef=null;toolsScrollRef=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=t=>{const o=t.detail;this.displayValues&&this.displayValues.color===o.color&&this.displayValues.size===o.size&&this.displayValues.fontFamily===o.fontFamily||(this.displayValues=o)};updateDisplayValues(t){const o=p.getToolConfig(t);if(!o)return void(this.displayValues=null);const e=t[o.sizeProperty],r={color:u.applyOpacity(t[o.colorProperty],t[o.opacityProperty]??1),size:e};t instanceof c&&(r.fontFamily=t.fontFamily),this.displayValues&&this.displayValues.color===r.color&&this.displayValues.size===r.size&&this.displayValues.fontFamily===r.fontFamily||(this.displayValues=r)}async componentWillLoad(){await this.initializeEngine(),await this.initializeTools(),this.isControlsReady.emit()}componentDidLoad(){this.updateScrollIndicators()}updateScrollIndicators(){if(!this.toolsScrollRef)return;const{scrollLeft:t,scrollWidth:o,clientWidth:e}=this.toolsScrollRef;this.canScrollLeft=t>2,this.canScrollRight=t+e<o-2,this.needsScrolling=o>e}handleToolsScroll=()=>{this.updateScrollIndicators()};async initializeEngine(){if(await customElements.whenDefined("kritzel-engine"),this.kritzelEngine=this.host.parentElement.querySelector("kritzel-engine"),!this.kritzelEngine)throw new Error("kritzel-engine not found in parent element.")}async initializeTools(){for(const t of this.controls)"tool"===t.type&&t.tool&&(t.tool=await this.kritzelEngine.registerTool(t.name,t.tool,t.config)),"tool"===t.type&&t.isDefault&&t.tool&&(await this.kritzelEngine.changeActiveTool(t.tool),this.activeControl=t,this.updateDisplayValues(t.tool)),"config"===t.type&&(null===this.firstConfig?this.firstConfig=t:console.warn("Only one config control is allowed. The first one will be used."))}async handleControlClick(t){this.activeControl=t,"tool"===this.activeControl.type&&(this.updateDisplayValues(this.activeControl.tool),await this.kritzelEngine.changeActiveTool(this.activeControl.tool))}handleConfigClick(t){t.stopPropagation(),this.isTooltipVisible=!this.isTooltipVisible,this.isTooltipVisible?this.kritzelEngine?.disable():this.kritzelEngine?.enable(),setTimeout((()=>{this.tooltipRef?.focusContent()}),100)}async handleToolChange(t){this.activeControl={...this.activeControl,tool:t.detail},await this.kritzelEngine.changeActiveTool(this.activeControl.tool)}handleTooltipClosed(){this.isTooltipVisible=!1,this.kritzelEngine?.enable()}getSelectedSubOption(t){if(t.subOptions?.length)return this.selectedSubOptions.get(t.name)||t.subOptions[0]}toggleSubMenu(t,o){t.stopPropagation(),this.openSubMenuControl=this.openSubMenuControl?.name===o.name?null:o}async selectSubOption(t,o){const e=new Map(this.selectedSubOptions);e.set(t.name,o),this.selectedSubOptions=e,t.tool&&"function"!=typeof t.tool&&(t.tool[o.toolProperty]=o.value),this.openSubMenuControl=null,await this.handleControlClick(t)}render(){const t=this.activeControl?.tool instanceof s||this.activeControl?.tool instanceof c||this.activeControl?.tool instanceof a||this.activeControl?.tool instanceof d||this.activeControl?.tool instanceof n&&this.activeControl.tool.hasSelection(),o=this.controls.filter((t=>"tool"===t.type)),e=this.controls.find((t=>"config"===t.type&&t.name===this.firstConfig?.name));return r(i,{key:"2a96690d91dc61301b88ad6869944c6a967f84c0",class:{mobile:this.isTouchDevice}},this.isUtilityPanelVisible&&r("kritzel-utility-panel",{key:"de4adca1a4067767062357b1ec9399bd3b4a1120",style:{position:"absolute",bottom:"56px",left:"12px"},undoState:this.undoState,onUndo:()=>this.kritzelEngine?.undo(),onRedo:()=>this.kritzelEngine?.redo(),onDelete:()=>this.kritzelEngine?.delete()}),r("div",{key:"8bdd03a0f6e830c23c71b567116102c80fb1078d",class:"kritzel-controls"},r("div",{key:"42cd7de6aa6402d3599a5565c866b63bdd441052",class:{"scroll-indicator-left":!0,visible:this.canScrollLeft}}),r("div",{key:"3e6ccb6f818218582ce3275a68068d8a51703e33",class:"kritzel-tools-scroll",ref:t=>{this.toolsScrollRef=t,t&&this.updateScrollIndicators()},onScroll:this.handleToolsScroll},o.map((t=>{if(t.subOptions?.length){const o=this.getSelectedSubOption(t),e=this.activeControl?.name===t.name,i=this.openSubMenuControl?.name===t.name;return r("div",{class:{"kritzel-control-split":!0,selected:e},key:t.name,ref:o=>{o&&(t._anchorRef=o)}},r("button",{class:"kritzel-control-main",onClick:()=>this.handleControlClick(t),title:o?.label},r("kritzel-icon",{name:o?.icon||t.icon})),r("button",{class:{"kritzel-control-dropdown":!0,visible:e},onClick:o=>this.toggleSubMenu(o,t),"aria-label":"Select shape type","aria-expanded":i?"true":"false",tabIndex:e?0:-1},r("kritzel-icon",{name:"chevron-down",size:12})),r("kritzel-tooltip",{isVisible:i,anchorElement:t._anchorRef,onTooltipClosed:()=>{this.openSubMenuControl=null}},r("div",{class:"kritzel-submenu-content"},t.subOptions.map((e=>r("button",{class:{"kritzel-submenu-item":!0,active:e.id===o?.id},key:e.id,onClick:()=>this.selectSubOption(t,e)},r("kritzel-icon",{name:e.icon,size:20}),r("span",null,e.label)))))))}return r("button",{class:{"kritzel-control":!0,selected:this.activeControl?.name===t?.name},key:t.name,onClick:()=>this.handleControlClick?.(t)},r("kritzel-icon",{name:t.icon}))}))),r("div",{key:"74644e3208248737d782fb0da927c793dd300b21",class:{"scroll-indicator-right":!0,visible:this.canScrollRight&&!(e&&this.activeControl&&t)}}),e&&this.activeControl&&r("div",{class:{"kritzel-config-container":!0,visible:t},key:e.name},r("div",{key:"9870a55579c1e43f8463aac4031860bf1394e1e3",class:{"config-gradient-left":!0,visible:this.needsScrolling}}),r("kritzel-tooltip",{key:"1c1a5161a6f1a85b528c0f3331a72abbe4ebe46e",ref:t=>this.tooltipRef=t,isVisible:this.isTooltipVisible,anchorElement:this.host.shadowRoot?.querySelector(".kritzel-config-container"),onTooltipClosed:()=>this.handleTooltipClosed()},r("kritzel-tool-config",{key:"3e31d93ed47910c3ba8bbe1eb4be44f2be88bae6",tool:this.activeControl.tool,onToolChange:t=>this.handleToolChange?.(t),onDisplayValuesChange:this.handleDisplayValuesChange,style:{width:"100%",height:"100%"}})),r("div",{key:"80d8b0f4fa2c8bcf111567c09204275814fe6246",tabIndex:t?0:-1,class:"kritzel-config",onClick:t=>this.handleConfigClick?.(t),onKeyDown:t=>{"Enter"===t.key&&this.handleConfigClick?.(t)},style:{cursor:"pointer"}},this.activeControl.tool instanceof c&&this.displayValues?r("div",{class:"font-container"},r("kritzel-font",{fontFamily:this.displayValues.fontFamily,size:this.displayValues.size,color:this.displayValues.color})):this.displayValues&&r("div",{class:"color-container"},r("kritzel-color",{value:this.displayValues.color,size:this.displayValues.size,style:{borderRadius:"50%",border:"none"}}))))))}static get assetsDirs(){return["../assets"]}static get style(){return":host{display:flex;flex-direction:column;user-select:none;max-width:calc(100vw - 16px)}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:10000;position:relative;max-width:100%;overflow:hidden}.kritzel-tools-scroll{display:flex;flex-direction:row;align-items:center;gap:var(--kritzel-controls-gap, 8px);overflow-x:auto;overflow-y:hidden;flex:1 1 auto;min-width:0;scrollbar-width:none;-ms-overflow-style:none}.kritzel-tools-scroll::-webkit-scrollbar{display:none}.scroll-indicator-left,.scroll-indicator-right{position:absolute;top:0;bottom:0;width:32px;pointer-events:none;opacity:0;transition:opacity 0.2s ease-out;z-index:1}.scroll-indicator-left{left:0;background:linear-gradient(to right, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:var(--kritzel-controls-border-radius, 16px) 0 0 var(--kritzel-controls-border-radius, 16px)}.scroll-indicator-right{right:0;background:linear-gradient(to left, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:0 var(--kritzel-controls-border-radius, 16px) var(--kritzel-controls-border-radius, 16px) 0}.scroll-indicator-left.visible,.scroll-indicator-right.visible{opacity:1}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-control-split{position:relative;display:flex;align-items:center;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:var(--kritzel-controls-control-color, #000000)}.kritzel-control-split .kritzel-control-main{display:flex;justify-content:center;align-items:center;padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:inherit}.kritzel-control-split.selected .kritzel-control-main{border-radius:var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px)}.kritzel-control-split .kritzel-control-dropdown{display:flex;justify-content:center;align-items:center;align-self:stretch;border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;color:inherit;width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;transition:width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out}.kritzel-control-split .kritzel-control-dropdown.visible{width:auto;padding:0 6px;opacity:1;pointer-events:auto}.kritzel-control-split .kritzel-control-main:focus,.kritzel-control-split .kritzel-control-main:hover,.kritzel-control-split .kritzel-control-dropdown:focus,.kritzel-control-split .kritzel-control-dropdown:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control-split .kritzel-control-main:active,.kritzel-control-split .kritzel-control-dropdown:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control-split.selected{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control-split.selected .kritzel-control-main:hover,.kritzel-control-split.selected .kritzel-control-dropdown:hover{background-color:rgba(255, 255, 255, 0.15)}.kritzel-submenu-content{display:flex;flex-direction:column;gap:var(--kritzel-submenu-gap, 4px);min-width:140px}.kritzel-submenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:8px;color:var(--kritzel-controls-control-color, #000000);font-size:14px;text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent}.kritzel-submenu-item:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-submenu-item.active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF);color:var(--kritzel-controls-control-selected-color, #ffffff)}.kritzel-submenu-item.active:hover{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;flex-shrink:0;width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:calc(-1 * var(--kritzel-controls-gap, 8px));transition:width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out}.kritzel-config-container.visible{width:40px;opacity:1;pointer-events:auto;margin-left:0;overflow:visible}.config-gradient-left{position:absolute;top:0;bottom:0;left:-32px;width:32px;background:linear-gradient(to right, transparent, var(--kritzel-controls-background-color, #ffffff));pointer-events:none;z-index:1;opacity:0;transition:opacity 0.2s ease-out}.config-gradient-left.visible{opacity:1}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{z-index:10001}"}},[513,"kritzel-controls",{controls:[16],activeControl:[1040],isUtilityPanelVisible:[4,"is-utility-panel-visible"],undoState:[16],firstConfig:[32],isTooltipVisible:[32],isTouchDevice:[32],selectedSubOptions:[32],openSubMenuControl:[32],canScrollLeft:[32],canScrollRight:[32],needsScrolling:[32],displayValues:[32],closeTooltip:[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"],[4,"objectsSelectionChange","handleSelectionChange"]]]);function D(){"undefined"!=typeof customElements&&["kritzel-controls","kritzel-color","kritzel-color-palette","kritzel-dropdown","kritzel-font","kritzel-font-family","kritzel-font-size","kritzel-icon","kritzel-line-endings","kritzel-opacity-slider","kritzel-shape-fill","kritzel-stroke-size","kritzel-tool-config","kritzel-tooltip","kritzel-utility-panel"].forEach((t=>{switch(t){case"kritzel-controls":customElements.get(l(t))||customElements.define(l(t),E);break;case"kritzel-color":customElements.get(l(t))||b();break;case"kritzel-color-palette":customElements.get(l(t))||f();break;case"kritzel-dropdown":customElements.get(l(t))||z();break;case"kritzel-font":customElements.get(l(t))||g();break;case"kritzel-font-family":customElements.get(l(t))||m();break;case"kritzel-font-size":customElements.get(l(t))||v();break;case"kritzel-icon":customElements.get(l(t))||y();break;case"kritzel-line-endings":customElements.get(l(t))||x();break;case"kritzel-opacity-slider":customElements.get(l(t))||w();break;case"kritzel-shape-fill":customElements.get(l(t))||C();break;case"kritzel-stroke-size":customElements.get(l(t))||T();break;case"kritzel-tool-config":customElements.get(l(t))||k();break;case"kritzel-tooltip":customElements.get(l(t))||j();break;case"kritzel-utility-panel":customElements.get(l(t))||S()}}))}export{E as K,D as d}

package/dist/components/{p-BT8qoqo4.js → p-COqRIjtS.js}

@@ -1 +1 @@
-import{p as e,H as t,c as s,h as i,d as l,t as n}from"./p-Cj-I2_Og.js";import{d as a}from"./p-D8A3OvXv.js";import{d as o}from"./p-DPPpa9So.js";import{d as r}from"./p-Bz_LzbTD.js";import{d as c}from"./p-BG4Z2Dwn.js";import{d as g}from"./p-CP3i626h.js";const d="kritzel-settings",m=[{id:"general",label:"General",icon:"settings"},{id:"about",label:"About",icon:"info"}],h=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.settingsChange=s(this,"settingsChange")}isDialogOpen=!1;selectedCategoryId=m[0].id;scaleMin=1e-4;scaleMax=1e3;lockDrawingScale=!0;settingsChange;componentWillLoad(){this.loadSettings()}loadSettings(){const e=localStorage.getItem(d);if(e)try{const t=JSON.parse(e);"number"==typeof t.scaleMin&&(this.scaleMin=t.scaleMin),"number"==typeof t.scaleMax&&(this.scaleMax=t.scaleMax),"boolean"==typeof t.lockDrawingScale&&(this.lockDrawingScale=t.lockDrawingScale)}catch{}}saveSettings(){const e={scaleMin:this.scaleMin,scaleMax:this.scaleMax,lockDrawingScale:this.lockDrawingScale};localStorage.setItem(d,JSON.stringify(e)),this.settingsChange.emit(e)}handleScaleMinChange=e=>{this.scaleMin=e.detail,this.saveSettings()};handleScaleMaxChange=e=>{this.scaleMax=e.detail,this.saveSettings()};handleLockDrawingScaleChange=e=>{this.lockDrawingScale=e.detail,this.saveSettings()};async open(){this.isDialogOpen=!0}closeDialog=()=>{this.isDialogOpen=!1};handleCategorySelect=e=>{this.selectedCategoryId=e.detail.item.id};renderCategoryContent(){switch(this.selectedCategoryId){case"general":return i("div",{class:"settings-content"},i("h3",null,"General Settings"),i("div",{class:"settings-group"},i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Minimum Zoom Level"),i("p",{class:"settings-description"},"Sets the minimum zoom level. Lower values allow zooming out further to see more of the canvas."),i("kritzel-numeric-input",{value:this.scaleMin,min:1e-4,max:1,step:1e-4,onValueChange:this.handleScaleMinChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Maximum Zoom Level"),i("p",{class:"settings-description"},"Sets the maximum zoom level. Higher values allow zooming in closer for detailed work."),i("kritzel-numeric-input",{value:this.scaleMax,min:1,max:1e3,step:1,onValueChange:this.handleScaleMaxChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Lock Drawing Scale"),i("p",{class:"settings-description"},"When enabled, drawn objects maintain a fixed visual size regardless of the current zoom level."),i("kritzel-slide-toggle",{checked:this.lockDrawingScale,label:"Lock Drawing Scale",onCheckedChange:this.handleLockDrawingScaleChange}))));case"about":return i("div",{class:"settings-content"},i("h3",null,"About"),i("p",null,"Kritzel - A drawing application"),i("p",{class:"version-info"},"Version ","0.1.10"));default:return null}}render(){return i(l,{key:"a7c4cb00cd0a4accac4f561ed83f7044e3ec7805"},i("kritzel-dialog",{key:"21c7e2a9af084537284f318fc927c78d8513592c",isOpen:this.isDialogOpen,dialogTitle:"Settings",size:"large",onDialogClose:this.closeDialog},i("kritzel-master-detail",{key:"aac13d47df73f519ca068d67cb87f74bc6a9f212",items:m,selectedItemId:this.selectedCategoryId,onItemSelect:this.handleCategorySelect},this.renderCategoryContent())))}static get style(){return":host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:500;color:var(--kritzel-settings-label-color, #333333);margin:0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}"}},[513,"kritzel-settings",{isDialogOpen:[32],selectedCategoryId:[32],scaleMin:[32],scaleMax:[32],lockDrawingScale:[32],open:[64]}]);function p(){"undefined"!=typeof customElements&&["kritzel-settings","kritzel-dialog","kritzel-icon","kritzel-master-detail","kritzel-numeric-input","kritzel-slide-toggle"].forEach((e=>{switch(e){case"kritzel-settings":customElements.get(n(e))||customElements.define(n(e),h);break;case"kritzel-dialog":customElements.get(n(e))||a();break;case"kritzel-icon":customElements.get(n(e))||o();break;case"kritzel-master-detail":customElements.get(n(e))||r();break;case"kritzel-numeric-input":customElements.get(n(e))||c();break;case"kritzel-slide-toggle":customElements.get(n(e))||g()}}))}export{h as K,p as d}
+import{p as e,H as t,c as s,h as i,d as l,t as n}from"./p-Cj-I2_Og.js";import{d as a}from"./p-D8A3OvXv.js";import{d as o}from"./p-DPPpa9So.js";import{d as r}from"./p-Bz_LzbTD.js";import{d as c}from"./p-BG4Z2Dwn.js";import{d as g}from"./p-CP3i626h.js";const d="kritzel-settings",m=[{id:"general",label:"General",icon:"settings"},{id:"about",label:"About",icon:"info"}],h=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.settingsChange=s(this,"settingsChange")}isDialogOpen=!1;selectedCategoryId=m[0].id;scaleMin=1e-4;scaleMax=1e3;lockDrawingScale=!0;settingsChange;componentWillLoad(){this.loadSettings()}loadSettings(){const e=localStorage.getItem(d);if(e)try{const t=JSON.parse(e);"number"==typeof t.scaleMin&&(this.scaleMin=t.scaleMin),"number"==typeof t.scaleMax&&(this.scaleMax=t.scaleMax),"boolean"==typeof t.lockDrawingScale&&(this.lockDrawingScale=t.lockDrawingScale)}catch{}}saveSettings(){const e={scaleMin:this.scaleMin,scaleMax:this.scaleMax,lockDrawingScale:this.lockDrawingScale};localStorage.setItem(d,JSON.stringify(e)),this.settingsChange.emit(e)}handleScaleMinChange=e=>{this.scaleMin=e.detail,this.saveSettings()};handleScaleMaxChange=e=>{this.scaleMax=e.detail,this.saveSettings()};handleLockDrawingScaleChange=e=>{this.lockDrawingScale=e.detail,this.saveSettings()};async open(){this.isDialogOpen=!0}closeDialog=()=>{this.isDialogOpen=!1};handleCategorySelect=e=>{this.selectedCategoryId=e.detail.item.id};renderCategoryContent(){switch(this.selectedCategoryId){case"general":return i("div",{class:"settings-content"},i("h3",null,"General Settings"),i("div",{class:"settings-group"},i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Minimum Zoom Level"),i("p",{class:"settings-description"},"Sets the minimum zoom level. Lower values allow zooming out further to see more of the canvas."),i("kritzel-numeric-input",{value:this.scaleMin,min:1e-4,max:1,step:1e-4,onValueChange:this.handleScaleMinChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Maximum Zoom Level"),i("p",{class:"settings-description"},"Sets the maximum zoom level. Higher values allow zooming in closer for detailed work."),i("kritzel-numeric-input",{value:this.scaleMax,min:1,max:1e3,step:1,onValueChange:this.handleScaleMaxChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Lock Drawing Scale"),i("p",{class:"settings-description"},"When enabled, drawn objects maintain a fixed visual size regardless of the current zoom level."),i("kritzel-slide-toggle",{checked:this.lockDrawingScale,label:"Lock Drawing Scale",onCheckedChange:this.handleLockDrawingScaleChange}))));case"about":return i("div",{class:"settings-content"},i("h3",null,"About"),i("p",null,"Kritzel - A drawing application"),i("p",{class:"version-info"},"Version ","0.1.11"));default:return null}}render(){return i(l,{key:"a7c4cb00cd0a4accac4f561ed83f7044e3ec7805"},i("kritzel-dialog",{key:"21c7e2a9af084537284f318fc927c78d8513592c",isOpen:this.isDialogOpen,dialogTitle:"Settings",size:"large",onDialogClose:this.closeDialog},i("kritzel-master-detail",{key:"aac13d47df73f519ca068d67cb87f74bc6a9f212",items:m,selectedItemId:this.selectedCategoryId,onItemSelect:this.handleCategorySelect},this.renderCategoryContent())))}static get style(){return":host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:500;color:var(--kritzel-settings-label-color, #333333);margin:0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}"}},[513,"kritzel-settings",{isDialogOpen:[32],selectedCategoryId:[32],scaleMin:[32],scaleMax:[32],lockDrawingScale:[32],open:[64]}]);function p(){"undefined"!=typeof customElements&&["kritzel-settings","kritzel-dialog","kritzel-icon","kritzel-master-detail","kritzel-numeric-input","kritzel-slide-toggle"].forEach((e=>{switch(e){case"kritzel-settings":customElements.get(n(e))||customElements.define(n(e),h);break;case"kritzel-dialog":customElements.get(n(e))||a();break;case"kritzel-icon":customElements.get(n(e))||o();break;case"kritzel-master-detail":customElements.get(n(e))||r();break;case"kritzel-numeric-input":customElements.get(n(e))||c();break;case"kritzel-slide-toggle":customElements.get(n(e))||g()}}))}export{h as K,p as d}