kritzel-stencil 0.1.12 → 0.1.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/kritzel-back-to-content_32.cjs.entry.js +15 -26
- package/dist/collection/components/shared/kritzel-dialog/kritzel-dialog.css +4 -8
- package/dist/collection/components/shared/kritzel-dialog/kritzel-dialog.js +1 -7
- package/dist/collection/components/shared/kritzel-master-detail/kritzel-master-detail.css +4 -8
- package/dist/collection/components/shared/kritzel-master-detail/kritzel-master-detail.js +5 -11
- package/dist/collection/components/shared/kritzel-menu/kritzel-menu.css +5 -0
- package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.css +5 -0
- package/dist/collection/components/ui/kritzel-controls/kritzel-controls.css +2 -0
- package/dist/collection/components/ui/kritzel-export/kritzel-export.css +5 -0
- package/dist/collection/constants/version.js +1 -1
- package/dist/collection/helpers/html.helper.js +2 -1
- package/dist/components/kritzel-controls.js +1 -1
- package/dist/components/kritzel-dialog.js +1 -1
- package/dist/components/kritzel-editor.js +1 -1
- package/dist/components/kritzel-export.js +1 -1
- package/dist/components/kritzel-master-detail.js +1 -1
- package/dist/components/kritzel-menu-item.js +1 -1
- package/dist/components/kritzel-menu.js +1 -1
- package/dist/components/kritzel-more-menu.js +1 -1
- package/dist/components/kritzel-portal.js +1 -1
- package/dist/components/kritzel-settings.js +1 -1
- package/dist/components/kritzel-split-button.js +1 -1
- package/dist/components/kritzel-tooltip.js +1 -1
- package/dist/components/kritzel-workspace-manager.js +1 -1
- package/dist/components/p-9VVxMmQY.js +1 -0
- package/dist/components/{p--aa4aJEU.js → p-B6UZznNo.js} +1 -1
- package/dist/components/p-BML28BJR.js +1 -0
- package/dist/components/p-BtGrZ0-u.js +1 -0
- package/dist/components/{p-zoMPunTt.js → p-C2cNCqzd.js} +1 -1
- package/dist/components/{p-BVGy2ETQ.js → p-C40Eqc_i.js} +1 -1
- package/dist/components/p-C7GNWyf2.js +1 -0
- package/dist/components/{p-BvoIoyaZ.js → p-C8jozyvo.js} +1 -1
- package/dist/components/{p-BbC4EJrJ.js → p-CES8uS8D.js} +1 -1
- package/dist/components/{p-CXGqvg3q.js → p-CEYFDak6.js} +1 -1
- package/dist/components/{p-DB-e1jRv.js → p-CSWxqKCC.js} +1 -1
- package/dist/components/{p-Dm9n3RrJ.js → p-DgMrqt6e.js} +1 -1
- package/dist/esm/kritzel-back-to-content_32.entry.js +15 -26
- package/dist/stencil/p-d7771432.entry.js +9 -0
- package/dist/stencil/stencil.esm.js +1 -1
- package/dist/types/components/shared/kritzel-dialog/kritzel-dialog.d.ts +0 -1
- package/dist/types/constants/version.d.ts +1 -1
- package/package.json +1 -1
- package/dist/components/p-6yo07JPM.js +0 -1
- package/dist/components/p-Bz_LzbTD.js +0 -1
- package/dist/components/p-C6qB08BS.js +0 -1
- package/dist/components/p-DCFa1WDS.js +0 -1
- package/dist/stencil/p-b740c167.entry.js +0 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,H as e,c as i,h as n,d as o,t as s}from"./p-Cj-I2_Og.js";import{K as l}from"./p-l10It7Nm.js";import{d as r}from"./p-DPPpa9So.js";import{d as a,a as u}from"./p-
|
|
1
|
+
import{p as t,H as e,c as i,h as n,d as o,t as s}from"./p-Cj-I2_Og.js";import{K as l}from"./p-l10It7Nm.js";import{d as r}from"./p-DPPpa9So.js";import{d as a,a as u}from"./p-9VVxMmQY.js";import{d as c}from"./p-DgMrqt6e.js";const d=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.mainButtonClick=i(this,"mainButtonClick"),this.itemSelect=i(this,"itemSelect"),this.itemSave=i(this,"itemSave"),this.itemCancel=i(this,"itemCancel"),this.itemToggleChildMenu=i(this,"itemToggleChildMenu"),this.itemCloseChildMenu=i(this,"itemCloseChildMenu"),this.menuOpen=i(this,"menuOpen"),this.menuClose=i(this,"menuClose")}get host(){return this}buttonIcon="plus";dropdownIcon="chevron-down";items=[];mainButtonDisabled=!1;menuButtonDisabled=!1;mainButtonClick;itemSelect;itemSave;itemCancel;itemToggleChildMenu;itemCloseChildMenu;menuOpen;menuClose;isMenuOpen=!1;isTouchDevice=l.isTouchDevice();anchorElement;menuScrollTop=0;splitMenuButtonRef;menuRef;async open(){this.isMenuOpen||(this.isMenuOpen=!0,this.anchorElement=this.host,this.menuOpen.emit())}async focusMenu(){this.menuRef&&await this.menuRef.setFocus()}handleButtonClick=t=>{t.stopPropagation(),this.mainButtonClick.emit()};toggleMenu=t=>{t.stopPropagation(),this.isMenuOpen?this.closeMenu():this.openMenu(t)};openMenu=t=>{t.stopPropagation(),this.isMenuOpen=!0,this.anchorElement=this.host,this.menuOpen.emit(),requestAnimationFrame((()=>{this.menuRef?.setScrollTop(this.menuScrollTop)}))};closeMenu=()=>{this.isMenuOpen=!1,this.anchorElement=null,this.splitMenuButtonRef?.blur(),this.menuClose.emit()};handleItemSelect=t=>{this.itemSelect.emit(t.detail)};handleItemSave=t=>{this.itemSave.emit(t.detail)};handleItemCancel=t=>{this.itemCancel.emit(t.detail)};handleItemToggleChildMenu=t=>{this.itemToggleChildMenu.emit(t.detail)};handleItemCloseChildMenu=t=>{this.itemCloseChildMenu.emit(t.detail)};handleScroll=t=>{this.menuScrollTop=t.target.scrollTop};render(){return n(o,{key:"ba64aa519e5a8f339ead25f011a69c6a98019e78",class:{mobile:this.isTouchDevice}},n("button",{key:"b2cfc9e22af40b5afdc0a0549ca2f5c259143d8f",class:"split-main-button",tabIndex:0,onClick:this.handleButtonClick,disabled:this.mainButtonDisabled},this.buttonIcon&&n("kritzel-icon",{key:"9037e02716eff7b403429154877a41f2c47c28ff",name:this.buttonIcon})),n("div",{key:"ef000190f635751285c477f6b9b0f7e9349bde60",class:"split-divider"}),n("button",{key:"1e577331162fce0e92273f6f7ba476b9474f415b",ref:t=>this.splitMenuButtonRef=t,class:"split-menu-button",tabIndex:0,onClick:this.toggleMenu,disabled:this.menuButtonDisabled},n("kritzel-icon",{key:"d6a0a192de624cfb13e8db7dde4b82b5d2c2f1b7",name:this.dropdownIcon})),n("kritzel-portal",{key:"25e176ca961040486d8f52b231163085d953ef57",anchor:this.anchorElement,offsetY:4,onClose:this.closeMenu},n("kritzel-menu",{key:"8775b923a4cda38de247a14bceafa14df037c1b0",ref:t=>this.menuRef=t,items:this.items,onItemSelect:this.handleItemSelect,onItemSave:this.handleItemSave,onItemCancel:this.handleItemCancel,onItemToggleChildMenu:this.handleItemToggleChildMenu,onItemCloseChildMenu:this.handleItemCloseChildMenu,onClose:this.closeMenu,onScroll:this.handleScroll})))}static get style(){return":host{position:relative;display:flex;align-items:center;font-family:sans-serif;z-index:1;padding:var(--kritzel-split-button-padding, 4px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-split-button-border, 1px solid #ebebeb);gap:var(--kritzel-split-button-gap, 4px)}:host(.mobile){--kritzel-split-button-hover-background-color:transparent}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:var(--kritzel-pointer-cursor, pointer);text-align:center;display:flex;align-items:center;justify-content:center;pointer-events:all;-webkit-tap-highlight-color:transparent}.split-main-button,.split-menu-button{height:auto;display:flex;align-items:center;padding:var(--kritzel-split-button-padding, 8px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);font-size:var(--kritzel-split-button-font-size, 14px)}.split-main-button:hover,.split-menu-button:hover{background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button:focus,.split-menu-button:focus{background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button{gap:var(--kritzel-split-button-gap, 4px)}.split-menu-button{border-left:none;justify-content:center}.split-divider{width:var(--kritzel-split-button-divider-width, 1px);height:24px;background-color:var(--kritzel-split-button-divider-background-color, hsl(0, 0%, 0%, 4.3%))}:disabled{pointer-events:none;opacity:0.5}"}},[513,"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]}]);function h(){"undefined"!=typeof customElements&&["kritzel-split-button","kritzel-icon","kritzel-menu","kritzel-menu-item","kritzel-portal"].forEach((t=>{switch(t){case"kritzel-split-button":customElements.get(s(t))||customElements.define(s(t),d);break;case"kritzel-icon":customElements.get(s(t))||r();break;case"kritzel-menu":customElements.get(s(t))||u();break;case"kritzel-menu-item":customElements.get(s(t))||a();break;case"kritzel-portal":customElements.get(s(t))||c()}}))}export{d as K,h as d}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
class t{static getNumericValueFromStyle(t,n){const e=window.getComputedStyle(t).getPropertyValue(n);return parseFloat(e)||0}static getScrollableParent(t){if(!t)return window;const n=t.parentNode?.host??t.parentElement;if(!n||"BODY"===n.tagName)return window;const e=window.getComputedStyle(n);return"auto"===e.overflow||"auto"===e.overflowY||"scroll"===e.overflow||"scroll"===e.overflowY?n:this.getScrollableParent(n)}static isElementInViewport(t){if(!t)return!1;const n=this.getScrollableParent(t),e=t.getBoundingClientRect();if(n===window){const t=window.innerHeight||document.documentElement.clientHeight,n=window.innerWidth||document.documentElement.clientWidth;return e.top>=0&&e.left>=0&&e.bottom<=t&&e.right<=n}const o=n.getBoundingClientRect();return e.top>=o.top&&e.left>=o.left&&e.bottom<=o.bottom&&e.right<=o.right}static getFocusableElements(t){if(!t)return[];const n=[],e=t=>{t instanceof HTMLElement&&t.matches('a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex="-1"])')&&!t.hasAttribute("disabled")&&(t=>{const n=window.getComputedStyle(t);return"none"!==n.display&&"hidden"!==n.visibility})(t)&&n.push(t),t.shadowRoot&&Array.from(t.shadowRoot.children).forEach(e),"SLOT"===t.tagName&&t.assignedElements({flatten:!0}).forEach(e),t.shadowRoot||Array.from(t.children).forEach(e)};return e(t),n}}export{t as K}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{p as e,H as t,c as o,h as i,d as l,t as a}from"./p-Cj-I2_Og.js";import{K as r}from"./p-BML28BJR.js";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dialogOpen=o(this,"dialogOpen"),this.dialogClose=o(this,"dialogClose")}get host(){return this}isOpen=!1;dialogTitle;closable=!0;closeOnBackdrop=!0;closeOnEscape=!0;autoFocus=!0;trapFocus=!0;size="medium";fullscreenOnMobile=!0;isAnimating=!1;dialogOpen;dialogClose;previousOverflow="";previousActiveElement=null;handleIsOpenChange(e){e?this.openDialog():this.closeDialog()}handleKeyDown(e){this.isOpen&&("Escape"===e.key&&this.closeOnEscape&&(e.preventDefault(),e.stopPropagation(),this.emitClose("escape")),"Tab"===e.key&&this.trapFocus&&this.handleTabKey(e))}async open(){this.isOpen||(this.isOpen=!0)}async close(e="programmatic"){this.emitClose(e)}async focusFirstElement(){this.focusFirst()}componentDidLoad(){this.isOpen&&this.openDialog()}disconnectedCallback(){this.restoreBodyScroll()}openDialog(){this.isAnimating=!0,this.previousActiveElement=document.activeElement,this.lockBodyScroll(),this.dialogOpen.emit(),this.autoFocus&&requestAnimationFrame((()=>{this.focusFirst()})),requestAnimationFrame((()=>{this.isAnimating=!1}))}closeDialog(){this.restoreBodyScroll(),this.returnFocusToPreviousElement()}emitClose(e){this.dialogClose.emit({reason:e})}lockBodyScroll(){this.previousOverflow=document.body.style.overflow,document.body.style.overflow="hidden"}restoreBodyScroll(){document.body.style.overflow=this.previousOverflow}returnFocusToPreviousElement(){this.previousActiveElement?.focus&&this.previousActiveElement.focus()}focusFirst(){const e=this.host.shadowRoot?.querySelector(".dialog-content");if(!e)return;const t=[...r.getFocusableElements(e),...this.getSlottedFocusableElements()];t.length>0?t[0].focus():e.focus()}getSlottedFocusableElements(){const e=this.host.shadowRoot?.querySelectorAll("slot")??[],t=[];return e.forEach((e=>{e.assignedElements({flatten:!0}).forEach((e=>{const o=r.getFocusableElements(e);t.push(...o)}))})),t}handleTabKey(e){const t=this.getSlottedFocusableElements(),o=this.host.shadowRoot?.querySelector(".close-button");if(o&&this.closable&&t.unshift(o),0===t.length)return;const i=t[0],l=t[t.length-1],a=this.getDeepActiveElement();e.shiftKey?a===i&&(e.preventDefault(),l.focus()):a===l&&(e.preventDefault(),i.focus())}getDeepActiveElement(){let e=document.activeElement;for(;e?.shadowRoot?.activeElement;)e=e.shadowRoot.activeElement;return e}handleBackdropClick=e=>{e.stopPropagation(),this.closeOnBackdrop&&this.emitClose("backdrop")};handleCloseButtonClick=e=>{e.stopPropagation(),this.emitClose("close-button")};handleContentClick=e=>{e.stopPropagation()};renderCloseButton(){return this.closable?i("button",{class:"close-button",type:"button","aria-label":"Close dialog",onClick:this.handleCloseButtonClick},i("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},i("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),i("line",{x1:"6",y1:"6",x2:"18",y2:"18"}))):null}renderHeader(){const e=null!==this.host.querySelector('[slot="header"]'),t=!!this.dialogTitle;return e||t||this.closable?i("div",{class:"dialog-header"},e?i("slot",{name:"header"}):t?i("h2",{class:"dialog-title"},this.dialogTitle):null,this.renderCloseButton()):null}renderFooter(){return null!==this.host.querySelector('[slot="footer"]')?i("div",{class:"dialog-footer"},i("slot",{name:"footer"})):null}render(){return this.isOpen?i(l,null,i("div",{class:{backdrop:!0,"is-animating":this.isAnimating},onClick:this.handleBackdropClick},i("div",{class:{"dialog-content":!0,"is-animating":this.isAnimating,[`size-${this.size}`]:!0,"fullscreen-on-mobile":this.fullscreenOnMobile},role:"dialog","aria-modal":"true","aria-labelledby":this.dialogTitle?"dialog-title":void 0,tabIndex:-1,onClick:this.handleContentClick},this.renderHeader(),i("div",{class:"dialog-body"},i("slot",null)),this.renderFooter()))):null}static get watchers(){return{isOpen:[{handleIsOpenChange:0}]}}static get style(){return":host{display:contents}.backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10002;display:flex;align-items:center;justify-content:center;background-color:var(--kritzel-dialog-backdrop-color, rgba(0, 0, 0, 0.5));opacity:1;transition:opacity 150ms ease-out}.backdrop.is-animating{opacity:0}.dialog-content{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-dialog-background-color, #ffffff);border-radius:var(--kritzel-dialog-border-radius, 12px);box-shadow:var(--kritzel-dialog-box-shadow, 0 4px 20px rgba(0, 0, 0, 0.15));border:var(--kritzel-dialog-border, 1px solid #ebebeb);max-height:var(--kritzel-dialog-max-height, 90vh);max-width:var(--kritzel-dialog-max-width, 90vw);overflow:hidden;transform:scale(1);opacity:1;transition:transform 200ms ease-out, opacity 200ms ease-out;font-family:var(--kritzel-dialog-font-family, sans-serif)}.dialog-content.is-animating{transform:scale(0.95);opacity:0}.dialog-content.size-small{width:var(--kritzel-dialog-width-small, 320px);height:var(--kritzel-dialog-height-small, auto)}.dialog-content.size-medium{width:var(--kritzel-dialog-width-medium, 480px);height:var(--kritzel-dialog-height-medium, auto)}.dialog-content.size-large{width:var(--kritzel-dialog-width-large, 640px);height:var(--kritzel-dialog-height-large, auto)}.dialog-content.size-fullscreen{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}@media (max-width: 576px){.backdrop:has(.fullscreen-on-mobile){background-color:transparent}.dialog-content.fullscreen-on-mobile{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:var(--kritzel-dialog-header-padding, 16px 20px);border-bottom:var(--kritzel-dialog-header-border, 1px solid #ebebeb);gap:12px}.dialog-title{margin:0;font-size:var(--kritzel-dialog-title-font-size, 18px);font-weight:var(--kritzel-dialog-title-font-weight, 600);color:var(--kritzel-dialog-title-color, #1a1a1a);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.close-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--kritzel-dialog-close-button-border-radius, 6px);background-color:var(--kritzel-dialog-close-button-background, transparent);color:var(--kritzel-dialog-close-button-color, #666666);cursor:var(--kritzel-pointer-cursor, pointer);transition:background-color 150ms ease, color 150ms ease;flex-shrink:0;-webkit-tap-highlight-color:transparent}.close-button:hover{background-color:var(--kritzel-dialog-close-button-hover-background, #f5f5f5);color:var(--kritzel-dialog-close-button-hover-color, #1a1a1a)}.close-button:active{background-color:var(--kritzel-dialog-close-button-active-background, #ebebeb)}.close-button:focus-visible{outline:revert;outline-offset:revert}.dialog-body{padding:var(--kritzel-dialog-body-padding, 20px);overflow-y:auto;flex:1;scrollbar-color:#ebebeb transparent;scrollbar-width:thin}.dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--kritzel-dialog-footer-gap, 8px);padding:var(--kritzel-dialog-footer-padding, 16px 20px);border-top:var(--kritzel-dialog-footer-border, 1px solid #ebebeb)}::slotted([slot='header']){flex:1}::slotted([slot='footer']){display:contents}"}},[769,"kritzel-dialog",{isOpen:[516,"is-open"],dialogTitle:[1,"dialog-title"],closable:[4],closeOnBackdrop:[4,"close-on-backdrop"],closeOnEscape:[4,"close-on-escape"],autoFocus:[4,"auto-focus"],trapFocus:[4,"trap-focus"],size:[1],fullscreenOnMobile:[4,"fullscreen-on-mobile"],isAnimating:[32],open:[64],close:[64],focusFirstElement:[64]},[[8,"keydown","handleKeyDown"]],{isOpen:[{handleIsOpenChange:0}]}]);function n(){"undefined"!=typeof customElements&&["kritzel-dialog"].forEach((e=>{"kritzel-dialog"===e&&(customElements.get(a(e))||customElements.define(a(e),s))}))}export{s as K,n as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,H as o,c as i,h as s,d as e,t as n}from"./p-Cj-I2_Og.js";import{K as l}from"./p-
|
|
1
|
+
import{p as t,H as o,c as i,h as s,d as e,t as n}from"./p-Cj-I2_Og.js";import{K as l}from"./p-BML28BJR.js";const r=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.tooltipClosed=i(this,"tooltipClosed")}get host(){return this}isVisible=!1;anchorElement;offsetY=24;tooltipClosed;positionX=0;positionY=0;handleOutsideClick(t){this.isVisible&&(t.composedPath().some((t=>t===this.host))||this.tooltipClosed.emit())}handleWindowResize(){this.calculateAdjustedPosition()}async focusContent(){const t=l.getFocusableElements(this.host);t.length>0&&t[0].focus()}componentDidLoad(){this.focusSlottedContent()}componentWillLoad(){this.calculateAdjustedPosition()}componentWillUpdate(){this.calculateAdjustedPosition()}focusSlottedContent(){const t=this.host.shadowRoot?.querySelector("slot"),o=t?.assignedElements()||[];o.length>0&&o[0].focus()}calculateAdjustedPosition(){if(this.isVisible&&this.anchorElement){const t=this.anchorElement.getBoundingClientRect(),o=this.host.shadowRoot?.querySelector(".tooltip-content"),i=o?.getBoundingClientRect(),s=i?.width||0,e=12,n=window.innerWidth-s-e;this.positionX=Math.max(e,Math.min(t.left+t.width/2-s/2,n)),this.positionY=window.innerHeight-t.top+this.offsetY}}render(){return s(e,{key:"de8f3f78ac1b73eecfb373a3234278835efc64db",style:{position:"fixed",zIndex:"9999",transition:"opacity 0.3s ease-in-out, transform 0.3s ease-in-out",visibility:this.isVisible?"visible":"hidden",left:`${this.positionX}px`,bottom:`${this.positionY}px`}},s("div",{key:"bb3e9eb13abb987f19f39741564af72f1e3c9086",class:"tooltip-content",onClick:t=>t.stopPropagation(),onPointerDown:t=>t.stopPropagation(),onMouseDown:t=>t.stopPropagation()},s("slot",{key:"28f0e5e18dde3d285e86ca0af6415f83b90cc10b"})))}static get style(){return":host{width:auto}.tooltip-content{position:relative;padding:8px 12px;border-radius:4px;width:fit-content;background-color:var(--kritzel-controls-tooltip-background-color, #ffffff);color:var(--kritzel-controls-tooltip-color, #000000);padding:var(--kritzel-controls-tooltip-padding, 12px);border-radius:var(--kritzel-controls-tooltip-border-radius, 16px);white-space:nowrap;box-shadow:var(--kritzel-controls-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12))}"}},[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"]]]);function a(){"undefined"!=typeof customElements&&["kritzel-tooltip"].forEach((t=>{"kritzel-tooltip"===t&&(customElements.get(n(t))||customElements.define(n(t),r))}))}export{r as K,a as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,c as o,h as r,d as n,t as i}from"./p-Cj-I2_Og.js";import{d as s}from"./p-DPPpa9So.js";import{d as c,a}from"./p-
|
|
1
|
+
import{p as e,H as t,c as o,h as r,d as n,t as i}from"./p-Cj-I2_Og.js";import{d as s}from"./p-DPPpa9So.js";import{d as c,a}from"./p-9VVxMmQY.js";import{d as m}from"./p-DgMrqt6e.js";const l=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.itemSelect=o(this,"itemSelect")}get host(){return this}items=[{id:"export",label:"Export",icon:"download"},{id:"settings",label:"Settings",icon:"settings"}];icon="ellipsis-vertical";iconSize=24;offsetY=4;itemSelect;menuAnchor=null;buttonRef;toggleMenu=e=>{e.stopPropagation(),this.menuAnchor?this.closeMenu():this.menuAnchor=this.buttonRef};closeMenu=()=>{this.menuAnchor=null};handleMenuItemSelect=e=>{const{item:t,parent:o}=e.detail;t.action&&t.action(t,o),this.itemSelect.emit(e.detail),this.closeMenu()};render(){return r(n,{key:"461bb5cc1a4806529bb7eef05e69c40b69e746b0"},r("button",{key:"a61d549f859adedc92425fbcb5082ab827238dc1",ref:e=>this.buttonRef=e,class:"more-menu-button",onClick:this.toggleMenu},r("kritzel-icon",{key:"e57df2f59bcf988d363ed0c14ab634cc1cd766ca",name:this.icon,size:this.iconSize})),r("kritzel-portal",{key:"6dc78dc95ae139ce48489c7cf7429d66812b4c2b",anchor:this.menuAnchor,offsetY:this.offsetY,onClose:this.closeMenu},r("kritzel-menu",{key:"de0f7d5e50f69083b7214d9d6efcd72efc4a6562",items:this.items,onItemSelect:this.handleMenuItemSelect})))}static get style(){return":host{display:inline-flex}.more-menu-button{display:flex;align-items:center;justify-content:center;width:var(--kritzel-more-menu-button-width, 50px);height:var(--kritzel-more-menu-button-height, 50px);padding:0;border:var(--kritzel-more-menu-button-border, 1px solid #ebebeb);border-radius:var(--kritzel-more-menu-button-border-radius, 12px);background-color:var(--kritzel-more-menu-button-background-color, #ffffff);cursor:var(--kritzel-pointer-cursor, pointer);box-shadow:var(--kritzel-more-menu-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:inherit}.more-menu-button:hover{background-color:var(--kritzel-more-menu-button-hover-background-color, #f5f5f5)}.more-menu-button:focus{background-color:var(--kritzel-more-menu-button-hover-background-color, #f5f5f5)}.more-menu-button:active{background-color:var(--kritzel-more-menu-button-active-background-color, #ebebeb)}"}},[513,"kritzel-more-menu",{items:[16],icon:[1],iconSize:[2,"icon-size"],offsetY:[2,"offset-y"],menuAnchor:[32]}]);function u(){"undefined"!=typeof customElements&&["kritzel-more-menu","kritzel-icon","kritzel-menu","kritzel-menu-item","kritzel-portal"].forEach((e=>{switch(e){case"kritzel-more-menu":customElements.get(i(e))||customElements.define(i(e),l);break;case"kritzel-icon":customElements.get(i(e))||s();break;case"kritzel-menu":customElements.get(i(e))||a();break;case"kritzel-menu-item":customElements.get(i(e))||c();break;case"kritzel-portal":customElements.get(i(e))||m()}}))}export{l as K,u as d}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{p as e,H as t,c as i,h as a,d as r,t as l}from"./p-Cj-I2_Og.js";import{d as o}from"./p-DPPpa9So.js";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.itemSelect=i(this,"itemSelect")}get host(){return this}items=[];selectedItemId;itemSelect;focusedIndex=-1;showMobileDetail=!1;tabRefs=[];watchSelectedItemId(e,t){e!==t&&(this.showMobileDetail=!0)}componentWillRender(){this.tabRefs=[]}handleItemClick=e=>{e.disabled||(this.itemSelect.emit({item:e}),this.showMobileDetail=!0)};handleBackClick=()=>{this.showMobileDetail=!1};handleKeyDown=(e,t,i)=>{const a=this.items.map(((e,t)=>e.disabled?-1:t)).filter((e=>-1!==e)),r=a.indexOf(i);switch(e.key){case"ArrowDown":e.preventDefault(),this.focusTab(a[(r+1)%a.length]);break;case"ArrowUp":e.preventDefault(),this.focusTab(a[(r-1+a.length)%a.length]);break;case"Home":e.preventDefault(),this.focusTab(a[0]);break;case"End":e.preventDefault(),this.focusTab(a[a.length-1]);break;case"Enter":case" ":e.preventDefault(),this.handleItemClick(t)}};focusTab(e){this.focusedIndex=e;const t=this.tabRefs[e];t&&t.focus()}handleFocus=e=>{this.focusedIndex=e};handleBlur=()=>{this.focusedIndex=-1};setTabRef=(e,t)=>{e&&(this.tabRefs[t]=e)};getTabIndex(e,t){return e.disabled?-1:0}render(){const e=this.items.find((e=>e.id===this.selectedItemId)),t="master-detail-panel",i=e?`tab-${e.id}`:void 0;return a(r,{key:"28b34d09819dca22b9edff8367a838e5d161132a"},a("div",{key:"53107e6781946c406c9fccae465d003ef6571cfd",class:{"master-detail-container":!0,"is-mobile-detail-visible":this.showMobileDetail}},a("nav",{key:"d496f8b5975250a2a0ed7007dfeac3875a980e09",class:"master-menu",role:"tablist","aria-orientation":"vertical","aria-label":"Settings categories"},this.items.map(((e,i)=>a("button",{key:e.id,id:`tab-${e.id}`,ref:e=>this.setTabRef(e,i),class:{"menu-item":!0,"is-selected":e.id===this.selectedItemId,"is-disabled":!!e.disabled,"is-focused":i===this.focusedIndex},role:"tab","aria-selected":e.id===this.selectedItemId?"true":"false","aria-controls":t,"aria-disabled":e.disabled?"true":void 0,tabIndex:this.getTabIndex(e,i),disabled:e.disabled,onClick:()=>this.handleItemClick(e),onKeyDown:t=>this.handleKeyDown(t,e,i),onFocus:()=>this.handleFocus(i),onBlur:this.handleBlur},e.icon&&a("kritzel-icon",{name:e.icon,size:20,class:"menu-item-icon"}),a("span",{class:"menu-item-label"},e.label),a("span",{class:"menu-item-chevron","aria-hidden":"true"},a("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"},a("path",{d:"m9 18 6-6-6-6"}))))))),a("div",{key:"8cad78be4c26bd85903caa9debf14517fb6f5f75",id:t,class:"detail-panel",role:"tabpanel","aria-labelledby":i},a("button",{key:"f185a12b0c60bac5bdd4b6992bd9f6cb653d3253",class:"mobile-back-button",onClick:this.handleBackClick,"aria-label":"Back to menu"},a("kritzel-icon",{key:"333e675a242b9d075aaa78f4ee005539b563a6b9",name:"chevron-left",size:20,class:"mobile-back-icon"}),"Back"),a("slot",{key:"ccdf01882b30eea4227eb0da23fccc80fee1937e"}))))}static get watchers(){return{selectedItemId:[{watchSelectedItemId:0}]}}static get style(){return":host{display:block;width:100%;height:100%}.master-detail-container{display:flex;width:100%;height:100%;min-height:var(--kritzel-master-detail-min-height, 300px);gap:var(--kritzel-master-detail-gap, 0);background-color:var(--kritzel-master-detail-background-color, transparent)}.master-menu{display:flex;flex-direction:column;width:var(--kritzel-master-detail-menu-width, 200px);min-width:var(--kritzel-master-detail-menu-min-width, 160px);padding:var(--kritzel-master-detail-menu-padding, 8px);background-color:var(--kritzel-master-detail-menu-background-color, #ffffff);border-right:var(--kritzel-master-detail-menu-border-right, 1px solid #ebebeb);gap:var(--kritzel-master-detail-menu-gap, 4px);overflow-y:auto}.menu-item{display:flex;align-items:center;gap:var(--kritzel-master-detail-menu-item-gap, 10px);padding:var(--kritzel-master-detail-menu-item-padding, 10px 12px);border:none;border-radius:var(--kritzel-master-detail-menu-item-border-radius, 6px);background-color:var(--kritzel-master-detail-menu-item-background-color, transparent);color:var(--kritzel-master-detail-menu-item-color, #333333);font-family:inherit;font-size:var(--kritzel-master-detail-menu-item-font-size, 14px);font-weight:var(--kritzel-master-detail-menu-item-font-weight, 400);text-align:left;cursor:var(--kritzel-pointer-cursor, pointer);transition:background-color 150ms ease, color 150ms ease;-webkit-tap-highlight-color:transparent}.menu-item:hover:not(.is-disabled){background-color:var(--kritzel-master-detail-menu-item-hover-background-color, #ebebeb)}.menu-item:active:not(.is-disabled){background-color:var(--kritzel-master-detail-menu-item-active-background-color, #e0e0e0)}.menu-item.is-selected{background-color:var(--kritzel-master-detail-menu-item-selected-background-color, #0066cc);color:var(--kritzel-master-detail-menu-item-selected-color, #ffffff);font-weight:var(--kritzel-master-detail-menu-item-selected-font-weight, 500)}.menu-item.is-selected:hover{background-color:var(--kritzel-master-detail-menu-item-selected-hover-background-color, #0052a3)}.menu-item.is-disabled{color:var(--kritzel-master-detail-menu-item-disabled-color, #999999);cursor:not-allowed;opacity:0.6}.menu-item:focus-visible{outline:var(--kritzel-master-detail-menu-item-focus-outline, revert);outline-offset:var(--kritzel-master-detail-menu-item-focus-outline-offset, revert)}.menu-item-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.menu-item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.detail-panel{flex:1;min-height:0;padding:var(--kritzel-master-detail-detail-padding, 16px);background-color:var(--kritzel-master-detail-detail-background-color, #ffffff);overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-color:#ebebeb transparent;scrollbar-width:thin}.detail-panel:focus{outline:none}.detail-panel:focus-visible{outline:var(--kritzel-master-detail-detail-focus-outline, revert);outline-offset:var(--kritzel-master-detail-detail-focus-outline-offset, revert)}.mobile-back-button{display:none;align-items:center;gap:8px;background:none;border:none;padding:0 0 16px 0;cursor:pointer;color:var(--kritzel-master-detail-back-button-color, #333333);font-weight:500;font-size:14px;font-family:inherit}.mobile-back-icon{display:flex;align-items:center;flex-shrink:0}.menu-item-chevron{display:none;flex-shrink:0;margin-left:auto;color:var(--kritzel-master-detail-menu-item-chevron-color, #999999)}.menu-item-chevron svg{width:16px;height:16px;stroke:currentColor}@media (max-width: 768px){.master-menu{width:100%;border-right:none}.detail-panel{display:none;width:100%}.master-detail-container.is-mobile-detail-visible .master-menu{display:none}.master-detail-container.is-mobile-detail-visible .detail-panel{display:block}.mobile-back-button{display:flex}.menu-item.is-selected{background-color:transparent;color:var(--kritzel-master-detail-menu-item-color, #333333);font-weight:var(--kritzel-master-detail-menu-item-font-weight, 400)}.menu-item.is-selected:hover{background-color:var(--kritzel-master-detail-menu-item-hover-background-color, #ebebeb)}.menu-item-chevron{display:flex;align-items:center}}"}},[769,"kritzel-master-detail",{items:[16],selectedItemId:[1,"selected-item-id"],focusedIndex:[32],showMobileDetail:[32]},void 0,{selectedItemId:[{watchSelectedItemId:0}]}]);function n(){"undefined"!=typeof customElements&&["kritzel-master-detail","kritzel-icon"].forEach((e=>{switch(e){case"kritzel-master-detail":customElements.get(l(e))||customElements.define(l(e),s);break;case"kritzel-icon":customElements.get(l(e))||o()}}))}export{s as K,n as d}
|
|
@@ -1 +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-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}
|
|
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-CuifaWTr.js";import{K as p}from"./p-l10It7Nm.js";import{K as h,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 x}from"./p-DPPpa9So.js";import{d as y}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-C2cNCqzd.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;padding:4px;margin:-4px;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))||x();break;case"kritzel-line-endings":customElements.get(l(t))||y();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}
|
|
@@ -1 +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-
|
|
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-BtGrZ0-u.js";import{d as o}from"./p-DPPpa9So.js";import{d as r}from"./p-C7GNWyf2.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.13"));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}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,c as s,h as i,d as n,t as l}from"./p-Cj-I2_Og.js";import{K as a}from"./p-n789Y3S-.js";import{O as h}from"./p-B0kd2rUI.js";import{d as o}from"./p-DPPpa9So.js";import{d as r,a as c}from"./p-
|
|
1
|
+
import{p as e,H as t,c as s,h as i,d as n,t as l}from"./p-Cj-I2_Og.js";import{K as a}from"./p-n789Y3S-.js";import{O as h}from"./p-B0kd2rUI.js";import{d as o}from"./p-DPPpa9So.js";import{d as r,a as c}from"./p-9VVxMmQY.js";import{d as u}from"./p-DgMrqt6e.js";import{d as m}from"./p-B6UZznNo.js";const d=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.isWorkspaceManagerReady=s(this,"isWorkspaceManagerReady"),this.workspaceChange=s(this,"workspaceChange")}get host(){return this}activeWorkspace;workspaces=[];isWorkspaceManagerReady;workspaceChange;childMenuAnchor=null;openChildMenuItem=null;newWorkspace=null;editingItemId=null;handleWheel(e){e.ctrlKey&&e.preventDefault()}kritzelEngineRef=null;splitButtonRef;get sortedWorkspaces(){return[this.newWorkspace,...this.workspaces].filter((e=>null!=e)).sort(((e,t)=>t.createdAt.getTime()-e.createdAt.getTime()))}async componentWillLoad(){await this.initializeEngine(),this.isWorkspaceManagerReady.emit()}async initializeEngine(){await customElements.whenDefined("kritzel-engine");const e=this.host.closest("kritzel-editor");this.kritzelEngineRef=e?.querySelector("kritzel-engine")??null,this.kritzelEngineRef||console.warn("kritzel-engine not found in kritzel-editor.")}async select(e,t){this.editingItemId||(e.action?e.action(e,t):this.workspaceChange.emit(e.value))}async add(){await this.splitButtonRef.open(),this.newWorkspace=new a(h.generateUUID(),"New Workspace"),this.editingItemId=this.newWorkspace.id}edit(e){this.openChildMenuItem=null,this.childMenuAnchor=null,requestAnimationFrame((()=>{this.editingItemId=e.id}))}async save(e){if(this.newWorkspace)this.newWorkspace.name=e.label,await(this.kritzelEngineRef?.createWorkspace(this.newWorkspace)),this.workspaceChange.emit(this.newWorkspace);else{const t=e.value;t.name=e.label,await(this.kritzelEngineRef?.updateWorkspace(t))}this.editingItemId=null,this.newWorkspace=null}cancel(){this.newWorkspace=null,this.editingItemId=null}async delete(e){this.openChildMenuItem=null,this.childMenuAnchor=null,await(this.kritzelEngineRef?.deleteWorkspace(e.value)),e.value.id===this.activeWorkspace?.id&&(this.activeWorkspace=this.sortedWorkspaces.find((t=>t.id!==e.value.id))||null,this.workspaceChange.emit(this.activeWorkspace)),await this.splitButtonRef.focusMenu()}toggleChildMenu(e,t){this.openChildMenuItem=e,this.childMenuAnchor=t}closeChildMenu(){this.openChildMenuItem=null,this.childMenuAnchor=null}handleMenuOpen(){this.kritzelEngineRef?.disable()}handleMenuClose(){this.cancel(),this.closeChildMenu(),this.kritzelEngineRef?.enable()}render(){const e=this.sortedWorkspaces.sort(((e,t)=>t.createdAt.getTime()-e.createdAt.getTime())).filter((e=>null!==e)).map((e=>({id:e.id,label:e.name,value:e,isEditing:this.editingItemId===e.id,isSelected:this.activeWorkspace?.id===e.id,isNewItem:this.newWorkspace?.id===e.id,isChildMenuOpen:this.openChildMenuItem?.id===e.id,childMenuAnchor:this.openChildMenuItem?.id===e.id?this.childMenuAnchor:null,children:[{id:`${e.id}-rename`,label:"Rename",value:"rename",action:(e,t)=>this.edit(t)},{id:`${e.id}-delete`,label:"Delete",value:"delete",isDisabled:this.sortedWorkspaces.length<=1,action:(e,t)=>this.delete(t)}]})));return i(n,null,i("kritzel-split-button",{ref:e=>this.splitButtonRef=e,items:e,mainButtonDisabled:null!=this.editingItemId,onMainButtonClick:()=>this.add(),onItemSelect:e=>this.select(e.detail.item,e.detail.parent),onItemToggleChildMenu:e=>this.toggleChildMenu(e.detail.item,e.detail.childMenuAnchor),onItemSave:e=>this.save(e.detail),onItemCancel:()=>this.cancel(),onItemCloseChildMenu:()=>this.closeChildMenu(),onMenuOpen:()=>this.handleMenuOpen(),onMenuClose:()=>this.handleMenuClose()}))}static get style(){return":host{display:flex;flex-direction:column;z-index:1}"}},[513,"kritzel-workspace-manager",{activeWorkspace:[1040],workspaces:[16],childMenuAnchor:[32],openChildMenuItem:[32],newWorkspace:[32],editingItemId:[32]},[[8,"wheel","handleWheel"]]]);function p(){"undefined"!=typeof customElements&&["kritzel-workspace-manager","kritzel-icon","kritzel-menu","kritzel-menu-item","kritzel-portal","kritzel-split-button"].forEach((e=>{switch(e){case"kritzel-workspace-manager":customElements.get(l(e))||customElements.define(l(e),d);break;case"kritzel-icon":customElements.get(l(e))||o();break;case"kritzel-menu":customElements.get(l(e))||c();break;case"kritzel-menu-item":customElements.get(l(e))||r();break;case"kritzel-portal":customElements.get(l(e))||u();break;case"kritzel-split-button":customElements.get(l(e))||m()}}))}export{d as K,p as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,c as o,h as r,d as a,t as i}from"./p-Cj-I2_Og.js";import{d as c}from"./p-
|
|
1
|
+
import{p as e,H as t,c as o,h as r,d as a,t as i}from"./p-Cj-I2_Og.js";import{d as c}from"./p-BtGrZ0-u.js";import{d as n}from"./p-DPPpa9So.js";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.exportPng=o(this,"exportPng"),this.exportSvg=o(this,"exportSvg")}isDialogOpen=!1;previewUrl;isLoading=!1;exportPng;exportSvg;async open(e){this.previewUrl=e,this.isDialogOpen=!0}closeDialog=()=>{this.isDialogOpen=!1};handleExportPng=()=>{this.exportPng.emit(),this.closeDialog()};handleExportSvg=()=>{this.exportSvg.emit(),this.closeDialog()};render(){return r(a,{key:"77ebbdae3c3417e37eb92a93dfe65c3e9cf3a5a4"},r("kritzel-dialog",{key:"8cd7df09f4e8e209eaac30903439351ce6de4efa",isOpen:this.isDialogOpen,dialogTitle:"Export Viewport",closable:!0,onDialogClose:this.closeDialog},r("div",{key:"de40b5f04ef75e07dd328e45363f134c6e9442dd",class:"export-content"},this.previewUrl&&r("div",{key:"7605139638c0dbacf07f2d9aaa83ad7c4236db80",class:"preview-container"},r("img",{key:"38b33df3bec109a1c2cf021d184674ef2ad0357f",src:this.previewUrl,alt:"Viewport Preview"})),r("p",{key:"4c65f9bf4673fdef87aa937c4541da22a278458f"},"Select a format to export the current viewport:"),r("div",{key:"b891c221dcf7c97093da3e8de47723f79e5e17de",class:"export-options"},r("button",{key:"12e10e98c26b9b1efa78617195cfc8420de3d0ed",class:"export-button",onClick:this.handleExportPng},r("div",{key:"5c2d747507dea56d08fbb05e198f9325e014aab6",class:"icon-container"},r("kritzel-icon",{key:"9a5dbaeca3edbf9221817220c78c6e173adc21e2",name:"image",size:24})),r("span",{key:"f369ad331406afa0dc2886e3da057c9a47c2fded"},"Export as PNG")),r("button",{key:"7434f72102828a7b8aa29b6893f947be0162e823",class:"export-button",onClick:this.handleExportSvg},r("div",{key:"b2da9040987177a9095a291dee3b78ed13564179",class:"icon-container"},r("kritzel-icon",{key:"54ce9a55281015d57159540b3565f97ec49b2a00",name:"shape-rectangle",size:24})),r("span",{key:"48252a69f5e17ec53fad400e942a7e830f88e07c"},"Export as SVG"))))))}static get style(){return":host{display:block}.export-content{display:flex;flex-direction:column;gap:16px;padding:16px 0}.preview-container{width:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;margin-bottom:8px}.preview-container img{max-width:100%;max-height:250px;object-fit:contain;box-shadow:0 4px 8px rgba(0, 0, 0, 0.15);border-radius:4px;border:1px solid var(--kritzel-border-color, #dbdbdb)}.export-content p{margin:0;color:var(--kritzel-text-secondary, #666)}.export-options{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}.export-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;border:1px solid var(--kritzel-border-color, #dbdbdb);border-radius:8px;background-color:transparent;cursor:pointer;transition:all 0.2s ease;color:var(--kritzel-text-primary, #333)}.export-button:hover{background-color:var(--kritzel-hover-background, #f5f5f5);border-color:var(--kritzel-primary-color, #007bff);color:var(--kritzel-primary-color, #007bff)}.export-button:focus-visible{outline:revert;outline-offset:revert}.export-button .icon-container{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background-color:var(--kritzel-background-secondary, #f0f0f0)}.export-button span{font-weight:500;font-size:14px}"}},[513,"kritzel-export",{isDialogOpen:[32],previewUrl:[32],isLoading:[32],open:[64]}]);function d(){"undefined"!=typeof customElements&&["kritzel-export","kritzel-dialog","kritzel-icon"].forEach((e=>{switch(e){case"kritzel-export":customElements.get(i(e))||customElements.define(i(e),s);break;case"kritzel-dialog":customElements.get(i(e))||c();break;case"kritzel-icon":customElements.get(i(e))||n()}}))}export{s as K,d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,H as s,c as i,h as e,d as h,t as o}from"./p-Cj-I2_Og.js";import{O as n}from"./p-B0kd2rUI.js";import{K as r}from"./p-
|
|
1
|
+
import{p as t,H as s,c as i,h as e,d as h,t as o}from"./p-Cj-I2_Og.js";import{O as n}from"./p-B0kd2rUI.js";import{K as r}from"./p-BML28BJR.js";const a=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.close=i(this,"close")}get host(){return this}anchor;anchorChanged(t){t?(this.openPortal(),requestAnimationFrame((()=>{this.calculatePosition(),this.autoFocus&&this.focusFirstElement()}))):this.closePortal()}offsetX;offsetY;autoFocus=!0;close;handleOutsideClick(t){t.stopPropagation(),this.lastAddedPortal===this.portal&&(this.host.contains(t.target)||(this.close.emit(),this.closePortal()))}handleKeyDown(t){if(t.stopPropagation(),this.lastAddedPortal===this.portal&&("Escape"===t.key&&(this.anchor.focus(),this.close.emit(),this.closePortal()),"Tab"===t.key&&this.trapFocus(t),"Enter"===t.key)){const s=this.getDeepActiveElement();s?.click&&(t.preventDefault(),s.click())}}handleResize(){this.calculatePosition()}handleWindowScroll(){if(!r.isElementInViewport(this.anchor))return this.anchor?.blur(),void this.closePortal();this.calculatePosition()}portal;id=`portal-${n.generateUUID()}`;defaultOffset=0;minLeft=0;focusFirstElement(){requestAnimationFrame((()=>{this.firstFocusableElement?.focus?.()}))}getDeepActiveElement(){let t=document.activeElement;for(;t?.shadowRoot?.activeElement;)t=t.shadowRoot.activeElement;return t}trapFocus(t){const s=r.getFocusableElements(this.host);if(0===s.length)return;const i=s[0],e=s[s.length-1],h=this.getDeepActiveElement();t.shiftKey?h===i&&(e.focus(),t.preventDefault()):h===e&&(i.focus(),t.preventDefault())}get firstFocusableElement(){const t=this.host.shadowRoot?.querySelector("slot"),s=t?.assignedElements({flatten:!0})[0];return s?r.getFocusableElements(s)[0]??s:null}get lastAddedPortal(){const t=Array.from(document.querySelectorAll('[id^="portal-"]'));return t.length?t[t.length-1]:null}calculateLeft(){if(!this.anchor||!this.portal)return 0;const t=this.anchor.getBoundingClientRect(),s=this.portal.getBoundingClientRect(),i=this.offsetX??this.defaultOffset;let e;e=t.left+t.width/2>window.innerWidth/2?t.right-s.width-i:t.left+i;const h=window.innerWidth-s.width-this.minLeft;return e<this.minLeft&&(e=this.minLeft),e>h&&(e=h),Math.round(e+window.scrollX)}calculateTop(){if(!this.anchor||!this.portal)return 0;const t=this.anchor.getBoundingClientRect(),s=this.portal.getBoundingClientRect(),i=this.offsetY??this.defaultOffset;let e=t.bottom+i;const h=window.innerHeight-t.bottom-i-8,o=t.top-i-8;return this.host.style.removeProperty("--kritzel-portal-max-height"),s.height<=h?e=t.bottom+i:s.height<=o?e=t.top-s.height-i:h>=o?(e=t.bottom+i,this.host.style.setProperty("--kritzel-portal-max-height",`${h}px`)):(e=8,this.host.style.setProperty("--kritzel-portal-max-height",`${o}px`)),Math.round(e+window.scrollY)}openPortal(){this.portal=document.createElement("div"),this.portal.setAttribute("id",this.id),this.portal.style.zIndex="1",this.portal.style.position="absolute",this.portal.style.top="0px",this.portal.style.left="0px",this.portal.style.visibility="hidden",this.portal.appendChild(this.host),document.body.append(this.portal)}closePortal(){const t=document.getElementById(this.id);t&&(document.body.removeChild(t),this.host.remove())}calculatePosition(){if(!this.anchor||!this.portal)return;const t=this.calculateTop(),s=this.calculateLeft();this.portal.style.top=`${t}px`,this.portal.style.left=`${s}px`,this.portal.style.visibility="visible"}render(){return e(h,{key:"4498bb0fdb89a4261b91af28cdca1bfdeebc8ab1",style:{display:this.anchor?"block":"none"}},e("slot",{key:"d86c41c57d2affd07a995a2073fed51dd773893c"}))}static get watchers(){return{anchor:[{anchorChanged:0}]}}},[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:0}]}]);function l(){"undefined"!=typeof customElements&&["kritzel-portal"].forEach((t=>{"kritzel-portal"===t&&(customElements.get(o(t))||customElements.define(o(t),a))}))}export{a as K,l as d}
|
|
@@ -534,7 +534,7 @@ class KritzelToolConfigHelper {
|
|
|
534
534
|
}
|
|
535
535
|
}
|
|
536
536
|
|
|
537
|
-
const kritzelControlsCss = () => `: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}`;
|
|
537
|
+
const kritzelControlsCss = () => `: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;padding:4px;margin:-4px;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}`;
|
|
538
538
|
|
|
539
539
|
const KritzelControls = class {
|
|
540
540
|
constructor(hostRef) {
|
|
@@ -952,7 +952,8 @@ class KritzelHTMLHelper {
|
|
|
952
952
|
const focusableElements = [];
|
|
953
953
|
const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex="-1"])';
|
|
954
954
|
const isVisible = (el) => {
|
|
955
|
-
|
|
955
|
+
const style = window.getComputedStyle(el);
|
|
956
|
+
return style.display !== 'none' && style.visibility !== 'hidden';
|
|
956
957
|
};
|
|
957
958
|
const find = (element) => {
|
|
958
959
|
// Check if the element itself is focusable
|
|
@@ -977,7 +978,7 @@ class KritzelHTMLHelper {
|
|
|
977
978
|
}
|
|
978
979
|
}
|
|
979
980
|
|
|
980
|
-
const kritzelDialogCss = () => `:host{display:contents}.backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10002;display:flex;align-items:center;justify-content:center;background-color:var(--kritzel-dialog-backdrop-color, rgba(0, 0, 0, 0.5));opacity:1;transition:opacity 150ms ease-out}.backdrop.is-animating{opacity:0}.dialog-content{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-dialog-background-color, #ffffff);border-radius:var(--kritzel-dialog-border-radius, 12px);box-shadow:var(--kritzel-dialog-box-shadow, 0 4px 20px rgba(0, 0, 0, 0.15));border:var(--kritzel-dialog-border, 1px solid #ebebeb);max-height:var(--kritzel-dialog-max-height, 90vh);max-width:var(--kritzel-dialog-max-width, 90vw);overflow:hidden;transform:scale(1);opacity:1;transition:transform 200ms ease-out, opacity 200ms ease-out;font-family:var(--kritzel-dialog-font-family, sans-serif)}.dialog-content.is-animating{transform:scale(0.95);opacity:0}.dialog-content.size-small{width:var(--kritzel-dialog-width-small, 320px);height:var(--kritzel-dialog-height-small, auto)}.dialog-content.size-medium{width:var(--kritzel-dialog-width-medium, 480px);height:var(--kritzel-dialog-height-medium, auto)}.dialog-content.size-large{width:var(--kritzel-dialog-width-large, 640px);height:var(--kritzel-dialog-height-large, auto)}.dialog-content.size-fullscreen{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}@media (max-width: 576px){.backdrop:has(.fullscreen-on-mobile){background-color:transparent}.dialog-content.fullscreen-on-mobile{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:var(--kritzel-dialog-header-padding, 16px 20px);border-bottom:var(--kritzel-dialog-header-border, 1px solid #ebebeb);gap:12px}.dialog-title{margin:0;font-size:var(--kritzel-dialog-title-font-size, 18px);font-weight:var(--kritzel-dialog-title-font-weight, 600);color:var(--kritzel-dialog-title-color, #1a1a1a);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.close-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--kritzel-dialog-close-button-border-radius, 6px);background-color:var(--kritzel-dialog-close-button-background, transparent);color:var(--kritzel-dialog-close-button-color, #666666);cursor:var(--kritzel-pointer-cursor, pointer);transition:background-color 150ms ease, color 150ms ease;flex-shrink:0;-webkit-tap-highlight-color:transparent}.close-button:hover{background-color:var(--kritzel-dialog-close-button-hover-background, #f5f5f5);color:var(--kritzel-dialog-close-button-hover-color, #1a1a1a)}.close-button:
|
|
981
|
+
const kritzelDialogCss = () => `:host{display:contents}.backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10002;display:flex;align-items:center;justify-content:center;background-color:var(--kritzel-dialog-backdrop-color, rgba(0, 0, 0, 0.5));opacity:1;transition:opacity 150ms ease-out}.backdrop.is-animating{opacity:0}.dialog-content{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-dialog-background-color, #ffffff);border-radius:var(--kritzel-dialog-border-radius, 12px);box-shadow:var(--kritzel-dialog-box-shadow, 0 4px 20px rgba(0, 0, 0, 0.15));border:var(--kritzel-dialog-border, 1px solid #ebebeb);max-height:var(--kritzel-dialog-max-height, 90vh);max-width:var(--kritzel-dialog-max-width, 90vw);overflow:hidden;transform:scale(1);opacity:1;transition:transform 200ms ease-out, opacity 200ms ease-out;font-family:var(--kritzel-dialog-font-family, sans-serif)}.dialog-content.is-animating{transform:scale(0.95);opacity:0}.dialog-content.size-small{width:var(--kritzel-dialog-width-small, 320px);height:var(--kritzel-dialog-height-small, auto)}.dialog-content.size-medium{width:var(--kritzel-dialog-width-medium, 480px);height:var(--kritzel-dialog-height-medium, auto)}.dialog-content.size-large{width:var(--kritzel-dialog-width-large, 640px);height:var(--kritzel-dialog-height-large, auto)}.dialog-content.size-fullscreen{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}@media (max-width: 576px){.backdrop:has(.fullscreen-on-mobile){background-color:transparent}.dialog-content.fullscreen-on-mobile{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:var(--kritzel-dialog-header-padding, 16px 20px);border-bottom:var(--kritzel-dialog-header-border, 1px solid #ebebeb);gap:12px}.dialog-title{margin:0;font-size:var(--kritzel-dialog-title-font-size, 18px);font-weight:var(--kritzel-dialog-title-font-weight, 600);color:var(--kritzel-dialog-title-color, #1a1a1a);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.close-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--kritzel-dialog-close-button-border-radius, 6px);background-color:var(--kritzel-dialog-close-button-background, transparent);color:var(--kritzel-dialog-close-button-color, #666666);cursor:var(--kritzel-pointer-cursor, pointer);transition:background-color 150ms ease, color 150ms ease;flex-shrink:0;-webkit-tap-highlight-color:transparent}.close-button:hover{background-color:var(--kritzel-dialog-close-button-hover-background, #f5f5f5);color:var(--kritzel-dialog-close-button-hover-color, #1a1a1a)}.close-button:active{background-color:var(--kritzel-dialog-close-button-active-background, #ebebeb)}.close-button:focus-visible{outline:revert;outline-offset:revert}.dialog-body{padding:var(--kritzel-dialog-body-padding, 20px);overflow-y:auto;flex:1;scrollbar-color:#ebebeb transparent;scrollbar-width:thin}.dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--kritzel-dialog-footer-gap, 8px);padding:var(--kritzel-dialog-footer-padding, 16px 20px);border-top:var(--kritzel-dialog-footer-border, 1px solid #ebebeb)}::slotted([slot='header']){flex:1}::slotted([slot='footer']){display:contents}`;
|
|
981
982
|
|
|
982
983
|
const KritzelDialog = class {
|
|
983
984
|
constructor(hostRef) {
|
|
@@ -1103,19 +1104,13 @@ const KritzelDialog = class {
|
|
|
1103
1104
|
slots.forEach(slot => {
|
|
1104
1105
|
const assigned = slot.assignedElements({ flatten: true });
|
|
1105
1106
|
assigned.forEach(el => {
|
|
1107
|
+
// Use KritzelHTMLHelper to find focusable elements including those in nested shadow DOMs
|
|
1106
1108
|
const elements = KritzelHTMLHelper.getFocusableElements(el);
|
|
1107
1109
|
focusable.push(...elements);
|
|
1108
|
-
if (this.isFocusable(el)) {
|
|
1109
|
-
focusable.push(el);
|
|
1110
|
-
}
|
|
1111
1110
|
});
|
|
1112
1111
|
});
|
|
1113
1112
|
return focusable;
|
|
1114
1113
|
}
|
|
1115
|
-
isFocusable(el) {
|
|
1116
|
-
const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex="-1"])';
|
|
1117
|
-
return el.matches(focusableSelector);
|
|
1118
|
-
}
|
|
1119
1114
|
handleTabKey(event) {
|
|
1120
1115
|
const focusableElements = this.getSlottedFocusableElements();
|
|
1121
1116
|
const closeButton = this.host.shadowRoot?.querySelector('.close-button');
|
|
@@ -22699,7 +22694,7 @@ const KritzelEngine = class {
|
|
|
22699
22694
|
};
|
|
22700
22695
|
KritzelEngine.style = kritzelEngineCss();
|
|
22701
22696
|
|
|
22702
|
-
const kritzelExportCss = () => `:host{display:block}.export-content{display:flex;flex-direction:column;gap:16px;padding:16px 0}.preview-container{width:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;margin-bottom:8px}.preview-container img{max-width:100%;max-height:250px;object-fit:contain;box-shadow:0 4px 8px rgba(0, 0, 0, 0.15);border-radius:4px;border:1px solid var(--kritzel-border-color, #dbdbdb)}.export-content p{margin:0;color:var(--kritzel-text-secondary, #666)}.export-options{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}.export-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;border:1px solid var(--kritzel-border-color, #dbdbdb);border-radius:8px;background-color:transparent;cursor:pointer;transition:all 0.2s ease;color:var(--kritzel-text-primary, #333)}.export-button:hover{background-color:var(--kritzel-hover-background, #f5f5f5);border-color:var(--kritzel-primary-color, #007bff);color:var(--kritzel-primary-color, #007bff)}.export-button .icon-container{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background-color:var(--kritzel-background-secondary, #f0f0f0)}.export-button span{font-weight:500;font-size:14px}`;
|
|
22697
|
+
const kritzelExportCss = () => `:host{display:block}.export-content{display:flex;flex-direction:column;gap:16px;padding:16px 0}.preview-container{width:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;margin-bottom:8px}.preview-container img{max-width:100%;max-height:250px;object-fit:contain;box-shadow:0 4px 8px rgba(0, 0, 0, 0.15);border-radius:4px;border:1px solid var(--kritzel-border-color, #dbdbdb)}.export-content p{margin:0;color:var(--kritzel-text-secondary, #666)}.export-options{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}.export-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;border:1px solid var(--kritzel-border-color, #dbdbdb);border-radius:8px;background-color:transparent;cursor:pointer;transition:all 0.2s ease;color:var(--kritzel-text-primary, #333)}.export-button:hover{background-color:var(--kritzel-hover-background, #f5f5f5);border-color:var(--kritzel-primary-color, #007bff);color:var(--kritzel-primary-color, #007bff)}.export-button:focus-visible{outline:revert;outline-offset:revert}.export-button .icon-container{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background-color:var(--kritzel-background-secondary, #f0f0f0)}.export-button span{font-weight:500;font-size:14px}`;
|
|
22703
22698
|
|
|
22704
22699
|
const KritzelExport = class {
|
|
22705
22700
|
constructor(hostRef) {
|
|
@@ -22934,7 +22929,7 @@ const KritzelLineEndings = class {
|
|
|
22934
22929
|
};
|
|
22935
22930
|
KritzelLineEndings.style = kritzelLineEndingsCss();
|
|
22936
22931
|
|
|
22937
|
-
const kritzelMasterDetailCss = () => `:host{display:block;width:100%;height:100%}.master-detail-container{display:flex;width:100%;height:100%;min-height:var(--kritzel-master-detail-min-height, 300px);gap:var(--kritzel-master-detail-gap, 0);background-color:var(--kritzel-master-detail-background-color, transparent)}.master-menu{display:flex;flex-direction:column;width:var(--kritzel-master-detail-menu-width, 200px);min-width:var(--kritzel-master-detail-menu-min-width, 160px);padding:var(--kritzel-master-detail-menu-padding, 8px);background-color:var(--kritzel-master-detail-menu-background-color, #ffffff);border-right:var(--kritzel-master-detail-menu-border-right, 1px solid #ebebeb);gap:var(--kritzel-master-detail-menu-gap, 4px);overflow-y:auto}.menu-item{display:flex;align-items:center;gap:var(--kritzel-master-detail-menu-item-gap, 10px);padding:var(--kritzel-master-detail-menu-item-padding, 10px 12px);border:none;border-radius:var(--kritzel-master-detail-menu-item-border-radius, 6px);background-color:var(--kritzel-master-detail-menu-item-background-color, transparent);color:var(--kritzel-master-detail-menu-item-color, #333333);font-family:inherit;font-size:var(--kritzel-master-detail-menu-item-font-size, 14px);font-weight:var(--kritzel-master-detail-menu-item-font-weight, 400);text-align:left;cursor:var(--kritzel-pointer-cursor, pointer);transition:background-color 150ms ease, color 150ms ease;-webkit-tap-highlight-color:transparent}.menu-item:hover:not(.is-disabled){background-color:var(--kritzel-master-detail-menu-item-hover-background-color, #ebebeb)}.menu-item:active:not(.is-disabled){background-color:var(--kritzel-master-detail-menu-item-active-background-color, #e0e0e0)}.menu-item.is-selected{background-color:var(--kritzel-master-detail-menu-item-selected-background-color, #0066cc);color:var(--kritzel-master-detail-menu-item-selected-color, #ffffff);font-weight:var(--kritzel-master-detail-menu-item-selected-font-weight, 500)}.menu-item.is-selected:hover{background-color:var(--kritzel-master-detail-menu-item-selected-hover-background-color, #0052a3)}.menu-item.is-disabled{color:var(--kritzel-master-detail-menu-item-disabled-color, #999999);cursor:not-allowed;opacity:0.6}.menu-item:focus-visible{outline:var(--kritzel-master-detail-menu-item-focus-outline,
|
|
22932
|
+
const kritzelMasterDetailCss = () => `:host{display:block;width:100%;height:100%}.master-detail-container{display:flex;width:100%;height:100%;min-height:var(--kritzel-master-detail-min-height, 300px);gap:var(--kritzel-master-detail-gap, 0);background-color:var(--kritzel-master-detail-background-color, transparent)}.master-menu{display:flex;flex-direction:column;width:var(--kritzel-master-detail-menu-width, 200px);min-width:var(--kritzel-master-detail-menu-min-width, 160px);padding:var(--kritzel-master-detail-menu-padding, 8px);background-color:var(--kritzel-master-detail-menu-background-color, #ffffff);border-right:var(--kritzel-master-detail-menu-border-right, 1px solid #ebebeb);gap:var(--kritzel-master-detail-menu-gap, 4px);overflow-y:auto}.menu-item{display:flex;align-items:center;gap:var(--kritzel-master-detail-menu-item-gap, 10px);padding:var(--kritzel-master-detail-menu-item-padding, 10px 12px);border:none;border-radius:var(--kritzel-master-detail-menu-item-border-radius, 6px);background-color:var(--kritzel-master-detail-menu-item-background-color, transparent);color:var(--kritzel-master-detail-menu-item-color, #333333);font-family:inherit;font-size:var(--kritzel-master-detail-menu-item-font-size, 14px);font-weight:var(--kritzel-master-detail-menu-item-font-weight, 400);text-align:left;cursor:var(--kritzel-pointer-cursor, pointer);transition:background-color 150ms ease, color 150ms ease;-webkit-tap-highlight-color:transparent}.menu-item:hover:not(.is-disabled){background-color:var(--kritzel-master-detail-menu-item-hover-background-color, #ebebeb)}.menu-item:active:not(.is-disabled){background-color:var(--kritzel-master-detail-menu-item-active-background-color, #e0e0e0)}.menu-item.is-selected{background-color:var(--kritzel-master-detail-menu-item-selected-background-color, #0066cc);color:var(--kritzel-master-detail-menu-item-selected-color, #ffffff);font-weight:var(--kritzel-master-detail-menu-item-selected-font-weight, 500)}.menu-item.is-selected:hover{background-color:var(--kritzel-master-detail-menu-item-selected-hover-background-color, #0052a3)}.menu-item.is-disabled{color:var(--kritzel-master-detail-menu-item-disabled-color, #999999);cursor:not-allowed;opacity:0.6}.menu-item:focus-visible{outline:var(--kritzel-master-detail-menu-item-focus-outline, revert);outline-offset:var(--kritzel-master-detail-menu-item-focus-outline-offset, revert)}.menu-item-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.menu-item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.detail-panel{flex:1;min-height:0;padding:var(--kritzel-master-detail-detail-padding, 16px);background-color:var(--kritzel-master-detail-detail-background-color, #ffffff);overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-color:#ebebeb transparent;scrollbar-width:thin}.detail-panel:focus{outline:none}.detail-panel:focus-visible{outline:var(--kritzel-master-detail-detail-focus-outline, revert);outline-offset:var(--kritzel-master-detail-detail-focus-outline-offset, revert)}.mobile-back-button{display:none;align-items:center;gap:8px;background:none;border:none;padding:0 0 16px 0;cursor:pointer;color:var(--kritzel-master-detail-back-button-color, #333333);font-weight:500;font-size:14px;font-family:inherit}.mobile-back-icon{display:flex;align-items:center;flex-shrink:0}.menu-item-chevron{display:none;flex-shrink:0;margin-left:auto;color:var(--kritzel-master-detail-menu-item-chevron-color, #999999)}.menu-item-chevron svg{width:16px;height:16px;stroke:currentColor}@media (max-width: 768px){.master-menu{width:100%;border-right:none}.detail-panel{display:none;width:100%}.master-detail-container.is-mobile-detail-visible .master-menu{display:none}.master-detail-container.is-mobile-detail-visible .detail-panel{display:block}.mobile-back-button{display:flex}.menu-item.is-selected{background-color:transparent;color:var(--kritzel-master-detail-menu-item-color, #333333);font-weight:var(--kritzel-master-detail-menu-item-font-weight, 400)}.menu-item.is-selected:hover{background-color:var(--kritzel-master-detail-menu-item-hover-background-color, #ebebeb)}.menu-item-chevron{display:flex;align-items:center}}`;
|
|
22938
22933
|
|
|
22939
22934
|
const KritzelMasterDetail = class {
|
|
22940
22935
|
constructor(hostRef) {
|
|
@@ -23022,30 +23017,24 @@ const KritzelMasterDetail = class {
|
|
|
23022
23017
|
this.tabRefs[index] = el;
|
|
23023
23018
|
}
|
|
23024
23019
|
};
|
|
23025
|
-
getTabIndex(item,
|
|
23020
|
+
getTabIndex(item, _index) {
|
|
23026
23021
|
if (item.disabled)
|
|
23027
23022
|
return -1;
|
|
23028
|
-
|
|
23029
|
-
if (this.selectedItemId) {
|
|
23030
|
-
return item.id === this.selectedItemId ? 0 : -1;
|
|
23031
|
-
}
|
|
23032
|
-
// Otherwise, first enabled item gets tabindex 0
|
|
23033
|
-
const firstEnabledIndex = this.items.findIndex(it => !it.disabled);
|
|
23034
|
-
return index === firstEnabledIndex ? 0 : -1;
|
|
23023
|
+
return 0;
|
|
23035
23024
|
}
|
|
23036
23025
|
render() {
|
|
23037
23026
|
const selectedItem = this.items.find(item => item.id === this.selectedItemId);
|
|
23038
23027
|
const panelId = 'master-detail-panel';
|
|
23039
23028
|
const selectedTabId = selectedItem ? `tab-${selectedItem.id}` : undefined;
|
|
23040
|
-
return (h(Host, { key: '
|
|
23029
|
+
return (h(Host, { key: '28b34d09819dca22b9edff8367a838e5d161132a' }, h("div", { key: '53107e6781946c406c9fccae465d003ef6571cfd', class: {
|
|
23041
23030
|
'master-detail-container': true,
|
|
23042
23031
|
'is-mobile-detail-visible': this.showMobileDetail,
|
|
23043
|
-
} }, h("nav", { key: '
|
|
23032
|
+
} }, h("nav", { key: 'd496f8b5975250a2a0ed7007dfeac3875a980e09', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index) => (h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index), class: {
|
|
23044
23033
|
'menu-item': true,
|
|
23045
23034
|
'is-selected': item.id === this.selectedItemId,
|
|
23046
23035
|
'is-disabled': !!item.disabled,
|
|
23047
23036
|
'is-focused': index === this.focusedIndex,
|
|
23048
|
-
}, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index), onFocus: () => this.handleFocus(index), onBlur: this.handleBlur }, item.icon && (h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), h("span", { class: "menu-item-label" }, item.label), h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "m9 18 6-6-6-6" }))))))), h("div", { key: '
|
|
23037
|
+
}, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index), onFocus: () => this.handleFocus(index), onBlur: this.handleBlur }, item.icon && (h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), h("span", { class: "menu-item-label" }, item.label), h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "m9 18 6-6-6-6" }))))))), h("div", { key: '8cad78be4c26bd85903caa9debf14517fb6f5f75', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, h("button", { key: 'f185a12b0c60bac5bdd4b6992bd9f6cb653d3253', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, h("kritzel-icon", { key: '333e675a242b9d075aaa78f4ee005539b563a6b9', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), h("slot", { key: 'ccdf01882b30eea4227eb0da23fccc80fee1937e' })))));
|
|
23049
23038
|
}
|
|
23050
23039
|
static get watchers() { return {
|
|
23051
23040
|
"selectedItemId": [{
|
|
@@ -23055,7 +23044,7 @@ const KritzelMasterDetail = class {
|
|
|
23055
23044
|
};
|
|
23056
23045
|
KritzelMasterDetail.style = kritzelMasterDetailCss();
|
|
23057
23046
|
|
|
23058
|
-
const kritzelMenuCss = () => `:host{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-menu-background-color, #ffffff);width:var(--kritzel-menu-width, 200px);padding:var(--kritzel-menu-padding, 8px);border-radius:var(--kritzel-menu-border-radius, 12px);box-shadow:var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-menu-border, 1px solid #ebebeb);z-index:2;gap:var(--kritzel-menu-gap, 4px);overflow-y:auto;scrollbar-color:#ebebeb transparent;scrollbar-width:thin;max-height:var(--kritzel-portal-max-height, 300px);box-sizing:border-box}.has-open-child-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3}`;
|
|
23047
|
+
const kritzelMenuCss = () => `:host{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-menu-background-color, #ffffff);width:var(--kritzel-menu-width, 200px);padding:var(--kritzel-menu-padding, 8px);border-radius:var(--kritzel-menu-border-radius, 12px);box-shadow:var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-menu-border, 1px solid #ebebeb);z-index:2;gap:var(--kritzel-menu-gap, 4px);overflow-y:auto;scrollbar-color:#ebebeb transparent;scrollbar-width:thin;max-height:var(--kritzel-portal-max-height, 300px);box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:none}:host:focus-visible{outline:auto}.has-open-child-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3}`;
|
|
23059
23048
|
|
|
23060
23049
|
const KritzelMenu = class {
|
|
23061
23050
|
constructor(hostRef) {
|
|
@@ -23123,7 +23112,7 @@ const KritzelMenu = class {
|
|
|
23123
23112
|
};
|
|
23124
23113
|
KritzelMenu.style = kritzelMenuCss();
|
|
23125
23114
|
|
|
23126
|
-
const kritzelMenuItemCss = () => `:host{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--kritzel-menu-item-padding, 8px);box-sizing:border-box;gap:16px;height:var(--kritzel-menu-item-height, 40px);min-height:var(--kritzel-menu-item-min-height, 40px);font-family:sans-serif;font-size:var(--kritzel-menu-item-font-size, 14px);color:var(--kritzel-menu-item-color, #333333);border-radius:var(--kritzel-menu-item-border-radius, 12px)}:host(:hover) .menu-item-overlay,:host(:focus-within) .menu-item-overlay{background-color:var(--kritzel-menu-item-overlay-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.selected){background-color:var(--kritzel-menu-item-selected-bg, #007aff);color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .action-button{color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected.editing){background-color:var(--kritzel-menu-item-selected-bg, #007aff)}:host(.selected) .edit-input{color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .action-button kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-selected-color, #ffffff)}kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-color, #333333)}:host(.selected) .edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color, rgba(255, 255, 255, 0.16))}:host(.editing){background-color:var(--kritzel-menu-item-editing-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.disabled){opacity:0.5;pointer-events:none !important}:host(.child-open){background-color:var(--kritzel-menu-item-child-open-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.child-open.selected){background-color:var(--kritzel-menu-item-selected-bg, #007aff)}.menu-item-overlay{position:absolute;inset:0;background-color:transparent;z-index:0;pointer-events:none;border-radius:var(--kritzel-menu-item-border-radius, 12px)}.menu-item-content{display:flex;align-items:center;gap:8px;position:relative;z-index:1;height:100%}.left{justify-content:flex-start;flex:1;min-width:0}.left>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.right{justify-content:flex-end}.edit-input{flex:1;height:var(--kritzel-menu-item-input-height, 24px);padding:0;background-color:transparent;border-radius:0;border:none;border-bottom:1px solid var(--kritzel-menu-item-input-border, #ccc);font-size:var(--kritzel-context-menu-item-font-size, 14px);width:100%;min-width:0;box-sizing:border-box;outline:none}.edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color, #007bff);color:var(--kritzel-menu-item-input-selection-text-color, #ffffff)}.action-button{padding:4px;border-radius:8px;border:none;cursor:var(--kritzel-pointer-cursor, pointer);display:flex;align-items:center;justify-content:center;background-color:transparent;background:transparent;-webkit-tap-highlight-color:transparent}.action-button:hover,.action-button:focus{background-color:var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.action-button.disabled{pointer-events:none;opacity:0.5}`;
|
|
23115
|
+
const kritzelMenuItemCss = () => `:host{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--kritzel-menu-item-padding, 8px);box-sizing:border-box;gap:16px;height:var(--kritzel-menu-item-height, 40px);min-height:var(--kritzel-menu-item-min-height, 40px);font-family:sans-serif;font-size:var(--kritzel-menu-item-font-size, 14px);color:var(--kritzel-menu-item-color, #333333);border-radius:var(--kritzel-menu-item-border-radius, 12px);-webkit-tap-highlight-color:transparent}:host:focus:not(:focus-visible){outline:none}:host(:hover) .menu-item-overlay,:host(:focus-within) .menu-item-overlay{background-color:var(--kritzel-menu-item-overlay-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.selected){background-color:var(--kritzel-menu-item-selected-bg, #007aff);color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .action-button{color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected.editing){background-color:var(--kritzel-menu-item-selected-bg, #007aff)}:host(.selected) .edit-input{color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .action-button kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-selected-color, #ffffff)}kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-color, #333333)}:host(.selected) .edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color, rgba(255, 255, 255, 0.16))}:host(.editing){background-color:var(--kritzel-menu-item-editing-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.disabled){opacity:0.5;pointer-events:none !important}:host(.child-open){background-color:var(--kritzel-menu-item-child-open-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.child-open.selected){background-color:var(--kritzel-menu-item-selected-bg, #007aff)}.menu-item-overlay{position:absolute;inset:0;background-color:transparent;z-index:0;pointer-events:none;border-radius:var(--kritzel-menu-item-border-radius, 12px)}.menu-item-content{display:flex;align-items:center;gap:8px;position:relative;z-index:1;height:100%}.left{justify-content:flex-start;flex:1;min-width:0}.left>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.right{justify-content:flex-end}.edit-input{flex:1;height:var(--kritzel-menu-item-input-height, 24px);padding:0;background-color:transparent;border-radius:0;border:none;border-bottom:1px solid var(--kritzel-menu-item-input-border, #ccc);font-size:var(--kritzel-context-menu-item-font-size, 14px);width:100%;min-width:0;box-sizing:border-box;outline:none}.edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color, #007bff);color:var(--kritzel-menu-item-input-selection-text-color, #ffffff)}.action-button{padding:4px;border-radius:8px;border:none;cursor:var(--kritzel-pointer-cursor, pointer);display:flex;align-items:center;justify-content:center;background-color:transparent;background:transparent;-webkit-tap-highlight-color:transparent}.action-button:hover,.action-button:focus{background-color:var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.action-button.disabled{pointer-events:none;opacity:0.5}`;
|
|
23127
23116
|
|
|
23128
23117
|
const KritzelMenuItem = class {
|
|
23129
23118
|
constructor(hostRef) {
|
|
@@ -23647,7 +23636,7 @@ const KritzelPortal = class {
|
|
|
23647
23636
|
* This file is auto-generated by the version bump scripts.
|
|
23648
23637
|
* Do not modify manually.
|
|
23649
23638
|
*/
|
|
23650
|
-
const KRITZEL_VERSION = '0.1.
|
|
23639
|
+
const KRITZEL_VERSION = '0.1.13';
|
|
23651
23640
|
|
|
23652
23641
|
const kritzelSettingsCss = () => `: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}`;
|
|
23653
23642
|
|