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

Comparing version 1.0.6 to 1.0.7

dist/components/ButtonComponent.js

@@ -10,3 +10,4 @@ "use strict";
 var _decorators = require("lit/decorators.js");
-var _templateObject, _templateObject2;
+var _cssImport = require("../constants/css-import");
+var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
@@ -72,9 +73,16 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
       kind: "field",
-      "static": true,
-      key: "styles",
+      decorators: [(0, _decorators.property)()],
+      key: "size",
       value: function value() {
-        return (0, _lit.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    .btn {\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      cursor: pointer;\n      border-radius: 8px;\n      padding: 8px 16px;\n      font-size: 14px;\n      font-weight: 700;\n      transition:\n        background-color 0.2s,\n        border-color 0.2s;\n      gap: 8px;\n      color: var(--white);\n      background: var(--purple);\n      box-shadow: var(--shadow-purple);\n      border: 2px solid var(--purple);\n    }\n\n    .btn:hover {\n      background: var(--dark-purple);\n    }\n\n    .btn:focus-within,\n    .btn:focus,\n    .btn:active {\n      background: var(--purple-80);\n      box-shadow: 0 0 0 4px var(--purple-20);\n    }\n\n    .btn-outline {\n      color: var(--purple);\n      background: var(--white);\n      border: 2px solid var(--purple-20);\n    }\n\n    .btn-link {\n      background: var(--white);\n      color: var(--purple);\n      font-size: var(--tiny);\n      font-weight: 600 !important;\n    }\n\n    .btn-outline:hover,\n    .btn-outline.loader-block,\n    .btn-outline:focus-within,\n    .btn-outline:focus,\n    .btn-outline:active {\n      background: #f9f6fe;\n      border-color: #c1a7f2;\n    }\n\n    .btn-outline:focus-within,\n    .btn-outline:focus,\n    .btn-outline:active {\n      box-shadow: 0 0 0 4px var(--purple-20);\n    }\n  "])));
+        return '';
       }
     }, {
       kind: "field",
+      decorators: [(0, _decorators.property)()],
+      key: "disabled",
+      value: function value() {
+        return false;
+      }
+    }, {
+      kind: "field",
       key: "classResolver",
@@ -84,13 +92,32 @@ value: function value() {
         return function () {
+          var classes = 'btn';
           if (_this2.type) {
-            return "btn btn-".concat(_this2.type);
+            classes += " btn-".concat(_this2.type);
           }
-          return 'btn';
+          if (_this2.color) {
+            classes += " btn-".concat(_this2.color);
+          }
+          if (_this2.size) {
+            classes += " btn-".concat(_this2.size);
+          }
+          return classes;
         };
       }
     }, {
+      kind: "field",
+      key: "handleClick",
+      value: function value() {
+        var _this3 = this;
+        return function () {
+          _this3.dispatchEvent(new CustomEvent('click', {
+            bubbles: true,
+            composed: true
+          }));
+        };
+      }
+    }, {
       kind: "method",
       key: "render",
       value: function render() {
-        return (0, _lit.html)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      <button class=\"", "\" type=\"button\" disabled>\n        <slot></slot>\n      </button>\n    "])), this.classResolver());
+        return (0, _lit.html)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      ", "\n      <button class=\"", "\" type=\"button\" ?disabled=\"", "\" @click=\"", "\">\n        <slot></slot>\n      </button>\n    "])), _cssImport.cssStyle, this.classResolver(), this.disabled, this.handleClick);
       }
@@ -97,0 +124,0 @@ }]

dist/components/index.js

@@ -12,2 +12,8 @@ "use strict";
 });
+Object.defineProperty(exports, "CarrouselComponent", {
+  enumerable: true,
+  get: function get() {
+    return _CarrouselComponent.CarrouselComponent;
+  }
+});
 Object.defineProperty(exports, "InputComponent", {
@@ -19,3 +25,25 @@ enumerable: true,
 });
+Object.defineProperty(exports, "OTPComponent", {
+  enumerable: true,
+  get: function get() {
+    return _OTPComponent.OTPComponent;
+  }
+});
+Object.defineProperty(exports, "PasswordComponent", {
+  enumerable: true,
+  get: function get() {
+    return _PasswordComponent.PasswordComponent;
+  }
+});
+Object.defineProperty(exports, "ToastComponent", {
+  enumerable: true,
+  get: function get() {
+    return _ToastComponent.ToastComponent;
+  }
+});
 var _ButtonComponent = require("./ButtonComponent");
-var _InputComponent = require("./InputComponent");
+var _InputComponent = require("./InputComponent");
+var _ToastComponent = require("./ToastComponent");
+var _CarrouselComponent = require("./CarrouselComponent");
+var _PasswordComponent = require("./PasswordComponent");
+var _OTPComponent = require("./OTPComponent");

dist/components/InputComponent.js

@@ -10,2 +10,3 @@ "use strict";
 var _decorators = require("lit/decorators.js");
+var _cssImport = require("../constants/css-import");
 var _templateObject, _templateObject2;
@@ -85,16 +86,32 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
       kind: "field",
-      "static": true,
-      key: "styles",
+      decorators: [(0, _decorators.property)({
+        type: String
+      })],
+      key: "value",
       value: function value() {
-        return (0, _lit.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    :hoot {\n      --font: 'Open Sans';\n      --font-size-default-mb: 14px;\n      --font-size-label-only-mb: 14px;\n      --font-size-label-filled-mb: 10px;\n      --font-size-default-dp: 16px;\n      --font-size-label-only-dp: 16px;\n      --font-size-label-filled-dp: 12px;\n      --color-text: #8d91a0;\n      --color-text-dark: #3e4047;\n      --color-default: #dde1e9;\n      --color-on-focus: #8350e6;\n      --color-disabled: #eff1f5;\n      --color-readonly: #f8f9fb;\n      --color-error: #fe4a49;\n      --color-text-error: #e72524;\n      --background: #fff;\n      --background-active: #f3eefc;\n      --box-shadow-default: rgba(141, 145, 160, 0.1);\n      --box-shadow-on-focus: rgba(131, 80, 230, 0.25);\n    }\n\n    .field {\n      position: relative;\n      width: 100%;\n    }\n    .field.icon-left,\n    .field.icon-right {\n      transition: all 0.1s;\n      line-height: initial;\n    }\n    .field.icon-right-error .field-icon-right {\n      top: 28px !important;\n    }\n    .field.icon-right .field-control {\n      padding-right: 10%;\n    }\n    .field.icon-left .field-control {\n      padding-left: 11%;\n    }\n    .field.icon-left > label {\n      padding-left: 11%;\n    }\n    .field-icon-left,\n    .field-icon-right {\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      font-size: 24px;\n      cursor: pointer;\n    }\n    .field-icon-left {\n      left: 12px;\n    }\n    .field-icon-right {\n      right: 12px;\n    }\n    .field-control-readonly,\n    .field-control {\n      -moz-appearance: none !important;\n      -webkit-appearance: none !important;\n      appearance: none !important;\n      background-clip: padding-box !important;\n      background-color: #fff !important;\n      background-color: var(--background) !important;\n      border-radius: 8px !important;\n      border: 1px solid var(--color-default) !important;\n      box-shadow: none !important;\n      color: var(--color-text-dark) !important;\n      cursor: text !important;\n      display: block !important;\n      font-size: var(--font-size-default-mb) !important;\n      font-weight: 400 !important;\n      font-family:\n        OpenSans,\n        -apple-system,\n        BlinkMacSystemFont,\n        'Segoe UI',\n        Roboto,\n        Helvetica,\n        Arial,\n        sans-serif,\n        'Apple Color Emoji',\n        'Segoe UI Emoji',\n        'Segoe UI Symbol' !important;\n      line-height: 150% !important;\n      max-height: 126px !important;\n      min-height: 52px !important;\n      overflow: auto !important;\n      padding: 8px 12px !important;\n      resize: none !important;\n      transition: all 0.1s !important;\n      width: 100% !important;\n      outline: none !important;\n    }\n    .field-control-readonly::placeholder,\n    .field-control::placeholder {\n      color: transparent;\n    }\n    .field-control-readonly:hover,\n    .field-control:hover {\n      border-color: var(--color-on-focus) !important;\n    }\n    .field-control-readonly.focus,\n    .field-control.focus,\n    .field-control-readonly:focus,\n    .field-control:focus {\n      border: 1px solid var(--color-on-focus) !important;\n      box-shadow: 0px 0px 0px 4px var(--box-shadow-on-focus) !important;\n    }\n    .field-control-readonly:focus,\n    .field-control:focus,\n    .field-control-readonly:not(:placeholder-shown),\n    .field-control:not(:placeholder-shown) {\n      padding-top: 22px !important;\n      padding-bottom: 7px !important;\n    }\n    .field-control-readonly:-webkit-autofill,\n    .field-control:-webkit-autofill {\n      padding-top: 22px !important;\n      padding-bottom: 7px !important;\n    }\n    .field-control-readonly.disabled,\n    .field-control.disabled {\n      opacity: 0.5 !important;\n      background: var(--background) !important;\n      border: 1px solid var(--color-default);\n      box-shadow: none;\n      cursor: default;\n      pointer-events: none !important;\n    }\n    .field-control-readonly.disabled ~ .field-icon-left,\n    .field-control.disabled ~ .field-icon-left,\n    .field-control-readonly.disabled ~ .field-icon-right,\n    .field-control.disabled ~ .field-icon-right {\n      opacity: 0.5 !important;\n      border: none !important;\n    }\n    .field-control-readonly.disabled ~ .field-icon-left,\n    .field-control.disabled ~ .field-icon-left,\n    .field-control-readonly.disabled ~ .field-icon-right,\n    .field-control.disabled ~ .field-icon-right,\n    .field-control-readonly.disabled ~ label,\n    .field-control.disabled ~ label {\n      opacity: 0.3 !important;\n      box-shadow: none;\n      cursor: default;\n      pointer-events: none !important;\n    }\n    .field-control-readonly.invalid,\n    .field-control.invalid {\n      border-color: var(--color-error) !important;\n    }\n    .field-control-readonly.invalid ~ label,\n    .field-control.invalid ~ label {\n      transform: translateY(-8px) !important;\n      font-size: var(--font-size-label-filled-mb) !important;\n    }\n    .field-error {\n      font-weight: 400;\n      font-size: 12px;\n      line-height: 150%;\n      color: var(--color-text-error);\n      margin-top: 2px;\n      margin-left: 12px;\n    }\n    .field > .filled ~ label,\n    .field > .focus ~ label,\n    .field > .field-control:focus ~ label,\n    .field > .field-control-readonly ~ label {\n      transform: translateY(-8px) !important;\n      font-size: var(--font-size-label-filled-mb) !important;\n    }\n    .field > .field-control-readonly {\n      background: var(--color-readonly);\n      pointer-events: none;\n    }\n    .field > .field-control-readonly ~ label {\n      border-width: 1px 0;\n    }\n    .field label {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      padding: 16px 12px;\n      overflow: hidden;\n      text-align: start;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      pointer-events: none;\n      border: 1px solid transparent;\n      transform-origin: 0 0;\n      font-size: var(--font-size-label-only-mb);\n      transition: all 0.1s;\n      color: var(--color-text);\n      line-height: inherit;\n    }\n    @media (min-width: 840px) {\n      .field-control {\n        font-size: var(--font-size-default-dp) !important;\n        min-height: 56px !important;\n      }\n      .field-control.invalid ~ label {\n        font-size: var(--font-size-label-filled-dp) !important;\n      }\n      .field-error {\n        font-size: 14px !important;\n      }\n      .field > .filled ~ label,\n      .field > .focus ~ label,\n      .field > .field-control:focus ~ label,\n      .field > .field-control-readonly ~ label {\n        font-size: var(--font-size-label-filled-dp) !important;\n      }\n      .field.icon-left .field-control {\n        padding-left: 10% !important;\n      }\n      .field.icon-left > label {\n        padding-left: 10% !important;\n      }\n    }\n  "])));
+        return 'value';
       }
     }, {
+      kind: "field",
+      decorators: [(0, _decorators.property)({
+        type: String
+      })],
+      key: "iconRight",
+      value: function value() {
+        return '';
+      }
+    }, {
+      kind: "field",
+      decorators: [(0, _decorators.state)()],
+      key: "hasError",
+      value: function value() {
+        return false;
+      }
+    }, {
       kind: "method",
       key: "handleChange",
-      value:
-      // Define una propiedad `type` que recibe el tipo del input
-
-      // Define un evento personalizado para detectar cambios en el input
-      function handleChange(event) {
+      value: function handleChange(event) {
         var inputValue = event.target.value;
+        this.value = inputValue;
+        this.hasError = !!inputValue;
         this.dispatchEvent(new CustomEvent('input-change', {
@@ -110,5 +127,24 @@ detail: {
       kind: "method",
+      key: "getInputClasses",
+      value: function getInputClasses() {
+        return "field-control ".concat(this.value ? 'filled' : '', " ").concat(this.hasError ? 'error' : '');
+      }
+    }, {
+      kind: "method",
+      key: "showIconRight",
+      value: function showIconRight() {
+        var _this2 = this;
+        var action = function action() {
+          _this2.dispatchEvent(new CustomEvent('icon-action', {
+            bubbles: true,
+            composed: true
+          }));
+        };
+        return this.iconRight ? (0, _lit.html)(_templateObject || (_templateObject = _taggedTemplateLiteral(["<i class=\"field-icon-right ", "\" @click=\"", "\"></i>"])), this.iconRight, action) : '';
+      }
+    }, {
+      kind: "method",
       key: "render",
       value: function render() {
-        return (0, _lit.html)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      <div class=\"field\">\n        <label for=\"input\">", "</label>\n        <input\n          class=\"field-control\"\n          type=\"", "\"\n          placeholder=\"", "\"\n          @input=", "\n        />\n      </div>\n    "])), this.label, this.type, this.placeholder, this.handleChange);
+        return (0, _lit.html)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      ", "\n      <div class=\"field\">\n        <label for=\"input\">", "</label>\n        <input\n        class=\"", "\"\n        type=\"", "\"\n          placeholder=\"", "\"\n          @input=", "\n        />\n        ", "\n      </div>\n    "])), _cssImport.cssStyle, this.label, this.getInputClasses(), this.type, this.placeholder, this.handleChange, this.showIconRight());
       }
@@ -115,0 +151,0 @@ }]

package.json

 {
-  "version": "1.0.6",
+  "version": "1.0.7",
   "name": "@seliaco/giant-panda-components",
@@ -14,4 +14,2 @@ "main": "dist/index.js",
   "scripts": {
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
     "lint": "eslint src/**/*.ts src/**/*.scss --fix",
@@ -30,18 +28,9 @@ "watch": "npx babel src --out-dir dist --extensions '.ts' --watch",
     "@babel/preset-typescript": "^7.24.1",
-    "@chromatic-com/storybook": "^1.2.22",
-    "@storybook/addon-essentials": "^8.0.0",
-    "@storybook/addon-links": "^8.0.0",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
-    "@storybook/blocks": "^8.0.0",
-    "@storybook/test": "^8.0.0",
-    "@storybook/web-components": "^8.0.0",
-    "@storybook/web-components-webpack5": "^8.0.0",
     "@typescript-eslint/eslint-plugin": "^7.3.0",
     "@typescript-eslint/parser": "^7.3.0",
     "eslint": "^8.57.0",
-    "storybook": "^8.0.0",
     "typescript": "^5.4.2"
   },
   "dependencies": {
+    "@seliaco/giant-panda-styles": "1.0.7",
     "eslint-plugin-css-modules": "^2.12.0",
@@ -48,0 +37,0 @@ "lit": "^2.2.2"

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

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

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

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

Improved metrics

Total package byte prevSize

150729

increased by217.84%

Dev dependency count

10

decreased by-50%

Number of package files

12

increased by140%

Lines of code

1317

increased by285.09%

Number of medium quality alerts

1

decreased by-50%

Number of lines in readme file

52

increased byInfinity%

Worsened metrics

Dependency count

3

increased by50%

Number of low supply chain risk alerts

3

increased by50%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@seliaco/giant-panda-styles@1.0.7

• + Added@seliaco/giant-panda-styles@1.0.7(transitive)