jebamo 0.0.9 → 0.0.11

package/components/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;

package/components/index.js

@@ -0,0 +1,139 @@
+export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-CL0NicyQ.js';
+
+const createDialog = (options) => {
+    const dialog = document.createElement('je-modal');
+    dialog.size = 'sm';
+    dialog.setHTMLUnsafe(`
+    <je-form>
+      <div class="je-dialog-container">
+        <template shadowrootmode="open">
+          <style>
+            :host {
+              display: flex;
+              flex-direction: column;
+              gap: 1rem;
+              padding: 1rem;
+              box-sizing: border-box;
+            }
+          </style>
+          <je-toolbar>
+            <slot name="icon"></slot>
+            <slot name="header"></slot>
+            <je-icon-button icon="close" slot="end"></je-icon-button>
+          </je-toolbar>
+          <slot name="message"></slot>
+          <slot name="controls"></slot>
+          <slot name="buttons"></slot>
+        </template>
+      </div>
+    </je-form>
+  `);
+    dialog.backdropDismiss = options.backdropDismiss;
+    dialog.showBackdrop = options.showBackdrop;
+    document.body.append(dialog);
+    const container = dialog.querySelector('.je-dialog-container');
+    if (options.header) {
+        container.insertAdjacentHTML('afterbegin', `
+      <h3 slot="header">${options.header}</h3>
+    `);
+    }
+    if (options.message) {
+        container.insertAdjacentHTML('beforeend', `
+      <je-label slot="message">${options.message}</je-label>
+    `);
+    }
+    if (options.icon) {
+        container.insertAdjacentHTML('afterbegin', `
+      <je-icon fill slot="icon">${options.icon}</je-icon>
+    `);
+    }
+    if (options.controls) {
+        container.insertAdjacentHTML('beforeend', `
+      <div slot="controls" class="je-dialog-controls"></div>
+    `);
+        const controls = container.querySelector('.je-dialog-controls');
+        options.controls.forEach(control => {
+            const input = document.createElement('je-textfield');
+            input.label = control.label;
+            input.placeholder = control.placeholder;
+            input.validators = control.validators;
+            input.required = control.required;
+            input.type = control.type;
+            input.setAttribute('name', control.name);
+            input.originalValue = control.originalValue;
+            input.value = control.value;
+            input.debounce = control.debounce;
+            input.addEventListener('valueChange', control.valueChangeHandler);
+            controls.append(input);
+        });
+    }
+    if (options.buttons) {
+        container.insertAdjacentHTML('beforeend', `
+      <je-toolbar slot="buttons" class="je-dialog-buttons"></je-toolbar>
+    `);
+        const buttons = container.querySelector('.je-dialog-buttons');
+        options.buttons.forEach(button => {
+            const btn = document.createElement('je-button');
+            btn.textContent = button.text;
+            btn.fill = button.fill;
+            btn.color = button.color;
+            btn.type = button.type;
+            btn.size = button.size;
+            btn.slot = 'end';
+            if (button.handler)
+                btn.addEventListener('click', () => button.handler(dialog));
+            buttons.append(btn);
+        });
+    }
+    const closeButton = container.shadowRoot.querySelector('je-icon-button');
+    closeButton.addEventListener('click', () => dialog.hide(), { once: true });
+    const form = dialog.querySelector('je-form');
+    form.addEventListener('submit', () => dialog.hide(), { once: true });
+    dialog.addEventListener('dismiss', () => dialog.remove(), { once: true });
+    return [dialog, form];
+};
+
+const createToast = (options) => {
+    const toast = document.createElement('je-alert');
+    toast.color = options.color;
+    toast.duration = options.duration;
+    toast.progress = options.progress;
+    toast.closable = options.closable;
+    toast.header = options.header;
+    toast.message = options.message;
+    toast.icon = options.icon;
+    if (options.buttons) {
+        options.buttons.forEach(button => {
+            var _a;
+            const btn = document.createElement('je-button');
+            btn.textContent = button.text;
+            btn.fill = button.fill;
+            btn.color = button.color;
+            btn.size = (_a = button.size) !== null && _a !== void 0 ? _a : 'sm';
+            btn.slot = 'buttons';
+            if (button.handler)
+                btn.addEventListener('click', () => button.handler(toast));
+            toast.append(btn);
+        });
+    }
+    let container = document.querySelector(`je-toast-container[position=${options.position}]`);
+    if (!container) {
+        container = document.createElement('je-toast-container');
+        container.position = options.position;
+        document.body.append(container);
+        container.popover = 'manual';
+    }
+    container.append(toast);
+    if (!container.matches(':popover-open')) {
+        container.showPopover();
+    }
+    toast.didDismiss().then(() => {
+        toast.remove();
+    });
+    return toast;
+};
+
+export { createDialog, createToast };
+//# sourceMappingURL=index.js.map
+
+//# sourceMappingURL=index.js.map

package/components/index.js.map

@@ -0,0 +1 @@
+{"file":"index.js","mappings":"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","names":[],"sources":["src/utils/functions/create-dialog.ts","src/utils/functions/create-toast.ts"],"sourcesContent":["import { Color } from \"../utils\";\n\nexport type DialogControl = {\n  label?: string;\n  placeholder?: string;\n  validators?: HTMLJeTextfieldElement['validators'];\n  required?: boolean;\n  type?: string;\n  originalValue?: string;\n  value?: string;\n  name?: string;\n  debounce?: number;\n  valueChangeHandler?: (input: any) => void | Promise<void>;\n};\n\nexport type DialogButton = {\n  text?: string;\n  fill?: 'solid' | 'outline' | 'clear';\n  color?: Color;\n  type?: 'submit' | 'reset';\n  size?: 'sm' | 'md' | 'lg';\n  handler?: (dialog: HTMLJeModalElement) => void | Promise<void>;\n};\n\nexport type CreateDialogOptions = {\n  header?: string,\n  message?: string,\n  icon?: string,\n  buttons?: DialogButton[];\n  controls?: DialogControl[],\n  showBackdrop?: boolean,\n  backdropDismiss?: boolean\n}\n\nexport const createDialog = (options: CreateDialogOptions) => {\n  const dialog = document.createElement('je-modal');\n  dialog.size = 'sm';\n  dialog.setHTMLUnsafe(`\n    <je-form>\n      <div class=\"je-dialog-container\">\n        <template shadowrootmode=\"open\">\n          <style>\n            :host {\n              display: flex;\n              flex-direction: column;\n              gap: 1rem;\n              padding: 1rem;\n              box-sizing: border-box;\n            }\n          </style>\n          <je-toolbar>\n            <slot name=\"icon\"></slot>\n            <slot name=\"header\"></slot>\n            <je-icon-button icon=\"close\" slot=\"end\"></je-icon-button>\n          </je-toolbar>\n          <slot name=\"message\"></slot>\n          <slot name=\"controls\"></slot>\n          <slot name=\"buttons\"></slot>\n        </template>\n      </div>\n    </je-form>\n  `)\n  dialog.backdropDismiss = options.backdropDismiss;\n  dialog.showBackdrop = options.showBackdrop;\n  document.body.append(dialog);\n  const container = dialog.querySelector('.je-dialog-container')\n  if (options.header) {\n    container.insertAdjacentHTML('afterbegin', `\n      <h3 slot=\"header\">${options.header}</h3>\n    `)\n  }\n  if (options.message) {\n    container.insertAdjacentHTML('beforeend', `\n      <je-label slot=\"message\">${options.message}</je-label>\n    `)\n  }\n  if (options.icon) {\n    container.insertAdjacentHTML('afterbegin', `\n      <je-icon fill slot=\"icon\">${options.icon}</je-icon>\n    `)\n  }\n  if (options.controls) {\n    container.insertAdjacentHTML('beforeend', `\n      <div slot=\"controls\" class=\"je-dialog-controls\"></div>\n    `)\n    const controls = container.querySelector('.je-dialog-controls');\n    options.controls.forEach(control => {\n      const input = document.createElement('je-textfield');\n      input.label = control.label;\n      input.placeholder = control.placeholder;\n      input.validators = control.validators;\n      input.required = control.required;\n      input.type = control.type;\n      input.setAttribute('name', control.name)\n      input.originalValue = control.originalValue;\n      input.value = control.value;\n      input.debounce = control.debounce;\n      input.addEventListener('valueChange', control.valueChangeHandler);\n      controls.append(input);\n    })\n  }\n  if (options.buttons) {\n    container.insertAdjacentHTML('beforeend', `\n      <je-toolbar slot=\"buttons\" class=\"je-dialog-buttons\"></je-toolbar>\n    `)\n    const buttons = container.querySelector('.je-dialog-buttons');\n    options.buttons.forEach(button => {\n      const btn = document.createElement('je-button');\n      btn.textContent = button.text;\n      btn.fill = button.fill;\n      btn.color = button.color;\n      btn.type = button.type;\n      btn.size = button.size;\n      btn.slot = 'end';\n      if (button.handler) btn.addEventListener('click', () => button.handler(dialog));\n      buttons.append(btn);\n    })\n  }\n  const closeButton = container.shadowRoot.querySelector('je-icon-button')\n  closeButton.addEventListener('click', () => dialog.hide(), { once: true });\n  const form = dialog.querySelector('je-form');\n  form.addEventListener('submit', () => dialog.hide(), { once: true });\n  dialog.addEventListener('dismiss', () => dialog.remove(), { once: true });\n  return [dialog, form] as const;\n}\n","import { Color } from \"../utils\";\n\nexport type CreateToastOptions = {\n  header?: string;\n  message?: string;\n  color?: Color;\n  duration?: number;\n  progress?: boolean;\n  icon?: string;\n  closable?: boolean;\n  position?: 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';\n  buttons?: {\n    text?: string;\n    fill?: 'solid' | 'outline' | 'clear';\n    color?: Color;\n    size?: 'sm' | 'md' | 'lg';\n    handler?: (toast: HTMLJeAlertElement) => void | Promise<void>;\n  }[];\n};\n\nexport const createToast = (options: CreateToastOptions) => {\n  const toast = document.createElement('je-alert');\n  toast.color = options.color;\n  toast.duration = options.duration;\n  toast.progress = options.progress;\n  toast.closable = options.closable;\n  toast.header = options.header;\n  toast.message = options.message;\n  toast.icon = options.icon;\n  if (options.buttons) {\n    options.buttons.forEach(button => {\n      const btn = document.createElement('je-button');\n      btn.textContent = button.text;\n      btn.fill = button.fill;\n      btn.color = button.color;\n      btn.size = button.size ?? 'sm';\n      btn.slot = 'buttons';\n      if (button.handler) btn.addEventListener('click', () => button.handler(toast));\n      toast.append(btn);\n    })\n  }\n  let container = document.querySelector<HTMLJeToastContainerElement>(`je-toast-container[position=${options.position}]`);\n  if (!container) {\n    container = document.createElement('je-toast-container');\n    container.position = options.position;\n    document.body.append(container);\n    container.popover = 'manual';\n  }\n\n  container.append(toast)\n  if (!container.matches(':popover-open')) {\n    container.showPopover()\n  }\n  toast.didDismiss().then(() => {\n    toast.remove()\n  })\n  return toast;\n}\n"],"version":3}

package/components/je-accordion.d.ts

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

package/components/je-accordion.js

@@ -0,0 +1,68 @@
+import { p as proxyCustomElement, H, h } from './p-CL0NicyQ.js';
+
+const jeAccordionCss = ":host{display:flex;flex-direction:column}";
+
+const JeAccordion$1 = /*@__PURE__*/ proxyCustomElement(class JeAccordion extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    onExpand(ev) {
+        const { target } = ev;
+        const sections = Array.from(this.el.querySelectorAll('je-details'));
+        sections.forEach(section => {
+            if (section !== target) {
+                section.open = false;
+            }
+        });
+    }
+    onKeydown(ev) {
+        if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
+            ev.preventDefault();
+            const sections = Array.from(this.el.querySelectorAll('je-details'));
+            const index = sections.indexOf(ev.target);
+            const nextIndex = ev.key === 'ArrowDown' ? index + 1 : index - 1;
+            if (nextIndex >= 0 && nextIndex < sections.length) {
+                sections[nextIndex].focus();
+            }
+        }
+        if (ev.key === 'Home') {
+            ev.preventDefault();
+            const sections = Array.from(this.el.querySelectorAll('je-details'));
+            sections[0].focus();
+        }
+        if (ev.key === 'End') {
+            ev.preventDefault();
+            const sections = Array.from(this.el.querySelectorAll('je-details'));
+            sections[sections.length - 1].focus();
+        }
+    }
+    render() {
+        return h("slot", { key: 'a87df3e9b05966bba67d9aed830a95cb39293ff7' });
+    }
+    get el() { return this; }
+    static get style() { return jeAccordionCss; }
+}, [1, "je-accordion", undefined, [[0, "expand", "onExpand"], [0, "keydown", "onKeydown"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["je-accordion"];
+    components.forEach(tagName => { switch (tagName) {
+        case "je-accordion":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, JeAccordion$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const JeAccordion = JeAccordion$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { JeAccordion, defineCustomElement };
+//# sourceMappingURL=je-accordion.js.map
+
+//# sourceMappingURL=je-accordion.js.map

package/components/je-accordion.js.map

@@ -0,0 +1 @@
+{"file":"je-accordion.js","mappings":";;AAAA,MAAM,cAAc,GAAG,2CAA2C;;MCQrDA,aAAW,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;;;;;;AAItB,IAAA,QAAQ,CAAC,EAA8B,EAAA;AACrC,QAAA,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE;AACrB,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;AACnE,QAAA,QAAQ,CAAC,OAAO,CAAC,OAAO,IAAG;AACzB,YAAA,IAAI,OAAO,KAAK,MAAM,EAAE;AACtB,gBAAA,OAAO,CAAC,IAAI,GAAG,KAAK;;AAExB,SAAC,CAAC;;AAIJ,IAAA,SAAS,CAAC,EAAiB,EAAA;AACzB,QAAA,IAAI,EAAE,CAAC,GAAG,KAAK,WAAW,IAAI,EAAE,CAAC,GAAG,KAAK,SAAS,EAAE;YAClD,EAAE,CAAC,cAAc,EAAE;AACnB,YAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;YACnE,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,MAA8B,CAAC;AACjE,YAAA,MAAM,SAAS,GAAG,EAAE,CAAC,GAAG,KAAK,WAAW,GAAG,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC;YAChE,IAAI,SAAS,IAAI,CAAC,IAAI,SAAS,GAAG,QAAQ,CAAC,MAAM,EAAE;AACjD,gBAAA,QAAQ,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE;;;AAG/B,QAAA,IAAI,EAAE,CAAC,GAAG,KAAK,MAAM,EAAE;YACrB,EAAE,CAAC,cAAc,EAAE;AACnB,YAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;AACnE,YAAA,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE;;AAErB,QAAA,IAAI,EAAE,CAAC,GAAG,KAAK,KAAK,EAAE;YACpB,EAAE,CAAC,cAAc,EAAE;AACnB,YAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;YACnE,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE;;;IAIzC,MAAM,GAAA;QACJ,OAAO,8DAAO;;;;;;;;;;;;;;;;;;;;;;;;;","names":["JeAccordion","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/je-accordion/je-accordion.scss?tag=je-accordion&encapsulation=shadow","src/components/je-accordion/je-accordion.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n}\n","import { Component, Element, Listen, h } from '@stencil/core';\nimport { JeDetailsCustomEvent } from '../../components';\n\n@Component({\n  tag: 'je-accordion',\n  styleUrl: 'je-accordion.scss',\n  shadow: true,\n})\nexport class JeAccordion {\n  @Element() el: HTMLJeAccordionElement;\n\n  @Listen('expand')\n  onExpand(ev: JeDetailsCustomEvent<void>) {\n    const { target } = ev;\n    const sections = Array.from(this.el.querySelectorAll('je-details'));\n    sections.forEach(section => {\n      if (section !== target) {\n        section.open = false;\n      }\n    });\n  }\n\n  @Listen('keydown')\n  onKeydown(ev: KeyboardEvent) {\n    if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {\n      ev.preventDefault()\n      const sections = Array.from(this.el.querySelectorAll('je-details'));\n      const index = sections.indexOf(ev.target as HTMLJeDetailsElement);\n      const nextIndex = ev.key === 'ArrowDown' ? index + 1 : index - 1;\n      if (nextIndex >= 0 && nextIndex < sections.length) {\n        sections[nextIndex].focus();\n      }\n    }\n    if (ev.key === 'Home') {\n      ev.preventDefault()\n      const sections = Array.from(this.el.querySelectorAll('je-details'));\n      sections[0].focus();\n    }\n    if (ev.key === 'End') {\n      ev.preventDefault()\n      const sections = Array.from(this.el.querySelectorAll('je-details'));\n      sections[sections.length - 1].focus();\n    }\n  }\n\n  render() {\n    return <slot/>\n  }\n}\n"],"version":3}

package/components/je-action-sheet.d.ts

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

package/components/je-action-sheet.js

@@ -0,0 +1,150 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CL0NicyQ.js';
+
+const jeActionSheetCss = ":host{display:contents;--padding:var(--je-spacing-lg, 1.25rem);--background:light-dark(rgb(233, 236, 236), rgb(41, 45, 46));--color:light-dark(color-mix(in srgb, var(--je-secondary, #99becb) 20%, black 80%), color-mix(in srgb, var(--je-secondary, #99becb) 10%, white 90%))}[part=inner-container]{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%}.slot-container{flex:1;overflow-y:auto}.drag-handle{display:block;height:4px;width:36px;border-radius:100px;background-color:light-dark(color-mix(in srgb, var(--je-secondary, #99becb) 80%, white 20%), color-mix(in srgb, var(--je-secondary, #99becb) 80%, black 20%))}.drag-container{display:none;justify-content:center;align-items:center;height:32px}@media (any-pointer: coarse){.drag-container{display:flex}}dialog[open]{height:var(--height)}dialog{top:unset;bottom:0;left:0;right:0;width:100%;height:0;max-width:100vw;max-height:100vh;background-color:var(--background);color:var(--color);box-sizing:border-box;border:0;padding:var(--padding);margin:0;padding-bottom:env(safe-area-inset-bottom);overflow-y:hidden;transition:all var(--drag-transition, 300ms) ease-in-out allow-discrete}dialog:focus-visible{outline:0}dialog::backdrop{opacity:0;background-color:var(--je-backdrop-color, rgba(0, 0, 0, 0.5));transition:all 300ms ease-in-out allow-discrete;cursor:pointer}dialog[open]::backdrop{opacity:1}@starting-style{dialog[open]::backdrop {\n    opacity: 0}dialog[open]{height:0}";
+
+const JeActionSheet$1 = /*@__PURE__*/ proxyCustomElement(class JeActionSheet extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.present = createEvent(this, "present", 7);
+        this.dismiss = createEvent(this, "dismiss", 7);
+        this.startY = 0;
+        this.startHeightPx = 0;
+        this.dragging = false;
+        this.currentHeightPx = 0;
+        /** Opens and closes modal */
+        this.open = false;
+        /** Minimum height (collapsed state). */
+        this.minPercent = 30;
+        /** Intermediate height (mid state). */
+        this.midPercent = 60;
+        /** Maximum height (expanded fullscreen). */
+        this.maxPercent = 90;
+        this.onTransitionEnd = async (event) => {
+            if (event.target === this.dialogEl && event.propertyName === 'opacity') {
+                if (this.open) {
+                    this.dialogEl.style.setProperty('--drag-transition', '50ms');
+                    this.present.emit();
+                }
+                else {
+                    if (this.destroy) {
+                        await this.destroy();
+                    }
+                    this.dismiss.emit({ role: this.role, data: this.data });
+                    this.role = undefined;
+                    this.data = undefined;
+                }
+            }
+        };
+        this.handleTouchStart = (event) => {
+            this.dragging = true;
+            this.startY = event.touches[0].clientY;
+            this.startHeightPx = this.currentHeightPx;
+        };
+        this.handleTouchMove = (event) => {
+            if (!this.dragging)
+                return;
+            const deltaY = this.startY - event.touches[0].clientY;
+            let newHeight = this.startHeightPx + deltaY;
+            if (newHeight < this.minPx)
+                newHeight = this.minPx;
+            if (newHeight > this.maxPx)
+                newHeight = this.maxPx;
+            this.currentHeightPx = newHeight;
+        };
+        this.handleTouchEnd = () => {
+            this.dragging = false;
+            if (this.currentHeightPx < this.midPx) {
+                const midpoint = (this.minPx + this.midPx) / 2;
+                this.currentHeightPx = this.currentHeightPx < midpoint ? this.minPx : this.midPx;
+            }
+            else {
+                const midpoint = (this.midPx + this.maxPx) / 2;
+                this.currentHeightPx = this.currentHeightPx < midpoint ? this.midPx : this.maxPx;
+            }
+        };
+    }
+    get minPx() {
+        return window.innerHeight * (this.minPercent / 100);
+    }
+    get midPx() {
+        return window.innerHeight * (this.midPercent / 100);
+    }
+    get maxPx() {
+        return window.innerHeight * (this.maxPercent / 100);
+    }
+    componentWillLoad() {
+        this.currentHeightPx = this.minPx;
+    }
+    async onOpenChange(open) {
+        if (open) {
+            if (this.init) {
+                await this.init();
+            }
+            this.dialogEl.showModal();
+        }
+        else {
+            this.dialogEl.style.removeProperty('--drag-transition');
+            this.dialogEl.close();
+        }
+    }
+    onClick(event) {
+        if (event.composedPath().includes(this.dialogEl)) {
+            this.hide('backdropDismiss');
+        }
+        else if (event.target === this.el.querySelector(':scope > [slot=trigger]')) {
+            this.show();
+        }
+    }
+    async show() {
+        this.open = true;
+    }
+    async hide(role = 'manualClose', data) {
+        this.role = role;
+        this.data = data;
+        this.open = false;
+    }
+    render() {
+        return (h(Host, { key: 'a4f1b0112ee2ba6378faf7820633e4b9cbf623e0' }, h("style", { key: '82dea79e5e8801e453a40120cdd2c8b878b0c665' }, this.open ? `:host{--height:${this.currentHeightPx}px;}` : ''), h("slot", { key: 'e500e1c6b098e9ac98c5347873212c833261a9c5', name: "trigger" }), h("dialog", { key: 'c1a762048317d44d42a489c0b6b2d2f2387a7a6d', ref: el => (this.dialogEl = el), part: "dialog", onTransitionEnd: this.onTransitionEnd }, h("div", { key: 'e7bc88a56899805be5348d0411caac076a557ee1', part: "inner-container", onClick: e => e.stopPropagation() }, h("div", { key: '96c7b2a1147b3c5990f6194ba4191ce68979512b', class: "drag-container", onTouchStart: this.handleTouchStart, onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd }, h("div", { key: 'd8bbee956457002c2fbcdb74ca696a94be0e1fa4', class: "drag-handle" })), h("div", { key: '9e00125909c85485cb447365cd8c77539c175a93', class: "slot-container" }, h("slot", { key: '5a218bc95057a9cdc07d36ce7086e61d28c1aa04' }))))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "open": ["onOpenChange"]
+    }; }
+    static get style() { return jeActionSheetCss; }
+}, [1, "je-action-sheet", {
+        "open": [1028],
+        "init": [16],
+        "destroy": [16],
+        "minPercent": [2, "min-percent"],
+        "midPercent": [2, "mid-percent"],
+        "maxPercent": [2, "max-percent"],
+        "currentHeightPx": [32],
+        "show": [64],
+        "hide": [64]
+    }, [[0, "click", "onClick"]], {
+        "open": ["onOpenChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["je-action-sheet"];
+    components.forEach(tagName => { switch (tagName) {
+        case "je-action-sheet":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, JeActionSheet$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const JeActionSheet = JeActionSheet$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { JeActionSheet, defineCustomElement };
+//# sourceMappingURL=je-action-sheet.js.map
+
+//# sourceMappingURL=je-action-sheet.js.map

package/components/je-action-sheet.js.map

@@ -0,0 +1 @@
+{"file":"je-action-sheet.js","mappings":"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","names":["JeActionSheet","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/je-action-sheet/je-action-sheet.scss?tag=je-action-sheet&encapsulation=shadow","src/components/je-action-sheet/je-action-sheet.tsx"],"sourcesContent":["@use '../../styles/styles' as *;\n\n:host {\n  display: contents;\n\n  --padding: #{spacing-get(lg)};\n  --background: light-dark(rgb(233, 236, 236), rgb(41, 45, 46));\n  --color: light-dark(#{secondary(900)}, #{secondary(50)});\n}\n\n[part=inner-container] {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n}\n\n.slot-container {\n  flex: 1;\n  overflow-y: auto;\n}\n\n.drag-handle {\n  display: block;\n  height: 4px;\n  width: 36px;\n  border-radius: 100px;\n  background-color: light-dark(secondary(400), secondary(600));\n}\n\n.drag-container {\n  display: none;\n  justify-content: center;\n  align-items: center;\n  height: 32px;\n  @media (any-pointer: coarse) {\n    display: flex;\n  }\n}\n\ndialog[open] {\n  height: var(--height);\n}\n\ndialog {\n  top: unset;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  width: 100%;\n  height: 0;\n  max-width: 100vw;\n  max-height: 100vh;\n  background-color: var(--background);\n  color: var(--color);\n  box-sizing: border-box;\n  border: 0;\n  padding: var(--padding);\n  margin: 0;\n  padding-bottom: env(safe-area-inset-bottom);\n  overflow-y: hidden;\n  transition: all var(--drag-transition, 300ms) ease-in-out allow-discrete;\n  &:focus-visible {\n    outline: 0;\n  }\n}\n\ndialog::backdrop {\n  opacity: 0;\n  background-color: backdrop-color();\n  transition: all 300ms ease-in-out allow-discrete;\n  cursor: pointer;\n}\n\ndialog[open]::backdrop {\n  opacity: 1;\n}\n\n@starting-style {\n  dialog[open]::backdrop {\n    opacity: 0;\n  }\n\n  dialog[open] {\n    height: 0;\n  }\n}\n","import { Component, h, Element, EventEmitter, Host, Listen, Method, Prop, Watch, Event, State } from '@stencil/core';\nimport { OverlayData } from '../../utils/utils';\n\n@Component({\n  tag: 'je-action-sheet',\n  styleUrl: 'je-action-sheet.scss',\n  shadow: true\n})\nexport class JeActionSheet {\n  private role?: string;\n  private data?: any;\n  private dialogEl!: HTMLDialogElement;\n  private startY = 0;\n  private startHeightPx = 0;\n  private dragging = false;\n  private get minPx() {\n    return window.innerHeight * (this.minPercent / 100);\n  }\n  private get midPx() {\n    return window.innerHeight * (this.midPercent / 100);\n  }\n  private get maxPx() {\n    return window.innerHeight * (this.maxPercent / 100);\n  }\n  @Element() el!: HTMLElement;\n\n  @State() currentHeightPx = 0;\n\n  /** Opens and closes modal */\n  @Prop({ mutable: true }) open = false;\n\n  /** Optionally execute a promise before presentation begins */\n  @Prop() init?: () => void | Promise<void>;\n\n  /** Optionally execute a promise before closing begins */\n  @Prop() destroy?: () => void | Promise<void>;\n\n  /** Minimum height (collapsed state). */\n  @Prop() minPercent = 30;\n\n  /** Intermediate height (mid state). */\n  @Prop() midPercent = 60;\n\n  /** Maximum height (expanded fullscreen). */\n  @Prop() maxPercent = 90;\n\n  /** Emits whenever the drawer has opened. Does not emit any data */\n  @Event() present: EventEmitter;\n\n  /** Emits whenever the drawer has finished closing. Emits the role and optional data object passed to the hide() method. */\n  @Event() dismiss: EventEmitter<OverlayData>;\n\n  componentWillLoad() {\n    this.currentHeightPx = this.minPx;\n  }\n\n  @Watch('open')\n  async onOpenChange(open: boolean) {\n    if (open) {\n      if (this.init) {\n        await this.init();\n      }\n      this.dialogEl.showModal();\n    } else {\n      this.dialogEl.style.removeProperty('--drag-transition');\n      this.dialogEl.close();\n    }\n  }\n\n  @Listen('click')\n  onClick(event: MouseEvent) {\n    if (event.composedPath().includes(this.dialogEl)) {\n      this.hide('backdropDismiss');\n    } else if (event.target === this.el.querySelector(':scope > [slot=trigger]')) {\n      this.show();\n    }\n  }\n\n  @Method()\n  async show() {\n    this.open = true;\n  }\n\n  @Method()\n  async hide(role = 'manualClose', data?: any) {\n    this.role = role;\n    this.data = data;\n    this.open = false;\n  }\n\n  private onTransitionEnd = async (event: TransitionEvent) => {\n    if (event.target === this.dialogEl && event.propertyName === 'opacity') {\n      if (this.open) {\n        this.dialogEl.style.setProperty('--drag-transition', '50ms');\n        this.present.emit();\n      } else {\n        if (this.destroy) {\n          await this.destroy();\n        }\n        this.dismiss.emit({ role: this.role, data: this.data });\n        this.role = undefined;\n        this.data = undefined;\n      }\n    }\n  };\n\n  private handleTouchStart = (event: TouchEvent) => {\n    this.dragging = true;\n    this.startY = event.touches[0].clientY;\n    this.startHeightPx = this.currentHeightPx;\n  };\n\n  private handleTouchMove = (event: TouchEvent) => {\n    if (!this.dragging) return;\n    const deltaY = this.startY - event.touches[0].clientY;\n    let newHeight = this.startHeightPx + deltaY;\n    if (newHeight < this.minPx) newHeight = this.minPx;\n    if (newHeight > this.maxPx) newHeight = this.maxPx;\n    this.currentHeightPx = newHeight;\n  };\n\n  private handleTouchEnd = () => {\n    this.dragging = false;\n    if (this.currentHeightPx < this.midPx) {\n      const midpoint = (this.minPx + this.midPx) / 2;\n      this.currentHeightPx = this.currentHeightPx < midpoint ? this.minPx : this.midPx;\n    } else {\n      const midpoint = (this.midPx + this.maxPx) / 2;\n      this.currentHeightPx = this.currentHeightPx < midpoint ? this.midPx : this.maxPx;\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <style>{this.open ? `:host{--height:${this.currentHeightPx}px;}` : ''}</style>\n        <slot name=\"trigger\" />\n        <dialog ref={el => (this.dialogEl = el)} part=\"dialog\" onTransitionEnd={this.onTransitionEnd}>\n          <div part=\"inner-container\" onClick={e => e.stopPropagation()}>\n            <div class=\"drag-container\" onTouchStart={this.handleTouchStart} onTouchMove={this.handleTouchMove} onTouchEnd={this.handleTouchEnd}>\n              <div class=\"drag-handle\"></div>\n            </div>\n            <div class=\"slot-container\">\n              <slot />\n            </div>\n          </div>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/je-alert.d.ts

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

package/components/je-alert.js

@@ -0,0 +1,132 @@
+import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h, F as Fragment, d as Host } from './p-CL0NicyQ.js';
+import { d as defineCustomElement$5 } from './p-BdkCRVdl.js';
+import { d as defineCustomElement$4 } from './p-ieY9b0db.js';
+import { d as defineCustomElement$3 } from './p-Du_Ow8H0.js';
+import { d as defineCustomElement$2 } from './p-BD1TXl5r.js';
+
+const jeAlertCss = ":host{display:none;overflow:hidden;position:relative;box-shadow:var(--box-shadow);border:var(--border);border-radius:var(--je-radius-md, 0.375rem);box-sizing:border-box;background-color:var(--background);color:var(--color);padding:var(--je-spacing-md, 1rem);grid-template-columns:auto 1fr auto;grid-auto-rows:auto;align-items:center;column-gap:var(--je-spacing-sm, 0.75rem);row-gap:var(--je-spacing-2xs, 0.25rem);--background:light-dark(rgb(233, 236, 236), rgb(41, 45, 46));--color:light-dark(color-mix(in srgb, var(--je-secondary, #99becb) 40%, black 60%), color-mix(in srgb, var(--je-secondary, #99becb) 60%, white 40%));--box-shadow:0px 4px 16px 0px light-dark(rgba(0, 0, 0, 0.12), rgba(68, 68, 68, 0.12));--border:solid 1px light-dark(rgb(197, 200, 204), rgb(86, 87, 90))}:host([color=primary]){--accent:light-dark(var(--je-primary, #4141e8), color-mix(in srgb, var(--je-primary, #4141e8) 40%, white 60%))}:host([color=secondary]){--accent:light-dark(color-mix(in srgb, var(--je-secondary, #99becb) 80%, black 20%), var(--je-secondary, #99becb))}:host([color=warning]){--accent:var(--je-warning, #fbbf24)}:host([color=danger]){--accent:light-dark(color-mix(in srgb, var(--je-danger, #ae1818) 80%, white 20%), color-mix(in srgb, var(--je-danger, #ae1818) 60%, white 40%))}:host([color=success]){--accent:color-mix(in srgb, var(--je-success, #22c55e) 80%, black 20%)}:host(.visible){display:grid}:host(.open){animation:fadeIn 600ms forwards}:host(:not(.open)){animation:fadeOut 600ms forwards}@keyframes fadeIn{from{opacity:0;transform:scale(0%)}to{opacity:1;transform:scale(100%)}}@keyframes fadeOut{from{opacity:1;transform:scale(100%)}to{opacity:0;transform:scale(0%)}}[part=header]{font-weight:bold;display:block;box-sizing:border-box;font-size:var(--je-font-lg, 1.25rem);line-height:1}[part=message]{line-height:1}je-icon{display:block;color:var(--accent)}.border{position:absolute;top:0;left:0;background-color:var(--accent);width:100%;height:var(--je-spacing-xs, 0.5rem)}.progress{position:absolute;bottom:0;left:0;width:100%;background-color:var(--accent);height:var(--je-spacing-2xs, 0.25rem);animation:shorten linear forwards;animation-play-state:paused}.progress.running{animation-play-state:running}.progress:not(.visible){opacity:0}@keyframes shorten{from{width:100%}to{width:0}}slot[name=buttons]{display:flex;align-items:center;gap:var(--je-spacing-sm, 0.75rem)}";
+
+const JeAlert$1 = /*@__PURE__*/ proxyCustomElement(class JeAlert extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.present = createEvent(this, "present", 7);
+        this.dismiss = createEvent(this, "dismiss", 7);
+        this.paused = true;
+        this.closable = false;
+        this.color = 'primary';
+        this.duration = 0;
+        this.progress = false;
+        this.open = false;
+    }
+    componentWillRender() {
+        if (this.open) {
+            this.el.classList.add('visible');
+        }
+    }
+    async show() {
+        this.open = true;
+    }
+    async hide(role, data) {
+        this.role = role;
+        this.data = data;
+        this.open = false;
+    }
+    didDismiss() {
+        return new Promise(resolve => {
+            this.el.addEventListener('dismiss', e => resolve(e.detail), { once: true });
+        });
+    }
+    onAnimationEnd(e) {
+        var _a;
+        if (e.animationName == 'fadeOut' && e.target == this.el) {
+            this.el.classList.remove('visible');
+            this.paused = true;
+            this.dismiss.emit({
+                role: (_a = this.role) !== null && _a !== void 0 ? _a : 'manualDismiss',
+                data: this.data
+            });
+            this.role = undefined;
+            this.data = undefined;
+        }
+        if (e.animationName == 'fadeIn' && e.target == this.el) {
+            this.paused = false;
+            this.present.emit();
+        }
+    }
+    onMouseEnter() {
+        if (this.open)
+            this.paused = true;
+    }
+    onMouseLeave() {
+        if (this.open)
+            this.paused = false;
+    }
+    onSlotChange() {
+        forceUpdate(this.el);
+    }
+    render() {
+        const hasHeader = !!this.header || !!this.el.querySelector('[slot="header"]');
+        const hasMessage = !!this.message || !!this.el.querySelector('[slot="message"]');
+        const hasButtons = !!this.el.querySelector('[slot="buttons"]');
+        return (h(Host, { key: 'b52fe6332a8c0cdb18fe976514da12bfc7f1177f', class: { open: this.open } }, h("div", { key: '980b1dbeba35cafcef151c12df98c3c7ceafbfc3', class: "border" }), h("div", { key: '0107a4518153069e504ec9b9cd937ffd4a7dd1d3', class: "cell top-left" }, this.icon && h("je-icon", { key: '34e593b5bf5494188efa7d1c0e9e4d91050c8ef3', fill: true }, this.icon), h("slot", { key: '20f10bd67f54052a09fe9416eea4eb01de63bde2', name: "start" })), h("div", { key: 'e691e82ebeef7f770c299dab1efaabae04100d2a', class: "cell top-middle" }, hasHeader ? (h("slot", { name: 'header' }, this.header && h("span", { part: "header" }, this.header))) : (h("slot", { name: "message" }, this.message && h("span", { part: "message" }, this.message)))), h("div", { key: 'a4826a4369605399ddf75c02322cc796063184c0', class: "cell top-right" }, h("slot", { key: '2be8fa278127c314647980697a9374ae8e55850b', name: "end" }), this.closable && h("je-icon-button", { key: 'b73a511b7734b0849a7e7652ba5fceb4ebd62063', icon: 'close', onClick: () => this.hide('userDismiss') })), hasHeader && hasMessage && (h(Fragment, { key: '3b6b10e884782d5634617a9a40a472b9749a0c3d' }, h("div", { key: '30b6a576fea25310fe560f68b540b0e470df4f6f', class: "cell middle-left" }), h("div", { key: '591877c8ab4b62e651ca8fc2ff55c787ff78e4b5', class: "cell middle-middle" }, h("slot", { key: '9cca457371bdbdc735cff40651ce05c9715c8637', name: "message" }, this.message && h("span", { key: 'ae0e03caa467e4a6e167ea0145cddb04e102640b', part: "message" }, this.message))), h("div", { key: 'e32e769e78e77b60b2f4f88251cc1c214dff9230', class: "cell middle-right" }))), hasButtons && (h(Fragment, { key: '19bee8fe7ab54c0631f8d263f01532c2b6569da1' }, h("div", { key: 'cc46e4eb28706612d5eb9aa296b76e82c824e57f', class: "cell bottom-left" }), h("div", { key: '74bdb7c05832b781343fafa6baa3d1e0ca120742', class: "cell bottom-middle" }, h("slot", { key: 'a4c37b18c623cfaf897f8490f32acf8881f3d94e', name: "buttons" })), h("div", { key: '0110cb76f08d514a0701703b22bb8242ad39d6b9', class: "cell bottom-right" }))), this.duration > 0 && (h("div", { key: 'f2e3234004a42e437935d1e3f8c8fd001e604fb3', onAnimationEnd: () => this.hide('autoDismiss'), class: { progress: true, running: this.open && !this.paused, visible: this.progress }, style: { animationDuration: `${this.duration}ms` } }))));
+    }
+    get el() { return this; }
+    static get style() { return jeAlertCss; }
+}, [1, "je-alert", {
+        "icon": [1],
+        "header": [1],
+        "message": [1],
+        "closable": [4],
+        "color": [513],
+        "duration": [2],
+        "progress": [4],
+        "open": [1028],
+        "paused": [32],
+        "show": [64],
+        "hide": [64],
+        "didDismiss": [64]
+    }, [[0, "animationend", "onAnimationEnd"], [1, "mouseenter", "onMouseEnter"], [1, "mouseleave", "onMouseLeave"], [0, "slotchange", "onSlotChange"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["je-alert", "je-button", "je-icon", "je-icon-button", "je-loading"];
+    components.forEach(tagName => { switch (tagName) {
+        case "je-alert":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, JeAlert$1);
+            }
+            break;
+        case "je-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "je-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "je-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "je-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const JeAlert = JeAlert$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { JeAlert, defineCustomElement };
+//# sourceMappingURL=je-alert.js.map
+
+//# sourceMappingURL=je-alert.js.map