{"version":3,"sources":["pfe-avatar.scss","../../pfe-sass/functions/_custom-properties.scss","pfe-avatar.css"],"names":[],"mappings":"AAcA;EACE,cAAc;EACd,kBAAkB;EAElB,YC6DkC;ED7DlC,+DC6DkC;ED5DlC,aC4DkC;ED5DlC,gEC4DkC;AC1EpC;;AFSA;EAQI,WAAW;EACX,YAAY;EAEZ,8BAA8B;EAAE,yBAAA;EAChC,iCAAiC;EAAE,YAAA;EACnC,0CAA0C;EAAE,WAAA;EAC5C,+BAA+B;EAAE,kCAAA;EACjC,6BAA0B;EAA1B,0BAA0B;EAAE,4BAAA;EAC5B,wCAAwC;EAAE,OAAA;AER9C;;AFYA;;EAOI,oCAAiD;EAAjD,uFAAiD;AEdrD;;AFkBA;;EAGI,kBAAkB;AEhBtB;;AFqBA;EAEI,aAAa;AEnBjB;;AFiBA;EAMI,cAAc;EACd,WAAW;EACX,YAAY;EACZ,oBAAiB;KAAjB,iBAAiB;AEnBrB;;AFwBA;EACE,aAAa;AErBf;;AFwBA;EACE,aAAa;AErBf","file":"pfe-avatar.css","sourcesContent":["@import \"../../pfe-sass/pfe-sass\";\n\n$LOCAL: avatar;\n$LOCAL-VARIABLES: (\n  size: 128px\n);\n\n // TODO: This will be removed at 1.0 in favor of size\n $backwards-compatibility: (\n     size: pfe-local(width, $fallback: 128px)\n );\n\n $LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, $backwards-compatibility);\n\n:host {\n  display: block;\n  position: relative;\n\n  width: pfe-local(size);\n  height: pfe-local(size);\n\n  canvas {\n    width: 100%;\n    height: 100%;\n\n    image-rendering: optimizeSpeed; /* Older versions of FF */\n    image-rendering: -moz-crisp-edges; /* FF 6.0+ */\n    image-rendering: -webkit-optimize-contrast; /* Safari */\n    image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */\n    image-rendering: pixelated; /* Awesome future-browsers */\n    -ms-interpolation-mode: nearest-neighbor; /* IE */\n  }\n}\n\n:host([shape=\"rounded\"]) {\n  // When border radius lines up with the size of the avatar's random\n  // patterns, it looks nice, so make border-radius the same size as the\n  // patterns, ie 1/8th the width of the avatars.  add 1px beacuse it looks\n  // just a little bit better.\n  img,\n  canvas {\n    border-radius: calc(#{pfe-local(size)} / 8 + 1px);\n  }\n}\n\n:host([shape=\"circle\"]) {\n  img,\n  canvas {\n    border-radius: 50%;\n  }\n}\n\n// when src attribute is provided, show the img but hide the canvas\n:host([src]) {\n  canvas {\n    display: none;\n  }\n\n  img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n}\n\n// when src attribute is not present, hide the img\n:host(:not([src])) img {\n  display: none;\n}\n\n:host([hidden]) {\n  display: none;\n}\n","////\n/// Tools for leveraging custom property stacks\n/// @group custom-properties\n/// @author castastrophe\n////\n\n/// Get full theme stack with a fallback from the provided map - used by pfe-var and pfe-zindex\n/// @param {String} $category  - Category name to be appended to variables within the map/system\n/// @param {String} $key - Variable name to be used and prepended with --pfe-theme\n/// @param {Map} $map  - Sass map of variables\n/// @param {String} $fallback [null]  - Optional fallback override\n/// @param {Boolean} $use-fallback [true]  - Optional hook to return a stack with no fallback value\n/// @requires $custom-prop-prefix\n/// @return {String} theme stack with fallback value from a sass map\n@function pfe-get-from-map($category, $key, $map, $fallback: null, $prefix: \"#{$custom-prop-prefix}-theme\", $use-fallback: true) {\n    // Start building the variable declaration\n    $var-declaration: \"--#{$prefix}--\";\n    @if $prefix == \"pf-c\" {\n        $var-declaration: \"--#{$prefix}-\";  // one dash at the end\n    }\n    // If the category exists, inject that into the string\n    @if $category != \"\" {\n        $var-declaration: \"#{$var-declaration}#{$category}--\";\n    }\n    // Append the key to the string\n    $var-declaration: \"#{$var-declaration}#{$key}\";\n\n    // If the fallback is not provided but use-fallback is set to true\n    @if $fallback == null and $use-fallback and map-get($map, $key) != null {\n        $fallback: map-get($map, $key);\n    }\n    @if $fallback != null {\n        // Create the variable declaration\n        $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n    }\n\n    // Return the variable declaration string\n    @return var(#{$var-declaration});   \n}\n\n\n\n/// Returns CSS Var for the local component-scoped variable\n/// @param {String} $cssvar - Variable identifiers which are postfixed and combined using '--'\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $custom-prop-prefix\n/// @see $LOCAL\n/// @example\n///   :host {\n///       padding-top:      #{pfe-local(paddingTop)};\n///       padding-bottom:   #{pfe-local(paddingBottom)};\n///   }\n@function pfe-local($cssvar, $fallback: null, $region: null) {\n    // If a fallback is not defined, use the global variables map\n    @if $fallback == null and length($LOCAL-VARIABLES) > 0 {\n        @if $region == null {\n            $fallback: map-get($LOCAL-VARIABLES, $cssvar);\n        }\n        @else {\n            $submap: map-get($LOCAL-VARIABLES, $region);\n            @if type-of($submap) == \"map\" {\n                $fallback: map-deep-get($LOCAL-VARIABLES, $region, $cssvar);\n            }\n        }\n    }\n\n    // If a region value exists, build the region string\n    @if $region != null {\n        $region: \"__#{$region}\";\n    }\n\n    // Start building the variable declaration\n    $var-declaration: \"--#{$custom-prop-prefix}-#{$LOCAL}#{$region}--#{to-string($cssvar, '--')}\";\n    \n    @if $fallback != null {\n        $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n    }\n\n    // Return the variable declaration string\n    @return var(#{$var-declaration});\n}\n\n/// Fetches a CSS variable stack for broadcasted variables, providing a hook for context\n/// to influence the styles of children elements such as p tags or links.\n/// @param {String} $broadcast - name of the broadcast variable to apply\n/// @requires {String} $custom-prop-prefix - Name of repo, which is \"pfe\"\n/// @example - scss\n///   :host {\n///     color: pfe-broadcasted(link);\n///   }\n/// @example - css\n///   :host {\n///     color: var(--pfe-broadcasted--link, #06c);\n///   }\n@function pfe-broadcasted($broadcast, $use-fallback: true) {\n    $fallback: \"\";\n    @if $use-fallback {\n        $fallback: \", #{map-get($pfe-broadcasted, #{to-string($broadcast,'--')})}\";\t\n    }\n    @if not index($BROADCAST-VARS, first(str-split($broadcast, '--'))) {\n      @error \"--#{$custom-prop-prefix}-broadcasted--#{$broadcast} variable is not currently supported.\";\n    }\n    @else {\n      @return var(--#{$custom-prop-prefix}-broadcasted--#{to-string($broadcast,'--')}#{unquote($fallback)});\n    }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme--zindex\n/// @requires {Map} $pfe-zindex - SASS Map of z-index values\n/// @see $pfe-zindex\n/// @example - scss - In your component styles\n///   .my-element {\n///     z-index: pfe-zindex( content );\n///   }\n\n@function pfe-zindex($cssvar) {\n    $var-name: to-string($cssvar, \"--\");\n    @if map-get($pfe-zindex, $var-name) != null {\n        @return pfe-get-from-map(\"zindex\", $var-name, $pfe-zindex);\n    }\n    @else {\n        @error \"The key for #{$var-name} could not be found in the $pfe-zindex map.\";\n    }\n}\n\n/// Returns the value (only) of a property from the respective maps\n/// Similar to pfe-var, but does not include css variable in the compiled CSS\n/// @param {String} $name - Name of the key for the map\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example - scss - In your component styles\n///   .my-element {\n///     background-color: pfe-fetch( ui-base );\n///   }\n@function pfe-fetch($name, $region: null) {\n    $var-name: to-string($name, \"--\");\n    @if $region != null and map-deep-get($LOCAL-VARIABLES, $region, $var-name) != null {\n        @return map-deep-get($LOCAL-VARIABLES, $region, $var-name);\n    }\n    @else if $region == null and map-get($LOCAL-VARIABLES, $var-name) != null {\n        @return map-get($LOCAL-VARIABLES, $var-name);\n    }\n    @else if map-get($pfe-vars, $var-name) != null {\n        @return map-get($pfe-vars, $var-name);\n    }\n    @else if map-get($pfe-colors, $var-name) != null {\n        @return map-get($pfe-colors, $var-name);\n    }\n    @else if map-get($pfe-broadcasted, $var-name) != null {\n        @return map-get($pfe-broadcasted, $var-name);\n    }\n    @else if map-get($pfe-typography-base, $var-name) != null {\n        @return map-get($pfe-typography-base, $var-name);\n    }\n\n    // PATTERNFLY CORE\n    @else if map-get($pf-type-sizing, $var-name) != null {\n        @return map-get($pf-type-sizing, $var-name);\n    }\n    @else if map-get($pf-type-sizing--component, $var-name) != null {\n        @return map-get($pf-type-sizing--component, $var-name);\n    }\n    @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n        @return map-get($pf-type-sizing--modifers, $var-name);\n    }\n    @else if map-get($pf-type-sizing--content, $var-name) != null {\n        @return map-get($pf-type-sizing--content, $var-name);\n    }\n    // DEPRECATED\n    @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n        @return map-get($pfe-typography-base-deprecated, $var-name);\n    }\n    @else if map-get($pfe-typography-deprecated, $var-name) != null {\n        @return map-get($pfe-typography-deprecated, $var-name);\n    }\n    @else {\n        @error \"#{$var-name} could not be found.\";\n    }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme\n/// @param {String} $fallback [null] - Optional custom fallback\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example scss - In your component styles\n///   .my-element {\n///     padding:     pfe-var( container-spacer );\n///     font-size:   pfe-var( font-size );\n///   }\n/// @example - css Rendered output\n///   .my-element {\n///      padding: var(--pfe-theme--container-spacer, 16px);\n///      font-size: var(--pfe-theme--font-size, 16px);\n///   }\n@function pfe-var($cssvar, $fallback: null) {\n    $var-name: to-string($cssvar, \"--\");\n    @if map-get($pfe-vars, $var-name) != null {\n        @return pfe-get-from-map(\"\", $var-name, $pfe-vars, $fallback);\n    }\n    @else if map-get($pfe-colors, $var-name) != null {\n        @return pfe-get-from-map(\"color\", $var-name, $pfe-colors, $fallback);\n    }\n    @else if map-get($pfe-broadcasted, $var-name) != null {\n        @return pfe-get-from-map(\"\", $var-name, $pfe-broadcasted);\n    }\n    @else if map-get($pfe-typography-base, $var-name) != null {\n        @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base, $fallback);\n    }\n    // PATTERNFLY CORE:\n    @else if map-get($pf-type-sizing, $var-name) != null {\n        @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing, $fallback, $prefix: \"pf-global\");\n    }\n    @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n        @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--modifers, $fallback, $prefix: \"pf-c\");\n    }\n    @else if map-get($pf-type-sizing--content, $var-name) != null {\n        @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--content, $fallback, $prefix: \"pf-c\");\n    }\n    // PFE components (must be below core)\n    @else if map-get($pf-type-sizing--component, $var-name) != null {\n        @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--component, $fallback);\n    }\n\n    // DEPRECATED:\n    @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n        @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base-deprecated, $fallback);\n    }\n    @else if map-get($pfe-typography-deprecated, $var-name) != null {\n        @return pfe-get-from-map(\"\", $var-name, $pfe-typography-deprecated, $fallback);\n    }\n\n    @else {\n        @error \"#{$var-name} could not be found.\";\n    }\n}",":host {\n  display: block;\n  position: relative;\n  width: var(--pfe-avatar--size, var(--pfe-avatar--width, 128px));\n  height: var(--pfe-avatar--size, var(--pfe-avatar--width, 128px));\n}\n\n:host canvas {\n  width: 100%;\n  height: 100%;\n  image-rendering: optimizeSpeed;\n  /* Older versions of FF */\n  image-rendering: -moz-crisp-edges;\n  /* FF 6.0+ */\n  image-rendering: -webkit-optimize-contrast;\n  /* Safari */\n  image-rendering: -o-crisp-edges;\n  /* OS X & Windows Opera (12.02+) */\n  image-rendering: pixelated;\n  /* Awesome future-browsers */\n  -ms-interpolation-mode: nearest-neighbor;\n  /* IE */\n}\n\n:host([shape=\"rounded\"]) img,\n:host([shape=\"rounded\"]) canvas {\n  border-radius: calc(var(--pfe-avatar--size, var(--pfe-avatar--width, 128px)) / 8 + 1px);\n}\n\n:host([shape=\"circle\"]) img,\n:host([shape=\"circle\"]) canvas {\n  border-radius: 50%;\n}\n\n:host([src]) canvas {\n  display: none;\n}\n\n:host([src]) img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n:host(:not([src])) img {\n  display: none;\n}\n\n:host([hidden]) {\n  display: none;\n}\n"],"sourceRoot":"../src"}