@seliaco/giant-panda-components - npm Package Compare versions

Comparing version 1.0.22 to 1.0.23-snapshot.1

dist/components/index.d.ts

@@ -5,3 +5,4 @@ export { ButtonComponent } from './ButtonComponent';
 export { OTPComponent } from './OTPComponent';
+export * from './wrapper';
 export * from './fields';
 //# sourceMappingURL=index.d.ts.map

dist/index.d.ts

 export * from './components';
 export * from './widgets';
+export declare const init: () => void;
 //# sourceMappingURL=index.d.ts.map

dist/index.js

 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-    typeof define === 'function' && define.amd ? define(['exports'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.GiantPandaComponents = {}));
-})(this, (function (exports) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lit/decorators')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'lit/decorators'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.GiantPandaComponents = {}, global.decorators));
+})(this, (function (exports, decorators) { 'use strict';
 
@@ -446,3 +446,2 @@ /******************************************************************************
     input {
-      padding: 12px;
       border-radius: 8px;
@@ -452,4 +451,4 @@ border: 1px solid var(--gray-40);
       text-align: center;
-      width: 49px;
-      height: 49px;
+      width: 48px;
+      height: 48px;
       font-family: 'Open Sans';
@@ -492,2 +491,76 @@ font-size: 18px;
 
+    const assets = {
+        logotipo: 'https://s3.amazonaws.com/images.app.selia/selia-logotipo.png'
+    };
+
+    exports.WrapperAuthComponent = class WrapperAuthComponent extends s {
+        constructor() {
+            super(...arguments);
+            this.logoText = '';
+            this.title = '';
+            this.subtitle = '';
+        }
+        getSlot(slotName) {
+            return this.querySelector(`[slot="${slotName}"]`);
+        }
+        render() {
+            const logo = assets.logotipo;
+            return x `
+      ${linkImport}
+
+      <div class="wrapper">
+        <div class="wrapper-header">
+          <img src="${logo}" alt="Selia" />
+          <div class="content-small">${this.logoText}</div>
+        </div>
+
+
+        <div class="heading-big margin-lg-bottom">
+          ${this.title}
+        </div>
+
+        <div class="body-small">
+          ${this.subtitle}
+        </div>
+
+
+        ${this.getSlot('content')}
+      </div>
+    `;
+        }
+    };
+    exports.WrapperAuthComponent.styles = i$2 `
+    .wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+      padding: 24px;
+      max-width: 400px;
+      margin: auto;
+      box-sizing: border-box;
+    }
+
+    .wrapper-header {
+      text-align: center;
+
+      img {
+        width: 100px;
+          margin-bottom: 8px;
+      }
+    }
+    `;
+    __decorate([
+        decorators.property({ type: String })
+    ], exports.WrapperAuthComponent.prototype, "logoText", void 0);
+    __decorate([
+        decorators.property({ type: String })
+    ], exports.WrapperAuthComponent.prototype, "title", void 0);
+    __decorate([
+        decorators.property({ type: String })
+    ], exports.WrapperAuthComponent.prototype, "subtitle", void 0);
+    exports.WrapperAuthComponent = __decorate([
+        decorators.customElement('wrapper-auth')
+    ], exports.WrapperAuthComponent);
+
     exports.FieldComponent = class FieldComponent extends s {
@@ -698,7 +771,7 @@ constructor() {
         login: {
-            title: "Ingresar",
+            title: "Iniciar sesión",
             email: "Correo electrónico",
             password: "Contraseña",
             forgotPassword: "¿Olvidaste tu contraseña?",
-            submit: "Iniciar sesión",
+            submit: "Ingresar",
             b2b: "Selia Empresas",
@@ -879,6 +952,2 @@ b2bSubtitle: "Ingresa tus credenciales de administrador.",
 
-    const assets = {
-        logotipo: 'https://s3.amazonaws.com/images.app.selia/selia-logotipo.png'
-    };
-
     exports.LoginForm = class LoginForm extends s {
@@ -888,2 +957,3 @@ constructor() {
             this.lang = 'es';
+            this.enabledRegex = true;
             this.formValue = {
@@ -932,18 +1002,10 @@ email: '',
         get header() {
-            const logo = assets.logotipo;
-            let postLogoText = '';
             switch (this.origin) {
                 case 'b2b':
-                    postLogoText = this.translations?.login?.b2b;
-                    break;
+                    return this.translations?.login?.b2b;
                 case 'vid':
-                    postLogoText = this.translations?.login?.video;
-                    break;
+                    return this.translations?.login?.video;
+                default:
+                    return '';
             }
-            return x `
-      <div class="login-form-header">
-        <img src="${logo}" alt="Selia" />
-        <div class="content-small">${postLogoText}</div>
-      </div>
-    `;
         }
@@ -954,13 +1016,5 @@ ;
                 case 'b2b':
-                    return x `
-          <div class="body-small">
-            ${this.translations?.login?.b2bSubtitle}
-          </div>
-        `;
+                    return this.translations?.login?.b2bSubtitle;
                 case 'vid':
-                    return x `
-          <div class="body-small">
-              ${this.translations?.login?.videoSubtitle}
-          </div>
-        `;
+                    return this.translations?.login?.videoSubtitle;
                 default:
@@ -971,28 +1025,24 @@ return '';
         get footer() {
+            let footerText = '';
+            let footerLinkText = '';
             switch (this.origin) {
                 case 'b2b':
-                    return x `
-          <div class="body">
-            <span>
-              ${this.translations?.login?.b2bFooter}
-            </span>
-            <span class="content-title link" @click="${this.handleFooterAction}">
-              ${this.translations?.login?.b2bFooterDemo}
-            </span>
-          </div>
-        `;
+                    footerText = this.translations?.login?.b2bFooter;
+                    footerLinkText = this.translations?.login?.b2bFooterDemo;
+                    break;
                 case 'vid':
-                    return x `
-          <div class="body">
-            <span>
-              ${this.translations?.login?.videoFooter}
-            </span>
-            <span class="content-title link" @click="${this.handleFooterAction}">
-              ${this.translations?.login?.videoFooterAction}
-            </span>
-          </div>
-        `;
-                default:
-                    return '';
+                    footerText = this.translations?.login?.videoFooter;
+                    footerLinkText = this.translations?.login?.videoFooterAction;
+                    return;
             }
+            return x `
+      <div class="body">
+        <span>
+          ${footerText}
+        </span>
+        <span class="content-title link" @click="${this.handleFooterAction}">
+          ${footerLinkText}
+        </span>
+      </div>
+  `;
         }
@@ -1010,41 +1060,39 @@ ;
 
-      <div class="login-form">
-        ${this.header}
+      <wrapper-auth 
+        logoText="${this.header}" 
+        title="${titleText}" 
+        subtitle="${this.subtitle}">
 
-        <div class="heading-big margin-lg-bottom">
-          ${titleText}
-        </div>
+        <div class="login-form" slot="content">
+          <email-component
+            class="login-form-field"
+            label="${emailLabel}"
+            value="${this.formValue.email}"
+            @change="${this.handleEmailChange}">
+          </email-component>
 
-        ${this.subtitle}
+          <password-component
+            class="login-form-field"
+            label="${passwordLabel}"
+            value="${this.formValue.password}"
+            enabledRegex
+            @change="${this.handlePasswordChange}">
+          </password-component>
 
-        <email-component
-          class="login-form-field"
-          label="${emailLabel}"
-          value="${this.formValue.email}"
-          @change="${this.handleEmailChange}">
-        </email-component>
+          <div class="content-title" @click="${this.handleForgotPassword}">
+            ${forgotText}
+          </div>
 
-        <password-component
-          class="login-form-field"
-          label="${passwordLabel}"
-          value="${this.formValue.password}"
-          enabledRegex
-          @change="${this.handlePasswordChange}">
-        </password-component>
+          <button-component
+            class="login-form-field"
+            width="100%"
+            size="lg"
+            @click="${this.handleSubmit}"
+          >
+            ${submitText}
+          </button-component>
 
-        <div class="content-title" @click="${this.handleForgotPassword}">
-          ${forgotText}
+          ${this.footer}
         </div>
-
-        <button-component
-          class="login-form-field"
-          width="100%"
-          size="lg"
-          @click="${this.handleSubmit}"
-        >
-          ${submitText}
-        </button-component>
-
-        ${this.footer}
-      </div>
+      </wrapper-auth>
     `;
@@ -1108,2 +1156,5 @@ }
     ], exports.LoginForm.prototype, "origin", void 0);
+    __decorate([
+        n$1({ type: Boolean })
+    ], exports.LoginForm.prototype, "enabledRegex", void 0);
     exports.LoginForm = __decorate([
@@ -1113,2 +1164,13 @@ e$2('login-form')
 
+    const init = () => {
+        window.addEventListener('load', () => {
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = 'https://unpkg.com/@seliaco/giant-panda-styles/style.css';
+            document.head.appendChild(link);
+        });
+    };
+
+    exports.init = init;
+
 }));

dist/widgets/LoginForm.d.ts

@@ -5,2 +5,3 @@ import { LitElement } from 'lit';
     origin: 'usr' | 'spe' | 'b2b' | 'vid';
+    enabledRegex: boolean;
     static styles: import("lit").CSSResult;
@@ -7,0 +8,0 @@ private formValue;

package.json

 {
-  "version": "1.0.22",
+  "version": "1.0.23-snapshot.1",
   "name": "@seliaco/giant-panda-components",
@@ -36,2 +36,2 @@ "type": "module",
   }
-}
+}

README.md

@@ -0,0 +0,0 @@ # Selia Components

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

75459

increased by4.82%

Number of package files

43

increased by10.26%

Lines of code

1417

increased by4.89%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of low quality alerts

2

increased by100%

Number of low supply chain risk alerts

2

increased byInfinity%

No dependency changes