-
Notifications
You must be signed in to change notification settings - Fork 45
/
dropdown.html
63 lines (62 loc) · 4.2 KB
/
dropdown.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!--/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~ Copyright 2021 Adobe
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
<sly data-sly-use.renderer="${'dropdown.js'}"
data-sly-use.clientlib="${'/libs/granite/sightly/templates/clientlib.html'}"
data-sly-use.label="${renderer.labelPath}"
data-sly-use.shortDescription="${renderer.shortDescriptionPath}"
data-sly-use.longDescription="${renderer.longDescriptionPath}"
data-sly-use.errorMessage="${renderer.errorMessagePath}"
data-sly-use.questionMark="${renderer.questionMarkPath}"></sly>
<div class="cmp-adaptiveform-dropdown"
data-sly-use.formstructparser="com.adobe.cq.forms.core.components.models.form.FormStructureParser"
data-sly-use.dropdown="com.adobe.cq.forms.core.components.models.form.DropDown"
data-cmp-is="adaptiveFormDropDown"
id="${dropdown.id}"
data-cmp-visible="${dropdown.visible ? 'true' : 'false'}"
data-cmp-enabled="${dropdown.enabled ? 'true' : 'false'}"
data-cmp-required="${dropdown.required ? 'true': 'false'}"
data-cmp-readonly="${dropdown.readOnly ? 'true' : 'false'}"
data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}"
data-sly-test.widgetId="${'{0}-{1}' @ format=[dropdown.id, 'widget']}">
<div class="cmp-adaptiveform-dropdown__label-container">
<div data-sly-call="${label.label @componentId=widgetId, labelValue=dropdown.label.value, labelVisible=dropdown.label.visible, labelRichText=dropdown.label.richText, bemBlock='cmp-adaptiveform-dropdown'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=dropdown.id, longDescription=dropdown.description, bemBlock='cmp-adaptiveform-dropdown'}" data-sly-unwrap></div>
</div>
<select class="cmp-adaptiveform-dropdown__widget"
id="${widgetId}"
title="${dropdown.tooltipVisible ? '' : dropdown.tooltipText}"
name="${dropdown.name}"
data-cmp-data-layer="${dropdown.data.json}"
disabled="${!dropdown.enabled || dropdown.readOnly}"
required="${dropdown.required}"
data-sly-attribute.multiple="${dropdown.isMultiSelect ? 'multiple' : ''}"
aria-readonly="${dropdown.readOnly ? 'true' : ''}">
<div data-sly-test.isPlaceHolderSet="${dropdown.placeHolder != null}" data-sly-unwrap></div>
<option data-sly-test="${!isPlaceHolderSet}" disabled selected></option>
<option data-sly-test="${isPlaceHolderSet}" value="" disabled selected>${dropdown.placeHolder}</option>
<div data-sly-list.enumName="${dropdown.enumNames}" data-sly-unwrap>
<div data-sly-test="${enumName != null && dropdown.enums[enumNameList.index] != null}" data-sly-unwrap>
<option value="${dropdown.enums[enumNameList.index].toString}"
class="cmp-adaptiveform-dropdown__option"
data-sly-attribute.selected="${dropdown.enums[enumNameList.index] in dropdown.default ? 'selected' : ''}">${enumName}</option>
</div>
</div>
</select>
<div data-sly-call="${shortDescription.shortDescription @componentId=dropdown.id, shortDescriptionVisible=dropdown.tooltipVisible, shortDescription=dropdown.tooltip, bemBlock='cmp-adaptiveform-dropdown'}" data-sly-unwrap>
</div>
<div data-sly-call="${longDescription.longDescription @componentId=dropdown.id, longDescription=dropdown.description, bemBlock='cmp-adaptiveform-dropdown'}" data-sly-unwrap></div>
<div data-sly-call="${errorMessage.errorMessage @componentId=dropdown.id, bemBlock='cmp-adaptiveform-dropdown'}" data-sly-unwrap></div>
</div>