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

Comparing version 1.0.24 to 1.0.25

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

@@ -489,2 +489,85 @@ (function (global, factory) {
 
+    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 = '';
+        }
+        get titleHtml() {
+            console.log(this.title);
+            return x `${this.title}`;
+        }
+        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.titleHtml}
+        </div>
+
+        <div class="body-small">
+          ${this.subtitle}
+        </div>
+
+
+        <slot name="content"></slot>
+      </div>
+    `;
+        }
+    };
+    exports.WrapperAuthComponent.styles = i$2 `
+    .wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+      padding: 60px 40px;
+      margin: auto;
+      max-width: 480px;
+    }
+
+    .wrapper-header {
+      text-align: center;
+
+      img {
+        width: 100px;
+        margin-bottom: 8px;
+      }
+    }
+      
+    .heading-big {
+      margin: 28px 0;
+    }
+      
+    .body-small {
+      align-self: baseline;
+      margin-bottom: 16px;
+    }
+    `;
+    __decorate([
+        n$1({ type: String })
+    ], exports.WrapperAuthComponent.prototype, "logoText", void 0);
+    __decorate([
+        n$1({ type: String })
+    ], exports.WrapperAuthComponent.prototype, "title", void 0);
+    __decorate([
+        n$1({ type: String })
+    ], exports.WrapperAuthComponent.prototype, "subtitle", void 0);
+    exports.WrapperAuthComponent = __decorate([
+        e$2('wrapper-auth')
+    ], exports.WrapperAuthComponent);
+
     exports.FieldComponent = class FieldComponent extends s {
@@ -875,6 +958,2 @@ constructor() {
 
-    const assets = {
-        logotipo: 'https://s3.amazonaws.com/images.app.selia/selia-logotipo.png'
-    };
-
     exports.LoginForm = class LoginForm extends s {
@@ -928,18 +1007,10 @@ constructor() {
         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>
-    `;
         }
@@ -950,13 +1021,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:
@@ -967,28 +1030,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 btn-link text-purple" @click="${this.handleFooterAction}">
+          ${footerLinkText}
+        </span>
+      </div>
+  `;
         }
@@ -1006,41 +1065,38 @@ ;
 
-      <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}"
+            @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="${this.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>
     `;
@@ -1055,6 +1111,3 @@ }
       gap: 8px;
-      padding: 24px;
-      max-width: 400px;
-      margin: auto;
-      box-sizing: border-box;
+      width: 100%;
     }
@@ -1066,2 +1119,3 @@
       
+      
     .login-form-header {
@@ -1085,6 +1139,25 @@ text-align: center;
       
+
+    .login-form-header {
+      text-align: center;
+
+      img {
+        width: 100px;
+          margin-bottom: 8px;
+      }
+    }
+      
+    .heading-big {
+      margin: 28px 0;
+    }
+      
+    .body-small {
+      align-self: baseline;
+      margin-bottom: 16px;
+    }
+      
     .content-title {
       align-self: last baseline;
-        margin: 12px 0;
-        cursor: pointer;
+      margin: 12px 0;
+      cursor: pointer;
     }
@@ -1095,7 +1168,2 @@
     }
-      
-    .link {
-      color: var(--purple);
-      cursor: pointer;
-    }
   `;
@@ -1115,2 +1183,13 @@ __decorate([
 
+    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;
+
 }));

package.json

 {
-  "version": "1.0.24",
+  "version": "1.0.25",
   "name": "@seliaco/giant-panda-components",
@@ -19,3 +19,4 @@ "type": "module",
     "patch": "npm version patch --no-git-tag-version",
-    "release": "npm run patch && npm run build && npm publish --access public"
+    "release": "npm run patch && npm run build && npm publish --access public",
+    "release:no-patch": "npm run build && npm publish --access public"
   },
@@ -22,0 +23,0 @@ "devDependencies": {

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

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

Improved metrics

Total package byte prevSize

75655

increased by4.81%

Number of package files

43

increased by10.26%

Lines of code

1430

increased by5.54%

No dependency changes