kritzel-stencil 0.0.131 → 0.0.132

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

@@ -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;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"]}
+{"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;IACpB,WAAW,GAAiB;QAClC,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;IAEuB,kBAAkB,CAAS;IAE3C,gBAAgB,CAAuB;IAEhD,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() 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"]}

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

@@ -9,7 +9,7 @@ export class KritzelFontSize {
         this.sizeChange.emit(size);
     }
     render() {
-        return (h(Host, { key: '08571feed86b37208956608b170ca1f782b7fb18' }, this.sizes.map(size => (h("div", { class: {
+        return (h(Host, { key: '583659340d8f3bfb2ff6f64f2cd692ac07cb32d6' }, this.sizes.map(size => (h("div", { class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, h("kritzel-font", { fontFamily: this.fontFamily, size: size }))))));

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

@@ -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;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"]}
+{"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;IAClB,KAAK,GAAa,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IACzB,YAAY,GAAkB,IAAI,CAAC;IAEpD,UAAU,GAAW,OAAO,CAAC;IAE5B,UAAU,CAAuB;IAElC,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() 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"]}

package/dist/collection/components/shared/kritzel-icon/kritzel-icon.css

@@ -2,6 +2,7 @@
   display: inline-flex; /* Changed from block to inline-flex for better alignment */
   justify-content: center; /* Center content horizontally */
   align-items: center; /* Center content vertically */
+  color: var(--kritzel-icon-color, inherited);
 }
 
 span {

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

@@ -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;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"]}
+{"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;IACd,IAAI,CAAS;IACb,KAAK,CAAU;IACf,IAAI,GAAW,EAAE,CAAC;IAE1B,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() name: string;\r\n  @Prop() label?: string;\r\n  @Prop() 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

@@ -3,7 +3,7 @@
   display: flex;
   flex-direction: column;
   background-color: var(--kritzel-menu-background-color, #ffffff);
-  width: var(--kritzel-menu-width, 180px);
+  width: var(--kritzel-menu-width, 200px);
   padding: var(--kritzel-menu-padding, 8px);
   border-radius: var(--kritzel-menu-border-radius, 12px);
   box-shadow: var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
@@ -16,6 +16,10 @@
   max-height: 300px;
 }
 
+:host(:focus-visible) {
+  outline: var(--kritzel-menu-focus-outline, 2px solid #e3e3e3);
+}
+
 .has-open-child-overlay {
   position: absolute;
   top: 0;

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

@@ -11,7 +11,7 @@ export class KritzelMenu {
     close;
     selectedIndex = null;
     async setFocus() {
-        const firstItem = this.host.querySelector('kritzel-menu-item');
+        const firstItem = this.host.shadowRoot.querySelector('kritzel-menu-item');
         if (firstItem) {
             firstItem.focus();
         }
@@ -47,7 +47,7 @@ export class KritzelMenu {
         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 })))));
+        return (h(Host, { key: 'd971df2bd948b07f7bf2abc589c226d57891d05e', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: 'dfa6846429aac15a5912b87acd45610663200a3e', 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 is() { return "kritzel-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +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"]}
+{"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.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"]}

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

@@ -11,13 +11,15 @@
   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-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))
+: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) {
@@ -37,21 +39,29 @@
   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-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
+  background-color: var(--kritzel-menu-item-editing-background-color, hsl(0, 0%, 0%, 4.3%));
 }
 
 :host(.disabled) {
   opacity: 0.5;
-  pointer-events: none;
+  pointer-events: none !important;
 }
 
 :host(.child-open) {
-  background-color: var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
+  background-color: var(--kritzel-menu-item-child-open-background-color, hsl(0, 0%, 0%, 4.3%));
 }
 
 :host(.child-open.selected) {
@@ -126,11 +136,12 @@
   -webkit-tap-highlight-color: transparent;
 }
 
-.action-button:hover, .action-button:focus {
+.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;
-}
+}

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { KritzelDevicesHelper } from "../../../helpers/devices.helper";
 export class KritzelMenuItem {
     host;
     item;
@@ -15,18 +16,32 @@ export class KritzelMenuItem {
     itemCloseChildMenu;
     isDirty = false;
     inputRef;
-    componentDidLoad() {
+    focusInput() {
         if (this.item.isEditing && this.inputRef && !this.isDirty) {
             this.inputRef.focus();
-            this.inputRef.select();
+            if (KritzelDevicesHelper.isIOS()) {
+                const length = this.inputRef.value.length;
+                this.inputRef.setSelectionRange(length, length);
+            }
+            else {
+                this.inputRef.select();
+            }
         }
     }
+    componentDidLoad() {
+        this.setDeviceSpecificStyles();
+        this.focusInput();
+    }
     componentDidUpdate() {
-        if (this.item.isEditing && this.inputRef && !this.isDirty) {
-            this.inputRef.focus();
-            this.inputRef.select();
-        }
+        this.focusInput();
     }
+    setDeviceSpecificStyles = () => {
+        const isTouchDevice = KritzelDevicesHelper.isTouchDevice();
+        if (isTouchDevice) {
+            this.host.style.setProperty('--kritzel-menu-item-overlay-background-color', 'transparent');
+            this.host.style.setProperty('--kritzel-menu-item-button-hover-background-color', 'transparent');
+        }
+    };
     handleItemSelect = (event) => {
         event.stopPropagation();
         this.itemSelect.emit({ item: this.item, parent: this.parent });
@@ -67,16 +82,16 @@ export class KritzelMenuItem {
     renderEditMode() {
         return [
             h("div", { class: "menu-item-content left" }, h("input", { ref: el => (this.inputRef = el), type: "text", class: "edit-input", value: this.item.label, onInput: this.handleInputChange })),
-            h("div", { class: "menu-item-content right" }, h("div", { tabIndex: !this.isDirty && !this.item.isNewItem ? -1 : 0, class: { 'action-button': true, 'disabled': !this.isDirty && !this.item.isNewItem }, onClick: this.handleSave }, h("kritzel-icon", { name: "check", size: 16 })), h("div", { tabIndex: 0, class: "action-button", onClick: this.handleCancel }, h("kritzel-icon", { name: "x", size: 16 }))),
+            h("div", { class: "menu-item-content right" }, h("div", { tabIndex: 0, class: "action-button", onClick: this.handleCancel }, h("kritzel-icon", { name: "x", size: 16 })), h("div", { tabIndex: !this.isDirty && !this.item.isNewItem ? -1 : 0, class: { 'action-button': true, 'disabled': !this.isDirty && !this.item.isNewItem }, onClick: this.handleSave }, h("kritzel-icon", { name: "check", size: 16 }))),
         ];
     }
     render() {
-        return (h(Host, { key: '5440ed43726d00ab65e7f423f065c1a3fa74e39e', tabIndex: 0, class: {
+        return (h(Host, { key: 'a35e1e3427568f436a36b43ba87af3710a4e83c5', 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: '69542710179216a1df47bde5d474a72e4a07aa5b', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
+            }, onClick: this.handleItemSelect }, h("div", { key: '42eef5a16b9b164839c1fe133e38ecb505c07632', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
     }
     static get is() { return "kritzel-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +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"]}
+{"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;AAErG,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AAOvE,MAAM,OAAO,eAAe;IACf,IAAI,CAAc;IAErB,IAAI,CAAmB;IAE/B,YAAY,CAAC,QAA0B,EAAE,QAA0B;QACjE,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC1B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC;IACH,CAAC;IACO,MAAM,GAAqB,IAAI,CAAC;IAE/B,UAAU,CAA4C;IACtD,QAAQ,CAAiC;IACzC,UAAU,CAAiC;IAC3C,mBAAmB,CAAqD;IACxE,kBAAkB,CAAiC;IAG5D,OAAO,GAAY,KAAK,CAAC;IAEjB,QAAQ,CAAmB;IAE3B,UAAU;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;YAEtB,IAAI,oBAAoB,CAAC,KAAK,EAAE,EAAE,CAAC;gBACjC,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC;gBAC1C,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;YAClD,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;YACzB,CAAC;QACH,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAEO,uBAAuB,GAAG,GAAG,EAAE;QACrC,MAAM,aAAa,GAAG,oBAAoB,CAAC,aAAa,EAAE,CAAC;QAC3D,IAAI,aAAa,EAAE,CAAC;YAClB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,8CAA8C,EAAE,aAAa,CAAC,CAAC;YAC3F,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,mDAAmD,EAAE,aAAa,CAAC,CAAC;QAClG,CAAC;IACH,CAAC,CAAC;IAEM,gBAAgB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAC/C,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IACjE,CAAC,CAAC;IAEM,iBAAiB,GAAG,CAAC,KAAY,EAAE,EAAE;QAC3C,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAChD,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC/B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACtB,CAAC,CAAC;IAEM,UAAU,GAAG,CAAC,KAAiB,EAAE,EAAE;QACzC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;QAClB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC,CAAC;IAEM,YAAY,GAAG,CAAC,KAAiB,EAAE,EAAE;QAC3C,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;QAClB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC,CAAC;IAEM,gBAAgB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAC/C,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,CAAC,MAAqB,EAAE,CAAC,CAAC;IACnG,CAAC,CAAC;IAEM,eAAe,GAAG,GAAG,EAAE;QAC7B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC1C,CAAC,CAAC;IAEM,cAAc;QACpB,OAAO;YACL,WAAK,KAAK,EAAC,wBAAwB;gBACjC,eAAM,IAAI,CAAC,IAAI,CAAC,KAAK,CAAO,CACxB;YACN,WAAK,KAAK,EAAC,yBAAyB,IACjC,IAAI,CAAC,IAAI,CAAC,QAAQ;gBACjB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI;gBAC/B,cAAQ,EAAE,EAAC,mBAAmB,EAAC,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU;oBACjH,oBAAc,IAAI,EAAC,mBAAmB,EAAC,IAAI,EAAE,EAAE,GAAiB,CACzD;gBACT,sBAAgB,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe;oBAC1F,oBACE,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EACzB,MAAM,EAAE,IAAI,CAAC,IAAI,EACjB,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EACzD,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EACrD,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EACzD,OAAO,EAAE,IAAI,CAAC,eAAe,GACf,CACD;aAClB,CACC;SACP,CAAC;IACJ,CAAC;IAEO,cAAc;QACpB,OAAO;YACL,WAAK,KAAK,EAAC,wBAAwB;gBACjC,aACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,EAC/B,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,YAAY,EAClB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,CAAC,iBAAiB,GAC/B,CACE;YACN,WAAK,KAAK,EAAC,yBAAyB;gBAClC,WAAK,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY;oBAChE,oBAAc,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,EAAE,GAAiB,CAC5C;gBACN,WACE,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACxD,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,EACnF,OAAO,EAAE,IAAI,CAAC,UAAU;oBAExB,oBAAc,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,EAAE,GAAiB,CAChD,CACF;SACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACvC,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU;gBAChC,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS;gBAC9B,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU;gBAChC,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,eAAe;aACxC,EACD,OAAO,EAAE,IAAI,CAAC,gBAAgB;YAE9B,4DAAK,KAAK,EAAC,mBAAmB,GAAO;YACpC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAC/D,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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\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"]}

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

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { ObjectHelper } from "../../../helpers/object.helper";
+import { KritzelHTMLHelper } from "../../../helpers/html.helper";
 export class KritzelPortal {
     host;
     anchor;
@@ -71,7 +72,7 @@ export class KritzelPortal {
         return activeEl;
     }
     trapFocus(event) {
-        const focusableElements = this.getFocusableElements(this.host);
+        const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);
         if (focusableElements.length === 0)
             return;
         const firstFocusable = focusableElements[0];
@@ -92,51 +93,12 @@ export class KritzelPortal {
             }
         }
     }
-    getFocusableElements(root) {
-        if (!root)
-            return [];
-        const focusableElements = [];
-        const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex="-1"])';
-        const isVisible = (el) => {
-            return el.offsetParent !== null;
-        };
-        // Check if the root element itself is focusable
-        if (root.matches(focusableSelector) && !root.hasAttribute('disabled') && isVisible(root)) {
-            focusableElements.push(root);
-        }
-        // Function to recursively find focusable elements
-        const findFocusable = (element) => {
-            // Search in shadow root
-            if (element.shadowRoot) {
-                Array.from(element.shadowRoot.querySelectorAll(focusableSelector)).forEach(el => {
-                    if (isVisible(el)) {
-                        focusableElements.push(el);
-                    }
-                });
-                Array.from(element.shadowRoot.children).forEach(findFocusable);
-            }
-            // Search in light DOM
-            Array.from(element.querySelectorAll(focusableSelector)).forEach(el => {
-                if (!focusableElements.includes(el) && isVisible(el)) {
-                    focusableElements.push(el);
-                }
-            });
-            // Handle slotted content
-            if (element.tagName === 'SLOT') {
-                element.assignedElements({ flatten: true }).forEach(el => findFocusable(el));
-            }
-            Array.from(element.children).forEach(findFocusable);
-        };
-        findFocusable(root);
-        // Return unique elements in document order
-        return [...new Set(focusableElements)];
-    }
     get firstFocusableElement() {
         const slotEl = this.host.shadowRoot?.querySelector('slot');
         const firstAssigned = slotEl?.assignedElements({ flatten: true })[0];
         if (!firstAssigned)
             return null;
-        const focusable = this.getFocusableElements(firstAssigned);
+        const focusable = KritzelHTMLHelper.getFocusableElements(firstAssigned);
         return focusable[0] ?? firstAssigned;
     }
     get lastAddedPortal() {
@@ -195,7 +157,7 @@ export class KritzelPortal {
         this.portal.style.left = `${left}px`;
     }
     render() {
-        return (h(Host, { key: '968f0360b9396da16f5b970293ba20f8a1dcc09a', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '0fe1569bde60a834e9226d7c838d113a64151164' })));
+        return (h(Host, { key: 'a994d8ab8c758bc92836693f35f8d9415913cfff', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: 'a9b9a71d82e9b57de24e5ecfa90197a27ed691c4' })));
     }
     static get is() { return "kritzel-portal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +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"]}
+{"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\nimport { KritzelHTMLHelper } from '../../../helpers/html.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 = KritzelHTMLHelper.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\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 = KritzelHTMLHelper.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"]}

package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.css

@@ -12,10 +12,6 @@
   gap: var(--kritzel-split-button-gap, 4px);
 }
 
-:host(:focus) {
-  outline: none;
-}
-
 :host(.mobile){
   --kritzel-split-button-hover-background-color: transparent;
 }

package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.js

@@ -7,13 +7,14 @@ export class KritzelSplitButton {
     items = [];
     mainButtonDisabled = false;
     menuButtonDisabled = false;
-    buttonClick;
+    mainButtonClick;
     itemSelect;
     itemSave;
     itemCancel;
     itemToggleChildMenu;
     itemCloseChildMenu;
-    close;
+    menuOpen;
+    menuClose;
     isMenuOpen = false;
     isTouchDevice = KritzelDevicesHelper.isTouchDevice();
     anchorElement;
@@ -22,11 +23,18 @@ export class KritzelSplitButton {
     async open() {
         if (this.isMenuOpen)
             return;
-        this.openMenu(new MouseEvent('click'));
+        this.isMenuOpen = true;
+        this.anchorElement = this.host;
+        this.menuOpen.emit();
+    }
+    async focusMenu() {
+        if (this.menuRef) {
+            await this.menuRef.setFocus();
+        }
     }
     handleButtonClick = (event) => {
         event.stopPropagation();
-        this.buttonClick.emit();
+        this.mainButtonClick.emit();
     };
     toggleMenu = (event) => {
         event.stopPropagation();
@@ -41,11 +49,13 @@ export class KritzelSplitButton {
         event.stopPropagation();
         this.isMenuOpen = true;
         this.anchorElement = this.host;
+        this.menuOpen.emit();
     };
     closeMenu = () => {
         this.isMenuOpen = false;
         this.anchorElement = null;
-        this.close.emit();
+        this.splitMenuButtonRef?.blur();
+        this.menuClose.emit();
     };
     handleItemSelect = event => {
         this.itemSelect.emit(event.detail);
@@ -63,7 +73,7 @@ export class KritzelSplitButton {
         this.itemCloseChildMenu.emit(event.detail);
     };
     render() {
-        return (h(Host, { key: 'be79d702d2c400d1feedeb89eca6fc78559f30f3', class: { mobile: this.isTouchDevice } }, h("button", { key: 'e4a74c56c122ea617f44f1d7e31672d1f913de46', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled }, this.buttonIcon && h("kritzel-icon", { key: '44bd79270e7cc4a17b45133b5c513642013e5a66', name: this.buttonIcon })), h("div", { key: '2392e8c6f75510c529585a69c861b2fcafdef5ce', class: "split-divider" }), h("button", { key: 'bcdf61c2a195271771479de385db3b4982f6cad2', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled }, h("kritzel-icon", { key: '90383a8690111c97054fb8ac93b91cb6644de137', name: this.dropdownIcon })), h("kritzel-portal", { key: 'c6a4c32ab731fede13e1382bff9dbd68794b1103', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: '8b792c9a2d4af60ba464bb80551c5358e21bfa96', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu }))));
+        return (h(Host, { key: '2521559224e78ed1984446320a1601e77ccf2843', class: { mobile: this.isTouchDevice } }, h("button", { key: 'a924ad4590506cb5209ef9fa1babca5312ec0513', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled }, this.buttonIcon && h("kritzel-icon", { key: '214565d158d4d3c06ad883559aa7bac2827a593f', name: this.buttonIcon })), h("div", { key: '2f7d189c46c08227c3006d226a0ee3065f241bf4', class: "split-divider" }), h("button", { key: '4d6e2e224e3719fe3685ee289af94680c120abf6', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled }, h("kritzel-icon", { key: 'bc8176681dfedde9d13b9af561d8bdff8613098f', name: this.dropdownIcon })), h("kritzel-portal", { key: 'afb44cd208f52350cbc82e050d6dee0ba734391d', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: 'b28f04138daa8777e6c9b2aa7fa3b5f2f62fd914', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu }))));
     }
     static get is() { return "kritzel-split-button"; }
     static get encapsulation() { return "shadow"; }
@@ -195,8 +205,8 @@ export class KritzelSplitButton {
     }
     static get events() {
         return [{
-                "method": "buttonClick",
-                "name": "buttonClick",
+                "method": "mainButtonClick",
+                "name": "mainButtonClick",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -315,8 +325,23 @@ export class KritzelSplitButton {
                     }
                 }
             }, {
-                "method": "close",
-                "name": "close",
+                "method": "menuOpen",
+                "name": "menuOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "menuClose",
+                "name": "menuClose",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -349,6 +374,23 @@ export class KritzelSplitButton {
                     "text": "",
                     "tags": []
                 }
+            },
+            "focusMenu": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
             }
         };
     }