import { r as registerInstance, h, f as Host } from './index-ee578edf.js';
import { c as clsx } from './clsx.m-3c237499.js';

const avatarVariant = [
  'bg-brand-maggioli-05',
  'bg-label-amaranth-05',
  'bg-label-aqua-05',
  'bg-label-blue-05',
  'bg-label-green-05',
  'bg-label-lime-05',
  'bg-label-orange-05',
  'bg-label-orchid-05',
  'bg-label-sky-05',
  'bg-label-yellow-05',
  'bg-label-violet-05',
  'bg-status-error-05',
  'bg-status-info-05',
  'bg-status-success-05',
  'bg-status-warning-05',
];

const mdsAvatarCss = ".border{border-width:1px}.bg-brand-maggioli-05{--tw-bg-opacity:1;background-color:rgba(var(--brand-maggioli-05), var(--tw-bg-opacity))}.bg-label-amaranth-05{--tw-bg-opacity:1;background-color:rgba(var(--label-amaranth-05), var(--tw-bg-opacity))}.bg-label-aqua-05{--tw-bg-opacity:1;background-color:rgba(var(--label-aqua-05), var(--tw-bg-opacity))}.bg-label-blue-05{--tw-bg-opacity:1;background-color:rgba(var(--label-blue-05), var(--tw-bg-opacity))}.bg-label-green-05{--tw-bg-opacity:1;background-color:rgba(var(--label-green-05), var(--tw-bg-opacity))}.bg-label-lime-05{--tw-bg-opacity:1;background-color:rgba(var(--label-lime-05), var(--tw-bg-opacity))}.bg-label-orange-05{--tw-bg-opacity:1;background-color:rgba(var(--label-orange-05), var(--tw-bg-opacity))}.bg-label-orchid-05{--tw-bg-opacity:1;background-color:rgba(var(--label-orchid-05), var(--tw-bg-opacity))}.bg-label-sky-05{--tw-bg-opacity:1;background-color:rgba(var(--label-sky-05), var(--tw-bg-opacity))}.bg-label-yellow-05{--tw-bg-opacity:1;background-color:rgba(var(--label-yellow-05), var(--tw-bg-opacity))}.bg-label-violet-05{--tw-bg-opacity:1;background-color:rgba(var(--label-violet-05), var(--tw-bg-opacity))}.bg-status-error-05{--tw-bg-opacity:1;background-color:rgba(var(--status-error-05), var(--tw-bg-opacity))}.bg-status-info-05{--tw-bg-opacity:1;background-color:rgba(var(--status-info-05), var(--tw-bg-opacity))}.bg-status-success-05{--tw-bg-opacity:1;background-color:rgba(var(--status-success-05), var(--tw-bg-opacity))}.bg-status-warning-05{--tw-bg-opacity:1;background-color:rgba(var(--status-warning-05), var(--tw-bg-opacity))}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--background-color-pending:rgb(var(--adjust-tone-08));--background-color-placeholder:rgb(var(--brand-maggioli-04));--radius:9999px;--color-placeholder:rgb(var(--brand-maggioli-10));display:inline-flex;width:100%;overflow:hidden;aspect-ratio:1/1;border-radius:var(--radius)}.avatar{display:inline-flex;width:100%}@-webkit-keyframes pulse{50%{opacity:.5}}@keyframes pulse{50%{opacity:.5}}.avatar{-webkit-animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;overflow:hidden;color:transparent;transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-duration:150ms;aspect-ratio:1/1}.avatar.pending{background-color:var(--background-color-pending)}.avatar.loaded{-webkit-animation:none;animation:none}.avatar.fallback,.avatar.initials{display:flex;align-items:center;justify-content:center;padding:1rem}.avatar.fallback{background-color:var(--background-color-placeholder)}.avatar.initials{padding:0px}.image{aspect-ratio:1/1}.fallback-image{height:100%;width:100%;aspect-ratio:1/1;background-color:var(--color-placeholder);-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath 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'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath 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'/%3E%3C/svg%3E\");-webkit-mask-size:cover;mask-size:cover}.initials-text{text-transform:uppercase;color:var(--color-placeholder)}.icon{height:100%;width:100%;color:var(--color-placeholder)}";

const MdsAvatar = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.placeholder = false;
    this.loaded = false;
    this.hasInitials = false;
    this.checkInitials = (value) => {
      if (value !== undefined && value !== '') {
        this.hasInitials = true;
        return;
      }
      this.hasInitials = false;
    };
  }
  componentWillLoad() {
    this.checkInitials(this.initials);
  }
  initialsHandler(newValue) {
    this.checkInitials(newValue);
  }
  render() {
    let backgroundColor = '';
    if (this.hasInitials) {
      let cleanedInitials = this.initials.toLowerCase().replace(/[^a-zA-Z0-9]+/g, '').substring(0, 2);
      if (cleanedInitials.length === 1) {
        cleanedInitials = cleanedInitials + cleanedInitials;
      }
      backgroundColor = avatarVariant[(cleanedInitials.substring(0, 1).charCodeAt(0) + cleanedInitials.substring(1, 2).charCodeAt(0)) % avatarVariant.length];
    }
    if (this.src === undefined) {
      this.loaded = true;
      this.placeholder = true;
    }
    return (h(Host, null, h("div", { class: clsx('avatar', this.hasInitials && 'initials', this.loaded ? 'loaded' : 'pending', this.placeholder && !this.hasInitials && 'fallback', backgroundColor) }, this.placeholder
      ? h("div", { class: clsx(this.hasInitials ? 'initials-text' : 'fallback-image') }, this.hasInitials && h("mds-text", { typography: "h5" }, this.initials.substring(0, 2)))
      : h("mds-img", { class: "image", loading: "lazy", onLoadError: () => { this.loaded = true; this.placeholder = true; }, onLoadSuccess: () => { this.loaded = true; }, src: this.src }))));
  }
  static get watchers() { return {
    "initials": ["initialsHandler"]
  }; }
};
MdsAvatar.style = mdsAvatarCss;

export { MdsAvatar as mds_avatar };
