jebamo 0.0.13 → 0.0.14

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

@@ -21,8 +21,8 @@ const JeButton = /*@__PURE__*/ proxyCustomElement(class JeButton extends H {
     }
     componentDidLoad() {
         if (this.type) {
-            let formEl = this.form ? document.getElementById(this.form) : this.el.closest('form');
-            //if (formEl.tagName === 'JE-FORM') formEl = formEl.querySelector('form')
+            const formEl = this.form ? document.getElementById(this.form) : this.el.closest('form');
+            console.log(formEl);
             if (formEl) {
                 this.formButtonEl = document.createElement('button');
                 this.formButtonEl.type = this.type;
@@ -47,7 +47,7 @@ const JeButton = /*@__PURE__*/ proxyCustomElement(class JeButton extends H {
             pending: this.pending,
             [this.color]: !!this.color
         };
-        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' }))));
+        return (h(Host, { key: 'f5e0a14366f5cfc859f7d9ad4ff5f340fe6bc7e5' }, h("button", { key: 'dd84638d95708f044ccca7917e3601ba2a939516', 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: '8999e86079957e886e45e0cc9e9410f611f0a86a', name: 'badge' }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }
@@ -88,6 +88,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { JeButton as J, defineCustomElement as d };
-//# sourceMappingURL=p-DDWeNBqe.js.map
+//# sourceMappingURL=p-D2R7Jtds.js.map
 
-//# sourceMappingURL=p-DDWeNBqe.js.map
+//# sourceMappingURL=p-D2R7Jtds.js.map

package/components/p-D2R7Jtds.js.map

@@ -0,0 +1 @@
+{"file":"p-D2R7Jtds.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,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC;AACvF,YAAA,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC;YACnB,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      const formEl = this.form ? document.getElementById(this.form) : this.el.closest('form');\n      console.log(formEl);\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/components/{p-C07q1kKX.js → p-DvT9jOjY.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h } from './p-CL0NicyQ.js';
-import { d as defineCustomElement$3 } from './p-DDWeNBqe.js';
+import { d as defineCustomElement$3 } from './p-D2R7Jtds.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-C07q1kKX.js.map
+//# sourceMappingURL=p-DvT9jOjY.js.map
 
-//# sourceMappingURL=p-C07q1kKX.js.map
+//# sourceMappingURL=p-DvT9jOjY.js.map

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

@@ -1 +1 @@
-{"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}
+{"file":"p-DvT9jOjY.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/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  /**\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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"}
+{"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      const formEl = this.form ? document.getElementById(this.form) : this.el.closest('form');\n      console.log(formEl);\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,8 +20,8 @@ const JeButton = class {
     }
     componentDidLoad() {
         if (this.type) {
-            let formEl = this.form ? document.getElementById(this.form) : this.el.closest('form');
-            //if (formEl.tagName === 'JE-FORM') formEl = formEl.querySelector('form')
+            const formEl = this.form ? document.getElementById(this.form) : this.el.closest('form');
+            console.log(formEl);
             if (formEl) {
                 this.formButtonEl = document.createElement('button');
                 this.formButtonEl.type = this.type;
@@ -46,7 +46,7 @@ const JeButton = class {
             pending: this.pending,
             [this.color]: !!this.color
         };
-        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' }))));
+        return (index.h(index.Host, { key: 'f5e0a14366f5cfc859f7d9ad4ff5f340fe6bc7e5' }, index.h("button", { key: 'dd84638d95708f044ccca7917e3601ba2a939516', 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: '8999e86079957e886e45e0cc9e9410f611f0a86a', 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  /**\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}
+{"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      const formEl = this.form ? document.getElementById(this.form) : this.el.closest('form');\n      console.log(formEl);\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-card.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-Dl5p0zF3.js');
 
-const jeCardCss = ":host{display:block;border:solid 1px var(--border-color);border-radius:var(--je-radius-sm, 0.125rem);overflow:hidden;box-sizing:border-box;position:relative;color:var(--color);background-color:var(--background);--color:inherit;--background:inherit;--hover-background:#9f9e9e0e;--active-background:#9f9e9e19;--border-color:color-mix(in srgb, var(--je-secondary, #99becb) 60%, white 40%)}:host([button]){cursor:pointer;user-select:none;-webkit-user-select:none;transition:all 125ms ease-in-out}:host([button]:hover){background-color:var(--hover-background)}:host([button]:active){background-color:var(--active-background)}:host([color=danger]){--color:var(--je-danger-100);--background:var(--je-danger-500);--hover-background:var(--je-danger-600);--active-background:var(--je-danger-700);--border-color:var(--je-danger-300)}:host([color=secondary]){--color:var(--je-secondary-100);--background:var(--je-secondary-500);--hover-background:var(--je-secondary-600);--active-background:var(--je-secondary-700);--border-color:var(--je-secondary-300)}:host([color=warning]){--color:var(--je-warning-100);--background:var(--je-warning-500);--hover-background:var(--je-warning-600);--active-background:var(--je-warning-700);--border-color:var(--je-warning-300)}:host([color=success]){--color:var(--je-success-100);--background:var(--je-success-500);--hover-background:var(--je-success-600);--active-background:var(--je-success-700);--border-color:var(--je-success-300)}::slotted([slot=media]){width:100%}::slotted([slot=header]){box-sizing:border-box;padding-inline:var(--je-spacing-xs, 0.5rem);border-bottom:solid 1px var(--border-color)}::slotted([slot=footer]){box-sizing:border-box;display:flex;padding-block:var(--je-spacing-xs, 0.5rem);gap:var(--je-spacing-2xs, 0.25rem)}.container{box-sizing:border-box;padding:var(--je-spacing-xs, 0.5rem)}";
+const jeCardCss = ":host{display:block;width:fit-content;border:solid 1px var(--border-color);border-radius:var(--je-radius-sm, 0.125rem);overflow:hidden;box-sizing:border-box;position:relative;color:var(--color);background-color:var(--background);--color:inherit;--background:inherit;--hover-background:#9f9e9e0e;--active-background:#9f9e9e19;--border-color:color-mix(in srgb, var(--je-secondary, #99becb) 60%, white 40%)}:host([button]){cursor:pointer;user-select:none;-webkit-user-select:none;transition:all 125ms ease-in-out}:host([button]:hover){background-color:var(--hover-background)}:host([button]:active){background-color:var(--active-background)}:host([color=danger]){--color:var(--je-danger-100);--background:var(--je-danger-500);--hover-background:var(--je-danger-600);--active-background:var(--je-danger-700);--border-color:var(--je-danger-300)}:host([color=secondary]){--color:var(--je-secondary-100);--background:var(--je-secondary-500);--hover-background:var(--je-secondary-600);--active-background:var(--je-secondary-700);--border-color:var(--je-secondary-300)}:host([color=warning]){--color:var(--je-warning-100);--background:var(--je-warning-500);--hover-background:var(--je-warning-600);--active-background:var(--je-warning-700);--border-color:var(--je-warning-300)}:host([color=success]){--color:var(--je-success-100);--background:var(--je-success-500);--hover-background:var(--je-success-600);--active-background:var(--je-success-700);--border-color:var(--je-success-300)}::slotted([slot=media]){width:100%}::slotted([slot=header]){box-sizing:border-box;padding-inline:var(--je-spacing-xs, 0.5rem);border-bottom:solid 1px var(--border-color)}::slotted([slot=footer]){box-sizing:border-box;display:flex;padding-block:var(--je-spacing-xs, 0.5rem);gap:var(--je-spacing-2xs, 0.25rem)}.container{box-sizing:border-box;padding:var(--je-spacing-xs, 0.5rem)}";
 
 const JeCard = class {
     constructor(hostRef) {

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

@@ -1 +1 @@
-{"file":"je-card.entry.cjs.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,8yDAA8yD;;MCQnzD,MAAM,GAAA,MAAA;;;;IAIjB,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAG,CAAA,EACrBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAG,CAAA,EACtBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACpBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACRA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/je-card/je-card.scss?tag=je-card&encapsulation=shadow","src/components/je-card/je-card.tsx"],"sourcesContent":["@use '../../styles/styles' as *;\n\n:host {\n  display: block;\n  border: solid 1px var(--border-color);\n  border-radius: radius-get(sm);\n  overflow: hidden;\n  box-sizing: border-box;\n  position: relative;\n  color: var(--color);\n  background-color: var(--background);\n\n  --color: inherit;\n  --background: inherit;\n  --hover-background: #9f9e9e0e;\n  --active-background: #9f9e9e19;\n  --border-color: #{secondary(300)};\n}\n\n:host([button]) {\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n  transition: all 125ms ease-in-out;\n}\n\n:host([button]:hover) {\n  background-color: var(--hover-background);\n}\n\n:host([button]:active) {\n  background-color: var(--active-background);\n}\n\n:host([color=danger]) {\n  --color: var(--je-danger-100);\n  --background: var(--je-danger-500);\n  --hover-background: var(--je-danger-600);\n  --active-background: var(--je-danger-700);\n  --border-color: var(--je-danger-300);\n}\n\n:host([color=secondary]) {\n  --color: var(--je-secondary-100);\n  --background: var(--je-secondary-500);\n  --hover-background: var(--je-secondary-600);\n  --active-background: var(--je-secondary-700);\n  --border-color: var(--je-secondary-300);\n}\n\n:host([color=warning]) {\n  --color: var(--je-warning-100);\n  --background: var(--je-warning-500);\n  --hover-background: var(--je-warning-600);\n  --active-background: var(--je-warning-700);\n  --border-color: var(--je-warning-300);\n}\n\n:host([color=success]) {\n  --color: var(--je-success-100);\n  --background: var(--je-success-500);\n  --hover-background: var(--je-success-600);\n  --active-background: var(--je-success-700);\n  --border-color: var(--je-success-300);\n}\n\n::slotted([slot=\"media\"]) {\n  width: 100%;\n}\n\n::slotted([slot=\"header\"]) {\n  box-sizing: border-box;\n  padding-inline: spacing-get(xs);\n  border-bottom: solid 1px var(--border-color);\n}\n\n::slotted([slot=\"footer\"]) {\n  box-sizing: border-box;\n  display: flex;\n  padding-block: spacing-get(xs);\n  gap: spacing-get(2xs);\n}\n\n.container {\n  box-sizing: border-box;\n  padding: spacing-get(xs);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { Color } from '../../utils/utils';\n\n@Component({\n  tag: 'je-card',\n  styleUrl: 'je-card.scss',\n  shadow: true,\n})\nexport class JeCard {\n  @Prop({ reflect: true }) color?: Color;\n  @Prop({ reflect: true }) button?: boolean;\n\n  render() {\n    return (\n      <Host>\n        <slot name='media' />\n        <slot name='header' />\n        <div class='container'>\n          <slot />\n          <slot name='footer' />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"je-card.entry.cjs.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,g0DAAg0D;;MCQr0D,MAAM,GAAA,MAAA;;;;IAIjB,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAG,CAAA,EACrBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAG,CAAA,EACtBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACpBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACRA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/je-card/je-card.scss?tag=je-card&encapsulation=shadow","src/components/je-card/je-card.tsx"],"sourcesContent":["@use '../../styles/styles' as *;\n\n:host {\n  display: block;\n  width: fit-content;\n  border: solid 1px var(--border-color);\n  border-radius: radius-get(sm);\n  overflow: hidden;\n  box-sizing: border-box;\n  position: relative;\n  color: var(--color);\n  background-color: var(--background);\n\n  --color: inherit;\n  --background: inherit;\n  --hover-background: #9f9e9e0e;\n  --active-background: #9f9e9e19;\n  --border-color: #{secondary(300)};\n}\n\n:host([button]) {\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n  transition: all 125ms ease-in-out;\n}\n\n:host([button]:hover) {\n  background-color: var(--hover-background);\n}\n\n:host([button]:active) {\n  background-color: var(--active-background);\n}\n\n:host([color=danger]) {\n  --color: var(--je-danger-100);\n  --background: var(--je-danger-500);\n  --hover-background: var(--je-danger-600);\n  --active-background: var(--je-danger-700);\n  --border-color: var(--je-danger-300);\n}\n\n:host([color=secondary]) {\n  --color: var(--je-secondary-100);\n  --background: var(--je-secondary-500);\n  --hover-background: var(--je-secondary-600);\n  --active-background: var(--je-secondary-700);\n  --border-color: var(--je-secondary-300);\n}\n\n:host([color=warning]) {\n  --color: var(--je-warning-100);\n  --background: var(--je-warning-500);\n  --hover-background: var(--je-warning-600);\n  --active-background: var(--je-warning-700);\n  --border-color: var(--je-warning-300);\n}\n\n:host([color=success]) {\n  --color: var(--je-success-100);\n  --background: var(--je-success-500);\n  --hover-background: var(--je-success-600);\n  --active-background: var(--je-success-700);\n  --border-color: var(--je-success-300);\n}\n\n::slotted([slot=\"media\"]) {\n  width: 100%;\n}\n\n::slotted([slot=\"header\"]) {\n  box-sizing: border-box;\n  padding-inline: spacing-get(xs);\n  border-bottom: solid 1px var(--border-color);\n}\n\n::slotted([slot=\"footer\"]) {\n  box-sizing: border-box;\n  display: flex;\n  padding-block: spacing-get(xs);\n  gap: spacing-get(2xs);\n}\n\n.container {\n  box-sizing: border-box;\n  padding: spacing-get(xs);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { Color } from '../../utils/utils';\n\n@Component({\n  tag: 'je-card',\n  styleUrl: 'je-card.scss',\n  shadow: true,\n})\nexport class JeCard {\n  @Prop({ reflect: true }) color?: Color;\n  @Prop({ reflect: true }) button?: boolean;\n\n  render() {\n    return (\n      <Host>\n        <slot name='media' />\n        <slot name='header' />\n        <div class='container'>\n          <slot />\n          <slot name='footer' />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +1 @@
-{"version":3,"file":"je-card.entry.cjs.js","sources":["src/components/je-card/je-card.scss?tag=je-card&encapsulation=shadow","src/components/je-card/je-card.tsx"],"sourcesContent":["@use '../../styles/styles' as *;\n\n:host {\n  display: block;\n  border: solid 1px var(--border-color);\n  border-radius: radius-get(sm);\n  overflow: hidden;\n  box-sizing: border-box;\n  position: relative;\n  color: var(--color);\n  background-color: var(--background);\n\n  --color: inherit;\n  --background: inherit;\n  --hover-background: #9f9e9e0e;\n  --active-background: #9f9e9e19;\n  --border-color: #{secondary(300)};\n}\n\n:host([button]) {\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n  transition: all 125ms ease-in-out;\n}\n\n:host([button]:hover) {\n  background-color: var(--hover-background);\n}\n\n:host([button]:active) {\n  background-color: var(--active-background);\n}\n\n:host([color=danger]) {\n  --color: var(--je-danger-100);\n  --background: var(--je-danger-500);\n  --hover-background: var(--je-danger-600);\n  --active-background: var(--je-danger-700);\n  --border-color: var(--je-danger-300);\n}\n\n:host([color=secondary]) {\n  --color: var(--je-secondary-100);\n  --background: var(--je-secondary-500);\n  --hover-background: var(--je-secondary-600);\n  --active-background: var(--je-secondary-700);\n  --border-color: var(--je-secondary-300);\n}\n\n:host([color=warning]) {\n  --color: var(--je-warning-100);\n  --background: var(--je-warning-500);\n  --hover-background: var(--je-warning-600);\n  --active-background: var(--je-warning-700);\n  --border-color: var(--je-warning-300);\n}\n\n:host([color=success]) {\n  --color: var(--je-success-100);\n  --background: var(--je-success-500);\n  --hover-background: var(--je-success-600);\n  --active-background: var(--je-success-700);\n  --border-color: var(--je-success-300);\n}\n\n::slotted([slot=\"media\"]) {\n  width: 100%;\n}\n\n::slotted([slot=\"header\"]) {\n  box-sizing: border-box;\n  padding-inline: spacing-get(xs);\n  border-bottom: solid 1px var(--border-color);\n}\n\n::slotted([slot=\"footer\"]) {\n  box-sizing: border-box;\n  display: flex;\n  padding-block: spacing-get(xs);\n  gap: spacing-get(2xs);\n}\n\n.container {\n  box-sizing: border-box;\n  padding: spacing-get(xs);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { Color } from '../../utils/utils';\n\n@Component({\n  tag: 'je-card',\n  styleUrl: 'je-card.scss',\n  shadow: true,\n})\nexport class JeCard {\n  @Prop({ reflect: true }) color?: Color;\n  @Prop({ reflect: true }) button?: boolean;\n\n  render() {\n    return (\n      <Host>\n        <slot name='media' />\n        <slot name='header' />\n        <div class='container'>\n          <slot />\n          <slot name='footer' />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,8yDAA8yD;;MCQnzD,MAAM,GAAA,MAAA;;;;IAIjB,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAG,CAAA,EACrBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAG,CAAA,EACtBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACpBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACRA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD;;;;;;;"}
+{"version":3,"file":"je-card.entry.cjs.js","sources":["src/components/je-card/je-card.scss?tag=je-card&encapsulation=shadow","src/components/je-card/je-card.tsx"],"sourcesContent":["@use '../../styles/styles' as *;\n\n:host {\n  display: block;\n  width: fit-content;\n  border: solid 1px var(--border-color);\n  border-radius: radius-get(sm);\n  overflow: hidden;\n  box-sizing: border-box;\n  position: relative;\n  color: var(--color);\n  background-color: var(--background);\n\n  --color: inherit;\n  --background: inherit;\n  --hover-background: #9f9e9e0e;\n  --active-background: #9f9e9e19;\n  --border-color: #{secondary(300)};\n}\n\n:host([button]) {\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n  transition: all 125ms ease-in-out;\n}\n\n:host([button]:hover) {\n  background-color: var(--hover-background);\n}\n\n:host([button]:active) {\n  background-color: var(--active-background);\n}\n\n:host([color=danger]) {\n  --color: var(--je-danger-100);\n  --background: var(--je-danger-500);\n  --hover-background: var(--je-danger-600);\n  --active-background: var(--je-danger-700);\n  --border-color: var(--je-danger-300);\n}\n\n:host([color=secondary]) {\n  --color: var(--je-secondary-100);\n  --background: var(--je-secondary-500);\n  --hover-background: var(--je-secondary-600);\n  --active-background: var(--je-secondary-700);\n  --border-color: var(--je-secondary-300);\n}\n\n:host([color=warning]) {\n  --color: var(--je-warning-100);\n  --background: var(--je-warning-500);\n  --hover-background: var(--je-warning-600);\n  --active-background: var(--je-warning-700);\n  --border-color: var(--je-warning-300);\n}\n\n:host([color=success]) {\n  --color: var(--je-success-100);\n  --background: var(--je-success-500);\n  --hover-background: var(--je-success-600);\n  --active-background: var(--je-success-700);\n  --border-color: var(--je-success-300);\n}\n\n::slotted([slot=\"media\"]) {\n  width: 100%;\n}\n\n::slotted([slot=\"header\"]) {\n  box-sizing: border-box;\n  padding-inline: spacing-get(xs);\n  border-bottom: solid 1px var(--border-color);\n}\n\n::slotted([slot=\"footer\"]) {\n  box-sizing: border-box;\n  display: flex;\n  padding-block: spacing-get(xs);\n  gap: spacing-get(2xs);\n}\n\n.container {\n  box-sizing: border-box;\n  padding: spacing-get(xs);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { Color } from '../../utils/utils';\n\n@Component({\n  tag: 'je-card',\n  styleUrl: 'je-card.scss',\n  shadow: true,\n})\nexport class JeCard {\n  @Prop({ reflect: true }) color?: Color;\n  @Prop({ reflect: true }) button?: boolean;\n\n  render() {\n    return (\n      <Host>\n        <slot name='media' />\n        <slot name='header' />\n        <div class='container'>\n          <slot />\n          <slot name='footer' />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,g0DAAg0D;;MCQr0D,MAAM,GAAA,MAAA;;;;IAIjB,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAG,CAAA,EACrBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAG,CAAA,EACtBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACpBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACRA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD;;;;;;;"}

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

@@ -3,7 +3,7 @@
 var index = require('./index-Dl5p0zF3.js');
 var index$1 = require('./index-oP7sywWN.js');
 
-const jeDatepickerCss = ":host{display:flex;padding:var(--je-spacing-xs, 0.5rem);box-sizing:border-box;flex-direction:column;align-items:center;justify-content:center;gap:var(--je-spacing-sm, 0.75rem)}je-button.day{--height:var(--je-spacing-xl, 1.5rem);--padding-inline:0px}je-button.day::part(inner-button){width:var(--je-spacing-xl, 1.5rem);font-weight:400}.header{width:100%;min-width:200px;max-width:300px;display:flex;align-items:center;justify-content:space-between}.header span{flex:1;text-align:center}.weekdays-grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:var(--je-spacing-2xs, 0.25rem)}.weekdays-grid div{height:var(--je-spacing-xl, 1.5rem);width:var(--je-spacing-xl, 1.5rem);font-size:var(--je-font-md, 1rem);font-weight:400;color:color-mix(in srgb, var(--je-secondary, #99becb) 80%, black 20%);text-align:center;align-content:center}.days-grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:var(--je-spacing-2xs, 0.25rem)}.timepicker{display:flex;justify-content:space-between;align-items:center;width:100%;min-width:200px;max-width:300px}.timepicker-content{display:flex}.timepicker-column{display:flex;flex-direction:column;gap:var(--je-spacing-2xs, 0.25rem);height:200px;overflow:auto;align-items:center;padding:var(--je-spacing-xs, 0.5rem);box-sizing:border-box}";
+const jeDatepickerCss = ":host{display:flex;padding:var(--je-spacing-xs, 0.5rem);box-sizing:border-box;flex-direction:column;align-items:center;justify-content:center;gap:var(--je-spacing-sm, 0.75rem)}je-button.day{--height:var(--je-spacing-2xl, 2rem);--padding-inline:0px}je-button.day::part(inner-button){width:var(--je-spacing-2xl, 2rem);font-weight:400}.header{width:100%;min-width:200px;max-width:300px;display:flex;align-items:center;justify-content:space-between}.header span{flex:1;text-align:center}.weekdays-grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:var(--je-spacing-2xs, 0.25rem)}.weekdays-grid div{height:var(--je-spacing-2xl, 2rem);width:var(--je-spacing-2xl, 2rem);font-size:var(--je-font-md, 1rem);font-weight:400;color:color-mix(in srgb, var(--je-secondary, #99becb) 80%, black 20%);text-align:center;align-content:center}.days-grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:var(--je-spacing-2xs, 0.25rem)}.timepicker{display:flex;justify-content:space-between;align-items:center;width:100%;min-width:200px;max-width:300px}.timepicker-content{display:flex}.timepicker-column{display:flex;flex-direction:column;gap:var(--je-spacing-2xs, 0.25rem);height:200px;overflow:auto;align-items:center;padding:var(--je-spacing-xs, 0.5rem);box-sizing:border-box}";
 
 const daysOfWeek = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
 const JeDatepicker = class {
@@ -25,26 +25,23 @@ const JeDatepicker = class {
         this.prevYear = () => {
             this.currentDate = index$1.dateFnsExports.subMonths(this.currentDate, 12);
         };
-        this.setDay = (day) => {
-            this.value = index$1.dateFnsExports.set(this.value, {
-                year: day.getFullYear(),
-                month: day.getMonth(),
-                date: day.getDate()
-            }).getTime();
-        };
-        this.setHour = (hour) => {
-            this.value = index$1.dateFnsExports.setHours(this.value, hour).getTime();
-        };
-        this.setMinute = (minute) => {
-            this.value = index$1.dateFnsExports.setMinutes(this.value, minute).getTime();
-        };
-        this.setSecond = (second) => {
-            this.value = index$1.dateFnsExports.setSeconds(this.value, second).getTime();
+        this.setValue = (opts) => {
+            var _a, _b, _c, _d;
+            const newValue = index$1.dateFnsExports.set((_a = this.value) !== null && _a !== void 0 ? _a : new Date(), {
+                year: (_b = opts.day) === null || _b === void 0 ? void 0 : _b.getFullYear(),
+                month: (_c = opts.day) === null || _c === void 0 ? void 0 : _c.getMonth(),
+                date: (_d = opts.day) === null || _d === void 0 ? void 0 : _d.getDate(),
+                hours: opts.hour,
+                minutes: opts.minute,
+                seconds: opts.second
+            });
+            this.value = newValue.getTime();
+            this.valueChange.emit(this.value);
         };
         this.scrollTimeIntoView = () => {
             this.el.shadowRoot.querySelectorAll('.timepicker-column').forEach(column => {
-                var _a;
-                (_a = column.querySelector('je-button[color="primary"][fill="solid"]')) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'center', behavior: 'smooth' });
+                var _a, _b;
+                (_b = (_a = column.querySelector('je-button[color="primary"][fill="solid"]')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('button')) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ block: 'center', behavior: 'instant' });
             });
         };
     }
@@ -57,7 +54,6 @@ const JeDatepicker = class {
         if (this.value) {
             this.currentDate = new Date(this.value);
         }
-        this.valueChange.emit(this.value ? new Date(this.value).getTime() : undefined);
     }
     render() {
         const firstDayOfMonth = index$1.dateFnsExports.startOfMonth(this.currentDate);
@@ -69,12 +65,12 @@ const JeDatepicker = class {
         const daysBefore = Array.from({ length: firstDayOfWeek }).map((_, i) => index$1.dateFnsExports.subMonths(this.currentDate, 1).setDate(prevMonthEnd.getDate() - (firstDayOfWeek - i - 1)));
         const lastDayOfWeek = index$1.dateFnsExports.getDay(lastDayOfMonth);
         const daysAfter = Array.from({ length: 6 - lastDayOfWeek }).map((_, i) => index$1.dateFnsExports.addMonths(this.currentDate, 1).setDate(i + 1));
-        return (index.h(index.Host, { key: 'b98a066fbe52dbdfd1cbdceaa2f0dee60b33cc23' }, (this.type == 'date' || this.type == 'datetime') && (index.h(index.Fragment, { key: '7d0b6573e3e5093da30d34c1477e2e83ca826a82' }, index.h("div", { key: '0011cf847d1211351d4d11b387fa5d3af5505c35', class: "header" }, index.h("je-icon-button", { key: 'b95ca07bdd17ea031822ce26be1d757cbf36904b', icon: 'keyboard_double_arrow_left', onClick: this.prevYear }), index.h("je-icon-button", { key: '6c29c5a3387fcb722847fe1323f31e28bc407450', icon: 'keyboard_arrow_left', onClick: this.prevMonth }), index.h("span", { key: 'bc2f58d9906e06d025a7b57ad3cd2d401a2bca68' }, index$1.dateFnsExports.format(this.currentDate, 'MMMM yyyy')), index.h("je-icon-button", { key: '3f8ddca9bf1b02a4967350625aa1f2ddaa44b816', icon: 'keyboard_arrow_right', onClick: this.nextMonth }), index.h("je-icon-button", { key: '773923004e744dfbd3e789e205a89b07b6a2d5e5', icon: 'keyboard_double_arrow_right', onClick: this.nextYear })), index.h("div", { key: '5f7d1d002add648381ab42fd0bfb782c24f7bb02', class: "weekdays-grid" }, daysOfWeek.map(day => index.h("div", null, day))), index.h("div", { key: '8f3cd3f021d9a0945bd90c3e196096bd62d78558', class: "days-grid" }, daysBefore.map(day => (index.h("je-button", { expand: true, disabled: true, color: 'secondary', fill: 'clear', class: 'day' }, index$1.dateFnsExports.format(day, 'd')))), daysInMonth.map(day => {
+        return (index.h(index.Host, { key: '001acd2a99d94de7f0e33fd6453d7c4f5c9779da' }, (this.type == 'date' || this.type == 'datetime') && (index.h(index.Fragment, { key: 'c30cbabed1c5e0c25383e5ed8965a93155f39eb8' }, index.h("div", { key: 'bf665a24f3756940db6823e0d54c1db147374e71', class: "header" }, index.h("je-icon-button", { key: '535074bbfe25a0af354569f6628f45294cda650d', icon: 'keyboard_double_arrow_left', onClick: this.prevYear }), index.h("je-icon-button", { key: 'a284b3c39e1fe1f1beb444d0f91e04510c978194', icon: 'keyboard_arrow_left', onClick: this.prevMonth }), index.h("span", { key: '30c22009f6114f781654626cf1889a2c7f84b6ac' }, index$1.dateFnsExports.format(this.currentDate, 'MMMM yyyy')), index.h("je-icon-button", { key: '6bf8cc4cd9482203c927f68efdf735644f783bc7', icon: 'keyboard_arrow_right', onClick: this.nextMonth }), index.h("je-icon-button", { key: 'c7895236c227bed7709d863518d7867112fa9c12', icon: 'keyboard_double_arrow_right', onClick: this.nextYear })), index.h("div", { key: '39f1be73032a4d63958751a8ea3e66706d0413d2', class: "weekdays-grid" }, daysOfWeek.map(day => index.h("div", null, day))), index.h("div", { key: '2a38bbb66188746c867ce37dce552869793c19c8', class: "days-grid" }, daysBefore.map(day => (index.h("je-button", { expand: true, disabled: true, color: 'secondary', fill: 'clear', class: 'day' }, index$1.dateFnsExports.format(day, 'd')))), daysInMonth.map(day => {
             const selected = this.value && index$1.dateFnsExports.isSameDay(day, this.value);
             const today = index$1.dateFnsExports.isToday(day);
             const isDisabled = (this.isDateDisabled && this.isDateDisabled(day)) || (this.min && day < new Date(this.min)) || (this.max && day > new Date(this.max));
-            return (index.h("je-button", { expand: true, disabled: isDisabled, color: selected || today ? 'primary' : isDisabled ? 'secondary' : undefined, fill: selected ? 'solid' : 'clear', class: 'day', onClick: () => this.setDay(day) }, index$1.dateFnsExports.format(day, 'd')));
-        }), daysAfter.map(day => (index.h("je-button", { expand: true, disabled: true, color: 'secondary', fill: 'clear', class: 'day' }, index$1.dateFnsExports.format(day, 'd'))))))), (this.type == 'time' || this.type == 'datetime') && (index.h("div", { key: 'f50f591eeb16d5a8732e9b30a42eba673f32384d', class: 'timepicker' }, index.h("span", { key: '6927deea9958b340cca4cd7637ca2603c6edc63c' }, "Time"), index.h("je-popover", { key: '12138f92fcef7386ea1ab7288ba25fa7af2c6796', arrow: true, onPresent: this.scrollTimeIntoView }, index.h("je-pill", { key: 'a905c257376113e808b35616c94e5cf2b413270d', slot: 'trigger' }, this.value ? (this.includeSeconds ? index$1.dateFnsExports.format(this.value, 'hh:mm:ss a') : index$1.dateFnsExports.format(this.value, 'hh:mm a')) : '-'), index.h("div", { key: '2af6bb66e76ec0858cbfa92694648bede547dbf0', class: 'timepicker-content' }, index.h("div", { key: '57ec7f9421eefe59194357a6ab6813f889a52a3f', class: 'timepicker-column' }, Array.from({ length: 24 }).map((_, hour) => (index.h("je-button", { size: 'sm', color: this.currentDate.getHours() === hour ? 'primary' : undefined, fill: this.currentDate.getHours() === hour ? 'solid' : 'clear', onClick: () => this.setHour(hour) }, index$1.dateFnsExports.format(new Date().setHours(hour), 'hh a'))))), index.h("div", { key: '14daad853052b211b6a491a00b0e43a492129502', class: 'timepicker-column' }, Array.from({ length: 60 }).map((_, minute) => (index.h("je-button", { size: 'sm', color: this.currentDate.getMinutes() === minute ? 'primary' : undefined, fill: this.currentDate.getMinutes() === minute ? 'solid' : 'clear', onClick: () => this.setMinute(minute) }, index$1.dateFnsExports.format(new Date().setMinutes(minute), 'mm'))))), this.includeSeconds && (index.h("div", { key: '2f892c17024c84abdd0c9e94f839943738696248', class: 'timepicker-column' }, Array.from({ length: 60 }).map((_, second) => (index.h("je-button", { size: 'sm', color: this.currentDate.getSeconds() === second ? 'primary' : undefined, fill: this.currentDate.getSeconds() === second ? 'solid' : 'clear', onClick: () => this.setSecond(second) }, index$1.dateFnsExports.format(new Date().setSeconds(second), 'ss'))))))))))));
+            return (index.h("je-button", { expand: true, disabled: isDisabled, color: selected || today ? 'primary' : isDisabled ? 'secondary' : undefined, fill: selected ? 'solid' : 'clear', class: 'day', onClick: () => this.setValue({ day }) }, index$1.dateFnsExports.format(day, 'd')));
+        }), daysAfter.map(day => (index.h("je-button", { expand: true, disabled: true, color: 'secondary', fill: 'clear', class: 'day' }, index$1.dateFnsExports.format(day, 'd'))))))), (this.type == 'time' || this.type == 'datetime') && (index.h("div", { key: 'ccfdb4a84c2738633e12715ad549f5816fdeae54', class: 'timepicker' }, index.h("span", { key: 'bc4dfa532659ed667f470f22e8c2a9c90a4657cf' }, "Time"), index.h("je-popover", { key: '835045046be299fb244ba91982443eeb4bc7a669', arrow: true, onPresent: this.scrollTimeIntoView }, index.h("je-pill", { key: 'fa9f3cb90597b04b44563dc77493652a9d0d8d9e', role: 'button', tabindex: 0, slot: 'trigger' }, this.value ? (this.includeSeconds ? index$1.dateFnsExports.format(this.value, 'hh:mm:ss a') : index$1.dateFnsExports.format(this.value, 'hh:mm a')) : '-'), index.h("div", { key: '8385bf430461cde71f485cee75018f6cf94351b4', class: 'timepicker-content' }, index.h("div", { key: 'c4cb33fd35308410c9b00151d8d8b715bc7d1202', class: 'timepicker-column' }, Array.from({ length: 24 }).map((_, hour) => (index.h("je-button", { size: 'sm', color: this.currentDate.getHours() === hour ? 'primary' : undefined, fill: this.currentDate.getHours() === hour ? 'solid' : 'clear', onClick: () => this.setValue({ hour }) }, index$1.dateFnsExports.format(new Date().setHours(hour), 'hh a'))))), index.h("div", { key: 'a954cbd332a79376ff5be0eb151f49d91ed5d3b1', class: 'timepicker-column' }, Array.from({ length: 60 }).map((_, minute) => (index.h("je-button", { size: 'sm', color: this.currentDate.getMinutes() === minute ? 'primary' : undefined, fill: this.currentDate.getMinutes() === minute ? 'solid' : 'clear', onClick: () => this.setValue({ minute }) }, index$1.dateFnsExports.format(new Date().setMinutes(minute), 'mm'))))), this.includeSeconds && (index.h("div", { key: '1919fa66ede1f38866550d5b376a27d7d040a56a', class: 'timepicker-column' }, Array.from({ length: 60 }).map((_, second) => (index.h("je-button", { size: 'sm', color: this.currentDate.getSeconds() === second ? 'primary' : undefined, fill: this.currentDate.getSeconds() === second ? 'solid' : 'clear', onClick: () => this.setValue({ second }) }, index$1.dateFnsExports.format(new Date().setSeconds(second), 'ss'))))))))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1 +1 @@
-{"file":"je-datepicker.entry.cjs.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,4vCAA4vC;;ACGpxC,MAAM,UAAU,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAU;MAOlD,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAOW,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,IAAI,EAAE;AACzB,QAAA,IAAI,CAAA,IAAA,GAAiC,UAAU;AAC/C,QAAA,IAAc,CAAA,cAAA,GAAG,KAAK;AAqB9B,QAAA,IAAS,CAAA,SAAA,GAAG,MAAK;YACf,IAAI,CAAC,WAAW,GAAGA,gCAAS,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;AACnD,SAAC;AAED,QAAA,IAAS,CAAA,SAAA,GAAG,MAAK;YACf,IAAI,CAAC,WAAW,GAAGC,gCAAS,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;AACnD,SAAC;AAED,QAAA,IAAQ,CAAA,QAAA,GAAG,MAAK;YACd,IAAI,CAAC,WAAW,GAAGD,gCAAS,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;AACpD,SAAC;AAED,QAAA,IAAQ,CAAA,QAAA,GAAG,MAAK;YACd,IAAI,CAAC,WAAW,GAAGC,gCAAS,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;AACpD,SAAC;AAED,QAAA,IAAA,CAAA,MAAM,GAAG,CAAC,GAAS,KAAI;YACrB,IAAI,CAAC,KAAK,GAAGC,0BAAG,CAAC,IAAI,CAAC,KAAK,EAAE;AAC3B,gBAAA,IAAI,EAAE,GAAG,CAAC,WAAW,EAAE;AACvB,gBAAA,KAAK,EAAE,GAAG,CAAC,QAAQ,EAAE;AACrB,gBAAA,IAAI,EAAE,GAAG,CAAC,OAAO;aAClB,CAAC,CAAC,OAAO,EAAE;AACd,SAAC;AAED,QAAA,IAAA,CAAA,OAAO,GAAG,CAAC,IAAY,KAAI;AACzB,YAAA,IAAI,CAAC,KAAK,GAAGC,+BAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,OAAO,EAAE;AACnD,SAAC;AAED,QAAA,IAAA,CAAA,SAAS,GAAG,CAAC,MAAc,KAAI;AAC7B,YAAA,IAAI,CAAC,KAAK,GAAGC,iCAAU,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,OAAO,EAAE;AACvD,SAAC;AAED,QAAA,IAAA,CAAA,SAAS,GAAG,CAAC,MAAc,KAAI;AAC7B,YAAA,IAAI,CAAC,KAAK,GAAGC,iCAAU,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,OAAO,EAAE;AACvD,SAAC;AAED,QAAA,IAAkB,CAAA,kBAAA,GAAG,MAAK;AACxB,YAAA,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,OAAO,CAAC,MAAM,IAAG;;AACzE,gBAAA,CAAA,EAAA,GAAA,MAAM,CAAC,aAAa,CAAC,0CAA0C,CAAC,0CAAE,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAC,CAAC;AAC1H,aAAC,CAAC;AACJ,SAAC;AA4HF;IAlLC,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,WAAW,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;;;IAK3C,kBAAkB,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,WAAW,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;;QAEzC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,EAAE,GAAG,SAAS,CAAC;;IA6ChF,MAAM,GAAA;QACJ,MAAM,eAAe,GAAGC,mCAAY,CAAC,IAAI,CAAC,WAAW,CAAC;QACtD,MAAM,cAAc,GAAGC,iCAAU,CAAC,IAAI,CAAC,WAAW,CAAC;AACnD,QAAA,MAAM,WAAW,GAAGC,wCAAiB,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,GAAG,EAAE,cAAc,EAAE,CAAC;QAEtF,MAAM,SAAS,GAAGP,gCAAS,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;AAChD,QAAA,MAAM,YAAY,GAAGM,iCAAU,CAAC,SAAS,CAAC;AAE1C,QAAA,MAAM,cAAc,GAAGE,6BAAM,CAAC,eAAe,CAAC;QAC9C,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KACjER,gCAAS,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,cAAc,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAC1F;AAED,QAAA,MAAM,aAAa,GAAGQ,6BAAM,CAAC,cAAc,CAAC;AAC5C,QAAA,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,GAAG,aAAa,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KACnET,gCAAS,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAC9C;AAED,QAAA,QACEU,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,CAAC,IAAI,CAAC,IAAI,IAAI,MAAM,IAAI,IAAI,CAAC,IAAI,IAAI,UAAU,MAC9CD,QAACE,cAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACPF,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjBA,OAAgB,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,4BAA4B,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAC5EA,OAAgB,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,SAAS,EAAI,CAAA,EACtEA,OAAO,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAAG,6BAAM,CAAC,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,CAAQ,EACpDH,OAAgB,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,sBAAsB,EAAC,OAAO,EAAE,IAAI,CAAC,SAAS,EAAI,CAAA,EACvEA,OAAgB,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,6BAA6B,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,CACzE,EAENA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EACvB,EAAA,UAAU,CAAC,GAAG,CAAC,GAAG,IAAIA,OAAA,CAAA,KAAA,EAAA,IAAA,EAAM,GAAG,CAAO,CAAC,CACpC,EAENA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACnB,UAAU,CAAC,GAAG,CAAC,GAAG,KACjBA,OAAW,CAAA,WAAA,EAAA,EAAA,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,KAAK,EAChF,EAAAG,6BAAM,CAAC,GAAG,EAAE,GAAG,CAAC,CACP,CACb,CAAC,EAED,WAAW,CAAC,GAAG,CAAC,GAAG,IAAG;AACrB,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,IAAIC,gCAAS,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC;AACzD,YAAA,MAAM,KAAK,GAAGC,8BAAO,CAAC,GAAG,CAAC;YAC1B,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,GAAG,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,GAAG,IAAI,GAAG,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACxJ,YAAA,QACEL,OAAA,CAAA,WAAA,EAAA,EACE,MAAM,EAAE,IAAI,EACZ,QAAQ,EAAE,UAAU,EACpB,KAAK,EAAE,QAAQ,IAAI,KAAK,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,SAAS,EAC3E,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,OAAO,EAClC,KAAK,EAAC,KAAK,EACX,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAE9B,EAAAG,6BAAM,CAAC,GAAG,EAAE,GAAG,CAAC,CACP;AAEhB,SAAC,CAAC,EAED,SAAS,CAAC,GAAG,CAAC,GAAG,KAChBH,OAAA,CAAA,WAAA,EAAA,EAAW,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,KAAK,IAChFG,6BAAM,CAAC,GAAG,EAAE,GAAG,CAAC,CACP,CACb,CAAC,CACE,CACG,CACZ,EACA,CAAC,IAAI,CAAC,IAAI,IAAI,MAAM,IAAI,IAAI,CAAC,IAAI,IAAI,UAAU,MAC9CH,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrBA,OAAiB,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,MAAA,CAAA,EACjBA,OAAY,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAA,EACzDA,OAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,SAAS,IACpB,IAAI,CAAC,KAAK,IACT,IAAI,CAAC,cAAc,GAAGG,6BAAM,CAAC,IAAI,CAAC,KAAK,EAAE,YAAY,CAAC,GAAGA,6BAAM,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,IACpF,GAAG,CACC,EACVH,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC3B,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,MACtCA,OAAA,CAAA,WAAA,EAAA,EACE,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,KAAK,IAAI,GAAG,SAAS,GAAG,SAAS,EACnE,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,KAAK,IAAI,GAAG,OAAO,GAAG,OAAO,EAC9D,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAEhCG,6BAAM,CAAC,IAAI,IAAI,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAChC,CACb,CAAC,CACE,EACNH,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC3B,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,MAAM,MACxCA,OAAA,CAAA,WAAA,EAAA,EACE,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,KAAK,MAAM,GAAG,SAAS,GAAG,SAAS,EACvE,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,KAAK,MAAM,GAAG,OAAO,GAAG,OAAO,EAClE,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAEpCG,6BAAM,CAAC,IAAI,IAAI,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAClC,CACb,CAAC,CACE,EACL,IAAI,CAAC,cAAc,KAClBH,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,mBAAmB,EAC3B,EAAA,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,MAAM,MACxCA,OAAA,CAAA,WAAA,EAAA,EACE,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,KAAK,MAAM,GAAG,SAAS,GAAG,SAAS,EACvE,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,KAAK,MAAM,GAAG,OAAO,GAAG,OAAO,EAClE,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EAAA,EAEpCG,6BAAM,CAAC,IAAI,IAAI,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAClC,CACb,CAAC,CACE,CACP,CACG,CACK,CACT,CACP,CACI;;;;;;;;;;;","names":["addMonths","subMonths","set","setHours","setMinutes","setSeconds","startOfMonth","endOfMonth","eachDayOfInterval","getDay","h","Host","Fragment","format","isSameDay","isToday"],"sources":["src/components/je-datepicker/je-datepicker.scss?tag=je-datepicker&encapsulation=shadow","src/components/je-datepicker/je-datepicker.tsx"],"sourcesContent":["@use '../../styles/styles' as *;\n\n:host {\n  display: flex;\n  padding: spacing-get(xs);\n  box-sizing: border-box;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: spacing-get(sm);\n}\n\nje-button.day {\n  --height: #{spacing-get(xl)};\n  --padding-inline: 0px;\n\n  &::part(inner-button) {\n    width: spacing-get(xl);\n    font-weight: 400;\n  }\n}\n\n.header {\n  width: 100%;\n  min-width: 200px;\n  max-width: 300px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  span {\n    flex: 1;\n    text-align: center;\n  }\n}\n\n.weekdays-grid {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: spacing-get(2xs);\n\n  div {\n    height: spacing-get(xl);\n    width: spacing-get(xl);\n    font-size: font-size(md);\n    font-weight: 400;\n    color: secondary(600);\n    text-align: center;\n    align-content: center;\n  }\n}\n\n.days-grid {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: spacing-get(2xs);\n}\n\n.timepicker {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  min-width: 200px;\n  max-width: 300px;\n}\n\n.timepicker-content {\n  display: flex;\n}\n\n.timepicker-column {\n  display: flex;\n  flex-direction: column;\n  gap: spacing-get(2xs);\n  height: 200px;\n  overflow: auto;\n  align-items: center;\n  padding: spacing-get(xs);\n  box-sizing: border-box;\n}\n","import { Component, Element, Event, EventEmitter, Fragment, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { startOfMonth, endOfMonth, eachDayOfInterval, addMonths, subMonths, isSameDay, isToday, format, getDay, set, setHours, setMinutes, setSeconds } from 'date-fns';\n\nconst daysOfWeek = ['S', 'M', 'T', 'W', 'T', 'F', 'S'] as const;\n\n@Component({\n  tag: 'je-datepicker',\n  styleUrl: 'je-datepicker.scss',\n  shadow: true,\n})\nexport class JeDatepicker {\n  @Element() el!: HTMLJeDatepickerElement;\n  @State() currentDate = new Date();\n  @Prop() type: 'date' | 'datetime' | 'time' = 'datetime';\n  @Prop() includeSeconds = false;\n  @Prop() min?: number;\n  @Prop() max?: number;\n  @Prop() isDateDisabled?: (date: Date) => boolean;\n  @Prop({ mutable: true }) value?: number;\n  @Event() valueChange: EventEmitter<number | undefined>;\n\n  componentWillLoad() {\n    if (this.value) {\n      this.currentDate = new Date(this.value);\n    }\n  }\n\n  @Watch('value')\n  valueChangeHandler() {\n    if (this.value) {\n      this.currentDate = new Date(this.value);\n    }\n    this.valueChange.emit(this.value ? new Date(this.value).getTime() : undefined);\n  }\n\n  nextMonth = () => {\n    this.currentDate = addMonths(this.currentDate, 1);\n  }\n\n  prevMonth = () => {\n    this.currentDate = subMonths(this.currentDate, 1);\n  }\n\n  nextYear = () => {\n    this.currentDate = addMonths(this.currentDate, 12);\n  }\n\n  prevYear = () => {\n    this.currentDate = subMonths(this.currentDate, 12);\n  }\n\n  setDay = (day: Date) => {\n    this.value = set(this.value, {\n      year: day.getFullYear(),\n      month: day.getMonth(),\n      date: day.getDate()\n    }).getTime();\n  }\n\n  setHour = (hour: number) => {\n    this.value = setHours(this.value, hour).getTime();\n  }\n\n  setMinute = (minute: number) => {\n    this.value = setMinutes(this.value, minute).getTime();\n  }\n\n  setSecond = (second: number) => {\n    this.value = setSeconds(this.value, second).getTime();\n  }\n\n  scrollTimeIntoView = () => {\n    this.el.shadowRoot.querySelectorAll('.timepicker-column').forEach(column => {\n      column.querySelector('je-button[color=\"primary\"][fill=\"solid\"]')?.scrollIntoView({ block: 'center', behavior: 'smooth'});\n    });\n  }\n\n  render() {\n    const firstDayOfMonth = startOfMonth(this.currentDate);\n    const lastDayOfMonth = endOfMonth(this.currentDate);\n    const daysInMonth = eachDayOfInterval({ start: firstDayOfMonth, end: lastDayOfMonth });\n\n    const prevMonth = subMonths(this.currentDate, 1);\n    const prevMonthEnd = endOfMonth(prevMonth);\n\n    const firstDayOfWeek = getDay(firstDayOfMonth);\n    const daysBefore = Array.from({ length: firstDayOfWeek }).map((_, i) =>\n      subMonths(this.currentDate, 1).setDate(prevMonthEnd.getDate() - (firstDayOfWeek - i - 1))\n    );\n\n    const lastDayOfWeek = getDay(lastDayOfMonth);\n    const daysAfter = Array.from({ length: 6 - lastDayOfWeek }).map((_, i) =>\n      addMonths(this.currentDate, 1).setDate(i + 1)\n    );\n\n    return (\n      <Host>\n        {(this.type == 'date' || this.type == 'datetime') && (\n          <Fragment>\n            <div class=\"header\">\n              <je-icon-button icon='keyboard_double_arrow_left' onClick={this.prevYear} />\n              <je-icon-button icon='keyboard_arrow_left' onClick={this.prevMonth} />\n              <span>{format(this.currentDate, 'MMMM yyyy')}</span>\n              <je-icon-button icon='keyboard_arrow_right' onClick={this.nextMonth} />\n              <je-icon-button icon='keyboard_double_arrow_right' onClick={this.nextYear} />\n            </div>\n\n            <div class=\"weekdays-grid\">\n              {daysOfWeek.map(day => <div>{day}</div>)}\n            </div>\n\n            <div class=\"days-grid\">\n              {daysBefore.map(day => (\n                <je-button expand={true} disabled={true} color='secondary' fill='clear' class='day'>\n                  {format(day, 'd')}\n                </je-button>\n              ))}\n\n              {daysInMonth.map(day => {\n                const selected = this.value && isSameDay(day, this.value);\n                const today = isToday(day);\n                const isDisabled = (this.isDateDisabled && this.isDateDisabled(day)) || (this.min && day < new Date(this.min)) || (this.max && day > new Date(this.max));\n                return (\n                  <je-button\n                    expand={true}\n                    disabled={isDisabled}\n                    color={selected || today ? 'primary' : isDisabled ? 'secondary' : undefined}\n                    fill={selected ? 'solid' : 'clear'}\n                    class='day'\n                    onClick={() => this.setDay(day)}\n                  >\n                    {format(day, 'd')}\n                  </je-button>\n                );\n              })}\n\n              {daysAfter.map(day => (\n                <je-button expand={true} disabled={true} color='secondary' fill='clear' class='day'>\n                  {format(day, 'd')}\n                </je-button>\n              ))}\n            </div>\n          </Fragment>\n        )}\n        {(this.type == 'time' || this.type == 'datetime') && (\n          <div class='timepicker'>\n            <span>Time</span>\n            <je-popover arrow={true} onPresent={this.scrollTimeIntoView}>\n              <je-pill slot='trigger'>\n                {this.value ? (\n                  this.includeSeconds ? format(this.value, 'hh:mm:ss a') : format(this.value, 'hh:mm a')\n                ) : '-'}\n              </je-pill>\n              <div class='timepicker-content'>\n                <div class='timepicker-column'>\n                  {Array.from({ length: 24 }).map((_, hour) => (\n                    <je-button\n                      size='sm'\n                      color={this.currentDate.getHours() === hour ? 'primary' : undefined}\n                      fill={this.currentDate.getHours() === hour ? 'solid' : 'clear'}\n                      onClick={() => this.setHour(hour)}\n                    >\n                      {format(new Date().setHours(hour), 'hh a')}\n                    </je-button>\n                  ))}\n                </div>\n                <div class='timepicker-column'>\n                  {Array.from({ length: 60 }).map((_, minute) => (\n                    <je-button\n                      size='sm'\n                      color={this.currentDate.getMinutes() === minute ? 'primary' : undefined}\n                      fill={this.currentDate.getMinutes() === minute ? 'solid' : 'clear'}\n                      onClick={() => this.setMinute(minute)}\n                    >\n                      {format(new Date().setMinutes(minute), 'mm')}\n                    </je-button>\n                  ))}\n                </div>\n                {this.includeSeconds && (\n                  <div class='timepicker-column'>\n                    {Array.from({ length: 60 }).map((_, second) => (\n                      <je-button\n                        size='sm'\n                        color={this.currentDate.getSeconds() === second ? 'primary' : undefined}\n                        fill={this.currentDate.getSeconds() === second ? 'solid' : 'clear'}\n                        onClick={() => this.setSecond(second)}\n                      >\n                        {format(new Date().setSeconds(second), 'ss')}\n                      </je-button>\n                    ))}\n                  </div>\n                )}\n              </div>\n            </je-popover>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"je-datepicker.entry.cjs.js","mappings":"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","names":["addMonths","subMonths","set","startOfMonth","endOfMonth","eachDayOfInterval","getDay","h","Host","Fragment","format","isSameDay","isToday"],"sources":["src/components/je-datepicker/je-datepicker.scss?tag=je-datepicker&encapsulation=shadow","src/components/je-datepicker/je-datepicker.tsx"],"sourcesContent":["@use '../../styles/styles' as *;\n\n:host {\n  display: flex;\n  padding: spacing-get(xs);\n  box-sizing: border-box;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: spacing-get(sm);\n}\n\nje-button.day {\n  --height: #{spacing-get(2xl)};\n  --padding-inline: 0px;\n\n  &::part(inner-button) {\n    width: spacing-get(2xl);\n    font-weight: 400;\n  }\n}\n\n.header {\n  width: 100%;\n  min-width: 200px;\n  max-width: 300px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  span {\n    flex: 1;\n    text-align: center;\n  }\n}\n\n.weekdays-grid {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: spacing-get(2xs);\n\n  div {\n    height: spacing-get(2xl);\n    width: spacing-get(2xl);\n    font-size: font-size(md);\n    font-weight: 400;\n    color: secondary(600);\n    text-align: center;\n    align-content: center;\n  }\n}\n\n.days-grid {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: spacing-get(2xs);\n}\n\n.timepicker {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  min-width: 200px;\n  max-width: 300px;\n}\n\n.timepicker-content {\n  display: flex;\n}\n\n.timepicker-column {\n  display: flex;\n  flex-direction: column;\n  gap: spacing-get(2xs);\n  height: 200px;\n  overflow: auto;\n  align-items: center;\n  padding: spacing-get(xs);\n  box-sizing: border-box;\n}\n","import { Component, Element, Event, EventEmitter, Fragment, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { startOfMonth, endOfMonth, eachDayOfInterval, addMonths, subMonths, isSameDay, isToday, format, getDay, set } from 'date-fns';\n\nconst daysOfWeek = ['S', 'M', 'T', 'W', 'T', 'F', 'S'] as const;\n\n@Component({\n  tag: 'je-datepicker',\n  styleUrl: 'je-datepicker.scss',\n  shadow: true,\n})\nexport class JeDatepicker {\n  @Element() el!: HTMLJeDatepickerElement;\n  @State() currentDate = new Date();\n  @Prop() type: 'date' | 'datetime' | 'time' = 'datetime';\n  @Prop() includeSeconds = false;\n  @Prop() min?: number;\n  @Prop() max?: number;\n  @Prop() isDateDisabled?: (date: Date) => boolean;\n  @Prop({ mutable: true }) value?: number;\n  @Event() valueChange: EventEmitter<number>;\n\n  componentWillLoad() {\n    if (this.value) {\n      this.currentDate = new Date(this.value);\n    }\n  }\n\n  @Watch('value')\n  valueChangeHandler() {\n    if (this.value) {\n      this.currentDate = new Date(this.value);\n    }\n  }\n\n  nextMonth = () => {\n    this.currentDate = addMonths(this.currentDate, 1);\n  }\n\n  prevMonth = () => {\n    this.currentDate = subMonths(this.currentDate, 1);\n  }\n\n  nextYear = () => {\n    this.currentDate = addMonths(this.currentDate, 12);\n  }\n\n  prevYear = () => {\n    this.currentDate = subMonths(this.currentDate, 12);\n  }\n\n  setValue = (opts: { day?: Date, hour?: number, minute?: number, second?: number }) => {\n    const newValue = set(this.value ?? new Date(), {\n      year: opts.day?.getFullYear(),\n      month: opts.day?.getMonth(),\n      date: opts.day?.getDate(),\n      hours: opts.hour,\n      minutes: opts.minute,\n      seconds: opts.second\n    })\n    this.value = newValue.getTime();\n    this.valueChange.emit(this.value);\n  }\n\n  scrollTimeIntoView = () => {\n    this.el.shadowRoot.querySelectorAll('.timepicker-column').forEach(column => {\n      column.querySelector('je-button[color=\"primary\"][fill=\"solid\"]')\n        ?.shadowRoot.querySelector('button')\n        ?.scrollIntoView({ block: 'center', behavior: 'instant' });\n    });\n  }\n\n  render() {\n    const firstDayOfMonth = startOfMonth(this.currentDate);\n    const lastDayOfMonth = endOfMonth(this.currentDate);\n    const daysInMonth = eachDayOfInterval({ start: firstDayOfMonth, end: lastDayOfMonth });\n\n    const prevMonth = subMonths(this.currentDate, 1);\n    const prevMonthEnd = endOfMonth(prevMonth);\n\n    const firstDayOfWeek = getDay(firstDayOfMonth);\n    const daysBefore = Array.from({ length: firstDayOfWeek }).map((_, i) =>\n      subMonths(this.currentDate, 1).setDate(prevMonthEnd.getDate() - (firstDayOfWeek - i - 1))\n    );\n\n    const lastDayOfWeek = getDay(lastDayOfMonth);\n    const daysAfter = Array.from({ length: 6 - lastDayOfWeek }).map((_, i) =>\n      addMonths(this.currentDate, 1).setDate(i + 1)\n    );\n\n    return (\n      <Host>\n        {(this.type == 'date' || this.type == 'datetime') && (\n          <Fragment>\n            <div class=\"header\">\n              <je-icon-button icon='keyboard_double_arrow_left' onClick={this.prevYear} />\n              <je-icon-button icon='keyboard_arrow_left' onClick={this.prevMonth} />\n              <span>{format(this.currentDate, 'MMMM yyyy')}</span>\n              <je-icon-button icon='keyboard_arrow_right' onClick={this.nextMonth} />\n              <je-icon-button icon='keyboard_double_arrow_right' onClick={this.nextYear} />\n            </div>\n\n            <div class=\"weekdays-grid\">\n              {daysOfWeek.map(day => <div>{day}</div>)}\n            </div>\n\n            <div class=\"days-grid\">\n              {daysBefore.map(day => (\n                <je-button expand={true} disabled={true} color='secondary' fill='clear' class='day'>\n                  {format(day, 'd')}\n                </je-button>\n              ))}\n\n              {daysInMonth.map(day => {\n                const selected = this.value && isSameDay(day, this.value);\n                const today = isToday(day);\n                const isDisabled = (this.isDateDisabled && this.isDateDisabled(day)) || (this.min && day < new Date(this.min)) || (this.max && day > new Date(this.max));\n                return (\n                  <je-button\n                    expand={true}\n                    disabled={isDisabled}\n                    color={selected || today ? 'primary' : isDisabled ? 'secondary' : undefined}\n                    fill={selected ? 'solid' : 'clear'}\n                    class='day'\n                    onClick={() => this.setValue({day})}\n                  >\n                    {format(day, 'd')}\n                  </je-button>\n                );\n              })}\n\n              {daysAfter.map(day => (\n                <je-button expand={true} disabled={true} color='secondary' fill='clear' class='day'>\n                  {format(day, 'd')}\n                </je-button>\n              ))}\n            </div>\n          </Fragment>\n        )}\n        {(this.type == 'time' || this.type == 'datetime') && (\n          <div class='timepicker'>\n            <span>Time</span>\n            <je-popover arrow={true} onPresent={this.scrollTimeIntoView}>\n              <je-pill role='button' {...{tabindex: 0}} slot='trigger'>\n                {this.value ? (\n                  this.includeSeconds ? format(this.value, 'hh:mm:ss a') : format(this.value, 'hh:mm a')\n                ) : '-'}\n              </je-pill>\n              <div class='timepicker-content'>\n                <div class='timepicker-column'>\n                  {Array.from({ length: 24 }).map((_, hour) => (\n                    <je-button\n                      size='sm'\n                      color={this.currentDate.getHours() === hour ? 'primary' : undefined}\n                      fill={this.currentDate.getHours() === hour ? 'solid' : 'clear'}\n                      onClick={() => this.setValue({hour})}\n                    >\n                      {format(new Date().setHours(hour), 'hh a')}\n                    </je-button>\n                  ))}\n                </div>\n                <div class='timepicker-column'>\n                  {Array.from({ length: 60 }).map((_, minute) => (\n                    <je-button\n                      size='sm'\n                      color={this.currentDate.getMinutes() === minute ? 'primary' : undefined}\n                      fill={this.currentDate.getMinutes() === minute ? 'solid' : 'clear'}\n                      onClick={() => this.setValue({minute})}\n                    >\n                      {format(new Date().setMinutes(minute), 'mm')}\n                    </je-button>\n                  ))}\n                </div>\n                {this.includeSeconds && (\n                  <div class='timepicker-column'>\n                    {Array.from({ length: 60 }).map((_, second) => (\n                      <je-button\n                        size='sm'\n                        color={this.currentDate.getSeconds() === second ? 'primary' : undefined}\n                        fill={this.currentDate.getSeconds() === second ? 'solid' : 'clear'}\n                        onClick={() => this.setValue({second})}\n                      >\n                        {format(new Date().setSeconds(second), 'ss')}\n                      </je-button>\n                    ))}\n                  </div>\n                )}\n              </div>\n            </je-popover>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}