zextra-plus 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ZAKARIA ELALAOUI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,35 @@
+# ziko-lottie ⚠️ (Deprecated)
+
+> This package is deprecated and no longer maintained.
+
+Lottie player element for zikojs is now part of **zextra-plus**.
+
+---
+
+## 🚨 Deprecation Notice
+
+`ziko-lottie` has been moved and merged into a larger utilities package:
+
+👉 Please use **zextra-plus** instead.
+
+---
+
+## 📦 New Installation
+
+```bash
+npm install zextra-plus
+```
+## Usage 
+```js
+import { LottiePlayer } from "zextra-plus/lottie";
+
+const Lottie = LottiePlayer(
+    "https://assets1.lottiefiles.com/private_files/lf30_q2okh8lh.json"
+)
+.size("300px", "300px")
+.style({
+    border: "1px darkblue solid"
+});
+
+Lottie.useControls();
+```

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "zextra-plus",
+  "version": "0.0.0",
+  "description": "Extra built in zikojs components built on the top of 3rd party libraries",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "cross-env NODE_ENV=development rollup --config rollup.config.js",
+    "watch": "cross-env NODE_ENV=development rollup --config rollup.config.js -w",
+    "build": "cross-env NODE_ENV=production rollup --config rollup.config.js"
+  },
+  "author": "zakaria elaloui",
+  "keywords": [
+    "zikojs",
+    "zikojs-addons",
+    "lottiefiles",
+    "lottie-web",
+    "animation"
+  ],
+  "exports": {
+    "./*" : {
+      "import" : "./src/*/index.js"
+    }
+  },
+  "files": [
+    "src",
+    "dist",
+    "LICENCE"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^29.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^1.0.0",
+    "cross-env": "^10.1.0",
+    "rollup": "^4.60.0"
+  },
+  "dependencies": {
+    "@lottiefiles/lottie-player": "^2.0.12",
+    "zextra": "^1.1.0",
+    "ziko": "^1.0.0"
+  }
+}

package/src/lottie/index.d.ts

@@ -0,0 +1,52 @@
+import { UIElement } from "ziko/dom";
+import "@lottiefiles/lottie-player";
+
+export interface UILottiePlayerOptions {
+    src: string;
+    width?: number | string;
+    height?: number | string;
+}
+
+export declare class UILottiePlayer extends UIElement {
+    element: HTMLLottiePlayerElement;
+
+    constructor(
+        src: string,
+        width?: number | string,
+        height?: number | string
+    );
+
+    play(): this;
+    pause(): this;
+
+    useControls(use?: boolean): this;
+    useLoop(use?: boolean): this;
+
+    toggleControls(): this;
+
+    setMode(mode?: string): this;
+}
+
+export interface LottiePlayerProps {
+    src?: string;
+    width?: number | string;
+    height?: number | string;
+}
+
+export declare const LottiePlayer: (
+    props?: LottiePlayerProps
+) => UILottiePlayer;
+
+/**
+ * Lottie Player element interface (from @lottiefiles/lottie-player)
+ */
+export interface HTMLLottiePlayerElement extends HTMLElement {
+    src: string;
+    autoplay: boolean;
+    loop: boolean;
+    controls: boolean;
+    mode: string;
+
+    play(): void;
+    pause(): void;
+}

package/src/lottie/index.js

@@ -0,0 +1,40 @@
+import {UIElement} from "ziko/dom"
+import "@lottiefiles/lottie-player"
+class UILottiePlayer extends UIElement{
+    constructor(src,width,height = width){
+        super({element : "lottie-player", name : "LottiePlayer"});
+        this.element.src=src;
+        if(width) this.size(width,height);
+        this.setAttr("aria-label","Lottie animation");
+        this.setAttr("aria-describedby",`lottie-player-description-id`);
+    }
+    play(){
+        this.element.play();
+        return this;
+    }
+    pause(){
+        this.element.pause();
+        return this;
+    }
+    useControls(use=true){
+        this.element.controls=use;
+        return this;
+    }
+    useLoop(use = true){
+        this.element.loop=use;
+        return this;
+    }
+    toggleControls(){
+        this.element.controls=!this.element.controls;
+        return this;
+    }
+    setMode(mode="normal"){
+        this.element.mode=mode;
+        return this;
+    }
+}
+export const LottiePlayer=({
+    src = "https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json",
+    width,
+    height
+} = {})=>new UILottiePlayer(src,width,height);