npm - kritzel-stencil - Versions diffs - 0.0.138 → 0.0.140 - Mend

kritzel-stencil 0.0.138 → 0.0.140

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.

Files changed (167) hide show

package/dist/components/{p-sreNwi0N.js.map → p-CE_sOMS2.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~sreNwi0N~~.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,4hBAA4hB;;MCO1iB,eAAe,iBAAAA,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;;;;;;;;;AAClB,IAAA,KAAK,GAAa,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;IACxB,YAAY,GAAkB,IAAI;IAEnD,UAAU,GAAW,OAAO;AAE3B,IAAA,UAAU;AAEX,IAAA,eAAe,CAAC,IAAY,EAAA;AAClC,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI;AACxB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;;IAG5B,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EACF,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAClB,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE;AACL,gBAAA,gBAAgB,EAAE,IAAI;AACtB,gBAAA,UAAU,EAAE,IAAI,CAAC,YAAY,KAAK,IAAI;AACvC,aAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAA,EAEzC,CAAA,CAAA,cAAA,EAAA,EAAc,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,GAAiB,CAClE,CACP,CAAC,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-font-size/kritzel-font-size.css?tag=kritzel-font-size&encapsulation=shadow","src/components/shared/kritzel-font-size/kritzel-font-size.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}\r\n\r\n.size-container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 4px;\r\n cursor: pointer;\r\n border: 2px solid transparent;\r\n box-sizing: border-box;\r\n border-radius: 50%;\r\n}\r\n\r\n.size-container:hover {\r\n background-color: var(--kritzel-font-size-hover-background-color, #ebebeb);\r\n}\r\n\r\n.size-container.selected {\r\n border-color: var(--kritzel-selection-border-color, #007AFF);\r\n background-color: var(--kritzel-font-size-selected-background-color, #e0e0e0);\r\n}\r\n\r\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'kritzel-font-size',\r\n styleUrl: 'kritzel-font-size.css',\r\n shadow: true,\r\n})\r\nexport class KritzelFontSize {\r\n @Prop() sizes: number[] = [8, 10, 12, 16, 20, 24];\r\n @Prop({ mutable: true }) selectedSize: number \| null = null;\r\n\r\n @Prop() fontFamily: string = 'Arial';\r\n\r\n @Event() sizeChange: EventEmitter<number>;\r\n\r\n private handleSizeClick(size: number) {\r\n this.selectedSize = size;\r\n this.sizeChange.emit(size);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n {this.sizes.map(size => (\r\n <div\r\n class={{\r\n 'size-container': true,\r\n 'selected': this.selectedSize === size,\r\n }}\r\n onClick={() => this.handleSizeClick(size)}\r\n >\r\n <kritzel-font fontFamily={this.fontFamily} size={size}></kritzel-font>\r\n </div>\r\n ))}\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"p-CE_sOMS2.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,4hBAA4hB;;MCO1iB,eAAe,iBAAAA,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;;;;;;;;;AAClB,IAAA,KAAK,GAAa,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;IACxB,YAAY,GAAkB,IAAI;IAEnD,UAAU,GAAW,OAAO;AAE3B,IAAA,UAAU;AAEX,IAAA,eAAe,CAAC,IAAY,EAAA;AAClC,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI;AACxB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;;IAG5B,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EACF,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAClB,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE;AACL,gBAAA,gBAAgB,EAAE,IAAI;AACtB,gBAAA,UAAU,EAAE,IAAI,CAAC,YAAY,KAAK,IAAI;AACvC,aAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAA,EAEzC,CAAA,CAAA,cAAA,EAAA,EAAc,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,GAAiB,CAClE,CACP,CAAC,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-font-size/kritzel-font-size.css?tag=kritzel-font-size&encapsulation=shadow","src/components/shared/kritzel-font-size/kritzel-font-size.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}\r\n\r\n.size-container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 4px;\r\n cursor: pointer;\r\n border: 2px solid transparent;\r\n box-sizing: border-box;\r\n border-radius: 50%;\r\n}\r\n\r\n.size-container:hover {\r\n background-color: var(--kritzel-font-size-hover-background-color, #ebebeb);\r\n}\r\n\r\n.size-container.selected {\r\n border-color: var(--kritzel-selection-border-color, #007AFF);\r\n background-color: var(--kritzel-font-size-selected-background-color, #e0e0e0);\r\n}\r\n\r\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'kritzel-font-size',\r\n styleUrl: 'kritzel-font-size.css',\r\n shadow: true,\r\n})\r\nexport class KritzelFontSize {\r\n @Prop() sizes: number[] = [8, 10, 12, 16, 20, 24];\r\n @Prop({ mutable: true }) selectedSize: number \| null = null;\r\n\r\n @Prop() fontFamily: string = 'Arial';\r\n\r\n @Event() sizeChange: EventEmitter<number>;\r\n\r\n private handleSizeClick(size: number) {\r\n this.selectedSize = size;\r\n this.sizeChange.emit(size);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n {this.sizes.map(size => (\r\n <div\r\n class={{\r\n 'size-container': true,\r\n 'selected': this.selectedSize === size,\r\n }}\r\n onClick={() => this.handleSizeClick(size)}\r\n >\r\n <kritzel-font fontFamily={this.fontFamily} size={size}></kritzel-font>\r\n </div>\r\n ))}\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/{p-BPsQrpzN.js → p-D2eJXNMx.js} RENAMED Viewed

@@ -74,23 +74,23 @@ const KritzelTooltip = /*@__PURE__*/ proxyCustomElement(class KritzelTooltip ext
         }
     }
     render() {
-        return (h(Host, { key: '8c3aeff60625f43f129afa70367cdb7a68a4b271', style: {
+        return (h(Host, { key: '72a6356a43a15a7abc9a46b0d22c3c62217791e8', 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.isMobileView ? `${this.positionX}px` : '50%',
                 marginBottom: `${this.offsetY + this.arrowSize}px`,
-            } }, h("div", { key: 'b22b606c2a836c2c9bbe21c6b470754753ccb309', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: '783403f4b5560012c9f6bd184a8c5eb26428e148' }), h("div", { key: 'bb98400edc5c6e05fd4ed2a476a5821f93964b8e', class: "tooltip-arrow-wrapper", style: {
+            } }, h("div", { key: '75f5350f23ada0eee009279eddd7d25273ad3740', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: 'ad999154289e933cac1fdc13392de2aec78811a8' }), h("div", { key: '6be3f5c24d42898920c339be2cd2f3dd8a82fa80', class: "tooltip-arrow-wrapper", style: {
                 position: 'fixed',
                 left: this.arrowOffset,
                 bottom: `-${this.arrowSize * 2}px`,
-            } }, h("div", { key: '850a058d635113a7870f25fa288a6447394c53ed', class: "tooltip-arrow", style: {
+            } }, h("div", { key: '37397c6245dd6b0def23e2611d118e0c4f5860ef', class: "tooltip-arrow", style: {
                 borderLeft: `${this.arrowSize}px solid transparent`,
                 borderRight: `${this.arrowSize}px solid transparent`,
                 borderTop: `${this.arrowSize}px solid var(--kritzel-controls-tooltip-background-color, #ffffff)`,
                 filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',
-            } }), h("div", { key: 'bbb3dc2673e2dfe4443ad80540dfc9e5a25c6c06', class: "tooltip-arrow-rect", style: {
+            } }), h("div", { key: 'dbf009c371d46ef0a36e27771758c66e817d9b22', class: "tooltip-arrow-rect", style: {
                 position: 'relative',
                 width: `${this.arrowSize * 2}px`,
                 height: `${this.arrowSize}px`,
@@ -124,6 +124,6 @@ function defineCustomElement() {
 }
 export { KritzelTooltip as K, defineCustomElement as d };
-//# sourceMappingURL=p-BPsQrpzN.js.map
+//# sourceMappingURL=p-D2eJXNMx.js.map
-//# sourceMappingURL=p-BPsQrpzN.js.map
+//# sourceMappingURL=p-D2eJXNMx.js.map

package/dist/components/{p-BPsQrpzN.js.map → p-D2eJXNMx.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~BPsQrpzN~~.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, Method, Event, EventEmitter } from '@stencil/core';\r\nimport { KritzelHTMLHelper } from '../../../helpers/html.helper';\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 @Element() host: HTMLElement;\r\n\r\n @Prop() isVisible: boolean = false;\r\n @Prop() anchorElement: HTMLElement;\r\n @Prop() arrowSize: number = 8;\r\n @Prop() offsetY: number = 24;\r\n\r\n @Event() tooltipClosed: EventEmitter<void>;\r\n\r\n @State() positionX: number = 0;\r\n @State() arrowOffset: string = '0px';\r\n @State() isMobileView: boolean = window.innerWidth < MOBILE_BREAKPOINT;\r\n\r\n @Listen('click', { target: 'document' })\r\n handleOutsideClick(event: MouseEvent) {\r\n if( !this.isVisible ) return;\r\n const target = event.target as HTMLElement;\r\n if (!this.host.contains(target)) {\r\n this.tooltipClosed.emit();\r\n }\r\n }\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 @Method()\r\n async focusContent() {\r\n const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);\r\n if (focusableElements.length > 0) {\r\n focusableElements[0].focus();\r\n }\r\n }\r\n\r\n componentDidLoad() {\r\n this.focusSlottedContent();\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 focusSlottedContent() {\r\n const slot = this.host.shadowRoot?.querySelector('slot');\r\n const assignedElements = slot?.assignedElements() \|\| [];\r\n if (assignedElements.length > 0) {\r\n const firstElement = assignedElements[0] as HTMLElement;\r\n firstElement.focus();\r\n }\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.host.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}
1	+ {"file":"p-D2eJXNMx.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, Method, Event, EventEmitter } from '@stencil/core';\r\nimport { KritzelHTMLHelper } from '../../../helpers/html.helper';\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 @Element() host: HTMLElement;\r\n\r\n @Prop() isVisible: boolean = false;\r\n @Prop() anchorElement: HTMLElement;\r\n @Prop() arrowSize: number = 8;\r\n @Prop() offsetY: number = 24;\r\n\r\n @Event() tooltipClosed: EventEmitter<void>;\r\n\r\n @State() positionX: number = 0;\r\n @State() arrowOffset: string = '0px';\r\n @State() isMobileView: boolean = window.innerWidth < MOBILE_BREAKPOINT;\r\n\r\n @Listen('click', { target: 'document' })\r\n handleOutsideClick(event: MouseEvent) {\r\n if( !this.isVisible ) return;\r\n const target = event.target as HTMLElement;\r\n if (!this.host.contains(target)) {\r\n this.tooltipClosed.emit();\r\n }\r\n }\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 @Method()\r\n async focusContent() {\r\n const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);\r\n if (focusableElements.length > 0) {\r\n focusableElements[0].focus();\r\n }\r\n }\r\n\r\n componentDidLoad() {\r\n this.focusSlottedContent();\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 focusSlottedContent() {\r\n const slot = this.host.shadowRoot?.querySelector('slot');\r\n const assignedElements = slot?.assignedElements() \|\| [];\r\n if (assignedElements.length > 0) {\r\n const firstElement = assignedElements[0] as HTMLElement;\r\n firstElement.focus();\r\n }\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.host.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-DCx3703u.js → p-D6FeQRzi.js} RENAMED Viewed

@@ -30,7 +30,7 @@ const KritzelUtilityPanel = /*@__PURE__*/ proxyCustomElement(class KritzelUtilit
         this.redo.emit();
     }
     render() {
-        return (h(Host, { key: '8109ccff01374c046d057021dfbcabdc632d829f' }, h("button", { key: '0d51cfb401974edf1a2a8810d2244f8a977c347f', class: "utility-button", onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: '1d13ee6bbf060402e0b1349d41b728875314e2e5', name: "undo" })), h("button", { key: 'f2fe59e7c99cb1550052088b507313cfaed72f29', class: "utility-button", onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '74bf8c20f61144ab4abc5804dcd8f39917d2c966', name: "redo" })), h("div", { key: '0c9a942e786425b32e984fefdc97b1abb5077997', class: "utility-separator" }), h("button", { key: '44ca9340c2f73212332e9b3ed93ed93b8f7c6944', class: "utility-button" }, h("kritzel-icon", { key: '7b4c3d9a105e0c25b5bbc11ff1bc1cbed9833e03', name: "delete", onClick: () => this.delete.emit() }))));
+        return (h(Host, { key: '8e2eb13668d8787827b10cee7c9daf2abdecc2c6' }, h("button", { key: '0773e7ef81bc972ba589333f4ac7e85d98737770', class: "utility-button", onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: 'fa69c1a2535d44bfb871a4d719079d0f900cc6c7', name: "undo" })), h("button", { key: 'edc28968f3ec92467d6b4aaa095a71770413d657', class: "utility-button", onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: 'd4cf72e2bda411fe9942d473c5e1ceae62a76074', name: "redo" })), h("div", { key: '8927237c6099a147495564657cdef97e7d35d7c1', class: "utility-separator" }), h("button", { key: 'e089819f7dd870165130322c3c4a9d754d4ed023', class: "utility-button" }, h("kritzel-icon", { key: 'a143770d1b3f8fdbe5c5b36c5d7eaab511cd8a4b', name: "delete", onClick: () => this.delete.emit() }))));
     }
     static get style() { return kritzelUtilityPanelCss; }
 }, [257, "kritzel-utility-panel"]);
@@ -54,6 +54,6 @@ function defineCustomElement() {
 }
 export { KritzelUtilityPanel as K, defineCustomElement as d };
-//# sourceMappingURL=p-DCx3703u.js.map
+//# sourceMappingURL=p-D6FeQRzi.js.map
-//# sourceMappingURL=p-DCx3703u.js.map
+//# sourceMappingURL=p-D6FeQRzi.js.map

package/dist/components/{p-DCx3703u.js.map → p-D6FeQRzi.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~DCx3703u~~.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,mrBAAmrB;;MCOrsB,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;;;;;AACrB,IAAA,IAAI;AACJ,IAAA,IAAI;AACJ,IAAA,MAAM;AAEf,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 border-radius: var(--kritzel-utility-panel-button-border-radius, 8px);\r\n}\r\n\r\n.utility-button:focus {\r\n background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));\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() undo: EventEmitter<void>;\r\n @Event() redo: EventEmitter<void>;\r\n @Event() 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}
1	+ {"file":"p-D6FeQRzi.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,mrBAAmrB;;MCOrsB,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;;;;;AACrB,IAAA,IAAI;AACJ,IAAA,IAAI;AACJ,IAAA,MAAM;AAEf,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 border-radius: var(--kritzel-utility-panel-button-border-radius, 8px);\r\n}\r\n\r\n.utility-button:focus {\r\n background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));\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() undo: EventEmitter<void>;\r\n @Event() redo: EventEmitter<void>;\r\n @Event() 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-Ddlbt3Bj.js → p-DbmQ5DrU.js} RENAMED Viewed

@@ -43,7 +43,7 @@ const KritzelFontFamily = /*@__PURE__*/ proxyCustomElement(class KritzelFontFami
             label: option.label,
             style: { fontFamily: option.value },
         }));
-        return (h(Host, { key: 'd05a099adf8623b8c67d68f3861c1cd401e86e2c' }, h("kritzel-dropdown", { key: 'b95af194feaaf5748bb0d584617d217e4b3b8180', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } }, h("button", { key: '04a0a72f9297dc6c34a2a2019cae111d8725bcf4', class: "font-style-button", slot: "suffix" }, "B"), h("button", { key: 'f14b59f29bcce33f890b74c1fb8d1dad0ad6fd31', class: "font-style-button italic-text", slot: "suffix" }, "I"))));
+        return (h(Host, { key: '27d14ddb4a57b9cd7b936047b6ea6a9251a1ab27' }, h("kritzel-dropdown", { key: '20ea042c9a907dc1ac5e16a589a8856f87389e36', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } }, h("button", { key: 'f63fed16477a327aadaeb54feefe35df1780e37d', class: "font-style-button", slot: "suffix" }, "B"), h("button", { key: '13b3089606c2e83b256ed2cec6513a9911016754', class: "font-style-button italic-text", slot: "suffix" }, "I"))));
     }
     static get style() { return kritzelFontFamilyCss; }
 }, [257, "kritzel-font-family", {
@@ -70,6 +70,6 @@ function defineCustomElement() {
 }
 export { KritzelFontFamily as K, defineCustomElement as d };
-//# sourceMappingURL=p-Ddlbt3Bj.js.map
+//# sourceMappingURL=p-DbmQ5DrU.js.map
-//# sourceMappingURL=p-Ddlbt3Bj.js.map
+//# sourceMappingURL=p-DbmQ5DrU.js.map

package/dist/components/{p-Ddlbt3Bj.js.map → p-DbmQ5DrU.js.map} RENAMED Viewed

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

package/dist/components/{p-BehchtaT.js → p-Dh61W3GT.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BYanlgdq.js';
 import { d as defineCustomElement$3 } from './p-sq9jgfX0.js';
 import { K as KritzelDevicesHelper } from './p-l10It7Nm.js';
-import { d as defineCustomElement$2 } from './p-BlPlPpUy.js';
+import { d as defineCustomElement$2 } from './p-BQJhnpY3.js';
 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);outline:none;cursor:default}: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:pointer;display:flex;align-items:center;justify-content:center;background-color:transparent;background:transparent;outline:none;-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}";
@@ -103,12 +103,12 @@ const KritzelMenuItem = /*@__PURE__*/ proxyCustomElement(class KritzelMenuItem e
         ];
     }
     render() {
-        return (h(Host, { key: 'a35e1e3427568f436a36b43ba87af3710a4e83c5', tabIndex: this.item.isDisabled ? -1 : 0, class: {
+        return (h(Host, { key: '9df3acdaff753e3ed910f848c98e8ad73e2b5f5c', tabIndex: this.item.isDisabled ? -1 : 0, class: {
                 'selected': this.item.isSelected,
                 'editing': this.item.isEditing,
                 'disabled': this.item.isDisabled,
                 'child-open': this.item.isChildMenuOpen,
-            }, onClick: this.handleItemSelect }, h("div", { key: '42eef5a16b9b164839c1fe133e38ecb505c07632', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
+            }, onClick: this.handleItemSelect }, h("div", { key: 'bb73e5c0c3dd87efabcaa0b53d20c7c477b34aa1', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
     }
     static get watchers() { return {
         "item": ["onItemChange"]
@@ -222,7 +222,7 @@ const KritzelMenu = /*@__PURE__*/ proxyCustomElement(class KritzelMenu extends H
         this.itemCloseChildMenu.emit(event.detail);
     };
     render() {
-        return (h(Host, { key: '211bd579000294d9edf6f85f2d7244aebe331191', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: 'b1c397118b1fbac934867677073661a69be1cab1', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (h("kritzel-menu-item", { key: item.id, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
+        return (h(Host, { key: 'be122cb0ecff3227d9e69997de76a73940a61860', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: 'ae10bec61e5c5e1a29b444cb7378f15c6692f3b6', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (h("kritzel-menu-item", { key: item.id, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
     }
     static get style() { return kritzelMenuCss; }
 }, [257, "kritzel-menu", {
@@ -267,6 +267,6 @@ function defineCustomElement() {
 }
 export { KritzelMenu as K, KritzelMenuItem as a, defineCustomElement$1 as b, defineCustomElement as d };
-//# sourceMappingURL=p-BehchtaT.js.map
+//# sourceMappingURL=p-Dh61W3GT.js.map
-//# sourceMappingURL=p-BehchtaT.js.map
+//# sourceMappingURL=p-Dh61W3GT.js.map

package/dist/components/{p-BehchtaT.js.map → p-Dh61W3GT.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-BehchtaT.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-menu-item/kritzel-menu-item.css?tag=kritzel-menu-item&encapsulation=shadow","src/components/shared/kritzel-menu-item/kritzel-menu-item.tsx","src/components/shared/kritzel-menu/kritzel-menu.css?tag=kritzel-menu&encapsulation=shadow","src/components/shared/kritzel-menu/kritzel-menu.tsx"],"sourcesContent":[":host {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n width: 100%;\r\n padding: var(--kritzel-menu-item-padding, 8px);\r\n box-sizing: border-box;\r\n gap: 16px;\r\n height: var(--kritzel-menu-item-height, 40px);\r\n min-height: var(--kritzel-menu-item-min-height, 40px);\r\n font-family: sans-serif;\r\n font-size: var(--kritzel-menu-item-font-size, 14px);\r\n color: var(--kritzel-menu-item-color, #333333);\r\n border-radius: var(--kritzel-menu-item-border-radius, 12px);\r\n outline: none;\r\n cursor: default;\r\n}\r\n\r\n:host(:hover) .menu-item-overlay,\r\n:host(:focus-within) .menu-item-overlay {\r\n background-color: var(--kritzel-menu-item-overlay-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n:host(.selected) {\r\n background-color: var(--kritzel-menu-item-selected-bg, #007aff);\r\n color: var(--kritzel-menu-item-selected-color, #ffffff);\r\n}\r\n\r\n:host(.selected) .action-button {\r\n color: var(--kritzel-menu-item-selected-color, #ffffff);\r\n}\r\n\r\n:host(.selected.editing) {\r\n background-color: var(--kritzel-menu-item-selected-bg, #007aff);\r\n}\r\n\r\n:host(.selected) .edit-input {\r\n color: var(--kritzel-menu-item-selected-color, #ffffff);\r\n}\r\n\r\n:host(.selected) .action-button kritzel-icon {\r\n --kritzel-icon-color: var(--kritzel-menu-item-selected-color, #ffffff);\r\n}\r\n\r\nkritzel-icon {\r\n --kritzel-icon-color: var(--kritzel-menu-item-color, #333333);\r\n}\r\n\r\n:host(.selected) .edit-input::selection {\r\n background-color: var(--kritzel-menu-item-input-selection-color, rgba(255, 255, 255, 0.16));\r\n}\r\n\r\n:host(.editing) {\r\n background-color: var(--kritzel-menu-item-editing-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n:host(.disabled) {\r\n opacity: 0.5;\r\n pointer-events: none !important;\r\n}\r\n\r\n:host(.child-open) {\r\n background-color: var(--kritzel-menu-item-child-open-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n:host(.child-open.selected) {\r\n background-color: var(--kritzel-menu-item-selected-bg, #007aff);\r\n}\r\n\r\n.menu-item-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background-color: transparent;\r\n z-index: 0;\r\n pointer-events: none;\r\n border-radius: var(--kritzel-menu-item-border-radius, 12px);\r\n}\r\n\r\n.menu-item-content {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n position: relative;\r\n z-index: 1;\r\n height: 100%;\r\n}\r\n\r\n.left {\r\n justify-content: flex-start;\r\n flex: 1;\r\n min-width: 0;\r\n}\r\n\r\n.left > div {\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.right {\r\n justify-content: flex-end;\r\n}\r\n\r\n.edit-input {\r\n flex: 1;\r\n height: var(--kritzel-menu-item-input-height, 24px);\r\n padding: 0;\r\n background-color: transparent;\r\n border-radius: 0;\r\n border: none;\r\n border-bottom: 1px solid var(--kritzel-menu-item-input-border, #ccc);\r\n font-size: var(--kritzel-context-menu-item-font-size, 14px);\r\n width: 100%;\r\n min-width: 0;\r\n box-sizing: border-box;\r\n outline: none;\r\n}\r\n\r\n.edit-input::selection {\r\n background-color: var(--kritzel-menu-item-input-selection-color, #007bff);\r\n color: var(--kritzel-menu-item-input-selection-text-color, #ffffff);\r\n}\r\n\r\n.action-button {\r\n padding: 4px;\r\n border-radius: 8px;\r\n border: none;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background-color: transparent;\r\n background: transparent;\r\n outline: none;\r\n -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.action-button:hover,\r\n.action-button:focus {\r\n background-color: var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.action-button.disabled {\r\n pointer-events: none;\r\n opacity: 0.5;\r\n}\r\n","import { Component, Host, Prop, h, Element, State, Watch, Event, EventEmitter } from '@stencil/core';\r\nimport { IKritzelMenuItem, IKritzelMenuItemSelectEvent, IKritzelMenuItemToggleChildMenuEvent } from '../../../interfaces/menu-item.interface';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\n\r\n@Component({\r\n tag: 'kritzel-menu-item',\r\n styleUrl: 'kritzel-menu-item.css',\r\n shadow: true,\r\n})\r\nexport class KritzelMenuItem {\r\n @Element() host: HTMLElement;\r\n\r\n @Prop() item: IKritzelMenuItem;\r\n @Watch('item')\r\n onItemChange(newValue: IKritzelMenuItem, oldValue: IKritzelMenuItem) {\r\n if (newValue !== oldValue) {\r\n this.isDirty = false;\r\n }\r\n }\r\n @Prop() parent: IKritzelMenuItem = null;\r\n\r\n @Event() itemSelect: EventEmitter<IKritzelMenuItemSelectEvent>;\r\n @Event() itemSave: EventEmitter<IKritzelMenuItem>;\r\n @Event() itemCancel: EventEmitter<IKritzelMenuItem>;\r\n @Event() itemToggleChildMenu: EventEmitter<IKritzelMenuItemToggleChildMenuEvent>;\r\n @Event() itemCloseChildMenu: EventEmitter<IKritzelMenuItem>;\r\n\r\n @State()\r\n isDirty: boolean = false;\r\n\r\n private inputRef: HTMLInputElement;\r\n\r\n private focusInput() {\r\n if (this.item.isEditing && this.inputRef && !this.isDirty) {\r\n this.inputRef.focus();\r\n\r\n if (KritzelDevicesHelper.isIOS()) {\r\n const length = this.inputRef.value.length;\r\n this.inputRef.setSelectionRange(length, length);\r\n } else {\r\n this.inputRef.select();\r\n }\r\n }\r\n }\r\n\r\n componentDidLoad() {\r\n this.setDeviceSpecificStyles();\r\n this.focusInput();\r\n }\r\n\r\n componentDidUpdate() {\r\n this.focusInput();\r\n }\r\n\r\n private setDeviceSpecificStyles = () => {\r\n const isTouchDevice = KritzelDevicesHelper.isTouchDevice();\r\n if (isTouchDevice) {\r\n this.host.style.setProperty('--kritzel-menu-item-overlay-background-color', 'transparent');\r\n this.host.style.setProperty('--kritzel-menu-item-button-hover-background-color', 'transparent');\r\n }\r\n };\r\n\r\n private handleItemSelect = (event: MouseEvent) => {\r\n event.stopPropagation();\r\n this.itemSelect.emit({ item: this.item, parent: this.parent });\r\n };\r\n\r\n private handleInputChange = (event: Event) => {\r\n event.stopPropagation();\r\n const target = event.target as HTMLInputElement;\r\n this.item.label = target.value;\r\n this.isDirty = true;\r\n };\r\n\r\n private handleSave = (event: MouseEvent) => {\r\n event.stopPropagation();\r\n this.host.focus();\r\n this.itemSave.emit(this.item);\r\n };\r\n\r\n private handleCancel = (event: MouseEvent) => {\r\n event.stopPropagation();\r\n this.host.focus();\r\n this.itemCancel.emit(this.item);\r\n };\r\n\r\n private handleMenuToggle = (event: MouseEvent) => {\r\n event.stopPropagation();\r\n this.itemToggleChildMenu.emit({ item: this.item, childMenuAnchor: event.target as HTMLElement });\r\n };\r\n\r\n private handleMenuClose = () => {\r\n this.itemCloseChildMenu.emit(this.item);\r\n };\r\n\r\n private renderViewMode() {\r\n return [\r\n <div class=\"menu-item-content left\">\r\n <div>{this.item.label}</div>\r\n </div>,\r\n <div class=\"menu-item-content right\">\r\n {this.item.children &&\r\n this.item.children.length > 0 && [\r\n <button id=\"child-menu-toggle\" class=\"action-button\" onClick={this.handleMenuToggle} disabled={this.item.isDisabled}>\r\n <kritzel-icon name=\"ellipsis-vertical\" size={16}></kritzel-icon>\r\n </button>,\r\n <kritzel-portal anchor={this.item.childMenuAnchor} offsetY={4} onClose={this.handleMenuClose}>\r\n <kritzel-menu\r\n items={this.item.children}\r\n parent={this.item}\r\n onItemSelect={event => this.itemSelect.emit(event.detail)}\r\n onItemSave={event => this.itemSave.emit(event.detail)}\r\n onItemCancel={event => this.itemCancel.emit(event.detail)}\r\n onClose={this.handleMenuClose}\r\n ></kritzel-menu>\r\n </kritzel-portal>,\r\n ]}\r\n </div>,\r\n ];\r\n }\r\n\r\n private renderEditMode() {\r\n return [\r\n <div class=\"menu-item-content left\">\r\n <input\r\n ref={el => (this.inputRef = el)}\r\n type=\"text\"\r\n class=\"edit-input\"\r\n value={this.item.label}\r\n onInput={this.handleInputChange}\r\n />\r\n </div>,\r\n <div class=\"menu-item-content right\">\r\n <div tabIndex={0} class=\"action-button\" onClick={this.handleCancel}>\r\n <kritzel-icon name=\"x\" size={16}></kritzel-icon>\r\n </div>\r\n <div\r\n tabIndex={!this.isDirty && !this.item.isNewItem ? -1 : 0}\r\n class={{ 'action-button': true, 'disabled': !this.isDirty && !this.item.isNewItem }}\r\n onClick={this.handleSave}\r\n >\r\n <kritzel-icon name=\"check\" size={16}></kritzel-icon>\r\n </div>\r\n </div>,\r\n ];\r\n }\r\n\r\n render() {\r\n return (\r\n <Host\r\n tabIndex={this.item.isDisabled ? -1 : 0}\r\n class={{\r\n 'selected': this.item.isSelected,\r\n 'editing': this.item.isEditing,\r\n 'disabled': this.item.isDisabled,\r\n 'child-open': this.item.isChildMenuOpen,\r\n }}\r\n onClick={this.handleItemSelect}\r\n >\r\n <div class=\"menu-item-overlay\"></div>\r\n {this.item.isEditing ? this.renderEditMode() : this.renderViewMode()}\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n background-color: var(--kritzel-menu-background-color, #ffffff);\r\n width: var(--kritzel-menu-width, 200px);\r\n padding: var(--kritzel-menu-padding, 8px);\r\n border-radius: var(--kritzel-menu-border-radius, 12px);\r\n box-shadow: var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));\r\n border: var(--kritzel-menu-border, 1px solid #ebebeb);\r\n z-index: 2;\r\n gap: var(--kritzel-menu-gap, 4px);\r\n overflow-y: auto;\r\n scrollbar-color: #ebebeb transparent;\r\n scrollbar-width: thin;\r\n max-height: 300px;\r\n}\r\n\r\n:host(:focus-visible) {\r\n outline: var(--kritzel-menu-focus-outline, 2px solid #e3e3e3);\r\n}\r\n\r\n.has-open-child-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n z-index: 3;\r\n}\r\n","import { Component, Host, Prop, h, State, Event, EventEmitter, Element, Method } from '@stencil/core';\r\nimport { IKritzelMenuItem, IKritzelMenuItemSelectEvent, IKritzelMenuItemToggleChildMenuEvent } from '../../../interfaces/menu-item.interface';\r\n\r\n@Component({\r\n tag: 'kritzel-menu',\r\n styleUrl: 'kritzel-menu.css',\r\n shadow: true,\r\n})\r\nexport class KritzelMenu {\r\n @Element() host: HTMLElement;\r\n\r\n @Prop() items: IKritzelMenuItem[];\r\n @Prop() parent: IKritzelMenuItem = null;\r\n\r\n @Event() itemSelect: EventEmitter<IKritzelMenuItemSelectEvent>;\r\n @Event() itemSave: EventEmitter<IKritzelMenuItem>;\r\n @Event() itemCancel: EventEmitter<IKritzelMenuItem>;\r\n @Event() itemToggleChildMenu: EventEmitter<IKritzelMenuItemToggleChildMenuEvent>;\r\n @Event() itemCloseChildMenu: EventEmitter<IKritzelMenuItem>;\r\n @Event() close: EventEmitter<void>;\r\n\r\n @State() selectedIndex: number \| null = null;\r\n\r\n @Method()\r\n async setScrollTop(scrollTop: number) {\r\n this.host.scrollTop = scrollTop;\r\n this.host.scrollTo({ top: scrollTop, behavior: 'auto' });\r\n }\r\n\r\n @Method()\r\n async setFocus() {\r\n const firstItem = this.host.shadowRoot.querySelector('kritzel-menu-item');\r\n if (firstItem) {\r\n firstItem.focus();\r\n }\r\n }\r\n\r\n get openChildMenuItem() {\r\n return this.items.find(item => item.isChildMenuOpen);\r\n }\r\n\r\n get editingMenuItem() {\r\n return this.items.find(item => item.isEditing);\r\n }\r\n\r\n private onOverlayClick = (event: MouseEvent) => {\r\n event.stopPropagation();\r\n this.itemCloseChildMenu.emit(this.openChildMenuItem);\r\n };\r\n\r\n private handleItemSelect = (event: CustomEvent<{ item: IKritzelMenuItem; parent: IKritzelMenuItem }>) => {\r\n event.stopPropagation();\r\n this.itemSelect.emit(event.detail);\r\n };\r\n\r\n private handleSave = (event: CustomEvent<IKritzelMenuItem>) => {\r\n event.stopPropagation();\r\n this.itemSave.emit(event.detail);\r\n };\r\n\r\n private handleCancel = (event: CustomEvent<IKritzelMenuItem>) => {\r\n event.stopPropagation();\r\n this.itemCancel.emit(event.detail);\r\n };\r\n\r\n private handleToggleChildMenu = (event: CustomEvent<{ item: IKritzelMenuItem; childMenuAnchor: HTMLElement }>) => {\r\n event.stopPropagation();\r\n this.itemToggleChildMenu.emit(event.detail);\r\n };\r\n\r\n private handleCloseChildMenu = (event: CustomEvent<IKritzelMenuItem>) => {\r\n event.stopPropagation();\r\n this.itemCloseChildMenu.emit(event.detail);\r\n };\r\n\r\n render() {\r\n return (\r\n <Host tabIndex={0} onClick={e => e.stopPropagation()}>\r\n {this.openChildMenuItem && <div class=\"has-open-child-overlay\" onClick={this.onOverlayClick}></div>}\r\n {this.items.map(item => (\r\n <kritzel-menu-item\r\n key={item.id}\r\n item={item}\r\n parent={this.parent}\r\n style={{ pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }}\r\n onItemSelect={this.handleItemSelect}\r\n onItemSave={this.handleSave}\r\n onItemCancel={this.handleCancel}\r\n onItemToggleChildMenu={this.handleToggleChildMenu}\r\n onItemCloseChildMenu={this.handleCloseChildMenu}\r\n ></kritzel-menu-item>\r\n ))}\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"p-Dh61W3GT.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-menu-item/kritzel-menu-item.css?tag=kritzel-menu-item&encapsulation=shadow","src/components/shared/kritzel-menu-item/kritzel-menu-item.tsx","src/components/shared/kritzel-menu/kritzel-menu.css?tag=kritzel-menu&encapsulation=shadow","src/components/shared/kritzel-menu/kritzel-menu.tsx"],"sourcesContent":[":host {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n width: 100%;\r\n padding: var(--kritzel-menu-item-padding, 8px);\r\n box-sizing: border-box;\r\n gap: 16px;\r\n height: var(--kritzel-menu-item-height, 40px);\r\n min-height: var(--kritzel-menu-item-min-height, 40px);\r\n font-family: sans-serif;\r\n font-size: var(--kritzel-menu-item-font-size, 14px);\r\n color: var(--kritzel-menu-item-color, #333333);\r\n border-radius: var(--kritzel-menu-item-border-radius, 12px);\r\n outline: none;\r\n cursor: default;\r\n}\r\n\r\n:host(:hover) .menu-item-overlay,\r\n:host(:focus-within) .menu-item-overlay {\r\n background-color: var(--kritzel-menu-item-overlay-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n:host(.selected) {\r\n background-color: var(--kritzel-menu-item-selected-bg, #007aff);\r\n color: var(--kritzel-menu-item-selected-color, #ffffff);\r\n}\r\n\r\n:host(.selected) .action-button {\r\n color: var(--kritzel-menu-item-selected-color, #ffffff);\r\n}\r\n\r\n:host(.selected.editing) {\r\n background-color: var(--kritzel-menu-item-selected-bg, #007aff);\r\n}\r\n\r\n:host(.selected) .edit-input {\r\n color: var(--kritzel-menu-item-selected-color, #ffffff);\r\n}\r\n\r\n:host(.selected) .action-button kritzel-icon {\r\n --kritzel-icon-color: var(--kritzel-menu-item-selected-color, #ffffff);\r\n}\r\n\r\nkritzel-icon {\r\n --kritzel-icon-color: var(--kritzel-menu-item-color, #333333);\r\n}\r\n\r\n:host(.selected) .edit-input::selection {\r\n background-color: var(--kritzel-menu-item-input-selection-color, rgba(255, 255, 255, 0.16));\r\n}\r\n\r\n:host(.editing) {\r\n background-color: var(--kritzel-menu-item-editing-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n:host(.disabled) {\r\n opacity: 0.5;\r\n pointer-events: none !important;\r\n}\r\n\r\n:host(.child-open) {\r\n background-color: var(--kritzel-menu-item-child-open-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n:host(.child-open.selected) {\r\n background-color: var(--kritzel-menu-item-selected-bg, #007aff);\r\n}\r\n\r\n.menu-item-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background-color: transparent;\r\n z-index: 0;\r\n pointer-events: none;\r\n border-radius: var(--kritzel-menu-item-border-radius, 12px);\r\n}\r\n\r\n.menu-item-content {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n position: relative;\r\n z-index: 1;\r\n height: 100%;\r\n}\r\n\r\n.left {\r\n justify-content: flex-start;\r\n flex: 1;\r\n min-width: 0;\r\n}\r\n\r\n.left > div {\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.right {\r\n justify-content: flex-end;\r\n}\r\n\r\n.edit-input {\r\n flex: 1;\r\n height: var(--kritzel-menu-item-input-height, 24px);\r\n padding: 0;\r\n background-color: transparent;\r\n border-radius: 0;\r\n border: none;\r\n border-bottom: 1px solid var(--kritzel-menu-item-input-border, #ccc);\r\n font-size: var(--kritzel-context-menu-item-font-size, 14px);\r\n width: 100%;\r\n min-width: 0;\r\n box-sizing: border-box;\r\n outline: none;\r\n}\r\n\r\n.edit-input::selection {\r\n background-color: var(--kritzel-menu-item-input-selection-color, #007bff);\r\n color: var(--kritzel-menu-item-input-selection-text-color, #ffffff);\r\n}\r\n\r\n.action-button {\r\n padding: 4px;\r\n border-radius: 8px;\r\n border: none;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background-color: transparent;\r\n background: transparent;\r\n outline: none;\r\n -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.action-button:hover,\r\n.action-button:focus {\r\n background-color: var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.action-button.disabled {\r\n pointer-events: none;\r\n opacity: 0.5;\r\n}\r\n","import { Component, Host, Prop, h, Element, State, Watch, Event, EventEmitter } from '@stencil/core';\r\nimport { IKritzelMenuItem, IKritzelMenuItemSelectEvent, IKritzelMenuItemToggleChildMenuEvent } from '../../../interfaces/menu-item.interface';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\n\r\n@Component({\r\n tag: 'kritzel-menu-item',\r\n styleUrl: 'kritzel-menu-item.css',\r\n shadow: true,\r\n})\r\nexport class KritzelMenuItem {\r\n @Element() host: HTMLElement;\r\n\r\n @Prop() item: IKritzelMenuItem;\r\n @Watch('item')\r\n onItemChange(newValue: IKritzelMenuItem, oldValue: IKritzelMenuItem) {\r\n if (newValue !== oldValue) {\r\n this.isDirty = false;\r\n }\r\n }\r\n @Prop() parent: IKritzelMenuItem = null;\r\n\r\n @Event() itemSelect: EventEmitter<IKritzelMenuItemSelectEvent>;\r\n @Event() itemSave: EventEmitter<IKritzelMenuItem>;\r\n @Event() itemCancel: EventEmitter<IKritzelMenuItem>;\r\n @Event() itemToggleChildMenu: EventEmitter<IKritzelMenuItemToggleChildMenuEvent>;\r\n @Event() itemCloseChildMenu: EventEmitter<IKritzelMenuItem>;\r\n\r\n @State()\r\n isDirty: boolean = false;\r\n\r\n private inputRef: HTMLInputElement;\r\n\r\n private focusInput() {\r\n if (this.item.isEditing && this.inputRef && !this.isDirty) {\r\n this.inputRef.focus();\r\n\r\n if (KritzelDevicesHelper.isIOS()) {\r\n const length = this.inputRef.value.length;\r\n this.inputRef.setSelectionRange(length, length);\r\n } else {\r\n this.inputRef.select();\r\n }\r\n }\r\n }\r\n\r\n componentDidLoad() {\r\n this.setDeviceSpecificStyles();\r\n this.focusInput();\r\n }\r\n\r\n componentDidUpdate() {\r\n this.focusInput();\r\n }\r\n\r\n private setDeviceSpecificStyles = () => {\r\n const isTouchDevice = KritzelDevicesHelper.isTouchDevice();\r\n if (isTouchDevice) {\r\n this.host.style.setProperty('--kritzel-menu-item-overlay-background-color', 'transparent');\r\n this.host.style.setProperty('--kritzel-menu-item-button-hover-background-color', 'transparent');\r\n }\r\n };\r\n\r\n private handleItemSelect = (event: MouseEvent) => {\r\n event.stopPropagation();\r\n this.itemSelect.emit({ item: this.item, parent: this.parent });\r\n };\r\n\r\n private handleInputChange = (event: Event) => {\r\n event.stopPropagation();\r\n const target = event.target as HTMLInputElement;\r\n this.item.label = target.value;\r\n this.isDirty = true;\r\n };\r\n\r\n private handleSave = (event: MouseEvent) => {\r\n event.stopPropagation();\r\n this.host.focus();\r\n this.itemSave.emit(this.item);\r\n };\r\n\r\n private handleCancel = (event: MouseEvent) => {\r\n event.stopPropagation();\r\n this.host.focus();\r\n this.itemCancel.emit(this.item);\r\n };\r\n\r\n private handleMenuToggle = (event: MouseEvent) => {\r\n event.stopPropagation();\r\n this.itemToggleChildMenu.emit({ item: this.item, childMenuAnchor: event.target as HTMLElement });\r\n };\r\n\r\n private handleMenuClose = () => {\r\n this.itemCloseChildMenu.emit(this.item);\r\n };\r\n\r\n private renderViewMode() {\r\n return [\r\n <div class=\"menu-item-content left\">\r\n <div>{this.item.label}</div>\r\n </div>,\r\n <div class=\"menu-item-content right\">\r\n {this.item.children &&\r\n this.item.children.length > 0 && [\r\n <button id=\"child-menu-toggle\" class=\"action-button\" onClick={this.handleMenuToggle} disabled={this.item.isDisabled}>\r\n <kritzel-icon name=\"ellipsis-vertical\" size={16}></kritzel-icon>\r\n </button>,\r\n <kritzel-portal anchor={this.item.childMenuAnchor} offsetY={4} onClose={this.handleMenuClose}>\r\n <kritzel-menu\r\n items={this.item.children}\r\n parent={this.item}\r\n onItemSelect={event => this.itemSelect.emit(event.detail)}\r\n onItemSave={event => this.itemSave.emit(event.detail)}\r\n onItemCancel={event => this.itemCancel.emit(event.detail)}\r\n onClose={this.handleMenuClose}\r\n ></kritzel-menu>\r\n </kritzel-portal>,\r\n ]}\r\n </div>,\r\n ];\r\n }\r\n\r\n private renderEditMode() {\r\n return [\r\n <div class=\"menu-item-content left\">\r\n <input\r\n ref={el => (this.inputRef = el)}\r\n type=\"text\"\r\n class=\"edit-input\"\r\n value={this.item.label}\r\n onInput={this.handleInputChange}\r\n />\r\n </div>,\r\n <div class=\"menu-item-content right\">\r\n <div tabIndex={0} class=\"action-button\" onClick={this.handleCancel}>\r\n <kritzel-icon name=\"x\" size={16}></kritzel-icon>\r\n </div>\r\n <div\r\n tabIndex={!this.isDirty && !this.item.isNewItem ? -1 : 0}\r\n class={{ 'action-button': true, 'disabled': !this.isDirty && !this.item.isNewItem }}\r\n onClick={this.handleSave}\r\n >\r\n <kritzel-icon name=\"check\" size={16}></kritzel-icon>\r\n </div>\r\n </div>,\r\n ];\r\n }\r\n\r\n render() {\r\n return (\r\n <Host\r\n tabIndex={this.item.isDisabled ? -1 : 0}\r\n class={{\r\n 'selected': this.item.isSelected,\r\n 'editing': this.item.isEditing,\r\n 'disabled': this.item.isDisabled,\r\n 'child-open': this.item.isChildMenuOpen,\r\n }}\r\n onClick={this.handleItemSelect}\r\n >\r\n <div class=\"menu-item-overlay\"></div>\r\n {this.item.isEditing ? this.renderEditMode() : this.renderViewMode()}\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n background-color: var(--kritzel-menu-background-color, #ffffff);\r\n width: var(--kritzel-menu-width, 200px);\r\n padding: var(--kritzel-menu-padding, 8px);\r\n border-radius: var(--kritzel-menu-border-radius, 12px);\r\n box-shadow: var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));\r\n border: var(--kritzel-menu-border, 1px solid #ebebeb);\r\n z-index: 2;\r\n gap: var(--kritzel-menu-gap, 4px);\r\n overflow-y: auto;\r\n scrollbar-color: #ebebeb transparent;\r\n scrollbar-width: thin;\r\n max-height: 300px;\r\n}\r\n\r\n:host(:focus-visible) {\r\n outline: var(--kritzel-menu-focus-outline, 2px solid #e3e3e3);\r\n}\r\n\r\n.has-open-child-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n z-index: 3;\r\n}\r\n","import { Component, Host, Prop, h, State, Event, EventEmitter, Element, Method } from '@stencil/core';\r\nimport { IKritzelMenuItem, IKritzelMenuItemSelectEvent, IKritzelMenuItemToggleChildMenuEvent } from '../../../interfaces/menu-item.interface';\r\n\r\n@Component({\r\n tag: 'kritzel-menu',\r\n styleUrl: 'kritzel-menu.css',\r\n shadow: true,\r\n})\r\nexport class KritzelMenu {\r\n @Element() host: HTMLElement;\r\n\r\n @Prop() items: IKritzelMenuItem[];\r\n @Prop() parent: IKritzelMenuItem = null;\r\n\r\n @Event() itemSelect: EventEmitter<IKritzelMenuItemSelectEvent>;\r\n @Event() itemSave: EventEmitter<IKritzelMenuItem>;\r\n @Event() itemCancel: EventEmitter<IKritzelMenuItem>;\r\n @Event() itemToggleChildMenu: EventEmitter<IKritzelMenuItemToggleChildMenuEvent>;\r\n @Event() itemCloseChildMenu: EventEmitter<IKritzelMenuItem>;\r\n @Event() close: EventEmitter<void>;\r\n\r\n @State() selectedIndex: number \| null = null;\r\n\r\n @Method()\r\n async setScrollTop(scrollTop: number) {\r\n this.host.scrollTop = scrollTop;\r\n this.host.scrollTo({ top: scrollTop, behavior: 'auto' });\r\n }\r\n\r\n @Method()\r\n async setFocus() {\r\n const firstItem = this.host.shadowRoot.querySelector('kritzel-menu-item');\r\n if (firstItem) {\r\n firstItem.focus();\r\n }\r\n }\r\n\r\n get openChildMenuItem() {\r\n return this.items.find(item => item.isChildMenuOpen);\r\n }\r\n\r\n get editingMenuItem() {\r\n return this.items.find(item => item.isEditing);\r\n }\r\n\r\n private onOverlayClick = (event: MouseEvent) => {\r\n event.stopPropagation();\r\n this.itemCloseChildMenu.emit(this.openChildMenuItem);\r\n };\r\n\r\n private handleItemSelect = (event: CustomEvent<{ item: IKritzelMenuItem; parent: IKritzelMenuItem }>) => {\r\n event.stopPropagation();\r\n this.itemSelect.emit(event.detail);\r\n };\r\n\r\n private handleSave = (event: CustomEvent<IKritzelMenuItem>) => {\r\n event.stopPropagation();\r\n this.itemSave.emit(event.detail);\r\n };\r\n\r\n private handleCancel = (event: CustomEvent<IKritzelMenuItem>) => {\r\n event.stopPropagation();\r\n this.itemCancel.emit(event.detail);\r\n };\r\n\r\n private handleToggleChildMenu = (event: CustomEvent<{ item: IKritzelMenuItem; childMenuAnchor: HTMLElement }>) => {\r\n event.stopPropagation();\r\n this.itemToggleChildMenu.emit(event.detail);\r\n };\r\n\r\n private handleCloseChildMenu = (event: CustomEvent<IKritzelMenuItem>) => {\r\n event.stopPropagation();\r\n this.itemCloseChildMenu.emit(event.detail);\r\n };\r\n\r\n render() {\r\n return (\r\n <Host tabIndex={0} onClick={e => e.stopPropagation()}>\r\n {this.openChildMenuItem && <div class=\"has-open-child-overlay\" onClick={this.onOverlayClick}></div>}\r\n {this.items.map(item => (\r\n <kritzel-menu-item\r\n key={item.id}\r\n item={item}\r\n parent={this.parent}\r\n style={{ pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }}\r\n onItemSelect={this.handleItemSelect}\r\n onItemSave={this.handleSave}\r\n onItemCancel={this.handleCancel}\r\n onItemToggleChildMenu={this.handleToggleChildMenu}\r\n onItemCloseChildMenu={this.handleCloseChildMenu}\r\n ></kritzel-menu-item>\r\n ))}\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/{p-CsyM5q2M.js → p-IgPm36bH.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BYanlgdq.js';
-import { d as defineCustomElement$1 } from './p-B7kZ1_RH.js';
+import { d as defineCustomElement$1 } from './p-BJZudenH.js';
 const kritzelColorPaletteCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;width:100%;box-sizing:border-box}.color-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center;overflow:hidden;height:40px;transition:height 0.1s ease-in-out}.color-grid.expanded{height:500px}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box}.color-container:focus-visible{outline:var(--kritzel-color-palette-focus-outline, 2px auto #e3e3e3)}.color-container:hover{background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.color-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-color-palette-selected-background-color)}";
@@ -31,7 +31,7 @@ const KritzelColorPalette = /*@__PURE__*/ proxyCustomElement(class KritzelColorP
     render() {
         const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
         const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
-        return (h(Host, { key: '2ead7cd530ce181856e5f582f086a22a1fe69390' }, h("div", { key: 'fcc75b267f36e271d50615bfde42a29c28aa2536', class: {
+        return (h(Host, { key: 'd533725a8ab2019ae963959727283fbbf833c56a' }, h("div", { key: '7fb50c16d79e9b7330100b0f4e116f8f07b20827', class: {
                 'color-grid': true,
                 'expanded': this.isExpanded,
             }, style: {
@@ -68,6 +68,6 @@ function defineCustomElement() {
 }
 export { KritzelColorPalette as K, defineCustomElement as d };
-//# sourceMappingURL=p-CsyM5q2M.js.map
+//# sourceMappingURL=p-IgPm36bH.js.map
-//# sourceMappingURL=p-CsyM5q2M.js.map
+//# sourceMappingURL=p-IgPm36bH.js.map

package/dist/components/{p-CsyM5q2M.js.map → p-IgPm36bH.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~CsyM5q2M~~.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,m0BAAm0B;;MCOr1B,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;;;IACtB,MAAM,GAAa,EAAE;IACJ,aAAa,GAAkB,IAAI;IACpD,UAAU,GAAY,KAAK;IAC3B,QAAQ,GAAY,KAAK;AAExB,IAAA,WAAW;AAEZ,IAAA,gBAAgB,CAAC,KAAa,EAAA;AACpC,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK;AAC1B,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;;IAGtB,eAAe,GAAA;QACrB,MAAM,YAAY,GAAG,CAAC;QACtB,MAAM,SAAS,GAAG,EAAE;QACpB,MAAM,GAAG,GAAG,CAAC;AACb,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,YAAY,CAAC;AAC7D,QAAA,OAAO,CAAG,EAAA,QAAQ,GAAG,SAAS,GAAG,CAAC,QAAQ,GAAG,CAAC,IAAI,GAAG,IAAI;;IAG3D,MAAM,GAAA;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;AAC/E,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,GAAG,MAAM;QAExE,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,YAAY,EAAE,IAAI;gBAClB,UAAU,EAAE,IAAI,CAAC,UAAU;AAC5B,aAAA,EACD,KAAK,EAAE;AACL,gBAAA,MAAM,EAAE,cAAc;aACvB,EAAA,EAEA,eAAe,CAAC,GAAG,CAAC,KAAK,KACxB,WACE,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE;AACL,gBAAA,iBAAiB,EAAE,IAAI;AACvB,gBAAA,UAAU,EAAE,IAAI,CAAC,aAAa,KAAK,KAAK;AACzC,aAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAA,EAE3C,CAAe,CAAA,eAAA,EAAA,EAAA,KAAK,EAAE,KAAK,EAAkB,CAAA,CACzC,CACP,CAAC,CACE,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-color-palette/kritzel-color-palette.css?tag=kritzel-color-palette&encapsulation=shadow","src/components/shared/kritzel-color-palette/kritzel-color-palette.tsx"],"sourcesContent":[":host {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 8px;\r\n padding: 8px;\r\n width: 100%;\r\n box-sizing: border-box;\r\n}\r\n\r\n.color-grid {\r\n width: 100%;\r\n display: grid;\r\n grid-template-columns: repeat(6, 32px);\r\n gap: 8px;\r\n justify-items: center;\r\n overflow: hidden;\r\n height: 40px;\r\n transition: height 0.1s ease-in-out;\r\n}\r\n\r\n.color-grid.expanded {\r\n height: 500px;\r\n}\r\n\r\n.color-container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n border: 2px solid transparent;\r\n box-sizing: border-box;\r\n}\r\n\r\n.color-container:focus-visible {\r\n outline: var(--kritzel-color-palette-focus-outline, 2px auto #e3e3e3);\r\n}\r\n\r\n.color-container:hover {\r\n background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);\r\n}\r\n\r\n\r\n.color-container.selected {\r\n border-color: var(--kritzel-selection-border-color, #007AFF);\r\n background-color: var(--kritzel-color-palette-selected-background-color);\r\n}\r\n\r\n\r\n","import { Component, Host, h, Prop, EventEmitter, Event } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'kritzel-color-palette',\r\n styleUrl: 'kritzel-color-palette.css',\r\n shadow: true,\r\n})\r\nexport class KritzelColorPalette {\r\n @Prop() colors: string[] = [];\r\n @Prop({ mutable: true }) selectedColor: string \| null = null;\r\n @Prop() isExpanded: boolean = false;\r\n @Prop() isOpaque: boolean = false;\r\n\r\n @Event() colorChange: EventEmitter<string>;\r\n\r\n private handleColorClick(color: string) {\r\n this.selectedColor = color;\r\n this.colorChange.emit(color);\r\n }\r\n\r\n private calculateHeight(): string {\r\n const colorsPerRow = 6;\r\n const rowHeight = 32;\r\n const gap = 8;\r\n const rowCount = Math.ceil(this.colors.length / colorsPerRow);\r\n return `${rowCount * rowHeight + (rowCount - 1) * gap}px`;\r\n }\r\n\r\n render() {\r\n const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);\r\n const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';\r\n\r\n return (\r\n <Host>\r\n <div\r\n class={{\r\n 'color-grid': true,\r\n 'expanded': this.isExpanded,\r\n }}\r\n style={{\r\n height: expandedHeight,\r\n }}\r\n >\r\n {displayedColors.map(color => (\r\n <div\r\n tabIndex={0}\r\n class={{\r\n 'color-container': true,\r\n 'selected': this.selectedColor === color,\r\n }}\r\n onClick={() => this.handleColorClick(color)}\r\n >\r\n <kritzel-color value={color}></kritzel-color>\r\n </div>\r\n ))}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"p-IgPm36bH.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,m0BAAm0B;;MCOr1B,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;;;IACtB,MAAM,GAAa,EAAE;IACJ,aAAa,GAAkB,IAAI;IACpD,UAAU,GAAY,KAAK;IAC3B,QAAQ,GAAY,KAAK;AAExB,IAAA,WAAW;AAEZ,IAAA,gBAAgB,CAAC,KAAa,EAAA;AACpC,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK;AAC1B,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;;IAGtB,eAAe,GAAA;QACrB,MAAM,YAAY,GAAG,CAAC;QACtB,MAAM,SAAS,GAAG,EAAE;QACpB,MAAM,GAAG,GAAG,CAAC;AACb,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,YAAY,CAAC;AAC7D,QAAA,OAAO,CAAG,EAAA,QAAQ,GAAG,SAAS,GAAG,CAAC,QAAQ,GAAG,CAAC,IAAI,GAAG,IAAI;;IAG3D,MAAM,GAAA;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;AAC/E,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,GAAG,MAAM;QAExE,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,YAAY,EAAE,IAAI;gBAClB,UAAU,EAAE,IAAI,CAAC,UAAU;AAC5B,aAAA,EACD,KAAK,EAAE;AACL,gBAAA,MAAM,EAAE,cAAc;aACvB,EAAA,EAEA,eAAe,CAAC,GAAG,CAAC,KAAK,KACxB,WACE,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE;AACL,gBAAA,iBAAiB,EAAE,IAAI;AACvB,gBAAA,UAAU,EAAE,IAAI,CAAC,aAAa,KAAK,KAAK;AACzC,aAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAA,EAE3C,CAAe,CAAA,eAAA,EAAA,EAAA,KAAK,EAAE,KAAK,EAAkB,CAAA,CACzC,CACP,CAAC,CACE,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-color-palette/kritzel-color-palette.css?tag=kritzel-color-palette&encapsulation=shadow","src/components/shared/kritzel-color-palette/kritzel-color-palette.tsx"],"sourcesContent":[":host {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 8px;\r\n padding: 8px;\r\n width: 100%;\r\n box-sizing: border-box;\r\n}\r\n\r\n.color-grid {\r\n width: 100%;\r\n display: grid;\r\n grid-template-columns: repeat(6, 32px);\r\n gap: 8px;\r\n justify-items: center;\r\n overflow: hidden;\r\n height: 40px;\r\n transition: height 0.1s ease-in-out;\r\n}\r\n\r\n.color-grid.expanded {\r\n height: 500px;\r\n}\r\n\r\n.color-container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n border: 2px solid transparent;\r\n box-sizing: border-box;\r\n}\r\n\r\n.color-container:focus-visible {\r\n outline: var(--kritzel-color-palette-focus-outline, 2px auto #e3e3e3);\r\n}\r\n\r\n.color-container:hover {\r\n background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);\r\n}\r\n\r\n\r\n.color-container.selected {\r\n border-color: var(--kritzel-selection-border-color, #007AFF);\r\n background-color: var(--kritzel-color-palette-selected-background-color);\r\n}\r\n\r\n\r\n","import { Component, Host, h, Prop, EventEmitter, Event } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'kritzel-color-palette',\r\n styleUrl: 'kritzel-color-palette.css',\r\n shadow: true,\r\n})\r\nexport class KritzelColorPalette {\r\n @Prop() colors: string[] = [];\r\n @Prop({ mutable: true }) selectedColor: string \| null = null;\r\n @Prop() isExpanded: boolean = false;\r\n @Prop() isOpaque: boolean = false;\r\n\r\n @Event() colorChange: EventEmitter<string>;\r\n\r\n private handleColorClick(color: string) {\r\n this.selectedColor = color;\r\n this.colorChange.emit(color);\r\n }\r\n\r\n private calculateHeight(): string {\r\n const colorsPerRow = 6;\r\n const rowHeight = 32;\r\n const gap = 8;\r\n const rowCount = Math.ceil(this.colors.length / colorsPerRow);\r\n return `${rowCount * rowHeight + (rowCount - 1) * gap}px`;\r\n }\r\n\r\n render() {\r\n const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);\r\n const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';\r\n\r\n return (\r\n <Host>\r\n <div\r\n class={{\r\n 'color-grid': true,\r\n 'expanded': this.isExpanded,\r\n }}\r\n style={{\r\n height: expandedHeight,\r\n }}\r\n >\r\n {displayedColors.map(color => (\r\n <div\r\n tabIndex={0}\r\n class={{\r\n 'color-container': true,\r\n 'selected': this.selectedColor === color,\r\n }}\r\n onClick={() => this.handleColorClick(color)}\r\n >\r\n <kritzel-color value={color}></kritzel-color>\r\n </div>\r\n ))}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/{p-BgpsMYcw.js → p-JYqCBcMd.js} RENAMED Viewed

@@ -2,9 +2,9 @@ import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-
 import { K as KritzelWorkspace } from './p-YqK8ch2R.js';
 import { O as ObjectHelper } from './p-B0kd2rUI.js';
 import { d as defineCustomElement$5 } from './p-sq9jgfX0.js';
-import { b as defineCustomElement$3, d as defineCustomElement$4 } from './p-BehchtaT.js';
-import { d as defineCustomElement$2 } from './p-BlPlPpUy.js';
-import { d as defineCustomElement$1 } from './p-BorT6g39.js';
+import { b as defineCustomElement$3, d as defineCustomElement$4 } from './p-Dh61W3GT.js';
+import { d as defineCustomElement$2 } from './p-BQJhnpY3.js';
+import { d as defineCustomElement$1 } from './p-sHDCqDbD.js';
 const kritzelWorkspaceManagerCss = ":host{display:flex;flex-direction:column;z-index:1}";
@@ -149,7 +149,7 @@ const KritzelWorkspaceManager = /*@__PURE__*/ proxyCustomElement(class KritzelWo
     }
     static get style() { return kritzelWorkspaceManagerCss; }
 }, [257, "kritzel-workspace-manager", {
-        "activeWorkspace": [16, "active-workspace"],
+        "activeWorkspace": [1040, "active-workspace"],
         "workspaces": [16],
         "childMenuAnchor": [32],
         "openChildMenuItem": [32],
@@ -196,6 +196,6 @@ function defineCustomElement() {
 }
 export { KritzelWorkspaceManager as K, defineCustomElement as d };
-//# sourceMappingURL=p-BgpsMYcw.js.map
+//# sourceMappingURL=p-JYqCBcMd.js.map
-//# sourceMappingURL=p-BgpsMYcw.js.map
+//# sourceMappingURL=p-JYqCBcMd.js.map

package/dist/components/p-JYqCBcMd.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-JYqCBcMd.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.css?tag=kritzel-workspace-manager&encapsulation=shadow","src/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.tsx"],"sourcesContent":[":host {\r\n display: flex;\r\n flex-direction: column;\r\n z-index: 1;\r\n}\r\n","import { KritzelWorkspace } from '../../../classes/core/workspace.class';\r\nimport { ObjectHelper } from '../../../helpers/object.helper';\r\nimport { IKritzelMenuItem } from '../../../interfaces/menu-item.interface';\r\nimport { Host, h, Component, State, Prop, Event, EventEmitter, Element, Listen } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'kritzel-workspace-manager',\r\n styleUrl: 'kritzel-workspace-manager.css',\r\n shadow: true,\r\n})\r\nexport class KritzelWorkspaceManager {\r\n @Element() host!: HTMLElement;\r\n\r\n @Prop({ mutable: true }) activeWorkspace: KritzelWorkspace;\r\n @Prop() workspaces: KritzelWorkspace[] = [];\r\n\r\n @Event() isWorkspaceManagerReady: EventEmitter<void>;\r\n @Event() workspaceChange: EventEmitter<KritzelWorkspace>;\r\n\r\n @State() childMenuAnchor: HTMLElement = null;\r\n @State() openChildMenuItem: IKritzelMenuItem = null;\r\n @State() newWorkspace: KritzelWorkspace | null = null;\r\n @State() editingItemId: string | null = null;\r\n\r\n @Listen('wheel', { target: 'window', passive: false })\r\n handleWheel(event: WheelEvent) {\r\n if(event.ctrlKey){\r\n event.preventDefault();\r\n }\r\n }\r\n\r\n kritzelEngineRef: HTMLKritzelEngineElement | null = null;\r\n splitButtonRef!: HTMLKritzelSplitButtonElement;\r\n\r\n get sortedWorkspaces() {\r\n return [this.newWorkspace, ...this.workspaces].filter(ws => ws != null).sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());\r\n }\r\n\r\n async componentWillLoad() {\r\n await this.initializeEngine();\r\n this.isWorkspaceManagerReady.emit();\r\n }\r\n\r\n private async initializeEngine() {\r\n await customElements.whenDefined('kritzel-engine');\r\n this.kritzelEngineRef = this.host.parentElement.querySelector('kritzel-engine');\r\n\r\n if (!this.kritzelEngineRef) {\r\n throw new Error('kritzel-engine not found in parent element.');\r\n }\r\n }\r\n\r\n private async select(item: IKritzelMenuItem, parent: IKritzelMenuItem) {\r\n if (this.editingItemId) {\r\n return;\r\n }\r\n\r\n if (item.action) {\r\n item.action(item, parent);\r\n return;\r\n }\r\n\r\n this.workspaceChange.emit(item.value);\r\n }\r\n\r\n private async add() {\r\n await this.splitButtonRef.open();\r\n this.newWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');\r\n this.editingItemId = this.newWorkspace.id;\r\n }\r\n\r\n private edit(item: IKritzelMenuItem) {\r\n this.openChildMenuItem = null;\r\n this.childMenuAnchor = null;\r\n requestAnimationFrame(() => {\r\n this.editingItemId = item.id;\r\n });\r\n }\r\n\r\n private async save(item: IKritzelMenuItem) {\r\n if (this.newWorkspace) {\r\n this.newWorkspace.name = item.label;\r\n await this.kritzelEngineRef.createWorkspace(this.newWorkspace);\r\n this.workspaceChange.emit(this.newWorkspace);\r\n } else {\r\n const workspace = item.value;\r\n workspace.name = item.label;\r\n await this.kritzelEngineRef.updateWorkspace(workspace);\r\n }\r\n\r\n this.editingItemId = null;\r\n this.newWorkspace = null;\r\n }\r\n\r\n private cancel() {\r\n this.newWorkspace = null;\r\n this.editingItemId = null;\r\n }\r\n\r\n private async delete(item: IKritzelMenuItem) {\r\n this.openChildMenuItem = null;\r\n this.childMenuAnchor = null;\r\n\r\n await this.kritzelEngineRef.deleteWorkspace(item.value);\r\n\r\n if (item.value.id === this.activeWorkspace?.id) {\r\n this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id !== item.value.id) || null;\r\n this.workspaceChange.emit(this.activeWorkspace);\r\n }\r\n\r\n await this.splitButtonRef.focusMenu();\r\n }\r\n\r\n private toggleChildMenu(item: IKritzelMenuItem, anchor: HTMLElement) {\r\n this.openChildMenuItem = item;\r\n this.childMenuAnchor = anchor;\r\n }\r\n\r\n private closeChildMenu() {\r\n this.openChildMenuItem = null;\r\n this.childMenuAnchor = null;\r\n }\r\n\r\n private handleMenuOpen() {\r\n this.kritzelEngineRef.disable();\r\n }\r\n\r\n private handleMenuClose() {\r\n this.cancel();\r\n this.closeChildMenu();\r\n this.kritzelEngineRef.enable();\r\n }\r\n\r\n render() {\r\n const menuItems = this.sortedWorkspaces\r\n .sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())\r\n .filter(ws => ws !== null)\r\n .map(ws => {\r\n return {\r\n id: ws.id,\r\n label: ws.name,\r\n value: ws,\r\n isEditing: this.editingItemId === ws.id,\r\n isSelected: this.activeWorkspace?.id === ws.id,\r\n isNewItem: this.newWorkspace?.id === ws.id,\r\n isChildMenuOpen: this.openChildMenuItem?.id === ws.id,\r\n childMenuAnchor: this.openChildMenuItem?.id === ws.id ? this.childMenuAnchor : null,\r\n children: [\r\n {\r\n id: `${ws.id}-rename`,\r\n label: 'Rename',\r\n value: 'rename',\r\n action: (_item, parent) => this.edit(parent),\r\n },\r\n {\r\n id: `${ws.id}-delete`,\r\n label: 'Delete',\r\n value: 'delete',\r\n isDisabled: this.sortedWorkspaces.length <= 1,\r\n action: (_item, parent) => this.delete(parent),\r\n },\r\n ],\r\n };\r\n });\r\n\r\n return (\r\n <Host>\r\n <kritzel-split-button\r\n ref={el => (this.splitButtonRef = el)}\r\n items={menuItems}\r\n mainButtonDisabled={this.editingItemId != null}\r\n onMainButtonClick={() => this.add()}\r\n onItemSelect={event => this.select(event.detail.item, event.detail.parent)}\r\n onItemToggleChildMenu={event => this.toggleChildMenu(event.detail.item, event.detail.childMenuAnchor)}\r\n onItemSave={event => this.save(event.detail)}\r\n onItemCancel={() => this.cancel()}\r\n onItemCloseChildMenu={() => this.closeChildMenu()}\r\n onMenuOpen={() => this.handleMenuOpen()}\r\n onMenuClose={() => this.handleMenuClose()}\r\n ></kritzel-split-button>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/{p-PvCKCYuw.js → p-SKH0G2nM.js} RENAMED Viewed

@@ -1,18 +1,18 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BYanlgdq.js';
-import { b as KritzelBrushTool, c as KritzelTextTool } from './p-Di5CEwzQ.js';
+import { b as KritzelBrushTool, c as KritzelTextTool } from './p-C5sTCwe3.js';
 import { K as KritzelDevicesHelper } from './p-l10It7Nm.js';
-import { d as defineCustomElement$c } from './p-B7kZ1_RH.js';
-import { d as defineCustomElement$b } from './p-CsyM5q2M.js';
-import { d as defineCustomElement$a } from './p-B7w19kIk.js';
-import { d as defineCustomElement$9 } from './p-DjU7p3od.js';
+import { d as defineCustomElement$c } from './p-BJZudenH.js';
+import { d as defineCustomElement$b } from './p-IgPm36bH.js';
+import { d as defineCustomElement$a } from './p-BLc8TzcU.js';
+import { d as defineCustomElement$9 } from './p-BFLXutiB.js';
 import { d as defineCustomElement$8 } from './p-DFO-6kuA.js';
-import { d as defineCustomElement$7 } from './p-BM9IjvnD.js';
-import { d as defineCustomElement$6 } from './p-Ddlbt3Bj.js';
-import { d as defineCustomElement$5 } from './p-sreNwi0N.js';
+import { d as defineCustomElement$7 } from './p-C7UWRUAy.js';
+import { d as defineCustomElement$6 } from './p-DbmQ5DrU.js';
+import { d as defineCustomElement$5 } from './p-CE_sOMS2.js';
 import { d as defineCustomElement$4 } from './p-sq9jgfX0.js';
-import { d as defineCustomElement$3 } from './p-0iJh9Z6m.js';
-import { d as defineCustomElement$2 } from './p-BPsQrpzN.js';
-import { d as defineCustomElement$1 } from './p-DCx3703u.js';
+import { d as defineCustomElement$3 } from './p-vNnVlsJt.js';
+import { d as defineCustomElement$2 } from './p-D2eJXNMx.js';
+import { d as defineCustomElement$1 } from './p-D6FeQRzi.js';
 const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select:none}: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}.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;outline:none;background:none;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-divider{width:var(--kritzel-controls-divider-width, 1px);height:var(--kritzel-controls-divider-height, 24px);background-color:var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;width:40px;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:pointer;border-radius:50%}.kritzel-config:focus{outline:var(--kritzel-menu-focus-outline, 2px solid #e3e3e3)}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;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: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{position:fixed;bottom:56px;left:50%;transform:translateX(-50%);z-index:10001}";
@@ -121,13 +121,13 @@ const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls e
     }
     render() {
         const hasNoConfig = this.activeControl?.config === undefined || this.activeControl?.config === null;
-        return (h(Host, { key: 'a463310d88265b71097f838bf775abdcabc99225', class: {
+        return (h(Host, { key: 'ab3e5f078d6d197c6e10c9dee180c04ef85281bf', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '267e9c26b41a52c655209dbaa8c85cbd72323577', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '290ceb6f2c46eb7e869a4741dd6600bc7c47bbb4', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: 'c55773245c925e1b972f3e83cb4d8f1c93ebe995', class: "kritzel-controls" }, this.controls.map(control => {
+            }, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: 'd2590bc56b709e77910e7159296741c8859158d7', class: "kritzel-controls" }, this.controls.map(control => {
             if (control.type === 'tool') {
                 return (h("button", { class: {
                         'kritzel-control': true,
@@ -238,6 +238,6 @@ function defineCustomElement() {
 }
 export { KritzelControls as K, defineCustomElement as d };
-//# sourceMappingURL=p-PvCKCYuw.js.map
+//# sourceMappingURL=p-SKH0G2nM.js.map
-//# sourceMappingURL=p-PvCKCYuw.js.map
+//# sourceMappingURL=p-SKH0G2nM.js.map