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

Comparing version 1.0.7 to 1.0.8

dist/components/ButtonComponent.js

@@ -104,18 +104,6 @@ "use strict";
     }, {
-      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)(_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);
+        return (0, _lit.html)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      ", "\n      <button class=\"", "\" type=\"button\" ?disabled=\"", "\">\n        <slot></slot>\n      </button>\n    "])), _cssImport.cssStyle, this.classResolver(), this.disabled);
       }
@@ -122,0 +110,0 @@ }]

dist/components/CarrouselComponent.js

@@ -12,3 +12,3 @@ "use strict";
 require("./ButtonComponent");
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
@@ -22,3 +22,2 @@ 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); } }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
@@ -42,2 +41,5 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get.bind(); } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
+function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 var CarrouselComponent = exports.CarrouselComponent = _decorate([(0, _decorators.customElement)('carrousel-component')], function (_initialize, _LitElement) {
@@ -63,10 +65,19 @@ var CarrouselComponent = /*#__PURE__*/function (_LitElement2) {
       decorators: [(0, _decorators.property)({
-        type: Array
+        type: Boolean
       })],
-      key: "items",
+      key: "autoloop",
       value: function value() {
-        return '';
+        return false;
       }
     }, {
       kind: "field",
+      decorators: [(0, _decorators.property)({
+        type: Number
+      })],
+      key: "time",
+      value: function value() {
+        return 2000;
+      }
+    }, {
+      kind: "field",
       decorators: [(0, _decorators.state)()],
@@ -79,13 +90,36 @@ key: "position",
       kind: "field",
+      decorators: [(0, _decorators.state)()],
+      key: "slots",
+      value: function value() {
+        return [];
+      }
+    }, {
+      kind: "field",
       "static": true,
       key: "styles",
       value: function value() {
-        return (0, _lit.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    .carrousel {\n      display: flex;\n      overflow-x: auto;\n      scroll-snap-type: x mandatory;\n      scroll-behavior: smooth;\n      -webkit-overflow-scrolling: touch;\n      scroll-snap-points-x: repeat(100%);\n      scroll-snap-type: mandatory;\n    }\n\n    button {\n      cursor: pointer;\n      position: absolute;\n      transform: translateY(50%);\n    }\n  "])));
+        return (0, _lit.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    .carrousel {\n      display: flex;\n      align-items: center;\n      gap: 24px;\n      transition: all 0.5s;\n      position: relative;\n      width: fit-content;\n    }\n\n    button {\n      cursor: pointer;\n      position: absolute;\n      transform: translateY(50%);\n    }\n\n    .carrousel-dots {\n      display: flex;\n      gap: 8px;\n      position: absolute;\n      bottom: -40px;\n      left: 0;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n    }\n\n    .carrousel-dot {\n      background: var(--purple-40);\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n    }\n\n    .carrousel-dot.active {\n      background: var(--purple-60);\n    }\n  "])));
       }
     }, {
       kind: "method",
+      key: "firstUpdated",
+      value: function firstUpdated() {
+        var _this$shadowRoot,
+          _this2 = this;
+        var slot = (_this$shadowRoot = this.shadowRoot) === null || _this$shadowRoot === void 0 ? void 0 : _this$shadowRoot.querySelector('slot');
+        this.slots = slot === null || slot === void 0 ? void 0 : slot.assignedElements();
+        if (this.autoloop) {
+          setInterval(function () {
+            _this2.next();
+          }, this.time);
+        }
+      }
+    }, {
+      kind: "method",
       key: "next",
       value: function next() {
-        if (this.items.length - 1 > this.position) {
+        if (this.slots.length - 1 > this.position) {
           this.position++;
+        } else if (this.position === this.slots.length - 1) {
+          this.position = 0;
         }
@@ -99,2 +133,4 @@ }
           this.position--;
+        } else if (this.position === 0) {
+          this.position = this.slots.length - 1;
         }
@@ -105,11 +141,11 @@ }
       key: "updated",
-      value: function updated() {
-        var _this$shadowRoot,
-          _this2 = this;
-        console.log(this.position);
-        var slot = (_this$shadowRoot = this.shadowRoot) === null || _this$shadowRoot === void 0 ? void 0 : _this$shadowRoot.querySelector('slot');
-        var nodes = slot === null || slot === void 0 ? void 0 : slot.assignedElements();
-        nodes === null || nodes === void 0 || nodes.forEach(function (div, index) {
-          div.style.display = index === _this2.position ? 'block' : 'none';
-        });
+      value: function updated(changedProperties) {
+        var _this3 = this;
+        _get(_getPrototypeOf(CarrouselComponent.prototype), "updated", this).call(this, changedProperties);
+        if (this.slots) {
+          var _this$slots;
+          (_this$slots = this.slots) === null || _this$slots === void 0 || _this$slots.forEach(function (div, index) {
+            div.style.display = index === _this3.position ? 'block' : 'none';
+          });
+        }
       }
@@ -120,3 +156,8 @@ }, {
       value: function render() {
-        return (0, _lit.html)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      ", "\n\n      <div class=\"carrousel\">\n        <button-component class=\"carrousel-button\" @click=\"", "\">\n          <span class=\"icon-arrow-big-outline-left\"></span>\n        </button-component>\n        <slot></slot>\n        <button-component class=\"carrousel-button\" @click=\"", "\">\n          <span class=\"icon-arrow-big-outline-right\"></span>\n        </button-component>\n      </div>\n    "])), _cssImport.cssStyle, this.prev, this.next);
+        var _this4 = this;
+        return (0, _lit.html)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      ", "\n\n      <div class=\"carrousel\">\n        <button-component\n          type=\"circle\"\n          color=\"white\"\n          class=\"carrousel-button\"\n          @click=\"", "\"\n        >\n          <span class=\"icon-arrow-big-outline-left\"></span>\n        </button-component>\n        <slot></slot>\n        <button-component\n          type=\"circle\"\n          color=\"white\"\n          class=\"carrousel-button\"\n          @click=\"", "\"\n        >\n          <span class=\"icon-arrow-big-outline-right\"></span>\n        </button-component>\n        <div class=\"carrousel-dots\">\n          ", "\n        </div>\n      </div>\n    "])), _cssImport.cssStyle, this.prev, this.next, this.slots.map(function (dot, index) {
+          return (0, _lit.html)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n              <span\n                @click=\"", "\"\n                class=\"carrousel-dot ", "\"\n              ></span>\n            "])), function () {
+            return _this4.position = index;
+          }, index === _this4.position ? 'active' : '');
+        }));
       }
@@ -123,0 +164,0 @@ }]

package.json

 {
-  "version": "1.0.7",
+  "version": "1.0.8",
   "name": "@seliaco/giant-panda-components",
@@ -4,0 +4,0 @@ "main": "dist/index.js",

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

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

Improved metrics

Number of downloads

12

increased by33.33%

Number of low supply chain risk alerts

2

decreased by-33.33%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

127979

decreased by-15.09%

Number of package files

11

decreased by-8.33%

Lines of code

1153

decreased by-12.45%

No dependency changes