kritzel-stencil 0.0.127 → 0.0.129

package/dist/components/p-2gNwfcSP.js

@@ -1,119 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DJN0U8pI.js';
-import { d as defineCustomElement$1 } from './p-CtiROna-.js';
-
-const kritzelContextMenuCss = ":host{display:block}.menu-container{display:flex;flex-direction:column;background-color:var(--kritzel-context-menu-background-color, #ffffff);border-radius:var(--kritzel-context-menu-border-radius, 12px);box-shadow:var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));border:var(--kritzel-context-menu-border, 1px solid #f0f0f0);padding:var(--kritzel-context-menu-padding,4px)}.menu-item{display:flex;align-items:center;gap:var(--kritzel-context-menu-item-gap, 8px);background:none;border:none;text-align:left;padding:var(--kritzel-context-menu-item-padding, 8px);border-radius:var(--kritzel-context-menu-item-border-radius, 12px);cursor:pointer;font-size:var(--kritzel-context-menu-item-font-size, 14px);color:var(--kritzel-context-menu-item-color, #333333);white-space:nowrap;-webkit-tap-highlight-color:transparent}.menu-item:not(.disabled):hover{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item:not(.disabled):active{background-color:var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%))}.menu-item.disabled{color:var(--kritzel-context-menu-item-disabled-color, #aaaaaa);cursor:default}.menu-item kritzel-icon{opacity:0.8;flex-shrink:0}.menu-item.disabled kritzel-icon{opacity:0.4}.label{flex-grow:1}";
-
-const KritzelContextMenu = /*@__PURE__*/ proxyCustomElement(class KritzelContextMenu extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.actionSelected = createEvent(this, "actionSelected");
-        this.disabledStates = new Map();
-        this.visibleItems = [];
-    }
-    componentWillLoad() {
-        this.resolveVisibleItems();
-        this.resolveDisabledStates();
-    }
-    onItemsChanged() {
-        this.resolveVisibleItems();
-        this.resolveDisabledStates();
-    }
-    handleItemClick(item, index) {
-        if (!this.disabledStates.get(index)) {
-            this.actionSelected.emit(item);
-        }
-    }
-    async resolveVisibleItems() {
-        const visibleItems = [];
-        const visibilityPromises = this.items.map(async (item, index) => {
-            let isVisible = true;
-            if (item.visible !== undefined) {
-                if (typeof item.visible === 'boolean') {
-                    isVisible = item.visible;
-                }
-                else if (typeof item.visible === 'function') {
-                    const result = item.visible(null, this.objects);
-                    if (result instanceof Promise) {
-                        isVisible = await result;
-                    }
-                    else {
-                        isVisible = result;
-                    }
-                }
-            }
-            return { item, index, isVisible };
-        });
-        const visibilityResults = await Promise.all(visibilityPromises);
-        visibilityResults.forEach(({ item, isVisible }) => {
-            if (isVisible) {
-                visibleItems.push(item);
-            }
-        });
-        this.visibleItems = visibleItems;
-    }
-    async resolveDisabledStates() {
-        const newStates = new Map();
-        const disabledPromises = this.visibleItems.map(async (item, index) => {
-            let isDisabled = false;
-            if (typeof item.disabled === 'boolean') {
-                isDisabled = item.disabled;
-            }
-            else if (typeof item.disabled === 'function') {
-                const result = item.disabled(null, this.objects);
-                if (result instanceof Promise) {
-                    isDisabled = await result;
-                }
-                else {
-                    isDisabled = result;
-                }
-            }
-            newStates.set(index, isDisabled);
-        });
-        await Promise.all(disabledPromises);
-        this.disabledStates = new Map(newStates);
-    }
-    render() {
-        return (h(Host, { key: 'cc1a338a7bf0d32764c2737f4f32774ccb22370a' }, h("div", { key: '4a83b9366332e42b506c3c876c00d77498a2b8b5', class: "menu-container" }, this.visibleItems.map((item, index) => {
-            var _a;
-            const isDisabled = (_a = this.disabledStates.get(index)) !== null && _a !== void 0 ? _a : false;
-            return (h("button", { key: `${item.label}-${index}`, class: { 'menu-item': true, 'disabled': isDisabled }, onClick: () => this.handleItemClick(item, index), onTouchStart: () => this.handleItemClick(item, index), disabled: isDisabled }, item.icon && h("kritzel-icon", { name: item.icon, size: 16 }), h("span", { class: "label" }, item.label)));
-        }))));
-    }
-    get hostElement() { return this; }
-    static get watchers() { return {
-        "items": ["onItemsChanged"]
-    }; }
-    static get style() { return kritzelContextMenuCss; }
-}, [257, "kritzel-context-menu", {
-        "items": [16],
-        "objects": [16],
-        "disabledStates": [32],
-        "visibleItems": [32]
-    }, undefined, {
-        "items": ["onItemsChanged"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["kritzel-context-menu", "kritzel-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "kritzel-context-menu":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, KritzelContextMenu);
-            }
-            break;
-        case "kritzel-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { KritzelContextMenu as K, defineCustomElement as d };
-//# sourceMappingURL=p-2gNwfcSP.js.map
-
-//# sourceMappingURL=p-2gNwfcSP.js.map

package/dist/components/p-2gNwfcSP.js.map

@@ -1 +0,0 @@
-{"file":"p-2gNwfcSP.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-context-menu/kritzel-context-menu.css?tag=kritzel-context-menu&encapsulation=shadow","src/components/ui/kritzel-context-menu/kritzel-context-menu.tsx"],"sourcesContent":[":host {\r\n  display: block; \r\n}\r\n\r\n.menu-container {\r\n  display: flex;\r\n  flex-direction: column;\r\n  background-color: var(--kritzel-context-menu-background-color, #ffffff);\r\n  border-radius: var(--kritzel-context-menu-border-radius, 12px);\r\n  box-shadow: var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));\r\n  border: var(--kritzel-context-menu-border, 1px solid #f0f0f0);\r\n  padding: var(--kritzel-context-menu-padding,4px);\r\n}\r\n\r\n.menu-item {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--kritzel-context-menu-item-gap, 8px);\r\n  background: none;\r\n  border: none;\r\n  text-align: left;\r\n  padding: var(--kritzel-context-menu-item-padding, 8px);\r\n  border-radius: var(--kritzel-context-menu-item-border-radius, 12px);\r\n  cursor: pointer;\r\n  font-size: var(--kritzel-context-menu-item-font-size, 14px);\r\n  color: var(--kritzel-context-menu-item-color, #333333);\r\n  white-space: nowrap;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.menu-item:not(.disabled):hover {\r\n  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.menu-item:not(.disabled):active {\r\n  background-color: var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%));\r\n}\r\n\r\n.menu-item.disabled {\r\n  color: var(--kritzel-context-menu-item-disabled-color, #aaaaaa);\r\n  cursor: default;\r\n}\r\n\r\n.menu-item kritzel-icon {\r\n  opacity: 0.8;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.menu-item.disabled kritzel-icon {\r\n  opacity: 0.4;\r\n}\r\n\r\n.label {\r\n  flex-grow: 1;\r\n}\r\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, State, Watch } from '@stencil/core';\r\nimport { ContextMenuItem } from '../../../interfaces/context-menu-item.interface';\r\nimport { KritzelBaseObject } from '../../../classes/objects/base-object.class';\r\n\r\n@Component({\r\n  tag: 'kritzel-context-menu',\r\n  styleUrl: 'kritzel-context-menu.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelContextMenu {\r\n  @Prop()\r\n  items: ContextMenuItem[];\r\n\r\n  @Prop()\r\n  objects: KritzelBaseObject[];\r\n\r\n  @Event()\r\n  actionSelected: EventEmitter<ContextMenuItem>;\r\n\r\n  @Element()\r\n  hostElement: HTMLElement;\r\n\r\n  @State()\r\n  private disabledStates: Map<number, boolean> = new Map();\r\n\r\n  @State()\r\n  private visibleItems: ContextMenuItem[] = [];\r\n\r\n  componentWillLoad() {\r\n    this.resolveVisibleItems();\r\n    this.resolveDisabledStates();\r\n  }\r\n\r\n\r\n  @Watch('items')\r\n  onItemsChanged() {\r\n    this.resolveVisibleItems();\r\n    this.resolveDisabledStates();\r\n  }\r\n\r\n  private handleItemClick(item: ContextMenuItem, index: number) {\r\n    if (!this.disabledStates.get(index)) {\r\n      this.actionSelected.emit(item);\r\n    }\r\n  }\r\n\r\n  private async resolveVisibleItems() {\r\n    const visibleItems: ContextMenuItem[] = [];\r\n    const visibilityPromises = this.items.map(async (item, index) => {\r\n      let isVisible = true;\r\n      if (item.visible !== undefined) {\r\n        if (typeof item.visible === 'boolean') {\r\n          isVisible = item.visible;\r\n        } else if (typeof item.visible === 'function') {\r\n          const result = item.visible(null, this.objects);\r\n          if (result instanceof Promise) {\r\n            isVisible = await result;\r\n          } else {\r\n            isVisible = result;\r\n          }\r\n        }\r\n      }\r\n      return { item, index, isVisible };\r\n    });\r\n\r\n    const visibilityResults = await Promise.all(visibilityPromises);\r\n    visibilityResults.forEach(({ item, isVisible }) => {\r\n      if (isVisible) {\r\n        visibleItems.push(item);\r\n      }\r\n    });\r\n\r\n    this.visibleItems = visibleItems;\r\n  }\r\n\r\n  private async resolveDisabledStates() {\r\n    const newStates = new Map<number, boolean>();\r\n    const disabledPromises = this.visibleItems.map(async (item, index) => {\r\n      let isDisabled = false;\r\n      if (typeof item.disabled === 'boolean') {\r\n        isDisabled = item.disabled;\r\n      } else if (typeof item.disabled === 'function') {\r\n        const result = item.disabled(null, this.objects);\r\n        if (result instanceof Promise) {\r\n          isDisabled = await result;\r\n        } else {\r\n          isDisabled = result;\r\n        }\r\n      }\r\n      newStates.set(index, isDisabled);\r\n    });\r\n\r\n    await Promise.all(disabledPromises);\r\n    this.disabledStates = new Map(newStates);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"menu-container\">\r\n          {this.visibleItems.map((item, index) => {\r\n            const isDisabled = this.disabledStates.get(index) ?? false;\r\n            return (\r\n              <button\r\n                key={`${item.label}-${index}`}\r\n                class={{ 'menu-item': true, 'disabled': isDisabled }}\r\n                onClick={() => this.handleItemClick(item, index)}\r\n                onTouchStart={() => this.handleItemClick(item, index)}\r\n                disabled={isDisabled}\r\n              >\r\n                {item.icon && <kritzel-icon name={item.icon} size={16}></kritzel-icon>}\r\n                <span class=\"label\">{item.label}</span>\r\n              </button>\r\n            );\r\n          })}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"p-BOUCnklW.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,0fAA0f;;MCO5gB,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;;;AAU9B,IAAA,UAAU,CAAC,KAAY,EAAA;AACrB,QAAA,IAAI,KAAK,CAAC,UAAU,EAAE;YACpB,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;;;AAIpB,IAAA,UAAU,CAAC,KAAY,EAAA;QACrB,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;;IAGlB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAA,EACrE,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAC,MAAM,EAAA,CAAgB,CAClC,EACT,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAA,EACrE,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAC,MAAM,EAAA,CAAgB,CAClC,EAET,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAO,CAAA,EAErC,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EAC5B,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,GAAiB,CACvE,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-utility-panel/kritzel-utility-panel.css?tag=kritzel-utility-panel&encapsulation=shadow","src/components/ui/kritzel-utility-panel/kritzel-utility-panel.tsx"],"sourcesContent":[":host {\r\n   display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  padding: 4px;\r\n  gap: 8px;\r\n  border-top-left-radius: 12px;\r\n  border-top-right-radius: 12px;\r\n  background-color: rgb(226, 226, 226);\r\n  width: fit-content;\r\n  user-select: none;\r\n}\r\n\r\n.utility-button {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 28px;\r\n  height: 28px;\r\n  padding: 8px 4px;\r\n  border: none;\r\n  outline: none;\r\n  background: none;\r\n  cursor: pointer;\r\n  color: #333333;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.utility-separator {\r\n  width: 1px;\r\n  height: 16px;\r\n  background-color: hsl(0, 0%, 0%, 4.3%);\r\n}","import { Component, Host, h, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kritzel-utility-panel',\r\n  styleUrl: 'kritzel-utility-panel.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelUtilityPanel {\r\n  @Event()\r\n  undo: EventEmitter<void>;\r\n\r\n  @Event()\r\n  redo: EventEmitter<void>;\r\n\r\n  @Event()\r\n  delete: EventEmitter<void>;\r\n\r\n  handleUndo(event: Event) {\r\n    if (event.cancelable) {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      this.undo.emit();\r\n    }\r\n  }\r\n\r\n  handleRedo(event: Event) {\r\n    event.preventDefault();\r\n    event.stopPropagation();\r\n    this.redo.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button class=\"utility-button\" onClick={event => this.handleUndo(event)}>\r\n          <kritzel-icon name=\"undo\"></kritzel-icon>\r\n        </button>\r\n        <button class=\"utility-button\" onClick={event => this.handleRedo(event)}>\r\n          <kritzel-icon name=\"redo\"></kritzel-icon>\r\n        </button>\r\n\r\n        <div class=\"utility-separator\"></div>\r\n\r\n        <button class=\"utility-button\">\r\n          <kritzel-icon name=\"delete\" onClick={() => this.delete.emit()}></kritzel-icon>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/p-BhC-Et5I.js.map

@@ -1 +0,0 @@
-{"file":"p-BhC-Et5I.js","mappings":";;;;;;;;;AAAA,MAAM,2BAA2B,GAAG,qTAAqT;;MCQ5U,wBAAwB,iBAAAA,kBAAA,CAAA,MAAA,wBAAA,SAAAC,CAAA,CAAA;AALrC,IAAA,WAAA,GAAA;;;;;AAUE,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AAuD5B;IAlDC,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU;;AAGpC,IAAA,kBAAkB,CAAC,KAA0B,EAAA;QAC3C,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM;QACnC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;;AAGjC,IAAA,iBAAiB,CAAC,KAA0B,EAAA;QAC1C,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM;QAClC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;;AAGjC,IAAA,gBAAgB,CAAC,KAA0B,EAAA;QACzC,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM;QACjC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGjC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,OAAO,EAAE,MAAM;AACf,gBAAA,aAAa,EAAE,KAAK;AACpB,gBAAA,UAAU,EAAE,QAAQ;AACpB,gBAAA,cAAc,EAAE,YAAY;AAC5B,gBAAA,KAAK,EAAE,MAAM;AACb,gBAAA,GAAG,EAAE,KAAK;AACX,aAAA,EAAA,EAED,CAAqB,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,kBAAkB,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,kBAAkB,EAAE,KAAK,IAAI,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAwB,CAAA,EAElJ,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,kBAAkB,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,GAAG,UAAU,GAAG,QAAQ,EAAA,EACpH,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAE,IAAI,CAAC,UAAU,GAAG,YAAY,GAAG,cAAc,EAAA,CAAiB,CAC7E,CACL,EAEN,CAAA,CAAA,uBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,EACzB,aAAa,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,EAClC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,KAAK,IAAI,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC9B,CAAA,EAEzB,CAAA,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAmB,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,YAAY,EAAE,KAAK,IAAI,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAsB,CAAA,CAC3J;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-control-text-config/kritzel-control-text-config.css?tag=kritzel-control-text-config&encapsulation=shadow","src/components/ui/kritzel-control-text-config/kritzel-control-text-config.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n  flex-direction: column;\r\n  width: 100%;\r\n}\r\n\r\n.expand-toggle {\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  font-size: 14px;\r\n  line-height: 1;\r\n  padding: 8px;\r\n  color: var(--kritzel-color-palette-expand-toggle-color, #666666);\r\n}\r\n\r\n.expand-toggle:hover {\r\n  color: var(--kritzel-color-palette-expand-toggle-hover-color, #333333);\r\n}\r\n","import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\r\nimport { KritzelTextTool } from '../../../classes/tools/text-tool.class';\r\n\r\n@Component({\r\n  tag: 'kritzel-control-text-config',\r\n  styleUrl: 'kritzel-control-text-config.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelControlTextConfig {\r\n  @Prop({ mutable: true })\r\n  tool: KritzelTextTool;\r\n\r\n  @Prop({ mutable: true })\r\n  isExpanded: boolean = false;\r\n\r\n  @Event()\r\n  toolChange: EventEmitter<KritzelTextTool>;\r\n\r\n  handleToggleExpand() {\r\n    this.isExpanded = !this.isExpanded;\r\n  }\r\n\r\n  handleFamilyChange(event: CustomEvent<string>) {\r\n    this.tool.fontFamily = event.detail;\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  handleColorChange(event: CustomEvent<string>) {\r\n    this.tool.fontColor = event.detail;\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  handleSizeChange(event: CustomEvent<number>) {\r\n    this.tool.fontSize = event.detail;\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div\r\n          style={{\r\n            display: 'flex',\r\n            flexDirection: 'row',\r\n            alignItems: 'center',\r\n            justifyContent: 'flex-start',\r\n            width: '100%',\r\n            gap: '8px',\r\n          }}\r\n        >\r\n          <kritzel-font-family selectedFontFamily={this.tool.fontFamily} onFontFamilyChange={event => this.handleFamilyChange(event)}></kritzel-font-family>\r\n\r\n          <button class=\"expand-toggle\" onClick={() => this.handleToggleExpand()} title={this.isExpanded ? 'Collapse' : 'Expand'}>\r\n            <kritzel-icon name={this.isExpanded ? 'chevron-up' : 'chevron-down'}></kritzel-icon>\r\n          </button>\r\n        </div>\r\n\r\n        <kritzel-color-palette\r\n          colors={this.tool.palette}\r\n          selectedColor={this.tool.fontColor}\r\n          isExpanded={this.isExpanded}\r\n          onColorChange={event => this.handleColorChange(event)}\r\n        ></kritzel-color-palette>\r\n\r\n        <kritzel-font-size selectedSize={this.tool.fontSize} fontFamily={this.tool.fontFamily} onSizeChange={event => this.handleSizeChange(event)}></kritzel-font-size>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"p-BkFzf8vg.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.css?tag=kritzel-control-brush-config&encapsulation=shadow","src/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n}\r\n\r\n.expand-toggle {\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  font-size: 14px;\r\n  line-height: 1;\r\n  padding: 8px;\r\n  color: var(--kritzel-color-palette-expand-toggle-color, #666666);\r\n}\r\n\r\n.expand-toggle:hover {\r\n  color: var(--kritzel-color-palette-expand-toggle-hover-color, #333333);\r\n}","import { Component, Host, Prop, h, Event, EventEmitter, Watch, State } from '@stencil/core';\r\nimport { KritzelBrushTool } from '../../../classes/tools/brush-tool.class';\r\n\r\n@Component({\r\n  tag: 'kritzel-control-brush-config',\r\n  styleUrl: 'kritzel-control-brush-config.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelControlBrushConfig {\r\n  @Prop({ mutable: true })\r\n  tool: KritzelBrushTool;\r\n\r\n  @Prop({ mutable: true })\r\n  isExpanded: boolean = false;\r\n\r\n  @Event()\r\n  toolChange: EventEmitter<KritzelBrushTool>;\r\n\r\n  @State()\r\n  palette: string[] = [];\r\n\r\n  @Watch('tool')\r\n  handleToolChange(newTool: KritzelBrushTool) {\r\n    this.palette = newTool.palettes[newTool.type];\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.palette = this.tool.palettes[this.tool.type];\r\n  }\r\n\r\n  handleToggleExpand() {\r\n    this.isExpanded = !this.isExpanded;\r\n  }\r\n\r\n  handleTypeChange(event: CustomEvent<'pen' | 'highlighter'>) {\r\n    this.palette = this.tool.palettes[event.detail];\r\n    this.tool.type = event.detail;\r\n    this.tool.color = this.palette[0];\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  handleColorChange(event: CustomEvent<string>) {\r\n    this.tool.color = event.detail;\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  handleSizeChange(event: CustomEvent<number>) {\r\n    this.tool.size = event.detail;\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div\r\n          style={{\r\n            display: 'flex',\r\n            flexDirection: 'row',\r\n            alignItems: 'center',\r\n            justifyContent: 'flex-start',\r\n            width: '100%',\r\n            gap: '8px',\r\n          }}\r\n        >\r\n          <kritzel-brush-style type={this.tool.type} onTypeChange={event => this.handleTypeChange(event)}></kritzel-brush-style>\r\n\r\n          <button class=\"expand-toggle\" onClick={() => this.handleToggleExpand()} title={this.isExpanded ? 'Collapse' : 'Expand'} style={this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' }}>\r\n            <kritzel-icon name={this.isExpanded ? 'chevron-up' : 'chevron-down'}></kritzel-icon>\r\n          </button>\r\n        </div>\r\n\r\n        <kritzel-color-palette\r\n          colors={this.palette}\r\n          selectedColor={this.tool.color}\r\n          isExpanded={this.isExpanded}\r\n          isOpaque={true}\r\n          onColorChange={color => this.handleColorChange(color)}\r\n        ></kritzel-color-palette>\r\n\r\n        <kritzel-stroke-size selectedSize={this.tool.size} onSizeChange={event => this.handleSizeChange(event)}></kritzel-stroke-size>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

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

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

@@ -1 +0,0 @@
-{"file":"p-C9usqwb5.js","mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,wuBAAwuB;;MCUxvB,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,GAAA;;;;;AAOE,QAAA,IAAI,CAAA,IAAA,GAA0B,KAAK;QAE3B,IAAA,CAAA,YAAY,GAAuB;AACzC,YAAA,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;AAC9B,YAAA,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;SAC/C;AAyBF;AApBC,IAAA,yBAAyB,CAAC,KAA0B,EAAA;QAClD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,MAA+B,CAAC;;IAG7D,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAqB,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,KAAK;YACzE,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,KAAK,EAAE,MAAM,CAAC,KAAK;AACpB,SAAA,CAAC,CAAC;AAEH,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAkB,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,IAAI,IAAI,CAAC,yBAAyB,CAAC,KAAK,CAAC,EAAA,EAC1H,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,QAAQ,EAAA,EAC9C,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAiB,CAAA,CACjD,CACQ,CACd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-brush-style/kritzel-brush-style.css?tag=kritzel-brush-style&encapsulation=shadow","src/components/shared/kritzel-brush-style/kritzel-brush-style.tsx"],"sourcesContent":[":host {\r\n  display: flex; \r\n  align-items: flex-start; \r\n  gap: 8px; \r\n  padding: 8px; \r\n  box-sizing: border-box; \r\n  width: 100%;\r\n}\r\n\r\n.brush-style-button {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 42px;\r\n  height: 32px;\r\n  padding: 0;\r\n  border: none;\r\n  outline: none;\r\n  background: none;\r\n  cursor: default;\r\n  border-radius: 0; \r\n  color: var(--control-text-color);\r\n  font-weight: bold;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.font-style-button:not(:last-child) {\r\n  border-right: 1px solid #333333; \r\n}\r\n\r\n.font-style-button:hover {\r\n  background-color: var(--control-hover-bg);\r\n}\r\n\r\n.font-style-button:active {\r\n  background-color: var(--control-active-bg);\r\n}\r\n\r\n.font-style-button.selected,\r\n.font-style-button.selected:hover,\r\n.font-style-button.selected:active {\r\n  background-color: var(--control-selected-bg);\r\n  color: var(--control-selected-color);\r\n}","import { Component, Host, h, Prop, EventEmitter, Event } from '@stencil/core';\r\nimport { DropdownOption } from '../kritzel-dropdown/kritzel-dropdown'; // Import DropdownOption\r\n\r\nexport interface BrushStyleOption extends DropdownOption {}\r\n\r\n@Component({\r\n  tag: 'kritzel-brush-style',\r\n  styleUrl: 'kritzel-brush-style.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelBrushStyle {\r\n  @Prop()\r\n  type: 'pen' | 'highlighter' = 'pen';\r\n\r\n  @Prop() brushOptions: BrushStyleOption[] = [\r\n    { value: 'pen', label: 'Pen' },\r\n    { value: 'highlighter', label: 'Highlighter' },\r\n  ];\r\n\r\n  @Event()\r\n  typeChange: EventEmitter<'pen' | 'highlighter'>;\r\n\r\n  handleDropdownValueChange(event: CustomEvent<string>) {\r\n    this.typeChange.emit(event.detail as 'pen' | 'highlighter');\r\n  }\r\n\r\n  render() {\r\n    const dropdownOptions: DropdownOption[] = this.brushOptions.map(option => ({\r\n      value: option.value,\r\n      label: option.label,\r\n    }));\r\n\r\n    return (\r\n      <Host>\r\n        <kritzel-dropdown options={dropdownOptions} value={this.type} onValueChanged={event => this.handleDropdownValueChange(event)}>\r\n          <button class=\"brush-style-button\" slot=\"prefix\">\r\n            <kritzel-icon name={this.type} size={16}></kritzel-icon>\r\n          </button>\r\n        </kritzel-dropdown>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"p-CmlcJ8Kw.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-tooltip/kritzel-tooltip.css?tag=kritzel-tooltip&encapsulation=shadow","src/components/shared/kritzel-tooltip/kritzel-tooltip.tsx"],"sourcesContent":[":host {\r\n  width: auto;\r\n}\r\n\r\n.tooltip-content {\r\n  position: relative;\r\n  padding: 8px 12px;\r\n  border-radius: 4px;\r\n  width: fit-content;\r\n  background-color: var(--kritzel-controls-tooltip-background-color, #ffffff);\r\n  color: var(--kritzel-controls-tooltip-color, #000000);\r\n  padding: var(--kritzel-controls-tooltip-padding, 8px);\r\n  border-radius: var(--kritzel-controls-tooltip-border-radius, 16px);\r\n  white-space: nowrap;\r\n  box-shadow: var(--kritzel-controls-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));\r\n}\r\n\r\n","import { Component, Host, Prop, h, Element, State, Listen } from '@stencil/core';\r\n\r\nconst MOBILE_BREAKPOINT = 768;\r\n\r\n@Component({\r\n  tag: 'kritzel-tooltip',\r\n  styleUrl: 'kritzel-tooltip.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelTooltip {\r\n  @Prop()\r\n  isVisible: boolean = false;\r\n\r\n  @Prop()\r\n  anchorElement: HTMLElement;\r\n\r\n  @Prop()\r\n  arrowSize: number = 8;\r\n\r\n  @Prop()\r\n  offsetY: number = 24;\r\n\r\n  @Element()\r\n  el: HTMLElement;\r\n\r\n  @State()\r\n  positionX: number = 0;\r\n\r\n  @State()\r\n  arrowOffset: string = '0px';\r\n\r\n  @State()\r\n  private isMobileView: boolean = window.innerWidth < MOBILE_BREAKPOINT;\r\n\r\n  @Listen('resize', { target: 'window' })\r\n  handleWindowResize() {\r\n    this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;\r\n    this.calculateAdjustedPosition();\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;\r\n    this.calculateAdjustedPosition();\r\n  }\r\n\r\n  componentWillUpdate() {\r\n    this.calculateAdjustedPosition();\r\n  }\r\n\r\n  private calculateAdjustedPosition() {\r\n    if (this.isVisible && this.anchorElement) {\r\n      const anchorRect = this.anchorElement.getBoundingClientRect();\r\n      const tooltipContent = this.el.shadowRoot?.querySelector('.tooltip-content') as HTMLElement;\r\n\r\n      if (!this.isMobileView) {\r\n        this.positionX = anchorRect.left + anchorRect.width / 2;\r\n        this.arrowOffset = `calc(${50}% - ${this.arrowSize}px)`; \r\n      } else {\r\n        const tooltipRect = tooltipContent.getBoundingClientRect();\r\n        this.positionX = anchorRect.left + anchorRect.width / 2 - tooltipRect.width / 2;\r\n        this.arrowOffset = `${anchorRect.left + anchorRect.width / 2 - tooltipRect.left - this.arrowSize}px`;\r\n      }\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        style={{\r\n          position: 'fixed',\r\n          zIndex: '9999',\r\n          transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',\r\n          visibility: this.isVisible ? 'visible' : 'hidden',\r\n          left: !this.isMobileView ? `${this.positionX}px` : '50%',\r\n          marginBottom: `${this.offsetY + this.arrowSize}px`,\r\n        }}\r\n      >\r\n        <div class=\"tooltip-content\" onClick={event => event.stopPropagation()}>\r\n          <slot></slot>\r\n          <div\r\n            class=\"tooltip-arrow-wrapper\"\r\n            style={{\r\n              position: 'fixed',\r\n              left: this.arrowOffset,\r\n              bottom: `-${this.arrowSize * 2}px`,\r\n            }}\r\n          >\r\n            <div\r\n              class=\"tooltip-arrow\"\r\n              style={{\r\n              borderLeft: `${this.arrowSize}px solid transparent`,\r\n              borderRight: `${this.arrowSize}px solid transparent`,\r\n              borderTop: `${this.arrowSize}px solid var(--kritzel-controls-tooltip-background-color, #ffffff)`,\r\n              filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',\r\n              }}\r\n            ></div>\r\n            <div\r\n              class=\"tooltip-arrow-rect\"\r\n              style={{\r\n              position: 'relative',\r\n              width: `${this.arrowSize * 2}px`,\r\n              height: `${this.arrowSize}px`,\r\n              backgroundColor: 'var(--kritzel-controls-tooltip-background-color, #ffffff)',\r\n              bottom: `${this.arrowSize * 2}px`,\r\n              }}\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"p-CtiROna-.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/classes/registries/icon-registry.class.ts","src/components/shared/kritzel-icon/kritzel-icon.css?tag=kritzel-icon&encapsulation=shadow","src/components/shared/kritzel-icon/kritzel-icon.tsx"],"sourcesContent":["export class KritzelIconRegistry {\r\n  private static registry = new Map<string, string>();\r\n\r\n  public static register(name: string, svgContent: string): void {\r\n    if (this.registry.has(name)) {\r\n      console.warn(`[IconRegistry] Icon \"${name}\" is already registered. It will be overwritten.`);\r\n    }\r\n    this.registry.set(name, svgContent);\r\n  }\r\n\r\n  public static get(name: string): string | undefined {\r\n    return this.registry.get(name);\r\n  }\r\n\r\n  public static registerIcons(icons: { [key: string]: string }): void {\r\n    for (const name in icons) {\r\n      if (Object.prototype.hasOwnProperty.call(icons, name)) {\r\n        this.register(name, icons[name]);\r\n      }\r\n    }\r\n  }\r\n\r\n  public static has(name: string): boolean {\r\n    return this.registry.has(name);\r\n  }\r\n}\r\n\r\nKritzelIconRegistry.registerIcons({\r\n  'cursor': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z\"/></svg>',\r\n  'pen': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\"/></svg>',\r\n  'highlighter': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-highlighter-icon lucide-highlighter\"><path d=\"m9 11-6 6v3h9l3-3\"/><path d=\"m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4\"/></svg>',\r\n  'eraser': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21\"/><path d=\"M22 21H7\"/><path d=\"m5 11 9 9\"/></svg>',\r\n  'type': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"4 7 4 4 20 4 20 7\"/><line x1=\"9\" x2=\"15\" y1=\"20\" y2=\"20\"/><line x1=\"12\" x2=\"12\" y1=\"4\" y2=\"20\"/></svg>',\r\n  'image': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"/><circle cx=\"9\" cy=\"9\" r=\"2\"/><path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"/></svg>',\r\n  'chevron-down': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg>',\r\n  'chevron-up': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m18 15-6-6-6 6\"/></svg>',\r\n  'copy': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-copy-icon lucide-copy\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"/><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"/></svg>',\r\n  'paste': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-clipboard-paste-icon lucide-clipboard-paste\"><path d=\"M11 14h10\"/><path d=\"M16 4h2a2 2 0 0 1 2 2v1.344\"/><path d=\"m17 18 4-4-4-4\"/><path d=\"M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113\"/><rect x=\"8\" y=\"2\" width=\"8\" height=\"4\" rx=\"1\"/></svg>',\r\n  'cut': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-scissors-icon lucide-scissors\"><circle cx=\"6\" cy=\"6\" r=\"3\"/><path d=\"M8.12 8.12 12 12\"/><path d=\"M20 4 8.12 15.88\"/><circle cx=\"6\" cy=\"18\" r=\"3\"/><path d=\"M14.8 14.8 20 20\"/></svg>',\r\n  'delete': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash2-icon lucide-trash-2\"><path d=\"M3 6h18\"/><path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\"/><path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\"/><line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\"/><line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\"/></svg>',\r\n  'bring-to-front': '<svg  width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-up-to-line-icon lucide-arrow-up-to-line\"><path d=\"M5 3h14\"/><path d=\"m18 13-6-6-6 6\"/><path d=\"M12 7v14\"/></svg>',\r\n  'send-to-back': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-arrow-down-to-line-icon lucide-arrow-down-to-line\"><path d=\"M12 17V3\"/><path d=\"m6 11 6 6 6-6\"/><path d=\"M19 21H5\"/></svg>',\r\n  'select-all': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-square-mouse-pointer-icon lucide-square-mouse-pointer\"><path d=\"M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66l-1.067 3.443a.5.5 0 0 1-.943.033z\"/><path d=\"M21 11V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6\"/></svg>',\r\n  'download': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-download-icon lucide-download\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/><polyline points=\"7 10 12 15 17 10\"/><line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\"/></svg>',\r\n  'undo': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-undo-icon lucide-undo\"><path d=\"M3 7v6h6\"/><path d=\"M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13\"/></svg>',\r\n  'redo': '<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-redo-icon lucide-redo\"><path d=\"M21 7v6h-6\"/><path d=\"M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7\"/></svg>'\r\n});",":host {\r\n  display: inline-flex; /* Changed from block to inline-flex for better alignment */\r\n  justify-content: center; /* Center content horizontally */\r\n  align-items: center; /* Center content vertically */\r\n}\r\n\r\nspan {\r\n  display: flex;\r\n  align-items: center;\r\n  width: 100%; /* Make span fill host width */\r\n  height: 100%; /* Make span fill host height */\r\n}\r\n\r\nspan > svg { /* Ensure SVG scales within the span */\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n","import { Component, h, Prop, Host } from '@stencil/core';\r\nimport { KritzelIconRegistry } from '../../../classes/registries/icon-registry.class';\r\n\r\n@Component({\r\n  tag: 'kritzel-icon',\r\n  styleUrl: 'kritzel-icon.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelIcon {\r\n  @Prop()\r\n  name: string;\r\n\r\n  @Prop()\r\n  label?: string;\r\n\r\n  @Prop()\r\n  size: number = 24;\r\n\r\n  render() {\r\n    const svgContent = KritzelIconRegistry.get(this.name);\r\n\r\n    if (!svgContent) {\r\n      console.error(`[kritzel-icon] Icon \"${this.name}\" not found in registry.`);\r\n      return <span class=\"error-icon\" aria-label={`Error: Icon ${this.name} not found`}>?</span>;\r\n    }\r\n\r\n    const styles = {\r\n      width: `${this.size}px`,\r\n      height: `${this.size}px`,\r\n    };\r\n\r\n    return (\r\n      <Host style={styles}>\r\n        <span\r\n          aria-hidden={!this.label}\r\n          role={this.label ? 'img' : undefined}\r\n          aria-label={this.label}\r\n          innerHTML={svgContent}\r\n        ></span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}