function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import { extend } from '../../vue';
import { NAME_AVATAR } from '../../constants/components';
import { EVENT_NAME_CLICK, EVENT_NAME_IMG_ERROR } from '../../constants/events';
import { PROP_TYPE_BOOLEAN, PROP_TYPE_BOOLEAN_STRING, PROP_TYPE_NUMBER_STRING, PROP_TYPE_STRING } from '../../constants/props';
import { SLOT_NAME_BADGE } from '../../constants/slots';
import { isNumber, isNumeric, isString } from '../../utils/inspect';
import { toFloat } from '../../utils/number';
import { omit, sortKeys } from '../../utils/object';
import { makeProp, makePropsConfigurable, pluckProps } from '../../utils/props';
import { isLink } from '../../utils/router';
import { normalizeSlotMixin } from '../../mixins/normalize-slot';
import { BIcon } from '../../icons/icon';
import { BIconPersonFill } from '../../icons/icons';
import { BButton } from '../button/button';
import { BLink, props as BLinkProps } from '../link/link';

// --- Constants ---

var CLASS_NAME = 'b-avatar';
var SIZES = ['sm', null, 'lg'];
var FONT_SIZE_SCALE = 0.4;
var BADGE_FONT_SIZE_SCALE = FONT_SIZE_SCALE * 0.7;

// --- Helper methods ---

export var computeSize = function computeSize(value) {
  // Parse to number when value is a float-like string
  value = isString(value) && isNumeric(value) ? toFloat(value, 0) : value;
  // Convert all numbers to pixel values
  return isNumber(value) ? "".concat(value, "px") : value || null;
};

// --- Props ---

var linkProps = omit(BLinkProps, ['active', 'event', 'routerTag']);
export var props = makePropsConfigurable(sortKeys(_objectSpread(_objectSpread({}, linkProps), {}, {
  alt: makeProp(PROP_TYPE_STRING, 'avatar'),
  ariaLabel: makeProp(PROP_TYPE_STRING),
  badge: makeProp(PROP_TYPE_BOOLEAN_STRING, false),
  badgeLeft: makeProp(PROP_TYPE_BOOLEAN, false),
  badgeOffset: makeProp(PROP_TYPE_STRING),
  badgeTop: makeProp(PROP_TYPE_BOOLEAN, false),
  badgeVariant: makeProp(PROP_TYPE_STRING, 'primary'),
  button: makeProp(PROP_TYPE_BOOLEAN, false),
  buttonType: makeProp(PROP_TYPE_STRING, 'button'),
  icon: makeProp(PROP_TYPE_STRING),
  rounded: makeProp(PROP_TYPE_BOOLEAN_STRING, false),
  size: makeProp(PROP_TYPE_NUMBER_STRING),
  square: makeProp(PROP_TYPE_BOOLEAN, false),
  src: makeProp(PROP_TYPE_STRING),
  text: makeProp(PROP_TYPE_STRING),
  variant: makeProp(PROP_TYPE_STRING, 'secondary')
})), NAME_AVATAR);

// --- Main component ---

// @vue/component
export var BAvatar = /*#__PURE__*/extend({
  name: NAME_AVATAR,
  mixins: [normalizeSlotMixin],
  inject: {
    getBvAvatarGroup: {
      default: function _default() {
        return function () {
          return null;
        };
      }
    }
  },
  props: props,
  data: function data() {
    return {
      localSrc: this.src || null
    };
  },
  computed: {
    bvAvatarGroup: function bvAvatarGroup() {
      return this.getBvAvatarGroup();
    },
    computedSize: function computedSize() {
      // Always use the avatar group size
      var bvAvatarGroup = this.bvAvatarGroup;
      return computeSize(bvAvatarGroup ? bvAvatarGroup.size : this.size);
    },
    computedVariant: function computedVariant() {
      var bvAvatarGroup = this.bvAvatarGroup;
      return bvAvatarGroup && bvAvatarGroup.variant ? bvAvatarGroup.variant : this.variant;
    },
    computedRounded: function computedRounded() {
      var bvAvatarGroup = this.bvAvatarGroup;
      var square = bvAvatarGroup && bvAvatarGroup.square ? true : this.square;
      var rounded = bvAvatarGroup && bvAvatarGroup.rounded ? bvAvatarGroup.rounded : this.rounded;
      return square ? '0' : rounded === '' ? true : rounded || 'circle';
    },
    fontStyle: function fontStyle() {
      var size = this.computedSize;
      var fontSize = SIZES.indexOf(size) === -1 ? "calc(".concat(size, " * ").concat(FONT_SIZE_SCALE, ")") : null;
      return fontSize ? {
        fontSize: fontSize
      } : {};
    },
    marginStyle: function marginStyle() {
      var size = this.computedSize,
        bvAvatarGroup = this.bvAvatarGroup;
      var overlapScale = bvAvatarGroup ? bvAvatarGroup.overlapScale : 0;
      var value = size && overlapScale ? "calc(".concat(size, " * -").concat(overlapScale, ")") : null;
      return value ? {
        marginLeft: value,
        marginRight: value
      } : {};
    },
    badgeStyle: function badgeStyle() {
      var size = this.computedSize,
        badgeTop = this.badgeTop,
        badgeLeft = this.badgeLeft,
        badgeOffset = this.badgeOffset;
      var offset = badgeOffset || '0px';
      return {
        fontSize: SIZES.indexOf(size) === -1 ? "calc(".concat(size, " * ").concat(BADGE_FONT_SIZE_SCALE, " )") : null,
        top: badgeTop ? offset : null,
        bottom: badgeTop ? null : offset,
        left: badgeLeft ? offset : null,
        right: badgeLeft ? null : offset
      };
    }
  },
  watch: {
    src: function src(newValue, oldValue) {
      if (newValue !== oldValue) {
        this.localSrc = newValue || null;
      }
    }
  },
  methods: {
    onImgError: function onImgError(event) {
      this.localSrc = null;
      this.$emit(EVENT_NAME_IMG_ERROR, event);
    },
    onClick: function onClick(event) {
      this.$emit(EVENT_NAME_CLICK, event);
    }
  },
  render: function render(h) {
    var variant = this.computedVariant,
      disabled = this.disabled,
      rounded = this.computedRounded,
      icon = this.icon,
      src = this.localSrc,
      text = this.text,
      fontStyle = this.fontStyle,
      marginStyle = this.marginStyle,
      size = this.computedSize,
      button = this.button,
      type = this.buttonType,
      badge = this.badge,
      badgeVariant = this.badgeVariant,
      badgeStyle = this.badgeStyle;
    var link = !button && isLink(this);
    var tag = button ? BButton : link ? BLink : 'span';
    var alt = this.alt;
    var ariaLabel = this.ariaLabel || null;
    var $content = null;
    if (this.hasNormalizedSlot()) {
      // Default slot overrides props
      $content = h('span', {
        staticClass: 'b-avatar-custom'
      }, [this.normalizeSlot()]);
    } else if (src) {
      $content = h('img', {
        style: variant ? {} : {
          width: '100%',
          height: '100%'
        },
        attrs: {
          src: src,
          alt: alt
        },
        on: {
          error: this.onImgError
        }
      });
      $content = h('span', {
        staticClass: 'b-avatar-img'
      }, [$content]);
    } else if (icon) {
      $content = h(BIcon, {
        props: {
          icon: icon
        },
        attrs: {
          'aria-hidden': 'true',
          alt: alt
        }
      });
    } else if (text) {
      $content = h('span', {
        staticClass: 'b-avatar-text',
        style: fontStyle
      }, [h('span', text)]);
    } else {
      // Fallback default avatar content
      $content = h(BIconPersonFill, {
        attrs: {
          'aria-hidden': 'true',
          alt: alt
        }
      });
    }
    var $badge = h();
    var hasBadgeSlot = this.hasNormalizedSlot(SLOT_NAME_BADGE);
    if (badge || badge === '' || hasBadgeSlot) {
      var badgeText = badge === true ? '' : badge;
      $badge = h('span', {
        staticClass: 'b-avatar-badge',
        class: _defineProperty({}, "badge-".concat(badgeVariant), badgeVariant),
        style: badgeStyle
      }, [hasBadgeSlot ? this.normalizeSlot(SLOT_NAME_BADGE) : badgeText]);
    }
    var componentData = {
      staticClass: CLASS_NAME,
      class: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(CLASS_NAME, "-").concat(size), size && SIZES.indexOf(size) !== -1), "badge-".concat(variant), !button && variant), "rounded", rounded === true), "rounded-".concat(rounded), rounded && rounded !== true), "disabled", disabled),
      style: _objectSpread(_objectSpread({}, marginStyle), {}, {
        width: size,
        height: size
      }),
      attrs: {
        'aria-label': ariaLabel || null
      },
      props: button ? {
        variant: variant,
        disabled: disabled,
        type: type
      } : link ? pluckProps(linkProps, this) : {},
      on: button || link ? {
        click: this.onClick
      } : {}
    };
    return h(tag, componentData, [$content, $badge]);
  }
});