@grasco/profile-picture 0.1.0 → 0.1.2

package/dist/index.d.cts

@@ -47,6 +47,8 @@ interface BadgeConfig {
     glow?: boolean;
     /** Max value to display (shows 99+ if exceeded) */
     max?: number;
+    /** Icon to display before content (emoji, Unicode symbol, or text) */
+    icon?: string;
 }
 interface GlowConfig {
     /** Glow color (defaults to border or bg color) */
@@ -69,6 +71,10 @@ interface RingConfig {
     gap?: number;
     /** Animate (rotate for gradient) */
     animate?: boolean;
+    /** Progress percentage (0-100) for partial fill ring */
+    progress?: number;
+    /** Color for unfilled portion when progress is set (defaults to gray) */
+    emptyColor?: string;
 }
 interface InteractionConfig {
     /** Enable hover effects */
@@ -114,8 +120,8 @@ interface GroupUserData {
     shadow?: ShadowPreset;
     /** Show border */
     border?: boolean;
-    /** Border width (1-4) */
-    borderWidth?: 1 | 2 | 3 | 4;
+    /** Border width (1-8) */
+    borderWidth?: 1 | 2 | 3 | 4 | 5 | 6 | 8;
     /** Border color */
     borderColor?: string;
     /** Background color */
@@ -158,16 +164,29 @@ interface ProfilePictureGroupProps$1 {
 
 declare class ProfilePicture$1 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;
+    borderWidth: 1 | 2 | 3 | 4 | 5 | 6 | 8;
     borderColor: string;
+    rotation: number;
     bgColor?: string;
     bgGradient?: string;
     ring?: RingConfig;
@@ -182,11 +201,25 @@ declare class ProfilePicture$1 extends LitElement {
     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;
@@ -204,6 +237,27 @@ declare global {
     }
 }
 
+/**
+ * Profile Picture Component - Utility Functions
+ * Apple-inspired design system utilities
+ */
+
+/**
+ * Get CDN size label from pixel size (rounds up to next available size)
+ * CDN sizes: 80, 120, 240, 480, 960
+ */
+declare function getCdnSizeLabel(pixelSize: number): "80" | "120" | "240" | "480" | "960";
+/**
+ * Detect theme (dark/light) from background color using luminance calculation
+ * Returns 'light' for non-hex colors or when luminance > 0.5
+ */
+declare function detectThemeFromColor(bgColor?: string): "dark" | "light";
+/**
+ * Construct CDN URL for profile picture
+ * Format: {baseUrl}/api/profile-picture/cdn/{extId}_{size}_{theme}.webp?hostname={hostname}
+ */
+declare function constructCdnUrl(baseUrl: string, extCustomerId: string, sizeLabel: "80" | "120" | "240" | "480" | "960", theme: "dark" | "light", hostname: string): string;
+
 declare class ProfilePictureGroup$1 extends LitElement {
     protected createRenderRoot(): this;
     max: 4;
@@ -216,6 +270,7 @@ declare class ProfilePictureGroup$1 extends LitElement {
     showAddButton: boolean;
     addButtonLabel: string;
     animated: true;
+    rotationAmount: number;
     private users;
     private dropdownOpen;
     private tooltipData;
@@ -386,4 +441,4 @@ interface ProfilePictureProps {
  */
 declare const ProfilePicture: React.ForwardRefExoticComponent<ProfilePictureProps & React.RefAttributes<HTMLElement>>;
 
-export { type BadgeConfig, type DropdownConfig, type GroupUserData, type LoadingStrategy, type PlaceholderType, type Position, ProfilePicture, ProfilePictureGroup, type ProfilePictureGroupProps$1 as ProfilePictureGroupProps, type ProfilePictureProps, type RibbonConfig, type Size, type StackDirection, type TooltipConfig, type TooltipPosition, type Variant };
+export { type BadgeConfig, type DropdownConfig, type GroupUserData, type LoadingStrategy, type PlaceholderType, type Position, ProfilePicture, ProfilePictureGroup, type ProfilePictureGroupProps$1 as ProfilePictureGroupProps, type ProfilePictureProps, type RibbonConfig, type Size, type StackDirection, type TooltipConfig, type TooltipPosition, type Variant, constructCdnUrl, detectThemeFromColor, getCdnSizeLabel };

package/dist/index.d.ts

@@ -47,6 +47,8 @@ interface BadgeConfig {
     glow?: boolean;
     /** Max value to display (shows 99+ if exceeded) */
     max?: number;
+    /** Icon to display before content (emoji, Unicode symbol, or text) */
+    icon?: string;
 }
 interface GlowConfig {
     /** Glow color (defaults to border or bg color) */
@@ -69,6 +71,10 @@ interface RingConfig {
     gap?: number;
     /** Animate (rotate for gradient) */
     animate?: boolean;
+    /** Progress percentage (0-100) for partial fill ring */
+    progress?: number;
+    /** Color for unfilled portion when progress is set (defaults to gray) */
+    emptyColor?: string;
 }
 interface InteractionConfig {
     /** Enable hover effects */
@@ -114,8 +120,8 @@ interface GroupUserData {
     shadow?: ShadowPreset;
     /** Show border */
     border?: boolean;
-    /** Border width (1-4) */
-    borderWidth?: 1 | 2 | 3 | 4;
+    /** Border width (1-8) */
+    borderWidth?: 1 | 2 | 3 | 4 | 5 | 6 | 8;
     /** Border color */
     borderColor?: string;
     /** Background color */
@@ -158,16 +164,29 @@ interface ProfilePictureGroupProps$1 {
 
 declare class ProfilePicture$1 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;
+    borderWidth: 1 | 2 | 3 | 4 | 5 | 6 | 8;
     borderColor: string;
+    rotation: number;
     bgColor?: string;
     bgGradient?: string;
     ring?: RingConfig;
@@ -182,11 +201,25 @@ declare class ProfilePicture$1 extends LitElement {
     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;
@@ -204,6 +237,27 @@ declare global {
     }
 }
 
+/**
+ * Profile Picture Component - Utility Functions
+ * Apple-inspired design system utilities
+ */
+
+/**
+ * Get CDN size label from pixel size (rounds up to next available size)
+ * CDN sizes: 80, 120, 240, 480, 960
+ */
+declare function getCdnSizeLabel(pixelSize: number): "80" | "120" | "240" | "480" | "960";
+/**
+ * Detect theme (dark/light) from background color using luminance calculation
+ * Returns 'light' for non-hex colors or when luminance > 0.5
+ */
+declare function detectThemeFromColor(bgColor?: string): "dark" | "light";
+/**
+ * Construct CDN URL for profile picture
+ * Format: {baseUrl}/api/profile-picture/cdn/{extId}_{size}_{theme}.webp?hostname={hostname}
+ */
+declare function constructCdnUrl(baseUrl: string, extCustomerId: string, sizeLabel: "80" | "120" | "240" | "480" | "960", theme: "dark" | "light", hostname: string): string;
+
 declare class ProfilePictureGroup$1 extends LitElement {
     protected createRenderRoot(): this;
     max: 4;
@@ -216,6 +270,7 @@ declare class ProfilePictureGroup$1 extends LitElement {
     showAddButton: boolean;
     addButtonLabel: string;
     animated: true;
+    rotationAmount: number;
     private users;
     private dropdownOpen;
     private tooltipData;
@@ -386,4 +441,4 @@ interface ProfilePictureProps {
  */
 declare const ProfilePicture: React.ForwardRefExoticComponent<ProfilePictureProps & React.RefAttributes<HTMLElement>>;
 
-export { type BadgeConfig, type DropdownConfig, type GroupUserData, type LoadingStrategy, type PlaceholderType, type Position, ProfilePicture, ProfilePictureGroup, type ProfilePictureGroupProps$1 as ProfilePictureGroupProps, type ProfilePictureProps, type RibbonConfig, type Size, type StackDirection, type TooltipConfig, type TooltipPosition, type Variant };
+export { type BadgeConfig, type DropdownConfig, type GroupUserData, type LoadingStrategy, type PlaceholderType, type Position, ProfilePicture, ProfilePictureGroup, type ProfilePictureGroupProps$1 as ProfilePictureGroupProps, type ProfilePictureProps, type RibbonConfig, type Size, type StackDirection, type TooltipConfig, type TooltipPosition, type Variant, constructCdnUrl, detectThemeFromColor, getCdnSizeLabel };