<widget xmlns="http://openajax.org/metadata" spec="1.0" id="http://microsoft.com/appmagic/image" name="image" jsClass="AppMagic.Controls.Image" version="2.2.2" styleable="true" runtimeCost="1" xmlns:appMagic="http://schemas.microsoft.com/appMagic">
  <author name="Microsoft AppMagic" />
  <license type="text/html"><![CDATA[<p>TODO:  Need license text here.</p>]]></license>
  <description><![CDATA[TEXT
      Control description here.]]></description>
  <requires>
    <require type="css" src="css/image.css" excludeOnFeatureGate="controls.reactImage" />
    <require type="javascript" src="js/image.js" excludeOnFeatureGate="controls.reactImage" />
    <require type="javascript" src="js/imageReactProxy.js" includeOnFeatureGate="controls.reactImage" />
    <require type="javascript" src="/openSource/unmodified/exif-js/exif.min.js" />
  </requires>
  <appMagic:capabilities contextualViewsEnabled="true" autoBorders="true" autoFocusedBorders="true" autoPointerViewState="true" autoDisabledViewState="true" autoBorderRadius="true" isVersionFlexible="true" supportsSetFocus="true" />
  <content>
    <!-- When the image is meant to be clickable, a <button> is overlaid on top of the actual image.
         Unfortunately, the control does not know if OnSelect behavior is specified by the user,
         so we use TabIndex >= 0 as a heuristic that the image should be a button.

         When the image is intended to be non-interactive (TabIndex < 0), a <div> is overlaid instead.
         Ideally, users should set TabIndex >= 0 whenever they have OnSelect behavior.
         This div supports the case when OnSelect behavior is specified but users did not set
         TabIndex >= 0. The div will catch clicks and trigger OnSelect.

         <button> has to be used instead of <div role="button"> because of VoiceOver/iOS bug where
         <div> elements scaled down with CSS transforms are not selectable (bug 2504010).
    --><![CDATA[
  <div
    class="appmagic-image no-focus-outline"
    data-bind="{
      style: {
        paddingTop: properties.PaddingTop,
        paddingRight: properties.PaddingRight,
        paddingBottom: properties.PaddingBottom,
        paddingLeft: properties.PaddingLeft,
        backgroundColor: autoProperties.Fill,
        height: '100%',
        width: '100%',
        opacity: properties.Transparency() >= 1 ? '0' : 1 - properties.Transparency(),
        visibility: properties.Transparency() >= 1 ? 'hidden' : ''
      },
      visible: properties.Visible
    }">
      <!-- ko if: !$data.imageSrc || !properties.ImagePosition().objectFit || Core.Environment.getBrowserId() === Core.Environment.BrowserId.InternetExplorer -->
      <div
        data-bind="{
          css: {
            'appmagic-image-inner': true,
            rotateHorizontal: $data.hasHorizontalRotation && $data.hasHorizontalRotation()
          },
          style: {
            height: innerHeight,
            width: innerWidth,
            visibility: innerVisibility,
            backgroundSize: backgroundSize,
            backgroundRepeat: properties.ImagePosition().repeat,
            backgroundPosition: properties.ImagePosition().position,
            backgroundImage: imageUrl,
            '-webkit-transform': transform,
            transform: transform,
            forcedColorAdjust: 'none'
          },
          attr: {
            role: properties.TabIndex() < 0 && !!properties.AccessibleLabel() && 'img',
            'aria-label': properties.TabIndex() < 0 && properties.AccessibleLabel() ? properties.AccessibleLabel() : null
          }
      }">
      </div>
      <!-- /ko -->
      <!-- ko if: $data.imageSrc && properties.ImagePosition().objectFit && Core.Environment.getBrowserId() !== Core.Environment.BrowserId.InternetExplorer -->
      <img 
        data-bind="{
          css: {
            'appmagic-image-inner': true,
            rotateHorizontal: $data.hasHorizontalRotation && $data.hasHorizontalRotation()
          },
          style: {
            height: innerHeight,
            width: innerWidth,
            visibility: imageAvailable() ? innerVisibility() : 'hidden',
            objectFit: properties.ImagePosition().objectFit,
            objectPosition: properties.ImagePosition().objectPosition,
            flex: '0 0 auto',
            borderRadius: '0.1px',
            '-webkit-transform': transform,
            transform: transform
          },
          attr: {
            src: $data.imageSrc && $data.imageSrc(),
            alt: properties.TabIndex() < 0 && properties.AccessibleLabel() ? properties.AccessibleLabel() : ''
          },
          event: {
            load: onImageLoad,
            error: onImageError
          }
      }">      
      <!-- /ko -->
      <div class="appmagic-image-stub-container">
      </div>
      <button class="appmagic-image-button"
        data-bind="{
          visible: properties.TabIndex() >= 0,
          text: properties.AccessibleLabel() || '',
          disable: viewState.displayMode() !== AppMagic.Constants.DisplayMode.Edit,
          event: { click: onClickHandler },
          attr: {
            title: properties.Tooltip() || null
          }
      }">
      </button>
      <div class="appmagic-image-pseudo-button"
        aria-hidden="true"
        data-bind="{
          visible: properties.TabIndex() < 0,
          event: { click: onClickHandler },
          attr: {
            title: properties.Tooltip() || null
          }
      }">
      </div>
  </div>
  ]]></content>
  <properties>
    <property name="Image" localizedName="##image_Image##" datatype="Image" defaultValue="SampleImage" converter="encodeImageUrl" isExpr="true" isPrimaryInputProperty="true" isPrimaryOutputProperty="true">
      <title>Image content</title>
      <appMagic:autoBind>true</appMagic:autoBind>
      <appMagic:category>data</appMagic:category>
      <appMagic:displayName>##image_Image_DisplayName##</appMagic:displayName>
      <appMagic:tooltip>##CommonProperties_Image_Tooltip##</appMagic:tooltip>
      <appMagic:sampleDataSource name="SampleImage" location="images/SampleImage.svg" />
    </property>
    <property name="Transparency" localizedName="##image_Transparency##" datatype="Number" defaultValue="0">
      <title>Image transparency</title>
      <appMagic:category>design</appMagic:category>
      <appMagic:displayName>##image_Transparency_DisplayName##</appMagic:displayName>
      <appMagic:tooltip>##image_Transparency_Tooltip##</appMagic:tooltip>
    </property>
    <property name="ImagePosition" localizedName="##image_ImagePosition##" datatype="ImagePosition" defaultValue="%ImagePosition.RESERVED%.Fit" isExpr="true" converter="imagePositionConverter">
      <title>Image stretch style</title>
      <appMagic:category>design</appMagic:category>
      <appMagic:helperUI>imagePosition</appMagic:helperUI>
      <appMagic:displayName>##image_ImagePosition_DisplayName##</appMagic:displayName>
      <appMagic:tooltip>##CommonProperties_ImagePosition_Tooltip##</appMagic:tooltip>
    </property>
    <property name="CalculateOriginalDimensions" localizedName="##image_CalculateOriginalDimensions##" datatype="boolean" defaultValue="false" direction="in">
      <title>CalculateOriginalDimensions</title>
      <appMagic:category>design</appMagic:category>
      <appMagic:helperUI>boolean</appMagic:helperUI>
      <appMagic:displayName>##image_CalculateOriginalDimensions_DisplayName##</appMagic:displayName>
    </property>
    <property name="ImageRotation" localizedName="##image_ImageRotation##" datatype="ImageRotation" defaultValue="%ImageRotation.RESERVED%.None" isExpr="true">
      <title>ImageRotation</title>
      <appMagic:category>design</appMagic:category>
      <appMagic:displayName>##image_ImageRotation_DisplayName##</appMagic:displayName>
      <appMagic:tooltip>##image_ImageRotation_Tooltip##</appMagic:tooltip>
    </property>
    <property name="FlipHorizontal" localizedName="##image_FlipHorizontal##" datatype="boolean" defaultValue="false" direction="in">
      <title>FlipHorizontal</title>
      <appMagic:category>design</appMagic:category>
      <appMagic:helperUI>boolean</appMagic:helperUI>
      <appMagic:displayName>##image_FlipHorizontal_DisplayName##</appMagic:displayName>
    </property>
    <property name="FlipVertical" localizedName="##image_FlipVertical##" datatype="boolean" defaultValue="false" direction="in">
      <title>FlipVertical</title>
      <appMagic:category>design</appMagic:category>
      <appMagic:helperUI>boolean</appMagic:helperUI>
      <appMagic:displayName>##image_FlipVertical_DisplayName##</appMagic:displayName>
    </property>
    <property name="ApplyEXIFOrientation" localizedName="##image_ApplyEXIFOrientation##" datatype="boolean" defaultValue="true" direction="in">
      <title>ApplyEXIFOrientation</title>
      <appMagic:category>design</appMagic:category>
      <appMagic:helperUI>boolean</appMagic:helperUI>
      <appMagic:displayName>##image_ApplyEXIFOrientation_DisplayName##</appMagic:displayName>
    </property>
    <property name="EXIFOrientation" localizedName="##image_EXIFOrientation##" datatype="Number" defaultValue="1" direction="out">
      <title>EXIFOrientation</title>
      <appMagic:category>design</appMagic:category>
      <appMagic:displayName>##image_EXIFOrientation_DisplayName##</appMagic:displayName>
    </property>
    <property name="OriginalWidth" localizedName="##image_OriginalWidth##" datatype="Number" defaultValue="0" direction="out">
      <title>OriginalWidth</title>
      <appMagic:category>design</appMagic:category>
      <appMagic:helperUI>imagePosition</appMagic:helperUI>
      <appMagic:displayName>##image_OriginalWidth_DisplayName##</appMagic:displayName>
    </property>
    <property name="OriginalHeight" localizedName="##image_OriginalHeight##" datatype="Number" defaultValue="0" direction="out">
      <title>OriginalHeight</title>
      <appMagic:category>design</appMagic:category>
      <appMagic:helperUI>imagePosition</appMagic:helperUI>
      <appMagic:displayName>##image_OriginalHeight_DisplayName##</appMagic:displayName>
    </property>
    <property name="DisplayedWidth" localizedName="##image_DisplayedWidth##" datatype="Number" defaultValue="0" direction="out">
      <title>DisplayedWidth</title>
      <appMagic:category>design</appMagic:category>
      <appMagic:displayName>##image_DisplayedWidth_DisplayName##</appMagic:displayName>
    </property>
    <property name="DisplayedHeight" localizedName="##image_DisplayedHeight##" datatype="Number" defaultValue="0" direction="out">
      <title>DisplayedHeight</title>
      <appMagic:category>design</appMagic:category>
      <appMagic:displayName>##image_DisplayedHeight_DisplayName##</appMagic:displayName>
    </property>
    <property name="OffsetX" localizedName="##image_OffsetX##" datatype="Number" defaultValue="0" direction="out">
      <title>OffsetX</title>
      <appMagic:category>design</appMagic:category>
      <appMagic:displayName>##image_OffsetX_DisplayName##</appMagic:displayName>
    </property>
    <property name="OffsetY" localizedName="##image_OffsetY##" datatype="Number" defaultValue="0" direction="out">
      <title>OffsetY</title>
      <appMagic:category>design</appMagic:category>
      <appMagic:displayName>##image_OffsetY_DisplayName##</appMagic:displayName>
    </property>
  </properties>
  <appMagic:includeProperties>
    <appMagic:includeProperty name="AccessibleLabel" />
    <appMagic:includeProperty name="Tooltip" />
    <appMagic:includeProperty name="ContentLanguage" />
    <appMagic:includeProperty name="AutoDisableOnSelect" />
    <appMagic:includeProperty name="X" />
    <appMagic:includeProperty name="Y" />
    <appMagic:includeProperty name="Width" defaultValue="100" phoneDefaultValue="320" webDefaultValue="236" />
    <appMagic:includeProperty name="Height" defaultValue="100" phoneDefaultValue="320" webDefaultValue="175" />
    <appMagic:includeProperty name="Visible" />
    <appMagic:includeProperty name="Fill" />
    <appMagic:includeProperty name="DisabledFill" defaultValue="RGBA(119, 119, 119, 1)" />
    <appMagic:includeProperty name="PressedFill" defaultValue="ColorFade(Self.Fill, -20%)" />
    <appMagic:includeProperty name="HoverFill" defaultValue="ColorFade(Self.Fill, 20%)" />
    <appMagic:includeProperty name="BorderColor" />
    <appMagic:includeProperty name="RadiusTopLeft" defaultValue="0" />
    <appMagic:includeProperty name="RadiusTopRight" defaultValue="0" />
    <appMagic:includeProperty name="RadiusBottomLeft" defaultValue="0" />
    <appMagic:includeProperty name="RadiusBottomRight" defaultValue="0" />
    <appMagic:includeProperty name="DisabledBorderColor" defaultValue="RGBA(56, 56, 56, 1)" />
    <appMagic:includeProperty name="PressedBorderColor" defaultValue="ColorFade(Self.BorderColor, -20%)" />
    <appMagic:includeProperty name="HoverBorderColor" defaultValue="ColorFade(Self.BorderColor, 20%)" />
    <appMagic:includeProperty name="BorderThickness" />
    <appMagic:includeProperty name="FocusedBorderColor" defaultValue="Self.BorderColor" isExpr="true" />
    <appMagic:includeProperty name="FocusedBorderThickness" />
    <appMagic:includeProperty name="BorderStyle" />
    <appMagic:includeProperty name="PaddingTop" />
    <appMagic:includeProperty name="PaddingRight" />
    <appMagic:includeProperty name="PaddingBottom" />
    <appMagic:includeProperty name="PaddingLeft" />
    <appMagic:includeProperty name="DisplayMode" />
    <!-- TabIndex should be -1 to *prevent* making the control a tabstop unless explicitly changed -->
    <appMagic:includeProperty name="TabIndex" defaultValue="-1" />
    <!-- Behavior Properties -->
    <!-- TASK: 85476: Do Behavior properties make sense as input only? -->
    <appMagic:includeProperty name="OnSelect" direction="in" />
    <!-- Hidden properties -->
    <appMagic:includeProperty name="minimumWidth" defaultValue="1" />
    <appMagic:includeProperty name="minimumHeight" defaultValue="1" />
    <appMagic:includeProperty name="maximumWidth" defaultValue="1366" />
    <appMagic:includeProperty name="maximumHeight" defaultValue="768" />
  </appMagic:includeProperties>
  <appMagic:insertMetadata isDeviceOptimized="true">
    <appMagic:category name="Media" priority="10" />
  </appMagic:insertMetadata>
  <!-- Display metadata providing property visibility, order, sections, and grouping in UI (e.g. properties panel) -->
  <appMagic:displayMetadata>
    <appMagic:section>
      <appMagic:property name="Image" serverProvidesValue="true" computedValueType="Media" showInFloatie="true" />
      <appMagic:property name="ImagePosition" displayType="EnumIcon" showInFloatie="true" />
      <appMagic:property name="Transparency" />
      <appMagic:property name="DisplayMode" />
    </appMagic:section>
    <appMagic:section>
      <appMagic:property name="Visible" />
      <appMagic:propertyGroup name="Position">
        <appMagic:property name="X" />
        <appMagic:property name="Y" />
      </appMagic:propertyGroup>
      <appMagic:propertyGroup name="Size">
        <appMagic:property name="Width" />
        <appMagic:property name="Height" />
      </appMagic:propertyGroup>
      <appMagic:propertyGroup name="Padding">
        <appMagic:property name="PaddingTop" labelOverride="##Padding_Top_Title##" />
        <appMagic:property name="PaddingBottom" labelOverride="##Padding_Bottom_Title##" />
        <appMagic:property name="PaddingLeft" labelOverride="##Padding_Left_Title##" />
        <appMagic:property name="PaddingRight" labelOverride="##Padding_Right_Title##" />
      </appMagic:propertyGroup>
    </appMagic:section>
    <appMagic:section>
      <appMagic:propertyGroup name="Color">
        <appMagic:property name="Fill" showInFloatie="true" />
      </appMagic:propertyGroup>
      <appMagic:propertyGroup name="Border">
        <appMagic:property name="BorderStyle" />
        <appMagic:property name="BorderThickness" />
        <appMagic:property name="BorderColor" />
      </appMagic:propertyGroup>
      <appMagic:propertyGroup name="Radius">
        <appMagic:property name="RadiusTopLeft" />
        <appMagic:property name="RadiusTopRight" />
        <appMagic:property name="RadiusBottomLeft" />
        <appMagic:property name="RadiusBottomRight" />
      </appMagic:propertyGroup>
    </appMagic:section>
    <appMagic:section>
      <appMagic:property name="AutoDisableOnSelect" />
      <appMagic:propertyGroup name="DisabledColor">
        <appMagic:property name="DisabledFill" />
        <appMagic:property name="DisabledBorderColor" />
      </appMagic:propertyGroup>
      <appMagic:propertyGroup name="HoverColor">
        <appMagic:property name="HoverFill" />
        <appMagic:property name="HoverBorderColor" />
      </appMagic:propertyGroup>
      <appMagic:propertyGroup name="PressedColor">
        <appMagic:property name="PressedFill" />
        <appMagic:property name="PressedBorderColor" />
      </appMagic:propertyGroup>
      <appMagic:property name="Tooltip" />
      <appMagic:property name="TabIndex" />
    </appMagic:section>
  </appMagic:displayMetadata>
  <appMagic:conversion from="2.0.0" to="2.1.0">
    <appMagic:conversionAction type="add" name="EXIFOrientation" />
    <appMagic:conversionAction type="add" name="DisplayedWidth" />
    <appMagic:conversionAction type="add" name="DisplayedHeight" />
    <appMagic:conversionAction type="add" name="OffsetX" />
    <appMagic:conversionAction type="add" name="OffsetY" />
  </appMagic:conversion>
  <appMagic:conversion from="2.1.0" to="2.1.1">
    <!--
      KO template change: appmagic-image-pseudo-button element role="presentation"
      so that screen readers will not announce it as clickable (even though it may be).
      If app makers truly intend the Image control as clickable, they have to set
      TabIndex >= 0 as a hint.
      Controls do not know if app makers have defined OnSelect. That's why they always
      attach a click listener and rely on TabIndex as a hint about author's intentions.
    -->
  </appMagic:conversion>
  <appMagic:conversion from="2.1.1" to="2.1.2">
    <!-- KO template changes for accessibility fixes -->
  </appMagic:conversion>
  <appMagic:conversion from="2.1.2" to="2.2.0">
    <appMagic:conversionAction type="add" name="ContentLanguage" />
  </appMagic:conversion>
  <appMagic:conversion from="2.2.0" to="2.2.1">
    <!-- KO template changes to use <img> tag when possible -->
  </appMagic:conversion>
  <appMagic:conversion from="2.2.1" to="2.2.2">
    <!-- KO template changes to hide image when unavailable -->
  </appMagic:conversion>
</widget>