npm - kritzel-stencil - Versions diffs - 0.0.130 → 0.0.131 - Mend

kritzel-stencil 0.0.130 → 0.0.131

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 (282) hide show

package/dist/collection/components/shared/kritzel-font/kritzel-font.js CHANGED Viewed

@@ -1,10 +1,8 @@
 import { Host, h } from "@stencil/core";
 export class KritzelFont {
-    constructor() {
-        this.fontFamily = 'Arial, sans-serif';
-        this.size = 24;
-        this.color = '#000000';
-    }
+    fontFamily = 'Arial, sans-serif';
+    size = 24;
+    color = '#000000';
     render() {
         return (h(Host, { key: 'd318355704f1bf66468dd793e5e38da827076d3b' }, h("div", { key: '447b4fba97f5d1900060859943438733667aed08', class: "font-preview", style: {
                 fontFamily: this.fontFamily,

package/dist/collection/components/shared/kritzel-font/kritzel-font.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kritzel-font.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-font/kritzel-font.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,WAAW;~~IALxB;QAOE~~,~~eAAU~~,GAAW,mBAAmB,CAAC;~~QAGzC~~,~~SAAI~~,GAAW,EAAE,CAAC;~~QAGlB~~,~~UAAK~~,GAAW,SAAS,CAAC;~~KAkB3B;IAhBC~~,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE;oBACL,UAAU,EAAE,IAAI,CAAC,UAAU;oBAC3B,QAAQ,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;oBAC1B,KAAK,EAAE,IAAI,CAAC,KAAK;iBAClB,QAGG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'kritzel-font',\r\n styleUrl: 'kritzel-font.css',\r\n shadow: true,\r\n})\r\nexport class KritzelFont {\r\n @Prop()\r\n fontFamily: string = 'Arial, sans-serif';\r\n\r\n @Prop()\r\n size: number = 24;\r\n\r\n @Prop()\r\n color: string = '#000000';\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div\r\n class=\"font-preview\"\r\n style={{\r\n fontFamily: this.fontFamily,\r\n fontSize: `${this.size}px`,\r\n color: this.color\r\n }}\r\n >\r\n A\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"kritzel-font.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-font/kritzel-font.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,WAAW;IAEtB,UAAU,GAAW,mBAAmB,CAAC;IAGzC,IAAI,GAAW,EAAE,CAAC;IAGlB,KAAK,GAAW,SAAS,CAAC;IAE1B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE;oBACL,UAAU,EAAE,IAAI,CAAC,UAAU;oBAC3B,QAAQ,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;oBAC1B,KAAK,EAAE,IAAI,CAAC,KAAK;iBAClB,QAGG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'kritzel-font',\r\n styleUrl: 'kritzel-font.css',\r\n shadow: true,\r\n})\r\nexport class KritzelFont {\r\n @Prop()\r\n fontFamily: string = 'Arial, sans-serif';\r\n\r\n @Prop()\r\n size: number = 24;\r\n\r\n @Prop()\r\n color: string = '#000000';\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div\r\n class=\"font-preview\"\r\n style={{\r\n fontFamily: this.fontFamily,\r\n fontSize: `${this.size}px`,\r\n color: this.color\r\n }}\r\n >\r\n A\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/shared/kritzel-font-family/kritzel-font-family.js CHANGED Viewed

@@ -1,22 +1,19 @@
 import { Host, h } from "@stencil/core";
 export class KritzelFontFamily {
-    constructor() {
-        this.fontOptions = [
-            { value: 'arial', label: 'Arial' },
-            { value: 'verdana', label: 'Verdana' },
-            { value: 'helvetica', label: 'Helvetica' },
-            { value: 'tahoma', label: 'Tahoma' },
-            { value: 'trebuchet ms', label: 'Trebuchet MS' },
-            { value: 'times new roman', label: 'Times New Roman' },
-            { value: 'georgia', label: 'Georgia' },
-            { value: 'garamond', label: 'Garamond' },
-            { value: 'courier new', label: 'Courier New' },
-            { value: 'brush script mt', label: 'Brush Script MT' },
-        ];
-        this.handleDropdownValueChange = (event) => {
-            this.fontFamilyChange.emit(event.detail);
-        };
-    }
+    fontOptions = [
+        { value: 'arial', label: 'Arial' },
+        { value: 'verdana', label: 'Verdana' },
+        { value: 'helvetica', label: 'Helvetica' },
+        { value: 'tahoma', label: 'Tahoma' },
+        { value: 'trebuchet ms', label: 'Trebuchet MS' },
+        { value: 'times new roman', label: 'Times New Roman' },
+        { value: 'georgia', label: 'Georgia' },
+        { value: 'garamond', label: 'Garamond' },
+        { value: 'courier new', label: 'Courier New' },
+        { value: 'brush script mt', label: 'Brush Script MT' },
+    ];
+    selectedFontFamily;
+    fontFamilyChange;
     componentWillLoad() {
         if (this.fontOptions && this.fontOptions.length > 0) {
             const isValidCurrentFont = this.fontOptions.some(opt => opt.value === this.selectedFontFamily);
@@ -25,6 +22,9 @@ export class KritzelFontFamily {
             }
         }
     }
+    handleDropdownValueChange = (event) => {
+        this.fontFamilyChange.emit(event.detail);
+    };
     render() {
         const dropdownOptions = this.fontOptions.map(option => ({
             value: option.value,

package/dist/collection/components/shared/kritzel-font-family/kritzel-font-family.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kritzel-font-family.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-font-family/kritzel-font-family.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAY9E,MAAM,OAAO,iBAAiB;~~IAL9B;QAOE~~,~~gBAAW~~,GAAiB;~~YAC1B~~,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;~~YAClC~~,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;~~YACtC~~,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE;~~YAC1C~~,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;~~YACpC~~,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,EAAE;~~YAChD~~,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;~~YACtD~~,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;~~YACtC~~,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;~~YACxC~~,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;~~YAC9C~~,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;~~SACvD~~,CAAC;~~QAiBM~~,~~8BAAyB~~,~~GAAG,CAAC,KAA0B,EAAE,EAAE~~;~~YACjE~~,~~IAAI,CAAC,~~gBAAgB,~~CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC~~;~~QAC3C~~,~~CAAC,CAAC;KAuBH;IAlCC,~~iBAAiB;QACf,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACpD,MAAM,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,kBAAkB,CAAC,CAAC;YAC/F,IAAI,CAAC,IAAI,CAAC,kBAAkB,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBACpD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YACtD,CAAC;QACH,CAAC;IACH,CAAC;~~IAMD~~,MAAM;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YACtD,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,KAAK,EAAE;SACpC,CAAC,CAAC,CAAC;QAEJ,OAAO,CACL,EAAC,IAAI;YACH,yEACE,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;gBAErD,+DAAQ,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,QAAQ,QAAW;gBAC1D,+DAAQ,KAAK,EAAC,+BAA+B,EAAC,IAAI,EAAC,QAAQ,QAAW,CACrD,CACd,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\nexport interface FontOption {\r\n value: string;\r\n label: string;\r\n}\r\n\r\n@Component({\r\n tag: 'kritzel-font-family',\r\n styleUrl: 'kritzel-font-family.css',\r\n shadow: true,\r\n})\r\nexport class KritzelFontFamily {\r\n @Prop() \r\n fontOptions: FontOption[] = [\r\n { value: 'arial', label: 'Arial' },\r\n { value: 'verdana', label: 'Verdana' },\r\n { value: 'helvetica', label: 'Helvetica' },\r\n { value: 'tahoma', label: 'Tahoma' },\r\n { value: 'trebuchet ms', label: 'Trebuchet MS' },\r\n { value: 'times new roman', label: 'Times New Roman' },\r\n { value: 'georgia', label: 'Georgia' },\r\n { value: 'garamond', label: 'Garamond' },\r\n { value: 'courier new', label: 'Courier New' },\r\n { value: 'brush script mt', label: 'Brush Script MT' },\r\n ];\r\n\r\n @Prop({ mutable: true }) \r\n selectedFontFamily: string;\r\n\r\n @Event()\r\n fontFamilyChange: EventEmitter<string>;\r\n\r\n componentWillLoad() {\r\n if (this.fontOptions && this.fontOptions.length > 0) {\r\n const isValidCurrentFont = this.fontOptions.some(opt => opt.value === this.selectedFontFamily);\r\n if (!this.selectedFontFamily \|\| !isValidCurrentFont) {\r\n this.selectedFontFamily = this.fontOptions[0].value;\r\n }\r\n }\r\n }\r\n\r\n private handleDropdownValueChange = (event: CustomEvent<string>) => {\r\n this.fontFamilyChange.emit(event.detail);\r\n };\r\n\r\n render() {\r\n const dropdownOptions = this.fontOptions.map(option => ({\r\n value: option.value,\r\n label: option.label,\r\n style: { fontFamily: option.value },\r\n }));\r\n\r\n return (\r\n <Host>\r\n <kritzel-dropdown\r\n options={dropdownOptions}\r\n value={this.selectedFontFamily}\r\n onValueChanged={this.handleDropdownValueChange}\r\n selectStyles={{ fontFamily: this.selectedFontFamily }}\r\n >\r\n <button class=\"font-style-button\" slot=\"suffix\">B</button>\r\n <button class=\"font-style-button italic-text\" slot=\"suffix\">I</button>\r\n </kritzel-dropdown>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"kritzel-font-family.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-font-family/kritzel-font-family.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAY9E,MAAM,OAAO,iBAAiB;IAE5B,WAAW,GAAiB;QAC1B,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;QAClC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACtC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE;QAC1C,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;QACpC,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,EAAE;QAChD,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;QACtD,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACtC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;QACxC,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;QAC9C,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;KACvD,CAAC;IAGF,kBAAkB,CAAS;IAG3B,gBAAgB,CAAuB;IAEvC,iBAAiB;QACf,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACpD,MAAM,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,kBAAkB,CAAC,CAAC;YAC/F,IAAI,CAAC,IAAI,CAAC,kBAAkB,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBACpD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YACtD,CAAC;QACH,CAAC;IACH,CAAC;IAEO,yBAAyB,GAAG,CAAC,KAA0B,EAAE,EAAE;QACjE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3C,CAAC,CAAC;IAEF,MAAM;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YACtD,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,KAAK,EAAE;SACpC,CAAC,CAAC,CAAC;QAEJ,OAAO,CACL,EAAC,IAAI;YACH,yEACE,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;gBAErD,+DAAQ,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,QAAQ,QAAW;gBAC1D,+DAAQ,KAAK,EAAC,+BAA+B,EAAC,IAAI,EAAC,QAAQ,QAAW,CACrD,CACd,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\nexport interface FontOption {\r\n value: string;\r\n label: string;\r\n}\r\n\r\n@Component({\r\n tag: 'kritzel-font-family',\r\n styleUrl: 'kritzel-font-family.css',\r\n shadow: true,\r\n})\r\nexport class KritzelFontFamily {\r\n @Prop() \r\n fontOptions: FontOption[] = [\r\n { value: 'arial', label: 'Arial' },\r\n { value: 'verdana', label: 'Verdana' },\r\n { value: 'helvetica', label: 'Helvetica' },\r\n { value: 'tahoma', label: 'Tahoma' },\r\n { value: 'trebuchet ms', label: 'Trebuchet MS' },\r\n { value: 'times new roman', label: 'Times New Roman' },\r\n { value: 'georgia', label: 'Georgia' },\r\n { value: 'garamond', label: 'Garamond' },\r\n { value: 'courier new', label: 'Courier New' },\r\n { value: 'brush script mt', label: 'Brush Script MT' },\r\n ];\r\n\r\n @Prop({ mutable: true }) \r\n selectedFontFamily: string;\r\n\r\n @Event()\r\n fontFamilyChange: EventEmitter<string>;\r\n\r\n componentWillLoad() {\r\n if (this.fontOptions && this.fontOptions.length > 0) {\r\n const isValidCurrentFont = this.fontOptions.some(opt => opt.value === this.selectedFontFamily);\r\n if (!this.selectedFontFamily \|\| !isValidCurrentFont) {\r\n this.selectedFontFamily = this.fontOptions[0].value;\r\n }\r\n }\r\n }\r\n\r\n private handleDropdownValueChange = (event: CustomEvent<string>) => {\r\n this.fontFamilyChange.emit(event.detail);\r\n };\r\n\r\n render() {\r\n const dropdownOptions = this.fontOptions.map(option => ({\r\n value: option.value,\r\n label: option.label,\r\n style: { fontFamily: option.value },\r\n }));\r\n\r\n return (\r\n <Host>\r\n <kritzel-dropdown\r\n options={dropdownOptions}\r\n value={this.selectedFontFamily}\r\n onValueChanged={this.handleDropdownValueChange}\r\n selectStyles={{ fontFamily: this.selectedFontFamily }}\r\n >\r\n <button class=\"font-style-button\" slot=\"suffix\">B</button>\r\n <button class=\"font-style-button italic-text\" slot=\"suffix\">I</button>\r\n </kritzel-dropdown>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.js CHANGED Viewed

@@ -1,10 +1,9 @@
 import { Host, h } from "@stencil/core";
 export class KritzelFontSize {
-    constructor() {
-        this.sizes = [8, 10, 12, 16, 20, 24];
-        this.selectedSize = null;
-        this.fontFamily = 'Arial';
-    }
+    sizes = [8, 10, 12, 16, 20, 24];
+    selectedSize = null;
+    fontFamily = 'Arial';
+    sizeChange;
     handleSizeClick(size) {
         this.selectedSize = size;
         this.sizeChange.emit(size);

package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kritzel-font-size.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-font-size/kritzel-font-size.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,eAAe;~~IAL5B;QAOE~~,~~UAAK~~,GAAa,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;~~QAG1C~~,~~iBAAY~~,GAAkB,IAAI,CAAC;~~QAGnC~~,~~eAAU~~,GAAW,OAAO,CAAC;~~KA2B9B~~;~~IAtBS~~,eAAe,CAAC,IAAY;QAClC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,uDACF,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACtB,WACE,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,UAAU,EAAE,IAAI,CAAC,YAAY,KAAK,IAAI;aACvC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YAEzC,oBAAc,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,GAAiB,CAClE,CACP,CAAC,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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()\r\n sizes: number[] = [8, 10, 12, 16, 20, 24];\r\n\r\n @Prop({ mutable: true })\r\n selectedSize: number \| null = null;\r\n\r\n @Prop()\r\n fontFamily: string = 'Arial';\r\n\r\n @Event()\r\n 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"]}
1	+ {"version":3,"file":"kritzel-font-size.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-font-size/kritzel-font-size.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,eAAe;IAE1B,KAAK,GAAa,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IAG1C,YAAY,GAAkB,IAAI,CAAC;IAGnC,UAAU,GAAW,OAAO,CAAC;IAG7B,UAAU,CAAuB;IAEzB,eAAe,CAAC,IAAY;QAClC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,uDACF,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACtB,WACE,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,UAAU,EAAE,IAAI,CAAC,YAAY,KAAK,IAAI;aACvC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YAEzC,oBAAc,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,GAAiB,CAClE,CACP,CAAC,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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()\r\n sizes: number[] = [8, 10, 12, 16, 20, 24];\r\n\r\n @Prop({ mutable: true })\r\n selectedSize: number \| null = null;\r\n\r\n @Prop()\r\n fontFamily: string = 'Arial';\r\n\r\n @Event()\r\n 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"]}

package/dist/collection/components/shared/kritzel-icon/kritzel-icon.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { h, Host } from "@stencil/core";
 import { KritzelIconRegistry } from "../../../classes/registries/icon-registry.class";
 export class KritzelIcon {
-    constructor() {
-        this.size = 24;
-    }
+    name;
+    label;
+    size = 24;
     render() {
         const svgContent = KritzelIconRegistry.get(this.name);
         if (!svgContent) {

package/dist/collection/components/shared/kritzel-icon/kritzel-icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kritzel-icon.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-icon/kritzel-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,iDAAiD,CAAC;AAOtF,MAAM,OAAO,WAAW;~~IALxB~~;~~QAaE~~,~~SAAI~~,GAAW,EAAE,CAAC;~~KA0BnB;IAxBC~~,MAAM;QACJ,MAAM,UAAU,GAAG,mBAAmB,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEtD,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,OAAO,CAAC,KAAK,CAAC,wBAAwB,IAAI,CAAC,IAAI,0BAA0B,CAAC,CAAC;YAC3E,OAAO,YAAM,KAAK,EAAC,YAAY,gBAAa,eAAe,IAAI,CAAC,IAAI,YAAY,QAAU,CAAC;QAC7F,CAAC;QAED,MAAM,MAAM,GAAG;YACb,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;YACvB,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;SACzB,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,MAAM;YACjB,2BACe,CAAC,IAAI,CAAC,KAAK,EACxB,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,gBACxB,IAAI,CAAC,KAAK,EACtB,SAAS,EAAE,UAAU,GACf,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\r\nimport { KritzelIconRegistry } from '../../../classes/registries/icon-registry.class';\r\n\r\n@Component({\r\n tag: 'kritzel-icon',\r\n styleUrl: 'kritzel-icon.css',\r\n shadow: true,\r\n})\r\nexport class KritzelIcon {\r\n @Prop()\r\n name: string;\r\n\r\n @Prop()\r\n label?: string;\r\n\r\n @Prop()\r\n size: number = 24;\r\n\r\n render() {\r\n const svgContent = KritzelIconRegistry.get(this.name);\r\n\r\n if (!svgContent) {\r\n console.error(`[kritzel-icon] Icon \"${this.name}\" not found in registry.`);\r\n return <span class=\"error-icon\" aria-label={`Error: Icon ${this.name} not found`}>?</span>;\r\n }\r\n\r\n const styles = {\r\n width: `${this.size}px`,\r\n height: `${this.size}px`,\r\n };\r\n\r\n return (\r\n <Host style={styles}>\r\n <span\r\n aria-hidden={!this.label}\r\n role={this.label ? 'img' : undefined}\r\n aria-label={this.label}\r\n innerHTML={svgContent}\r\n ></span>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"kritzel-icon.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-icon/kritzel-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,iDAAiD,CAAC;AAOtF,MAAM,OAAO,WAAW;IAEtB,IAAI,CAAS;IAGb,KAAK,CAAU;IAGf,IAAI,GAAW,EAAE,CAAC;IAElB,MAAM;QACJ,MAAM,UAAU,GAAG,mBAAmB,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEtD,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,OAAO,CAAC,KAAK,CAAC,wBAAwB,IAAI,CAAC,IAAI,0BAA0B,CAAC,CAAC;YAC3E,OAAO,YAAM,KAAK,EAAC,YAAY,gBAAa,eAAe,IAAI,CAAC,IAAI,YAAY,QAAU,CAAC;QAC7F,CAAC;QAED,MAAM,MAAM,GAAG;YACb,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;YACvB,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;SACzB,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,MAAM;YACjB,2BACe,CAAC,IAAI,CAAC,KAAK,EACxB,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,gBACxB,IAAI,CAAC,KAAK,EACtB,SAAS,EAAE,UAAU,GACf,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\r\nimport { KritzelIconRegistry } from '../../../classes/registries/icon-registry.class';\r\n\r\n@Component({\r\n tag: 'kritzel-icon',\r\n styleUrl: 'kritzel-icon.css',\r\n shadow: true,\r\n})\r\nexport class KritzelIcon {\r\n @Prop()\r\n name: string;\r\n\r\n @Prop()\r\n label?: string;\r\n\r\n @Prop()\r\n size: number = 24;\r\n\r\n render() {\r\n const svgContent = KritzelIconRegistry.get(this.name);\r\n\r\n if (!svgContent) {\r\n console.error(`[kritzel-icon] Icon \"${this.name}\" not found in registry.`);\r\n return <span class=\"error-icon\" aria-label={`Error: Icon ${this.name} not found`}>?</span>;\r\n }\r\n\r\n const styles = {\r\n width: `${this.size}px`,\r\n height: `${this.size}px`,\r\n };\r\n\r\n return (\r\n <Host style={styles}>\r\n <span\r\n aria-hidden={!this.label}\r\n role={this.label ? 'img' : undefined}\r\n aria-label={this.label}\r\n innerHTML={svgContent}\r\n ></span>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/shared/kritzel-menu/kritzel-menu.css CHANGED Viewed

@@ -9,7 +9,7 @@
   box-shadow: var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
   border: var(--kritzel-menu-border, 1px solid #ebebeb);
   z-index: 2;
-  gap: var(--kritzel-menu-item-gap, 4px);
+  gap: var(--kritzel-menu-gap, 4px);
   overflow-y: auto;
   scrollbar-color: #ebebeb transparent;
   scrollbar-width: thin;

package/dist/collection/components/shared/kritzel-menu/kritzel-menu.js CHANGED Viewed

@@ -1,33 +1,15 @@
 import { Host, h } from "@stencil/core";
 export class KritzelMenu {
-    constructor() {
-        this.parent = null;
-        this.selectedIndex = null;
-        this.onOverlayClick = (event) => {
-            event.stopPropagation();
-            this.itemCloseChildMenu.emit(this.openChildMenuItem);
-        };
-        this.handleItemSelect = (event) => {
-            event.stopPropagation();
-            this.itemSelect.emit(event.detail);
-        };
-        this.handleSave = (event) => {
-            event.stopPropagation();
-            this.itemSave.emit(event.detail);
-        };
-        this.handleCancel = (event) => {
-            event.stopPropagation();
-            this.itemCancel.emit(event.detail);
-        };
-        this.handleToggleChildMenu = (event) => {
-            event.stopPropagation();
-            this.itemToggleChildMenu.emit(event.detail);
-        };
-        this.handleCloseChildMenu = (event) => {
-            event.stopPropagation();
-            this.itemCloseChildMenu.emit(event.detail);
-        };
-    }
+    host;
+    items;
+    parent = null;
+    itemSelect;
+    itemSave;
+    itemCancel;
+    itemToggleChildMenu;
+    itemCloseChildMenu;
+    close;
+    selectedIndex = null;
     async setFocus() {
         const firstItem = this.host.querySelector('kritzel-menu-item');
         if (firstItem) {
@@ -40,6 +22,30 @@ export class KritzelMenu {
     get editingMenuItem() {
         return this.items.find(item => item.isEditing);
     }
+    onOverlayClick = (event) => {
+        event.stopPropagation();
+        this.itemCloseChildMenu.emit(this.openChildMenuItem);
+    };
+    handleItemSelect = (event) => {
+        event.stopPropagation();
+        this.itemSelect.emit(event.detail);
+    };
+    handleSave = (event) => {
+        event.stopPropagation();
+        this.itemSave.emit(event.detail);
+    };
+    handleCancel = (event) => {
+        event.stopPropagation();
+        this.itemCancel.emit(event.detail);
+    };
+    handleToggleChildMenu = (event) => {
+        event.stopPropagation();
+        this.itemToggleChildMenu.emit(event.detail);
+    };
+    handleCloseChildMenu = (event) => {
+        event.stopPropagation();
+        this.itemCloseChildMenu.emit(event.detail);
+    };
     render() {
         return (h(Host, { key: 'c82bde4dc70fdc79df7471bb10396394f6c3870a', onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: '5fe0323aaa0da44abe736c6ef5e0516113c7820d', 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 })))));
     }

package/dist/collection/components/shared/kritzel-menu/kritzel-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kritzel-menu.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-menu/kritzel-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAQtG,MAAM,OAAO,WAAW;~~IALxB~~;~~QASU~~,~~WAAM~~,GAAqB,IAAI,CAAC;~~QAS~~/B,~~kBAAa~~,~~GAAkB~~,~~IAAI~~,~~CAAC~~;~~QAkBrC~~,~~mBAAc~~,~~GAAG~~,~~CAAC~~,~~KAAiB~~,~~EAAE~~,~~EAAE~~;~~YAC7C~~,KAAK,~~CAAC~~,~~eAAe~~,~~EAAE~~,CAAC;~~YACxB~~,~~IAAI~~,CAAC,~~kBAAkB~~,~~CAAC~~,IAAI,CAAC,IAAI,CAAC,~~iBAAiB~~,CAAC,~~CAAC;QACvD~~,CAAC,CAAC;~~QAEM~~,~~qBAAgB~~,~~GAAG~~,~~CAAC,KAAwE,~~EAAE,~~EAAE~~;~~YACtG~~,~~KAAK~~,CAAC,~~eAAe~~,EAAE,CAAC;~~YACxB~~,~~IAAI~~,CAAC,~~UAAU~~,~~CAAC~~,IAAI,CAAC,KAAK,CAAC,~~MAAM~~,CAAC,~~CAAC;QACrC~~,CAAC,~~CAAA;QAEO~~,~~eAAU~~,~~GAAG~~,CAAC,~~KAAoC~~,~~EAAE~~,~~EAAE~~;~~YAC5D~~,~~KAAK,~~CAAC,eAAe,~~EAAE~~,CAAC~~;YACxB~~,~~IAAI~~,CAAC,~~QAAQ~~,CAAC,IAAI,CAAC,~~KAAK~~,CAAC,~~MAAM~~,CAAC,CAAC;~~QACnC~~,CAAC~~,CAAA~~;~~QAEO~~,~~iBAAY~~,GAAG,CAAC,~~KAAoC~~,EAAE,EAAE;~~YAC9D~~,KAAK,CAAC,eAAe,EAAE,CAAC;~~YACxB~~,IAAI,CAAC,~~UAAU~~,CAAC,IAAI,CAAC,~~KAAK~~,CAAC,~~MAAM~~,CAAC,CAAC;~~QACrC~~,CAAC,~~CAAA~~;~~QAEO~~,~~0BAAqB~~,GAAG,CAAC,~~KAA4E~~,EAAE,EAAE;~~YAC/G~~,KAAK,CAAC,eAAe,EAAE,CAAC;~~YACxB~~,IAAI,CAAC,~~mBAAmB~~,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;~~QAC9C~~,CAAC,CAAA;~~QAEO~~,~~yBAAoB~~,GAAG,CAAC,KAAoC,EAAE,EAAE;~~YACtE~~,KAAK,CAAC,eAAe,EAAE,CAAC;~~YACxB~~,IAAI,CAAC,~~kBAAkB~~,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;~~QAC7C~~,CAAC,CAAA;~~KAsBF;IAjEC~~,~~KAAK~~,~~CAAC,QAAQ;QACZ,MAAM,SAAS,~~GAAG,~~IAAI,~~CAAC,~~IAAI~~,~~CAAC~~,~~aAAa~~,CAAC,~~mBAAmB~~,~~CAAC~~,CAAC;~~QAC/D~~,IAAI,~~SAAS~~,~~EAAE~~,CAAC~~;YACd~~,~~SAAS~~,CAAC,KAAK,~~EAAE~~,CAAC~~;QACpB~~,CAAC;~~IACH~~,CAAC~~;IAED~~,~~IAAI,iBAAiB~~;~~QACnB~~,~~OAAO~~,~~IAAI~~,CAAC,KAAK,CAAC,~~IAAI~~,CAAC,IAAI,CAAC,~~EAAE~~,CAAC,IAAI,CAAC,~~eAAe~~,CAAC,CAAC~~;IACvD~~,CAAC;~~IAED~~,~~IAAI~~,~~eAAe~~;~~QACjB~~,~~OAAO~~,~~IAAI~~,CAAC,KAAK,CAAC,~~IAAI~~,CAAC,IAAI,CAAC,~~EAAE~~,CAAC,IAAI,CAAC,~~SAAS~~,CAAC,CAAC;~~IACjD~~,CAAC;~~IAgCD~~,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;YACpC,IAAI,CAAC,iBAAiB,IAAI,4DAAK,KAAK,EAAC,wBAAwB,EAAC,OAAO,EAAE,IAAI,CAAC,cAAc,GAAQ;YAClG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACxB,yBACE,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,EACnF,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,qBAAqB,EAAE,IAAI,CAAC,qBAAqB,EACjD,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,GAC5B,CACtB,CAAC,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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 setFocus() {\r\n const firstItem = this.host.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 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"]}
1	+ {"version":3,"file":"kritzel-menu.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-menu/kritzel-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["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 setFocus() {\r\n const firstItem = this.host.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 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"]}

package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.css CHANGED Viewed

@@ -79,6 +79,13 @@
 .left {
   justify-content: flex-start;
   flex: 1;
+  min-width: 0;
+}
+.left > div {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .right {

package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.js CHANGED Viewed

@@ -1,41 +1,20 @@
 import { Host, h } from "@stencil/core";
 export class KritzelMenuItem {
-    constructor() {
-        this.parent = null;
-        this.isDirty = false;
-        this.handleItemSelect = (event) => {
-            event.stopPropagation();
-            this.itemSelect.emit({ item: this.item, parent: this.parent });
-        };
-        this.handleInputChange = (event) => {
-            event.stopPropagation();
-            const target = event.target;
-            this.item.label = target.value;
-            this.isDirty = true;
-        };
-        this.handleSave = (event) => {
-            event.stopPropagation();
-            this.host.focus();
-            this.itemSave.emit(this.item);
-        };
-        this.handleCancel = (event) => {
-            event.stopPropagation();
-            this.host.focus();
-            this.itemCancel.emit(this.item);
-        };
-        this.handleMenuToggle = (event) => {
-            event.stopPropagation();
-            this.itemToggleChildMenu.emit({ item: this.item, childMenuAnchor: event.target });
-        };
-        this.handleMenuClose = () => {
-            this.itemCloseChildMenu.emit(this.item);
-        };
-    }
+    host;
+    item;
     onItemChange(newValue, oldValue) {
         if (newValue !== oldValue) {
             this.isDirty = false;
         }
     }
+    parent = null;
+    itemSelect;
+    itemSave;
+    itemCancel;
+    itemToggleChildMenu;
+    itemCloseChildMenu;
+    isDirty = false;
+    inputRef;
     componentDidLoad() {
         if (this.item.isEditing && this.inputRef && !this.isDirty) {
             this.inputRef.focus();
@@ -48,6 +27,33 @@ export class KritzelMenuItem {
             this.inputRef.select();
         }
     }
+    handleItemSelect = (event) => {
+        event.stopPropagation();
+        this.itemSelect.emit({ item: this.item, parent: this.parent });
+    };
+    handleInputChange = (event) => {
+        event.stopPropagation();
+        const target = event.target;
+        this.item.label = target.value;
+        this.isDirty = true;
+    };
+    handleSave = (event) => {
+        event.stopPropagation();
+        this.host.focus();
+        this.itemSave.emit(this.item);
+    };
+    handleCancel = (event) => {
+        event.stopPropagation();
+        this.host.focus();
+        this.itemCancel.emit(this.item);
+    };
+    handleMenuToggle = (event) => {
+        event.stopPropagation();
+        this.itemToggleChildMenu.emit({ item: this.item, childMenuAnchor: event.target });
+    };
+    handleMenuClose = () => {
+        this.itemCloseChildMenu.emit(this.item);
+    };
     renderViewMode() {
         return [
             h("div", { class: "menu-item-content left" }, h("div", null, this.item.label)),

package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kritzel-menu-item.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-menu-item/kritzel-menu-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQrG,MAAM,OAAO,eAAe;~~IAL5B;QAeU~~,~~WAAM,GAAqB,~~IAAI,~~CAAC~~;~~QASxC~~,~~YAAO~~,~~GAAY,KAAK,CAAC~~;~~QAkBjB~~,~~qBAAgB~~,~~GAAG,~~CAAC,~~KAAiB~~,EAAE,~~EAAE~~;~~YAC/C~~,KAAK,~~CAAC~~,~~eAAe,~~EAAE,CAAC;~~YACxB~~,IAAI,CAAC,~~UAAU~~,~~CAAC~~,~~IAAI~~,CAAC,~~EAAE~~,~~IAAI,EAAE,IAAI,~~CAAC,~~IAAI,EAAE,~~MAAM,~~EAAE~~,IAAI,CAAC,~~MAAM~~,~~EAAE~~,~~CAAC~~,~~CAAC~~;~~QACjE~~,~~CAAC~~,~~CAAC~~;~~QAEM~~,~~sBAAiB~~,~~GAAG~~,~~CAAC~~,~~KAAY~~,~~EAAE~~,~~EAAE;YAC3C~~,KAAK,CAAC,~~eAAe~~,~~EAAE~~,~~CAAC~~;~~YACxB~~,~~MAAM~~,~~MAAM~~,~~GAAG~~,~~KAAK~~,CAAC,~~MAA0B~~,CAAC~~;YAChD~~,IAAI,CAAC,IAAI,CAAC,~~KAAK~~,~~GAAG~~,~~MAAM~~,CAAC,KAAK,CAAC;~~YAC/B~~,IAAI,CAAC,~~OAAO~~,~~GAAG~~,~~IAAI~~,CAAC;~~QACtB~~,CAAC,CAAC;~~QAEM~~,~~eAAU~~,~~GAAG~~,CAAC,~~KAAiB~~,~~EAAE~~,~~EAAE;YACzC~~,~~KAAK~~,CAAC,~~eAAe~~,~~EAAE,CAAC;YACxB,~~IAAI,CAAC,IAAI,CAAC,~~KAAK~~,EAAE,CAAC;~~YAClB~~,IAAI,CAAC,QAAQ,CAAC,~~IAAI~~,CAAC,IAAI,CAAC,~~IAAI~~,CAAC,CAAC;~~QAChC~~,CAAC,CAAC;~~QAEM~~,~~iBAAY~~,GAAG,CAAC,KAAiB,EAAE,EAAE;~~YAC3C~~,KAAK,CAAC,eAAe,EAAE,CAAC;~~YACxB~~,IAAI,CAAC,IAAI,CAAC,~~KAAK~~,EAAE,CAAC~~;YAClB~~,IAAI,~~CAAC~~,~~UAAU~~,~~CAAC~~,IAAI,CAAC,~~IAAI~~,~~CAAC~~,~~IAAI,~~CAAC,CAAC;~~QAClC~~,CAAC,CAAC;~~QAEM~~,~~qBAAgB~~,GAAG,CAAC,~~KAAiB~~,EAAE,EAAE;~~YAC/C~~,KAAK,CAAC,eAAe,EAAE,CAAC;~~YACxB~~,~~IAAI~~,CAAC,~~mBAAmB~~,CAAC,IAAI,CAAC,~~EAAE,~~IAAI,~~EAAE~~,IAAI,CAAC,IAAI,~~EAAE~~,~~eAAe~~,EAAE,KAAK,CAAC,~~MAAqB~~,EAAE,CAAC~~,CAAC~~;~~QACnG~~,~~CAAC~~,CAAC~~;QAEM~~,~~oBAAe~~,~~GAAG~~,~~GAAG~~,EAAE;~~YAC7B~~,IAAI,CAAC,~~kBAAkB~~,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;~~QAC1C~~,CAAC,CAAC;~~KA6DH;IA5HC~~,YAAY,CAAC,~~QAA0B~~,EAAE,~~QAA0B~~;~~QACjE~~,~~IAAI~~,~~QAAQ~~,~~KAAK~~,~~QAAQ,~~EAAE,CAAC;~~YAC1B~~,IAAI,CAAC,~~OAAO~~,~~GAAG~~,KAAK,~~CAAC;QACvB~~,CAAC;~~IACH~~,CAAC~~;IAcD~~,~~gBAAgB;QACd~~,~~IAAI~~,IAAI,CAAC,IAAI,CAAC,~~SAAS,~~IAAI,~~IAAI~~,CAAC,~~QAAQ~~,~~IAAI,~~CAAC,~~IAAI~~,CAAC,~~OAAO~~,EAAE,~~CAAC~~;~~YAC1D~~,~~IAAI~~,CAAC,~~QAAQ~~,~~CAAC,KAAK,~~EAAE,CAAC;~~YACtB~~,IAAI,CAAC,~~QAAQ~~,CAAC,~~MAAM~~,~~EAAE,~~CAAC~~;QACzB~~,~~CAAC;IACH~~,~~CAAC;IAED~~,~~kBAAkB;QAChB~~,IAAI,~~IAAI,~~CAAC,IAAI,~~CAAC~~,~~SAAS~~,~~IAAI~~,~~IAAI~~,CAAC,~~QAAQ~~,~~IAAI~~,CAAC,~~IAAI~~,CAAC,~~OAAO~~,EAAE~~,CAAC~~;~~YAC1D~~,IAAI,CAAC,~~QAAQ~~,CAAC,~~KAAK~~,~~EAAE,~~CAAC~~;YACtB~~,IAAI,CAAC,~~QAAQ~~,CAAC,~~MAAM,EAAE,~~CAAC;~~QACzB~~,CAAC~~;IACH~~,CAAC;~~IAmCO~~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","sourcesContent":["import { Component, Host, Prop, h, Element, State, Watch, Event, EventEmitter } from '@stencil/core';\r\nimport { IKritzelMenuItem, IKritzelMenuItemSelectEvent, IKritzelMenuItemToggleChildMenuEvent } from '../../../interfaces/menu-item.interface';\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 componentDidLoad() {\r\n if (this.item.isEditing && this.inputRef && !this.isDirty) {\r\n this.inputRef.focus();\r\n this.inputRef.select();\r\n }\r\n }\r\n\r\n componentDidUpdate() {\r\n if (this.item.isEditing && this.inputRef && !this.isDirty) {\r\n this.inputRef.focus();\r\n this.inputRef.select();\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 ref={el => (this.inputRef = el)} type=\"text\" class=\"edit-input\" value={this.item.label} onInput={this.handleInputChange} />\r\n </div>,\r\n <div class=\"menu-item-content right\">\r\n <div tabIndex={!this.isDirty && !this.item.isNewItem ? -1 : 0} class={{ 'action-button': true, 'disabled': !this.isDirty && !this.item.isNewItem }} onClick={this.handleSave}>\r\n <kritzel-icon name=\"check\" size={16}></kritzel-icon>\r\n </div>\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 ];\r\n }\r\n\r\n render() {\r\n return (\r\n <Host\r\n tabIndex={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"]}
1	+ {"version":3,"file":"kritzel-menu-item.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-menu-item/kritzel-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Element, State, Watch, Event, EventEmitter } from '@stencil/core';\r\nimport { IKritzelMenuItem, IKritzelMenuItemSelectEvent, IKritzelMenuItemToggleChildMenuEvent } from '../../../interfaces/menu-item.interface';\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 componentDidLoad() {\r\n if (this.item.isEditing && this.inputRef && !this.isDirty) {\r\n this.inputRef.focus();\r\n this.inputRef.select();\r\n }\r\n }\r\n\r\n componentDidUpdate() {\r\n if (this.item.isEditing && this.inputRef && !this.isDirty) {\r\n this.inputRef.focus();\r\n this.inputRef.select();\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 ref={el => (this.inputRef = el)} type=\"text\" class=\"edit-input\" value={this.item.label} onInput={this.handleInputChange} />\r\n </div>,\r\n <div class=\"menu-item-content right\">\r\n <div tabIndex={!this.isDirty && !this.item.isNewItem ? -1 : 0} class={{ 'action-button': true, 'disabled': !this.isDirty && !this.item.isNewItem }} onClick={this.handleSave}>\r\n <kritzel-icon name=\"check\" size={16}></kritzel-icon>\r\n </div>\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 ];\r\n }\r\n\r\n render() {\r\n return (\r\n <Host\r\n tabIndex={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"]}

package/dist/collection/components/shared/kritzel-portal/kritzel-portal.js CHANGED Viewed

@@ -1,12 +1,8 @@
 import { Host, h } from "@stencil/core";
 import { ObjectHelper } from "../../../helpers/object.helper";
 export class KritzelPortal {
-    constructor() {
-        this.autoFocus = true;
-        this.id = `portal-${ObjectHelper.generateUUID()}`;
-        this.defaultOffset = 0;
-        this.minLeft = 0;
-    }
+    host;
+    anchor;
     anchorChanged(newValue) {
         if (newValue) {
             this.openPortal();
@@ -19,6 +15,10 @@ export class KritzelPortal {
             this.closePortal();
         }
     }
+    offsetX;
+    offsetY;
+    autoFocus = true;
+    close;
     handleOutsideClick(event) {
         event.stopPropagation();
         const isLastPortal = this.lastAddedPortal === this.portal;
@@ -45,7 +45,7 @@ export class KritzelPortal {
         }
         if (event.key === 'Enter') {
             const activeElement = this.getDeepActiveElement();
-            if (activeElement === null || activeElement === void 0 ? void 0 : activeElement.click) {
+            if (activeElement?.click) {
                 event.preventDefault();
                 activeElement.click();
             }
@@ -54,16 +54,18 @@ export class KritzelPortal {
     handleResize() {
         this.calculatePosition();
     }
+    portal;
+    id = `portal-${ObjectHelper.generateUUID()}`;
+    defaultOffset = 0;
+    minLeft = 0;
     focusFirstElement() {
         requestAnimationFrame(() => {
-            var _a, _b;
-            (_b = (_a = this.firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+            this.firstFocusableElement?.focus?.();
         });
     }
     getDeepActiveElement() {
-        var _a;
         let activeEl = document.activeElement;
-        while ((_a = activeEl === null || activeEl === void 0 ? void 0 : activeEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) {
+        while (activeEl?.shadowRoot?.activeElement) {
             activeEl = activeEl.shadowRoot.activeElement;
         }
         return activeEl;
@@ -130,25 +132,23 @@ export class KritzelPortal {
         return [...new Set(focusableElements)];
     }
     get firstFocusableElement() {
-        var _a, _b;
-        const slotEl = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
-        const firstAssigned = slotEl === null || slotEl === void 0 ? void 0 : slotEl.assignedElements({ flatten: true })[0];
+        const slotEl = this.host.shadowRoot?.querySelector('slot');
+        const firstAssigned = slotEl?.assignedElements({ flatten: true })[0];
         if (!firstAssigned)
             return null;
         const focusable = this.getFocusableElements(firstAssigned);
-        return (_b = focusable[0]) !== null && _b !== void 0 ? _b : firstAssigned;
+        return focusable[0] ?? firstAssigned;
     }
     get lastAddedPortal() {
         const portals = Array.from(document.querySelectorAll('[id^="portal-"]'));
         return portals.length ? portals[portals.length - 1] : null;
     }
     calculateLeft() {
-        var _a;
         if (!this.anchor || !this.portal)
             return 0;
         const refRect = this.anchor.getBoundingClientRect();
         const portalRect = this.portal.getBoundingClientRect();
-        const offset = (_a = this.offsetX) !== null && _a !== void 0 ? _a : this.defaultOffset;
+        const offset = this.offsetX ?? this.defaultOffset;
         let left = refRect.left + offset;
         const maxLeft = window.innerWidth - portalRect.width - this.minLeft;
         if (left < this.minLeft)
@@ -158,12 +158,11 @@ export class KritzelPortal {
         return Math.round(left + window.scrollX);
     }
     calculateTop() {
-        var _a;
         if (!this.anchor || !this.portal)
             return 0;
         const refRect = this.anchor.getBoundingClientRect();
         const portalRect = this.portal.getBoundingClientRect();
-        const offset = (_a = this.offsetY) !== null && _a !== void 0 ? _a : this.defaultOffset;
+        const offset = this.offsetY ?? this.defaultOffset;
         let top = refRect.bottom + offset;
         if (top + portalRect.height > window.innerHeight) {
             top = refRect.top - portalRect.height - offset;

package/dist/collection/components/shared/kritzel-portal/kritzel-portal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kritzel-portal.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-portal/kritzel-portal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AACtG,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAM9D,MAAM,OAAO,aAAa;IAJ1B;QAuBU,cAAS,GAAY,IAAI,CAAC;QAkD1B,OAAE,GAAW,UAAU,YAAY,CAAC,YAAY,EAAE,EAAE,CAAC;QACrD,kBAAa,GAAG,CAAC,CAAC;QAClB,YAAO,GAAG,CAAC,CAAC;KAoKrB;IAtOC,aAAa,CAAC,QAAqB;QACjC,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,UAAU,EAAE,CAAC;YAClB,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACzB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBACnB,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;IASD,kBAAkB,CAAC,KAAiB;QAClC,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,MAAM,CAAC;QAC1D,IAAI,CAAC,YAAY;YAAE,OAAO;QAE1B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC3C,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;YAChC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;YAClB,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;IAGD,aAAa,CAAC,KAAoB;QAChC,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,MAAM,CAAC;QAC1D,IAAI,CAAC,YAAY;YAAE,OAAO;QAE1B,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC3B,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;YACpB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;YAClB,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;YACxB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAC1B,MAAM,aAAa,GAAG,IAAI,CAAC,oBAAoB,EAAiB,CAAC;YACjE,IAAI,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,KAAK,EAAE,CAAC;gBACzB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,aAAa,CAAC,KAAK,EAAE,CAAC;YACxB,CAAC;QACH,CAAC;IACH,CAAC;IAGD,YAAY;QACV,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAOO,iBAAiB;QACvB,qBAAqB,CAAC,GAAG,EAAE;;YACzB,MAAA,MAAA,IAAI,CAAC,qBAAqB,0CAAE,KAAK,kDAAI,CAAC;QACxC,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,oBAAoB;;QAC1B,IAAI,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC;QACtC,OAAO,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,UAAU,0CAAE,aAAa,EAAE,CAAC;YAC3C,QAAQ,GAAG,QAAQ,CAAC,UAAU,CAAC,aAAa,CAAC;QAC/C,CAAC;QACD,OAAO,QAAQ,CAAC;IAClB,CAAC;IAEO,SAAS,CAAC,KAAoB;QACpC,MAAM,iBAAiB,GAAG,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/D,IAAI,iBAAiB,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAE3C,MAAM,cAAc,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC;QAC5C,MAAM,aAAa,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACtE,MAAM,aAAa,GAAG,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAElD,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;YACnB,iBAAiB;YACjB,IAAI,aAAa,KAAK,cAAc,EAAE,CAAC;gBACrC,aAAa,CAAC,KAAK,EAAE,CAAC;gBACtB,KAAK,CAAC,cAAc,EAAE,CAAC;YACzB,CAAC;QACH,CAAC;aAAM,CAAC;YACN,SAAS;YACT,IAAI,aAAa,KAAK,aAAa,EAAE,CAAC;gBACpC,cAAc,CAAC,KAAK,EAAE,CAAC;gBACvB,KAAK,CAAC,cAAc,EAAE,CAAC;YACzB,CAAC;QACH,CAAC;IACH,CAAC;IAEO,oBAAoB,CAAC,IAAiB;QAC5C,IAAI,CAAC,IAAI;YAAE,OAAO,EAAE,CAAC;QAErB,MAAM,iBAAiB,GAAkB,EAAE,CAAC;QAC5C,MAAM,iBAAiB,GAAG,oJAAoJ,CAAC;QAE/K,MAAM,SAAS,GAAG,CAAC,EAAe,EAAE,EAAE;YACpC,OAAO,EAAE,CAAC,YAAY,KAAK,IAAI,CAAC;QAClC,CAAC,CAAC;QAEF,gDAAgD;QAChD,IAAI,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC;YACzF,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/B,CAAC;QAED,kDAAkD;QAClD,MAAM,aAAa,GAAG,CAAC,OAAgB,EAAE,EAAE;YACzC,wBAAwB;YACxB,IAAI,OAAO,CAAC,UAAU,EAAE,CAAC;gBACvB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,gBAAgB,CAAc,iBAAiB,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;oBAC3F,IAAI,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC;wBAClB,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;oBAC7B,CAAC;gBACH,CAAC,CAAC,CAAC;gBACH,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;YACjE,CAAC;YAED,sBAAsB;YACtB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAc,iBAAiB,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;gBAChF,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC;oBACrD,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;gBAC7B,CAAC;YACH,CAAC,CAAC,CAAC;YAEH,yBAAyB;YACzB,IAAI,OAAO,CAAC,OAAO,KAAK,MAAM,EAAE,CAAC;gBAC9B,OAA2B,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,CAAC;YACpG,CAAC;YAED,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;QACtD,CAAC,CAAC;QAEF,aAAa,CAAC,IAAI,CAAC,CAAC;QAEpB,2CAA2C;QAC3C,OAAO,CAAC,GAAG,IAAI,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC;IACzC,CAAC;IAED,IAAY,qBAAqB;;QAC/B,MAAM,MAAM,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,MAAM,CAA2B,CAAC;QACrF,MAAM,aAAa,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,CAAC,CAA4B,CAAC;QAChG,IAAI,CAAC,aAAa;YAAE,OAAO,IAAI,CAAC;QAEhC,MAAM,SAAS,GAAG,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,CAAC;QAC3D,OAAO,MAAA,SAAS,CAAC,CAAC,CAAC,mCAAI,aAAa,CAAC;IACvC,CAAC;IAED,IAAY,eAAe;QACzB,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAc,iBAAiB,CAAC,CAAC,CAAC;QACtF,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAC7D,CAAC;IAEO,aAAa;;QACnB,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO,CAAC,CAAC;QAC3C,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,qBAAqB,EAAE,CAAC;QACpD,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,qBAAqB,EAAE,CAAC;QAEvD,MAAM,MAAM,GAAG,MAAA,IAAI,CAAC,OAAO,mCAAI,IAAI,CAAC,aAAa,CAAC;QAClD,IAAI,IAAI,GAAG,OAAO,CAAC,IAAI,GAAG,MAAM,CAAC;QAEjC,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,GAAG,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;QACpE,IAAI,IAAI,GAAG,IAAI,CAAC,OAAO;YAAE,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC;QAC7C,IAAI,IAAI,GAAG,OAAO;YAAE,IAAI,GAAG,OAAO,CAAC;QAEnC,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAC3C,CAAC;IAEO,YAAY;;QAClB,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO,CAAC,CAAC;QAC3C,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,qBAAqB,EAAE,CAAC;QACpD,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,qBAAqB,EAAE,CAAC;QACvD,MAAM,MAAM,GAAG,MAAA,IAAI,CAAC,OAAO,mCAAI,IAAI,CAAC,aAAa,CAAC;QAElD,IAAI,GAAG,GAAG,OAAO,CAAC,MAAM,GAAG,MAAM,CAAC;QAElC,IAAI,GAAG,GAAG,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC;YACjD,GAAG,GAAG,OAAO,CAAC,GAAG,GAAG,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC;QACjD,CAAC;QAED,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAC1C,CAAC;IAEO,UAAU;QAChB,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC5C,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;QACxC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;QAC/B,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;QACxC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC;QAC/B,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACnC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACpC,CAAC;IAEO,WAAW;QACjB,MAAM,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAChD,IAAI,CAAC,MAAM;YAAE,OAAO;QACpB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAClC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;IACrB,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO;QACzC,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QAChC,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QAClC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;QACnC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,IAAI,IAAI,CAAC;IACvC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE;YACtD,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Listen, Prop, Watch, h, Event, EventEmitter, Element } from '@stencil/core';\r\nimport { ObjectHelper } from '../../../helpers/object.helper';\r\n\r\n@Component({\r\n tag: 'kritzel-portal',\r\n shadow: true,\r\n})\r\nexport class KritzelPortal {\r\n @Element() host: HTMLElement;\r\n\r\n @Prop() anchor: HTMLElement;\r\n @Watch('anchor')\r\n anchorChanged(newValue: HTMLElement) {\r\n if (newValue) {\r\n this.openPortal();\r\n this.calculatePosition();\r\n if (this.autoFocus) {\r\n this.focusFirstElement();\r\n }\r\n } else {\r\n this.closePortal();\r\n }\r\n }\r\n\r\n @Prop() offsetX: number;\r\n @Prop() offsetY: number;\r\n @Prop() autoFocus: boolean = true;\r\n\r\n @Event() close: EventEmitter<void>;\r\n\r\n @Listen('click', { target: 'window' })\r\n handleOutsideClick(event: MouseEvent) {\r\n event.stopPropagation();\r\n\r\n const isLastPortal = this.lastAddedPortal === this.portal;\r\n if (!isLastPortal) return;\r\n\r\n const target = event.target as HTMLElement;\r\n if (!this.host.contains(target)) {\r\n this.close.emit();\r\n this.closePortal();\r\n }\r\n }\r\n\r\n @Listen('keydown', { target: 'window' })\r\n handleKeyDown(event: KeyboardEvent) {\r\n event.stopPropagation();\r\n\r\n const isLastPortal = this.lastAddedPortal === this.portal;\r\n if (!isLastPortal) return;\r\n\r\n if (event.key === 'Escape') {\r\n this.anchor.focus();\r\n this.close.emit();\r\n this.closePortal();\r\n }\r\n\r\n if (event.key === 'Tab') {\r\n this.trapFocus(event);\r\n }\r\n\r\n if (event.key === 'Enter') {\r\n const activeElement = this.getDeepActiveElement() as HTMLElement;\r\n if (activeElement?.click) {\r\n event.preventDefault();\r\n activeElement.click();\r\n }\r\n }\r\n }\r\n\r\n @Listen('resize', { target: 'window', capture: true })\r\n handleResize() {\r\n this.calculatePosition();\r\n }\r\n\r\n private portal: HTMLElement;\r\n private id: string = `portal-${ObjectHelper.generateUUID()}`;\r\n private defaultOffset = 0;\r\n private minLeft = 0;\r\n\r\n private focusFirstElement() {\r\n requestAnimationFrame(() => {\r\n this.firstFocusableElement?.focus?.();\r\n });\r\n }\r\n\r\n private getDeepActiveElement(): Element {\r\n let activeEl = document.activeElement;\r\n while (activeEl?.shadowRoot?.activeElement) {\r\n activeEl = activeEl.shadowRoot.activeElement;\r\n }\r\n return activeEl;\r\n }\r\n\r\n private trapFocus(event: KeyboardEvent) {\r\n const focusableElements = this.getFocusableElements(this.host);\r\n if (focusableElements.length === 0) return;\r\n\r\n const firstFocusable = focusableElements[0];\r\n const lastFocusable = focusableElements[focusableElements.length - 1];\r\n const activeElement = this.getDeepActiveElement();\r\n\r\n if (event.shiftKey) {\r\n /* shift + tab /\r\n if (activeElement === firstFocusable) {\r\n lastFocusable.focus();\r\n event.preventDefault();\r\n }\r\n } else {\r\n / tab */\r\n if (activeElement === lastFocusable) {\r\n firstFocusable.focus();\r\n event.preventDefault();\r\n }\r\n }\r\n }\r\n\r\n private getFocusableElements(root: HTMLElement): HTMLElement[] {\r\n if (!root) return [];\r\n\r\n const focusableElements: HTMLElement[] = [];\r\n const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex=\"-1\"])';\r\n\r\n const isVisible = (el: HTMLElement) => {\r\n return el.offsetParent !== null;\r\n };\r\n\r\n // Check if the root element itself is focusable\r\n if (root.matches(focusableSelector) && !root.hasAttribute('disabled') && isVisible(root)) {\r\n focusableElements.push(root);\r\n }\r\n\r\n // Function to recursively find focusable elements\r\n const findFocusable = (element: Element) => {\r\n // Search in shadow root\r\n if (element.shadowRoot) {\r\n Array.from(element.shadowRoot.querySelectorAll<HTMLElement>(focusableSelector)).forEach(el => {\r\n if (isVisible(el)) {\r\n focusableElements.push(el);\r\n }\r\n });\r\n Array.from(element.shadowRoot.children).forEach(findFocusable);\r\n }\r\n\r\n // Search in light DOM\r\n Array.from(element.querySelectorAll<HTMLElement>(focusableSelector)).forEach(el => {\r\n if (!focusableElements.includes(el) && isVisible(el)) {\r\n focusableElements.push(el);\r\n }\r\n });\r\n\r\n // Handle slotted content\r\n if (element.tagName === 'SLOT') {\r\n (element as HTMLSlotElement).assignedElements({ flatten: true }).forEach(el => findFocusable(el));\r\n }\r\n\r\n Array.from(element.children).forEach(findFocusable);\r\n };\r\n\r\n findFocusable(root);\r\n\r\n // Return unique elements in document order\r\n return [...new Set(focusableElements)];\r\n }\r\n\r\n private get firstFocusableElement(): HTMLElement \| null {\r\n const slotEl = this.host.shadowRoot?.querySelector('slot') as HTMLSlotElement \| null;\r\n const firstAssigned = slotEl?.assignedElements({ flatten: true })[0] as HTMLElement \| undefined;\r\n if (!firstAssigned) return null;\r\n\r\n const focusable = this.getFocusableElements(firstAssigned);\r\n return focusable[0] ?? firstAssigned;\r\n }\r\n\r\n private get lastAddedPortal(): HTMLElement \| null {\r\n const portals = Array.from(document.querySelectorAll<HTMLElement>('[id^=\"portal-\"]'));\r\n return portals.length ? portals[portals.length - 1] : null;\r\n }\r\n\r\n private calculateLeft() {\r\n if (!this.anchor \|\| !this.portal) return 0;\r\n const refRect = this.anchor.getBoundingClientRect();\r\n const portalRect = this.portal.getBoundingClientRect();\r\n\r\n const offset = this.offsetX ?? this.defaultOffset;\r\n let left = refRect.left + offset;\r\n\r\n const maxLeft = window.innerWidth - portalRect.width - this.minLeft;\r\n if (left < this.minLeft) left = this.minLeft;\r\n if (left > maxLeft) left = maxLeft;\r\n\r\n return Math.round(left + window.scrollX);\r\n }\r\n\r\n private calculateTop() {\r\n if (!this.anchor \|\| !this.portal) return 0;\r\n const refRect = this.anchor.getBoundingClientRect();\r\n const portalRect = this.portal.getBoundingClientRect();\r\n const offset = this.offsetY ?? this.defaultOffset;\r\n\r\n let top = refRect.bottom + offset;\r\n\r\n if (top + portalRect.height > window.innerHeight) {\r\n top = refRect.top - portalRect.height - offset;\r\n }\r\n\r\n return Math.round(top + window.scrollY);\r\n }\r\n\r\n private openPortal() {\r\n this.portal = document.createElement('div');\r\n this.portal.setAttribute('id', this.id);\r\n this.portal.style.zIndex = '1';\r\n this.portal.style.position = 'absolute';\r\n this.portal.style.top = '0px';\r\n this.portal.style.left = '0px';\r\n this.portal.appendChild(this.host);\r\n document.body.append(this.portal);\r\n }\r\n\r\n private closePortal() {\r\n const portal = document.getElementById(this.id);\r\n if (!portal) return;\r\n document.body.removeChild(portal);\r\n this.host.remove();\r\n }\r\n\r\n private calculatePosition() {\r\n if (!this.anchor \|\| !this.portal) return;\r\n const top = this.calculateTop();\r\n const left = this.calculateLeft();\r\n this.portal.style.top = `${top}px`;\r\n this.portal.style.left = `${left}px`;\r\n }\r\n\r\n render() {\r\n return (\r\n <Host style={{ display: this.anchor ? 'block' : 'none' }}>\r\n <slot />\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"kritzel-portal.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-portal/kritzel-portal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Listen, Prop, Watch, h, Event, EventEmitter, Element } from '@stencil/core';\r\nimport { ObjectHelper } from '../../../helpers/object.helper';\r\n\r\n@Component({\r\n tag: 'kritzel-portal',\r\n shadow: true,\r\n})\r\nexport class KritzelPortal {\r\n @Element() host: HTMLElement;\r\n\r\n @Prop() anchor: HTMLElement;\r\n @Watch('anchor')\r\n anchorChanged(newValue: HTMLElement) {\r\n if (newValue) {\r\n this.openPortal();\r\n this.calculatePosition();\r\n if (this.autoFocus) {\r\n this.focusFirstElement();\r\n }\r\n } else {\r\n this.closePortal();\r\n }\r\n }\r\n\r\n @Prop() offsetX: number;\r\n @Prop() offsetY: number;\r\n @Prop() autoFocus: boolean = true;\r\n\r\n @Event() close: EventEmitter<void>;\r\n\r\n @Listen('click', { target: 'window' })\r\n handleOutsideClick(event: MouseEvent) {\r\n event.stopPropagation();\r\n\r\n const isLastPortal = this.lastAddedPortal === this.portal;\r\n if (!isLastPortal) return;\r\n\r\n const target = event.target as HTMLElement;\r\n if (!this.host.contains(target)) {\r\n this.close.emit();\r\n this.closePortal();\r\n }\r\n }\r\n\r\n @Listen('keydown', { target: 'window' })\r\n handleKeyDown(event: KeyboardEvent) {\r\n event.stopPropagation();\r\n\r\n const isLastPortal = this.lastAddedPortal === this.portal;\r\n if (!isLastPortal) return;\r\n\r\n if (event.key === 'Escape') {\r\n this.anchor.focus();\r\n this.close.emit();\r\n this.closePortal();\r\n }\r\n\r\n if (event.key === 'Tab') {\r\n this.trapFocus(event);\r\n }\r\n\r\n if (event.key === 'Enter') {\r\n const activeElement = this.getDeepActiveElement() as HTMLElement;\r\n if (activeElement?.click) {\r\n event.preventDefault();\r\n activeElement.click();\r\n }\r\n }\r\n }\r\n\r\n @Listen('resize', { target: 'window', capture: true })\r\n handleResize() {\r\n this.calculatePosition();\r\n }\r\n\r\n private portal: HTMLElement;\r\n private id: string = `portal-${ObjectHelper.generateUUID()}`;\r\n private defaultOffset = 0;\r\n private minLeft = 0;\r\n\r\n private focusFirstElement() {\r\n requestAnimationFrame(() => {\r\n this.firstFocusableElement?.focus?.();\r\n });\r\n }\r\n\r\n private getDeepActiveElement(): Element {\r\n let activeEl = document.activeElement;\r\n while (activeEl?.shadowRoot?.activeElement) {\r\n activeEl = activeEl.shadowRoot.activeElement;\r\n }\r\n return activeEl;\r\n }\r\n\r\n private trapFocus(event: KeyboardEvent) {\r\n const focusableElements = this.getFocusableElements(this.host);\r\n if (focusableElements.length === 0) return;\r\n\r\n const firstFocusable = focusableElements[0];\r\n const lastFocusable = focusableElements[focusableElements.length - 1];\r\n const activeElement = this.getDeepActiveElement();\r\n\r\n if (event.shiftKey) {\r\n /* shift + tab /\r\n if (activeElement === firstFocusable) {\r\n lastFocusable.focus();\r\n event.preventDefault();\r\n }\r\n } else {\r\n / tab */\r\n if (activeElement === lastFocusable) {\r\n firstFocusable.focus();\r\n event.preventDefault();\r\n }\r\n }\r\n }\r\n\r\n private getFocusableElements(root: HTMLElement): HTMLElement[] {\r\n if (!root) return [];\r\n\r\n const focusableElements: HTMLElement[] = [];\r\n const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex=\"-1\"])';\r\n\r\n const isVisible = (el: HTMLElement) => {\r\n return el.offsetParent !== null;\r\n };\r\n\r\n // Check if the root element itself is focusable\r\n if (root.matches(focusableSelector) && !root.hasAttribute('disabled') && isVisible(root)) {\r\n focusableElements.push(root);\r\n }\r\n\r\n // Function to recursively find focusable elements\r\n const findFocusable = (element: Element) => {\r\n // Search in shadow root\r\n if (element.shadowRoot) {\r\n Array.from(element.shadowRoot.querySelectorAll<HTMLElement>(focusableSelector)).forEach(el => {\r\n if (isVisible(el)) {\r\n focusableElements.push(el);\r\n }\r\n });\r\n Array.from(element.shadowRoot.children).forEach(findFocusable);\r\n }\r\n\r\n // Search in light DOM\r\n Array.from(element.querySelectorAll<HTMLElement>(focusableSelector)).forEach(el => {\r\n if (!focusableElements.includes(el) && isVisible(el)) {\r\n focusableElements.push(el);\r\n }\r\n });\r\n\r\n // Handle slotted content\r\n if (element.tagName === 'SLOT') {\r\n (element as HTMLSlotElement).assignedElements({ flatten: true }).forEach(el => findFocusable(el));\r\n }\r\n\r\n Array.from(element.children).forEach(findFocusable);\r\n };\r\n\r\n findFocusable(root);\r\n\r\n // Return unique elements in document order\r\n return [...new Set(focusableElements)];\r\n }\r\n\r\n private get firstFocusableElement(): HTMLElement \| null {\r\n const slotEl = this.host.shadowRoot?.querySelector('slot') as HTMLSlotElement \| null;\r\n const firstAssigned = slotEl?.assignedElements({ flatten: true })[0] as HTMLElement \| undefined;\r\n if (!firstAssigned) return null;\r\n\r\n const focusable = this.getFocusableElements(firstAssigned);\r\n return focusable[0] ?? firstAssigned;\r\n }\r\n\r\n private get lastAddedPortal(): HTMLElement \| null {\r\n const portals = Array.from(document.querySelectorAll<HTMLElement>('[id^=\"portal-\"]'));\r\n return portals.length ? portals[portals.length - 1] : null;\r\n }\r\n\r\n private calculateLeft() {\r\n if (!this.anchor \|\| !this.portal) return 0;\r\n const refRect = this.anchor.getBoundingClientRect();\r\n const portalRect = this.portal.getBoundingClientRect();\r\n\r\n const offset = this.offsetX ?? this.defaultOffset;\r\n let left = refRect.left + offset;\r\n\r\n const maxLeft = window.innerWidth - portalRect.width - this.minLeft;\r\n if (left < this.minLeft) left = this.minLeft;\r\n if (left > maxLeft) left = maxLeft;\r\n\r\n return Math.round(left + window.scrollX);\r\n }\r\n\r\n private calculateTop() {\r\n if (!this.anchor \|\| !this.portal) return 0;\r\n const refRect = this.anchor.getBoundingClientRect();\r\n const portalRect = this.portal.getBoundingClientRect();\r\n const offset = this.offsetY ?? this.defaultOffset;\r\n\r\n let top = refRect.bottom + offset;\r\n\r\n if (top + portalRect.height > window.innerHeight) {\r\n top = refRect.top - portalRect.height - offset;\r\n }\r\n\r\n return Math.round(top + window.scrollY);\r\n }\r\n\r\n private openPortal() {\r\n this.portal = document.createElement('div');\r\n this.portal.setAttribute('id', this.id);\r\n this.portal.style.zIndex = '1';\r\n this.portal.style.position = 'absolute';\r\n this.portal.style.top = '0px';\r\n this.portal.style.left = '0px';\r\n this.portal.appendChild(this.host);\r\n document.body.append(this.portal);\r\n }\r\n\r\n private closePortal() {\r\n const portal = document.getElementById(this.id);\r\n if (!portal) return;\r\n document.body.removeChild(portal);\r\n this.host.remove();\r\n }\r\n\r\n private calculatePosition() {\r\n if (!this.anchor \|\| !this.portal) return;\r\n const top = this.calculateTop();\r\n const left = this.calculateLeft();\r\n this.portal.style.top = `${top}px`;\r\n this.portal.style.left = `${left}px`;\r\n }\r\n\r\n render() {\r\n return (\r\n <Host style={{ display: this.anchor ? 'block' : 'none' }}>\r\n <slot />\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}