@grasco/profile-picture 0.1.2 → 0.1.5

package/dist/standalone.d.ts

@@ -7,7 +7,7 @@ import { LitElement } from 'lit';
  */
 type Size = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
 type Variant = "circle" | "rounded" | "squircle" | "square";
-type Position = "top-left" | "top-right" | "bottom-left" | "bottom-right";
+type Position = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
 type LoadingStrategy = "lazy" | "eager";
 type PlaceholderType = "shimmer" | "pulse" | "blur" | "skeleton" | "none";
 type PresenceStatus = "online" | "away" | "busy" | "offline" | "dnd";
@@ -19,18 +19,6 @@ interface PresenceConfig {
     /** Ring thickness (1-3) */
     thickness?: 1 | 2 | 3;
 }
-interface RibbonConfig {
-    /** Text displayed on the ribbon */
-    text: string;
-    /** Position of the ribbon */
-    position?: Position;
-    /** Text color (CSS color) */
-    color?: string;
-    /** Background color (CSS color or gradient) */
-    bgColor?: string;
-    /** Icon before text (emoji or symbol) */
-    icon?: string;
-}
 interface BadgeConfig {
     /** Badge content (text, number, or empty for dot) */
     content?: string | number;
@@ -40,6 +28,8 @@ interface BadgeConfig {
     color?: string;
     /** Background color */
     bgColor?: string;
+    /** Border radius (CSS value, e.g., "8px", "50%", "9999px") */
+    borderRadius?: string;
     /** Enable pulse animation */
     pulse?: boolean;
     /** Enable glow effect */
@@ -107,6 +97,8 @@ interface GroupUserData {
     name: string;
     /** Image source URL */
     src?: string;
+    /** External customer ID for CDN image loading */
+    extCustomerId?: string;
     /** Presence status from data-status attribute */
     status?: PresenceStatus;
     /** Reference to the profile-picture element */
@@ -191,7 +183,6 @@ declare class ProfilePicture extends LitElement {
     ring?: RingConfig;
     presence?: PresenceConfig;
     glow?: GlowConfig;
-    ribbon?: RibbonConfig;
     badge?: BadgeConfig;
     loading: LoadingStrategy;
     placeholder: PlaceholderType;
@@ -224,9 +215,13 @@ declare class ProfilePicture extends LitElement {
     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;
-    private renderRibbon;
     render(): lit_html.TemplateResult<1>;
 }
 
@@ -254,6 +249,8 @@ declare class ProfilePictureGroup extends LitElement {
     private tooltipData;
     private tooltipTimeout;
     private slotObserver;
+    private portalContainer;
+    private counterRef;
     private get pixelSize();
     private get tooltipEnabled();
     private get tooltipPosition();
@@ -265,6 +262,9 @@ declare class ProfilePictureGroup extends LitElement {
     disconnectedCallback(): void;
     private setupSlotObserver;
     private updateUsers;
+    private createPortal;
+    private destroyPortal;
+    private updatePortalContent;
     private handleAvatarClick;
     private handleAvatarHover;
     private handleAvatarLeave;
@@ -279,9 +279,9 @@ declare class ProfilePictureGroup extends LitElement {
     private renderCounter;
     private renderAddButton;
     private renderTooltip;
-    private renderDropdown;
     private renderDropdownItem;
     private formatStatus;
+    protected updated(changedProperties: Map<PropertyKey, unknown>): void;
     render(): lit_html.TemplateResult<1>;
 }
 
@@ -291,4 +291,4 @@ declare global {
     }
 }
 
-export type { BadgeConfig, DropdownConfig, GroupUserData, LoadingStrategy, PlaceholderType, Position, ProfilePictureGroupProps, RibbonConfig, Size, StackDirection, TooltipConfig, TooltipPosition, Variant };
+export type { BadgeConfig, DropdownConfig, GroupUserData, LoadingStrategy, PlaceholderType, Position, ProfilePictureGroupProps, Size, StackDirection, TooltipConfig, TooltipPosition, Variant };