@everymatrix/pam-player-profile 0.8.0

package/dist/cjs/pam-player-profile_2.cjs.entry.js

@@ -0,0 +1,175 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const pamPlayerProfile = require('./pam-player-profile-dc13914a.js');
+const index = require('./index-4130c9d2.js');
+
+const uiSkeletonCss = ":host{display:block;--emw-skeleton-rectangle-background:#c2c2c2;--emw-skeleton-circle-background:#c2c2c2;--emw-skeleton-text-background:#c2c2c2;--emw-skeleton-title-background:#c2c2c2;--emw-skeleton-image-background:#c2c2c2;--emw-skeleton-logo-background:#c2c2c2;--emw-skeleton-primary-color:#e0e0e0;--emw-skeleton-secondary-color:#f0f0f0}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 2px)}.Circle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.Text{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 5px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:var(--emw-skeleton-text-width-100, 300px)}.Title{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 5px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.Image{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, inherit)}.Logo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 5px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, var(--emw-skeleton-color-0, #c2c2c2))}100%{background-color:var(--emw-skeleton-secondary-color, var(--emw-skeleton-color-100, #f0f0f0))}}";
+const UiSkeletonStyle0 = uiSkeletonCss;
+
+const UiSkeleton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.structure = undefined;
+        this.width = undefined;
+        this.height = undefined;
+        this.borderRadius = undefined;
+        this.marginBottom = undefined;
+        this.marginTop = undefined;
+        this.marginLeft = undefined;
+        this.marginRight = undefined;
+        this.animation = true;
+        this.rows = undefined;
+        this.size = undefined;
+        this.color = undefined;
+        this.primaryColor = undefined;
+        this.secondaryColor = undefined;
+    }
+    handleStructureChange(newValue, oldValue) {
+        if (oldValue !== newValue) {
+            this.handleStructure(newValue);
+        }
+    }
+    handleStructure(structure) {
+        switch (structure) {
+            case 'logo':
+                return this.renderLogo();
+            case 'image':
+                return this.renderImage();
+            case 'title':
+                return this.renderTitle();
+            case 'text':
+                return this.renderText();
+            case 'rectangle':
+                return this.renderRectangle();
+            case 'circle':
+                return this.renderCircle();
+            default:
+                return null;
+        }
+    }
+    renderLogo() {
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Logo " + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderImage() {
+        return (index.h("div", { class: "Image " + (this.animation ? 'Skeleton' : '') }));
+    }
+    renderTitle() {
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Title " + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderText() {
+        return (index.h("div", { class: "SkeletonContainer" }, Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index$1) => (index.h("div", { key: index$1, class: "Text " + (this.animation ? 'Skeleton' : '') })))));
+    }
+    renderRectangle() {
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Rectangle " + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderCircle() {
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Circle " + (this.animation ? 'Skeleton' : '') })));
+    }
+    render() {
+        let styleBlock = '';
+        switch (this.structure) {
+            case 'logo':
+                styleBlock = `
+          :host {
+            --emw-skeleton-logo-width: ${this.width};
+            --emw-skeleton-logo-height: ${this.height};
+            --emw-skeleton-logo-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-logo-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-logo-margin-top: ${this.marginTop}px;
+            --emw-skeleton-logo-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-logo-margin-right: ${this.marginRight}px;
+            --emw-skeleton-logo-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'image':
+                styleBlock = `
+          :host {
+            --emw-skeleton-image-width: ${this.width};
+            --emw-skeleton-image-height: ${this.height};
+            --emw-skeleton-image-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-image-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-image-margin-top: ${this.marginTop}px;
+            --emw-skeleton-image-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-image-margin-right: ${this.marginRight}px;
+            --emw-skeleton-image-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'title':
+                styleBlock = `
+          :host {
+            --emw-skeleton-title-width: ${this.width};
+            --emw-skeleton-title-height: ${this.height};
+            --emw-skeleton-title-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-title-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-title-margin-top: ${this.marginTop}px;
+            --emw-skeleton-title-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-title-margin-right: ${this.marginRight}px;
+            --emw-skeleton-title-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'text':
+                styleBlock = `
+          :host {
+            --emw-skeleton-text-width: ${this.width};
+            --emw-skeleton-text-height: ${this.height};
+            --emw-skeleton-text-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-text-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-text-margin-top: ${this.marginTop}px;
+            --emw-skeleton-text-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-text-margin-right: ${this.marginRight}px;
+            --emw-skeleton-text-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'rectangle':
+                styleBlock = `
+          :host {
+            --emw-skeleton-rectangle-width: ${this.width};
+            --emw-skeleton-rectangle-height: ${this.height};
+            --emw-skeleton-rectangle-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-rectangle-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-rectangle-margin-top: ${this.marginTop}px;
+            --emw-skeleton-rectangle-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-rectangle-margin-right: ${this.marginRight}px;
+            --emw-skeleton-rectangle-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'circle':
+                styleBlock = `
+          :host {
+            --emw-skeleton-circle-size: ${this.size};
+            --emw-skeleton-circle-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            default:
+                styleBlock = '';
+        }
+        return (index.h(index.Host, { key: '3bb792a149db7fe732d5cbfa092cdb4d6ca0689e' }, index.h("style", { key: 'a4607599b60659f385ae2660513e38b383739674' }, styleBlock), this.handleStructure(this.structure)));
+    }
+    static get watchers() { return {
+        "structure": ["handleStructureChange"]
+    }; }
+};
+UiSkeleton.style = UiSkeletonStyle0;
+
+exports.pam_player_profile = pamPlayerProfile.PamPlayerProfile;
+exports.ui_skeleton = UiSkeleton;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,19 @@
+{
+  "entries": [
+    "components/pam-player-profile/pam-player-profile.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.19.2",
+    "typescriptVersion": "5.4.5"
+  },
+  "collections": [
+    {
+      "name": "@everymatrix/ui-skeleton",
+      "tags": [
+        "ui-skeleton"
+      ]
+    }
+  ],
+  "bundles": []
+}

package/dist/collection/components/pam-player-profile/index.js

@@ -0,0 +1 @@
+export { PamPlayerProfile } from './pam-player-profile';

package/dist/collection/components/pam-player-profile/pam-player-profile.css

@@ -0,0 +1,263 @@
+:host {
+  display: block;
+}
+
+button {
+  font-family: var(--emw--button-typography);
+}
+
+input, select, option {
+  font-family: inherit;
+}
+
+.PamPlayerProfileWrapper {
+  color: var(--emw--pam-typography, var(--emw-color-contrast, #07072A));
+  background: var(--emw-color-pale, var(--emw--color-gray-50, #F1F1F1));
+  padding: 50px;
+  height: 100%;
+  border-radius: var(--emw--border-radius-large, 10px);
+  container-type: inline-size;
+  opacity: 1;
+  animation-name: fadeIn;
+  animation-iteration-count: 1;
+  animation-timing-function: ease-in;
+  animation-duration: 0.3s;
+}
+.PamPlayerProfileWrapper .ReturnButton {
+  display: none;
+}
+.PamPlayerProfileWrapper .HeaderText {
+  font-size: var(--emw--font-size-x-large, 24px);
+  color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
+  text-transform: capitalize;
+  font-weight: var(--emw--font-weight-semibold, 500);
+}
+.PamPlayerProfileWrapper .Section {
+  background: var(--emw-color-pale, var(--emw--color-gray-100, #E6E6E6));
+  border-radius: var(--emw--border-radius-large, 10px);
+  padding: 10px;
+  margin-bottom: 10px;
+}
+.PamPlayerProfileWrapper .Section .SectionTitle {
+  font-size: var(--emw--font-size-large, 20px);
+  color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
+  text-transform: capitalize;
+  font-weight: var(--emw--font-weight-semibold, 500);
+  padding: 0;
+  border: 0;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  background: transparent;
+  cursor: pointer;
+}
+.PamPlayerProfileWrapper .Section .SectionContent {
+  display: grid;
+  column-gap: 50px;
+  row-gap: 25px;
+  grid-template-rows: auto;
+  grid-template-columns: 1fr 1fr;
+  padding-bottom: 30px;
+  margin-top: 10px;
+}
+.PamPlayerProfileWrapper .Section .SectionContent .Field {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  /* Chrome, Safari, Edge, Opera */
+  /* Firefox */
+}
+.PamPlayerProfileWrapper .Section .SectionContent .Field label {
+  font-size: var(--emw--size-small, 14px);
+  font-weight: var(--emw--font-weight-semibold, 500);
+  margin-bottom: 5px;
+}
+.PamPlayerProfileWrapper .Section .SectionContent .Field input {
+  font-size: var(--emw--size-small, 14px);
+  font-weight: var(--emw--font-weight-light, 300);
+  color: var(--emw--pam-contrast, var(--emw-color-contrast, #07072A));
+  padding: 10px;
+  line-height: 16px;
+  background: var(--emw-color-white, #FFFFFF);
+  outline: none;
+  transition-duration: var(--emw--transition-medium, 250ms);
+  border: 1px solid var(--emw--color-gray-100, #353535);
+  border-radius: var(--emw--border-radius-medium, 10px);
+  width: 100%;
+  box-sizing: border-box;
+}
+.PamPlayerProfileWrapper .Section .SectionContent .Field input:focus, .PamPlayerProfileWrapper .Section .SectionContent .Field input :focus-within, .PamPlayerProfileWrapper .Section .SectionContent .Field input :focus-visible, .PamPlayerProfileWrapper .Section .SectionContent .Field input :visited {
+  border: 1px solid var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
+  box-shadow: 0 0 0 1pt var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
+}
+.PamPlayerProfileWrapper .Section .SectionContent .Field input::-webkit-outer-spin-button,
+.PamPlayerProfileWrapper .Section .SectionContent .Field input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.PamPlayerProfileWrapper .Section .SectionContent .Field input[type=number] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+.PamPlayerProfileWrapper .Section .SectionContent .Field.Invalid input {
+  border: 1px solid var(--emw-color-error, var(--emw-color-red, #FD2839));
+  background: var(--emw-color-pale, #FBECF4);
+  color: var(--emw-color-error, var(--emw-color-red, #FD2839));
+}
+.PamPlayerProfileWrapper .Section .SectionContent .Field .Error {
+  color: var(--emw-color-error, var(--emw-color-red, #FD2839));
+  font-size: var(--emw--font-size-x-small, 12px);
+  line-height: 10px;
+}
+.PamPlayerProfileWrapper .Section .SectionContent .Field.Disabled input {
+  opacity: 0.5;
+}
+.PamPlayerProfileWrapper .Section .SectionContent .CompoundField {
+  width: 100%;
+  display: flex;
+  gap: 10px;
+  flex-direction: row;
+}
+.PamPlayerProfileWrapper .ButtonsArea {
+  grid-column-gap: 10px;
+  grid-template-rows: auto;
+  grid-template-columns: 1fr;
+  margin-top: 20px;
+  width: 50%;
+}
+.PamPlayerProfileWrapper .ButtonsArea .SaveButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  cursor: pointer;
+  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, black 20%), var(--emw--color-primary, #22B04E), color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, white 30%));
+  border: 2px solid var(--emw--button-border-color, #0E5924);
+  color: var(--emw--button-text-color, #FFFFFF);
+  border-radius: var(--emw--button-border-radius, 10px);
+  font-size: var(--emw--size-standard, 16px);
+  text-transform: uppercase;
+  transition-duration: var(--emw--transition-medium, 250ms);
+  max-width: 400px;
+  min-width: 200px;
+  padding: 13px 0;
+  width: 100%;
+}
+.PamPlayerProfileWrapper .ButtonsArea .SaveButton:active {
+  background: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
+}
+.PamPlayerProfileWrapper .ButtonsArea .SaveButton.Disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+.PamPlayerProfileWrapper.skeleton .ReturnButton {
+  display: block;
+  width: 200px;
+  margin-top: 15px;
+  margin-bottom: 20px;
+}
+.PamPlayerProfileWrapper.skeleton .Section .SectionContent {
+  grid-template-columns: 50% 50%;
+  overflow: hidden;
+}
+.PamPlayerProfileWrapper.skeleton .Section .SectionContent .Field {
+  height: 55px;
+  overflow: hidden;
+}
+.PamPlayerProfileWrapper.skeleton .ButtonsArea .SaveButton {
+  width: 500px;
+  border-radius: 30px;
+  overflow: hidden;
+  display: block;
+  background-image: none;
+  border: none;
+}
+@container (max-width: 425px) {
+  .PamPlayerProfileWrapper {
+    padding: 20px 15px;
+    background: var(--emw-color-gray-50, #F9F8F8);
+    max-width: unset;
+    border-radius: var(--emw--border-radius-small, 5px);
+  }
+  .PamPlayerProfileWrapper .HeaderText {
+    display: none;
+  }
+  .PamPlayerProfileWrapper .ReturnButton {
+    color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
+    display: inline-flex;
+    align-items: center;
+    column-gap: 10px;
+    margin-bottom: 10px;
+  }
+  .PamPlayerProfileWrapper .ReturnButton svg {
+    fill: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
+  }
+  .PamPlayerProfileWrapper h2 {
+    color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
+    font-size: var(--emw--font-size-large, 20px);
+    font-weight: var(--emw--font-weight-semibold, 500);
+  }
+  .PamPlayerProfileWrapper .Section .SectionContent {
+    row-gap: 15px;
+    grid-template-columns: 1fr;
+  }
+  .PamPlayerProfileWrapper .Section .SectionTitle {
+    margin-top: 5px;
+    margin-bottom: 5px;
+    font-size: var(--emw--font-size-medium, 16px);
+  }
+  .PamPlayerProfileWrapper .Section .Field label {
+    color: var(--emw-color-gray-300, #58586B);
+    font-size: var(--emw--size-x-small, 12px);
+    font-weight: var(-emw--font-weight-normal, 400);
+  }
+  .PamPlayerProfileWrapper .Section .Field input {
+    color: var(--emw-color-gray-300, #58586B);
+    font-size: var(--emw--size-x-small, 12px);
+    font-weight: var(--emw--font-weight-light, 300);
+  }
+  .PamPlayerProfileWrapper .Section .CompoundField {
+    width: 100%;
+    display: flex;
+    gap: 10px;
+    flex-direction: row;
+  }
+  .PamPlayerProfileWrapper .ButtonsArea {
+    grid-column-gap: 10px;
+    width: 100%;
+    grid-template-columns: 1fr 1fr;
+  }
+  .PamPlayerProfileWrapper .ButtonsArea .SaveButton {
+    font-size: var(--emw--size-x-small, 12px);
+    height: 40px;
+    color: var(--emw-button-typography, var(--emw-color-white, #FFFFFF));
+  }
+  .PamPlayerProfileWrapper .ButtonsArea .SaveButton.Disabled {
+    color: var(--emw-color-gray-300, #58586B);
+  }
+  .PamPlayerProfileWrapper.skeleton .Section .SectionContent {
+    display: block;
+  }
+  .PamPlayerProfileWrapper.skeleton .Section .SectionContent .Field {
+    margin-bottom: 15px;
+  }
+  .PamPlayerProfileWrapper.skeleton .ButtonsArea .SaveButton {
+    width: 100%;
+    height: 100%;
+    border-radius: 20px;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0.01;
+  }
+  1% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}