jebamo 0.0.2 → 0.0.3

package/dist/components/je-modal.js

@@ -1,104 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-41492a72.js';
-
-const jeModalCss = ":host{display:flex}@media (width > 1200px){:host{--je-width:75%;--je-height:85%}}@media (992px < width < 1201px){:host{--je-width:80%;--je-height:90%}}@media (768px < width < 993px){:host{--je-width:85%;--je-height:95%}}@media (width < 769px){:host{--je-width:100%;--je-height:100%}}.modal{display:flex;flex-direction:column;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);z-index:910;width:var(--je-width);height:var(--je-height);background-color:var(--je-background-color, canvas);color:var(--je-text-color, canvastext);box-shadow:0px 0px 15px 5px rgba(60, 60, 60, 0.1647058824);border-radius:var(--je-border-radius, 2px);overflow:hidden}.modal-transition{opacity:0;transition:opacity 250ms ease-in-out}.modal.open{opacity:1}.backdrop{position:fixed;top:0;width:100%;height:100%;background:var(--je-backdrop-color, rgba(0, 0, 0, 0.5));z-index:909}.backdrop-transition{opacity:0;transition:opacity 250ms ease-in-out}.backdrop.fade{opacity:1}.clear{background:rgba(0, 0, 0, 0)}";
-const JeModalStyle0 = jeModalCss;
-
-const JeModal$1 = /*@__PURE__*/ proxyCustomElement(class JeModal extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.didPresent = createEvent(this, "didPresent", 3);
-        this.didDismiss = createEvent(this, "didDismiss", 3);
-        this.handleBackdropClick = () => {
-            if (this.isOpen && this.backdropClose) {
-                this.dismiss('backdropClose');
-            }
-        };
-        this.trigger = undefined;
-        this.showBackdrop = true;
-        this.backdropClose = true;
-        this.isOpen = false;
-    }
-    componentDidLoad() {
-        this.pageEl = this.el.closest('je-page');
-        this.parentEl = this.el.parentElement;
-        if (this.trigger) {
-            this.triggerElement = document.getElementById(this.trigger);
-            if (this.triggerElement) {
-                this.triggerElement.addEventListener('click', () => this.present());
-            }
-            else {
-                console.error('Failed to find modal trigger element!');
-            }
-        }
-    }
-    async present() {
-        if (!this.isOpen) {
-            this.el.remove();
-            if (this.pageEl) {
-                this.pageEl.append(this.el);
-            }
-            else {
-                document.body.append(this.el);
-            }
-            this.isOpen = true;
-            return new Promise(resolve => {
-                this.contentEl.addEventListener('transitionend', () => {
-                    this.didPresent.emit();
-                    resolve();
-                }, { once: true });
-                this.backdropEl.classList.add('fade');
-                this.contentEl.classList.add('open');
-            });
-        }
-    }
-    async dismiss(role = 'manualClose', data) {
-        if (this.isOpen) {
-            return new Promise(resolve => {
-                this.contentEl.addEventListener('transitionend', () => {
-                    this.el.remove();
-                    this.parentEl.append(this.el);
-                    this.isOpen = false;
-                    this.didDismiss.emit({ role: role, data: data });
-                    resolve();
-                }, { once: true });
-                this.backdropEl.classList.remove('fade');
-                this.contentEl.classList.remove('open');
-            });
-        }
-    }
-    render() {
-        return (h(Host, { key: '14d2b7824b091c2f46ec8ea4c4aaaf4353b875e8', slot: "overlay" }, h("div", { key: 'c518ed82b72fa77ca7e8791fdc01e99124c751d8', ref: el => this.contentEl = el, class: { 'modal-transition': true, 'modal': this.isOpen } }, this.isOpen && h("slot", { key: '93abe76d598f72e64f1d3c438f98438333156aea' })), h("div", { key: '4564a790333dc48d29dbffb1d5ca957d92ad1af3', ref: el => this.backdropEl = el, onClick: this.handleBackdropClick, class: { 'backdrop-transition': true, 'backdrop': this.isOpen, 'clear': !this.showBackdrop && this.isOpen } })));
-    }
-    get el() { return this; }
-    static get style() { return JeModalStyle0; }
-}, [1, "je-modal", {
-        "trigger": [1],
-        "showBackdrop": [4, "show-backdrop"],
-        "backdropClose": [4, "backdrop-close"],
-        "isOpen": [32],
-        "present": [64],
-        "dismiss": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["je-modal"];
-    components.forEach(tagName => { switch (tagName) {
-        case "je-modal":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, JeModal$1);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const JeModal = JeModal$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { JeModal, defineCustomElement };
-
-//# sourceMappingURL=je-modal.js.map

package/dist/components/je-modal.js.map

@@ -1 +0,0 @@
-{"file":"je-modal.js","mappings":"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","names":["JeModal"],"sources":["src/components/je-modal/je-modal.scss?tag=je-modal&encapsulation=shadow","src/components/je-modal/je-modal.tsx"],"sourcesContent":[":host {\n  display: flex;\n}\n\n@media (width > 1200px) {\n  :host {\n    --je-width: 75%;\n    --je-height: 85%;\n  }\n}\n\n@media (992px < width < 1201px) {\n  :host {\n    --je-width: 80%;\n    --je-height: 90%;\n  }\n}\n\n@media (768px < width < 993px) {\n  :host {\n    --je-width: 85%;\n    --je-height: 95%;\n  }\n}\n\n@media (width < 769px) {\n  :host {\n    --je-width: 100%;\n    --je-height: 100%;\n  }\n}\n\n.modal {\n  display: flex;\n  flex-direction: column;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 910;\n  width: var(--je-width);\n  height: var(--je-height);\n  background-color: var(--je-background-color, canvas);\n  color: var(--je-text-color, canvastext);\n  box-shadow: 0px 0px 15px 5px #3c3c3c2a;\n  border-radius: var(--je-border-radius, 2px);\n  overflow: hidden;\n}\n\n.modal-transition {\n  opacity: 0;\n  transition: opacity 250ms ease-in-out;\n}\n\n.modal.open {\n  opacity: 1;\n}\n\n.backdrop {\n  position: fixed;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--je-backdrop-color, rgba(0, 0, 0, 0.5));\n  z-index: 909;\n}\n\n.backdrop-transition {\n  opacity: 0;\n  transition: opacity 250ms ease-in-out;\n}\n\n.backdrop.fade {\n  opacity: 1;\n}\n\n.clear {\n  background: rgba(0, 0, 0, 0);\n}\n","import { Component, Host, h, Element, Event, EventEmitter, Method, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'je-modal',\n  styleUrl: 'je-modal.scss',\n  shadow: true,\n})\nexport class JeModal {\n  @Element() el!: HTMLJeModalElement;\n\n  /** The id of the element that will present the modal on click. If not provided, you will have to manually present the modal using openModal(). */\n  @Prop() trigger?: string;\n\n  /** Whether or not the backdrop will be visible to the user */\n  @Prop() showBackdrop = true;\n\n  /** Backdrop will close the modal on click when enabled */\n  @Prop() backdropClose = true;\n\n  @State() isOpen = false;\n\n  /** Emits whenever the modal has opened. Does not emit any data */\n  @Event({ bubbles: false }) didPresent: EventEmitter;\n\n  /** Emits whenever the modal has finished closing. Emits the role and optional data object passed to the closeModal() method. */\n  @Event({ bubbles: false }) didDismiss: EventEmitter<{ role: string, data: any }>;\n\n  protected parentEl!: HTMLElement;\n  protected triggerElement!: HTMLElement;\n  protected contentEl!: HTMLElement;\n  protected backdropEl!: HTMLElement;\n  protected pageEl!: HTMLElement;\n\n  componentDidLoad() {\n    this.pageEl = this.el.closest('je-page');\n    this.parentEl = this.el.parentElement;\n    if (this.trigger) {\n      this.triggerElement = document.getElementById(this.trigger);\n      if (this.triggerElement) {\n        this.triggerElement.addEventListener('click', () => this.present());\n      } else {\n        console.error('Failed to find modal trigger element!');\n      }\n    }\n  }\n\n  @Method()\n  async present() {\n    if (!this.isOpen) {\n      this.el.remove();\n      if (this.pageEl) {\n        this.pageEl.append(this.el);\n      } else {\n        document.body.append(this.el);\n      }\n      this.isOpen = true;\n\n      return new Promise<void>(resolve => {\n        this.contentEl.addEventListener('transitionend', () => {\n          this.didPresent.emit();\n          resolve();\n        }, { once: true });\n        this.backdropEl.classList.add('fade');\n        this.contentEl.classList.add('open');\n      });\n    }\n  }\n\n  @Method()\n  async dismiss(role = 'manualClose', data?: any) {\n    if (this.isOpen) {\n      return new Promise<void>(resolve => {\n        this.contentEl.addEventListener('transitionend', () => {\n          this.el.remove();\n          this.parentEl.append(this.el);\n          this.isOpen = false;\n          this.didDismiss.emit({ role: role, data: data });\n          resolve();\n        }, { once: true });\n        this.backdropEl.classList.remove('fade');\n        this.contentEl.classList.remove('open');\n      });\n    }\n  }\n\n  private handleBackdropClick = () => {\n    if (this.isOpen && this.backdropClose) {\n      this.dismiss('backdropClose');\n    }\n  }\n\n  render() {\n    return (\n      <Host slot=\"overlay\">\n        <div ref={el => this.contentEl = el} class={{ 'modal-transition': true, 'modal': this.isOpen }}>\n          {this.isOpen && <slot></slot>}\n        </div>\n\n        <div\n          ref={el => this.backdropEl = el}\n          onClick={this.handleBackdropClick}\n          class={{ 'backdrop-transition': true, 'backdrop': this.isOpen, 'clear': !this.showBackdrop && this.isOpen }}>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/je-multiselect-option.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface JeMultiselectOption extends Components.JeMultiselectOption, HTMLElement {}
-export const JeMultiselectOption: {
-    prototype: JeMultiselectOption;
-    new (): JeMultiselectOption;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/je-multiselect-option.js

@@ -1,62 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-41492a72.js';
-import { d as defineCustomElement$2 } from './p-4b8ae8ef.js';
-
-const jeMultiselectOptionCss = ":host{display:block;width:100%;--je-option-hover-color:var(--je-primary-100)}:host([darkmode]){--je-option-hover-color:var(--je-medium-850)}:host(:hover) span[part=container]{background-color:var(--je-option-hover-color)}span[part=container]{display:flex;align-items:center;gap:var(--je-spacing-2xs);user-select:none;-webkit-user-select:none;cursor:pointer;width:100%;padding:var(--je-spacing-xs, 10px);background-color:transparent;color:inherit;transition:background-color 75ms ease-in}je-icon{cursor:pointer}";
-const JeMultiselectOptionStyle0 = jeMultiselectOptionCss;
-
-const JeMultiselectOption$1 = /*@__PURE__*/ proxyCustomElement(class JeMultiselectOption extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.optionChecked = createEvent(this, "optionChecked", 7);
-        this.optionUnchecked = createEvent(this, "optionUnchecked", 7);
-        this.value = undefined;
-        this.checked = false;
-    }
-    handleClick() {
-        if (this.checked) {
-            this.optionUnchecked.emit(this.value);
-        }
-        else {
-            this.optionChecked.emit(this.value);
-        }
-    }
-    handleThemeChange(e) {
-        this.hostEl.toggleAttribute('darkmode', e.detail == 'dark');
-    }
-    render() {
-        return (h("span", { key: '0e863f622655ec29084296aa28ad67b607c7e004', part: 'container' }, h("je-icon", { key: '34d5756b234d995a4797b26098e483e8a1d7e413', icon: this.checked ? 'check_box' : 'check_box_outline_blank' }), h("slot", { key: '0d543f3703dfcc2bb6355845ff91195a38f67fe0' })));
-    }
-    get hostEl() { return this; }
-    static get style() { return JeMultiselectOptionStyle0; }
-}, [1, "je-multiselect-option", {
-        "value": [1],
-        "checked": [516]
-    }, [[0, "click", "handleClick"], [16, "themeChange", "handleThemeChange"]]]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["je-multiselect-option", "je-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "je-multiselect-option":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, JeMultiselectOption$1);
-            }
-            break;
-        case "je-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const JeMultiselectOption = JeMultiselectOption$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { JeMultiselectOption, defineCustomElement };
-
-//# sourceMappingURL=je-multiselect-option.js.map

package/dist/components/je-multiselect-option.js.map

@@ -1 +0,0 @@
-{"file":"je-multiselect-option.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,ggBAAggB,CAAC;AAChiB,kCAAe,sBAAsB;;MCMxBA,qBAAmB;;;;;;;;uBAGK,KAAK;;IAKxC,WAAW;QACT,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACvC;aAAM;YACL,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACrC;KACF;IAGD,iBAAiB,CAAC,CAAgC;QAChD,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,UAAU,EAAE,CAAC,CAAC,MAAM,IAAI,MAAM,CAAC,CAAA;KAC5D;IAED,MAAM;QACJ,QACE,6DAAM,IAAI,EAAC,WAAW,IACpB,gEAAS,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,WAAW,GAAG,yBAAyB,GAAG,EACxE,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["JeMultiselectOption"],"sources":["src/components/multiselect/je-multiselect-option/je-multiselect-option.scss?tag=je-multiselect-option&encapsulation=shadow","src/components/multiselect/je-multiselect-option/je-multiselect-option.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  --je-option-hover-color: var(--je-primary-100);\n}\n\n:host([darkmode]) {\n  --je-option-hover-color: var(--je-medium-850);\n}\n\n:host(:hover) span[part='container'] {\n  background-color: var(--je-option-hover-color);\n}\n\nspan[part='container'] {\n  display: flex;\n  align-items: center;\n  gap: var(--je-spacing-2xs);\n  user-select: none;\n  -webkit-user-select: none;\n  cursor: pointer;\n  width: 100%;\n  padding: var(--je-spacing-xs, 10px);\n  background-color: transparent;\n  color: inherit;\n  transition: background-color 75ms ease-in;\n}\n\nje-icon {\n  cursor: pointer;\n}\n","import { Component, h, Element, Prop, Event, EventEmitter, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'je-multiselect-option',\n  styleUrl: 'je-multiselect-option.scss',\n  shadow: true,\n})\nexport class JeMultiselectOption {\n  @Element() hostEl!: HTMLElement;\n  @Prop() value: string;\n  @Prop({ reflect: true }) checked = false;\n  @Event() optionChecked: EventEmitter<string>;\n  @Event() optionUnchecked: EventEmitter<string>;\n\n  @Listen('click')\n  handleClick() {\n    if (this.checked) {\n      this.optionUnchecked.emit(this.value);\n    } else {\n      this.optionChecked.emit(this.value);\n    }\n  }\n\n  @Listen('themeChange', { target: 'body' })\n  handleThemeChange(e: CustomEvent<'light' | 'dark'>) {\n    this.hostEl.toggleAttribute('darkmode', e.detail == 'dark')\n  }\n\n  render() {\n    return (\n      <span part='container'>\n        <je-icon icon={this.checked ? 'check_box' : 'check_box_outline_blank'}/>\n        <slot></slot>\n      </span>\n    );\n  }\n}\n"],"version":3}

package/dist/components/je-multiselect.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface JeMultiselect extends Components.JeMultiselect, HTMLElement {}
-export const JeMultiselect: {
-    prototype: JeMultiselect;
-    new (): JeMultiselect;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/je-multiselect.js

@@ -1,146 +0,0 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-41492a72.js';
-import { d as defineCustomElement$4 } from './p-4b8ae8ef.js';
-import { d as defineCustomElement$3 } from './p-1f3759e7.js';
-import { d as defineCustomElement$2 } from './p-5dee004d.js';
-
-const jeMultiselectCss = ":host{display:block;width:207px;--je-height:42px;--je-border-color:transparent;--je-input-background:var(--je-medium-100);--je-input-color:var(--je-medium-900)}:host([darkmode]){--je-input-background:var(--je-medium-850);--je-input-color:var(--je-medium-50)}:host([expand]){width:100%}:host(:invalid) div[part=outer-container].touched{--je-border-color:var(--je-error-500, red)}div[part=outer-container]{display:flex;align-items:center;justify-content:space-between;gap:var(--je-spacing-2xs, 8px);height:var(--je-height);background-color:var(--je-input-background, field);color:var(--je-input-color, fieldtext);padding-inline:var(--je-spacing-xs, 10px);border-radius:var(--je-border-radius, 2px);overflow:hidden;border:solid 1px var(--je-border-color);transition:border 125ms ease-in-out}div[part=outer-container].focus{--je-border-color:var(--je-primary-500, accentcolor)}div[part=outer-container].disabled{opacity:0.6;cursor:default}div[part=start-container],div[part=end-container]{display:flex}div[part=main-container]{display:inline-block;overflow:hidden;color:var(--je-medium-600);text-wrap:nowrap;text-overflow:ellipsis;margin-right:auto}label{font-weight:var(--je-font-semi-bold)}je-popover::part(content){width:var(--je-content-width, auto);box-sizing:border-box;padding:0px}je-icon{transition:transform 250ms ease}je-icon.open{transform:rotate(180deg)}je-pill{margin-right:var(--je-spacing-3xs)}";
-const JeMultiselectStyle0 = jeMultiselectCss;
-
-const JeMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class JeMultiselect extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.internals = this.attachInternals();
-        this.originalValue = [];
-        this.handleContainerClick = async () => {
-            this.el.style.setProperty('--je-content-width', `${this.el.clientWidth}px`);
-            await this.popoverEl.present('element', this.el);
-        };
-        this.isTouched = false;
-        this.open = false;
-        this.label = undefined;
-        this.placeholder = undefined;
-        this.value = [];
-        this.expand = undefined;
-        this.required = undefined;
-    }
-    componentDidLoad() {
-        this.originalValue = this.value;
-    }
-    componentWillLoad() {
-        if (!this.el.getAttribute('name') && this.label) {
-            this.el.setAttribute('name', this.label);
-        }
-        if (!Array.isArray(this.value)) {
-            this.value = [this.value];
-        }
-    }
-    formResetCallback() {
-        this.value = this.originalValue;
-    }
-    handlePopoverPresent() {
-        this.open = true;
-    }
-    handlePopoverDismiss() {
-        this.open = false;
-        this.el.style.removeProperty('--je-content-width');
-        this.containerEl.classList.remove('focus');
-    }
-    handleThemeChange(e) {
-        this.el.toggleAttribute('darkmode', e.detail == 'dark');
-    }
-    handleOptionChecked(event) {
-        this.value = [...this.value, event.detail];
-    }
-    handleOptionUnchecked(event) {
-        this.value = this.value.filter(t => t !== event.detail);
-    }
-    handleFocus() {
-        this.containerEl.classList.add('focus');
-    }
-    handleBlur() {
-        this.isTouched = true;
-        if (!this.open) {
-            this.containerEl.classList.remove('focus');
-        }
-    }
-    handleValueChange() {
-        const options = this.el.querySelectorAll('je-multiselect-option');
-        options.forEach(option => {
-            if (this.value.includes(option.value)) {
-                option.checked = true;
-            }
-            else {
-                option.checked = false;
-            }
-        });
-    }
-    render() {
-        var _a;
-        const options = Array.from(this.el.querySelectorAll('je-multiselect-option'));
-        const requiredIcon = h("je-icon", { key: '980ad087f2037c624c834a999d68d5af7571c879', style: { fontSize: '10px', color: 'var(--je-error-500)' }, icon: "asterisk" });
-        const label = h("label", { key: '0a570d461dfb85f605bcede7482551da079bb610', part: 'label', style: { display: 'flex' } }, this.label, " ", this.required && requiredIcon);
-        const invalid = this.required && (((_a = this.value) !== null && _a !== void 0 ? _a : '') === '');
-        const containerClasses = {
-            //disabled: this.disabled,
-            touched: this.isTouched
-        };
-        if (invalid && this.isTouched) {
-            this.internals.reportValidity();
-        }
-        return (h(Host, { key: '31dc686422fd5bb829fdd3034ac1e2556dcb8624' }, h("div", { key: 'a208b2ebdede78095e9d5604d341e19310413b60', ref: el => this.containerEl = el, part: 'outer-container', onClick: this.handleContainerClick, class: containerClasses }, h("div", { key: '42683af62e175c43f4567348d65cada1138c1c59', part: 'start-container' }, h("slot", { key: '4cc5817c81442a06f148f03c59f70cd48c6b0206', name: 'start' }), this.label && label), h("div", { key: '56c08d003cc38e89164b94b87f32547a7812ee17', part: 'main-container' }, this.value.length > 0 && options.filter(t => this.value.includes(t.value)).map(t => h("je-pill", null, t.textContent)), (this.value.length < 1 && this.placeholder) && this.placeholder), h("div", { key: '495f68c15d7217e7b78bca9eee114b36fc08d328', part: 'end-container' }, h("slot", { key: '6838d86652f01b56a5409d9dee2b611318cb876e', name: 'end' }), h("je-icon", { key: '561c44792301b1adf11755737af1f56b3b3239b9', icon: 'expand_more', class: { open: this.open } }))), h("je-popover", { key: 'e0bf1b02ad6156a2212b3c81842cb08e86233ca8', ref: el => this.popoverEl = el, exportparts: 'content' }, h("slot", { key: '2314719361ba1f5908ce59d0526bef7efbb30d06' }))));
-    }
-    static get formAssociated() { return true; }
-    get el() { return this; }
-    static get watchers() { return {
-        "value": ["handleValueChange"]
-    }; }
-    static get style() { return JeMultiselectStyle0; }
-}, [65, "je-multiselect", {
-        "label": [1],
-        "placeholder": [1],
-        "value": [1040],
-        "expand": [4],
-        "required": [4],
-        "isTouched": [32],
-        "open": [32]
-    }, [[0, "didPresent", "handlePopoverPresent"], [0, "didDismiss", "handlePopoverDismiss"], [16, "themeChange", "handleThemeChange"], [0, "optionChecked", "handleOptionChecked"], [0, "optionUnchecked", "handleOptionUnchecked"], [0, "focus", "handleFocus"], [0, "blur", "handleBlur"]], {
-        "value": ["handleValueChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["je-multiselect", "je-icon", "je-pill", "je-popover"];
-    components.forEach(tagName => { switch (tagName) {
-        case "je-multiselect":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, JeMultiselect$1);
-            }
-            break;
-        case "je-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "je-pill":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "je-popover":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const JeMultiselect = JeMultiselect$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { JeMultiselect, defineCustomElement };
-
-//# sourceMappingURL=je-multiselect.js.map

package/dist/components/je-multiselect.js.map

@@ -1 +0,0 @@
-{"file":"je-multiselect.js","mappings":"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","names":["JeMultiselect"],"sources":["src/components/multiselect/je-multiselect/je-multiselect.scss?tag=je-multiselect&encapsulation=shadow","src/components/multiselect/je-multiselect/je-multiselect.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 207px;\n\n  --je-height: 42px;\n  --je-border-color: transparent;\n  --je-input-background: var(--je-medium-100);\n  --je-input-color: var(--je-medium-900);\n}\n\n:host([darkmode]) {\n  --je-input-background: var(--je-medium-850);\n  --je-input-color: var(--je-medium-50);\n}\n\n:host([expand]) {\n  width: 100%;\n}\n\n:host(:invalid) div[part=outer-container].touched {\n  --je-border-color: var(--je-error-500, red);\n}\n\ndiv[part='outer-container'] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--je-spacing-2xs, 8px);\n  height: var(--je-height);\n  background-color: var(--je-input-background, field);\n  color: var(--je-input-color, fieldtext);\n  padding-inline: var(--je-spacing-xs, 10px);\n  border-radius: var(--je-border-radius, 2px);\n  overflow: hidden;\n  border: solid 1px var(--je-border-color);\n  transition: border 125ms ease-in-out;\n  &.focus {\n    --je-border-color: var(--je-primary-500, accentcolor);\n  }\n  &.disabled {\n    opacity: 0.6;\n    cursor: default;\n  }\n}\n\ndiv[part='start-container'],\ndiv[part='end-container'] {\n  display: flex;\n}\n\ndiv[part='main-container'] {\n  display: inline-block;\n  overflow: hidden;\n  color: var(--je-medium-600);\n  text-wrap: nowrap;\n  text-overflow: ellipsis;\n  margin-right: auto;\n}\n\nlabel {\n  font-weight: var(--je-font-semi-bold);\n}\n\nje-popover::part(content) {\n  width: var(--je-content-width, auto);\n  box-sizing: border-box;\n  padding: 0px;\n}\n\nje-icon {\n  transition: transform 250ms ease;\n}\n\nje-icon.open {\n  transform: rotate(180deg);\n}\n\nje-pill {\n  margin-right: var(--je-spacing-3xs);\n}\n","import { Component, Host, h, Element, Listen, Prop, State, Watch, AttachInternals } from '@stencil/core';\n\n@Component({\n  tag: 'je-multiselect',\n  styleUrl: 'je-multiselect.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class JeMultiselect {\n  @Element() el: HTMLElement;\n  @AttachInternals() internals: ElementInternals;\n  @State() isTouched = false;\n  @State() open = false;\n  private containerEl!: HTMLDivElement;\n  private popoverEl!: HTMLJePopoverElement;\n  private originalValue: string[] = [];\n  @Prop() label?: string;\n  @Prop() placeholder?: string;\n  @Prop({ mutable: true }) value: string[] = [];\n  @Prop() expand?: boolean;\n  @Prop() required?: boolean;\n\n  componentDidLoad() {\n    this.originalValue = this.value;\n  }\n\n  componentWillLoad() {\n    if (!this.el.getAttribute('name') && this.label) {\n      this.el.setAttribute('name', this.label);\n    }\n\n    if (!Array.isArray(this.value)) {\n      this.value = [this.value];\n    }\n  }\n\n  formResetCallback() {\n    this.value = this.originalValue;\n  }\n\n  @Listen('didPresent')\n  handlePopoverPresent() {\n    this.open = true;\n  }\n\n  @Listen('didDismiss')\n  handlePopoverDismiss() {\n    this.open = false;\n    this.el.style.removeProperty('--je-content-width')\n    this.containerEl.classList.remove('focus');\n  }\n\n  @Listen('themeChange', { target: 'body' })\n  handleThemeChange(e: CustomEvent<'light' | 'dark'>) {\n    this.el.toggleAttribute('darkmode', e.detail == 'dark')\n  }\n\n  @Listen('optionChecked')\n  handleOptionChecked(event: CustomEvent<string>) {\n    this.value = [...this.value, event.detail];\n  }\n\n  @Listen('optionUnchecked')\n  handleOptionUnchecked(event: CustomEvent<string>) {\n    this.value = this.value.filter(t => t !== event.detail);\n  }\n\n  @Listen('focus')\n  handleFocus() {\n    this.containerEl.classList.add('focus');\n  }\n\n  @Listen('blur')\n  handleBlur() {\n    this.isTouched = true;\n    if (!this.open) {\n      this.containerEl.classList.remove('focus');\n    }\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    const options = this.el.querySelectorAll('je-multiselect-option');\n    options.forEach(option => {\n      if (this.value.includes(option.value)) {\n        option.checked = true;\n      } else {\n        option.checked = false;\n      }\n    });\n  }\n\n  private handleContainerClick = async () => {\n    this.el.style.setProperty('--je-content-width', `${this.el.clientWidth}px`);\n    await this.popoverEl.present('element', this.el);\n  }\n\n  render() {\n    const options = Array.from(this.el.querySelectorAll('je-multiselect-option'));\n    const requiredIcon = <je-icon style={{ fontSize: '10px', color: 'var(--je-error-500)' }} icon=\"asterisk\" />;\n    const label = <label part='label' style={{ display: 'flex' }}>{this.label} {this.required && requiredIcon}</label>;\n    const invalid = this.required && ((this.value ?? '') === '');\n    const containerClasses = {\n      //disabled: this.disabled,\n      touched: this.isTouched\n    };\n\n    if (invalid && this.isTouched) {\n      this.internals.reportValidity();\n    }\n\n    return (\n      <Host>\n        <div ref={el => this.containerEl = el} part='outer-container' onClick={this.handleContainerClick} class={containerClasses}>\n          <div part='start-container'>\n            <slot name='start'/>\n            {this.label && label}\n          </div>\n\n          <div part='main-container'>\n            {this.value.length > 0 && options.filter(t => this.value.includes(t.value)).map(t => <je-pill>{t.textContent}</je-pill>)}\n            {(this.value.length < 1 && this.placeholder) && this.placeholder}\n          </div>\n\n          <div part='end-container'>\n            <slot name='end'/>\n            <je-icon icon='expand_more' class={{ open: this.open }} />\n          </div>\n        </div>\n\n        <je-popover ref={el => this.popoverEl = el} exportparts='content'>\n          <slot></slot>\n        </je-popover>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/je-page.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface JePage extends Components.JePage, HTMLElement {}
-export const JePage: {
-    prototype: JePage;
-    new (): JePage;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/je-page.js

@@ -1,61 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-41492a72.js';
-
-const jePageCss = ":host{display:block;height:100%;overflow:hidden;font-size:var(--je-font-size);font-family:var(--je-font-family);color:var(--je-text-color);background-color:var(--je-background-color);color-scheme:light;--je-font-size:13px;--je-font-family:system-ui, Roboto, \"Open Sans\", \"Helvetica Neue\", sans-serif;--je-font-light:400;--je-font-regular:500;--je-font-semi-bold:600;--je-font-bold:700;--je-border-radius:2px;--je-text-color:var(--je-medium-900);--je-background-color:var(--je-medium-50);--je-backdrop-color:rgba(0, 0, 0, 0.5);--je-spacing-3xs:4px;--je-spacing-2xs:8px;--je-spacing-xs:10px;--je-spacing-sm:12px;--je-spacing:16px;--je-spacing-lg:20px;--je-spacing-xl:24px;--je-spacing-2xl:32px;--je-spacing-3xl:40px;--je-primary-100:#e0e7ff;--je-primary-200:#c7d2fe;--je-primary-300:#a5b4fc;--je-primary-400:#818cf8;--je-primary-500:#6366f1;--je-primary-600:#4f46e5;--je-primary-700:#4338ca;--je-primary-800:#3730a3;--je-secondary-100:#e0f7ff;--je-secondary-200:#b3e9ff;--je-secondary-300:#80dbff;--je-secondary-400:#4dcfff;--je-secondary-500:#1ac3ff;--je-secondary-600:#00b0e6;--je-secondary-700:#0095bf;--je-secondary-800:#007a99;--je-tertiary-100:#ffe0f7;--je-tertiary-200:#ffb3e9;--je-tertiary-300:#ff80db;--je-tertiary-400:#ff4dce;--je-tertiary-500:#ff1ac0;--je-tertiary-600:#e600a9;--je-tertiary-700:#bf0090;--je-tertiary-800:#990078;--je-success-100:#e6f9e6;--je-success-200:#b3f0b3;--je-success-300:#80e680;--je-success-400:#4ddb4d;--je-success-500:#22c55e;--je-success-600:#16a34a;--je-success-700:#15803d;--je-success-800:#166534;--je-error-100:#ffe5e5;--je-error-200:#fdb8b8;--je-error-300:#f87171;--je-error-400:#f87171;--je-error-500:#ef4444;--je-error-600:#dc2626;--je-error-700:#b91c1c;--je-error-800:#8b0000;--je-warning-100:#fffbeb;--je-warning-200:#fef3c7;--je-warning-300:#fde68a;--je-warning-400:#fcd34d;--je-warning-500:#fbbf24;--je-warning-600:#f59e0b;--je-warning-700:#d97706;--je-warning-800:#b45309;--je-medium-50:#f7fafc;--je-medium-100:#edf2f7;--je-medium-200:#e8eef4;--je-medium-300:#e2e8f0;--je-medium-400:#cbd5e0;--je-medium-500:#a0aec0;--je-medium-600:#718096;--je-medium-700:#5f6b82;--je-medium-800:#4a5568;--je-medium-850:#2d3748;--je-medium-900:#17191d;--je-left-sidepanel-open-width:500px;--je-left-sidepanel-minimized-width:100px;--je-left-sidepanel-border:solid 1px var(--je-text-color);--je-right-sidepanel-open-width:500px;--je-right-sidepanel-minimized-width:100px;--je-right-sidepanel-border:solid 1px var(--je-text-color)}:host([theme=dark]){color-scheme:dark;--je-text-color:var(--je-medium-50);--je-background-color:var(--je-medium-900)}:host([theme=auto]){color-scheme:light dark}@media (prefers-color-scheme: dark){:host([theme=auto]){--je-text-color:var(--je-medium-50);--je-background-color:var(--je-medium-900)}}[part=page-container]{display:flex;flex-direction:column;height:100%;box-sizing:border-box;overflow:hidden}[part=body-container]{display:flex;flex:1;overflow:hidden}::slotted([slot=body]){flex:1;box-sizing:border-box;overflow-y:auto;overflow-x:hidden}::slotted([slot=header]){box-sizing:border-box;z-index:10;box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)}::slotted([slot=footer]){box-sizing:border-box;box-shadow:rgba(0, 0, 0, 0.4117647059) 0px -5px 20px -10px;z-index:10}@supports (-webkit-touch-callout: none){::slotted([slot=header]){padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}::slotted([slot=footer]){padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.body-container{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);margin-left:env(safe-area-inset-left);margin-right:env(safe-area-inset-right)}}:host([left-panel=open]) ::slotted([slot=left-panel]){width:var(--je-left-sidepanel-open-width);border-right:var(--je-left-sidepanel-border)}:host([left-panel=minimized]) ::slotted([slot=left-panel]){width:var(--je-left-sidepanel-minimized-width);border-right:var(--je-left-sidepanel-border)}:host([right-panel=open]) ::slotted([slot=right-panel]){width:var(--je-right-sidepanel-open-width);border-left:var(--je-right-sidepanel-border)}:host([right-panel=minimized]) ::slotted([slot=right-panel]){width:var(--je-right-sidepanel-minimized-width);border-left:var(--je-right-sidepanel-border)}:host([left-panel=closed]) ::slotted([slot=left-panel]){padding:0 !important}:host([right-panel=closed]) ::slotted([slot=right-panel]){padding:0 !important}::slotted([slot=left-panel]),::slotted([slot=right-panel]){display:block;box-sizing:border-box;overflow-y:auto;overflow-x:hidden;width:0px;border-right:none;border-left:none;transition:all 250ms ease-in-out;margin:0 !important}";
-const JePageStyle0 = jePageCss;
-
-const JePage$1 = /*@__PURE__*/ proxyCustomElement(class JePage extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.themeChange = createEvent(this, "themeChange", 7);
-        this.leftPanel = 'closed';
-        this.rightPanel = 'closed';
-        this.theme = 'light';
-    }
-    componentDidLoad() {
-        this.themeChangeHandler(this.theme);
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => this.themeChangeHandler(this.theme));
-    }
-    themeChangeHandler(newValue) {
-        if (newValue !== 'auto')
-            this.themeChange.emit(newValue);
-        else
-            this.themeChange.emit(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
-    }
-    render() {
-        return (h(Host, { key: 'fecb0aaf3870822893abbb410e37c9be72c67c39' }, h("div", { key: 'df76c6c8484ca41040b6fe0e2732739c7f3aba4d', part: 'page-container' }, h("slot", { key: 'c28f037b525481dc9c87ac3f7f4115af13532f9e', name: 'header' }), h("div", { key: '2845052c8cbb636d67f7f8be9afef48fdff2b5de', part: 'body-container' }, h("slot", { key: '1b863e147e1c411b292675cda5d0ff240048b371', name: 'left-panel' }), h("slot", { key: '7da5ce54ad0fc813826f347412e58f78e80f6d08', name: 'body' }), h("slot", { key: 'da128e14c58634365d940a9f630404fdea1d0458', name: 'right-panel' })), h("slot", { key: '2d0b1b03ede81177670cfaa0ad6b0a86b508f1f3', name: 'footer' })), h("div", { key: '742fe0a1282c0f4b37c139ee5be0529d4078bff1', part: 'overlay-container' }, h("slot", { key: 'df3aeb289c5a28c1d7c7fa838747e7c4a8077c53', name: 'overlay' }))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "theme": ["themeChangeHandler"]
-    }; }
-    static get style() { return JePageStyle0; }
-}, [1, "je-page", {
-        "leftPanel": [513, "left-panel"],
-        "rightPanel": [513, "right-panel"],
-        "theme": [513]
-    }, undefined, {
-        "theme": ["themeChangeHandler"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["je-page"];
-    components.forEach(tagName => { switch (tagName) {
-        case "je-page":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, JePage$1);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const JePage = JePage$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { JePage, defineCustomElement };
-
-//# sourceMappingURL=je-page.js.map

package/dist/components/je-page.js.map

@@ -1 +0,0 @@
-{"file":"je-page.js","mappings":";;AAAA,MAAM,SAAS,GAAG,6qJAA6qJ,CAAC;AAChsJ,qBAAe,SAAS;;MCQXA,QAAM;;;;;;yBAEgC,QAAQ;0BACP,QAAQ;qBACE,OAAO;;IAGnE,gBAAgB;QACd,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;KACzH;IAGD,kBAAkB,CAAC,QAAmC;QACpD,IAAI,QAAQ,KAAK,MAAM;YACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;;YAEhC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;KACvG;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,IAAI,EAAC,gBAAgB,IACxB,6DAAM,IAAI,EAAC,QAAQ,GAAG,EACtB,4DAAK,IAAI,EAAC,gBAAgB,IACxB,6DAAM,IAAI,EAAC,YAAY,GAAG,EAC1B,6DAAM,IAAI,EAAC,MAAM,GAAG,EACpB,6DAAM,IAAI,EAAC,aAAa,GAAG,CACvB,EACN,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,EACN,4DAAK,IAAI,EAAC,mBAAmB,IAC3B,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["JePage"],"sources":["src/components/je-page/je-page.scss?tag=je-page&encapsulation=shadow","src/components/je-page/je-page.tsx"],"sourcesContent":["@use 'styles/colors' as colors;\n\n:host {\n  display: block;\n  height: 100%;\n  overflow: hidden;\n  font-size: var(--je-font-size);\n  font-family: var(--je-font-family);\n  color: var(--je-text-color);\n  background-color: var(--je-background-color);\n  color-scheme: light;\n\n  --je-font-size: 13px;\n  --je-font-family: system-ui, Roboto, 'Open Sans', 'Helvetica Neue', sans-serif;\n  --je-font-light: 400;\n  --je-font-regular: 500;\n  --je-font-semi-bold: 600;\n  --je-font-bold: 700;\n  --je-border-radius: 2px;\n  --je-text-color: var(--je-medium-900);\n  --je-background-color: var(--je-medium-50);\n  --je-backdrop-color: rgba(0, 0, 0, 0.5);\n\n  --je-spacing-3xs: 4px;\n  --je-spacing-2xs: 8px;\n  --je-spacing-xs: 10px;\n  --je-spacing-sm: 12px;\n  --je-spacing: 16px;\n  --je-spacing-lg: 20px;\n  --je-spacing-xl: 24px;\n  --je-spacing-2xl: 32px;\n  --je-spacing-3xl: 40px;\n\n  @include colors.generate-color-variables;\n\n  --je-left-sidepanel-open-width: 500px;\n  --je-left-sidepanel-minimized-width: 100px;\n  --je-left-sidepanel-border: solid 1px var(--je-text-color);\n  --je-right-sidepanel-open-width: 500px;\n  --je-right-sidepanel-minimized-width: 100px;\n  --je-right-sidepanel-border: solid 1px var(--je-text-color);\n}\n\n@mixin dark-theme-styles {\n  --je-text-color: var(--je-medium-50);\n  --je-background-color: var(--je-medium-900);\n}\n\n:host([theme='dark']) {\n  color-scheme: dark;\n  @include dark-theme-styles;\n}\n\n:host([theme='auto']) {\n  color-scheme: light dark;\n  @media (prefers-color-scheme: dark) {\n    @include dark-theme-styles;\n  }\n}\n\n[part='page-container'] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n[part='body-container'] {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n}\n\n::slotted([slot='body']) {\n  flex: 1;\n  box-sizing: border-box;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n::slotted([slot='header']) {\n  box-sizing: border-box;\n  z-index: 10;\n  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);\n}\n\n::slotted([slot='footer']) {\n  box-sizing: border-box;\n  box-shadow: #00000069 0px -5px 20px -10px;\n  //border-top: solid 1px lightgray;\n  z-index: 10;\n}\n\n@supports (-webkit-touch-callout: none) {\n  ::slotted([slot='header']) {\n    padding-top: env(safe-area-inset-top);\n    padding-left: env(safe-area-inset-left);\n    padding-right: env(safe-area-inset-right);\n  }\n\n  ::slotted([slot='footer']) {\n    padding-bottom: env(safe-area-inset-bottom);\n    padding-left: env(safe-area-inset-left);\n    padding-right: env(safe-area-inset-right);\n  }\n\n  .body-container {\n    padding-top: env(safe-area-inset-top);\n    padding-bottom: env(safe-area-inset-bottom);\n    margin-left: env(safe-area-inset-left);\n    margin-right: env(safe-area-inset-right);\n  }\n}\n\n:host([left-panel='open']) {\n  ::slotted([slot='left-panel']) {\n    width: var(--je-left-sidepanel-open-width);\n    border-right: var(--je-left-sidepanel-border);\n  }\n}\n\n:host([left-panel='minimized']) {\n  ::slotted([slot='left-panel']) {\n    width: var(--je-left-sidepanel-minimized-width);\n    border-right: var(--je-left-sidepanel-border);\n  }\n}\n\n:host([right-panel='open']) {\n  ::slotted([slot='right-panel']) {\n    width: var(--je-right-sidepanel-open-width);\n    border-left: var(--je-right-sidepanel-border);\n  }\n}\n\n:host([right-panel='minimized']) {\n  ::slotted([slot='right-panel']) {\n    width: var(--je-right-sidepanel-minimized-width);\n    border-left: var(--je-right-sidepanel-border);\n  }\n}\n\n:host([left-panel='closed']) {\n  ::slotted([slot='left-panel']) {\n    padding: 0 !important;\n  }\n}\n\n:host([right-panel='closed']) {\n  ::slotted([slot='right-panel']) {\n    padding: 0 !important;\n  }\n}\n\n::slotted([slot='left-panel']),\n::slotted([slot='right-panel']) {\n  display: block;\n  box-sizing: border-box;\n  overflow-y: auto;\n  overflow-x: hidden;\n  width: 0px;\n  border-right: none;\n  border-left: none;\n  transition: all 250ms ease-in-out;\n  margin: 0 !important;\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\nexport type PanelState = 'open' | 'closed' | 'minimized';\n\n@Component({\n  tag: 'je-page',\n  styleUrl: 'je-page.scss',\n  shadow: true\n})\nexport class JePage {\n  @Element() el!: HTMLElement;\n  @Prop({ reflect: true }) leftPanel: PanelState = 'closed';\n  @Prop({ reflect: true }) rightPanel: PanelState = 'closed';\n  @Prop({ reflect: true }) theme: 'light' | 'dark' | 'auto' = 'light';\n  @Event() themeChange: EventEmitter<'light' | 'dark'>;\n\n  componentDidLoad() {\n    this.themeChangeHandler(this.theme);\n    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => this.themeChangeHandler(this.theme));\n  }\n\n  @Watch('theme')\n  themeChangeHandler(newValue: 'light' | 'dark' | 'auto') {\n    if (newValue !== 'auto')\n      this.themeChange.emit(newValue);\n    else\n      this.themeChange.emit(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');\n  }\n\n  render() {\n    return (\n      <Host>\n        <div part='page-container'>\n          <slot name='header' />\n          <div part='body-container'>\n            <slot name='left-panel' />\n            <slot name='body' />\n            <slot name='right-panel' />\n          </div>\n          <slot name='footer' />\n        </div>\n        <div part='overlay-container'>\n          <slot name='overlay' />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/je-pill.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface JePill extends Components.JePill, HTMLElement {}
-export const JePill: {
-    prototype: JePill;
-    new (): JePill;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/je-pill.js

@@ -1,8 +0,0 @@
-import { J as JePill$1, d as defineCustomElement$1 } from './p-1f3759e7.js';
-
-const JePill = JePill$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { JePill, defineCustomElement };
-
-//# sourceMappingURL=je-pill.js.map

package/dist/components/je-pill.js.map

@@ -1 +0,0 @@
-{"file":"je-pill.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/je-placeholder.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface JePlaceholder extends Components.JePlaceholder, HTMLElement {}
-export const JePlaceholder: {
-    prototype: JePlaceholder;
-    new (): JePlaceholder;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/je-placeholder.js

@@ -1,40 +0,0 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-41492a72.js';
-
-const jePlaceholderCss = ":host{--je-background:#c7c7c7c5;--je-shimmer-color:#ffffff;border-radius:var(--je-border-radius, 2px);display:block;width:100%;height:inherit;margin-top:4px;margin-bottom:4px;background:var(--je-background);line-height:10px;user-select:none;pointer-events:none;opacity:0.7}:host(.animated){position:relative;background:linear-gradient(90deg, var(--je-background) 25%, var(--je-shimmer-color) 50%, var(--je-background) 75%);background-size:200% 100%;animation-duration:2.5s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:shimmer;animation-timing-function:linear}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}";
-const JePlaceholderStyle0 = jePlaceholderCss;
-
-const JePlaceholder$1 = /*@__PURE__*/ proxyCustomElement(class JePlaceholder extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.animated = true;
-    }
-    render() {
-        return (h(Host, { key: '0a01cc9c0d7cadff4a449895c64c7761cf0b116d', class: { 'animated': this.animated } }, h("slot", { key: 'be3e6370db2d577bd64f053360cf893f9beec2f1' })));
-    }
-    static get style() { return JePlaceholderStyle0; }
-}, [1, "je-placeholder", {
-        "animated": [4]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["je-placeholder"];
-    components.forEach(tagName => { switch (tagName) {
-        case "je-placeholder":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, JePlaceholder$1);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const JePlaceholder = JePlaceholder$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { JePlaceholder, defineCustomElement };
-
-//# sourceMappingURL=je-placeholder.js.map

package/dist/components/je-placeholder.js.map

@@ -1 +0,0 @@
-{"file":"je-placeholder.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,sqBAAsqB,CAAC;AAChsB,4BAAe,gBAAgB;;MCMlBA,eAAa;;;;;wBAIL,IAAI;;IAEvB,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAC,IACtC,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["JePlaceholder"],"sources":["src/components/je-placeholder/je-placeholder.scss?tag=je-placeholder&encapsulation=shadow","src/components/je-placeholder/je-placeholder.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --je-background: background color\n   * @prop shimmer-color: color of the shimmer animation\n   */\n  --je-background: #c7c7c7c5;\n  --je-shimmer-color: #ffffff;\n\n  border-radius: var(--je-border-radius, 2px);\n  display: block;\n  width: 100%;\n  height: inherit;\n  margin-top: 4px;\n  margin-bottom: 4px;\n  background: var(--je-background);\n  line-height: 10px;\n  user-select: none;\n  pointer-events: none;\n  opacity: 0.7;\n}\n\n:host(.animated) {\n  position: relative;\n  background: linear-gradient(90deg, var(--je-background) 25%, var(--je-shimmer-color) 50%, var(--je-background) 75%);\n  background-size: 200% 100%;\n  animation-duration: 2.5s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: shimmer;\n  animation-timing-function: linear;\n}\n\n@keyframes shimmer {\n  0% {\n    background-position: 200% 0;\n  }\n\n  100% {\n    background-position: -200% 0;\n  }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'je-placeholder',\n  styleUrl: 'je-placeholder.scss',\n  shadow: true,\n})\nexport class JePlaceholder {\n  /**\n   * Whether or not the component should have the animated \"shimmer\" effect\n   */\n  @Prop() animated = true;\n\n  render() {\n    return (\n      <Host class={{'animated': this.animated}}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/je-popover.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface JePopover extends Components.JePopover, HTMLElement {}
-export const JePopover: {
-    prototype: JePopover;
-    new (): JePopover;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/je-popover.js

@@ -1,8 +0,0 @@
-import { J as JePopover$1, d as defineCustomElement$1 } from './p-5dee004d.js';
-
-const JePopover = JePopover$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { JePopover, defineCustomElement };
-
-//# sourceMappingURL=je-popover.js.map

package/dist/components/je-popover.js.map

@@ -1 +0,0 @@
-{"file":"je-popover.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/je-radio-group.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface JeRadioGroup extends Components.JeRadioGroup, HTMLElement {}
-export const JeRadioGroup: {
-    prototype: JeRadioGroup;
-    new (): JeRadioGroup;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;