@quikturn/logos-angular 1.0.0

package/README.md

@@ -0,0 +1,455 @@
+# @quikturn/logos-angular
+
+> Angular components for the [Quikturn Logos API](https://getquikturn.io) -- drop-in logo display, infinite carousel, and responsive grid. Built with standalone components and signal inputs for Angular 17+.
+
+**[Get your API key](https://getquikturn.io)** -- free tier available, no credit card required.
+
+## Features
+
+- **`<quikturn-logo>`** -- single logo image with lazy loading, optional link wrapper
+- **`<quikturn-logo-carousel>`** -- infinite scrolling logo ticker (horizontal or vertical)
+- **`<quikturn-logo-grid>`** -- responsive CSS grid of logos with custom template support
+- **`provideQuikturnLogos()`** -- DI-based configuration for token and base URL
+- **`injectLogoUrl()`** -- signal-based reactive logo URL builder
+- **`logoUrl` pipe** -- template pipe for domain-to-URL conversion
+- **Zero CSS dependencies** -- inline styles only, no Angular Material required
+- **Standalone components** -- no `NgModule` needed, import directly
+- **Signal inputs** -- modern Angular patterns with `input()` and `output()`
+
+## Installation
+
+```bash
+# pnpm (recommended)
+pnpm add @quikturn/logos-angular @quikturn/logos
+
+# npm
+npm install @quikturn/logos-angular @quikturn/logos
+```
+
+**Peer dependencies:** Angular `>= 17`, `@quikturn/logos >= 0.1.0`
+
+## Quick Start
+
+### 1. Provide your token at the application level
+
+```typescript
+// app.config.ts
+import { ApplicationConfig } from "@angular/core";
+import { provideQuikturnLogos } from "@quikturn/logos-angular";
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideQuikturnLogos({ token: "qt_your_publishable_key" }),
+  ],
+};
+```
+
+### 2. Import and use components
+
+```typescript
+import { Component } from "@angular/core";
+import { QuikturnLogoComponent, QuikturnLogoCarouselComponent } from "@quikturn/logos-angular";
+
+@Component({
+  selector: "app-example",
+  standalone: true,
+  imports: [QuikturnLogoComponent, QuikturnLogoCarouselComponent],
+  template: `
+    <!-- Single logo -->
+    <quikturn-logo domain="github.com" [size]="64" />
+
+    <!-- Infinite scrolling carousel -->
+    <quikturn-logo-carousel
+      [domains]="['github.com', 'stripe.com', 'vercel.com', 'figma.com']"
+      [speed]="120"
+      [fadeOut]="true"
+      [pauseOnHover]="true"
+    />
+  `,
+})
+export class ExampleComponent {}
+```
+
+All components, pipes, and signal functions automatically inherit the token from `provideQuikturnLogos()`.
+
+## API Reference
+
+### `provideQuikturnLogos(config)`
+
+Provides Quikturn configuration to the Angular DI system. Call this in your `ApplicationConfig` or a component's `providers` array.
+
+```typescript
+provideQuikturnLogos({ token: "qt_abc123", baseUrl: "https://custom.api" })
+```
+
+| Option | Type | Required | Description |
+|--------|------|----------|-------------|
+| `token` | `string` | yes | Publishable API key (`qt_`/`pk_` prefix) |
+| `baseUrl` | `string` | no | Override the Quikturn API base URL |
+
+---
+
+### `<quikturn-logo>`
+
+Renders a single logo `<img>`. Optionally wraps in an `<a>` tag when `href` is provided. Validates `href` to reject `javascript:` and `data:` protocols.
+
+```html
+<quikturn-logo
+  domain="stripe.com"
+  [size]="128"
+  format="webp"
+  [greyscale]="true"
+  theme="dark"
+  alt="Stripe"
+  href="https://stripe.com"
+  loading="lazy"
+  class="my-logo"
+/>
+```
+
+#### Inputs
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `domain` | `string` | **required** | Domain to fetch logo for |
+| `token` | `string` | from provider | Publishable API key |
+| `baseUrl` | `string` | from provider | API base URL override |
+| `size` | `number` | -- | Logo width in pixels |
+| `format` | `string` | -- | `"png"`, `"jpeg"`, `"webp"`, `"avif"`, or MIME type |
+| `greyscale` | `boolean` | -- | Greyscale transformation |
+| `theme` | `string` | -- | `"light"` or `"dark"` |
+| `alt` | `string` | `"<domain> logo"` | Image alt text |
+| `href` | `string` | -- | Wraps the image in a link |
+| `loading` | `"lazy" \| "eager"` | `"lazy"` | Native image loading strategy |
+| `class` | `string` | -- | CSS class on wrapper element |
+
+#### Outputs
+
+| Output | Type | Description |
+|--------|------|-------------|
+| `imgError` | `Event` | Emitted when the logo image fails to load |
+| `imgLoad` | `Event` | Emitted when the logo image loads successfully |
+
+---
+
+### `<quikturn-logo-carousel>`
+
+Infinite scrolling logo ticker powered by `requestAnimationFrame`. Supports horizontal (left/right) and vertical (up/down) scrolling, hover-based speed changes, fade overlays, and per-logo customization.
+
+```html
+<quikturn-logo-carousel
+  [domains]="['github.com', 'stripe.com', 'vercel.com', 'figma.com']"
+  [speed]="120"
+  direction="left"
+  [logoHeight]="28"
+  [gap]="48"
+  [fadeOut]="true"
+  fadeOutColor="#f5f5f5"
+  [pauseOnHover]="true"
+  [scaleOnHover]="true"
+  width="100%"
+/>
+```
+
+#### Using `logos` for per-logo configuration
+
+```html
+<quikturn-logo-carousel
+  [logos]="[
+    { domain: 'github.com', href: 'https://github.com', alt: 'GitHub' },
+    { domain: 'stripe.com', size: 256, greyscale: true },
+    { domain: 'vercel.com', theme: 'dark' }
+  ]"
+/>
+```
+
+#### Inputs
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `domains` | `string[]` | -- | Simple list of domains (use this or `logos`) |
+| `logos` | `LogoConfig[]` | -- | Per-logo configuration objects (use this or `domains`) |
+| `token` | `string` | from provider | Publishable API key |
+| `baseUrl` | `string` | from provider | API base URL override |
+| `speed` | `number` | `120` | Scroll speed in pixels per second |
+| `direction` | `"left" \| "right" \| "up" \| "down"` | `"left"` | Scroll direction |
+| `pauseOnHover` | `boolean` | -- | Pause scrolling on mouse hover |
+| `hoverSpeed` | `number` | -- | Custom speed during hover (`0` = pause, overrides `pauseOnHover`) |
+| `logoHeight` | `number` | `28` | Height of each logo image in pixels |
+| `gap` | `number` | `32` | Gap between logos in pixels |
+| `width` | `number \| string` | `"100%"` | Container width (`600`, `"80%"`, etc.) |
+| `fadeOut` | `boolean` | `false` | Show gradient fade overlays at edges |
+| `fadeOutColor` | `string` | `"#ffffff"` | Fade overlay color (match your background) |
+| `scaleOnHover` | `boolean` | `false` | Scale logos on individual hover |
+| `logoSize` | `number` | -- | Default image fetch width for all logos |
+| `logoFormat` | `string` | -- | Default image format for all logos |
+| `logoGreyscale` | `boolean` | -- | Default greyscale setting for all logos |
+| `logoTheme` | `string` | -- | Default theme for all logos |
+| `class` | `string` | -- | CSS class on root container |
+| `ariaLabel` | `string` | `"Company logos"` | Accessible label for the region |
+
+#### `LogoConfig`
+
+Used in the `logos` array for per-logo customization:
+
+```typescript
+interface LogoConfig {
+  domain: string;        // Required
+  href?: string;         // Wrap in link
+  alt?: string;          // Alt text override
+  size?: number;         // Per-logo image width
+  format?: string;       // Per-logo format
+  greyscale?: boolean;   // Per-logo greyscale
+  theme?: "light" | "dark";
+}
+```
+
+---
+
+### `<quikturn-logo-grid>`
+
+Responsive CSS grid of logos with optional custom templates.
+
+```html
+<quikturn-logo-grid
+  [domains]="['github.com', 'stripe.com', 'vercel.com', 'figma.com']"
+  [columns]="4"
+  [gap]="24"
+  ariaLabel="Our partners"
+/>
+```
+
+#### Custom template
+
+```html
+<quikturn-logo-grid [domains]="companies">
+  <ng-template #renderItem let-logo let-i="index">
+    <div class="custom-card">
+      <img [src]="logo.url" [alt]="logo.alt" />
+      <span>{{ logo.domain }}</span>
+    </div>
+  </ng-template>
+</quikturn-logo-grid>
+```
+
+#### Inputs
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `domains` | `string[]` | -- | Simple list of domains (use this or `logos`) |
+| `logos` | `LogoConfig[]` | -- | Per-logo configuration objects |
+| `token` | `string` | from provider | Publishable API key |
+| `baseUrl` | `string` | from provider | API base URL override |
+| `columns` | `number` | `4` | Number of grid columns |
+| `gap` | `number` | `24` | Grid gap in pixels |
+| `logoSize` | `number` | -- | Default image fetch width |
+| `logoFormat` | `string` | -- | Default image format |
+| `logoGreyscale` | `boolean` | -- | Default greyscale |
+| `logoTheme` | `string` | -- | Default theme |
+| `class` | `string` | -- | CSS class on grid container |
+| `ariaLabel` | `string` | `"Company logos"` | Accessible label for the region |
+
+---
+
+### `logoUrl` Pipe
+
+Transform a domain string into a logo URL directly in templates.
+
+```typescript
+import { Component } from "@angular/core";
+import { LogoUrlPipe } from "@quikturn/logos-angular";
+
+@Component({
+  selector: "app-pipe-demo",
+  standalone: true,
+  imports: [LogoUrlPipe],
+  template: `
+    <img [src]="'github.com' | logoUrl" alt="GitHub logo" />
+    <img [src]="'google.com' | logoUrl: { size: 64, format: 'webp' }" alt="Google logo" />
+  `,
+})
+export class PipeDemoComponent {}
+```
+
+The pipe reads the token from the `QUIKTURN_CONFIG` injection token. You can override per-use:
+
+```html
+<img [src]="'github.com' | logoUrl: { token: 'qt_other_token' }" alt="GitHub" />
+```
+
+---
+
+### `injectLogoUrl(options)`
+
+Signal-based helper that builds a reactive logo URL. Must be called within an Angular injection context. The returned signal recomputes automatically whenever any input signal changes.
+
+```typescript
+import { Component, signal } from "@angular/core";
+import { injectLogoUrl } from "@quikturn/logos-angular";
+
+@Component({
+  selector: "app-signal-demo",
+  standalone: true,
+  template: `<img [src]="logoSrc()" alt="Logo" />`,
+})
+export class SignalDemoComponent {
+  domain = signal("github.com");
+
+  logoSrc = injectLogoUrl({
+    domain: () => this.domain(),
+    size: () => 128,
+    format: () => "webp",
+  });
+}
+```
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `domain` | `() => string` | Reactive getter for the domain (required) |
+| `token` | `() => string \| undefined` | Override the provider token |
+| `baseUrl` | `() => string \| undefined` | Override the provider base URL |
+| `size` | `() => number \| undefined` | Logo width in pixels |
+| `format` | `() => string \| undefined` | Output format |
+| `greyscale` | `() => boolean \| undefined` | Greyscale transformation |
+| `theme` | `() => string \| undefined` | Theme optimization |
+
+**Returns:** `Signal<string>` -- computed signal with the full logo URL
+
+---
+
+## Types
+
+All types are exported for use in your application:
+
+```typescript
+import type {
+  QuikturnConfig,
+  LogoOptions,
+  LogoConfig,
+  ResolvedLogo,
+  SupportedOutputFormat,
+  FormatShorthand,
+  ThemeOption,
+} from "@quikturn/logos-angular";
+```
+
+| Type | Description |
+|------|-------------|
+| `QuikturnConfig` | Configuration for `provideQuikturnLogos()` (`token`, optional `baseUrl`) |
+| `LogoOptions` | Options for logo generation (`size`, `format`, `greyscale`, `theme`) |
+| `LogoConfig` | Per-logo config extending `LogoOptions` with `domain`, `href`, `alt` |
+| `ResolvedLogo` | Internal resolved logo with pre-built `url`, `domain`, `alt`, `href` |
+| `SupportedOutputFormat` | Full format strings (re-exported from `@quikturn/logos`) |
+| `FormatShorthand` | Short format aliases (re-exported from `@quikturn/logos`) |
+| `ThemeOption` | `"light" \| "dark"` (re-exported from `@quikturn/logos`) |
+
+---
+
+## API Summary
+
+| Export | Kind | Description |
+|--------|------|-------------|
+| `provideQuikturnLogos()` | Function | Provide config to Angular DI |
+| `QUIKTURN_CONFIG` | InjectionToken | Access config directly via `inject()` |
+| `injectLogoUrl()` | Function | Signal-based reactive logo URL builder |
+| `LogoUrlPipe` | Pipe | Template pipe for domain-to-URL conversion |
+| `QuikturnLogoComponent` | Component | Single logo image |
+| `QuikturnLogoGridComponent` | Component | Grid layout of logos |
+| `QuikturnLogoCarouselComponent` | Component | Infinite scrolling carousel |
+
+---
+
+## Examples
+
+### Logo Wall (Marketing Page)
+
+```typescript
+@Component({
+  selector: "app-logo-wall",
+  standalone: true,
+  imports: [QuikturnLogoCarouselComponent],
+  template: `
+    <h2>Trusted by industry leaders</h2>
+    <quikturn-logo-carousel
+      [domains]="partners"
+      [speed]="80"
+      [logoHeight]="32"
+      [gap]="64"
+      [fadeOut]="true"
+      [pauseOnHover]="true"
+    />
+  `,
+})
+export class LogoWallComponent {
+  partners = [
+    "github.com", "stripe.com", "vercel.com", "figma.com",
+    "linear.app", "notion.so", "slack.com", "discord.com",
+  ];
+}
+```
+
+### Partner Grid with Links
+
+```typescript
+@Component({
+  selector: "app-partner-grid",
+  standalone: true,
+  imports: [QuikturnLogoGridComponent],
+  template: `
+    <quikturn-logo-grid [logos]="partners" [columns]="2" [gap]="32" />
+  `,
+})
+export class PartnerGridComponent {
+  partners: LogoConfig[] = [
+    { domain: "github.com", href: "https://github.com", alt: "GitHub" },
+    { domain: "stripe.com", href: "https://stripe.com", alt: "Stripe" },
+    { domain: "vercel.com", href: "https://vercel.com", alt: "Vercel" },
+    { domain: "figma.com", href: "https://figma.com", alt: "Figma" },
+  ];
+}
+```
+
+### Vertical Carousel
+
+```html
+<div style="height: 240px">
+  <quikturn-logo-carousel
+    [domains]="['github.com', 'stripe.com', 'vercel.com']"
+    direction="up"
+    [speed]="60"
+    [logoHeight]="24"
+  />
+</div>
+```
+
+### Signal-Based Reactive URL
+
+```typescript
+@Component({
+  selector: "app-reactive",
+  standalone: true,
+  template: `
+    <input [(ngModel)]="domain" placeholder="Enter a domain" />
+    <img [src]="logoSrc()" [alt]="domain() + ' logo'" />
+  `,
+})
+export class ReactiveComponent {
+  domain = signal("github.com");
+  logoSrc = injectLogoUrl({
+    domain: () => this.domain(),
+    size: () => 256,
+    format: () => "webp",
+  });
+}
+```
+
+## Resources
+
+- **[Quikturn website](https://getquikturn.io)** -- sign up, manage keys, explore the API
+- **[Dashboard](https://getquikturn.io/dashboard)** -- usage analytics, key management, plan upgrades
+- **[Pricing](https://getquikturn.io/pricing)** -- free tier, pro, and enterprise plans
+- **[Core SDK docs](https://www.npmjs.com/package/@quikturn/logos)** -- `@quikturn/logos` URL builder, browser client, server client
+
+## License
+
+MIT -- built by [Quikturn](https://getquikturn.io)

package/dist/index.cjs

@@ -0,0 +1,206 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@angular/core"),g=require("@quikturn/logos"),O=require("@angular/common"),u=new t.InjectionToken("QUIKTURN_CONFIG");function x(s){return t.makeEnvironmentProviders([{provide:u,useValue:s}])}function w(s){t.assertInInjectionContext(w);const e=t.inject(u,{optional:!0});return t.computed(()=>{var o,r,a,l,c,d;const i=((o=s.token)==null?void 0:o.call(s))??(e==null?void 0:e.token),n=((r=s.baseUrl)==null?void 0:r.call(s))??(e==null?void 0:e.baseUrl);return g.logoUrl(s.domain(),{token:i,baseUrl:n,size:(a=s.size)==null?void 0:a.call(s),format:(l=s.format)==null?void 0:l.call(s),greyscale:(c=s.greyscale)==null?void 0:c.call(s),theme:(d=s.theme)==null?void 0:d.call(s)})})}var U=Object.getOwnPropertyDescriptor,L=(s,e,i,n)=>{for(var o=n>1?void 0:n?U(e,i):e,r=s.length-1,a;r>=0;r--)(a=s[r])&&(o=a(o)||o);return o};exports.LogoUrlPipe=class{constructor(){this.config=t.inject(u,{optional:!0})}transform(e,i){var r,a;const n=(i==null?void 0:i.token)??((r=this.config)==null?void 0:r.token),o=(i==null?void 0:i.baseUrl)??((a=this.config)==null?void 0:a.baseUrl);return g.logoUrl(e,{token:n,baseUrl:o,size:i==null?void 0:i.size,format:i==null?void 0:i.format,greyscale:i==null?void 0:i.greyscale,theme:i==null?void 0:i.theme})}};exports.LogoUrlPipe=L([t.Pipe({name:"logoUrl",standalone:!0})],exports.LogoUrlPipe);const k=new Set;function y(s){if(typeof window>"u"||!s||s.startsWith("sk_")||k.has(s))return;k.add(s);const e=new Image;e.src=`${g.BASE_URL}/_beacon?token=${s}&page=${encodeURIComponent(location.href)}`}function b(s){try{const e=new URL(s,"https://placeholder.invalid");return e.protocol==="https:"||e.protocol==="http:"}catch{return!1}}var z=Object.getOwnPropertyDescriptor,I=(s,e,i,n)=>{for(var o=n>1?void 0:n?z(e,i):e,r=s.length-1,a;r>=0;r--)(a=s[r])&&(o=a(o)||o);return o};exports.QuikturnLogoComponent=class{constructor(){this.config=t.inject(u,{optional:!0}),this.domain=t.input.required(),this.token=t.input(void 0),this.baseUrl=t.input(void 0),this.size=t.input(void 0),this.format=t.input(void 0),this.greyscale=t.input(void 0),this.theme=t.input(void 0),this.alt=t.input(void 0),this.href=t.input(void 0),this.cssClass=t.input(void 0,{alias:"class"}),this.loading=t.input("lazy"),this.imgError=t.output(),this.imgLoad=t.output(),this.effectiveToken=t.computed(()=>{var e;return this.token()??((e=this.config)==null?void 0:e.token)??""}),this.effectiveBaseUrl=t.computed(()=>{var e;return this.baseUrl()??((e=this.config)==null?void 0:e.baseUrl)}),this.safeHref=t.computed(()=>{const e=this.href();return e&&b(e)?e:void 0}),this.src=t.computed(()=>g.logoUrl(this.domain(),{token:this.effectiveToken()||void 0,size:this.size(),format:this.format(),greyscale:this.greyscale(),theme:this.theme(),baseUrl:this.effectiveBaseUrl()})),this.altText=t.computed(()=>this.alt()??`${this.domain()} logo`)}ngOnInit(){const e=this.effectiveToken();e&&y(e)}};exports.QuikturnLogoComponent=I([t.Component({selector:"quikturn-logo",standalone:!0,template:`
+    @if (safeHref()) {
+      <a [href]="safeHref()" target="_blank" rel="noopener noreferrer" [class]="cssClass()">
+        <img [src]="src()" [alt]="altText()" [attr.loading]="loading()" (error)="imgError.emit($event)" (load)="imgLoad.emit($event)" />
+      </a>
+    } @else if (cssClass()) {
+      <span [class]="cssClass()">
+        <img [src]="src()" [alt]="altText()" [attr.loading]="loading()" (error)="imgError.emit($event)" (load)="imgLoad.emit($event)" />
+      </span>
+    } @else {
+      <img [src]="src()" [alt]="altText()" [attr.loading]="loading()" (error)="imgError.emit($event)" (load)="imgLoad.emit($event)" />
+    }
+  `})],exports.QuikturnLogoComponent);var _=Object.getOwnPropertyDescriptor,T=(s,e,i,n)=>{for(var o=n>1?void 0:n?_(e,i):e,r=s.length-1,a;r>=0;r--)(a=s[r])&&(o=a(o)||o);return o};exports.QuikturnLogoGridComponent=class{constructor(){this.config=t.inject(u,{optional:!0}),this.domains=t.input(void 0),this.logos=t.input(void 0),this.token=t.input(void 0),this.baseUrl=t.input(void 0),this.columns=t.input(4),this.gap=t.input(24),this.logoSize=t.input(void 0),this.logoFormat=t.input(void 0),this.logoGreyscale=t.input(void 0),this.logoTheme=t.input(void 0),this.cssClass=t.input(void 0,{alias:"class"}),this.ariaLabel=t.input("Company logos"),this.customTemplate=t.contentChild("renderItem"),this.effectiveToken=t.computed(()=>{var e;return this.token()??((e=this.config)==null?void 0:e.token)??""}),this.effectiveBaseUrl=t.computed(()=>{var e;return this.baseUrl()??((e=this.config)==null?void 0:e.baseUrl)}),this.resolvedLogos=t.computed(()=>(this.logos()??(this.domains()??[]).map(i=>({domain:i}))).map(i=>({domain:i.domain,alt:i.alt??`${i.domain} logo`,href:i.href&&b(i.href)?i.href:void 0,url:g.logoUrl(i.domain,{token:this.effectiveToken()||void 0,size:i.size??this.logoSize(),format:i.format??this.logoFormat(),greyscale:i.greyscale??this.logoGreyscale(),theme:i.theme??this.logoTheme(),baseUrl:this.effectiveBaseUrl()})})))}ngOnInit(){const e=this.effectiveToken();e&&y(e)}};exports.QuikturnLogoGridComponent=T([t.Component({selector:"quikturn-logo-grid",standalone:!0,imports:[O.CommonModule],template:`
+    <div
+      role="region"
+      [attr.aria-label]="ariaLabel()"
+      [class]="cssClass()"
+      [style.display]="'grid'"
+      [style.grid-template-columns]="'repeat(' + columns() + ', 1fr)'"
+      [style.gap.px]="gap()"
+      [style.align-items]="'center'"
+      [style.justify-items]="'center'"
+    >
+      @for (logo of resolvedLogos(); track logo.domain; let i = $index) {
+        @if (customTemplate()) {
+          <ng-container
+            [ngTemplateOutlet]="customTemplate()!"
+            [ngTemplateOutletContext]="{ $implicit: logo, index: i }"
+          ></ng-container>
+        } @else {
+          <div style="display: flex; align-items: center; justify-content: center;">
+            @if (logo.href) {
+              <a
+                [href]="logo.href"
+                target="_blank"
+                rel="noopener noreferrer"
+                [attr.aria-label]="logo.alt"
+              >
+                <img
+                  [src]="logo.url"
+                  [alt]="logo.alt"
+                  loading="lazy"
+                  style="max-width: 100%; height: auto; display: block;"
+                />
+              </a>
+            } @else {
+              <img
+                [src]="logo.url"
+                [alt]="logo.alt"
+                loading="lazy"
+                style="max-width: 100%; height: auto; display: block;"
+              />
+            }
+          </div>
+        }
+      }
+    </div>
+  `})],exports.QuikturnLogoGridComponent);var E=Object.defineProperty,M=Object.getOwnPropertyDescriptor,C=(s,e,i,n)=>{for(var o=n>1?void 0:n?M(e,i):e,r=s.length-1,a;r>=0;r--)(a=s[r])&&(o=(n?a(e,i,o):a(o))||o);return n&&o&&E(e,i,o),o};const f={SMOOTH_TAU:.25,MIN_COPIES:2,COPY_HEADROOM:2};exports.QuikturnLogoCarouselComponent=class{constructor(){this.config=t.inject(u,{optional:!0}),this.domains=t.input(void 0),this.logos=t.input(void 0),this.token=t.input(void 0),this.baseUrl=t.input(void 0),this.speed=t.input(120),this.direction=t.input("left"),this.pauseOnHover=t.input(void 0),this.hoverSpeed=t.input(void 0),this.logoHeight=t.input(28),this.gap=t.input(32),this.width=t.input("100%"),this.fadeOut=t.input(!1),this.fadeOutColor=t.input("#ffffff"),this.scaleOnHover=t.input(!1),this.logoSize=t.input(void 0),this.logoFormat=t.input(void 0),this.logoGreyscale=t.input(void 0),this.logoTheme=t.input(void 0),this.cssClass=t.input(void 0,{alias:"class"}),this.ariaLabel=t.input("Company logos"),this.seqWidth=t.signal(0),this.seqHeight=t.signal(0),this.copyCount=t.signal(f.MIN_COPIES),this.isHovered=t.signal(!1),this.animationFrameId=null,this.currentVelocity=0,this.offset=0,this.resizeObserver=null,this.handleResize=()=>this.updateDimensions(),this.effectiveToken=t.computed(()=>{var e;return this.token()??((e=this.config)==null?void 0:e.token)??""}),this.effectiveBaseUrl=t.computed(()=>{var e;return this.baseUrl()??((e=this.config)==null?void 0:e.baseUrl)}),this.isVertical=t.computed(()=>this.direction()==="up"||this.direction()==="down"),this.resolvedLogos=t.computed(()=>(this.logos()??(this.domains()??[]).map(i=>({domain:i}))).map(i=>({domain:i.domain,alt:i.alt??`${i.domain} logo`,href:i.href,url:g.logoUrl(i.domain,{token:this.effectiveToken()||void 0,size:i.size??this.logoSize(),format:i.format??this.logoFormat(),greyscale:i.greyscale??this.logoGreyscale(),theme:i.theme??this.logoTheme(),baseUrl:this.effectiveBaseUrl()})}))),this.cssWidth=t.computed(()=>{const e=this.width();return typeof e=="number"?`${e}px`:e??"100%"}),this.copyIndices=t.computed(()=>Array.from({length:this.copyCount()},(e,i)=>i)),this.targetVelocity=t.computed(()=>{const e=Math.abs(this.speed()),i=this.isVertical()?this.direction()==="up"?1:-1:this.direction()==="left"?1:-1,n=this.speed()<0?-1:1;return e*i*n}),this.effectiveHoverSpeed=t.computed(()=>{const e=this.hoverSpeed();if(e!==void 0)return e;if(this.pauseOnHover()===!0)return 0})}ngOnInit(){const e=this.effectiveToken();e&&y(e)}ngAfterViewInit(){var i;this.updateDimensions(),this.trackImageLoads(),this.startAnimation();const e=(i=this.containerRef)==null?void 0:i.nativeElement;e&&typeof window<"u"&&(window.ResizeObserver?(this.resizeObserver=new ResizeObserver(()=>this.updateDimensions()),this.resizeObserver.observe(e)):window.addEventListener("resize",this.handleResize))}ngOnDestroy(){var e;this.stopAnimation(),(e=this.resizeObserver)==null||e.disconnect(),this.resizeObserver=null,typeof window<"u"&&window.removeEventListener("resize",this.handleResize)}handleMouseEnter(){this.effectiveHoverSpeed()!==void 0&&this.isHovered.set(!0)}handleMouseLeave(){this.effectiveHoverSpeed()!==void 0&&this.isHovered.set(!1)}updateDimensions(){var l,c,d;const e=(l=this.containerRef)==null?void 0:l.nativeElement,i=(c=this.trackRef)==null?void 0:c.nativeElement;if(!e||!i)return;const n=i.querySelector("ul");if(!n)return;const o=n.getBoundingClientRect(),r=o.width,a=o.height;if(this.isVertical()){const h=((d=e.parentElement)==null?void 0:d.clientHeight)??0;if(h>0&&(e.style.height=`${Math.ceil(h)}px`),a>0){this.seqHeight.set(Math.ceil(a));const m=e.clientHeight||h||a,v=Math.ceil(m/a)+f.COPY_HEADROOM;this.copyCount.set(Math.max(f.MIN_COPIES,v))}}else if(r>0){this.seqWidth.set(Math.ceil(r));const h=e.clientWidth||0,m=Math.ceil(h/r)+f.COPY_HEADROOM;this.copyCount.set(Math.max(f.MIN_COPIES,m))}}trackImageLoads(){var r;const e=(r=this.trackRef)==null?void 0:r.nativeElement;if(!e)return;const i=e.querySelectorAll("ul:first-child img");if(i.length===0)return;let n=i.length;const o=()=>{n--,n===0&&this.updateDimensions()};i.forEach(a=>{const l=a;l.complete?o():(l.addEventListener("load",o,{once:!0}),l.addEventListener("error",o,{once:!0}))})}startAnimation(){var r,a;const e=(r=this.trackRef)==null?void 0:r.nativeElement;if(!e)return;if(typeof window<"u"&&((a=window.matchMedia)==null?void 0:a.call(window,"(prefers-reduced-motion: reduce)").matches)){e.style.transform="translate3d(0, 0, 0)";return}let n=null;this.currentVelocity=this.targetVelocity();const o=l=>{if(n===null){n=l,this.animationFrameId=requestAnimationFrame(o);return}const c=Math.min(Math.max(0,(l-n)/1e3),.1);n=l;const d=this.effectiveHoverSpeed(),h=this.isHovered()&&d!==void 0?d:this.targetVelocity(),m=f.SMOOTH_TAU,v=1-Math.exp(-c/m);this.currentVelocity+=(h-this.currentVelocity)*v,this.offset+=this.currentVelocity*c;const p=this.isVertical()?this.seqHeight():this.seqWidth();p>0&&(this.offset=(this.offset%p+p)%p),this.isVertical()?e.style.transform=`translate3d(0, ${-this.offset}px, 0)`:e.style.transform=`translate3d(${-this.offset}px, 0, 0)`,this.animationFrameId=requestAnimationFrame(o)};this.animationFrameId=requestAnimationFrame(o)}stopAnimation(){this.animationFrameId!==null&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null)}};C([t.ViewChild("container")],exports.QuikturnLogoCarouselComponent.prototype,"containerRef",2);C([t.ViewChild("track")],exports.QuikturnLogoCarouselComponent.prototype,"trackRef",2);exports.QuikturnLogoCarouselComponent=C([t.Component({selector:"quikturn-logo-carousel",standalone:!0,imports:[O.CommonModule],template:`
+    <div
+      #container
+      role="region"
+      [attr.aria-label]="ariaLabel()"
+      [class]="cssClass()"
+      [style.position]="'relative'"
+      [style.overflow]="'hidden'"
+      [style.width]="isVertical() ? undefined : cssWidth()"
+      [style.height]="isVertical() ? '100%' : undefined"
+    >
+      @if (fadeOut()) {
+        @if (isVertical()) {
+          <div
+            aria-hidden="true"
+            data-testid="fade-overlay"
+            [style.position]="'absolute'"
+            [style.pointer-events]="'none'"
+            [style.z-index]="1"
+            [style.top]="'0'"
+            [style.left]="'0'"
+            [style.right]="'0'"
+            [style.height]="'clamp(24px, 8%, 120px)'"
+            [style.background]="
+              'linear-gradient(to bottom, ' +
+              fadeOutColor() +
+              ' 0%, transparent 100%)'
+            "
+          ></div>
+          <div
+            aria-hidden="true"
+            data-testid="fade-overlay"
+            [style.position]="'absolute'"
+            [style.pointer-events]="'none'"
+            [style.z-index]="1"
+            [style.bottom]="'0'"
+            [style.left]="'0'"
+            [style.right]="'0'"
+            [style.height]="'clamp(24px, 8%, 120px)'"
+            [style.background]="
+              'linear-gradient(to top, ' +
+              fadeOutColor() +
+              ' 0%, transparent 100%)'
+            "
+          ></div>
+        } @else {
+          <div
+            aria-hidden="true"
+            data-testid="fade-overlay"
+            [style.position]="'absolute'"
+            [style.pointer-events]="'none'"
+            [style.z-index]="1"
+            [style.top]="'0'"
+            [style.bottom]="'0'"
+            [style.left]="'0'"
+            [style.width]="'clamp(24px, 8%, 120px)'"
+            [style.background]="
+              'linear-gradient(to right, ' +
+              fadeOutColor() +
+              ' 0%, transparent 100%)'
+            "
+          ></div>
+          <div
+            aria-hidden="true"
+            data-testid="fade-overlay"
+            [style.position]="'absolute'"
+            [style.pointer-events]="'none'"
+            [style.z-index]="1"
+            [style.top]="'0'"
+            [style.bottom]="'0'"
+            [style.right]="'0'"
+            [style.width]="'clamp(24px, 8%, 120px)'"
+            [style.background]="
+              'linear-gradient(to left, ' +
+              fadeOutColor() +
+              ' 0%, transparent 100%)'
+            "
+          ></div>
+        }
+      }
+
+      <div
+        #track
+        [style.display]="'flex'"
+        [style.flex-direction]="isVertical() ? 'column' : 'row'"
+        [style.width]="isVertical() ? '100%' : 'max-content'"
+        [style.will-change]="'transform'"
+        [style.user-select]="'none'"
+        [style.position]="'relative'"
+        [style.z-index]="'0'"
+        (mouseenter)="handleMouseEnter()"
+        (mouseleave)="handleMouseLeave()"
+      >
+        @for (ci of copyIndices(); track ci) {
+          <ul
+            role="list"
+            [attr.aria-hidden]="ci > 0 ? 'true' : null"
+            [style.display]="'flex'"
+            [style.flex-direction]="isVertical() ? 'column' : 'row'"
+            [style.align-items]="'center'"
+            [style.list-style]="'none'"
+            [style.margin]="'0'"
+            [style.padding]="'0'"
+          >
+            @for (logo of resolvedLogos(); track logo.domain + '-' + ci + '-' + $index) {
+              <li
+                role="listitem"
+                [style.flex]="'none'"
+                [style.margin-right.px]="isVertical() ? 0 : gap()"
+                [style.margin-bottom.px]="isVertical() ? gap() : 0"
+              >
+                @if (logo.href) {
+                  <a
+                    [href]="logo.href"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    [attr.aria-label]="logo.alt"
+                    style="display: inline-flex; align-items: center; text-decoration: none"
+                  >
+                    <img
+                      [src]="logo.url"
+                      [alt]="logo.alt"
+                      loading="lazy"
+                      decoding="async"
+                      [attr.draggable]="false"
+                      [style.height.px]="logoHeight()"
+                      style="width: auto; display: block; object-fit: contain"
+                    />
+                  </a>
+                } @else {
+                  <span style="display: inline-flex; align-items: center">
+                    <img
+                      [src]="logo.url"
+                      [alt]="logo.alt"
+                      loading="lazy"
+                      decoding="async"
+                      [attr.draggable]="false"
+                      [style.height.px]="logoHeight()"
+                      style="width: auto; display: block; object-fit: contain"
+                    />
+                  </span>
+                }
+              </li>
+            }
+          </ul>
+        }
+      </div>
+    </div>
+  `})],exports.QuikturnLogoCarouselComponent);exports.QUIKTURN_CONFIG=u;exports.injectLogoUrl=w;exports.isValidHref=b;exports.provideQuikturnLogos=x;