@grasco/profile-picture 0.1.2 → 0.1.5

package/dist/vue.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 */
@@ -86,6 +76,130 @@ interface InteractionConfig {
     cursor?: "pointer" | "default" | "zoom-in";
 }
 type ShadowPreset = "none" | "sm" | "md" | "lg" | "glow";
+/**
+ * Base props interface shared across all framework wrappers.
+ * This ensures type consistency between React, Vue, Svelte, and Angular.
+ */
+interface ProfilePictureProps {
+    /** Image source URL */
+    src?: string;
+    /** Alt text for accessibility and fallback initials */
+    alt?: string;
+    /** External customer ID for CDN image loading */
+    extCustomerId?: string;
+    /** Predefined size or custom pixel value */
+    size?: Size | number;
+    /** Shape variant */
+    variant?: Variant;
+    /** Shadow preset */
+    shadow?: ShadowPreset;
+    /** Enable border */
+    border?: boolean;
+    /** Border width in pixels */
+    borderWidth?: 1 | 2 | 3 | 4 | 5 | 6 | 8;
+    /** Border color (CSS color value) */
+    borderColor?: string;
+    /** Rotation angle in degrees */
+    rotation?: number;
+    /** Background color (CSS color value) */
+    bgColor?: string;
+    /** Background gradient (CSS gradient value) */
+    bgGradient?: string;
+    /** Glow effect configuration */
+    glow?: GlowConfig;
+    /** Ring effect configuration (Instagram-style) */
+    ring?: RingConfig;
+    /** Presence indicator configuration */
+    presence?: PresenceConfig;
+    /** Badge configuration */
+    badge?: BadgeConfig;
+    /** Loading strategy */
+    loading?: LoadingStrategy;
+    /** Placeholder type while loading */
+    placeholder?: PlaceholderType;
+    /** Placeholder background color */
+    placeholderColor?: string;
+    /** Custom fallback text (overrides initials from alt) */
+    fallback?: string;
+    /** Interactive behavior configuration */
+    interactive?: InteractionConfig;
+}
+/** Direction for stacking avatars */
+type StackDirection = "ltr" | "rtl";
+/** Tooltip position relative to avatar */
+type TooltipPosition = "top" | "bottom" | "left" | "right";
+/** Tooltip configuration */
+interface TooltipConfig {
+    /** Enable/disable tooltip (default: true) */
+    enabled?: boolean;
+    /** Position of tooltip relative to avatar */
+    position?: TooltipPosition;
+    /** Delay before showing tooltip in ms (default: 300) */
+    delay?: number;
+}
+/** User data extracted from profile-picture elements */
+interface GroupUserData {
+    /** User ID from data-user-id attribute */
+    id?: string;
+    /** User name from alt attribute */
+    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 */
+    element: HTMLElement;
+    /** Index in the group */
+    index: number;
+    /** Visual variant (circle, rounded, squircle, square) */
+    variant?: Variant;
+    /** Shadow preset */
+    shadow?: ShadowPreset;
+    /** Show border */
+    border?: boolean;
+    /** Border width (1-8) */
+    borderWidth?: 1 | 2 | 3 | 4 | 5 | 6 | 8;
+    /** Border color */
+    borderColor?: string;
+    /** Background color */
+    bgColor?: string;
+    /** Background gradient */
+    bgGradient?: string;
+}
+/** Dropdown configuration for overflow users */
+interface DropdownConfig {
+    /** Max height of dropdown in px (default: 280) */
+    maxHeight?: number;
+    /** Show presence indicator dots (default: true) */
+    showPresence?: boolean;
+    /** Dropdown position (default: 'bottom') */
+    position?: "bottom" | "top";
+}
+/** Profile Picture Group Props */
+interface ProfilePictureGroupProps {
+    /** Maximum visible avatars before showing counter (default: 4) */
+    max?: number;
+    /** Stack direction - ltr shows first on left (default: 'ltr') */
+    direction?: StackDirection;
+    /** Overlap amount as percentage 0-1 (default: 0.3) */
+    overlap?: number;
+    /** Avatar size - inherited by children (default: 'md') */
+    size?: Size | number;
+    /** Spacing between avatars in px (overrides overlap calculation) */
+    spacing?: number;
+    /** Tooltip configuration */
+    tooltip?: TooltipConfig;
+    /** Dropdown configuration for overflow users */
+    dropdown?: DropdownConfig;
+    /** Show add button (default: false) */
+    showAddButton?: boolean;
+    /** Add button label for accessibility */
+    addButtonLabel?: string;
+    /** Enable hover lift animation (default: true) */
+    animated?: boolean;
+}
 
 declare class ProfilePicture extends LitElement {
     private static stylesInjected;
@@ -117,7 +231,6 @@ declare class ProfilePicture extends LitElement {
     ring?: RingConfig;
     presence?: PresenceConfig;
     glow?: GlowConfig;
-    ribbon?: RibbonConfig;
     badge?: BadgeConfig;
     loading: LoadingStrategy;
     placeholder: PlaceholderType;
@@ -150,9 +263,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>;
 }
 
@@ -162,4 +279,64 @@ declare global {
     }
 }
 
-export type { BadgeConfig, LoadingStrategy, PlaceholderType, Position, RibbonConfig, Size, Variant };
+declare class ProfilePictureGroup extends LitElement {
+    protected createRenderRoot(): this;
+    max: 4;
+    direction: StackDirection;
+    overlap: 0.3;
+    size: Size | string;
+    spacing?: number;
+    tooltip?: TooltipConfig;
+    dropdown?: DropdownConfig;
+    showAddButton: boolean;
+    addButtonLabel: string;
+    animated: true;
+    rotationAmount: number;
+    private users;
+    private dropdownOpen;
+    private tooltipData;
+    private tooltipTimeout;
+    private slotObserver;
+    private portalContainer;
+    private counterRef;
+    private get pixelSize();
+    private get tooltipEnabled();
+    private get tooltipPosition();
+    private get tooltipDelay();
+    private get dropdownMaxHeight();
+    private get showPresence();
+    private get dropdownPosition();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private setupSlotObserver;
+    private updateUsers;
+    private createPortal;
+    private destroyPortal;
+    private updatePortalContent;
+    private handleAvatarClick;
+    private handleAvatarHover;
+    private handleAvatarLeave;
+    private clearTooltipTimeout;
+    private handleCounterClick;
+    private readonly handleBackdropClick;
+    private handleDropdownItemClick;
+    private handleAddClick;
+    private handleKeyDown;
+    private renderAvatar;
+    private renderProfilePicture;
+    private renderCounter;
+    private renderAddButton;
+    private renderTooltip;
+    private renderDropdownItem;
+    private formatStatus;
+    protected updated(changedProperties: Map<PropertyKey, unknown>): void;
+    render(): lit_html.TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "profile-picture-group": ProfilePictureGroup;
+    }
+}
+
+export type { BadgeConfig, DropdownConfig, GlowConfig, GroupUserData, InteractionConfig, LoadingStrategy, PlaceholderType, Position, PresenceConfig, PresenceStatus, ProfilePictureGroupProps, ProfilePictureProps, RingConfig, ShadowPreset, Size, StackDirection, TooltipConfig, TooltipPosition, Variant };

package/dist/vue.js

@@ -1,371 +1,2 @@
-import {LitElement,nothing,html}from'lit';import {property,state,customElement}from'lit/decorators.js';import {styleMap}from'lit/directives/style-map.js';var Q=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var s=(t,r,e,n)=>{for(var i=n>1?void 0:n?_(r,e):r,a=t.length-1,d;a>=0;a--)(d=t[a])&&(i=(n?d(r,e,i):d(i))||i);return n&&i&&Q(r,e,i),i};var I="grasco-profile-picture-styles",w=false;function $(){if(w||typeof document>"u")return;if(document.getElementById(I)){w=true;return}if(document.querySelector('link[href*="profile-picture"][href$="styles.css"]')){w=true;return}let r=P();if(!r)return;let e=document.createElement("link");e.id=I,e.rel="stylesheet",e.href=r,document.head.appendChild(e),w=true;}function P(){if(typeof window<"u"&&window.__GRASCO_PROFILE_PICTURE_CSS__)return window.__GRASCO_PROFILE_PICTURE_CSS__;try{let r=import.meta.url;if(r)return `${r.substring(0,r.lastIndexOf("/")+1)}dist/styles.css`}catch{}let t=document.currentScript;if(t?.src){let r=new URL(t.src);return `${r.href.substring(0,r.href.lastIndexOf("/")+1)}dist/styles.css`}return null}var v={"2xs":20,xs:24,sm:32,md:40,lg:48,xl:64,"2xl":80,"3xl":120},R={online:"#30D158",away:"#FFD60A",busy:"#FF453A",offline:"#8E8E93",dnd:"#FF453A"},z={none:"none",sm:"0 1px 2px 0 rgba(0, 0, 0, 0.05)",md:"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",lg:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",glow:"0 0 20px 0 rgba(99, 102, 241, 0.3)"},u={size:"md",variant:"circle",loading:"lazy",placeholder:"shimmer",borderWidth:2,borderColor:"#ffffff",placeholderColor:"#f3f4f6",shadow:"sm"};var x={circle:"9999px",rounded:"12px",squircle:"30%",square:"0px"};function b(...t){return t.filter(Boolean).join(" ")}function y(t){return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(t)}function E(t){return {"top-left":"np:top-0 np:left-0","top-right":"np:top-0 np:right-0","bottom-left":"np:bottom-0 np:left-0","bottom-right":"np:bottom-0 np:right-0"}[t]}function A(t){return {"top-left":"np:-rotate-45 np:-translate-x-1/4 np:-translate-y-1/2","top-right":"np:rotate-45 np:translate-x-1/4 np:-translate-y-1/2","bottom-left":"np:rotate-45 np:-translate-x-1/4 np:translate-y-1/2","bottom-right":"np:-rotate-45 np:translate-x-1/4 np:translate-y-1/2"}[t]}function T(t){let e=t.trim().replace(/[^\w\s]/g,"").split(/\s+/).filter(Boolean);return e.length===0?"?":e.length===1?e[0].slice(0,1).toUpperCase():(e[0][0]+e[e.length-1][0]).toUpperCase()}function S(t){return Math.round(t*.38)}function L(t,r){let n=Math.max(r?18:10,Math.round(t*(r?.32:.22))),i=Math.round(n*.6);return {size:n,fontSize:i}}function B(t,r){return Math.max(8,Math.round(t*.25))+(r-1)*2}function U(t,r){return typeof t=="string"?t:r&&t>r?`${r}+`:t.toString()}function F(t){return t.length===0?"transparent":t.length===1?t[0]:`conic-gradient(${t.map((e,n)=>{let i=n/t.length*360,a=(n+1)/t.length*360;return `${e} ${i}deg ${a}deg`}).join(", ")})`}function ee(t){let r=0;for(let e=0;e<t.length;e++){let n=t.charCodeAt(e);r=(r<<5)-r+n,r&=r;}return Math.abs(r)}function M(t,r,e){let i=Math.max(0,Math.min(100,t))/100*360;return `conic-gradient(from 270deg, ${r} 0deg ${i}deg, ${e} ${i}deg 360deg)`}function D(t){let r=["linear-gradient(135deg, #667eea 0%, #764ba2 100%)","linear-gradient(135deg, #f093fb 0%, #f5576c 100%)","linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)","linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)","linear-gradient(135deg, #fa709a 0%, #fee140 100%)","linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)","linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)","linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)","linear-gradient(135deg, #cd9cf2 0%, #f6f3ff 100%)","linear-gradient(135deg, #fddb92 0%, #d1fdff 100%)"],e=ee(t)%r.length;return r[e]}function N(t){return t<=80?"80":t<=120?"120":t<=240?"240":t<=480?"480":"960"}function O(t){if(!(t&&y(t)))return "light";let r=t.replace("#","");r.length===3&&(r=r.split("").map(d=>d+d).join(""));let e=Number.parseInt(r.slice(0,2),16),n=Number.parseInt(r.slice(2,4),16),i=Number.parseInt(r.slice(4,6),16);return (.299*e+.587*n+.114*i)/255>.5?"light":"dark"}function G(t,r,e,n,i){let a=t.endsWith("/")?t.slice(0,-1):t,d=`${r}_${e}_${n}.webp`;return `${a}/api/profile-picture/cdn/${d}?hostname=${i}`}function j(t){return {circle:"np:rounded-full",rounded:"np:rounded-xl",squircle:"np:rounded-[30%]",square:"np:rounded-none"}[t]}function V(t,r){return {className:{1:"np:border",2:"np:border-2",3:"np:border-[3px]",4:"np:border-4",5:"np:border-[5px]",6:"np:border-[6px]",8:"np:border-8"}[t],style:{borderColor:r,borderStyle:"solid"}}}function Y(t,r){return r?{className:"",style:{background:r}}:t?t.includes("gradient")?{className:"",style:{background:t}}:{className:"",style:{backgroundColor:t}}:{className:"",style:{backgroundColor:"#e7e7e7"}}}function H(t){return {boxShadow:z[t]}}var te={shimmer:`
-@keyframes pp-shimmer {
-  0% { transform: translateX(-100%); }
-  100% { transform: translateX(100%); }
-}`,pulse:`
-@keyframes pp-pulse {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50% { opacity: 0.7; transform: scale(0.98); }
-}`,skeleton:`
-@keyframes pp-skeleton {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}`,badgeBounce:`
-@keyframes pp-badge-bounce {
-  0% { transform: scale(0) translateY(10px); opacity: 0; }
-  50% { transform: scale(1.2) translateY(-2px); }
-  100% { transform: scale(1) translateY(0); opacity: 1; }
-}`,ringRotate:`
-@keyframes pp-ring-rotate {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}`,presencePulse:`
-@keyframes pp-presence-pulse {
-  0%, 100% { box-shadow: 0 0 0 0 currentColor; }
-  50% { box-shadow: 0 0 0 4px transparent; }
-}`,glow:`
-@keyframes pp-glow {
-  0%, 100% { box-shadow: 0 0 20px 0 var(--pp-glow-color, rgba(99, 102, 241, 0.3)); }
-  50% { box-shadow: 0 0 30px 5px var(--pp-glow-color, rgba(99, 102, 241, 0.5)); }
-}`,fadeIn:`
-@keyframes pp-fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}`,scaleIn:`
-@keyframes pp-scale-in {
-  0% { transform: scale(0.8); opacity: 0; }
-  50% { transform: scale(1.05); }
-  100% { transform: scale(1); opacity: 1; }
-}`},ne=Object.values(te).join(`
-`),re=`
-/* Profile Picture Component Styles */
-.pp-container {
-  --pp-transition-duration: 200ms;
-  --pp-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
-  --pp-spring-timing: cubic-bezier(0.34, 1.56, 0.64, 1);
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  user-select: none;
-  -webkit-user-select: none;
-  flex-shrink: 0;
-}
-
-/* Inner container for image clipping - allows badges/rings to overflow */
-.pp-inner {
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-  border-radius: inherit;
-}
-
-/* Interactive states */
-.pp-interactive {
-  cursor: pointer;
-  transition: transform var(--pp-transition-duration) var(--pp-spring-timing),
-              box-shadow var(--pp-transition-duration) var(--pp-transition-timing);
-}
-
-.pp-interactive:hover {
-  transform: scale(1.05);
-}
-
-.pp-interactive:active {
-  transform: scale(0.95);
-}
-
-.pp-interactive:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);
-}
-
-/* Image styles */
-.pp-image {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: opacity var(--pp-transition-duration) var(--pp-transition-timing);
-}
-
-.pp-image-loading {
-  opacity: 0;
-}
-
-.pp-image-loaded {
-  opacity: 1;
-}
-
-/* Fallback styles */
-.pp-fallback {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  font-weight: 500;
-  color: rgba(255, 255, 255, 0.9);
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
-  letter-spacing: 0.02em;
-}
-
-.pp-fallback-icon {
-  color: rgba(156, 163, 175, 0.8);
-}
-
-/* Shimmer placeholder */
-.pp-shimmer {
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-}
-
-.pp-shimmer::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    rgba(255, 255, 255, 0.4) 50%,
-    transparent 100%
-  );
-  animation: pp-shimmer 1.5s infinite;
-}
-
-/* Pulse placeholder */
-.pp-pulse {
-  animation: pp-pulse 2s ease-in-out infinite;
-}
-
-/* Skeleton placeholder */
-.pp-skeleton {
-  background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
-  background-size: 200% 100%;
-  animation: pp-skeleton 1.5s ease-in-out infinite;
-}
-
-/* Badge styles */
-.pp-badge {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 9999px;
-  font-weight: 600;
-  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
-  line-height: 1;
-  animation: pp-badge-bounce 0.4s var(--pp-spring-timing);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
-}
-
-.pp-badge-with-icon {
-  gap: 4px;
-}
-
-.pp-badge-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-  flex-shrink: 0;
-}
-
-.pp-badge-pulse {
-  animation: pp-badge-bounce 0.4s var(--pp-spring-timing),
-             pp-presence-pulse 2s ease-in-out infinite 0.4s;
-}
-
-.pp-badge-glow {
-  box-shadow: 0 0 10px 2px var(--pp-badge-glow-color, currentColor);
-}
-
-/* Ribbon styles */
-.pp-ribbon-container {
-  position: absolute;
-  z-index: 10;
-  overflow: hidden;
-}
-
-.pp-ribbon {
-  position: absolute;
-  width: 100%;
-  text-align: center;
-  font-weight: 600;
-  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-/* Ring effect (Instagram-style) */
-.pp-ring {
-  position: absolute;
-  inset: -4px;
-  border-radius: inherit;
-  padding: 3px;
-  background: var(--pp-ring-color, linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888));
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  mask-composite: exclude;
-  transition: background 0.3s ease;
-}
-
-.pp-ring-animated {
-  animation: pp-ring-rotate 3s linear infinite;
-}
-
-.pp-ring-progress {
-  /* Progress rings should not animate rotation */
-  animation: none;
-}
-
-/* Presence indicator */
-.pp-presence {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  border-radius: 9999px;
-  border: 2px solid white;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
-}
-
-.pp-presence-animated {
-  animation: pp-presence-pulse 2s ease-in-out infinite;
-}
-
-/* Glow effect */
-.pp-glow {
-  animation: pp-glow 2s ease-in-out infinite;
-}
-
-/* Reduced motion support */
-@media (prefers-reduced-motion: reduce) {
-  .pp-container,
-  .pp-interactive,
-  .pp-image,
-  .pp-shimmer::after,
-  .pp-pulse,
-  .pp-skeleton,
-  .pp-badge,
-  .pp-ring-animated,
-  .pp-presence-animated,
-  .pp-glow {
-    animation: none !important;
-    transition: none !important;
-  }
-}
-`,W=`${ne}
-${re}`,J=`
-@keyframes np-shimmer {
-  0% { background-position: -200% 0; }
-  100% { background-position: 200% 0; }
-}
-.np-shimmer {
-  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
-  background-size: 200% 100%;
-  animation: np-shimmer 1.5s infinite;
-}
-`;function q(t,r=.3){if(y(t)){let e=Number.parseInt(t.slice(1,3),16),n=Number.parseInt(t.slice(3,5),16),i=Number.parseInt(t.slice(5,7),16);return `0 0 20px 0 rgba(${e}, ${n}, ${i}, ${r})`}return `0 0 20px 0 ${t}`}var o=class extends LitElement{constructor(){super(...arguments);this.src="";this.alt="";this.size=u.size;this.variant=u.variant;this.shadow=u.shadow;this.border=false;this.borderWidth=u.borderWidth;this.borderColor=u.borderColor;this.rotation=0;this.loading=u.loading;this.placeholder=u.placeholder;this.placeholderColor=u.placeholderColor;this.isLoaded=false;this.hasError=false;this.cdnLoadFailed=false;this.previousSrc="";this.RETRY_DELAY_MS=3e4;}static setCdnBaseUrl(e){o.cdnBaseUrl=e,o.instances.forEach(n=>{n.extCustomerId&&!n.cdnImageUrl&&(n.cdnLoadFailed=false,n.retryTimeoutId&&(clearTimeout(n.retryTimeoutId),n.retryTimeoutId=void 0),n.previousExtCustomerId||(n.previousExtCustomerId=n.extCustomerId),n.loadCdnImage());});}static getCdnBaseUrl(){return o.cdnBaseUrl}createRenderRoot(){return o.injectStylesOnce(),this}static injectStylesOnce(){if(o.stylesInjected||typeof document>"u")return;let e=document.createElement("style");e.textContent=W,document.head.appendChild(e),o.stylesInjected=true;}get pixelSize(){let e=this.size;return typeof e=="number"?e:v[e]??v[u.size]}connectedCallback(){super.connectedCallback(),o.instances.add(this);}disconnectedCallback(){super.disconnectedCallback(),o.instances.delete(this),this.retryTimeoutId&&(clearTimeout(this.retryTimeoutId),this.retryTimeoutId=void 0);}firstUpdated(){this.extCustomerId&&o.cdnBaseUrl&&(this.previousExtCustomerId=this.extCustomerId,this.loadCdnImage());}updated(e){super.updated(e),this.extCustomerId&&o.cdnBaseUrl&&!this.cdnImageUrl&&(this.cdnLoadFailed||!this.previousExtCustomerId)&&(this.previousExtCustomerId||(this.previousExtCustomerId=this.extCustomerId),this.cdnLoadFailed=false,this.loadCdnImage());}willUpdate(e){e.has("src")&&this.src!==this.previousSrc&&(this.isLoaded=false,this.hasError=false,this.previousSrc=this.src),(e.has("extCustomerId")||e.has("size")||e.has("bgColor"))&&this.extCustomerId!==this.previousExtCustomerId&&(this.previousExtCustomerId=this.extCustomerId,this.cdnImageUrl=void 0,this.cdnLoadFailed=false,this.isLoaded=false,this.hasError=false,this.retryTimeoutId&&(clearTimeout(this.retryTimeoutId),this.retryTimeoutId=void 0),this.loadCdnImage());}handleLoad(){this.isLoaded=true,this.dispatchEvent(new CustomEvent("load",{bubbles:true,composed:true}));}handleError(){if(this.cdnImageUrl&&!this.cdnLoadFailed){this.cdnLoadFailed=true,this.cdnImageUrl=void 0,this.dispatchEvent(new CustomEvent("cdn-error",{bubbles:true,composed:true,detail:{error:"Image load failed"}})),this.retryTimeoutId&&clearTimeout(this.retryTimeoutId),this.retryTimeoutId=setTimeout(()=>{this.retryTimeoutId=void 0,this.extCustomerId&&o.cdnBaseUrl&&(this.cdnLoadFailed=false,this.hasError=false,this.isLoaded=false,this.loadCdnImage());},this.RETRY_DELAY_MS);return}this.hasError=true,this.isLoaded=true,this.dispatchEvent(new CustomEvent("error",{bubbles:true,composed:true}));}loadCdnImage(){if(!(this.extCustomerId&&o.cdnBaseUrl)){this.cdnLoadFailed=true;return}let e=N(this.pixelSize),n=O(this.bgColor),i=typeof window<"u"?window.location.hostname:"localhost";this.cdnImageUrl=G(o.cdnBaseUrl,this.extCustomerId,e,n,i);}getContainerStyles(){let e=Y(this.bgColor,this.bgGradient),n=this.border?V(this.borderWidth,this.borderColor):null,i=H(this.shadow),a={};if(this.glow){let f=this.glow.color??this.borderColor??"#6366f1";a={"--pp-glow-color":f,boxShadow:q(f,this.glow.intensity??.3)};}let d=this.interactive?.hoverable||this.interactive?.pressable;return {classes:b("pp-container",j(this.variant),e.className,n?.className,d&&"pp-interactive",this.glow?.animate&&"pp-glow"),styles:{width:`${this.pixelSize}px`,height:`${this.pixelSize}px`,borderRadius:x[this.variant],...e.style,...n?.style,...i,...a,cursor:this.interactive?.cursor??(d?"pointer":"default"),transform:this.rotation?`rotate(${this.rotation}deg)`:void 0}}}renderPlaceholder(){if(this.isLoaded||this.placeholder==="none")return nothing;let e={shimmer:"pp-shimmer",pulse:"pp-pulse",skeleton:"pp-skeleton",blur:"",none:""}[this.placeholder];return html`
-      ${this.placeholder==="shimmer"?html`<style>${J}</style>`:nothing}
-      <div
-        class=${b("np:absolute np:inset-0",e)}
-        style=${styleMap({backgroundColor:this.placeholderColor,borderRadius:"inherit"})}>
-      </div>
-    `}renderFallback(){if(this.fallback)return html`
-        <span
-          class="pp-fallback"
-          style=${styleMap({fontSize:`${S(this.pixelSize)}px`})}>
-          ${this.fallback}
-        </span>
-      `;if(this.alt){let n=D(this.alt);return html`
-        <div
-          class="pp-fallback np:absolute np:inset-0"
-          style=${styleMap({background:this.bgColor??n,fontSize:`${S(this.pixelSize)}px`})}>
-          ${T(this.alt)}
-        </div>
-      `}let e=this.pixelSize*.5;return html`
-      <svg
-        class="pp-fallback-icon"
-        style="width: ${e}px; height: ${e}px;"
-        fill="currentColor"
-        viewBox="0 0 24 24">
-        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
-      </svg>
-    `}renderImage(){let e=!!(this.extCustomerId&&o.cdnBaseUrl),n;return this.cdnImageUrl?n=this.cdnImageUrl:(!e||this.cdnLoadFailed)&&(n=this.src),this.hasError||!n?this.renderFallback():html`
-      <img
-        src=${n}
-        alt=${this.alt}
-        loading=${this.loading}
-        decoding="async"
-        @load=${this.handleLoad}
-        @error=${this.handleError}
-        class=${b("pp-image",this.isLoaded?"pp-image-loaded":"pp-image-loading")}
-        draggable="false" />
-    `}renderRing(){if(!this.ring?.show)return nothing;let e=this.ring.width??3,n=this.ring.gap??3,i=e+n,a,d=this.ring.progress!==void 0;if(d){let f=this.ring.progress??0,m=this.ring.color??"#30D158",h=this.ring.emptyColor??"#8E8E93";a=M(f,m,h);}else this.ring.gradient&&this.ring.gradient.length>0?a=F(this.ring.gradient):a=this.ring.color??"linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888)";return html`
-      <div
-        class=${b("pp-ring",this.ring.animate&&!d&&"pp-ring-animated",d&&"pp-ring-progress")}
-        style=${styleMap({inset:`-${i}px`,padding:`${e}px`,background:a,borderRadius:x[this.variant]})}>
-      </div>
-    `}renderPresence(){if(!this.presence)return nothing;let e=this.presence.thickness??2,n=B(this.pixelSize,e),i=R[this.presence.status],a=Math.max(0,this.pixelSize*.02);return html`
-      <div
-        class=${b("pp-presence",this.presence.animate&&"pp-presence-animated")}
-        style=${styleMap({width:`${n}px`,height:`${n}px`,backgroundColor:i,bottom:`${a}px`,right:`${a}px`,color:i})}
-        title=${this.presence.status}>
-      </div>
-    `}renderBadge(){if(!this.badge)return nothing;let e=this.badge.position??"bottom-right",n=this.badge.content!==void 0,i=this.badge.icon!==void 0,a=n||i,{size:d,fontSize:f}=L(this.pixelSize,a),m=this.badge.bgColor??"#22c55e",h=this.badge.color??"#ffffff",Z=n&&this.badge.content!==void 0?U(this.badge.content,this.badge.max):null,k=i?this.badge.icon:null,K=f*.9,X={"top-left":{top:"-4px",left:"-4px"},"top-right":{top:"-4px",right:"-4px"},"bottom-left":{bottom:"-4px",left:"-4px"},"bottom-right":{bottom:"-4px",right:"-4px"}};return html`
-      <div
-        class=${b("pp-badge",this.badge.pulse&&"pp-badge-pulse",this.badge.glow&&"pp-badge-glow",i&&"pp-badge-with-icon")}
-        style=${styleMap({width:a?"auto":`${d}px`,minWidth:`${d}px`,height:`${d}px`,padding:a?"0 6px":"0",fontSize:`${f}px`,backgroundColor:m,color:h,"--pp-badge-glow-color":m,gap:i&&n?"4px":"0",...X[e]})}>
-        ${k?html`<span class="pp-badge-icon" style=${styleMap({fontSize:`${K}px`})}>${k}</span>`:nothing}
-        ${Z??nothing}
-      </div>
-    `}renderRibbon(){if(!this.ribbon)return nothing;let e=this.ribbon.position??"top-right",n=this.ribbon.bgColor??"#ef4444",i=this.ribbon.color??"#ffffff",a=y(n)?{backgroundColor:n}:{background:n},d={color:i},f=this.pixelSize*.9,m=this.pixelSize*.4,h=Math.max(8,this.pixelSize*.11);return html`
-      <div
-        class=${b("pp-ribbon-container",E(e))}
-        style=${styleMap({width:`${f}px`,height:`${m}px`})}>
-        <div
-          class=${b("pp-ribbon np:origin-center np:transform",A(e))}
-          style=${styleMap({fontSize:`${h}px`,padding:`${h*.3}px 0`,...a,...d})}>
-          ${this.ribbon.icon?html`<span style="margin-right: 2px">${this.ribbon.icon}</span>`:nothing}
-          ${this.ribbon.text}
-        </div>
-      </div>
-    `}render(){let e=this.getContainerStyles(),n=this.interactive?.focusable||this.interactive?.pressable?0:void 0;return html`
-      <div
-        class=${e.classes}
-        style=${styleMap(e.styles)}
-        tabindex=${n??nothing}
-        role=${this.interactive?.pressable?"button":nothing}
-        aria-label=${this.alt||nothing}
-        data-profile-picture>
-
-        <!-- Ring Effect (behind everything) -->
-        ${this.renderRing()}
-
-        <!-- Inner container for image clipping -->
-        <div
-          class="pp-inner"
-          style=${styleMap({borderRadius:x[this.variant]})}>
-          <!-- Placeholder -->
-          ${this.renderPlaceholder()}
-
-          <!-- Main Image or Fallback -->
-          ${this.renderImage()}
-        </div>
-
-        <!-- Ribbon -->
-        ${this.renderRibbon()}
-
-        <!-- Badge -->
-        ${this.renderBadge()}
-
-        <!-- Presence Indicator -->
-        ${this.renderPresence()}
-      </div>
-    `}};o.stylesInjected=false,o.cdnBaseUrl="",o.instances=new Set,s([property({type:String})],o.prototype,"src",2),s([property({type:String})],o.prototype,"alt",2),s([property({type:String,attribute:"ext-customer-id"})],o.prototype,"extCustomerId",2),s([property({type:String})],o.prototype,"size",2),s([property({type:String})],o.prototype,"variant",2),s([property({type:String})],o.prototype,"shadow",2),s([property({type:Boolean})],o.prototype,"border",2),s([property({type:Number,attribute:"border-width"})],o.prototype,"borderWidth",2),s([property({type:String,attribute:"border-color"})],o.prototype,"borderColor",2),s([property({type:Number})],o.prototype,"rotation",2),s([property({type:String,attribute:"bg-color"})],o.prototype,"bgColor",2),s([property({type:String,attribute:"bg-gradient"})],o.prototype,"bgGradient",2),s([property({type:Object,attribute:"ring",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],o.prototype,"ring",2),s([property({type:Object,attribute:"presence",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],o.prototype,"presence",2),s([property({type:Object,attribute:"glow",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],o.prototype,"glow",2),s([property({type:Object,attribute:"ribbon",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],o.prototype,"ribbon",2),s([property({type:Object,attribute:"badge",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],o.prototype,"badge",2),s([property({type:String})],o.prototype,"loading",2),s([property({type:String})],o.prototype,"placeholder",2),s([property({type:String,attribute:"placeholder-color"})],o.prototype,"placeholderColor",2),s([property({type:String})],o.prototype,"fallback",2),s([property({type:Object,attribute:"interactive",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],o.prototype,"interactive",2),s([state()],o.prototype,"isLoaded",2),s([state()],o.prototype,"hasError",2),s([state()],o.prototype,"cdnImageUrl",2),s([state()],o.prototype,"cdnLoadFailed",2),o=s([customElement("profile-picture")],o);$();//# sourceMappingURL=vue.js.map
+var r="grasco-profile-picture-styles",n=false,s=false;function i(){if(n||typeof document>"u")return;if(document.getElementById(r)){n=true;return}if(document.querySelector('link[href*="profile-picture"][href$="styles.css"]')){n=true;return}s||(s=true,l());}function l(){(typeof requestIdleCallback<"u"?requestIdleCallback:e=>setTimeout(e,1))(()=>u());}function u(){if(n||typeof document>"u")return;if(document.getElementById(r)){n=true;return}let t=c();if(!t)return;let e=document.createElement("link");e.id=r,e.rel="stylesheet",e.href=t,document.head.appendChild(e),n=true;}function c(){if(typeof window<"u"&&window.__GRASCO_PROFILE_PICTURE_CSS__)return window.__GRASCO_PROFILE_PICTURE_CSS__;try{let e=import.meta.url;if(e)return `${e.substring(0,e.lastIndexOf("/")+1)}dist/styles.css`}catch{}let t=document.currentScript;if(t?.src){let e=new URL(t.src);return `${e.href.substring(0,e.href.lastIndexOf("/")+1)}dist/styles.css`}return null}i();//# sourceMappingURL=vue.js.map
 //# sourceMappingURL=vue.js.map