jebamo 0.0.11 → 0.0.13

package/components/je-alert.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h, F as Fragment, d as Host } from './p-CL0NicyQ.js';
-import { d as defineCustomElement$5 } from './p-BdkCRVdl.js';
+import { d as defineCustomElement$5 } from './p-DDWeNBqe.js';
 import { d as defineCustomElement$4 } from './p-ieY9b0db.js';
-import { d as defineCustomElement$3 } from './p-Du_Ow8H0.js';
+import { d as defineCustomElement$3 } from './p-C07q1kKX.js';
 import { d as defineCustomElement$2 } from './p-BD1TXl5r.js';
 
 const jeAlertCss = ":host{display:none;overflow:hidden;position:relative;box-shadow:var(--box-shadow);border:var(--border);border-radius:var(--je-radius-md, 0.375rem);box-sizing:border-box;background-color:var(--background);color:var(--color);padding:var(--je-spacing-md, 1rem);grid-template-columns:auto 1fr auto;grid-auto-rows:auto;align-items:center;column-gap:var(--je-spacing-sm, 0.75rem);row-gap:var(--je-spacing-2xs, 0.25rem);--background:light-dark(rgb(233, 236, 236), rgb(41, 45, 46));--color:light-dark(color-mix(in srgb, var(--je-secondary, #99becb) 40%, black 60%), color-mix(in srgb, var(--je-secondary, #99becb) 60%, white 40%));--box-shadow:0px 4px 16px 0px light-dark(rgba(0, 0, 0, 0.12), rgba(68, 68, 68, 0.12));--border:solid 1px light-dark(rgb(197, 200, 204), rgb(86, 87, 90))}:host([color=primary]){--accent:light-dark(var(--je-primary, #4141e8), color-mix(in srgb, var(--je-primary, #4141e8) 40%, white 60%))}:host([color=secondary]){--accent:light-dark(color-mix(in srgb, var(--je-secondary, #99becb) 80%, black 20%), var(--je-secondary, #99becb))}:host([color=warning]){--accent:var(--je-warning, #fbbf24)}:host([color=danger]){--accent:light-dark(color-mix(in srgb, var(--je-danger, #ae1818) 80%, white 20%), color-mix(in srgb, var(--je-danger, #ae1818) 60%, white 40%))}:host([color=success]){--accent:color-mix(in srgb, var(--je-success, #22c55e) 80%, black 20%)}:host(.visible){display:grid}:host(.open){animation:fadeIn 600ms forwards}:host(:not(.open)){animation:fadeOut 600ms forwards}@keyframes fadeIn{from{opacity:0;transform:scale(0%)}to{opacity:1;transform:scale(100%)}}@keyframes fadeOut{from{opacity:1;transform:scale(100%)}to{opacity:0;transform:scale(0%)}}[part=header]{font-weight:bold;display:block;box-sizing:border-box;font-size:var(--je-font-lg, 1.25rem);line-height:1}[part=message]{line-height:1}je-icon{display:block;color:var(--accent)}.border{position:absolute;top:0;left:0;background-color:var(--accent);width:100%;height:var(--je-spacing-xs, 0.5rem)}.progress{position:absolute;bottom:0;left:0;width:100%;background-color:var(--accent);height:var(--je-spacing-2xs, 0.25rem);animation:shorten linear forwards;animation-play-state:paused}.progress.running{animation-play-state:running}.progress:not(.visible){opacity:0}@keyframes shorten{from{width:100%}to{width:0}}slot[name=buttons]{display:flex;align-items:center;gap:var(--je-spacing-sm, 0.75rem)}";

package/components/je-button.js

@@ -1,4 +1,4 @@
-import { J as JeButton$1, d as defineCustomElement$1 } from './p-BdkCRVdl.js';
+import { J as JeButton$1, d as defineCustomElement$1 } from './p-DDWeNBqe.js';
 
 const JeButton = JeButton$1;
 const defineCustomElement = defineCustomElement$1;

package/components/je-datepicker.js

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-CL0NicyQ.js';
 import { d as dateFnsExports } from './p-iWCgRMLC.js';
-import { d as defineCustomElement$7 } from './p-BdkCRVdl.js';
+import { d as defineCustomElement$7 } from './p-DDWeNBqe.js';
 import { d as defineCustomElement$6 } from './p-ieY9b0db.js';
-import { d as defineCustomElement$5 } from './p-Du_Ow8H0.js';
+import { d as defineCustomElement$5 } from './p-C07q1kKX.js';
 import { d as defineCustomElement$4 } from './p-BD1TXl5r.js';
 import { d as defineCustomElement$3 } from './p-lBr1fFg4.js';
 import { d as defineCustomElement$2 } from './p-CbIWLZOB.js';

package/components/je-details.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CL0NicyQ.js';
-import { d as defineCustomElement$6 } from './p-BdkCRVdl.js';
+import { d as defineCustomElement$6 } from './p-DDWeNBqe.js';
 import { d as defineCustomElement$5 } from './p-ieY9b0db.js';
-import { d as defineCustomElement$4 } from './p-Du_Ow8H0.js';
+import { d as defineCustomElement$4 } from './p-C07q1kKX.js';
 import { d as defineCustomElement$3 } from './p-BD1TXl5r.js';
 import { d as defineCustomElement$2 } from './p-BqMF0IP6.js';
 

package/components/je-icon-button.js

@@ -1,4 +1,4 @@
-import { J as JeIconButton$1, d as defineCustomElement$1 } from './p-Du_Ow8H0.js';
+import { J as JeIconButton$1, d as defineCustomElement$1 } from './p-C07q1kKX.js';
 
 const JeIconButton = JeIconButton$1;
 const defineCustomElement = defineCustomElement$1;

package/components/je-textfield.js

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h, d as Host } from './p-CL0NicyQ.js';
 import { d as dateFnsExports } from './p-iWCgRMLC.js';
-import { d as defineCustomElement$9 } from './p-BdkCRVdl.js';
+import { d as defineCustomElement$9 } from './p-DDWeNBqe.js';
 import { d as defineCustomElement$8 } from './p-DRlL5Gjx.js';
 import { d as defineCustomElement$7 } from './p-ieY9b0db.js';
-import { d as defineCustomElement$6 } from './p-Du_Ow8H0.js';
+import { d as defineCustomElement$6 } from './p-C07q1kKX.js';
 import { d as defineCustomElement$5 } from './p-BZbYovDp.js';
 import { d as defineCustomElement$4 } from './p-BD1TXl5r.js';
 import { d as defineCustomElement$3 } from './p-BqFdacNg.js';

package/components/je-tree.js

@@ -26,6 +26,9 @@ const JeTree$1 = /*@__PURE__*/ proxyCustomElement(class JeTree extends H {
             branch.indentation = indentation;
         });
     }
+    valueChanged() {
+        this.valueChange.emit(this.value);
+    }
     async onClick(event) {
         const { target } = event;
         if (this.isBranch(target)) {
@@ -87,15 +90,20 @@ const JeTree$1 = /*@__PURE__*/ proxyCustomElement(class JeTree extends H {
         }
     }
     render() {
-        return (h(Host, { key: 'dd8a259f8be184c16b7a8001adb136b341745073' }, h("slot", { key: '2102074812c7e50151187b8525c714954d4a8d02' })));
+        return (h(Host, { key: '1c572e2abbde4927836c6f4c0afff74d3e3801f3' }, h("slot", { key: '7658d1b701792ea5d8bf492013f9eabb09af580b' })));
     }
     get element() { return this; }
+    static get watchers() { return {
+        "value": ["valueChanged"]
+    }; }
     static get style() { return jeTreeCss; }
 }, [1, "je-tree", {
         "value": [1025],
         "selection": [1],
         "indentation": [4]
-    }, [[0, "click", "onClick"], [0, "keyup", "onKeyup"]]]);
+    }, [[0, "click", "onClick"], [0, "keyup", "onKeyup"]], {
+        "value": ["valueChanged"]
+    }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/components/je-tree.js.map

@@ -1 +1 @@
-{"file":"je-tree.js","mappings":"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","names":["JeTree","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/je-tree/je-tree.scss?tag=je-tree&encapsulation=shadow","src/components/je-tree/je-tree.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'je-tree',\n  styleUrl: 'je-tree.scss',\n  shadow: true,\n})\nexport class JeTree {\n  @Element() element: HTMLJeTreeElement;\n  @Prop({ mutable: true }) value?: string | string[];\n  @Prop() selection: 'single' | 'multiple' | 'leaf' = 'leaf';\n  @Prop() indentation = false;\n  @Event() valueChange: EventEmitter<string | string[]>;\n\n  private get branches() {\n    return Array.from(this.element.querySelectorAll('je-branch'))\n  }\n\n  componentWillLoad() {\n    if (this.selection == 'multiple' && !Array.isArray(this.value)) this.value = [];\n  }\n\n  componentWillRender() {\n    const { branches, selection, indentation } = this;\n    branches.forEach(branch => {\n      branch.selection = selection;\n      branch.indentation = indentation;\n    })\n  }\n\n  @Listen('click')\n  async onClick(event: MouseEvent) {\n    const { target } = event;\n    if (this.isBranch(target)) {\n      const { branches, selection } = this;\n      const isLeaf = await target.isLeaf();\n      if ((selection == 'leaf' && isLeaf) || selection == 'single') {\n        this.value = target.value;\n        branches.forEach(branch => branch.selected = this.value === branch.value);\n      } else if (this.selection == 'leaf') {\n        target.open = !target.open;\n      } else if (this.selection == 'multiple') {\n        target.selected = !target.selected;\n        if (isLeaf && target.selected) {\n          this.value = [...this.value, target.value]\n        } else if (isLeaf) {\n          this.value = (this.value as Array<string>).filter(v => v != target.value)\n        } else {\n          target.querySelectorAll('je-branch').forEach(branch => branch.selected = target.selected);\n        }\n        this.setParents(target);\n      }\n    }\n  }\n\n  @Listen('keyup')\n  async onKeyup(event: KeyboardEvent) {\n    const { target, key } = event;\n    if (this.isBranch(target)) {\n      const hasChildren = !(await target.isLeaf());\n      const { branches } = this;\n      if (key == 'ArrowRight' && hasChildren && !target.open) {\n        target.open = true;\n      } else if (key == 'ArrowLeft' && hasChildren && target.open) {\n        target.open = false;\n      } else if (key == 'ArrowUp') {\n        const index = branches.indexOf(target);\n        if (index > 0) {\n          branches[index - 1].focus();\n        }\n      } else if (key == 'ArrowDown') {\n        const index = branches.indexOf(target);\n        if (index < branches.length - 1) {\n          branches[index + 1].focus();\n        }\n      }\n    }\n  }\n\n  private isBranch = (target: any): target is HTMLJeBranchElement => target instanceof HTMLElement && target.tagName == 'JE-BRANCH';\n\n  private async setParents(branch: HTMLJeBranchElement) {\n    const parentBranch = branch.parentElement\n    if (this.isBranch(parentBranch)) {\n      const children = Array.from(parentBranch.querySelectorAll('je-branch'));\n      parentBranch.selected = children.every(child => child.selected) ? true : children.some(child => child.selected) ? null : false;\n      this.setParents(parentBranch);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"je-tree.js","mappings":"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","names":["JeTree","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/je-tree/je-tree.scss?tag=je-tree&encapsulation=shadow","src/components/je-tree/je-tree.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'je-tree',\n  styleUrl: 'je-tree.scss',\n  shadow: true,\n})\nexport class JeTree {\n  @Element() element: HTMLJeTreeElement;\n  @Prop({ mutable: true }) value?: string | string[];\n  @Prop() selection: 'single' | 'multiple' | 'leaf' = 'leaf';\n  @Prop() indentation = false;\n  @Event() valueChange: EventEmitter<string | string[]>;\n\n  private get branches() {\n    return Array.from(this.element.querySelectorAll('je-branch'))\n  }\n\n  componentWillLoad() {\n    if (this.selection == 'multiple' && !Array.isArray(this.value)) this.value = [];\n  }\n\n  componentWillRender() {\n    const { branches, selection, indentation } = this;\n    branches.forEach(branch => {\n      branch.selection = selection;\n      branch.indentation = indentation;\n    })\n  }\n\n  @Watch('value')\n  valueChanged() {\n    this.valueChange.emit(this.value);\n  }\n\n  @Listen('click')\n  async onClick(event: MouseEvent) {\n    const { target } = event;\n    if (this.isBranch(target)) {\n      const { branches, selection } = this;\n      const isLeaf = await target.isLeaf();\n      if ((selection == 'leaf' && isLeaf) || selection == 'single') {\n        this.value = target.value;\n        branches.forEach(branch => branch.selected = this.value === branch.value);\n      } else if (this.selection == 'leaf') {\n        target.open = !target.open;\n      } else if (this.selection == 'multiple') {\n        target.selected = !target.selected;\n        if (isLeaf && target.selected) {\n          this.value = [...this.value, target.value]\n        } else if (isLeaf) {\n          this.value = (this.value as Array<string>).filter(v => v != target.value)\n        } else {\n          target.querySelectorAll('je-branch').forEach(branch => branch.selected = target.selected);\n        }\n        this.setParents(target);\n      }\n    }\n  }\n\n  @Listen('keyup')\n  async onKeyup(event: KeyboardEvent) {\n    const { target, key } = event;\n    if (this.isBranch(target)) {\n      const hasChildren = !(await target.isLeaf());\n      const { branches } = this;\n      if (key == 'ArrowRight' && hasChildren && !target.open) {\n        target.open = true;\n      } else if (key == 'ArrowLeft' && hasChildren && target.open) {\n        target.open = false;\n      } else if (key == 'ArrowUp') {\n        const index = branches.indexOf(target);\n        if (index > 0) {\n          branches[index - 1].focus();\n        }\n      } else if (key == 'ArrowDown') {\n        const index = branches.indexOf(target);\n        if (index < branches.length - 1) {\n          branches[index + 1].focus();\n        }\n      }\n    }\n  }\n\n  private isBranch = (target: any): target is HTMLJeBranchElement => target instanceof HTMLElement && target.tagName == 'JE-BRANCH';\n\n  private async setParents(branch: HTMLJeBranchElement) {\n    const parentBranch = branch.parentElement\n    if (this.isBranch(parentBranch)) {\n      const children = Array.from(parentBranch.querySelectorAll('je-branch'));\n      parentBranch.selected = children.every(child => child.selected) ? true : children.some(child => child.selected) ? null : false;\n      this.setParents(parentBranch);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/{p-Du_Ow8H0.js → p-C07q1kKX.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h } from './p-CL0NicyQ.js';
-import { d as defineCustomElement$3 } from './p-BdkCRVdl.js';
+import { d as defineCustomElement$3 } from './p-DDWeNBqe.js';
 import { d as defineCustomElement$2 } from './p-ieY9b0db.js';
 import { d as defineCustomElement$1 } from './p-BD1TXl5r.js';
 
@@ -63,6 +63,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { JeIconButton as J, defineCustomElement as d };
-//# sourceMappingURL=p-Du_Ow8H0.js.map
+//# sourceMappingURL=p-C07q1kKX.js.map
 
-//# sourceMappingURL=p-Du_Ow8H0.js.map
+//# sourceMappingURL=p-C07q1kKX.js.map

package/components/{p-Du_Ow8H0.js.map → p-C07q1kKX.js.map}

@@ -1 +1 @@
-{"file":"p-Du_Ow8H0.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,gQAAgQ;;MCQ3Q,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,GAAA;;;;;AAOU,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;;AAMhB,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;;AAGf,QAAA,IAAI,CAAA,IAAA,GAAkC,OAAO;;AAG7C,QAAA,IAAI,CAAA,IAAA,GAAuB,IAAI;AAkBxC;IAVC,MAAM,GAAA;AACJ,QAAA,QACE,CAAW,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAW,EAAC,cAAc,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EACxJ,CACG,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,IAAI,IAAI,gEAAS,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,GAAG,IAAI,GAAG,IAAI,IAAG,IAAI,CAAC,IAAI,CAAW,CACjI,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,CAAQ,CAC7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/je-icon-button/je-icon-button.scss?tag=je-icon-button&encapsulation=shadow","src/components/je-icon-button/je-icon-button.tsx"],"sourcesContent":["@use '../../styles/styles' as *;\n\n:host {\n  display: contents;\n}\n\nje-button {\n  --height: min-content;\n\n  &[size=sm] {\n    --padding-inline: #{spacing-get(3xs)};\n  }\n\n  &[size=md] {\n    --padding-inline: #{spacing-get(2xs)};\n  }\n\n  &[size=lg] {\n    --padding-inline: #{spacing-get(xs)};\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { Color } from '../../utils/utils';\n\n@Component({\n  tag: 'je-icon-button',\n  styleUrl: 'je-icon-button.scss',\n  shadow: true,\n})\nexport class JeIconButton {\n  /** Disables button */\n  @Prop() disabled = false;\n\n  /** Can set to submit or reset to participate in forms */\n  @Prop() type?: 'submit' | 'reset';\n\n  /** Shows a loading spinner and disables the button */\n  @Prop() pending = false;\n\n  /** Button fill */\n  @Prop() fill: 'solid' | 'outline' | 'clear' = 'clear';\n\n  /** Button size */\n  @Prop() size: 'md' | 'lg' | 'sm' = 'md';\n\n  /** Predefined colors */\n  @Prop() color?: Color;\n\n  /** Name of icon */\n  @Prop() icon?: string;\n\n  render() {\n    return (\n      <je-button exportparts='inner-button' fill={this.fill} color={this.color} size={this.size} pending={this.pending} type={this.type} disabled={this.disabled}>\n        <slot>\n          {this.icon && <je-icon part='icon' fill={true} size={this.size == 'sm' ? 'xs' : this.size == 'lg' ? 'md' : 'sm'}>{this.icon}</je-icon>}\n        </slot>\n        <slot slot='badge' name='badge'></slot>\n      </je-button>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-C07q1kKX.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,gQAAgQ;;MCQ3Q,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,GAAA;;;;;AAOU,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;;AAMhB,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;;AAGf,QAAA,IAAI,CAAA,IAAA,GAAkC,OAAO;;AAG7C,QAAA,IAAI,CAAA,IAAA,GAAuB,IAAI;AAkBxC;IAVC,MAAM,GAAA;AACJ,QAAA,QACE,CAAW,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAW,EAAC,cAAc,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EACxJ,CACG,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,IAAI,IAAI,gEAAS,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,GAAG,IAAI,GAAG,IAAI,IAAG,IAAI,CAAC,IAAI,CAAW,CACjI,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,CAAQ,CAC7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/je-icon-button/je-icon-button.scss?tag=je-icon-button&encapsulation=shadow","src/components/je-icon-button/je-icon-button.tsx"],"sourcesContent":["@use '../../styles/styles' as *;\n\n:host {\n  display: contents;\n}\n\nje-button {\n  --height: min-content;\n\n  &[size=sm] {\n    --padding-inline: #{spacing-get(3xs)};\n  }\n\n  &[size=md] {\n    --padding-inline: #{spacing-get(2xs)};\n  }\n\n  &[size=lg] {\n    --padding-inline: #{spacing-get(xs)};\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { Color } from '../../utils/utils';\n\n@Component({\n  tag: 'je-icon-button',\n  styleUrl: 'je-icon-button.scss',\n  shadow: true,\n})\nexport class JeIconButton {\n  /** Disables button */\n  @Prop() disabled = false;\n\n  /** Can set to submit or reset to participate in forms */\n  @Prop() type?: 'submit' | 'reset';\n\n  /** Shows a loading spinner and disables the button */\n  @Prop() pending = false;\n\n  /** Button fill */\n  @Prop() fill: 'solid' | 'outline' | 'clear' = 'clear';\n\n  /** Button size */\n  @Prop() size: 'md' | 'lg' | 'sm' = 'md';\n\n  /** Predefined colors */\n  @Prop() color?: Color;\n\n  /** Name of icon */\n  @Prop() icon?: string;\n\n  render() {\n    return (\n      <je-button exportparts='inner-button' fill={this.fill} color={this.color} size={this.size} pending={this.pending} type={this.type} disabled={this.disabled}>\n        <slot>\n          {this.icon && <je-icon part='icon' fill={true} size={this.size == 'sm' ? 'xs' : this.size == 'lg' ? 'md' : 'sm'}>{this.icon}</je-icon>}\n        </slot>\n        <slot slot='badge' name='badge'></slot>\n      </je-button>\n    );\n  }\n}\n"],"version":3}

package/components/{p-BdkCRVdl.js → p-DDWeNBqe.js}

@@ -21,7 +21,8 @@ const JeButton = /*@__PURE__*/ proxyCustomElement(class JeButton extends H {
     }
     componentDidLoad() {
         if (this.type) {
-            const formEl = this.el.closest('form');
+            let formEl = this.form ? document.getElementById(this.form) : this.el.closest('form');
+            //if (formEl.tagName === 'JE-FORM') formEl = formEl.querySelector('form')
             if (formEl) {
                 this.formButtonEl = document.createElement('button');
                 this.formButtonEl.type = this.type;
@@ -46,7 +47,7 @@ const JeButton = /*@__PURE__*/ proxyCustomElement(class JeButton extends H {
             pending: this.pending,
             [this.color]: !!this.color
         };
-        return (h(Host, { key: '0a97938c6b5c9da6f17329158c63b106bd697f4f' }, h("button", { key: 'f9feee8c90012c0d3981aa5325ecab445d7bba07', part: 'inner-button', ref: el => this.buttonEl = el, disabled: this.disabled || this.pending, type: 'button', tabindex: 0, class: classes }, this.pending ? h("je-loading", null) : h("slot", null), h("slot", { key: 'ce0c730a22589c89e1bd64ec367b26a77e5bf272', name: 'badge' }))));
+        return (h(Host, { key: '45b91d0c61dfb35b39891757ff682c44a0aac684' }, h("button", { key: '2e1619be06c3e54f47281cc477e9de4bbc6fa724', part: 'inner-button', ref: el => this.buttonEl = el, disabled: this.disabled || this.pending, type: 'button', tabindex: 0, class: classes }, this.pending ? h("je-loading", null) : h("slot", null), h("slot", { key: '75f476ba5e7d226db0b611566c40fb982d2d0ce1', name: 'badge' }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }
@@ -57,6 +58,7 @@ const JeButton = /*@__PURE__*/ proxyCustomElement(class JeButton extends H {
 }, [17, "je-button", {
         "disabled": [4],
         "type": [1],
+        "form": [1],
         "expand": [4],
         "pending": [4],
         "fill": [513],
@@ -86,6 +88,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { JeButton as J, defineCustomElement as d };
-//# sourceMappingURL=p-BdkCRVdl.js.map
+//# sourceMappingURL=p-DDWeNBqe.js.map
 
-//# sourceMappingURL=p-BdkCRVdl.js.map
+//# sourceMappingURL=p-DDWeNBqe.js.map

package/components/p-DDWeNBqe.js.map

@@ -0,0 +1 @@
+{"file":"p-DDWeNBqe.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,y6QAAy6Q;;MCUh7Q,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AAPrB,IAAA,WAAA,GAAA;;;;;AAaU,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;;AAYhB,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;;AAGd,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;;AAGE,QAAA,IAAI,CAAA,IAAA,GAAkC,OAAO;;AAG7C,QAAA,IAAI,CAAA,IAAA,GAAuB,IAAI;AA8CzD;IAzCC,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC;;YAErF,IAAI,MAAM,EAAE;gBACV,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC;gBACpD,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI;gBAClC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM;AACxC,gBAAA,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC;;;;IAMtC,WAAW,GAAA;;QACT,CAAA,EAAA,GAAA,IAAI,CAAC,YAAY,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;;IAI5B,eAAe,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,YAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,CAAA,EAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAA,EAAA,CAAI,CAAC;;;IAIxF,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI;YACjB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC;SACtB;QACD,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,IAAI,EAAC,cAAc,EAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAA,EAC1I,IAAI,CAAC,OAAO,GAAG,CAAa,CAAA,YAAA,EAAA,IAAA,CAAA,GAAG,CAAO,CAAA,MAAA,EAAA,IAAA,CAAA,EACvC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,GAAE,CACb,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/je-button/je-button.scss?tag=je-button&encapsulation=shadow","src/components/je-button/je-button.tsx"],"sourcesContent":["@use '../../styles/styles' as *;\n\n/**\n * @prop --height: Fixed height\n * @prop --font-size: Font size\n * @prop --padding-inline: Inner inline padding\n * @prop --color: Text color\n * @prop --background: Default background color\n * @prop --hover-background: Hovered background color\n * @prop --active-background: Pressed background color\n */\n\n:host {\n  display: contents;\n\n  --height: 2.5rem;\n  --padding-inline: #{spacing-get(md)};\n  --font-size: #{font-size(md)};\n  --border-color: transparent;\n}\n\n:host([size=sm]) {\n  --height: 2rem;\n  --padding-inline: #{spacing-get(sm)};\n  --font-size: #{font-size(sm)};\n}\n\n:host([size=lg]) {\n  --height: 3rem;\n  --padding-inline: #{spacing-get(lg)};\n  --font-size: #{font-size(lg)};\n}\n\n:host(:not([color])) button {\n  --color: light-dark(#{secondary(800)}, #{secondary(200)});\n  --hover-color: light-dark(#{secondary(850)}, #{secondary(150)});\n  --active-color: light-dark(#{secondary(900)}, #{secondary(100)});\n  --background: transparent;\n  --hover-background: light-dark(#{secondary(150)}, #{secondary(850)});\n  --active-background: light-dark(#{secondary(200)}, #{secondary(800)});\n\n  &.solid {\n    --border-color: light-dark(#{secondary(500)}, #{secondary(750)});\n  }\n}\n\nbutton {\n  &.outline {\n    --border-color: currentcolor;\n  }\n\n  &.primary {\n    &.solid {\n      --color: #{primary(100)};\n      --background: #{primary(500)};\n      --hover-background: #{primary(600)};\n      --active-background: #{primary(700)};\n    }\n    &.clear,\n    &.outline {\n      --color: light-dark(#{primary(500)}, #{primary(300)});\n      --hover-color: light-dark(#{primary(600)}, #{primary(200)});\n      --active-color: light-dark(#{primary(700)}, #{primary(100)});\n      --background: transparent;\n      --hover-background: light-dark(#{primary(50)}, #{primary(850)});\n      --active-background: light-dark(#{primary(100)}, #{primary(800)});\n    }\n  }\n\n  &.secondary {\n    &.solid {\n      --color: #{secondary(900)};\n      --background: #{secondary(500)};\n      --hover-background: #{secondary(400)};\n      --active-background: #{secondary(300)};\n    }\n    &.clear,\n    &.outline {\n      --color: light-dark(#{secondary(700)}, #{secondary(500)});\n      --hover-color: light-dark(#{secondary(800)}, #{secondary(400)});\n      --active-color: light-dark(#{secondary(900)}, #{secondary(300)});\n      --background: transparent;\n      --hover-background: light-dark(#{secondary(100)}, #{secondary(875)});\n      --active-background: light-dark(#{secondary(150)}, #{secondary(850)});\n    }\n  }\n\n  &.warning {\n    &.solid {\n      --color: #{warning(900)};\n      --background: #{warning(500)};\n      --hover-background: #{warning(400)};\n      --active-background: #{warning(300)};\n    }\n    &.clear,\n    &.outline {\n      --color: light-dark(#{warning(700)}, #{warning(500)});\n      --hover-color: light-dark(#{warning(800)}, #{warning(400)});\n      --active-color: light-dark(#{warning(900)}, #{warning(300)});\n      --background: transparent;\n      --hover-background: light-dark(#{warning(100)}, #{warning(900)});\n      --active-background: light-dark(#{warning(150)}, #{warning(875)});\n    }\n  }\n\n  &.success {\n    &.solid {\n      --color: #{success(900)};\n      --background: #{success(500)};\n      --hover-background: #{success(400)};\n      --active-background: #{success(300)};\n    }\n    &.clear,\n    &.outline {\n      --color: light-dark(#{success(700)}, #{success(500)});\n      --hover-color: light-dark(#{success(800)}, #{success(400)});\n      --active-color: light-dark(#{success(900)}, #{success(300)});\n      --background: transparent;\n      --hover-background: light-dark(#{success(100)}, #{success(900)});\n      --active-background: light-dark(#{success(150)}, #{success(875)});\n    }\n  }\n\n  &.danger {\n    &.solid {\n      --color: #{danger(100)};\n      --background: #{danger(500)};\n      --hover-background: #{danger(600)};\n      --active-background: #{danger(700)};\n    }\n    &.clear,\n    &.outline {\n      --color: light-dark(#{danger(500)}, #{danger(300)});\n      --hover-color: light-dark(#{danger(600)}, #{danger(200)});\n      --active-color: light-dark(#{danger(700)}, #{danger(100)});\n      --background: transparent;\n      --hover-background: light-dark(#{danger(50)}, #{danger(750)});\n      --active-background: light-dark(#{danger(100)}, #{danger(700)});\n    }\n  }\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  position: relative;\n  box-sizing: border-box;\n  border-radius: radius-get(md);\n  margin: 0;\n  padding-block: 0;\n  padding-inline: var(--padding-inline);\n  cursor: pointer;\n  flex-shrink: 0;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  user-select: none;\n  text-transform: capitalize;\n  text-wrap: wrap;\n  font-family: inherit;\n  font-size: var(--font-size);\n  font-weight: font-weight(semi-bold);\n  height: var(--height);\n  color: var(--color);\n  background-color: var(--background, transparent);\n  transition: all 125ms ease-in-out;\n  outline-color: primary(300);\n  outline-offset: 3px;\n  border: solid 1px var(--border-color);\n\n  @media (hover: hover) {\n    &:hover:not(:disabled) {\n      background-color: var(--hover-background, var(--background, transparent));\n      color: var(--hover-color, var(--color));\n    }\n  }\n\n  &:active:not(:disabled) {\n    background-color: var(--active-background, var(--background, transparent));\n    color: var(--active-color, var(--color));\n  }\n\n  &:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n\n  &.pending {\n    opacity: 0.8;\n    cursor: progress;\n    width: var(--pending-width);\n  }\n\n  &.expand {\n    width: 100%;\n  }\n}\n\n::slotted([slot=badge]) {\n  top: 0;\n  right: 0;\n  position: absolute;\n  z-index: 1;\n  transform: translate(50%, -50%);\n  border-radius: radius-get(circle);\n  box-sizing: border-box;\n  color: light-dark(secondary(100), secondary(850));\n  background-color: light-dark(secondary(850), secondary(100));\n  padding: spacing-get(2xs);\n  font-size: var(--font-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n","import { Component, Prop, h, Element, Listen, Host, Watch } from '@stencil/core';\nimport { Color } from '../../utils/utils';\n\n@Component({\n  tag: 'je-button',\n  styleUrl: 'je-button.scss',\n  shadow: {\n    delegatesFocus: true\n  },\n})\nexport class JeButton {\n  @Element() el: HTMLJeButtonElement;\n  private formButtonEl?: HTMLButtonElement;\n  private buttonEl: HTMLButtonElement;\n\n  /** Disables button */\n  @Prop() disabled = false;\n\n  /** Can set to submit or reset to participate in forms */\n  @Prop() type?: 'submit' | 'reset';\n\n  /**\n   * Can set form id to participate in forms. Use this if you need to place\n   * submit/reset button outside the form element\n   */\n  @Prop() form?: string;\n\n  /** Expands the button to the full width of it's container */\n  @Prop() expand = false;\n\n  /** Shows a loading spinner and disables the button */\n  @Prop() pending = false;\n\n  /** Button fill */\n  @Prop({ reflect: true }) fill: 'solid' | 'outline' | 'clear' = 'solid';\n\n  /** Button size */\n  @Prop({ reflect: true }) size: 'md' | 'lg' | 'sm' = 'md';\n\n  /** Predefined colors */\n  @Prop({ reflect: true }) color?: Color;\n\n  componentDidLoad() {\n    if (this.type) {\n      let formEl = this.form ? document.getElementById(this.form) : this.el.closest('form');\n      //if (formEl.tagName === 'JE-FORM') formEl = formEl.querySelector('form')\n      if (formEl) {\n        this.formButtonEl = document.createElement('button');\n        this.formButtonEl.type = this.type;\n        this.formButtonEl.style.display = 'none';\n        formEl.append(this.formButtonEl);\n      }\n    }\n  }\n\n  @Listen('click')\n  handleClick() {\n    this.formButtonEl?.click();\n  }\n\n  @Watch('pending')\n  onPendingChange() {\n    if (this.pending) {\n      this.buttonEl.style.setProperty('--pending-width', `${this.buttonEl.clientWidth}px`);\n    }\n  }\n\n  render() {\n    const classes = {\n      [this.fill]: true,\n      expand: this.expand,\n      pending: this.pending,\n      [this.color]: !!this.color\n    }\n    return (\n      <Host>\n        <button part='inner-button' ref={el => this.buttonEl = el} disabled={this.disabled || this.pending} type='button' tabindex={0} class={classes}>\n          {this.pending ? <je-loading/> : <slot/>}\n          <slot name='badge'/>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/je-button.je-icon-button.je-loading.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"je-button.je-icon-button.je-loading.entry.cjs.js","sources":["src/components/je-button/je-button.scss?tag=je-button&encapsulation=shadow","src/components/je-button/je-button.tsx","src/components/je-icon-button/je-icon-button.scss?tag=je-icon-button&encapsulation=shadow","src/components/je-icon-button/je-icon-button.tsx","src/components/je-loading/je-loading.scss?tag=je-loading&encapsulation=shadow","src/components/je-loading/je-loading.tsx"],"sourcesContent":["@use '../../styles/styles' as *;\n\n/**\n * @prop --height: Fixed height\n * @prop --font-size: Font size\n * @prop --padding-inline: Inner inline padding\n * @prop --color: Text color\n * @prop --background: Default background color\n * @prop --hover-background: Hovered background color\n * @prop --active-background: Pressed background color\n */\n\n:host {\n  display: contents;\n\n  --height: 2.5rem;\n  --padding-inline: #{spacing-get(md)};\n  --font-size: #{font-size(md)};\n  --border-color: transparent;\n}\n\n:host([size=sm]) {\n  --height: 2rem;\n  --padding-inline: #{spacing-get(sm)};\n  --font-size: #{font-size(sm)};\n}\n\n:host([size=lg]) {\n  --height: 3rem;\n  --padding-inline: #{spacing-get(lg)};\n  --font-size: #{font-size(lg)};\n}\n\n:host(:not([color])) button {\n  --color: light-dark(#{secondary(800)}, #{secondary(200)});\n  --hover-color: light-dark(#{secondary(850)}, #{secondary(150)});\n  --active-color: light-dark(#{secondary(900)}, #{secondary(100)});\n  --background: transparent;\n  --hover-background: light-dark(#{secondary(150)}, #{secondary(850)});\n  --active-background: light-dark(#{secondary(200)}, #{secondary(800)});\n\n  &.solid {\n    --border-color: light-dark(#{secondary(500)}, #{secondary(750)});\n  }\n}\n\nbutton {\n  &.outline {\n    --border-color: currentcolor;\n  }\n\n  &.primary {\n    &.solid {\n      --color: #{primary(100)};\n      --background: #{primary(500)};\n      --hover-background: #{primary(600)};\n      --active-background: #{primary(700)};\n    }\n    &.clear,\n    &.outline {\n      --color: light-dark(#{primary(500)}, #{primary(300)});\n      --hover-color: light-dark(#{primary(600)}, #{primary(200)});\n      --active-color: light-dark(#{primary(700)}, #{primary(100)});\n      --background: transparent;\n      --hover-background: light-dark(#{primary(50)}, #{primary(850)});\n      --active-background: light-dark(#{primary(100)}, #{primary(800)});\n    }\n  }\n\n  &.secondary {\n    &.solid {\n      --color: #{secondary(900)};\n      --background: #{secondary(500)};\n      --hover-background: #{secondary(400)};\n      --active-background: #{secondary(300)};\n    }\n    &.clear,\n    &.outline {\n      --color: light-dark(#{secondary(700)}, #{secondary(500)});\n      --hover-color: light-dark(#{secondary(800)}, #{secondary(400)});\n      --active-color: light-dark(#{secondary(900)}, #{secondary(300)});\n      --background: transparent;\n      --hover-background: light-dark(#{secondary(100)}, #{secondary(875)});\n      --active-background: light-dark(#{secondary(150)}, #{secondary(850)});\n    }\n  }\n\n  &.warning {\n    &.solid {\n      --color: #{warning(900)};\n      --background: #{warning(500)};\n      --hover-background: #{warning(400)};\n      --active-background: #{warning(300)};\n    }\n    &.clear,\n    &.outline {\n      --color: light-dark(#{warning(700)}, #{warning(500)});\n      --hover-color: light-dark(#{warning(800)}, #{warning(400)});\n      --active-color: light-dark(#{warning(900)}, #{warning(300)});\n      --background: transparent;\n      --hover-background: light-dark(#{warning(100)}, #{warning(900)});\n      --active-background: light-dark(#{warning(150)}, #{warning(875)});\n    }\n  }\n\n  &.success {\n    &.solid {\n      --color: #{success(900)};\n      --background: #{success(500)};\n      --hover-background: #{success(400)};\n      --active-background: #{success(300)};\n    }\n    &.clear,\n    &.outline {\n      --color: light-dark(#{success(700)}, #{success(500)});\n      --hover-color: light-dark(#{success(800)}, #{success(400)});\n      --active-color: light-dark(#{success(900)}, #{success(300)});\n      --background: transparent;\n      --hover-background: light-dark(#{success(100)}, #{success(900)});\n      --active-background: light-dark(#{success(150)}, #{success(875)});\n    }\n  }\n\n  &.danger {\n    &.solid {\n      --color: #{danger(100)};\n      --background: #{danger(500)};\n      --hover-background: #{danger(600)};\n      --active-background: #{danger(700)};\n    }\n    &.clear,\n    &.outline {\n      --color: light-dark(#{danger(500)}, #{danger(300)});\n      --hover-color: light-dark(#{danger(600)}, #{danger(200)});\n      --active-color: light-dark(#{danger(700)}, #{danger(100)});\n      --background: transparent;\n      --hover-background: light-dark(#{danger(50)}, #{danger(750)});\n      --active-background: light-dark(#{danger(100)}, #{danger(700)});\n    }\n  }\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  position: relative;\n  box-sizing: border-box;\n  border-radius: radius-get(md);\n  margin: 0;\n  padding-block: 0;\n  padding-inline: var(--padding-inline);\n  cursor: pointer;\n  flex-shrink: 0;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  user-select: none;\n  text-transform: capitalize;\n  text-wrap: wrap;\n  font-family: inherit;\n  font-size: var(--font-size);\n  font-weight: font-weight(semi-bold);\n  height: var(--height);\n  color: var(--color);\n  background-color: var(--background, transparent);\n  transition: all 125ms ease-in-out;\n  outline-color: primary(300);\n  outline-offset: 3px;\n  border: solid 1px var(--border-color);\n\n  @media (hover: hover) {\n    &:hover:not(:disabled) {\n      background-color: var(--hover-background, var(--background, transparent));\n      color: var(--hover-color, var(--color));\n    }\n  }\n\n  &:active:not(:disabled) {\n    background-color: var(--active-background, var(--background, transparent));\n    color: var(--active-color, var(--color));\n  }\n\n  &:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n\n  &.pending {\n    opacity: 0.8;\n    cursor: progress;\n    width: var(--pending-width);\n  }\n\n  &.expand {\n    width: 100%;\n  }\n}\n\n::slotted([slot=badge]) {\n  top: 0;\n  right: 0;\n  position: absolute;\n  z-index: 1;\n  transform: translate(50%, -50%);\n  border-radius: radius-get(circle);\n  box-sizing: border-box;\n  color: light-dark(secondary(100), secondary(850));\n  background-color: light-dark(secondary(850), secondary(100));\n  padding: spacing-get(2xs);\n  font-size: var(--font-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n","import { Component, Prop, h, Element, Listen, Host, Watch } from '@stencil/core';\nimport { Color } from '../../utils/utils';\n\n@Component({\n  tag: 'je-button',\n  styleUrl: 'je-button.scss',\n  shadow: {\n    delegatesFocus: true\n  },\n})\nexport class JeButton {\n  @Element() el: HTMLJeButtonElement;\n  private formButtonEl?: HTMLButtonElement;\n  private buttonEl: HTMLButtonElement;\n\n  /** Disables button */\n  @Prop() disabled = false;\n\n  /** Can set to submit or reset to participate in forms */\n  @Prop() type?: 'submit' | 'reset';\n\n  /** Expands the button to the full width of it's container */\n  @Prop() expand = false;\n\n  /** Shows a loading spinner and disables the button */\n  @Prop() pending = false;\n\n  /** Button fill */\n  @Prop({ reflect: true }) fill: 'solid' | 'outline' | 'clear' = 'solid';\n\n  /** Button size */\n  @Prop({ reflect: true }) size: 'md' | 'lg' | 'sm' = 'md';\n\n  /** Predefined colors */\n  @Prop({ reflect: true }) color?: Color;\n\n  componentDidLoad() {\n    if (this.type) {\n      const formEl = this.el.closest('form');\n      if (formEl) {\n        this.formButtonEl = document.createElement('button');\n        this.formButtonEl.type = this.type;\n        this.formButtonEl.style.display = 'none';\n        formEl.append(this.formButtonEl);\n      }\n    }\n  }\n\n  @Listen('click')\n  handleClick() {\n    this.formButtonEl?.click();\n  }\n\n  @Watch('pending')\n  onPendingChange() {\n    if (this.pending) {\n      this.buttonEl.style.setProperty('--pending-width', `${this.buttonEl.clientWidth}px`);\n    }\n  }\n\n  render() {\n    const classes = {\n      [this.fill]: true,\n      expand: this.expand,\n      pending: this.pending,\n      [this.color]: !!this.color\n    }\n    return (\n      <Host>\n        <button part='inner-button' ref={el => this.buttonEl = el} disabled={this.disabled || this.pending} type='button' tabindex={0} class={classes}>\n          {this.pending ? <je-loading/> : <slot/>}\n          <slot name='badge'/>\n        </button>\n      </Host>\n    );\n  }\n}\n","@use '../../styles/styles' as *;\n\n:host {\n  display: contents;\n}\n\nje-button {\n  --height: min-content;\n\n  &[size=sm] {\n    --padding-inline: #{spacing-get(3xs)};\n  }\n\n  &[size=md] {\n    --padding-inline: #{spacing-get(2xs)};\n  }\n\n  &[size=lg] {\n    --padding-inline: #{spacing-get(xs)};\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { Color } from '../../utils/utils';\n\n@Component({\n  tag: 'je-icon-button',\n  styleUrl: 'je-icon-button.scss',\n  shadow: true,\n})\nexport class JeIconButton {\n  /** Disables button */\n  @Prop() disabled = false;\n\n  /** Can set to submit or reset to participate in forms */\n  @Prop() type?: 'submit' | 'reset';\n\n  /** Shows a loading spinner and disables the button */\n  @Prop() pending = false;\n\n  /** Button fill */\n  @Prop() fill: 'solid' | 'outline' | 'clear' = 'clear';\n\n  /** Button size */\n  @Prop() size: 'md' | 'lg' | 'sm' = 'md';\n\n  /** Predefined colors */\n  @Prop() color?: Color;\n\n  /** Name of icon */\n  @Prop() icon?: string;\n\n  render() {\n    return (\n      <je-button exportparts='inner-button' fill={this.fill} color={this.color} size={this.size} pending={this.pending} type={this.type} disabled={this.disabled}>\n        <slot>\n          {this.icon && <je-icon part='icon' fill={true} size={this.size == 'sm' ? 'xs' : this.size == 'lg' ? 'md' : 'sm'}>{this.icon}</je-icon>}\n        </slot>\n        <slot slot='badge' name='badge'></slot>\n      </je-button>\n    );\n  }\n}\n",":host {\n  display: inline-block;\n  position: relative;\n  width: 23px;\n  height: 23px;\n  user-select: none;\n}\n\nsvg {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  transform: translateZ(0);\n}\n\n:host(.spinner-lines) line,\n:host(.spinner-lines-small) line {\n  stroke-width: 7px;\n}\n\n:host(.spinner-lines-sharp) line,\n:host(.spinner-lines-sharp-small) line {\n  stroke-width: 4px;\n}\n\n:host(.spinner-lines) line,\n:host(.spinner-lines-small) line,\n:host(.spinner-lines-sharp) line,\n:host(.spinner-lines-sharp-small) line {\n  stroke-linecap: round;\n  stroke: currentColor;\n}\n\n:host(.spinner-lines) svg,\n:host(.spinner-lines-small) svg,\n:host(.spinner-lines-sharp) svg,\n:host(.spinner-lines-sharp-small) svg {\n  animation: spinner-fade-out 1s linear infinite;\n}\n\n@keyframes spinner-fade-out {\n  0% {\n    opacity: 1;\n  }\n\n  100% {\n    opacity: 0;\n  }\n\n}\n","import { Component, Host, h } from '@stencil/core';\n\nexport interface SpinnerConfig {\n  dur: number;\n  circles?: number;\n  lines?: number;\n  elmDuration?: boolean;\n  fn: (dur: number, index: number, total: number) => SpinnerData;\n}\n\nexport interface SpinnerData {\n  r?: number;\n  y1?: number;\n  y2?: number;\n  cx?: number;\n  cy?: number;\n  style: { [key: string]: string | undefined };\n  viewBox?: string;\n  transform?: string;\n}\n\nconst spinners = {\n  lines: {\n    dur: 1000,\n    lines: 8,\n    fn: (dur: number, index: number, total: number) => {\n      const transform = `rotate(${(360 / total) * index + (index < total / 2 ? 180 : -180)}deg)`;\n      const animationDelay = `${(dur * index) / total - dur}ms`;\n\n      return {\n        y1: 14,\n        y2: 26,\n        style: {\n          transform: transform,\n          'animation-delay': animationDelay,\n        },\n      };\n    },\n  },\n}\n\nconst buildLine = (spinner: SpinnerConfig, duration: number, index: number, total: number) => {\n  const data = spinner.fn(duration, index, total);\n  data.style['animation-duration'] = duration + 'ms';\n\n  return (\n    <svg viewBox={data.viewBox || '0 0 64 64'} style={data.style}>\n      <line transform=\"translate(32,32)\" y1={data.y1} y2={data.y2} />\n    </svg>\n  );\n};\n\n@Component({\n  tag: 'je-loading',\n  styleUrl: 'je-loading.scss',\n  shadow: true,\n})\nexport class JeLoading {\n  render() {\n    const spinner = spinners['lines'];\n    const duration = spinner.dur;\n    const svgs: SVGElement[] = [];\n\n    for (let i = 0; i < spinner.lines; i++) {\n      svgs.push(buildLine(spinner, duration, i, spinner.lines));\n    }\n\n    return (\n      <Host class={{ [`spinner-lines`]: true }}>\n        {svgs}\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host","index"],"mappings":"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"}
+{"version":3,"file":"je-button.je-icon-button.je-loading.entry.cjs.js","sources":["src/components/je-button/je-button.scss?tag=je-button&encapsulation=shadow","src/components/je-button/je-button.tsx","src/components/je-icon-button/je-icon-button.scss?tag=je-icon-button&encapsulation=shadow","src/components/je-icon-button/je-icon-button.tsx","src/components/je-loading/je-loading.scss?tag=je-loading&encapsulation=shadow","src/components/je-loading/je-loading.tsx"],"sourcesContent":["@use '../../styles/styles' as *;\n\n/**\n * @prop --height: Fixed height\n * @prop --font-size: Font size\n * @prop --padding-inline: Inner inline padding\n * @prop --color: Text color\n * @prop --background: Default background color\n * @prop --hover-background: Hovered background color\n * @prop --active-background: Pressed background color\n */\n\n:host {\n  display: contents;\n\n  --height: 2.5rem;\n  --padding-inline: #{spacing-get(md)};\n  --font-size: #{font-size(md)};\n  --border-color: transparent;\n}\n\n:host([size=sm]) {\n  --height: 2rem;\n  --padding-inline: #{spacing-get(sm)};\n  --font-size: #{font-size(sm)};\n}\n\n:host([size=lg]) {\n  --height: 3rem;\n  --padding-inline: #{spacing-get(lg)};\n  --font-size: #{font-size(lg)};\n}\n\n:host(:not([color])) button {\n  --color: light-dark(#{secondary(800)}, #{secondary(200)});\n  --hover-color: light-dark(#{secondary(850)}, #{secondary(150)});\n  --active-color: light-dark(#{secondary(900)}, #{secondary(100)});\n  --background: transparent;\n  --hover-background: light-dark(#{secondary(150)}, #{secondary(850)});\n  --active-background: light-dark(#{secondary(200)}, #{secondary(800)});\n\n  &.solid {\n    --border-color: light-dark(#{secondary(500)}, #{secondary(750)});\n  }\n}\n\nbutton {\n  &.outline {\n    --border-color: currentcolor;\n  }\n\n  &.primary {\n    &.solid {\n      --color: #{primary(100)};\n      --background: #{primary(500)};\n      --hover-background: #{primary(600)};\n      --active-background: #{primary(700)};\n    }\n    &.clear,\n    &.outline {\n      --color: light-dark(#{primary(500)}, #{primary(300)});\n      --hover-color: light-dark(#{primary(600)}, #{primary(200)});\n      --active-color: light-dark(#{primary(700)}, #{primary(100)});\n      --background: transparent;\n      --hover-background: light-dark(#{primary(50)}, #{primary(850)});\n      --active-background: light-dark(#{primary(100)}, #{primary(800)});\n    }\n  }\n\n  &.secondary {\n    &.solid {\n      --color: #{secondary(900)};\n      --background: #{secondary(500)};\n      --hover-background: #{secondary(400)};\n      --active-background: #{secondary(300)};\n    }\n    &.clear,\n    &.outline {\n      --color: light-dark(#{secondary(700)}, #{secondary(500)});\n      --hover-color: light-dark(#{secondary(800)}, #{secondary(400)});\n      --active-color: light-dark(#{secondary(900)}, #{secondary(300)});\n      --background: transparent;\n      --hover-background: light-dark(#{secondary(100)}, #{secondary(875)});\n      --active-background: light-dark(#{secondary(150)}, #{secondary(850)});\n    }\n  }\n\n  &.warning {\n    &.solid {\n      --color: #{warning(900)};\n      --background: #{warning(500)};\n      --hover-background: #{warning(400)};\n      --active-background: #{warning(300)};\n    }\n    &.clear,\n    &.outline {\n      --color: light-dark(#{warning(700)}, #{warning(500)});\n      --hover-color: light-dark(#{warning(800)}, #{warning(400)});\n      --active-color: light-dark(#{warning(900)}, #{warning(300)});\n      --background: transparent;\n      --hover-background: light-dark(#{warning(100)}, #{warning(900)});\n      --active-background: light-dark(#{warning(150)}, #{warning(875)});\n    }\n  }\n\n  &.success {\n    &.solid {\n      --color: #{success(900)};\n      --background: #{success(500)};\n      --hover-background: #{success(400)};\n      --active-background: #{success(300)};\n    }\n    &.clear,\n    &.outline {\n      --color: light-dark(#{success(700)}, #{success(500)});\n      --hover-color: light-dark(#{success(800)}, #{success(400)});\n      --active-color: light-dark(#{success(900)}, #{success(300)});\n      --background: transparent;\n      --hover-background: light-dark(#{success(100)}, #{success(900)});\n      --active-background: light-dark(#{success(150)}, #{success(875)});\n    }\n  }\n\n  &.danger {\n    &.solid {\n      --color: #{danger(100)};\n      --background: #{danger(500)};\n      --hover-background: #{danger(600)};\n      --active-background: #{danger(700)};\n    }\n    &.clear,\n    &.outline {\n      --color: light-dark(#{danger(500)}, #{danger(300)});\n      --hover-color: light-dark(#{danger(600)}, #{danger(200)});\n      --active-color: light-dark(#{danger(700)}, #{danger(100)});\n      --background: transparent;\n      --hover-background: light-dark(#{danger(50)}, #{danger(750)});\n      --active-background: light-dark(#{danger(100)}, #{danger(700)});\n    }\n  }\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  position: relative;\n  box-sizing: border-box;\n  border-radius: radius-get(md);\n  margin: 0;\n  padding-block: 0;\n  padding-inline: var(--padding-inline);\n  cursor: pointer;\n  flex-shrink: 0;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  user-select: none;\n  text-transform: capitalize;\n  text-wrap: wrap;\n  font-family: inherit;\n  font-size: var(--font-size);\n  font-weight: font-weight(semi-bold);\n  height: var(--height);\n  color: var(--color);\n  background-color: var(--background, transparent);\n  transition: all 125ms ease-in-out;\n  outline-color: primary(300);\n  outline-offset: 3px;\n  border: solid 1px var(--border-color);\n\n  @media (hover: hover) {\n    &:hover:not(:disabled) {\n      background-color: var(--hover-background, var(--background, transparent));\n      color: var(--hover-color, var(--color));\n    }\n  }\n\n  &:active:not(:disabled) {\n    background-color: var(--active-background, var(--background, transparent));\n    color: var(--active-color, var(--color));\n  }\n\n  &:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n\n  &.pending {\n    opacity: 0.8;\n    cursor: progress;\n    width: var(--pending-width);\n  }\n\n  &.expand {\n    width: 100%;\n  }\n}\n\n::slotted([slot=badge]) {\n  top: 0;\n  right: 0;\n  position: absolute;\n  z-index: 1;\n  transform: translate(50%, -50%);\n  border-radius: radius-get(circle);\n  box-sizing: border-box;\n  color: light-dark(secondary(100), secondary(850));\n  background-color: light-dark(secondary(850), secondary(100));\n  padding: spacing-get(2xs);\n  font-size: var(--font-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n","import { Component, Prop, h, Element, Listen, Host, Watch } from '@stencil/core';\nimport { Color } from '../../utils/utils';\n\n@Component({\n  tag: 'je-button',\n  styleUrl: 'je-button.scss',\n  shadow: {\n    delegatesFocus: true\n  },\n})\nexport class JeButton {\n  @Element() el: HTMLJeButtonElement;\n  private formButtonEl?: HTMLButtonElement;\n  private buttonEl: HTMLButtonElement;\n\n  /** Disables button */\n  @Prop() disabled = false;\n\n  /** Can set to submit or reset to participate in forms */\n  @Prop() type?: 'submit' | 'reset';\n\n  /**\n   * Can set form id to participate in forms. Use this if you need to place\n   * submit/reset button outside the form element\n   */\n  @Prop() form?: string;\n\n  /** Expands the button to the full width of it's container */\n  @Prop() expand = false;\n\n  /** Shows a loading spinner and disables the button */\n  @Prop() pending = false;\n\n  /** Button fill */\n  @Prop({ reflect: true }) fill: 'solid' | 'outline' | 'clear' = 'solid';\n\n  /** Button size */\n  @Prop({ reflect: true }) size: 'md' | 'lg' | 'sm' = 'md';\n\n  /** Predefined colors */\n  @Prop({ reflect: true }) color?: Color;\n\n  componentDidLoad() {\n    if (this.type) {\n      let formEl = this.form ? document.getElementById(this.form) : this.el.closest('form');\n      //if (formEl.tagName === 'JE-FORM') formEl = formEl.querySelector('form')\n      if (formEl) {\n        this.formButtonEl = document.createElement('button');\n        this.formButtonEl.type = this.type;\n        this.formButtonEl.style.display = 'none';\n        formEl.append(this.formButtonEl);\n      }\n    }\n  }\n\n  @Listen('click')\n  handleClick() {\n    this.formButtonEl?.click();\n  }\n\n  @Watch('pending')\n  onPendingChange() {\n    if (this.pending) {\n      this.buttonEl.style.setProperty('--pending-width', `${this.buttonEl.clientWidth}px`);\n    }\n  }\n\n  render() {\n    const classes = {\n      [this.fill]: true,\n      expand: this.expand,\n      pending: this.pending,\n      [this.color]: !!this.color\n    }\n    return (\n      <Host>\n        <button part='inner-button' ref={el => this.buttonEl = el} disabled={this.disabled || this.pending} type='button' tabindex={0} class={classes}>\n          {this.pending ? <je-loading/> : <slot/>}\n          <slot name='badge'/>\n        </button>\n      </Host>\n    );\n  }\n}\n","@use '../../styles/styles' as *;\n\n:host {\n  display: contents;\n}\n\nje-button {\n  --height: min-content;\n\n  &[size=sm] {\n    --padding-inline: #{spacing-get(3xs)};\n  }\n\n  &[size=md] {\n    --padding-inline: #{spacing-get(2xs)};\n  }\n\n  &[size=lg] {\n    --padding-inline: #{spacing-get(xs)};\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { Color } from '../../utils/utils';\n\n@Component({\n  tag: 'je-icon-button',\n  styleUrl: 'je-icon-button.scss',\n  shadow: true,\n})\nexport class JeIconButton {\n  /** Disables button */\n  @Prop() disabled = false;\n\n  /** Can set to submit or reset to participate in forms */\n  @Prop() type?: 'submit' | 'reset';\n\n  /** Shows a loading spinner and disables the button */\n  @Prop() pending = false;\n\n  /** Button fill */\n  @Prop() fill: 'solid' | 'outline' | 'clear' = 'clear';\n\n  /** Button size */\n  @Prop() size: 'md' | 'lg' | 'sm' = 'md';\n\n  /** Predefined colors */\n  @Prop() color?: Color;\n\n  /** Name of icon */\n  @Prop() icon?: string;\n\n  render() {\n    return (\n      <je-button exportparts='inner-button' fill={this.fill} color={this.color} size={this.size} pending={this.pending} type={this.type} disabled={this.disabled}>\n        <slot>\n          {this.icon && <je-icon part='icon' fill={true} size={this.size == 'sm' ? 'xs' : this.size == 'lg' ? 'md' : 'sm'}>{this.icon}</je-icon>}\n        </slot>\n        <slot slot='badge' name='badge'></slot>\n      </je-button>\n    );\n  }\n}\n",":host {\n  display: inline-block;\n  position: relative;\n  width: 23px;\n  height: 23px;\n  user-select: none;\n}\n\nsvg {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  transform: translateZ(0);\n}\n\n:host(.spinner-lines) line,\n:host(.spinner-lines-small) line {\n  stroke-width: 7px;\n}\n\n:host(.spinner-lines-sharp) line,\n:host(.spinner-lines-sharp-small) line {\n  stroke-width: 4px;\n}\n\n:host(.spinner-lines) line,\n:host(.spinner-lines-small) line,\n:host(.spinner-lines-sharp) line,\n:host(.spinner-lines-sharp-small) line {\n  stroke-linecap: round;\n  stroke: currentColor;\n}\n\n:host(.spinner-lines) svg,\n:host(.spinner-lines-small) svg,\n:host(.spinner-lines-sharp) svg,\n:host(.spinner-lines-sharp-small) svg {\n  animation: spinner-fade-out 1s linear infinite;\n}\n\n@keyframes spinner-fade-out {\n  0% {\n    opacity: 1;\n  }\n\n  100% {\n    opacity: 0;\n  }\n\n}\n","import { Component, Host, h } from '@stencil/core';\n\nexport interface SpinnerConfig {\n  dur: number;\n  circles?: number;\n  lines?: number;\n  elmDuration?: boolean;\n  fn: (dur: number, index: number, total: number) => SpinnerData;\n}\n\nexport interface SpinnerData {\n  r?: number;\n  y1?: number;\n  y2?: number;\n  cx?: number;\n  cy?: number;\n  style: { [key: string]: string | undefined };\n  viewBox?: string;\n  transform?: string;\n}\n\nconst spinners = {\n  lines: {\n    dur: 1000,\n    lines: 8,\n    fn: (dur: number, index: number, total: number) => {\n      const transform = `rotate(${(360 / total) * index + (index < total / 2 ? 180 : -180)}deg)`;\n      const animationDelay = `${(dur * index) / total - dur}ms`;\n\n      return {\n        y1: 14,\n        y2: 26,\n        style: {\n          transform: transform,\n          'animation-delay': animationDelay,\n        },\n      };\n    },\n  },\n}\n\nconst buildLine = (spinner: SpinnerConfig, duration: number, index: number, total: number) => {\n  const data = spinner.fn(duration, index, total);\n  data.style['animation-duration'] = duration + 'ms';\n\n  return (\n    <svg viewBox={data.viewBox || '0 0 64 64'} style={data.style}>\n      <line transform=\"translate(32,32)\" y1={data.y1} y2={data.y2} />\n    </svg>\n  );\n};\n\n@Component({\n  tag: 'je-loading',\n  styleUrl: 'je-loading.scss',\n  shadow: true,\n})\nexport class JeLoading {\n  render() {\n    const spinner = spinners['lines'];\n    const duration = spinner.dur;\n    const svgs: SVGElement[] = [];\n\n    for (let i = 0; i < spinner.lines; i++) {\n      svgs.push(buildLine(spinner, duration, i, spinner.lines));\n    }\n\n    return (\n      <Host class={{ [`spinner-lines`]: true }}>\n        {svgs}\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host","index"],"mappings":"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"}

package/dist/cjs/je-button_3.cjs.entry.js

@@ -20,7 +20,8 @@ const JeButton = class {
     }
     componentDidLoad() {
         if (this.type) {
-            const formEl = this.el.closest('form');
+            let formEl = this.form ? document.getElementById(this.form) : this.el.closest('form');
+            //if (formEl.tagName === 'JE-FORM') formEl = formEl.querySelector('form')
             if (formEl) {
                 this.formButtonEl = document.createElement('button');
                 this.formButtonEl.type = this.type;
@@ -45,7 +46,7 @@ const JeButton = class {
             pending: this.pending,
             [this.color]: !!this.color
         };
-        return (index.h(index.Host, { key: '0a97938c6b5c9da6f17329158c63b106bd697f4f' }, index.h("button", { key: 'f9feee8c90012c0d3981aa5325ecab445d7bba07', part: 'inner-button', ref: el => this.buttonEl = el, disabled: this.disabled || this.pending, type: 'button', tabindex: 0, class: classes }, this.pending ? index.h("je-loading", null) : index.h("slot", null), index.h("slot", { key: 'ce0c730a22589c89e1bd64ec367b26a77e5bf272', name: 'badge' }))));
+        return (index.h(index.Host, { key: '45b91d0c61dfb35b39891757ff682c44a0aac684' }, index.h("button", { key: '2e1619be06c3e54f47281cc477e9de4bbc6fa724', part: 'inner-button', ref: el => this.buttonEl = el, disabled: this.disabled || this.pending, type: 'button', tabindex: 0, class: classes }, this.pending ? index.h("je-loading", null) : index.h("slot", null), index.h("slot", { key: '75f476ba5e7d226db0b611566c40fb982d2d0ce1', name: 'badge' }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/je-button_3.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"je-button.je-icon-button.je-loading.entry.cjs.js","mappings":"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","names":["h","Host","index"],"sources":["src/components/je-button/je-button.scss?tag=je-button&encapsulation=shadow","src/components/je-button/je-button.tsx","src/components/je-icon-button/je-icon-button.scss?tag=je-icon-button&encapsulation=shadow","src/components/je-icon-button/je-icon-button.tsx","src/components/je-loading/je-loading.scss?tag=je-loading&encapsulation=shadow","src/components/je-loading/je-loading.tsx"],"sourcesContent":["@use '../../styles/styles' as *;\n\n/**\n * @prop --height: Fixed height\n * @prop --font-size: Font size\n * @prop --padding-inline: Inner inline padding\n * @prop --color: Text color\n * @prop --background: Default background color\n * @prop --hover-background: Hovered background color\n * @prop --active-background: Pressed background color\n */\n\n:host {\n  display: contents;\n\n  --height: 2.5rem;\n  --padding-inline: #{spacing-get(md)};\n  --font-size: #{font-size(md)};\n  --border-color: transparent;\n}\n\n:host([size=sm]) {\n  --height: 2rem;\n  --padding-inline: #{spacing-get(sm)};\n  --font-size: #{font-size(sm)};\n}\n\n:host([size=lg]) {\n  --height: 3rem;\n  --padding-inline: #{spacing-get(lg)};\n  --font-size: #{font-size(lg)};\n}\n\n:host(:not([color])) button {\n  --color: light-dark(#{secondary(800)}, #{secondary(200)});\n  --hover-color: light-dark(#{secondary(850)}, #{secondary(150)});\n  --active-color: light-dark(#{secondary(900)}, #{secondary(100)});\n  --background: transparent;\n  --hover-background: light-dark(#{secondary(150)}, #{secondary(850)});\n  --active-background: light-dark(#{secondary(200)}, #{secondary(800)});\n\n  &.solid {\n    --border-color: light-dark(#{secondary(500)}, #{secondary(750)});\n  }\n}\n\nbutton {\n  &.outline {\n    --border-color: currentcolor;\n  }\n\n  &.primary {\n    &.solid {\n      --color: #{primary(100)};\n      --background: #{primary(500)};\n      --hover-background: #{primary(600)};\n      --active-background: #{primary(700)};\n    }\n    &.clear,\n    &.outline {\n      --color: light-dark(#{primary(500)}, #{primary(300)});\n      --hover-color: light-dark(#{primary(600)}, #{primary(200)});\n      --active-color: light-dark(#{primary(700)}, #{primary(100)});\n      --background: transparent;\n      --hover-background: light-dark(#{primary(50)}, #{primary(850)});\n      --active-background: light-dark(#{primary(100)}, #{primary(800)});\n    }\n  }\n\n  &.secondary {\n    &.solid {\n      --color: #{secondary(900)};\n      --background: #{secondary(500)};\n      --hover-background: #{secondary(400)};\n      --active-background: #{secondary(300)};\n    }\n    &.clear,\n    &.outline {\n      --color: light-dark(#{secondary(700)}, #{secondary(500)});\n      --hover-color: light-dark(#{secondary(800)}, #{secondary(400)});\n      --active-color: light-dark(#{secondary(900)}, #{secondary(300)});\n      --background: transparent;\n      --hover-background: light-dark(#{secondary(100)}, #{secondary(875)});\n      --active-background: light-dark(#{secondary(150)}, #{secondary(850)});\n    }\n  }\n\n  &.warning {\n    &.solid {\n      --color: #{warning(900)};\n      --background: #{warning(500)};\n      --hover-background: #{warning(400)};\n      --active-background: #{warning(300)};\n    }\n    &.clear,\n    &.outline {\n      --color: light-dark(#{warning(700)}, #{warning(500)});\n      --hover-color: light-dark(#{warning(800)}, #{warning(400)});\n      --active-color: light-dark(#{warning(900)}, #{warning(300)});\n      --background: transparent;\n      --hover-background: light-dark(#{warning(100)}, #{warning(900)});\n      --active-background: light-dark(#{warning(150)}, #{warning(875)});\n    }\n  }\n\n  &.success {\n    &.solid {\n      --color: #{success(900)};\n      --background: #{success(500)};\n      --hover-background: #{success(400)};\n      --active-background: #{success(300)};\n    }\n    &.clear,\n    &.outline {\n      --color: light-dark(#{success(700)}, #{success(500)});\n      --hover-color: light-dark(#{success(800)}, #{success(400)});\n      --active-color: light-dark(#{success(900)}, #{success(300)});\n      --background: transparent;\n      --hover-background: light-dark(#{success(100)}, #{success(900)});\n      --active-background: light-dark(#{success(150)}, #{success(875)});\n    }\n  }\n\n  &.danger {\n    &.solid {\n      --color: #{danger(100)};\n      --background: #{danger(500)};\n      --hover-background: #{danger(600)};\n      --active-background: #{danger(700)};\n    }\n    &.clear,\n    &.outline {\n      --color: light-dark(#{danger(500)}, #{danger(300)});\n      --hover-color: light-dark(#{danger(600)}, #{danger(200)});\n      --active-color: light-dark(#{danger(700)}, #{danger(100)});\n      --background: transparent;\n      --hover-background: light-dark(#{danger(50)}, #{danger(750)});\n      --active-background: light-dark(#{danger(100)}, #{danger(700)});\n    }\n  }\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  position: relative;\n  box-sizing: border-box;\n  border-radius: radius-get(md);\n  margin: 0;\n  padding-block: 0;\n  padding-inline: var(--padding-inline);\n  cursor: pointer;\n  flex-shrink: 0;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  user-select: none;\n  text-transform: capitalize;\n  text-wrap: wrap;\n  font-family: inherit;\n  font-size: var(--font-size);\n  font-weight: font-weight(semi-bold);\n  height: var(--height);\n  color: var(--color);\n  background-color: var(--background, transparent);\n  transition: all 125ms ease-in-out;\n  outline-color: primary(300);\n  outline-offset: 3px;\n  border: solid 1px var(--border-color);\n\n  @media (hover: hover) {\n    &:hover:not(:disabled) {\n      background-color: var(--hover-background, var(--background, transparent));\n      color: var(--hover-color, var(--color));\n    }\n  }\n\n  &:active:not(:disabled) {\n    background-color: var(--active-background, var(--background, transparent));\n    color: var(--active-color, var(--color));\n  }\n\n  &:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n\n  &.pending {\n    opacity: 0.8;\n    cursor: progress;\n    width: var(--pending-width);\n  }\n\n  &.expand {\n    width: 100%;\n  }\n}\n\n::slotted([slot=badge]) {\n  top: 0;\n  right: 0;\n  position: absolute;\n  z-index: 1;\n  transform: translate(50%, -50%);\n  border-radius: radius-get(circle);\n  box-sizing: border-box;\n  color: light-dark(secondary(100), secondary(850));\n  background-color: light-dark(secondary(850), secondary(100));\n  padding: spacing-get(2xs);\n  font-size: var(--font-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n","import { Component, Prop, h, Element, Listen, Host, Watch } from '@stencil/core';\nimport { Color } from '../../utils/utils';\n\n@Component({\n  tag: 'je-button',\n  styleUrl: 'je-button.scss',\n  shadow: {\n    delegatesFocus: true\n  },\n})\nexport class JeButton {\n  @Element() el: HTMLJeButtonElement;\n  private formButtonEl?: HTMLButtonElement;\n  private buttonEl: HTMLButtonElement;\n\n  /** Disables button */\n  @Prop() disabled = false;\n\n  /** Can set to submit or reset to participate in forms */\n  @Prop() type?: 'submit' | 'reset';\n\n  /** Expands the button to the full width of it's container */\n  @Prop() expand = false;\n\n  /** Shows a loading spinner and disables the button */\n  @Prop() pending = false;\n\n  /** Button fill */\n  @Prop({ reflect: true }) fill: 'solid' | 'outline' | 'clear' = 'solid';\n\n  /** Button size */\n  @Prop({ reflect: true }) size: 'md' | 'lg' | 'sm' = 'md';\n\n  /** Predefined colors */\n  @Prop({ reflect: true }) color?: Color;\n\n  componentDidLoad() {\n    if (this.type) {\n      const formEl = this.el.closest('form');\n      if (formEl) {\n        this.formButtonEl = document.createElement('button');\n        this.formButtonEl.type = this.type;\n        this.formButtonEl.style.display = 'none';\n        formEl.append(this.formButtonEl);\n      }\n    }\n  }\n\n  @Listen('click')\n  handleClick() {\n    this.formButtonEl?.click();\n  }\n\n  @Watch('pending')\n  onPendingChange() {\n    if (this.pending) {\n      this.buttonEl.style.setProperty('--pending-width', `${this.buttonEl.clientWidth}px`);\n    }\n  }\n\n  render() {\n    const classes = {\n      [this.fill]: true,\n      expand: this.expand,\n      pending: this.pending,\n      [this.color]: !!this.color\n    }\n    return (\n      <Host>\n        <button part='inner-button' ref={el => this.buttonEl = el} disabled={this.disabled || this.pending} type='button' tabindex={0} class={classes}>\n          {this.pending ? <je-loading/> : <slot/>}\n          <slot name='badge'/>\n        </button>\n      </Host>\n    );\n  }\n}\n","@use '../../styles/styles' as *;\n\n:host {\n  display: contents;\n}\n\nje-button {\n  --height: min-content;\n\n  &[size=sm] {\n    --padding-inline: #{spacing-get(3xs)};\n  }\n\n  &[size=md] {\n    --padding-inline: #{spacing-get(2xs)};\n  }\n\n  &[size=lg] {\n    --padding-inline: #{spacing-get(xs)};\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { Color } from '../../utils/utils';\n\n@Component({\n  tag: 'je-icon-button',\n  styleUrl: 'je-icon-button.scss',\n  shadow: true,\n})\nexport class JeIconButton {\n  /** Disables button */\n  @Prop() disabled = false;\n\n  /** Can set to submit or reset to participate in forms */\n  @Prop() type?: 'submit' | 'reset';\n\n  /** Shows a loading spinner and disables the button */\n  @Prop() pending = false;\n\n  /** Button fill */\n  @Prop() fill: 'solid' | 'outline' | 'clear' = 'clear';\n\n  /** Button size */\n  @Prop() size: 'md' | 'lg' | 'sm' = 'md';\n\n  /** Predefined colors */\n  @Prop() color?: Color;\n\n  /** Name of icon */\n  @Prop() icon?: string;\n\n  render() {\n    return (\n      <je-button exportparts='inner-button' fill={this.fill} color={this.color} size={this.size} pending={this.pending} type={this.type} disabled={this.disabled}>\n        <slot>\n          {this.icon && <je-icon part='icon' fill={true} size={this.size == 'sm' ? 'xs' : this.size == 'lg' ? 'md' : 'sm'}>{this.icon}</je-icon>}\n        </slot>\n        <slot slot='badge' name='badge'></slot>\n      </je-button>\n    );\n  }\n}\n",":host {\n  display: inline-block;\n  position: relative;\n  width: 23px;\n  height: 23px;\n  user-select: none;\n}\n\nsvg {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  transform: translateZ(0);\n}\n\n:host(.spinner-lines) line,\n:host(.spinner-lines-small) line {\n  stroke-width: 7px;\n}\n\n:host(.spinner-lines-sharp) line,\n:host(.spinner-lines-sharp-small) line {\n  stroke-width: 4px;\n}\n\n:host(.spinner-lines) line,\n:host(.spinner-lines-small) line,\n:host(.spinner-lines-sharp) line,\n:host(.spinner-lines-sharp-small) line {\n  stroke-linecap: round;\n  stroke: currentColor;\n}\n\n:host(.spinner-lines) svg,\n:host(.spinner-lines-small) svg,\n:host(.spinner-lines-sharp) svg,\n:host(.spinner-lines-sharp-small) svg {\n  animation: spinner-fade-out 1s linear infinite;\n}\n\n@keyframes spinner-fade-out {\n  0% {\n    opacity: 1;\n  }\n\n  100% {\n    opacity: 0;\n  }\n\n}\n","import { Component, Host, h } from '@stencil/core';\n\nexport interface SpinnerConfig {\n  dur: number;\n  circles?: number;\n  lines?: number;\n  elmDuration?: boolean;\n  fn: (dur: number, index: number, total: number) => SpinnerData;\n}\n\nexport interface SpinnerData {\n  r?: number;\n  y1?: number;\n  y2?: number;\n  cx?: number;\n  cy?: number;\n  style: { [key: string]: string | undefined };\n  viewBox?: string;\n  transform?: string;\n}\n\nconst spinners = {\n  lines: {\n    dur: 1000,\n    lines: 8,\n    fn: (dur: number, index: number, total: number) => {\n      const transform = `rotate(${(360 / total) * index + (index < total / 2 ? 180 : -180)}deg)`;\n      const animationDelay = `${(dur * index) / total - dur}ms`;\n\n      return {\n        y1: 14,\n        y2: 26,\n        style: {\n          transform: transform,\n          'animation-delay': animationDelay,\n        },\n      };\n    },\n  },\n}\n\nconst buildLine = (spinner: SpinnerConfig, duration: number, index: number, total: number) => {\n  const data = spinner.fn(duration, index, total);\n  data.style['animation-duration'] = duration + 'ms';\n\n  return (\n    <svg viewBox={data.viewBox || '0 0 64 64'} style={data.style}>\n      <line transform=\"translate(32,32)\" y1={data.y1} y2={data.y2} />\n    </svg>\n  );\n};\n\n@Component({\n  tag: 'je-loading',\n  styleUrl: 'je-loading.scss',\n  shadow: true,\n})\nexport class JeLoading {\n  render() {\n    const spinner = spinners['lines'];\n    const duration = spinner.dur;\n    const svgs: SVGElement[] = [];\n\n    for (let i = 0; i < spinner.lines; i++) {\n      svgs.push(buildLine(spinner, duration, i, spinner.lines));\n    }\n\n    return (\n      <Host class={{ [`spinner-lines`]: true }}>\n        {svgs}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"je-button.je-icon-button.je-loading.entry.cjs.js","mappings":"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","names":["h","Host","index"],"sources":["src/components/je-button/je-button.scss?tag=je-button&encapsulation=shadow","src/components/je-button/je-button.tsx","src/components/je-icon-button/je-icon-button.scss?tag=je-icon-button&encapsulation=shadow","src/components/je-icon-button/je-icon-button.tsx","src/components/je-loading/je-loading.scss?tag=je-loading&encapsulation=shadow","src/components/je-loading/je-loading.tsx"],"sourcesContent":["@use '../../styles/styles' as *;\n\n/**\n * @prop --height: Fixed height\n * @prop --font-size: Font size\n * @prop --padding-inline: Inner inline padding\n * @prop --color: Text color\n * @prop --background: Default background color\n * @prop --hover-background: Hovered background color\n * @prop --active-background: Pressed background color\n */\n\n:host {\n  display: contents;\n\n  --height: 2.5rem;\n  --padding-inline: #{spacing-get(md)};\n  --font-size: #{font-size(md)};\n  --border-color: transparent;\n}\n\n:host([size=sm]) {\n  --height: 2rem;\n  --padding-inline: #{spacing-get(sm)};\n  --font-size: #{font-size(sm)};\n}\n\n:host([size=lg]) {\n  --height: 3rem;\n  --padding-inline: #{spacing-get(lg)};\n  --font-size: #{font-size(lg)};\n}\n\n:host(:not([color])) button {\n  --color: light-dark(#{secondary(800)}, #{secondary(200)});\n  --hover-color: light-dark(#{secondary(850)}, #{secondary(150)});\n  --active-color: light-dark(#{secondary(900)}, #{secondary(100)});\n  --background: transparent;\n  --hover-background: light-dark(#{secondary(150)}, #{secondary(850)});\n  --active-background: light-dark(#{secondary(200)}, #{secondary(800)});\n\n  &.solid {\n    --border-color: light-dark(#{secondary(500)}, #{secondary(750)});\n  }\n}\n\nbutton {\n  &.outline {\n    --border-color: currentcolor;\n  }\n\n  &.primary {\n    &.solid {\n      --color: #{primary(100)};\n      --background: #{primary(500)};\n      --hover-background: #{primary(600)};\n      --active-background: #{primary(700)};\n    }\n    &.clear,\n    &.outline {\n      --color: light-dark(#{primary(500)}, #{primary(300)});\n      --hover-color: light-dark(#{primary(600)}, #{primary(200)});\n      --active-color: light-dark(#{primary(700)}, #{primary(100)});\n      --background: transparent;\n      --hover-background: light-dark(#{primary(50)}, #{primary(850)});\n      --active-background: light-dark(#{primary(100)}, #{primary(800)});\n    }\n  }\n\n  &.secondary {\n    &.solid {\n      --color: #{secondary(900)};\n      --background: #{secondary(500)};\n      --hover-background: #{secondary(400)};\n      --active-background: #{secondary(300)};\n    }\n    &.clear,\n    &.outline {\n      --color: light-dark(#{secondary(700)}, #{secondary(500)});\n      --hover-color: light-dark(#{secondary(800)}, #{secondary(400)});\n      --active-color: light-dark(#{secondary(900)}, #{secondary(300)});\n      --background: transparent;\n      --hover-background: light-dark(#{secondary(100)}, #{secondary(875)});\n      --active-background: light-dark(#{secondary(150)}, #{secondary(850)});\n    }\n  }\n\n  &.warning {\n    &.solid {\n      --color: #{warning(900)};\n      --background: #{warning(500)};\n      --hover-background: #{warning(400)};\n      --active-background: #{warning(300)};\n    }\n    &.clear,\n    &.outline {\n      --color: light-dark(#{warning(700)}, #{warning(500)});\n      --hover-color: light-dark(#{warning(800)}, #{warning(400)});\n      --active-color: light-dark(#{warning(900)}, #{warning(300)});\n      --background: transparent;\n      --hover-background: light-dark(#{warning(100)}, #{warning(900)});\n      --active-background: light-dark(#{warning(150)}, #{warning(875)});\n    }\n  }\n\n  &.success {\n    &.solid {\n      --color: #{success(900)};\n      --background: #{success(500)};\n      --hover-background: #{success(400)};\n      --active-background: #{success(300)};\n    }\n    &.clear,\n    &.outline {\n      --color: light-dark(#{success(700)}, #{success(500)});\n      --hover-color: light-dark(#{success(800)}, #{success(400)});\n      --active-color: light-dark(#{success(900)}, #{success(300)});\n      --background: transparent;\n      --hover-background: light-dark(#{success(100)}, #{success(900)});\n      --active-background: light-dark(#{success(150)}, #{success(875)});\n    }\n  }\n\n  &.danger {\n    &.solid {\n      --color: #{danger(100)};\n      --background: #{danger(500)};\n      --hover-background: #{danger(600)};\n      --active-background: #{danger(700)};\n    }\n    &.clear,\n    &.outline {\n      --color: light-dark(#{danger(500)}, #{danger(300)});\n      --hover-color: light-dark(#{danger(600)}, #{danger(200)});\n      --active-color: light-dark(#{danger(700)}, #{danger(100)});\n      --background: transparent;\n      --hover-background: light-dark(#{danger(50)}, #{danger(750)});\n      --active-background: light-dark(#{danger(100)}, #{danger(700)});\n    }\n  }\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  position: relative;\n  box-sizing: border-box;\n  border-radius: radius-get(md);\n  margin: 0;\n  padding-block: 0;\n  padding-inline: var(--padding-inline);\n  cursor: pointer;\n  flex-shrink: 0;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  user-select: none;\n  text-transform: capitalize;\n  text-wrap: wrap;\n  font-family: inherit;\n  font-size: var(--font-size);\n  font-weight: font-weight(semi-bold);\n  height: var(--height);\n  color: var(--color);\n  background-color: var(--background, transparent);\n  transition: all 125ms ease-in-out;\n  outline-color: primary(300);\n  outline-offset: 3px;\n  border: solid 1px var(--border-color);\n\n  @media (hover: hover) {\n    &:hover:not(:disabled) {\n      background-color: var(--hover-background, var(--background, transparent));\n      color: var(--hover-color, var(--color));\n    }\n  }\n\n  &:active:not(:disabled) {\n    background-color: var(--active-background, var(--background, transparent));\n    color: var(--active-color, var(--color));\n  }\n\n  &:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n\n  &.pending {\n    opacity: 0.8;\n    cursor: progress;\n    width: var(--pending-width);\n  }\n\n  &.expand {\n    width: 100%;\n  }\n}\n\n::slotted([slot=badge]) {\n  top: 0;\n  right: 0;\n  position: absolute;\n  z-index: 1;\n  transform: translate(50%, -50%);\n  border-radius: radius-get(circle);\n  box-sizing: border-box;\n  color: light-dark(secondary(100), secondary(850));\n  background-color: light-dark(secondary(850), secondary(100));\n  padding: spacing-get(2xs);\n  font-size: var(--font-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n","import { Component, Prop, h, Element, Listen, Host, Watch } from '@stencil/core';\nimport { Color } from '../../utils/utils';\n\n@Component({\n  tag: 'je-button',\n  styleUrl: 'je-button.scss',\n  shadow: {\n    delegatesFocus: true\n  },\n})\nexport class JeButton {\n  @Element() el: HTMLJeButtonElement;\n  private formButtonEl?: HTMLButtonElement;\n  private buttonEl: HTMLButtonElement;\n\n  /** Disables button */\n  @Prop() disabled = false;\n\n  /** Can set to submit or reset to participate in forms */\n  @Prop() type?: 'submit' | 'reset';\n\n  /**\n   * Can set form id to participate in forms. Use this if you need to place\n   * submit/reset button outside the form element\n   */\n  @Prop() form?: string;\n\n  /** Expands the button to the full width of it's container */\n  @Prop() expand = false;\n\n  /** Shows a loading spinner and disables the button */\n  @Prop() pending = false;\n\n  /** Button fill */\n  @Prop({ reflect: true }) fill: 'solid' | 'outline' | 'clear' = 'solid';\n\n  /** Button size */\n  @Prop({ reflect: true }) size: 'md' | 'lg' | 'sm' = 'md';\n\n  /** Predefined colors */\n  @Prop({ reflect: true }) color?: Color;\n\n  componentDidLoad() {\n    if (this.type) {\n      let formEl = this.form ? document.getElementById(this.form) : this.el.closest('form');\n      //if (formEl.tagName === 'JE-FORM') formEl = formEl.querySelector('form')\n      if (formEl) {\n        this.formButtonEl = document.createElement('button');\n        this.formButtonEl.type = this.type;\n        this.formButtonEl.style.display = 'none';\n        formEl.append(this.formButtonEl);\n      }\n    }\n  }\n\n  @Listen('click')\n  handleClick() {\n    this.formButtonEl?.click();\n  }\n\n  @Watch('pending')\n  onPendingChange() {\n    if (this.pending) {\n      this.buttonEl.style.setProperty('--pending-width', `${this.buttonEl.clientWidth}px`);\n    }\n  }\n\n  render() {\n    const classes = {\n      [this.fill]: true,\n      expand: this.expand,\n      pending: this.pending,\n      [this.color]: !!this.color\n    }\n    return (\n      <Host>\n        <button part='inner-button' ref={el => this.buttonEl = el} disabled={this.disabled || this.pending} type='button' tabindex={0} class={classes}>\n          {this.pending ? <je-loading/> : <slot/>}\n          <slot name='badge'/>\n        </button>\n      </Host>\n    );\n  }\n}\n","@use '../../styles/styles' as *;\n\n:host {\n  display: contents;\n}\n\nje-button {\n  --height: min-content;\n\n  &[size=sm] {\n    --padding-inline: #{spacing-get(3xs)};\n  }\n\n  &[size=md] {\n    --padding-inline: #{spacing-get(2xs)};\n  }\n\n  &[size=lg] {\n    --padding-inline: #{spacing-get(xs)};\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { Color } from '../../utils/utils';\n\n@Component({\n  tag: 'je-icon-button',\n  styleUrl: 'je-icon-button.scss',\n  shadow: true,\n})\nexport class JeIconButton {\n  /** Disables button */\n  @Prop() disabled = false;\n\n  /** Can set to submit or reset to participate in forms */\n  @Prop() type?: 'submit' | 'reset';\n\n  /** Shows a loading spinner and disables the button */\n  @Prop() pending = false;\n\n  /** Button fill */\n  @Prop() fill: 'solid' | 'outline' | 'clear' = 'clear';\n\n  /** Button size */\n  @Prop() size: 'md' | 'lg' | 'sm' = 'md';\n\n  /** Predefined colors */\n  @Prop() color?: Color;\n\n  /** Name of icon */\n  @Prop() icon?: string;\n\n  render() {\n    return (\n      <je-button exportparts='inner-button' fill={this.fill} color={this.color} size={this.size} pending={this.pending} type={this.type} disabled={this.disabled}>\n        <slot>\n          {this.icon && <je-icon part='icon' fill={true} size={this.size == 'sm' ? 'xs' : this.size == 'lg' ? 'md' : 'sm'}>{this.icon}</je-icon>}\n        </slot>\n        <slot slot='badge' name='badge'></slot>\n      </je-button>\n    );\n  }\n}\n",":host {\n  display: inline-block;\n  position: relative;\n  width: 23px;\n  height: 23px;\n  user-select: none;\n}\n\nsvg {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  transform: translateZ(0);\n}\n\n:host(.spinner-lines) line,\n:host(.spinner-lines-small) line {\n  stroke-width: 7px;\n}\n\n:host(.spinner-lines-sharp) line,\n:host(.spinner-lines-sharp-small) line {\n  stroke-width: 4px;\n}\n\n:host(.spinner-lines) line,\n:host(.spinner-lines-small) line,\n:host(.spinner-lines-sharp) line,\n:host(.spinner-lines-sharp-small) line {\n  stroke-linecap: round;\n  stroke: currentColor;\n}\n\n:host(.spinner-lines) svg,\n:host(.spinner-lines-small) svg,\n:host(.spinner-lines-sharp) svg,\n:host(.spinner-lines-sharp-small) svg {\n  animation: spinner-fade-out 1s linear infinite;\n}\n\n@keyframes spinner-fade-out {\n  0% {\n    opacity: 1;\n  }\n\n  100% {\n    opacity: 0;\n  }\n\n}\n","import { Component, Host, h } from '@stencil/core';\n\nexport interface SpinnerConfig {\n  dur: number;\n  circles?: number;\n  lines?: number;\n  elmDuration?: boolean;\n  fn: (dur: number, index: number, total: number) => SpinnerData;\n}\n\nexport interface SpinnerData {\n  r?: number;\n  y1?: number;\n  y2?: number;\n  cx?: number;\n  cy?: number;\n  style: { [key: string]: string | undefined };\n  viewBox?: string;\n  transform?: string;\n}\n\nconst spinners = {\n  lines: {\n    dur: 1000,\n    lines: 8,\n    fn: (dur: number, index: number, total: number) => {\n      const transform = `rotate(${(360 / total) * index + (index < total / 2 ? 180 : -180)}deg)`;\n      const animationDelay = `${(dur * index) / total - dur}ms`;\n\n      return {\n        y1: 14,\n        y2: 26,\n        style: {\n          transform: transform,\n          'animation-delay': animationDelay,\n        },\n      };\n    },\n  },\n}\n\nconst buildLine = (spinner: SpinnerConfig, duration: number, index: number, total: number) => {\n  const data = spinner.fn(duration, index, total);\n  data.style['animation-duration'] = duration + 'ms';\n\n  return (\n    <svg viewBox={data.viewBox || '0 0 64 64'} style={data.style}>\n      <line transform=\"translate(32,32)\" y1={data.y1} y2={data.y2} />\n    </svg>\n  );\n};\n\n@Component({\n  tag: 'je-loading',\n  styleUrl: 'je-loading.scss',\n  shadow: true,\n})\nexport class JeLoading {\n  render() {\n    const spinner = spinners['lines'];\n    const duration = spinner.dur;\n    const svgs: SVGElement[] = [];\n\n    for (let i = 0; i < spinner.lines; i++) {\n      svgs.push(buildLine(spinner, duration, i, spinner.lines));\n    }\n\n    return (\n      <Host class={{ [`spinner-lines`]: true }}>\n        {svgs}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/je-tree.cjs.entry.js

@@ -26,6 +26,9 @@ const JeTree = class {
             branch.indentation = indentation;
         });
     }
+    valueChanged() {
+        this.valueChange.emit(this.value);
+    }
     async onClick(event) {
         const { target } = event;
         if (this.isBranch(target)) {
@@ -87,9 +90,12 @@ const JeTree = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'dd8a259f8be184c16b7a8001adb136b341745073' }, index.h("slot", { key: '2102074812c7e50151187b8525c714954d4a8d02' })));
+        return (index.h(index.Host, { key: '1c572e2abbde4927836c6f4c0afff74d3e3801f3' }, index.h("slot", { key: '7658d1b701792ea5d8bf492013f9eabb09af580b' })));
     }
     get element() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["valueChanged"]
+    }; }
 };
 JeTree.style = jeTreeCss;
 

package/dist/cjs/je-tree.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"je-tree.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/je-tree/je-tree.scss?tag=je-tree&encapsulation=shadow","src/components/je-tree/je-tree.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'je-tree',\n  styleUrl: 'je-tree.scss',\n  shadow: true,\n})\nexport class JeTree {\n  @Element() element: HTMLJeTreeElement;\n  @Prop({ mutable: true }) value?: string | string[];\n  @Prop() selection: 'single' | 'multiple' | 'leaf' = 'leaf';\n  @Prop() indentation = false;\n  @Event() valueChange: EventEmitter<string | string[]>;\n\n  private get branches() {\n    return Array.from(this.element.querySelectorAll('je-branch'))\n  }\n\n  componentWillLoad() {\n    if (this.selection == 'multiple' && !Array.isArray(this.value)) this.value = [];\n  }\n\n  componentWillRender() {\n    const { branches, selection, indentation } = this;\n    branches.forEach(branch => {\n      branch.selection = selection;\n      branch.indentation = indentation;\n    })\n  }\n\n  @Listen('click')\n  async onClick(event: MouseEvent) {\n    const { target } = event;\n    if (this.isBranch(target)) {\n      const { branches, selection } = this;\n      const isLeaf = await target.isLeaf();\n      if ((selection == 'leaf' && isLeaf) || selection == 'single') {\n        this.value = target.value;\n        branches.forEach(branch => branch.selected = this.value === branch.value);\n      } else if (this.selection == 'leaf') {\n        target.open = !target.open;\n      } else if (this.selection == 'multiple') {\n        target.selected = !target.selected;\n        if (isLeaf && target.selected) {\n          this.value = [...this.value, target.value]\n        } else if (isLeaf) {\n          this.value = (this.value as Array<string>).filter(v => v != target.value)\n        } else {\n          target.querySelectorAll('je-branch').forEach(branch => branch.selected = target.selected);\n        }\n        this.setParents(target);\n      }\n    }\n  }\n\n  @Listen('keyup')\n  async onKeyup(event: KeyboardEvent) {\n    const { target, key } = event;\n    if (this.isBranch(target)) {\n      const hasChildren = !(await target.isLeaf());\n      const { branches } = this;\n      if (key == 'ArrowRight' && hasChildren && !target.open) {\n        target.open = true;\n      } else if (key == 'ArrowLeft' && hasChildren && target.open) {\n        target.open = false;\n      } else if (key == 'ArrowUp') {\n        const index = branches.indexOf(target);\n        if (index > 0) {\n          branches[index - 1].focus();\n        }\n      } else if (key == 'ArrowDown') {\n        const index = branches.indexOf(target);\n        if (index < branches.length - 1) {\n          branches[index + 1].focus();\n        }\n      }\n    }\n  }\n\n  private isBranch = (target: any): target is HTMLJeBranchElement => target instanceof HTMLElement && target.tagName == 'JE-BRANCH';\n\n  private async setParents(branch: HTMLJeBranchElement) {\n    const parentBranch = branch.parentElement\n    if (this.isBranch(parentBranch)) {\n      const children = Array.from(parentBranch.querySelectorAll('je-branch'));\n      parentBranch.selected = children.every(child => child.selected) ? true : children.some(child => child.selected) ? null : false;\n      this.setParents(parentBranch);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"je-tree.entry.cjs.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,yBAAyB;;MCO9B,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAS,CAAA,SAAA,GAAmC,MAAM;AAClD,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AAyEnB,QAAA,IAAA,CAAA,QAAQ,GAAG,CAAC,MAAW,KAAoC,MAAM,YAAY,WAAW,IAAI,MAAM,CAAC,OAAO,IAAI,WAAW;AAkBlI;AAxFC,IAAA,IAAY,QAAQ,GAAA;AAClB,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;;IAG/D,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,SAAS,IAAI,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;AAAE,YAAA,IAAI,CAAC,KAAK,GAAG,EAAE;;IAGjF,mBAAmB,GAAA;QACjB,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,IAAI;AACjD,QAAA,QAAQ,CAAC,OAAO,CAAC,MAAM,IAAG;AACxB,YAAA,MAAM,CAAC,SAAS,GAAG,SAAS;AAC5B,YAAA,MAAM,CAAC,WAAW,GAAG,WAAW;AAClC,SAAC,CAAC;;IAIJ,YAAY,GAAA;QACV,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;;IAInC,MAAM,OAAO,CAAC,KAAiB,EAAA;AAC7B,QAAA,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK;AACxB,QAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;AACzB,YAAA,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI;AACpC,YAAA,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,MAAM,EAAE;AACpC,YAAA,IAAI,CAAC,SAAS,IAAI,MAAM,IAAI,MAAM,KAAK,SAAS,IAAI,QAAQ,EAAE;AAC5D,gBAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;AACzB,gBAAA,QAAQ,CAAC,OAAO,CAAC,MAAM,IAAI,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC;;AACpE,iBAAA,IAAI,IAAI,CAAC,SAAS,IAAI,MAAM,EAAE;AACnC,gBAAA,MAAM,CAAC,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI;;AACrB,iBAAA,IAAI,IAAI,CAAC,SAAS,IAAI,UAAU,EAAE;AACvC,gBAAA,MAAM,CAAC,QAAQ,GAAG,CAAC,MAAM,CAAC,QAAQ;AAClC,gBAAA,IAAI,MAAM,IAAI,MAAM,CAAC,QAAQ,EAAE;AAC7B,oBAAA,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC;;qBACrC,IAAI,MAAM,EAAE;AACjB,oBAAA,IAAI,CAAC,KAAK,GAAI,IAAI,CAAC,KAAuB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC;;qBACpE;oBACL,MAAM,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,MAAM,IAAI,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;;AAE3F,gBAAA,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;;;;IAM7B,MAAM,OAAO,CAAC,KAAoB,EAAA;AAChC,QAAA,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK;AAC7B,QAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;YACzB,MAAM,WAAW,GAAG,EAAE,MAAM,MAAM,CAAC,MAAM,EAAE,CAAC;AAC5C,YAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI;YACzB,IAAI,GAAG,IAAI,YAAY,IAAI,WAAW,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;AACtD,gBAAA,MAAM,CAAC,IAAI,GAAG,IAAI;;iBACb,IAAI,GAAG,IAAI,WAAW,IAAI,WAAW,IAAI,MAAM,CAAC,IAAI,EAAE;AAC3D,gBAAA,MAAM,CAAC,IAAI,GAAG,KAAK;;AACd,iBAAA,IAAI,GAAG,IAAI,SAAS,EAAE;gBAC3B,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC;AACtC,gBAAA,IAAI,KAAK,GAAG,CAAC,EAAE;oBACb,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE;;;AAExB,iBAAA,IAAI,GAAG,IAAI,WAAW,EAAE;gBAC7B,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC;gBACtC,IAAI,KAAK,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;oBAC/B,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE;;;;;IAQ3B,MAAM,UAAU,CAAC,MAA2B,EAAA;AAClD,QAAA,MAAM,YAAY,GAAG,MAAM,CAAC,aAAa;AACzC,QAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;AAC/B,YAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;AACvE,YAAA,YAAY,CAAC,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAI,GAAG,KAAK;AAC9H,YAAA,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC;;;IAIjC,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;","names":["h","Host"],"sources":["src/components/je-tree/je-tree.scss?tag=je-tree&encapsulation=shadow","src/components/je-tree/je-tree.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'je-tree',\n  styleUrl: 'je-tree.scss',\n  shadow: true,\n})\nexport class JeTree {\n  @Element() element: HTMLJeTreeElement;\n  @Prop({ mutable: true }) value?: string | string[];\n  @Prop() selection: 'single' | 'multiple' | 'leaf' = 'leaf';\n  @Prop() indentation = false;\n  @Event() valueChange: EventEmitter<string | string[]>;\n\n  private get branches() {\n    return Array.from(this.element.querySelectorAll('je-branch'))\n  }\n\n  componentWillLoad() {\n    if (this.selection == 'multiple' && !Array.isArray(this.value)) this.value = [];\n  }\n\n  componentWillRender() {\n    const { branches, selection, indentation } = this;\n    branches.forEach(branch => {\n      branch.selection = selection;\n      branch.indentation = indentation;\n    })\n  }\n\n  @Watch('value')\n  valueChanged() {\n    this.valueChange.emit(this.value);\n  }\n\n  @Listen('click')\n  async onClick(event: MouseEvent) {\n    const { target } = event;\n    if (this.isBranch(target)) {\n      const { branches, selection } = this;\n      const isLeaf = await target.isLeaf();\n      if ((selection == 'leaf' && isLeaf) || selection == 'single') {\n        this.value = target.value;\n        branches.forEach(branch => branch.selected = this.value === branch.value);\n      } else if (this.selection == 'leaf') {\n        target.open = !target.open;\n      } else if (this.selection == 'multiple') {\n        target.selected = !target.selected;\n        if (isLeaf && target.selected) {\n          this.value = [...this.value, target.value]\n        } else if (isLeaf) {\n          this.value = (this.value as Array<string>).filter(v => v != target.value)\n        } else {\n          target.querySelectorAll('je-branch').forEach(branch => branch.selected = target.selected);\n        }\n        this.setParents(target);\n      }\n    }\n  }\n\n  @Listen('keyup')\n  async onKeyup(event: KeyboardEvent) {\n    const { target, key } = event;\n    if (this.isBranch(target)) {\n      const hasChildren = !(await target.isLeaf());\n      const { branches } = this;\n      if (key == 'ArrowRight' && hasChildren && !target.open) {\n        target.open = true;\n      } else if (key == 'ArrowLeft' && hasChildren && target.open) {\n        target.open = false;\n      } else if (key == 'ArrowUp') {\n        const index = branches.indexOf(target);\n        if (index > 0) {\n          branches[index - 1].focus();\n        }\n      } else if (key == 'ArrowDown') {\n        const index = branches.indexOf(target);\n        if (index < branches.length - 1) {\n          branches[index + 1].focus();\n        }\n      }\n    }\n  }\n\n  private isBranch = (target: any): target is HTMLJeBranchElement => target instanceof HTMLElement && target.tagName == 'JE-BRANCH';\n\n  private async setParents(branch: HTMLJeBranchElement) {\n    const parentBranch = branch.parentElement\n    if (this.isBranch(parentBranch)) {\n      const children = Array.from(parentBranch.querySelectorAll('je-branch'));\n      parentBranch.selected = children.every(child => child.selected) ? true : children.some(child => child.selected) ? null : false;\n      this.setParents(parentBranch);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/je-tree.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"je-tree.entry.cjs.js","sources":["src/components/je-tree/je-tree.scss?tag=je-tree&encapsulation=shadow","src/components/je-tree/je-tree.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'je-tree',\n  styleUrl: 'je-tree.scss',\n  shadow: true,\n})\nexport class JeTree {\n  @Element() element: HTMLJeTreeElement;\n  @Prop({ mutable: true }) value?: string | string[];\n  @Prop() selection: 'single' | 'multiple' | 'leaf' = 'leaf';\n  @Prop() indentation = false;\n  @Event() valueChange: EventEmitter<string | string[]>;\n\n  private get branches() {\n    return Array.from(this.element.querySelectorAll('je-branch'))\n  }\n\n  componentWillLoad() {\n    if (this.selection == 'multiple' && !Array.isArray(this.value)) this.value = [];\n  }\n\n  componentWillRender() {\n    const { branches, selection, indentation } = this;\n    branches.forEach(branch => {\n      branch.selection = selection;\n      branch.indentation = indentation;\n    })\n  }\n\n  @Listen('click')\n  async onClick(event: MouseEvent) {\n    const { target } = event;\n    if (this.isBranch(target)) {\n      const { branches, selection } = this;\n      const isLeaf = await target.isLeaf();\n      if ((selection == 'leaf' && isLeaf) || selection == 'single') {\n        this.value = target.value;\n        branches.forEach(branch => branch.selected = this.value === branch.value);\n      } else if (this.selection == 'leaf') {\n        target.open = !target.open;\n      } else if (this.selection == 'multiple') {\n        target.selected = !target.selected;\n        if (isLeaf && target.selected) {\n          this.value = [...this.value, target.value]\n        } else if (isLeaf) {\n          this.value = (this.value as Array<string>).filter(v => v != target.value)\n        } else {\n          target.querySelectorAll('je-branch').forEach(branch => branch.selected = target.selected);\n        }\n        this.setParents(target);\n      }\n    }\n  }\n\n  @Listen('keyup')\n  async onKeyup(event: KeyboardEvent) {\n    const { target, key } = event;\n    if (this.isBranch(target)) {\n      const hasChildren = !(await target.isLeaf());\n      const { branches } = this;\n      if (key == 'ArrowRight' && hasChildren && !target.open) {\n        target.open = true;\n      } else if (key == 'ArrowLeft' && hasChildren && target.open) {\n        target.open = false;\n      } else if (key == 'ArrowUp') {\n        const index = branches.indexOf(target);\n        if (index > 0) {\n          branches[index - 1].focus();\n        }\n      } else if (key == 'ArrowDown') {\n        const index = branches.indexOf(target);\n        if (index < branches.length - 1) {\n          branches[index + 1].focus();\n        }\n      }\n    }\n  }\n\n  private isBranch = (target: any): target is HTMLJeBranchElement => target instanceof HTMLElement && target.tagName == 'JE-BRANCH';\n\n  private async setParents(branch: HTMLJeBranchElement) {\n    const parentBranch = branch.parentElement\n    if (this.isBranch(parentBranch)) {\n      const children = Array.from(parentBranch.querySelectorAll('je-branch'));\n      parentBranch.selected = children.every(child => child.selected) ? true : children.some(child => child.selected) ? null : false;\n      this.setParents(parentBranch);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":"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"}
+{"version":3,"file":"je-tree.entry.cjs.js","sources":["src/components/je-tree/je-tree.scss?tag=je-tree&encapsulation=shadow","src/components/je-tree/je-tree.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'je-tree',\n  styleUrl: 'je-tree.scss',\n  shadow: true,\n})\nexport class JeTree {\n  @Element() element: HTMLJeTreeElement;\n  @Prop({ mutable: true }) value?: string | string[];\n  @Prop() selection: 'single' | 'multiple' | 'leaf' = 'leaf';\n  @Prop() indentation = false;\n  @Event() valueChange: EventEmitter<string | string[]>;\n\n  private get branches() {\n    return Array.from(this.element.querySelectorAll('je-branch'))\n  }\n\n  componentWillLoad() {\n    if (this.selection == 'multiple' && !Array.isArray(this.value)) this.value = [];\n  }\n\n  componentWillRender() {\n    const { branches, selection, indentation } = this;\n    branches.forEach(branch => {\n      branch.selection = selection;\n      branch.indentation = indentation;\n    })\n  }\n\n  @Watch('value')\n  valueChanged() {\n    this.valueChange.emit(this.value);\n  }\n\n  @Listen('click')\n  async onClick(event: MouseEvent) {\n    const { target } = event;\n    if (this.isBranch(target)) {\n      const { branches, selection } = this;\n      const isLeaf = await target.isLeaf();\n      if ((selection == 'leaf' && isLeaf) || selection == 'single') {\n        this.value = target.value;\n        branches.forEach(branch => branch.selected = this.value === branch.value);\n      } else if (this.selection == 'leaf') {\n        target.open = !target.open;\n      } else if (this.selection == 'multiple') {\n        target.selected = !target.selected;\n        if (isLeaf && target.selected) {\n          this.value = [...this.value, target.value]\n        } else if (isLeaf) {\n          this.value = (this.value as Array<string>).filter(v => v != target.value)\n        } else {\n          target.querySelectorAll('je-branch').forEach(branch => branch.selected = target.selected);\n        }\n        this.setParents(target);\n      }\n    }\n  }\n\n  @Listen('keyup')\n  async onKeyup(event: KeyboardEvent) {\n    const { target, key } = event;\n    if (this.isBranch(target)) {\n      const hasChildren = !(await target.isLeaf());\n      const { branches } = this;\n      if (key == 'ArrowRight' && hasChildren && !target.open) {\n        target.open = true;\n      } else if (key == 'ArrowLeft' && hasChildren && target.open) {\n        target.open = false;\n      } else if (key == 'ArrowUp') {\n        const index = branches.indexOf(target);\n        if (index > 0) {\n          branches[index - 1].focus();\n        }\n      } else if (key == 'ArrowDown') {\n        const index = branches.indexOf(target);\n        if (index < branches.length - 1) {\n          branches[index + 1].focus();\n        }\n      }\n    }\n  }\n\n  private isBranch = (target: any): target is HTMLJeBranchElement => target instanceof HTMLElement && target.tagName == 'JE-BRANCH';\n\n  private async setParents(branch: HTMLJeBranchElement) {\n    const parentBranch = branch.parentElement\n    if (this.isBranch(parentBranch)) {\n      const children = Array.from(parentBranch.querySelectorAll('je-branch'));\n      parentBranch.selected = children.every(child => child.selected) ? true : children.some(child => child.selected) ? null : false;\n      this.setParents(parentBranch);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":"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"}

package/dist/cjs/jebamo.cjs.js

@@ -40,7 +40,7 @@ var patchCloneNodeFix = (HTMLElementPrototype) => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["je-textfield.cjs",[[81,"je-textfield",{"originalValue":[1025,"original-value"],"label":[1],"disabled":[4],"autoCapitalize":[1,"auto-capitalize"],"autoComplete":[1,"auto-complete"],"autoCorrect":[1,"auto-correct"],"autoFocus":[4,"auto-focus"],"inputMode":[1,"input-mode"],"min":[8],"max":[8],"minlength":[2],"maxlength":[2],"wrap":[1],"pattern":[1],"readonly":[4],"required":[4],"spellcheck":[4],"step":[1],"size":[1],"type":[1025],"value":[1032],"placeholder":[1],"debounce":[2],"format":[16],"validators":[16],"note":[1],"transform":[1],"multiline":[4],"pending":[4],"error":[6152],"success":[4],"touched":[32],"showPassword":[32],"getInputElement":[64],"markAsTouched":[64],"getErrors":[64],"isTouched":[64]},[[0,"keydown","handleKeyDown"],[0,"invalid","handleInvalid"]],{"value":["handleValueChange"]}]]],["je-datepicker.cjs",[[1,"je-datepicker",{"type":[1],"includeSeconds":[4,"include-seconds"],"min":[2],"max":[2],"isDateDisabled":[16,"is-date-disabled"],"value":[1026],"currentDate":[32]},null,{"value":["valueChangeHandler"]}]]],["je-details.cjs",[[1,"je-details",{"summary":[1],"open":[1540],"iconToggle":[4,"icon-toggle"],"iconSide":[1,"icon-side"]},null,{"open":["watchOpen"]}]]],["je-select.cjs",[[81,"je-select",{"value":[8],"label":[1],"disabled":[4],"required":[4],"placeholder":[1],"note":[1],"multiple":[4],"originalValue":[8,"original-value"],"options":[16],"size":[1],"open":[32],"content":[32]},[[0,"click","onClick"]]]]],["je-alert.cjs",[[1,"je-alert",{"icon":[1],"header":[1],"message":[1],"closable":[4],"color":[513],"duration":[2],"progress":[4],"open":[1028],"paused":[32],"show":[64],"hide":[64],"didDismiss":[64]},[[0,"animationend","onAnimationEnd"],[1,"mouseenter","onMouseEnter"],[1,"mouseleave","onMouseLeave"],[0,"slotchange","onSlotChange"]]]]],["je-radio-group.cjs",[[65,"je-radio-group",{"required":[4],"disabled":[4],"originalValue":[8,"original-value"],"label":[1],"note":[1],"value":[1032],"tabindex":[32]},[[0,"focus","onFocus"],[0,"focusin","onFocusIn"],[0,"focusout","onFocusOut"],[0,"click","handleNewValue"],[2,"keydown","handleKeyDown"]],{"value":["handleValueChange"]}]]],["je-branch.cjs",[[17,"je-branch",{"selection":[1],"indentation":[4],"open":[1028],"value":[1],"label":[1],"selected":[4],"isLeaf":[64]}]]],["je-checkbox.cjs",[[65,"je-checkbox",{"originalValue":[4,"original-value"],"data":[1],"value":[1028],"labelPlacement":[1,"label-placement"],"indeterminate":[4],"required":[4]},[[0,"click","onClick"],[0,"keydown","onKeyDown"]],{"value":["handleValueChange"]}]]],["je-radio.cjs",[[1,"je-radio",{"value":[8],"selected":[4]}]]],["je-accordion.cjs",[[1,"je-accordion",null,[[0,"expand","onExpand"],[0,"keydown","onKeydown"]]]]],["je-action-sheet.cjs",[[1,"je-action-sheet",{"open":[1028],"init":[16],"destroy":[16],"minPercent":[2,"min-percent"],"midPercent":[2,"mid-percent"],"maxPercent":[2,"max-percent"],"currentHeightPx":[32],"show":[64],"hide":[64]},[[0,"click","onClick"]],{"open":["onOpenChange"]}]]],["je-breadcrumb.cjs",[[1,"je-breadcrumb"]]],["je-breadcrumbs.cjs",[[1,"je-breadcrumbs",{"itemsBeforeCollapse":[2,"items-before-collapse"],"itemsAfterCollapse":[2,"items-after-collapse"],"maxItems":[2,"max-items"]}]]],["je-button-group.cjs",[[0,"je-button-group"]]],["je-calendar.cjs",[[1,"je-calendar"]]],["je-card.cjs",[[1,"je-card",{"color":[513],"button":[516]}]]],["je-column.cjs",[[1,"je-column",{"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["je-column-group.cjs",[[1,"je-column-group",{"columns":[2],"wrap":[516],"align":[513],"justify":[513],"gap":[513]}]]],["je-divider.cjs",[[1,"je-divider",{"type":[513],"spacing":[513]}]]],["je-drawer.cjs",[[1,"je-drawer",{"backdropDismiss":[4,"backdrop-dismiss"],"open":[1028],"side":[513],"init":[16],"destroy":[16],"show":[64],"hide":[64]},[[0,"click","onClick"]],{"open":["onOpenChange"]}]]],["je-dropzone.cjs",[[1,"je-dropzone",null,[[16,"themeChange","handleThemeChange"],[0,"drop","onDrop"],[0,"dragover","onDragOver"],[0,"dragleave","onDragLeave"]]]]],["je-form.cjs",[[6,"je-form",null,[[0,"submit","handleSubmit"],[0,"keydown","handleKeyup"]]]]],["je-infinite.cjs",[[1,"je-infinite",{"loading":[4],"threshold":[2],"rootMargin":[1,"root-margin"]}]]],["je-item.cjs",[[17,"je-item"]]],["je-link.cjs",[[17,"je-link",{"underline":[4],"bold":[4],"href":[1],"target":[1],"rel":[1],"download":[1]}]]],["je-menu.cjs",[[1,"je-menu"]]],["je-modal.cjs",[[1,"je-modal",{"showBackdrop":[4,"show-backdrop"],"backdropDismiss":[4,"backdrop-dismiss"],"open":[1028],"size":[513],"init":[16],"destroy":[16],"show":[64],"hide":[64],"didDismiss":[64]},[[0,"click","onClick"]],{"open":["onOpenChange"]}]]],["je-nav.cjs",[[4,"je-nav",{"mode":[513]}]]],["je-page.cjs",[[0,"je-page",{"layout":[513],"headerHeight":[32],"subTop":[32],"footerHeight":[32]}]]],["je-placeholder.cjs",[[1,"je-placeholder",{"animated":[4]}]]],["je-radio-button.cjs",[[1,"je-radio-button",{"value":[1],"selected":[4]}]]],["je-refresher.cjs",[[1,"je-refresher"]]],["je-tab.cjs",[[65,"je-tab",{"value":[1],"active":[4]}]]],["je-tabs.cjs",[[1,"je-tabs",{"mode":[513],"value":[1025]},[[0,"click","onClick"]],{"value":["handleValueChange"]}]]],["je-toast-container.cjs",[[1,"je-toast-container",{"position":[513]}]]],["je-toggle.cjs",[[65,"je-toggle",{"originalValue":[4,"original-value"],"value":[1028],"labelPlacement":[1,"label-placement"]},[[2,"click","onClick"],[2,"keydown","onKeyDown"]]]]],["je-tree.cjs",[[1,"je-tree",{"value":[1025],"selection":[1],"indentation":[4]},[[0,"click","onClick"],[0,"keyup","onKeyup"]]]]],["je-wizard.cjs",[[1,"je-wizard",{"steps":[16],"completedSteps":[32],"currentStep":[32],"next":[64],"previous":[64],"skip":[64],"reset":[64],"canSkip":[64]},null,{"completedSteps":["onCompletedStepsChange"],"currentStep":["onCurrentStepChange"]}]]],["je-option.cjs",[[1,"je-option",{"value":[8],"selected":[4],"disabled":[4]},[[2,"click","onClick"],[2,"keydown","onKeyDown"]]]]],["je-pill.cjs",[[1,"je-pill",{"outline":[516],"button":[516],"disabled":[516]}]]],["je-toolbar.cjs",[[1,"je-toolbar"]]],["je-color_2.cjs",[[1,"je-color",{"color":[513],"light":[1],"dark":[1]}],[1,"je-tooltip",{"content":[1],"offsetX":[2,"offset-x"],"offsetY":[2,"offset-y"],"open":[32]},null,{"open":["onOpenChange"]}]]],["je-popover.cjs",[[1,"je-popover",{"open":[1028],"placement":[1],"backdropDismiss":[4,"backdrop-dismiss"],"dismissOnClick":[4,"dismiss-on-click"],"positionStrategy":[1,"position-strategy"],"offsetX":[2,"offset-x"],"offsetY":[2,"offset-y"],"triggerAction":[1,"trigger-action"],"matchWidth":[4,"match-width"],"arrow":[4],"init":[16],"destroy":[16],"arrowPadding":[2,"arrow-padding"],"show":[64],"hide":[64]},[[10,"click","handleWindowClick"],[10,"contextmenu","handleWindowContextMenu"]],{"open":["handleOpenChange"]}]]],["je-label_2.cjs",[[1,"je-label",{"required":[516]}],[1,"je-note",{"invalid":[516]}]]],["je-icon.cjs",[[17,"je-icon",{"size":[1],"fill":[4],"grade":[1],"weight":[2]}]]],["je-button_3.cjs",[[1,"je-icon-button",{"disabled":[4],"type":[1],"pending":[4],"fill":[1],"size":[1],"color":[1],"icon":[1]}],[17,"je-button",{"disabled":[4],"type":[1],"expand":[4],"pending":[4],"fill":[513],"size":[513],"color":[513]},[[0,"click","handleClick"]],{"pending":["onPendingChange"]}],[1,"je-loading"]]]], options);
+  return index.bootstrapLazy([["je-textfield.cjs",[[81,"je-textfield",{"originalValue":[1025,"original-value"],"label":[1],"disabled":[4],"autoCapitalize":[1,"auto-capitalize"],"autoComplete":[1,"auto-complete"],"autoCorrect":[1,"auto-correct"],"autoFocus":[4,"auto-focus"],"inputMode":[1,"input-mode"],"min":[8],"max":[8],"minlength":[2],"maxlength":[2],"wrap":[1],"pattern":[1],"readonly":[4],"required":[4],"spellcheck":[4],"step":[1],"size":[1],"type":[1025],"value":[1032],"placeholder":[1],"debounce":[2],"format":[16],"validators":[16],"note":[1],"transform":[1],"multiline":[4],"pending":[4],"error":[6152],"success":[4],"touched":[32],"showPassword":[32],"getInputElement":[64],"markAsTouched":[64],"getErrors":[64],"isTouched":[64]},[[0,"keydown","handleKeyDown"],[0,"invalid","handleInvalid"]],{"value":["handleValueChange"]}]]],["je-datepicker.cjs",[[1,"je-datepicker",{"type":[1],"includeSeconds":[4,"include-seconds"],"min":[2],"max":[2],"isDateDisabled":[16,"is-date-disabled"],"value":[1026],"currentDate":[32]},null,{"value":["valueChangeHandler"]}]]],["je-details.cjs",[[1,"je-details",{"summary":[1],"open":[1540],"iconToggle":[4,"icon-toggle"],"iconSide":[1,"icon-side"]},null,{"open":["watchOpen"]}]]],["je-select.cjs",[[81,"je-select",{"value":[8],"label":[1],"disabled":[4],"required":[4],"placeholder":[1],"note":[1],"multiple":[4],"originalValue":[8,"original-value"],"options":[16],"size":[1],"open":[32],"content":[32]},[[0,"click","onClick"]]]]],["je-alert.cjs",[[1,"je-alert",{"icon":[1],"header":[1],"message":[1],"closable":[4],"color":[513],"duration":[2],"progress":[4],"open":[1028],"paused":[32],"show":[64],"hide":[64],"didDismiss":[64]},[[0,"animationend","onAnimationEnd"],[1,"mouseenter","onMouseEnter"],[1,"mouseleave","onMouseLeave"],[0,"slotchange","onSlotChange"]]]]],["je-radio-group.cjs",[[65,"je-radio-group",{"required":[4],"disabled":[4],"originalValue":[8,"original-value"],"label":[1],"note":[1],"value":[1032],"tabindex":[32]},[[0,"focus","onFocus"],[0,"focusin","onFocusIn"],[0,"focusout","onFocusOut"],[0,"click","handleNewValue"],[2,"keydown","handleKeyDown"]],{"value":["handleValueChange"]}]]],["je-branch.cjs",[[17,"je-branch",{"selection":[1],"indentation":[4],"open":[1028],"value":[1],"label":[1],"selected":[4],"isLeaf":[64]}]]],["je-checkbox.cjs",[[65,"je-checkbox",{"originalValue":[4,"original-value"],"data":[1],"value":[1028],"labelPlacement":[1,"label-placement"],"indeterminate":[4],"required":[4]},[[0,"click","onClick"],[0,"keydown","onKeyDown"]],{"value":["handleValueChange"]}]]],["je-radio.cjs",[[1,"je-radio",{"value":[8],"selected":[4]}]]],["je-accordion.cjs",[[1,"je-accordion",null,[[0,"expand","onExpand"],[0,"keydown","onKeydown"]]]]],["je-action-sheet.cjs",[[1,"je-action-sheet",{"open":[1028],"init":[16],"destroy":[16],"minPercent":[2,"min-percent"],"midPercent":[2,"mid-percent"],"maxPercent":[2,"max-percent"],"currentHeightPx":[32],"show":[64],"hide":[64]},[[0,"click","onClick"]],{"open":["onOpenChange"]}]]],["je-breadcrumb.cjs",[[1,"je-breadcrumb"]]],["je-breadcrumbs.cjs",[[1,"je-breadcrumbs",{"itemsBeforeCollapse":[2,"items-before-collapse"],"itemsAfterCollapse":[2,"items-after-collapse"],"maxItems":[2,"max-items"]}]]],["je-button-group.cjs",[[0,"je-button-group"]]],["je-calendar.cjs",[[1,"je-calendar"]]],["je-card.cjs",[[1,"je-card",{"color":[513],"button":[516]}]]],["je-column.cjs",[[1,"je-column",{"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["je-column-group.cjs",[[1,"je-column-group",{"columns":[2],"wrap":[516],"align":[513],"justify":[513],"gap":[513]}]]],["je-divider.cjs",[[1,"je-divider",{"type":[513],"spacing":[513]}]]],["je-drawer.cjs",[[1,"je-drawer",{"backdropDismiss":[4,"backdrop-dismiss"],"open":[1028],"side":[513],"init":[16],"destroy":[16],"show":[64],"hide":[64]},[[0,"click","onClick"]],{"open":["onOpenChange"]}]]],["je-dropzone.cjs",[[1,"je-dropzone",null,[[16,"themeChange","handleThemeChange"],[0,"drop","onDrop"],[0,"dragover","onDragOver"],[0,"dragleave","onDragLeave"]]]]],["je-form.cjs",[[6,"je-form",null,[[0,"submit","handleSubmit"],[0,"keydown","handleKeyup"]]]]],["je-infinite.cjs",[[1,"je-infinite",{"loading":[4],"threshold":[2],"rootMargin":[1,"root-margin"]}]]],["je-item.cjs",[[17,"je-item"]]],["je-link.cjs",[[17,"je-link",{"underline":[4],"bold":[4],"href":[1],"target":[1],"rel":[1],"download":[1]}]]],["je-menu.cjs",[[1,"je-menu"]]],["je-modal.cjs",[[1,"je-modal",{"showBackdrop":[4,"show-backdrop"],"backdropDismiss":[4,"backdrop-dismiss"],"open":[1028],"size":[513],"init":[16],"destroy":[16],"show":[64],"hide":[64],"didDismiss":[64]},[[0,"click","onClick"]],{"open":["onOpenChange"]}]]],["je-nav.cjs",[[4,"je-nav",{"mode":[513]}]]],["je-page.cjs",[[0,"je-page",{"layout":[513],"headerHeight":[32],"subTop":[32],"footerHeight":[32]}]]],["je-placeholder.cjs",[[1,"je-placeholder",{"animated":[4]}]]],["je-radio-button.cjs",[[1,"je-radio-button",{"value":[1],"selected":[4]}]]],["je-refresher.cjs",[[1,"je-refresher"]]],["je-tab.cjs",[[65,"je-tab",{"value":[1],"active":[4]}]]],["je-tabs.cjs",[[1,"je-tabs",{"mode":[513],"value":[1025]},[[0,"click","onClick"]],{"value":["handleValueChange"]}]]],["je-toast-container.cjs",[[1,"je-toast-container",{"position":[513]}]]],["je-toggle.cjs",[[65,"je-toggle",{"originalValue":[4,"original-value"],"value":[1028],"labelPlacement":[1,"label-placement"]},[[2,"click","onClick"],[2,"keydown","onKeyDown"]]]]],["je-tree.cjs",[[1,"je-tree",{"value":[1025],"selection":[1],"indentation":[4]},[[0,"click","onClick"],[0,"keyup","onKeyup"]],{"value":["valueChanged"]}]]],["je-wizard.cjs",[[1,"je-wizard",{"steps":[16],"completedSteps":[32],"currentStep":[32],"next":[64],"previous":[64],"skip":[64],"reset":[64],"canSkip":[64]},null,{"completedSteps":["onCompletedStepsChange"],"currentStep":["onCurrentStepChange"]}]]],["je-option.cjs",[[1,"je-option",{"value":[8],"selected":[4],"disabled":[4]},[[2,"click","onClick"],[2,"keydown","onKeyDown"]]]]],["je-pill.cjs",[[1,"je-pill",{"outline":[516],"button":[516],"disabled":[516]}]]],["je-toolbar.cjs",[[1,"je-toolbar"]]],["je-color_2.cjs",[[1,"je-color",{"color":[513],"light":[1],"dark":[1]}],[1,"je-tooltip",{"content":[1],"offsetX":[2,"offset-x"],"offsetY":[2,"offset-y"],"open":[32]},null,{"open":["onOpenChange"]}]]],["je-popover.cjs",[[1,"je-popover",{"open":[1028],"placement":[1],"backdropDismiss":[4,"backdrop-dismiss"],"dismissOnClick":[4,"dismiss-on-click"],"positionStrategy":[1,"position-strategy"],"offsetX":[2,"offset-x"],"offsetY":[2,"offset-y"],"triggerAction":[1,"trigger-action"],"matchWidth":[4,"match-width"],"arrow":[4],"init":[16],"destroy":[16],"arrowPadding":[2,"arrow-padding"],"show":[64],"hide":[64]},[[10,"click","handleWindowClick"],[10,"contextmenu","handleWindowContextMenu"]],{"open":["handleOpenChange"]}]]],["je-label_2.cjs",[[1,"je-label",{"required":[516]}],[1,"je-note",{"invalid":[516]}]]],["je-icon.cjs",[[17,"je-icon",{"size":[1],"fill":[4],"grade":[1],"weight":[2]}]]],["je-button_3.cjs",[[1,"je-icon-button",{"disabled":[4],"type":[1],"pending":[4],"fill":[1],"size":[1],"color":[1],"icon":[1]}],[17,"je-button",{"disabled":[4],"type":[1],"form":[1],"expand":[4],"pending":[4],"fill":[513],"size":[513],"color":[513]},[[0,"click","handleClick"]],{"pending":["onPendingChange"]}],[1,"je-loading"]]]], options);
 });
 
 exports.setNonce = index.setNonce;