wj-elements 0.0.30 → 0.0.31

package/README.md

@@ -1,21 +1,27 @@
 # WJ Elements
-WebJET Elementy sú modernou sadou nástrojov používateľského rozhrania využívajúca silu web komponentov, ktorá je určená na zjednodušenie vývoja webových aplikácií. Poskytuje kolekciu zapúzdrených a opakovane použiteľných elementov, ktoré môžu výrazne zvýšiť efektivitu a udržiavateľnosť projektov vývoja webových stránok. Ponúkajú jednoduchú integráciu s React a Vue.
+WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development. It provides a collection of encapsulated and reusable elements that can greatly increase the efficiency and maintainability of web development projects. They offer easy integration with React and Vue.
 
-Zahrňte WebJET Elements do svojho projektu pomocou [CDN](#inštalácia-s-cdn) alebo ho nainštalujte pomocou [npm](#inštalácia-s-npm).
+Include WebJET Elements in your project using [CDN](#inštalácia-s-cdn) or install it using [npm](#inštalácia-s-npm).
+
+Documentation: [elements.webjet](https://elements.webjet.sk/)
+
+Source: [https://github.com/lencys/wj-elements](https://github.com/lencys/wj-elements)
+
+Discord: [WJElements](https://discord.com/invite/b5DqKM997s)
 
 ## Inštalácia s npm
 
-Pomocou správcu balíkov npm môžete do takmer každého projektu vložiť zdrojové súbory aplikácie Elements.
+Using the npm package manager, you can insert Elements source files into almost any project.
 
-Pred pokračovaním sa uistite, že máte v počítači nainštalovaný Node.js. Ak chcete nastaviť prostredie pre Elements, pozrite si [tieto pokyny](environment.md).
+Make sure you have Node.js installed on your computer before proceeding. To set up the environment for Elements, see these instructions.
 
-Nainštalujte WebJet Elements pomocou npm:
+Install WebJet Elements using npm:
 
 ```shell
 $ npm install wj-elements
 ```
 
-Ak existovala predchádzajúca inštalácia rozhrania Ionic CLI, bude potrebné ju odinštalovať z dôvodu zmeny názvu balíka.
+If there was a previous installation of the Ionic CLI, it will need to be uninstalled due to a package name change.
 
 ```shell
 $ npm uninstall wj-elements
@@ -23,10 +29,16 @@ $ npm uninstall wj-elements
 
 ## Inštalácia s CDN
 
-Použite CDN a zahrňte do svojho projektu skompilované CSS a JS súbory WebJET Elements.
+Use CDN and include compiled CSS and JS files of WebJET Elements in your project.
 
 ```html
 <script type="module" src="https://cdn.jsdelivr.net/gh/lencys/wj-elements@dddb1c19734498c5b2a17f2e6ed605d0cd40d02e/wj-master.js"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lencys/wj-elements@e5cdd8566b4acaad5c11040bfbb4e09e170074c9/style.css" />
 ```
 
+### Basic usage
+
+```html
+<wj-button>Button</wj-button>
+```
+

package/dist/wj-carousel.js

@@ -10,7 +10,6 @@ class Carousel extends WJElement {
   constructor() {
     super();
     __publicField(this, "className", "Carousel");
-    this.activeSlide = 0;
     this.slidePerPage = 1;
   }
   set activeSlide(value) {
@@ -48,6 +47,9 @@ class Carousel extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
+  beforeDraw(context, store, params) {
+    this.cloneFirstAndLastItems();
+  }
   draw(context, store, params) {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
@@ -67,24 +69,8 @@ class Carousel extends WJElement {
       native.appendChild(this.createThumbnails());
     fragment.appendChild(native);
     this.slides = slides;
-    this.cloneFirstAndLastItems();
     return fragment;
   }
-  setIntersectionObserver() {
-    this.intersectionObserver = new IntersectionObserver((entries) => {
-      entries.forEach((entry) => {
-        this.entriesMap.set(entry.target, entry);
-      });
-    }, {
-      root: this.context.querySelector(".carousel-slides"),
-      threshold: 0.5
-    });
-    this.entriesMap = /* @__PURE__ */ new Map();
-    this.records = this.intersectionObserver.takeRecords();
-    this.records.forEach((entry) => {
-      this.entriesMap.set(entry.target, entry);
-    });
-  }
   afterDraw() {
     this.setIntersectionObserver();
     this.getSlidesWithClones().forEach((slide, i) => {
@@ -108,6 +94,21 @@ class Carousel extends WJElement {
       }
     });
   }
+  setIntersectionObserver() {
+    this.intersectionObserver = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        this.entriesMap.set(entry.target, entry);
+      });
+    }, {
+      root: this.context.querySelector(".carousel-slides"),
+      threshold: 0.5
+    });
+    this.entriesMap = /* @__PURE__ */ new Map();
+    this.records = this.intersectionObserver.takeRecords();
+    this.records.forEach((entry) => {
+      this.entriesMap.set(entry.target, entry);
+    });
+  }
   goToSlide(index, behavior = "smooth", next = true) {
     const slides = this.getSlides();
     const slideWithClones = this.getSlidesWithClones();

package/dist/wj-img.js

@@ -20,7 +20,7 @@ class Img extends WJElement {
   draw(context, store, params) {
     let fragment = document.createDocumentFragment();
     let img = document.createElement("img");
-    img.setAttribute("src", "./demo/assets/img/image-loader.gif");
+    img.setAttribute("src", "./assets/img/image-loader.gif");
     img.classList.add("lazy-loaded-image", "lazy");
     img.setAttribute("alt", this.alt || "");
     this.img = img;

package/package.json

@@ -1,8 +1,24 @@
 {
   "name": "wj-elements",
-  "private": false,
-  "version": "0.0.30",
+  "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
+  "version": "0.0.31",
+  "homepage": "https://github.com/lencys/wj-elements",
+  "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
+  "license": "MIT",
+  "customElements": "dist/custom-elements.json",
+  "keywords": [
+    "Web Components",
+    "Custom Elements",
+    "UI Components",
+    "Components",
+    "Elements"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lencys/wj-elements.git"
+  },
   "type": "module",
+  "private": false,
   "files": [
     "./dist"
   ],
@@ -25,8 +41,9 @@
     "tinycolor2": "^1.6.0"
   },
   "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.9.3",
     "miragejs": "^0.1.48",
     "sass": "^1.63.5",
     "vite": "^5.1.2"
   }
-}
+}