jebamo 0.0.1 → 0.0.2

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

@@ -0,0 +1,82 @@
+import { Host, h } from "@stencil/core";
+export class JePill {
+    constructor() {
+        this.outline = false;
+        this.button = true;
+        this.disabled = false;
+    }
+    render() {
+        return (h(Host, { key: '32a830f6eb0cb2602d6ccb0355afab3a4913f482' }, h("slot", { key: '9d3970fcbb79a849b79e6bb99cc525504b1a7aac' })));
+    }
+    static get is() { return "je-pill"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-pill.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-pill.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "outline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "outline",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "button": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "button",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=je-pill.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"je-pill.js","sourceRoot":"","sources":["../../../src/components/je-pill/je-pill.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,MAAM;;uBACkB,KAAK;sBACN,IAAI;wBACF,KAAK;;IAEzC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'je-pill',\n  styleUrl: 'je-pill.scss',\n  shadow: true,\n})\nexport class JePill {\n  @Prop({ reflect: true }) outline = false;\n  @Prop({ reflect: true }) button = true;\n  @Prop({ reflect: true }) disabled = false;\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,39 @@
+:host {
+  /**
+   * @prop --je-background: background color
+   * @prop shimmer-color: color of the shimmer animation
+   */
+  --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;
+  }
+}

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

@@ -0,0 +1,44 @@
+import { Host, h } from "@stencil/core";
+export class JePlaceholder {
+    constructor() {
+        this.animated = true;
+    }
+    render() {
+        return (h(Host, { key: '0a01cc9c0d7cadff4a449895c64c7761cf0b116d', class: { 'animated': this.animated } }, h("slot", { key: 'be3e6370db2d577bd64f053360cf893f9beec2f1' })));
+    }
+    static get is() { return "je-placeholder"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-placeholder.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-placeholder.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "animated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the component should have the animated \"shimmer\" effect"
+                },
+                "attribute": "animated",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+}
+//# sourceMappingURL=je-placeholder.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"je-placeholder.js","sourceRoot":"","sources":["../../../src/components/je-placeholder/je-placeholder.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,aAAa;;wBAIL,IAAI;;IAEvB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAC;YACtC,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -0,0 +1,60 @@
+:host {
+  display: block;
+  --je-popover-background-color: rgb(233, 236, 236);
+  --je-popover-color: var(--je-medium-900);
+  --je-popover-box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);
+  --je-popover-border: solid 1px rgb(197, 200, 204);
+}
+
+:host([darkmode]) {
+  --je-popover-background-color: rgb(41, 45, 46);
+  --je-popover-color: var(--je-medium-50);
+  --je-popover-box-shadow: 0px 4px 16px 0px rgba(68, 68, 68, 0.12);
+  --je-popover-border: solid 1px rgb(86, 87, 90);
+}
+
+.content {
+  font-family: var(--je-font-family);
+  position: absolute;
+  background-color: var(--je-popover-background-color, canvas);
+  color: var(--je-popover-color, canvastext);
+  padding-inline: var(--je-spacing-xs, 10px);
+  box-shadow: var(--je-popover-box-shadow);
+  border: var(--je-popover-border);
+  z-index: 1000;
+  border-radius: var(--je-border-radius, 2px);
+  overflow: hidden;
+}
+
+.content-transition {
+  opacity: 0;
+  transition: opacity 250ms ease-in-out;
+}
+
+.content.open {
+  opacity: 1;
+}
+
+.backdrop {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--je-backdrop-color, rgba(0, 0, 0, 0.5));
+  z-index: 999;
+}
+
+.backdrop-transition {
+  opacity: 0;
+  transition: opacity 250ms ease-in-out;
+}
+
+.backdrop.fade {
+  opacity: 1;
+}
+
+.clear {
+  background: rgba(0, 0, 0, 0);
+}