npm package: @gokturk413/tank-level-indicator
Description: Animated liquid level indicator web components with realistic wave effects: liquid-progress-indicator (NEW fluid-meter style), tank-gauge, tank-container, tank-level-indicator. Perfect for ioBroker.webui
Author: Your Name
Latest version: 1.5.2

# Tank Level Göstəricisi Web Components

[![npm version](https://img.shields.io/npm/v/tank-level-indicator.svg)](https://www.npmjs.com/package/tank-level-indicator)
[![license](https://img.shields.io/npm/l/tank-level-indicator.svg)](https://github.com/yourusername/tank-level-indicator/blob/main/LICENSE)

Tank level göstəricisi üçün 4 ayrı, tam müstəqil web component paketi. Realistik liquid animasiyası və dalğa effektləri ilə.

## Quraşdırma

### NPM ilə

```bash
npm install tank-level-indicator
```

### Yarn ilə

```bash
yarn add tank-level-indicator
```

### CDN ilə (Script tag)

```html
<script type="module">
  import 'https://unpkg.com/tank-level-indicator/index.js';
</script>
```

## Başlanğıc

### ES Module ilə

```javascript
import 'tank-level-indicator';
// və ya
import { TankGauge, TankContainer, TankLevelIndicator, LiquidProgressIndicator } from 'tank-level-indicator';
```
### Script Tag ilə

```html
<script src="node_modules/tank-level-indicator/tank-gauge.js"></script>
<script src="node_modules/tank-level-indicator/tank-container.js"></script>
<script src="node_modules/tank-level-indicator/tank-level-indicator.js"></script>
<script src="node_modules/tank-level-indicator/liquid-progress-indicator.js"></script>
<tank-level-indicator level="50" color="#4A90E2" animated></tank-level-indicator>
```

## Tam İstifadə Nümunəsi

```html
<!DOCTYPE html>
<html>
<head>
  <script type="module">
    import 'tank-level-indicator';
  </script>
</head>
<body>
  <div style="display: flex; gap: 15px; align-items: center;">
    <tank-gauge min="0" max="100" position="left"></tank-gauge>
    
    <tank-container width="200" height="400" capacity="1000">
      <tank-level-indicator level="75" color="#50C878" animated></tank-level-indicator>
    </tank-container>
    
    <tank-gauge min="0" max="100" position="right"></tank-gauge>
  </div>
</body>
</html>
```

## Dinamik Dəyişikliklər

JavaScript ilə level dəyişdirmək:

```javascript
const indicator = document.querySelector('tank-level-indicator');
indicator.setAttribute('level', '80');
indicator.setAttribute('color', '#FF6B6B');
```

## Xüsusiyyətlər

- ✅ Tam müstəqil web componentlər
- ✅ Shadow DOM istifadə edilir
- ✅ Animasiyalı level dəyişikliyi
- ✅ Responsive dizayn
- ✅ Müxtəlif ölçülər dəstəyi
- ✅ Rəng seçimi
- ✅ Realistik tank dizaynı (ayaqlar, outlet, və s.)
- ✅ **YENİ:** Realistik liquid animasiyası (fluid-meter ilhamında)
- ✅ **YENİ:** Çoxqatlı dalğa effektləri
- ✅ **YENİ:** 3D görünüş və işıq effektləri
- ✅ **YENİ:** Qabarcıq animasiyaları

## Demo

Layihəni klonlayın və `index.html` faylını brauzerdə açın:

```bash
git clone https://github.com/yourusername/tank-level-indicator.git
cd tank-level-indicator
# index.html faylını brauzerdə açın
```

## Browser Dəstəyi

- Chrome 54+
- Firefox 63+
- Safari 10.1+
- Edge 79+

## API Sənədləşdirmə

### TankGauge Class

```typescript
class TankGauge extends HTMLElement {
  // Atributlar
  min: string;      // Minimum dəyər
  max: string;      // Maksimum dəyər
  position: string; // "left" və ya "right"
  unit: string;     // Ölçü vahidi
}
```

### TankContainer Class

```typescript
class TankContainer extends HTMLElement {
  // Atributlar
  width: string;    // Tank eni (px)
  height: string;   // Tank hündürlüyü (px)
  capacity: string; // Həcm (litr)
}
```

### TankLevelIndicator Class

```typescript
class TankLevelIndicator extends HTMLElement {
  // Atributlar
  level: string;    // Səviyyə (0-100)
  color: string;    // Maye rəngi (hex)
  animated: boolean; // Animasiya
  
  // Metodlar
  updateLevel(level: string): void;
}
```

### LiquidProgressIndicator Class (YENİ)

```typescript
class LiquidProgressIndicator extends HTMLElement {
  // Atributlar
  level: string;           // Cari dəyər
  min: string;             // Minimum dəyər (default: 0)
  max: string;             // Maksimum dəyər (default: 100)
  color: string;           // Maye rəngi (hex)
  size: string;            // Ölçü (px)
  border-color: string;    // Kənar rəngi
  border-width: string;    // Kənar qalınlığı
  show-percentage: boolean; // Faiz göstər
  show-value: boolean;     // Dəyər göstər
  unit: string;            // Vahid (L, ml, və s.)
  animated: boolean;       // Animasiya (dalğa və qabarcıqlar)
}
```

**Liquid Progress Indicator Xüsusiyyətləri:**
- Realistik dalğa animasiyası (çoxqatlı)
- 3D görünüş və işıq effektləri
- Qabarcıq animasiyaları
- Smooth keçidlər
- Tam özelleştirilebilir

**İstifadə nümunəsi:**
```html
<liquid-progress-indicator 
  level="75" 
  min="0" 
  max="100" 
  color="#3498db" 
  size="250" 
  border-color="#2c3e50" 
  border-width="10" 
  show-percentage 
  animated>
</liquid-progress-indicator>
```

## Lisenziya

MIT © 2025

## Töhfə

Pull request-lər xoş qarşılanır! Böyük dəyişikliklər üçün əvvəlcə issue açın.

## Müəllif

Your Name

## Keywords

`web-components`, `tank`, `level-indicator`, `gauge`, `custom-elements`, `shadow-dom`, `industrial`, `iot`, `scada`