Select Git revision
dropdown_2.3.1.xml
Manuel Geyer authored
dropdown_2.3.1.xml 22.69 KiB
<widget xmlns="http://openajax.org/metadata" spec="1.0" id="http://microsoft.com/appmagic/dropdown" name="dropdown" jsClass="AppMagic.Controls.Dropdown.DropdownControl" version="2.3.1" 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[DROPDOWN
Control description here.]]></description>
<requires>
<require type="css" src="css/dropdown.css" />
<require type="javascript" src="js/dropdown.js" />
<require type="other" src="data/DropdownSample.xlsx" authoringOnly="true" />
<require type="other" src="images/dropdownarrow_blackicon.svg" />
</requires>
<appMagic:capabilities contextualViewsEnabled="true" autoBorders="true" autoFocusedBorders="true" screenActiveAware="true" autoDisabledViewState="true" autoPointerViewState="true" isVersionFlexible="true" />
<appMagic:accessibilityChecks controlIsInteractive="true" />
<content><![CDATA[
<div class="appmagic-dropdown no-focus-outline"
data-bind="
shortcut: {
provider: shortcutProvider,
capture: false
}
">
<div
data-bind="
style: {
fontFamily: properties.Font,
fontSize: properties.Size,
color: autoProperties.Color,
backgroundColor: autoProperties.Fill,
fontWeight: properties.FontWeight,
fontStyle: properties.Italic,
textAlign: properties.Align
},
attr: {
class: id + ' appmagic-dropdownLabel',
},
event: {
click: onClickLabel,
},
css: {
disabled: isDisabled,
underline: properties.Underline,
readonly: isReadOnly,
strikethrough: properties.Strikethrough
},
controlFlyout: {
contentSelector: '.appmagic-dropdownFlyout',
position: 'bottom left',
openOn: null,
matchWidth: true,
beforeOpen: beforeOpenFlyout.bind($data),
showEvent: openFlyoutEvent,
closeEvent: closeFlyoutEvent,
onShow: onShow.bind($data),
onClose: onClose.bind($data)
}
"
>
<div class="appmagic-dropdownLabelText no-focus-outline"
touch-action="pan-x pan-y"
role="button"
aria-haspopup="listbox"
data-bind="
attr: {
title: properties.Tooltip() || null,
'aria-label': (properties.AccessibleLabel() || '') + '. ' + selectedValue,
'aria-disabled': isDisabled || isReadOnly
},
text: selectedValue,
style: {
paddingTop: properties.PaddingTop, paddingRight: properties.PaddingRight,
paddingBottom: properties.PaddingBottom,
paddingLeft: properties.PaddingLeft
}
"
>
</div>
<div class="appmagic-dropdownLabelArrow" data-bind="style: { width: properties.ChevronWidth }">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" focusable="false" aria-hidden="true"
data-bind="style: { width: properties.ChevronWidth, height: AppMagic.Controls.converters.pxVerticalConverter.view(properties.Height()) }">
<polygon class="chevron-svg" points="18,24.5 7,13.6 9.1,11.5 18,20.3 26.9,11.5 29,13.6" />
</svg>
</div>
</div>
<!-- ko stopBinding: true -->
<div
class="appmagic-dropdownFlyout"
data-bind="
shortcut: {
provider: shortcutProvider,
capture: false
},
attr: {
id: 'appmagic-dropdownFlyout' + id,
}
"
>
<div
role="listbox"
data-bind="
style: {
fontFamily: properties.Font,
fontSize: properties.Size,
fontWeight: properties.FontWeight,
maxHeight: flyoutMaximumHeight,
fontStyle: properties.Italic,
textAlign: properties.Align,
borderWidth: properties.BorderThickness,
borderColor: properties.HoverBorderColor,
borderStyle: properties.BorderStyle,
backgroundColor: properties.Fill,
},
attr: {
class: id + ' appmagic-dropdownList',
'aria-label': Core.Utility.formatString(AppMagic.Strings.ListBoxItemsLabel || '', properties.AccessibleLabel())
},
css: {
underline: properties.Underline,
strikethrough: properties.Strikethrough
},
foreach: currentItems
"
>
<div
touch-action="pan-y"
role="option"
tabindex="-1"
data-bind="
attr: {
class: 'item' + $index() + ' appmagic-dropdownListItem',
id: 'appmagic-dropdownFlyout' + $parent.id + '_' + $index(),
'aria-selected': selected
},
style: {
minHeight: 'calc(1.333em + ' + $parent.properties.PaddingTop() + ' + ' + $parent.properties.PaddingBottom() + ')',
paddingTop: $parent.properties.PaddingTop,
paddingRight: $parent.properties.PaddingRight,
paddingBottom: $parent.properties.PaddingBottom,
paddingLeft: $parent.properties.PaddingLeft}, css: {
selected: selected
},
event: {
click: $parent.onClickItem.bind($parent),
mouseover: onMouseEvent,
pointerout: onMouseEvent,
mousedown: onMouseEvent,
pointerdown: onMouseEvent,
pointerup: onMouseEvent
},
text: value
"
></div>
</div>
</div>
<!-- /ko -->
</div>
<style data-bind="text: dropdownStyles"></style>
]]></content>
<properties>
<property name="Items" localizedName="##dropdown_Items##" datatype="Array" direction="in" isPrimaryInputProperty="true" hasEditableNameMap="true" errorCapability="recordErrors">
<title>dropdown items</title>
<appMagic:category>data</appMagic:category>
<appMagic:displayName>##dropdown_Items_DisplayName##</appMagic:displayName>
<appMagic:sampleDataSource name="DropDownSample" location="data/DropdownSample.xlsx" />
<properties>
<property name="Value" localizedName="##dropdown_Value##" datatype="String"></property>
</properties>
<appMagic:tooltip>##dropdown_Items_Tooltip##</appMagic:tooltip>
</property>
<property name="Selected" localizedName="##dropdown_Selected##" datatype="object" direction="out" supportsAutomation="true">
<title>Value of the selected item</title>
<appMagic:passThroughReference>Items</appMagic:passThroughReference>
<appMagic:category>data</appMagic:category>
</property>
<property name="SelectedText" localizedName="##dropdown_SelectedText##" datatype="object" direction="out" isPrimaryOutputProperty="true" supportsAutomation="true">
<title>Text value of the selected item</title>
<appMagic:category>data</appMagic:category>
<appMagic:passThroughReference>Items</appMagic:passThroughReference>
<properties>
<property name="Value" localizedName="##dropdown_Value##" datatype="String"></property>
</properties>
</property>
<property name="Default" localizedName="##dropdown_Default##" datatype="String" defaultValue="1" editable="true" direction="in">
<title>Selected item</title>
<appMagic:category>data</appMagic:category>
<appMagic:displayName>##dropdown_Default_DisplayName##</appMagic:displayName>
<appMagic:tooltip>##dropdown_Default_Tooltip##</appMagic:tooltip>
</property>
<property name="Reset" localizedName="##commonProperties_Reset##" datatype="Boolean" defaultValue="false" direction="in">
<title>Reset</title>
<appMagic:category>data</appMagic:category>
<appMagic:displayName>##commonProperties_Reset_DisplayName##</appMagic:displayName>
<appMagic:tooltip>##commonProperties_Reset_Tooltip##</appMagic:tooltip>
</property>
<property name="AllowEmptySelection" localizedName="##dropdown_AllowEmptySelection##" datatype="Boolean" defaultValue="false" direction="in">
<title>AllowEmptySelection</title>
<appMagic:category>data</appMagic:category>
<appMagic:displayName>##dropdown_AllowEmptySelection_DisplayName##</appMagic:displayName>
<appMagic:tooltip>##dropdown_AllowEmptySelection_Tooltip##</appMagic:tooltip>
</property>
<property name="SelectionColor" localizedName="##dropdown_SelectionColor##" datatype="Color" defaultValue="RGBA(255, 255, 255, 1)" isExpr="true" converter="argbConverter">
<title>Selected Text color</title>
<appMagic:category>design</appMagic:category>
<appMagic:helperUI>color</appMagic:helperUI>
<appMagic:displayName>##dropdown_SelectionColor_DisplayName##</appMagic:displayName>
<appMagic:tooltip>##dropdown_SelectionColor_Tooltip##</appMagic:tooltip>
</property>
<property name="ChevronWidth" localizedName="##Dropdown_Chevron_Width##" datatype="Number" defaultValue="34" phoneDefaultValue="50" webDefaultValue="32" converter="pxHorizontalConverter" hidden="true" styleable="true"> <title>Dropdown Chevron Width</title>
<appMagic:category>design</appMagic:category>
<appMagic:displayName>##Dropdown_Chevron_Width_DisplayName##</appMagic:displayName>
</property>
<property name="FlyoutMaximumHeight" localizedName="##Dropdown_Flyout_MaximumHeight##" datatype="Number" defaultValue="400" converter="pxVerticalConverter" phoneDefaultValue="700" hidden="true" styleable="true">
<title>Dropdown Flyout Maximum Height</title>
<appMagic:category>design</appMagic:category>
<appMagic:displayName>##Dropdown_Flyout_MaximumHeight_DisplayName##</appMagic:displayName>
</property>
<property name="ChevronFill" localizedName="##Dropdown_Chevron_Fill##" datatype="Color" isExpr="true" defaultValue="RGBA(255, 255, 255, 1)" converter="argbConverter">
<title>Dropdown Chevron Fill</title>
<appMagic:category>design</appMagic:category>
<appMagic:helperUI>color</appMagic:helperUI>
<appMagic:displayName>##Dropdown_Chevron_Fill_DisplayName##</appMagic:displayName>
<appMagic:tooltip>##Dropdown_Chevron_Fill_Tooltip##</appMagic:tooltip>
</property>
<property name="ChevronHoverFill" localizedName="##Dropdown_Chevron_HoverFill##" datatype="Color" isExpr="true" defaultValue="Self.ChevronFill" converter="argbConverter" styleable="true">
<title>Dropdown Chevron Hover Fill</title>
<appMagic:category>design</appMagic:category>
<appMagic:helperUI>color</appMagic:helperUI>
<appMagic:displayName>##Dropdown_Chevron_HoverFill_DisplayName##</appMagic:displayName>
</property>
<property name="ChevronDisabledFill" localizedName="##Dropdown_Chevron_DisabledFill##" datatype="Color" isExpr="true" defaultValue="RGBA(235, 233, 229, 1)" converter="argbConverter" styleable="true">
<title>Dropdown Chevron Disabled Fill</title>
<appMagic:category>design</appMagic:category>
<appMagic:helperUI>color</appMagic:helperUI>
<appMagic:displayName>##Dropdown_Chevron_DisabledFill_DisplayName##</appMagic:displayName>
</property>
<property name="ChevronBackground" localizedName="##Dropdown_Chevron_Background##" datatype="Color" isExpr="true" defaultValue="RGBA(35, 31, 32, 1)" converter="argbConverter">
<title>Dropdown Chevron Fill</title>
<appMagic:category>design</appMagic:category>
<appMagic:helperUI>color</appMagic:helperUI>
<appMagic:displayName>##Dropdown_Chevron_Background_DisplayName##</appMagic:displayName>
<appMagic:tooltip>##Dropdown_Chevron_Background_Tooltip##</appMagic:tooltip>
</property>
<property name="ChevronHoverBackground" localizedName="##Dropdown_Chevron_HoverBackground##" datatype="Color" isExpr="true" defaultValue="ColorFade(Self.ChevronBackground, 20%)" converter="argbConverter" styleable="true">
<title>Dropdown Chevron Hover Fill</title>
<appMagic:category>design</appMagic:category>
<appMagic:helperUI>color</appMagic:helperUI>
<appMagic:displayName>##Dropdown_Chevron_HoverBackground_DisplayName##</appMagic:displayName>
</property>
<property name="ChevronDisabledBackground" localizedName="##Dropdown_Chevron_DisabledBackground##" datatype="Color" isExpr="true" defaultValue="RGBA(215, 210, 204, 1)" converter="argbConverter" styleable="true">
<title>Dropdown Chevron Disabled Fill</title>
<appMagic:category>design</appMagic:category>
<appMagic:helperUI>color</appMagic:helperUI>
<appMagic:displayName>##Dropdown_Chevron_DisabledBackground_DisplayName##</appMagic:displayName>
</property>
<property name="SelectionFill" localizedName="##dropdown_SelectionFill##" datatype="Color" defaultValue="RGBA(0, 176, 240, 1)" isExpr="true" converter="argbConverter">
<title>Selected Fill color</title>
<appMagic:category>design</appMagic:category>
<appMagic:helperUI>color</appMagic:helperUI>
<appMagic:displayName>##dropdown_SelectionFill_DisplayName##</appMagic:displayName>
<appMagic:tooltip>##dropdown_SelectionFill_Tooltip##</appMagic:tooltip>
</property>
</properties>
<appMagic:includeProperties>
<!-- Data -->
<appMagic:includeProperty name="AccessibleLabel" />
<appMagic:includeProperty name="Tooltip" />
<appMagic:includeProperty name="ContentLanguage" />
<!-- Design -->
<appMagic:includeProperty name="Color" defaultValue="RGBA(0, 0, 0, 1)" isExpr="true" />
<appMagic:includeProperty name="HoverColor" defaultValue="Self.Color" />
<appMagic:includeProperty name="PressedColor" defaultValue="Self.Color" />
<appMagic:includeProperty name="DisabledColor" defaultValue="RGBA(186, 186, 186, 1)" />
<appMagic:includeProperty name="BorderColor" defaultValue="RGBA(69, 69, 69, 1)" />
<appMagic:includeProperty name="DisabledBorderColor" defaultValue="RGBA(186, 186, 186, 1)" />
<appMagic:includeProperty name="HoverBorderColor" defaultValue="ColorFade(Self.BorderColor, 15%)" />
<appMagic:includeProperty name="PressedBorderColor" defaultValue="Self.HoverBorderColor" />
<appMagic:includeProperty name="BorderStyle" /> <appMagic:includeProperty name="BorderThickness" defaultValue="2" />
<appMagic:includeProperty name="FocusedBorderColor" defaultValue="Self.BorderColor" isExpr="true" />
<appMagic:includeProperty name="FocusedBorderThickness" defaultValue="4" />
<appMagic:includeProperty name="Fill" defaultValue="RGBA(255, 255, 255, 1)" />
<appMagic:includeProperty name="DisabledFill" defaultValue="RGBA(242, 242, 242, 1)" />
<appMagic:includeProperty name="PressedFill" defaultValue="ColorFade(Self.SelectionFill, -30%)" />
<appMagic:includeProperty name="HoverFill" defaultValue="RGBA(186, 186, 186, 1)" />
<appMagic:includeProperty name="Font" />
<appMagic:includeProperty name="Size" phoneDefaultValue="30" />
<appMagic:includeProperty name="FontWeight" />
<appMagic:includeProperty name="Italic" />
<appMagic:includeProperty name="Underline" />
<appMagic:includeProperty name="Strikethrough" />
<appMagic:includeProperty name="PaddingTop" defaultValue="10" />
<appMagic:includeProperty name="PaddingRight" defaultValue="10" />
<appMagic:includeProperty name="PaddingBottom" defaultValue="10" />
<appMagic:includeProperty name="PaddingLeft" defaultValue="10" />
<appMagic:includeProperty name="X" />
<appMagic:includeProperty name="Y" />
<appMagic:includeProperty name="Width" defaultValue="328" phoneDefaultValue="575" webDefaultValue="180" />
<appMagic:includeProperty name="Height" defaultValue="40" phoneDefaultValue="70" webDefaultValue="32" />
<appMagic:includeProperty name="Visible" />
<appMagic:includeProperty name="TabIndex" />
<appMagic:includeProperty name="DisplayMode" />
<!-- Behavior -->
<appMagic:includeProperty name="OnSelect" direction="in" />
<appMagic:includeProperty name="OnChange" direction="in" isPrimaryBehaviorProperty="true" />
<!-- Hidden properties -->
<appMagic:includeProperty name="minimumWidth" defaultValue="80" />
<appMagic:includeProperty name="minimumHeight" defaultValue="35" />
<appMagic:includeProperty name="maximumWidth" defaultValue="1366" />
<appMagic:includeProperty name="maximumHeight" defaultValue="768" />
</appMagic:includeProperties>
<!--Property Dependencies -->
<appMagic:propertyDependencies>
<appMagic:propertyDependency input="Items" output="Selected" />
<appMagic:propertyDependency input="Default" output="Selected" />
<appMagic:propertyDependency input="Reset" output="Selected" />
<appMagic:propertyDependency input="Items" output="SelectedText" />
<appMagic:propertyDependency input="Default" output="SelectedText" />
</appMagic:propertyDependencies>
<appMagic:insertMetadata>
<appMagic:category name="Input" priority="40" />
<appMagic:category name="ClassicControls" priority="40" />
</appMagic:insertMetadata>
<!-- Display metadata providing property visibility, order, sections, and grouping in UI (e.g. properties panel) -->
<appMagic:displayMetadata>
<appMagic:section>
<appMagic:property name="Items" serverProvidesValue="true" hasNameMaps="true" computedValueType="ItemsWithNameMaps" />
<appMagic:configureProperty propertyInvariantName="DependentItems" ruleToSet="Items" hasNameMaps="true" computedValueType="ItemsWithNameMaps" />
</appMagic:section>
<appMagic:section>
<appMagic:property name="Default" />
<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="Color" showInFloatie="true" />
<appMagic:property name="Fill" showInFloatie="true" />
</appMagic:propertyGroup>
<appMagic:propertyGroup name="SelectionColor">
<appMagic:property name="SelectionColor" />
<appMagic:property name="SelectionFill" />
</appMagic:propertyGroup>
<appMagic:propertyGroup name="ChevronColor">
<appMagic:property name="ChevronFill" />
<appMagic:property name="ChevronBackground" />
</appMagic:propertyGroup>
<appMagic:property name="Font" displayType="FontEnum" showInFloatie="true" />
<appMagic:property name="Size" labelOverride="##FontSize_Property##" showInFloatie="true" />
<appMagic:property name="FontWeight" displayType="EnumIcon" itemsOrder="Bold;Semibold;Normal;Lighter" />
<appMagic:propertyGroup name="Style">
<appMagic:property name="Italic" displayType="ToggleButton" />
<appMagic:property name="Underline" displayType="ToggleButton" />
<appMagic:property name="Strikethrough" displayType="ToggleButton" />
</appMagic:propertyGroup>
<appMagic:propertyGroup name="Border">
<appMagic:property name="BorderStyle" />
<appMagic:property name="BorderThickness" />
<appMagic:property name="BorderColor" />
</appMagic:propertyGroup>
</appMagic:section>
<appMagic:section>
<appMagic:propertyGroup name="DisabledColor">
<appMagic:property name="DisabledColor" />
<appMagic:property name="DisabledFill" />
<appMagic:property name="DisabledBorderColor" />
</appMagic:propertyGroup>
<appMagic:property name="ChevronDisabledFill" />
<appMagic:property name="ChevronDisabledBackground" />
<appMagic:propertyGroup name="HoverColor">
<appMagic:property name="HoverColor" />
<appMagic:property name="HoverFill" />
<appMagic:property name="HoverBorderColor" />
</appMagic:propertyGroup>
<appMagic:property name="ChevronHoverFill" />
<appMagic:property name="ChevronHoverBackground" />
<appMagic:propertyGroup name="PressedColor">
<appMagic:property name="PressedColor" />
<appMagic:property name="PressedFill" />
<appMagic:property name="PressedBorderColor" />
</appMagic:propertyGroup>
<appMagic:property name="TabIndex" />
<appMagic:property name="Tooltip" />
</appMagic:section>
</appMagic:displayMetadata>
<appMagic:conversion from="2.0.0" to="2.1.0">
<appMagic:conversionAction type="add" name="AllowUnsetValue" />
</appMagic:conversion>
<appMagic:conversion from="2.1.0" to="2.2.0">
<appMagic:conversionAction type="rename" name="Selected" newName="SelectedText" />
<appMagic:conversionAction type="add" name="Selected" />
</appMagic:conversion>
<appMagic:conversion from="2.2.0" to="2.2.1">
<appMagic:conversionAction type="rename" name="AllowUnsetValue" newName="AllowEmptySelection" />
</appMagic:conversion>
<appMagic:conversion from="2.2.1" to="2.2.2">
<!-- KO template changes for accessibility fixes -->
</appMagic:conversion>
<appMagic:conversion from="2.2.2" to="2.2.3">
<!-- KO template changes for undefined string fix -->
</appMagic:conversion>
<appMagic:conversion from="2.2.3" to="2.2.4"> <!-- Defined Items property as able to receive record errors -->
</appMagic:conversion>
<appMagic:conversion from="2.2.4" to="2.3.0">
<appMagic:conversionAction type="add" name="ContentLanguage" />
</appMagic:conversion>
<appMagic:conversion from="2.3.0" to="2.3.1">
<!-- KO template changes for fixing min height issue -->
</appMagic:conversion>
</widget>