jebamo 0.0.1 → 0.0.2

package/dist/collection/components/je-alert/je-alert.js

@@ -0,0 +1,339 @@
+import { Host, h } from "@stencil/core";
+export class JeAlert {
+    constructor() {
+        this.handleBackdropClick = () => {
+            if (this.isOpen && this.backdropClose) {
+                this.dismiss('backdropClose');
+            }
+        };
+        this.isOpen = false;
+        this.header = undefined;
+        this.message = undefined;
+        this.icon = undefined;
+        this.buttons = undefined;
+        this.controls = undefined;
+        this.trigger = undefined;
+        this.showBackdrop = true;
+        this.backdropClose = true;
+    }
+    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('USS Core: 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() {
+        const content = h("je-form", { key: 'b7046e7fa228538a683ec0d0611ad030b4fba1cb', onSubmit: (ev) => this.didSubmit.emit(ev) }, h("div", { key: '3880885a9dd3c61fc3eb1d0329ee8def64a2935e', class: "content-container" }, this.header && h("div", { key: 'a399b5ac5e3ccd7bea29826e8ffe92ff7969e701', class: "header" }, this.icon && h("je-icon", { key: '8e6226b9d40d1136c5ba164fb91dc56ec854d6dd', icon: this.icon }), h("h1", { key: '9b0865e01e3e0d527affb53e11754312f40c4dc7' }, this.header), h("je-button", { key: 'be0c3cdd9761f3a54c4f3f82339b16d9f22c4678', fill: 'clear', "icon-only": true, class: "close", onClick: () => this.dismiss() }, h("je-icon", { key: 'ff5ece6eb0678c017fe0474e8da58a19219baf71', icon: "close" }))), this.message && h("div", { key: '40b3a196ccbbc0e533f5054ded0989a27d5023a7', class: "message" }, this.message), this.controls && h("div", { key: 'fe9f0530966919f995fc7d90b22f408c2a16f09a', class: "controls" }, this.controls.map(control => (h("je-input", { type: control.type, required: control.required, label: control.label, placeholder: control.placeholder, validators: control.validators })))), this.buttons && h("div", { key: 'fa19ebc95e36955d4a2323d99d2856429203114b', class: "buttons" }, this.buttons.map(button => (h("je-button", { fill: button.fill, type: button.type, color: button.color, onClick: () => button.handler(this.el) }, button.text))))));
+        return (h(Host, { key: 'bf6df0e328fbe2785353b02e72dc85f18534be45', slot: 'overlay' }, h("div", { key: 'accdd9fc3059b7348fa342a166606fc2dfbe51f7', ref: el => this.contentEl = el, class: { 'modal-transition': true, 'modal': this.isOpen } }, this.isOpen && content), h("div", { key: 'bf2c4115d133199138d47520e6e12bec3bc76657', ref: el => this.backdropEl = el, onClick: this.handleBackdropClick, class: { 'backdrop-transition': true, 'backdrop': this.isOpen, 'clear': !this.showBackdrop && this.isOpen } })));
+    }
+    static get is() { return "je-alert"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-alert.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-alert.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "header": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Title of the dialog"
+                },
+                "attribute": "header",
+                "reflect": false
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Message text below the title"
+                },
+                "attribute": "message",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon that goes to the left of the header"
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "buttons": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DialogButton[]",
+                    "resolved": "DialogButton[]",
+                    "references": {
+                        "DialogButton": {
+                            "location": "local",
+                            "path": "/Users/psg/src/jebamo/packages/core/src/components/je-alert/je-alert.tsx",
+                            "id": "src/components/je-alert/je-alert.tsx::DialogButton"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Buttons for user interaction"
+                }
+            },
+            "controls": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DialogControl[]",
+                    "resolved": "DialogControl[]",
+                    "references": {
+                        "DialogControl": {
+                            "location": "local",
+                            "path": "/Users/psg/src/jebamo/packages/core/src/components/je-alert/je-alert.tsx",
+                            "id": "src/components/je-alert/je-alert.tsx::DialogControl"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls that are wrapped in a form"
+                }
+            },
+            "trigger": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Trigger element id"
+                },
+                "attribute": "trigger",
+                "reflect": false
+            },
+            "showBackdrop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not to render the backdrop"
+                },
+                "attribute": "show-backdrop",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "backdropClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the user can close the dialog by clicking the backdrop"
+                },
+                "attribute": "backdrop-close",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "didPresent",
+                "name": "didPresent",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dialog is presented"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "didDismiss",
+                "name": "didDismiss",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dialog is dismissed"
+                },
+                "complexType": {
+                    "original": "{ role: string, data: any }",
+                    "resolved": "{ role: string; data: any; }",
+                    "references": {}
+                }
+            }, {
+                "method": "didSubmit",
+                "name": "didSubmit",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the inner form submission is triggered"
+                },
+                "complexType": {
+                    "original": "SubmitEvent",
+                    "resolved": "SubmitEvent",
+                    "references": {
+                        "SubmitEvent": {
+                            "location": "global",
+                            "id": "global::SubmitEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "present": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "dismiss": {
+                "complexType": {
+                    "signature": "(role?: string, data?: any) => Promise<void>",
+                    "parameters": [{
+                            "name": "role",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "data",
+                            "type": "any",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=je-alert.js.map

package/dist/collection/components/je-alert/je-alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"je-alert.js","sourceRoot":"","sources":["../../../src/components/je-alert/je-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, EventEmitter, Event, Method, Prop, State } from '@stencil/core';\nimport { AsyncValidationFn, ValidationFn } from '../je-input/je-input';\n\nexport type DialogButton = {\n  text: string,\n  color?: 'primary' | 'secondary' | 'tertiary' | 'success' | 'error' | 'warning' | 'light' | 'dark',\n  fill: 'solid' | 'outline' | 'clear',\n  handler: (dialog: HTMLJeAlertElement) => void | Promise<void>,\n  type?: string\n}\n\nexport type DialogControl = {\n  label?: string,\n  placeholder?: string,\n  validators?: (ValidationFn | AsyncValidationFn)[],\n  required?: boolean,\n  type?: string\n}\n\n@Component({\n  tag: 'je-alert',\n  styleUrl: 'je-alert.scss',\n  shadow: true,\n})\nexport class JeAlert {\n  @Element() el!: HTMLJeAlertElement;\n  @State() isOpen = false;\n  protected parentEl!: HTMLElement;\n  protected triggerElement!: HTMLElement;\n  protected contentEl!: HTMLElement;\n  protected backdropEl!: HTMLElement;\n  protected pageEl!: HTMLElement;\n\n  /**\n   * Emitted when the dialog is presented\n   */\n  @Event({ bubbles: false }) didPresent: EventEmitter;\n\n  /**\n   * Emitted when the dialog is dismissed\n   */\n  @Event({ bubbles: false }) didDismiss: EventEmitter<{ role: string, data: any }>;\n\n  /**\n   * Emitted when the inner form submission is triggered\n   */\n  @Event({ bubbles: false }) didSubmit: EventEmitter<SubmitEvent>;\n\n  /**\n   * Title of the dialog\n   */\n  @Prop() header?: string;\n\n  /**\n   * Message text below the title\n   */\n  @Prop() message?: string;\n\n  /**\n   * Icon that goes to the left of the header\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Buttons for user interaction\n   */\n  @Prop() buttons?: DialogButton[];\n\n  /**\n   * Controls that are wrapped in a form\n   */\n  @Prop() controls?: DialogControl[];\n\n  /**\n   * Trigger element id\n   */\n  @Prop() trigger?: string;\n\n  /**\n   * Whether or not to render the backdrop\n   */\n  @Prop() showBackdrop = true;\n\n  /**\n   * Whether or not the user can close the dialog by clicking the backdrop\n   */\n  @Prop() backdropClose = true;\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('USS Core: 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    const content = <je-form onSubmit={(ev: SubmitEvent) => this.didSubmit.emit(ev)}><div class=\"content-container\">\n      {this.header && <div class=\"header\">\n        {this.icon && <je-icon icon={this.icon}></je-icon>}\n        <h1>{this.header}</h1>\n        <je-button fill='clear' icon-only class=\"close\" onClick={() => this.dismiss()}>\n          <je-icon icon=\"close\"></je-icon>\n        </je-button>\n      </div>}\n      {this.message && <div class=\"message\">{this.message}</div>}\n      {this.controls && <div class=\"controls\">{this.controls.map(control => (\n        <je-input type={control.type} required={control.required} label={control.label} placeholder={control.placeholder} validators={control.validators}></je-input>\n      ))}</div>}\n      {this.buttons && <div class=\"buttons\">{this.buttons.map(button => (\n        <je-button fill={button.fill} type={button.type} color={button.color} onClick={() => button.handler(this.el)}>{button.text}</je-button>\n      ))}</div>}\n    </div></je-form>\n\n    return (\n      <Host slot='overlay'>\n        <div ref={el => this.contentEl = el} class={{ 'modal-transition': true, 'modal': this.isOpen }}>\n          {this.isOpen && content}\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"]}

package/dist/collection/components/je-button/je-button.css

@@ -0,0 +1,180 @@
+:host {
+  display: block;
+  width: fit-content;
+  position: relative;
+  /**
+   * @prop --je-button-height: Fixed height
+   * @prop --je-button-width: Optional fixed width
+   * @prop --je-button-min-width: Minimum width
+   * @prop --je-button-font-size: Font size
+   * @prop --je-button-inline-padding: Inner inline padding
+   * @prop --je-button-color: Text color
+   * @prop --je-button-background: Default background color
+   * @prop --je-button-hover-background: Hovered background color
+   * @prop --je-button-active-background: Pressed background color
+   */
+  --je-button-height: 40px;
+  --je-button-width: auto;
+  --je-button-min-width: 80px;
+  --je-button-font-size: 1.1em;
+  --je-button-inline-padding: 12px;
+  --je-button-color: var(--je-primary-100, buttontext);
+  --je-button-background: var(--je-primary-500, buttonface);
+  --je-button-hover-background: var(--je-primary-600, buttonface);
+  --je-button-active-background: var(--je-primary-700, buttonface);
+}
+
+:host([color=error]), :host([color=auto][error]) {
+  --je-button-color: var(--je-error-100);
+  --je-button-background: var(--je-error-500);
+  --je-button-hover-background: var(--je-error-600);
+  --je-button-active-background: var(--je-error-700);
+}
+
+:host([color=secondary]), :host([color=auto][secondary]) {
+  --je-button-color: var(--je-secondary-100);
+  --je-button-background: var(--je-secondary-500);
+  --je-button-hover-background: var(--je-secondary-600);
+  --je-button-active-background: var(--je-secondary-700);
+}
+
+:host([color=tertiary]), :host([color=auto][tertiary]) {
+  --je-button-color: var(--je-tertiary-100);
+  --je-button-background: var(--je-tertiary-500);
+  --je-button-hover-background: var(--je-tertiary-600);
+  --je-button-active-background: var(--je-tertiary-700);
+}
+
+:host([color=warning]), :host([color=auto][warning]) {
+  --je-button-color: var(--je-warning-100);
+  --je-button-background: var(--je-warning-500);
+  --je-button-hover-background: var(--je-warning-600);
+  --je-button-active-background: var(--je-warning-700);
+}
+
+:host([color=success]), :host([color=auto][success]) {
+  --je-button-color: var(--je-success-100);
+  --je-button-background: var(--je-success-500);
+  --je-button-hover-background: var(--je-success-600);
+  --je-button-active-background: var(--je-success-700);
+}
+
+:host([color=medium]), :host([color=auto][medium]) {
+  --je-button-color: var(--je-medium-50);
+  --je-button-background: var(--je-medium-500);
+  --je-button-hover-background: var(--je-medium-600);
+  --je-button-active-background: var(--je-medium-700);
+}
+
+:host([color=light]), :host([color=auto][light]) {
+  --je-button-color: var(--je-medium-900);
+  --je-button-background: var(--je-medium-100);
+  --je-button-hover-background: var(--je-medium-400);
+  --je-button-active-background: var(--je-medium-500);
+}
+
+:host([color=dark]), :host([color=auto][dark]) {
+  --je-button-color: var(--je-medium-50);
+  --je-button-background: var(--je-medium-850);
+  --je-button-hover-background: var(--je-medium-850);
+  --je-button-active-background: var(--je-medium-900);
+}
+
+:host([expand]) {
+  width: 100%;
+  --je-button-width: 100%;
+}
+
+:host([icon-only]) {
+  --je-button-min-width: 2px;
+  --je-button-inline-padding: 0;
+}
+
+:host([size=sm]) {
+  --je-button-min-width: 60px;
+  --je-button-height: 30px;
+  --je-button-font-size: 0.9em;
+  --je-button-inline-padding: 8px;
+}
+
+:host([size=lg]) {
+  --je-button-min-width: 100px;
+  --je-button-height: 50px;
+  --je-button-font-size: 1.3em;
+  --je-button-inline-padding: 20px;
+}
+
+button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  position: relative;
+  box-sizing: border-box;
+  border: none;
+  border-radius: var(--je-border-radius, 2px);
+  padding-inline: var(--je-button-inline-padding);
+  cursor: pointer;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+  text-transform: uppercase;
+  text-wrap: wrap;
+  font-family: var(--je-font-family);
+  font-size: var(--je-button-font-size);
+  font-weight: var(--je-font-semi-bold);
+  width: var(--je-button-width);
+  height: var(--je-button-height);
+  min-width: var(--je-button-min-width);
+  color: var(--je-button-color);
+  background-color: var(--je-button-background);
+  transition: all 125ms ease-in-out;
+}
+@media (hover: hover) {
+  button:hover {
+    --je-button-background: var(--je-button-hover-background);
+  }
+}
+button:active {
+  --je-button-background: var(--je-button-active-background);
+}
+button:disabled {
+  opacity: 0.8;
+  cursor: default;
+}
+
+:host([fill=outline]) button {
+  color: var(--je-button-background);
+  background-color: transparent;
+  border: solid 1px var(--je-button-background);
+}
+
+:host([fill=clear]) button {
+  color: var(--je-button-background);
+  background-color: transparent;
+  font-weight: var(--je-font-bold);
+}
+@media (hover: hover) {
+  :host([fill=clear]) button:hover {
+    opacity: 0.8;
+  }
+}
+
+::slotted(je-icon) {
+  cursor: pointer;
+}
+
+::slotted([slot=badge]) {
+  top: 0;
+  right: 0;
+  position: absolute;
+  transform: translate(50%, -50%);
+  border-radius: 14px;
+  color: var(--je-button-background);
+  background-color: var(--je-button-color);
+  padding-inline: 4px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}