@mhmo91/schmancy 0.8.6 → 0.9.2

package/dist/ai/timezone.md

@@ -1,276 +0,0 @@
-# Schmancy Timezone Select - AI Reference
-
-## Quick Start
-
-```typescript
-import '@schmancy/index'  // For all Schmancy components
-// Or specific import: import '@schmancy/extra' // Timezone is part of extra
-```
-
-## Component Overview
-
-A timezone selection component with autocomplete functionality, providing a comprehensive list of global timezones with UTC offsets and region information.
-
-## API
-
-```typescript
-// Timezone Select Component
-<schmancy-select-timezones
-  value?="string"                    // Selected timezone ID
-  label?="string"                    // Label text (default: "Timezone")
-  hint?="string"                     // Helper text (default: "Please select a timezone")
-  placeholder?="string"              // Placeholder (default: "Select a timezone")
-  name?="string"                     // Form field name
-  required?="boolean"                // Required field
-  @change=${handleChange}>           // Selection change event
-</schmancy-select-timezones>
-
-// Component Properties
-value: string         // Timezone identifier (e.g., "America/New_York")
-label: string        // Field label
-hint: string         // Helper text below field
-placeholder: string  // Placeholder text
-name: string         // Form field name
-required: boolean    // Required validation
-
-// Events
-@change  // Fires when timezone selection changes
-
-// Methods
-checkValidity() -> boolean      // Validate selection
-reportValidity() -> boolean     // Report validation state
-setCustomValidity(message) -> void  // Set custom error
-```
-
-## Examples
-
-### Basic Usage
-
-```typescript
-// Simple timezone selector
-<schmancy-select-timezones 
-  @change=${(e) => console.log('Selected:', e.detail.value)}>
-</schmancy-select-timezones>
-
-// With initial value
-<schmancy-select-timezones 
-  value="America/New_York"
-  @change=${handleTimezoneChange}>
-</schmancy-select-timezones>
-
-// Required field
-<schmancy-select-timezones 
-  required
-  name="timezone"
-  label="Your Timezone"
-  hint="Used for scheduling">
-</schmancy-select-timezones>
-```
-
-### Form Integration
-
-```typescript
-// User preferences form
-<schmancy-form @submit=${handleSavePreferences}>
-  <schmancy-select-timezones 
-    name="timezone" 
-    value=${this.userTimezone}
-    required>
-  </schmancy-select-timezones>
-  
-  <schmancy-select-countries 
-    name="country" 
-    value=${this.userCountry}>
-  </schmancy-select-countries>
-  
-  <schmancy-button type="submit" variant="filled">
-    Save Preferences
-  </schmancy-button>
-</schmancy-form>
-```
-
-### Real-World Examples
-
-```typescript
-// Meeting scheduler with timezone
-class MeetingScheduler extends LitElement {
-  @state() selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-  @state() meetingTime = '';
-  
-  render() {
-    return html`
-      <schmancy-surface class="p-6">
-        <schmancy-typography type="headline" token="sm" class="mb-4 block">
-          Schedule Meeting
-        </schmancy-typography>
-        
-        <schmancy-form @submit=${this.scheduleMeeting}>
-          <div class="space-y-4">
-            <schmancy-input 
-              type="datetime-local"
-              label="Meeting Time"
-              name="time"
-              required
-              @change=${(e) => this.meetingTime = e.detail.value}>
-            </schmancy-input>
-            
-            <schmancy-select-timezones 
-              name="timezone"
-              value=${this.selectedTimezone}
-              @change=${this.handleTimezoneChange}>
-            </schmancy-select-timezones>
-            
-            <div class="bg-surface-container p-3 rounded">
-              <schmancy-typography type="body" token="sm">
-                ${this.getLocalTimeDisplay()}
-              </schmancy-typography>
-            </div>
-          </div>
-          
-          <schmancy-button type="submit" variant="filled" class="mt-4">
-            Schedule
-          </schmancy-button>
-        </schmancy-form>
-      </schmancy-surface>
-    `
-  }
-  
-  getLocalTimeDisplay() {
-    if (!this.meetingTime || !this.selectedTimezone) return '';
-    // Convert to different timezones for display
-    const date = new Date(this.meetingTime);
-    return `Local time: ${date.toLocaleString('en-US', { 
-      timeZone: this.selectedTimezone 
-    })}`;
-  }
-}
-
-// User profile with auto-detection
-class UserProfile extends LitElement {
-  @state() detectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-  
-  connectedCallback() {
-    super.connectedCallback();
-    // Auto-detect user's timezone
-    this.requestUpdate();
-  }
-  
-  render() {
-    return html`
-      <div class="space-y-4">
-        <schmancy-typography type="body" token="sm" class="text-surface-onVariant">
-          Detected timezone: ${this.detectedTimezone}
-        </schmancy-typography>
-        
-        <schmancy-select-timezones 
-          value=${this.detectedTimezone}
-          label="Confirm your timezone"
-          hint="We'll use this for notifications and scheduling"
-          @change=${this.updateTimezone}>
-        </schmancy-select-timezones>
-        
-        <schmancy-button 
-          variant="filled" 
-          @click=${this.saveProfile}>
-          Save Profile
-        </schmancy-button>
-      </div>
-    `
-  }
-}
-```
-
-## Timezone Data Structure
-
-Each timezone in the dataset includes:
-
-```typescript
-interface Timezone {
-  text: string;   // Display text with offset (e.g., "(UTC-05:00) Eastern Time")
-  value: string;  // Timezone ID (e.g., "America/New_York")
-  offset: string; // UTC offset (e.g., "-05:00")
-  abbr: string;   // Abbreviation (e.g., "EST")
-}
-
-// Example:
-{
-  text: "(UTC-05:00) Eastern Time (US & Canada)",
-  value: "America/New_York",
-  offset: "-05:00",
-  abbr: "EST"
-}
-```
-
-## Features
-
-- **Comprehensive List**: All global timezones with regions
-- **UTC Offsets**: Visual offset display for easy identification
-- **Search**: Filter by timezone name, city, or offset
-- **Auto-detection**: Can detect user's current timezone
-- **Daylight Saving**: Handles DST automatically
-- **Form Integration**: Works with native forms
-- **Grouped Display**: Timezones grouped by offset
-
-## Common Use Cases
-
-1. **User Preferences**: Setting user's default timezone
-2. **Event Scheduling**: Selecting timezone for meetings/events
-3. **Notifications**: Configuring notification delivery times
-4. **Reports**: Setting timezone for data analysis
-5. **International Apps**: Multi-timezone support
-
-## Accessibility
-
-- Proper ARIA labels and roles
-- Keyboard navigation support
-- Screen reader friendly
-- High contrast mode support
-- Clear visual indicators
-
-## Best Practices
-
-1. **Auto-Detection**: Pre-select user's detected timezone
-2. **Display Format**: Show both offset and name
-3. **Validation**: Use required for mandatory fields
-4. **Updates**: Handle timezone database updates
-5. **DST Handling**: Account for daylight saving changes
-
-## Common Pitfalls
-
-- **ID vs Display**: Value is timezone ID, not display text
-- **DST Changes**: Offsets may vary with daylight saving
-- **Browser Support**: Intl API availability varies
-- **Historical Data**: Past dates may have different offsets
-
-## Related Components
-
-- **[Autocomplete](./autocomplete.md)**: Base component
-- **[Countries](./countries.md)**: Often used together
-- **[Form](./form.md)**: Form integration
-- **[Date Range](./date-range.md)**: Date/time selection
-
-## TypeScript Interface
-
-```typescript
-interface SchmancySelectTimezonesElement extends HTMLElement {
-  value: string;
-  label: string;
-  hint: string;
-  placeholder: string;
-  name: string;
-  required: boolean;
-  checkValidity(): boolean;
-  reportValidity(): boolean;
-  setCustomValidity(message: string): void;
-}
-
-// Change event
-interface TimezoneChangeEvent extends CustomEvent {
-  detail: {
-    value: string;  // Timezone ID
-  };
-}
-
-// Utility functions
-const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-```

package/dist/ai/typewriter.md

@@ -1,335 +0,0 @@
-# Typewriter Component
-
-An engaging text animation component that simulates typing effects with customizable speed, delays, and advanced sequencing capabilities. Features a simple API for cycling through text with automatic character deletion.
-
-## Quick Start
-
-```html
-<!-- Basic typewriter effect -->
-<schmancy-typewriter>
-  Hello, World! This text will be typed out character by character.
-</schmancy-typewriter>
-
-<!-- Cycling through words (auto-calculates delete counts) -->
-<schmancy-typewriter>
-  We are <span cycle="developers | designers | innovators"></span>
-</schmancy-typewriter>
-
-<!-- With custom speed and cursor -->
-<schmancy-typewriter speed="30" delay="500" cursorChar="|">
-  Fast typing with a blinking cursor.
-</schmancy-typewriter>
-
-<!-- Infinite loop -->
-<schmancy-typewriter loop>
-  This will type and delete forever!
-  <span cycle="Amazing | Incredible | Fantastic"></span>
-</schmancy-typewriter>
-```
-
-## Properties
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `speed` | `number` | `50` | Typing speed (ms per character) |
-| `delay` | `number` | `0` | Initial delay before typing starts |
-| `autoStart` | `boolean` | `true` | Start typing automatically |
-| `cursorChar` | `string` | `''` | Custom cursor character (empty = no cursor) |
-| `deleteSpeed` | `number` | `25` | Speed for deletion (ms per character) |
-| `cyclePause` | `number` | `1500` | Default pause between cycle items (ms) |
-| `once` | `boolean` | `true` | Only animate once per session |
-| `loop` | `boolean` | `false` | Loop animation infinitely (overrides `once`) |
-
-## Events
-
-### typeit-complete
-Fired when typing animation completes.
-
-```javascript
-element.addEventListener('typeit-complete', () => {
-  console.log('Typing finished!');
-});
-```
-
-## Examples
-
-### Hero Section with Cycling
-```html
-<div class="hero">
-  <h1>
-    <schmancy-typewriter speed="100" delay="300">
-      Welcome to the <span cycle="Future | Innovation | Revolution"></span>
-    </schmancy-typewriter>
-  </h1>
-  <p>
-    <schmancy-typewriter delay="2000" speed="40">
-      Where innovation meets possibility.
-    </schmancy-typewriter>
-  </p>
-</div>
-```
-
-### Rotating Value Propositions
-```html
-<schmancy-typewriter speed="80" cyclePause="1200">
-  Building systems that are
-  <br />
-  <span cycle="Trustless | Permissionless | Transparent | Borderless | Resilient" pause="1500"></span>
-  <br />
-  empowering everyone to operate freely.
-</schmancy-typewriter>
-```
-
-### Multi-line Typing
-```html
-<schmancy-typewriter speed="60">
-  <p>First paragraph of text.</p>
-  <p>Second paragraph appears on a new line.</p>
-  <p>Third paragraph continues the story.</p>
-</schmancy-typewriter>
-```
-
-### Terminal Effect
-```html
-<div class="terminal">
-  <schmancy-typewriter cursorChar="|" speed="30">
-    $ npm install schmancy-ui
-    <span action="pause" value="500"></span>
-    <p>Installing dependencies...</p>
-    <span action="pause" value="1000"></span>
-    <p>✓ Installation complete!</p>
-  </schmancy-typewriter>
-</div>
-```
-
-### Product Features Carousel
-```html
-<schmancy-typewriter loop cursorChar="_">
-  <span cycle="Lightning Fast ⚡ | Fully Typed 📘 | Zero Config 🎯 | Production Ready 🚀"></span>
-</schmancy-typewriter>
-```
-
-### Dynamic Job Titles
-```html
-<h2>
-  We're hiring <span cycle="Frontend Developers | Backend Engineers | UI/UX Designers | DevOps Specialists"></span>
-</h2>
-```
-
-### Code Tutorial
-```html
-<schmancy-typewriter speed="40">
-  <code>
-    function greet(name) {
-      <span action="pause" value="300"></span>
-      return `Hello, ${name}!`;
-      <span action="pause" value="300"></span>
-    }
-  </code>
-</schmancy-typewriter>
-```
-
-## Cycling API (NEW!)
-
-The `cycle` attribute makes it effortless to rotate through text with **automatic character deletion**. No need to manually count characters!
-
-### Basic Usage
-
-```html
-<!-- Simple cycling -->
-<span cycle="Option 1 | Option 2 | Option 3"></span>
-
-<!-- With custom pause duration -->
-<span cycle="Fast | Quick | Rapid" pause="800"></span>
-
-<!-- In context -->
-<schmancy-typewriter>
-  We are <span cycle="developers | designers | innovators"></span>
-</schmancy-typewriter>
-```
-
-### Cycle Attributes
-
-| Attribute | Type | Description |
-|-----------|------|-------------|
-| `cycle` | `string` | Pipe-separated list of text items to cycle through |
-| `pause` | `number` | Override default pause between items (milliseconds) |
-
-### Benefits
-
-- ✅ **Auto-calculated deletes** - no manual character counting
-- ✅ **Clean syntax** - just list your items with `|` separator
-- ✅ **Consistent timing** - uses `cyclePause` property or custom `pause`
-- ✅ **Works with `loop`** - infinite cycling made simple
-
-### Advanced Cycling
-
-```html
-<!-- Hero headline that cycles forever -->
-<schmancy-typewriter loop cyclePause="2000">
-  <h1>Welcome to <span cycle="the Future | Innovation | Tomorrow"></span></h1>
-</schmancy-typewriter>
-
-<!-- Mixed static and cycling text -->
-<schmancy-typewriter>
-  Our product is
-  <span action="pause" value="500"></span>
-  <span cycle="Fast ⚡ | Secure 🔒 | Reliable ✅ | Modern 🚀" pause="1800"></span>
-  for your business.
-</schmancy-typewriter>
-```
-
-## Actions System
-
-Special action elements for fine-grained control:
-
-| Action | Value | Description |
-|--------|-------|-------------|
-| `pause` | milliseconds | Pause typing for specified duration |
-| `delete` | character count | Delete specified number of characters (manual) |
-
-```html
-<span action="pause" value="1000"></span> <!-- 1 second pause -->
-<span action="delete" value="5"></span> <!-- Delete 5 characters manually -->
-```
-
-**Note:** For cycling text with automatic deletion, use the `cycle` attribute instead!
-
-## Features
-
-### Session Memory
-When `once` is true, remembers completion state per session:
-- Uses sessionStorage with content hash
-- Skips animation on repeat views
-- Clears on session end
-
-### Context Integration
-Inherits delay from parent `schmancy-delay` components:
-
-```html
-<schmancy-delay delay="1000">
-  <schmancy-typewriter> <!-- Inherits 1000ms delay -->
-    This starts typing after 1 second
-  </schmancy-typewriter>
-</schmancy-delay>
-```
-
-### Intersection Observer
-Only starts typing when element is in viewport:
-- Efficient performance
-- Better user experience
-- Automatic trigger on scroll
-
-### TypeIt Integration
-Powered by the TypeIt library for smooth, reliable animations.
-
-## Styling
-
-```css
-/* Hide cursor after completion */
-schmancy-typewriter {
-  --ti-cursor-display: none;
-}
-
-/* Custom cursor styling */
-schmancy-typewriter .ti-cursor {
-  color: var(--schmancy-sys-color-primary-default);
-  font-weight: normal;
-}
-```
-
-## Advanced Configuration
-
-```javascript
-// TypeIt options passed through
-const typeItOptions = {
-  speed: this.speed,
-  startDelay: this.delay,
-  cursor: !!this.cursorChar,
-  cursorChar: this.cursorChar,
-  deleteSpeed: this.deleteSpeed,
-  afterComplete: () => {
-    // Custom completion logic
-  }
-};
-```
-
-## Accessibility
-
-- Uses `aria-live="polite"` for screen reader support
-- Completed text remains in DOM
-- Semantic HTML structure maintained
-
-## Best Practices
-
-1. **Speed**: 40-80ms for comfortable reading speed
-2. **Delays**: Use pauses for emphasis
-3. **Content**: Keep animations short and meaningful
-4. **Performance**: Limit concurrent typewriters
-5. **Mobile**: Test on various devices
-
-## Related Components
-
-- [Animated Text](./animated-text.md) - Word/letter animations
-- [Delay](./delay.md) - Coordinated delays
-- [Typography](./typography.md) - Text styling
-
-## Use Cases
-
-### Perfect for:
-
-1. **Hero Headlines**: Rotating value propositions and key messages
-   ```html
-   <span cycle="Fast | Secure | Reliable"></span>
-   ```
-
-2. **Product Features**: Cycling through benefits and capabilities
-   ```html
-   <span cycle="Zero Config 🎯 | Type-Safe 📘 | Lightning Fast ⚡"></span>
-   ```
-
-3. **Job Postings**: Dynamic role descriptions
-   ```html
-   We're hiring <span cycle="Developers | Designers | Engineers"></span>
-   ```
-
-4. **Testimonials**: Rotating customer quotes
-   ```html
-   <span cycle="Amazing product! | Best tool ever! | Game changer!"></span>
-   ```
-
-5. **Tutorials**: Step-by-step code examples with timing
-6. **Storytelling**: Narrative experiences with dramatic pauses
-7. **Loading States**: Entertaining wait messages that cycle
-8. **Terminal UIs**: Command-line interface simulations
-
-## Migration Guide
-
-### From Manual Deletes to Cycle API
-
-**Before (Manual counting - error prone!):**
-```html
-<schmancy-typewriter>
-  We are
-  developers
-  <span action="delete" value="10"></span>
-  designers
-  <span action="delete" value="9"></span>
-  innovators
-</schmancy-typewriter>
-```
-
-**After (Automatic - clean & simple!):**
-```html
-<schmancy-typewriter>
-  We are <span cycle="developers | designers | innovators"></span>
-</schmancy-typewriter>
-```
-
-### Benefits of the New API
-
-- 🚫 **No more counting characters** - automatic deletion
-- ✨ **Cleaner markup** - one line instead of many
-- 🛡️ **Less error-prone** - no typos in character counts
-- 🔄 **Easy updates** - just add/remove words from the list
-- 🎨 **Better readability** - see all options at a glance

package/dist/animated-text-B3DQRJBy.cjs

@@ -1,37 +0,0 @@
-"use strict";const e=require("rxjs");require("rxjs/operators"),require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const r=require("lit/decorators.js");require("./tailwind.mixin-Cp4PyXok.cjs");const h=require("./litElement.mixin-CrpeGpZ7.cjs"),c=require("lit");var d=Object.defineProperty,u=Object.getOwnPropertyDescriptor,s=(i,a,p,n)=>{for(var l,o=n>1?void 0:n?u(a,p):a,y=i.length-1;y>=0;y--)(l=i[y])&&(o=(n?l(a,p,o):l(o))||o);return n&&o&&d(a,p,o),o};let t=class extends h.$LitElement(c.css`
-	:host {
-		font-family: inherit;
-		display: block;
-	}
-	.ml7 {
-		position: relative;
-		display: flex;
-	}
-	.ml7 .text-wrapper {
-		position: relative;
-		display: inline-block;
-		overflow: hidden;
-	}
-	.ml7 .letter {
-		transform-origin: 0 100%;
-		display: inline-block;
-		opacity: 0;
-	}
-`){constructor(){super(...arguments),this.ease="outExpo",this.delay=0,this.stagger=50,this.duration=750,this.scale=[0,1],this.opacity=[0,1],this.translateX=["0.55em","0em"],this.translateY=["1.1em","0em"],this.translateZ=[0,0],this.rotateZ=[180,0],this.resetOnScroll=!0}isInViewport(i){const a=i.getBoundingClientRect();return a.top>=0&&a.left>=0&&a.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&a.right<=(window.innerWidth||document.documentElement.clientWidth)}async firstUpdated(){this.letters.innerHTML=this.defaultSlot[0].textContent.replace(/\S/g,'<span class="letter">$&</span>'),e.concat(e.interval(10).pipe(e.startWith(!0),e.filter(()=>{const i=this.getBoundingClientRect();return i.width>0&&i.height>0}),e.take(1)),e.fromEvent(window,"scroll").pipe(e.throttleTime(0,void 0,{leading:!0,trailing:!0}),e.startWith(!0),e.map(()=>this.isInViewport(this)),e.distinctUntilChanged(),e.tap(i=>{!i&&this.resetOnScroll&&Array.from(this.letters.children).forEach(a=>{a.style.opacity="0"})}),e.filter(i=>i),this.resetOnScroll?e.tap():e.take(1),e.tap({next:()=>{this.shadowRoot.querySelectorAll(".ml7 .letter").forEach((i,a)=>{const p=`
-                translate3d(${this.translateX[0]}, ${this.translateY[0]}, ${this.translateZ[0]}px)
-                rotateZ(${this.rotateZ[0]}deg)
-                scale(${this.scale[0]})
-              `,n=`
-                translate3d(${this.translateX[1]}, ${this.translateY[1]}, ${this.translateZ[1]}px)
-                rotateZ(${this.rotateZ[1]}deg)
-                scale(${this.scale[1]})
-              `,l=[{transform:p,opacity:String(this.opacity[0])},{transform:n,opacity:String(this.opacity[1])}];i.animate(l,{duration:this.duration,easing:{outExpo:"cubic-bezier(0.19, 1, 0.22, 1)"}[this.ease]||"ease-out",delay:this.delay+a*this.stagger,fill:"forwards"})})}}))).subscribe()}render(){return c.html`
-			<span class="ml7">
-				<span class="text-wrapper">
-					<span class="letters">
-						<slot></slot>
-					</span>
-				</span>
-			</span>
-		`}};s([r.property({type:String})],t.prototype,"ease",2),s([r.property({type:Number})],t.prototype,"delay",2),s([r.property({type:Number})],t.prototype,"stagger",2),s([r.property({type:Number})],t.prototype,"duration",2),s([r.property({type:Array})],t.prototype,"scale",2),s([r.property({type:Array})],t.prototype,"opacity",2),s([r.property({type:Array})],t.prototype,"translateX",2),s([r.property({type:Array})],t.prototype,"translateY",2),s([r.property({type:Array})],t.prototype,"translateZ",2),s([r.property({type:Array})],t.prototype,"rotateZ",2),s([r.property({type:Boolean})],t.prototype,"resetOnScroll",2),s([r.queryAssignedNodes()],t.prototype,"defaultSlot",2),s([r.query(".letters")],t.prototype,"letters",2),s([r.query(".ml7")],t.prototype,"ml7",2),t=s([r.customElement("schmancy-animated-text")],t);
-//# sourceMappingURL=animated-text-B3DQRJBy.cjs.map

package/dist/animated-text-B3DQRJBy.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"animated-text-B3DQRJBy.cjs","sources":["../src/animated-text/animated-text.ts"],"sourcesContent":["// Removed: import { createTimeline, stagger } from '@packages/anime-beta-master'\nimport { $LitElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAssignedNodes } from 'lit/decorators.js'\nimport {\n\tconcat,\n\tdistinctUntilChanged,\n\tfilter,\n\tfromEvent,\n\tinterval,\n\tmap,\n\tstartWith,\n\ttake,\n\ttap,\n\tthrottleTime,\n} from 'rxjs'\n\n/**\n * @element schmancy-animated-text\n * Inspired by https://tobiasahlin.com/moving-letters/#1\n */\n@customElement('schmancy-animated-text')\nexport default class SchmancyAnimatedText extends $LitElement(css`\n\t:host {\n\t\tfont-family: inherit;\n\t\tdisplay: block;\n\t}\n\t.ml7 {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t}\n\t.ml7 .text-wrapper {\n\t\tposition: relative;\n\t\tdisplay: inline-block;\n\t\toverflow: hidden;\n\t}\n\t.ml7 .letter {\n\t\ttransform-origin: 0 100%;\n\t\tdisplay: inline-block;\n\t\topacity: 0;\n\t}\n`) {\n\t@property({ type: String }) ease = 'outExpo' // not a built-in string for Web Animations\n\t@property({ type: Number }) delay = 0\n\t@property({ type: Number }) stagger = 50\n\t@property({ type: Number }) duration = 750\n\t@property({ type: Array }) scale = [0, 1]\n\t@property({ type: Array }) opacity = [0, 1]\n\t@property({ type: Array }) translateX = ['0.55em', '0em']\n\t@property({ type: Array }) translateY = ['1.1em', '0em']\n\t@property({ type: Array }) translateZ = [0, 0]\n\t@property({ type: Array }) rotateZ = [180, 0]\n\t@property({ type: Boolean }) resetOnScroll = true\n\n\t@queryAssignedNodes() defaultSlot!: HTMLElement[]\n\t@query('.letters') letters!: HTMLElement\n\t@query('.ml7') ml7!: HTMLElement\n\n\t// Function to check if an element is in the viewport\n\tisInViewport(element: HTMLElement) {\n\t\tconst rect = element.getBoundingClientRect()\n\t\treturn (\n\t\t\trect.top >= 0 &&\n\t\t\trect.left >= 0 &&\n\t\t\trect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n\t\t\trect.right <= (window.innerWidth || document.documentElement.clientWidth)\n\t\t)\n\t}\n\n\tasync firstUpdated() {\n\t\t// Split the text into <span class=\"letter\"> ... </span> elements\n\t\tthis.letters.innerHTML = this.defaultSlot[0].textContent!.replace(/\\S/g, `<span class=\"letter\">$&</span>`)\n\n\t\t// Observe viewport + initial readiness\n\t\tconcat(\n\t\t\t// 1) Wait until the element is rendered (width/height > 0)\n\t\t\tinterval(10).pipe(\n\t\t\t\tstartWith(true),\n\t\t\t\tfilter(() => {\n\t\t\t\t\tconst rect = this.getBoundingClientRect()\n\t\t\t\t\treturn rect.width > 0 && rect.height > 0\n\t\t\t\t}),\n\t\t\t\ttake(1),\n\t\t\t),\n\t\t\t// 2) Then handle scroll events, throttled\n\t\t\tfromEvent(window, 'scroll').pipe(\n\t\t\t\tthrottleTime(0, undefined, {\n\t\t\t\t\tleading: true,\n\t\t\t\t\ttrailing: true,\n\t\t\t\t}),\n\t\t\t\tstartWith(true),\n\t\t\t\tmap(() => this.isInViewport(this)),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttap(inViewport => {\n\t\t\t\t\t// If leaving viewport and `resetOnScroll` is true, reset letters to opacity 0\n\t\t\t\t\tif (!inViewport && this.resetOnScroll) {\n\t\t\t\t\t\tArray.from(this.letters.children).forEach((letter: HTMLElement) => {\n\t\t\t\t\t\t\tletter.style.opacity = '0'\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t\tfilter(isInViewport => isInViewport),\n\t\t\t\t// If resetOnScroll = false, animate only the first time inView. If true, repeat.\n\t\t\t\tthis.resetOnScroll ? tap() : take(1),\n\t\t\t\ttap({\n\t\t\t\t\tnext: () => {\n\t\t\t\t\t\t// Animate letters with the native Web Animations API\n\t\t\t\t\t\tconst letters = this.shadowRoot!.querySelectorAll<HTMLElement>('.ml7 .letter')\n\n\t\t\t\t\t\tletters.forEach((letter, i) => {\n\t\t\t\t\t\t\t// Combine all transforms into one CSS transform string\n\t\t\t\t\t\t\t// From\n\t\t\t\t\t\t\tconst fromTransform = `\n                translate3d(${this.translateX[0]}, ${this.translateY[0]}, ${this.translateZ[0]}px)\n                rotateZ(${this.rotateZ[0]}deg)\n                scale(${this.scale[0]})\n              `\n\t\t\t\t\t\t\t// To\n\t\t\t\t\t\t\tconst toTransform = `\n                translate3d(${this.translateX[1]}, ${this.translateY[1]}, ${this.translateZ[1]}px)\n                rotateZ(${this.rotateZ[1]}deg)\n                scale(${this.scale[1]})\n              `\n\t\t\t\t\t\t\t// Approximate `outExpo` or pick a standard easing (like 'ease-out'):\n\t\t\t\t\t\t\t// outExpo often approximated by cubic-bezier(0.19, 1, 0.22, 1)\n\t\t\t\t\t\t\tconst easingMap: Record<string, string> = {\n\t\t\t\t\t\t\t\toutExpo: 'cubic-bezier(0.19, 1, 0.22, 1)',\n\t\t\t\t\t\t\t\t// add more if you want\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tconst keyframes: Keyframe[] = [\n\t\t\t\t\t\t\t\t{ transform: fromTransform, opacity: String(this.opacity[0]) },\n\t\t\t\t\t\t\t\t{ transform: toTransform, opacity: String(this.opacity[1]) },\n\t\t\t\t\t\t\t]\n\n\t\t\t\t\t\t\tletter.animate(keyframes, {\n\t\t\t\t\t\t\t\tduration: this.duration,\n\t\t\t\t\t\t\t\teasing: easingMap[this.ease] || 'ease-out',\n\t\t\t\t\t\t\t\tdelay: this.delay + i * this.stagger, // staggered start\n\t\t\t\t\t\t\t\tfill: 'forwards', // so the letters remain visible\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t})\n\t\t\t\t\t},\n\t\t\t\t}),\n\t\t\t),\n\t\t).subscribe()\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<span class=\"ml7\">\n\t\t\t\t<span class=\"text-wrapper\">\n\t\t\t\t\t<span class=\"letters\">\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</span>\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-animated-text': SchmancyAnimatedText\n\t}\n}\n"],"names":["SchmancyAnimatedText","$LitElement","css","constructor","super","arguments","this","ease","delay","stagger","duration","scale","opacity","translateX","translateY","translateZ","rotateZ","resetOnScroll","element","rect","getBoundingClientRect","top","left","bottom","window","innerHeight","document","documentElement","clientHeight","right","innerWidth","clientWidth","firstUpdated","letters","innerHTML","defaultSlot","textContent","replace","concat","interval","pipe","startWith","filter","width","height","take","fromEvent","throttleTime","leading","trailing","map","isInViewport","distinctUntilChanged","tap","inViewport","Array","from","children","forEach","letter","style","next","shadowRoot","querySelectorAll","i","fromTransform","toTransform","keyframes","transform","String","animate","easing","outExpo","fill","subscribe","render","html","__decorateClass","property","type","prototype","Number","Boolean","queryAssignedNodes","query","customElement"],"mappings":"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"}