@grasco/profile-picture 0.1.7 → 0.1.8

package/dist/angular.d.ts

@@ -1,4 +1,4 @@
-import * as lit_html from 'lit-html';
+import * as lit from 'lit';
 import { LitElement } from 'lit';
 
 /**
@@ -201,84 +201,6 @@ interface ProfilePictureGroupProps {
     animated?: boolean;
 }
 
-declare class ProfilePicture extends LitElement {
-    private static stylesInjected;
-    private static cdnBaseUrl;
-    private static instances;
-    /**
-     * Set global CDN base URL for all ProfilePicture instances
-     * @example ProfilePicture.setCdnBaseUrl('https://api.example.com')
-     */
-    static setCdnBaseUrl(url: string): void;
-    /**
-     * Get current CDN base URL
-     */
-    static getCdnBaseUrl(): string;
-    protected createRenderRoot(): this;
-    private static injectStylesOnce;
-    src: string;
-    alt: string;
-    extCustomerId?: string;
-    size: Size | string;
-    variant: Variant;
-    shadow: ShadowPreset;
-    border: boolean;
-    borderWidth: 1 | 2 | 3 | 4 | 5 | 6 | 8;
-    borderColor: string;
-    rotation: number;
-    bgColor?: string;
-    bgGradient?: string;
-    ring?: RingConfig;
-    presence?: PresenceConfig;
-    glow?: GlowConfig;
-    badge?: BadgeConfig;
-    loading: LoadingStrategy;
-    placeholder: PlaceholderType;
-    placeholderColor: string;
-    fallback?: string;
-    interactive?: InteractionConfig;
-    private isLoaded;
-    private hasError;
-    private cdnImageUrl?;
-    private cdnLoadFailed;
-    private previousSrc;
-    private previousExtCustomerId?;
-    private retryTimeoutId?;
-    private readonly RETRY_DELAY_MS;
-    private get pixelSize();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected firstUpdated(): void;
-    protected updated(changedProperties: Map<string, unknown>): void;
-    protected willUpdate(changedProperties: Map<string, unknown>): void;
-    private handleLoad;
-    private handleError;
-    /**
-     * Construct CDN URL for profile picture using ext-customer-id
-     * Uses direct image src binding - browser handles redirects automatically
-     */
-    private loadCdnImage;
-    private getContainerStyles;
-    private renderPlaceholder;
-    private renderFallback;
-    private renderImage;
-    private renderRing;
-    /**
-     * Calculate corner offset based on variant
-     * Returns the inset from container edge where badges/presence should be positioned
-     */
-    private getCornerOffset;
-    private renderPresence;
-    private renderBadge;
-    render(): lit_html.TemplateResult<1>;
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "profile-picture": ProfilePicture;
-    }
-}
-
 declare class ProfilePictureGroup extends LitElement {
     protected createRenderRoot(): this;
     max: 4;
@@ -330,7 +252,7 @@ declare class ProfilePictureGroup extends LitElement {
     private renderDropdownItem;
     private formatStatus;
     protected updated(changedProperties: Map<PropertyKey, unknown>): void;
-    render(): lit_html.TemplateResult<1>;
+    render(): lit.TemplateResult<1>;
 }
 
 declare global {
@@ -339,4 +261,72 @@ declare global {
     }
 }
 
-export type { BadgeConfig, DropdownConfig, GlowConfig, GroupUserData, InteractionConfig, LoadingStrategy, PlaceholderType, Position, PresenceConfig, PresenceStatus, ProfilePictureGroupProps, ProfilePictureProps, RingConfig, ShadowPreset, Size, StackDirection, TooltipConfig, TooltipPosition, Variant };
+/**
+ * Angular wrapper for ProfilePicture Web Component
+ *
+ * The component is a standard Web Component and works natively with Angular.
+ * No wrapper needed - just import to register the custom element.
+ *
+ * @example
+ * ```typescript
+ * import '@grasco/profile-picture/angular';
+ * import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+ * import type { RingConfig, BadgeConfig } from '@grasco/profile-picture/angular';
+ *
+ * @Component({
+ *   selector: 'app-example',
+ *   template: `
+ *     <profile-picture
+ *       [attr.src]="avatarUrl"
+ *       size="lg"
+ *       variant="circle"
+ *       border
+ *       border-color="white"
+ *       bg-color="#f3f4f6"
+ *       [attr.ring]="ringJson"
+ *       [attr.badge]="badgeJson"
+ *       (load)="onImageLoad()"
+ *       (error)="onImageError()">
+ *     </profile-picture>
+ *   `,
+ *   standalone: true,
+ *   schemas: [CUSTOM_ELEMENTS_SCHEMA] // Required for custom elements
+ * })
+ * export class ExampleComponent {
+ *   avatarUrl = 'https://example.com/avatar.png';
+ *
+ *   ring: RingConfig = { show: true, color: '#ff5722' };
+ *   badge: BadgeConfig = { content: 3, position: 'bottom-right', pulse: true };
+ *
+ *   get ringJson() { return JSON.stringify(this.ring); }
+ *   get badgeJson() { return JSON.stringify(this.badge); }
+ *
+ *   onImageLoad() {
+ *     console.log('Image loaded');
+ *   }
+ *
+ *   onImageError() {
+ *     console.error('Image failed to load');
+ *   }
+ * }
+ * ```
+ *
+ * Note: Add CUSTOM_ELEMENTS_SCHEMA to your component's schemas array.
+ *
+ * For property binding:
+ * - Use [attr.property]="value" for object/array properties (ring, badge, etc.)
+ * - Use property="value" for string/primitive properties
+ * - Use (event)="handler()" for events (load, error, cdn-error)
+ */
+
+/**
+ * Set global CDN base URL for all ProfilePicture instances
+ * @example setCdnBaseUrl('https://api.example.com')
+ */
+declare function setCdnBaseUrl(url: string): void;
+/**
+ * Get current CDN base URL
+ */
+declare function getCdnBaseUrl(): string;
+
+export { type BadgeConfig, type DropdownConfig, type GlowConfig, type GroupUserData, type InteractionConfig, type LoadingStrategy, type PlaceholderType, type Position, type PresenceConfig, type PresenceStatus, type ProfilePictureGroupProps, type ProfilePictureProps, type RingConfig, type ShadowPreset, type Size, type StackDirection, type TooltipConfig, type TooltipPosition, type Variant, getCdnBaseUrl, setCdnBaseUrl };