@ui5/webcomponents-fiori 1.9.2 → 1.9.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/LICENSE.txt +201 -0
- package/dist/SideNavigation.js +8 -8
- package/dist/api.json +1 -1
- package/dist/assets/{AddColumn.1017717d.js → AddColumn.f98dfabf.js} +1 -1
- package/dist/assets/{AddPeople.a4884713.js → AddPeople.c97e9e39.js} +1 -1
- package/dist/assets/{BalloonSky.4b8e41c6.js → BalloonSky.6386fcca.js} +1 -1
- package/dist/assets/{ChartArea.a3a9cd78.js → ChartArea.e65df226.js} +1 -1
- package/dist/assets/{ChartArea2.e5eac93d.js → ChartArea2.37c40650.js} +1 -1
- package/dist/assets/{ChartBPMNFlow.4ee01002.js → ChartBPMNFlow.b66d6bad.js} +1 -1
- package/dist/assets/{ChartBar.b9ff195d.js → ChartBar.029b560b.js} +1 -1
- package/dist/assets/{ChartBullet.9458dd5d.js → ChartBullet.3904954d.js} +1 -1
- package/dist/assets/{ChartDoughnut.2b489405.js → ChartDoughnut.0266fc12.js} +1 -1
- package/dist/assets/{ChartFlow.e4c7ca12.js → ChartFlow.dddf651d.js} +1 -1
- package/dist/assets/{ChartGantt.8a6f24b1.js → ChartGantt.e77088ee.js} +1 -1
- package/dist/assets/{ChartOrg.8e0b53ac.js → ChartOrg.ad40ccb4.js} +1 -1
- package/dist/assets/{ChartPie.ba2dd3f0.js → ChartPie.8ceb30a9.js} +1 -1
- package/dist/assets/{CodePlaceholder.94e8e64e.js → CodePlaceholder.4e261fbc.js} +1 -1
- package/dist/assets/{Company.b367b141.js → Company.5fee3c89.js} +1 -1
- package/dist/assets/{Components.a5a28858.js → Components.af3cd8d2.js} +1 -1
- package/dist/assets/{Connection.0e3380e0.js → Connection.18f64904.js} +1 -1
- package/dist/assets/{EmptyCalendar.05ebfcd0.js → EmptyCalendar.b9d6292c.js} +1 -1
- package/dist/assets/{EmptyList.4f1dffd8.js → EmptyList.37984127.js} +1 -1
- package/dist/assets/{EmptyPlanningCalendar.d3ce99a7.js → EmptyPlanningCalendar.3b517245.js} +1 -1
- package/dist/assets/{ErrorScreen.76a8d6d7.js → ErrorScreen.2cbabea0.js} +1 -1
- package/dist/assets/{ExternalLink.6faa7e8c.js → ExternalLink.82648410.js} +1 -1
- package/dist/assets/{FaceID.a0d65f91.js → FaceID.987062c7.js} +1 -1
- package/dist/assets/{FilterTable.c1a374cc.js → FilterTable.3d65c224.js} +1 -1
- package/dist/assets/{Fingerprint.b942472b.js → Fingerprint.963a73c5.js} +1 -1
- package/dist/assets/{GroupTable.30cad174.js → GroupTable.b3f7ca19.js} +1 -1
- package/dist/assets/{Lock.3d66b4df.js → Lock.19a2e57f.js} +1 -1
- package/dist/assets/{Mission.c5c8c308.js → Mission.f2ca8f3c.js} +1 -1
- package/dist/assets/{NoActivities.9e825452.js → NoActivities.fa70f44e.js} +1 -1
- package/dist/assets/{NoApplications.00651e4d.js → NoApplications.c46e2c4a.js} +1 -1
- package/dist/assets/{NoData.ab8d449e.js → NoData.dffb27db.js} +1 -1
- package/dist/assets/{NoEntries.7844dc13.js → NoEntries.90e5f217.js} +1 -1
- package/dist/assets/{NoFilterResults.4658936f.js → NoFilterResults.198eca38.js} +1 -1
- package/dist/assets/{NoFlows.f2bfa19a.js → NoFlows.f0f6eab2.js} +1 -1
- package/dist/assets/{NoMail.ab618a7a.js → NoMail.114c6bb3.js} +1 -1
- package/dist/assets/{NoMail_v1.467894ba.js → NoMail_v1.d8801574.js} +1 -1
- package/dist/assets/{NoNotifications.c73219e6.js → NoNotifications.802753ac.js} +1 -1
- package/dist/assets/{NoSavedItems.1c65783f.js → NoSavedItems.2ff23ae7.js} +1 -1
- package/dist/assets/{NoSavedItems_v1.3d73b0be.js → NoSavedItems_v1.6c33b3e8.js} +1 -1
- package/dist/assets/{NoSearchResults.6244134c.js → NoSearchResults.fbda1574.js} +1 -1
- package/dist/assets/{NoTasks.43acb013.js → NoTasks.17ffd1e7.js} +1 -1
- package/dist/assets/{NoTasks_v1.6fd13753.js → NoTasks_v1.7a8c77c8.js} +1 -1
- package/dist/assets/{NoUsers.84789cb7.js → NoUsers.d1576efa.js} +1 -1
- package/dist/assets/{PageNotFound.1723a0d9.js → PageNotFound.ea74d121.js} +1 -1
- package/dist/assets/{Radar.42b57e60.js → Radar.c1aac31b.js} +1 -1
- package/dist/assets/{ReloadScreen.02435eb9.js → ReloadScreen.a8b2b253.js} +1 -1
- package/dist/assets/{ResizeColumn.210743d2.js → ResizeColumn.8899d9c1.js} +1 -1
- package/dist/assets/{SearchEarth.46446ffa.js → SearchEarth.cc257ef1.js} +1 -1
- package/dist/assets/{SearchFolder.d2aa935b.js → SearchFolder.351f451f.js} +1 -1
- package/dist/assets/{Secrets.0f54b37c.js → Secrets.7129217e.js} +1 -1
- package/dist/assets/{Services.2ae75436.js → Services.13233f44.js} +1 -1
- package/dist/assets/{SessionExpired.2fad89c5.js → SessionExpired.4f80d36c.js} +1 -1
- package/dist/assets/{SessionExpiring.61d3fc1f.js → SessionExpiring.85576a93.js} +1 -1
- package/dist/assets/{SimpleBalloon.40b2b3d6.js → SimpleBalloon.b72ff8e4.js} +1 -1
- package/dist/assets/{SimpleBell.880a178d.js → SimpleBell.2d47a1a6.js} +1 -1
- package/dist/assets/{SimpleCalendar.776609c7.js → SimpleCalendar.4278bcde.js} +1 -1
- package/dist/assets/{SimpleCheckMark.d802c954.js → SimpleCheckMark.40bdd115.js} +1 -1
- package/dist/assets/{SimpleConnection.684ec9f6.js → SimpleConnection.cdd46b62.js} +1 -1
- package/dist/assets/{SimpleEmptyDoc.d47b21eb.js → SimpleEmptyDoc.632818f6.js} +1 -1
- package/dist/assets/{SimpleEmptyList.c6e428e6.js → SimpleEmptyList.03db0716.js} +1 -1
- package/dist/assets/{SimpleError.c60af702.js → SimpleError.18660b33.js} +1 -1
- package/dist/assets/{SimpleMagnifier.2090738a.js → SimpleMagnifier.6edd1611.js} +1 -1
- package/dist/assets/{SimpleMail.ba34adf7.js → SimpleMail.20217019.js} +1 -1
- package/dist/assets/{SimpleNoSavedItems.2363d3d3.js → SimpleNoSavedItems.a51282df.js} +1 -1
- package/dist/assets/{SimpleNotFoundMagnifier.87b8df3b.js → SimpleNotFoundMagnifier.c0d99f6b.js} +1 -1
- package/dist/assets/{SimpleReload.8f8d8518.js → SimpleReload.273a01c6.js} +1 -1
- package/dist/assets/{SimpleTask.fb32343c.js → SimpleTask.b1ce6c5c.js} +1 -1
- package/dist/assets/{SleepingBell.af45e043.js → SleepingBell.0614098e.js} +1 -1
- package/dist/assets/{SortColumn.7943b070.js → SortColumn.839a9207.js} +1 -1
- package/dist/assets/{Success.f81517eb.js → Success.5d008401.js} +1 -1
- package/dist/assets/{SuccessBalloon.8aa70886.js → SuccessBalloon.fc0f73d3.js} +1 -1
- package/dist/assets/{SuccessCheckMark.9e6bd8db.js → SuccessCheckMark.dc899de4.js} +1 -1
- package/dist/assets/{SuccessHighFive.065142df.js → SuccessHighFive.b4b8b363.js} +1 -1
- package/dist/assets/{SuccessScreen.75b0bf38.js → SuccessScreen.d650f222.js} +1 -1
- package/dist/assets/{SuccessfulAuth.ffdb478f.js → SuccessfulAuth.eed4cccb.js} +1 -1
- package/dist/assets/{Systems.b11a24c8.js → Systems.5d19c5a7.js} +1 -1
- package/dist/assets/{Teams.f03ef3ad.js → Teams.fba6ec80.js} +1 -1
- package/dist/assets/{Tent.25751bd5.js → Tent.05104a22.js} +1 -1
- package/dist/assets/{Tools.105970f3.js → Tools.b8d019ff.js} +1 -1
- package/dist/assets/{UnableToLoad.f20d5247.js → UnableToLoad.36959711.js} +1 -1
- package/dist/assets/{UnableToLoad.4de4df9c.js → UnableToLoad.c4dc754c.js} +1 -1
- package/dist/assets/{UnableToLoadImage.05f55727.js → UnableToLoadImage.93216556.js} +1 -1
- package/dist/assets/{UnableToUpload.94a9996b.js → UnableToUpload.b2ee4514.js} +1 -1
- package/dist/assets/{Unlock.61642965.js → Unlock.8b9a4fff.js} +1 -1
- package/dist/assets/{UnsuccessfulAuth.df26cafc.js → UnsuccessfulAuth.b70b66c5.js} +1 -1
- package/dist/assets/{UploadCollection.16113a6b.js → UploadCollection.cc2f2b30.js} +1 -1
- package/dist/assets/{User2.7266a50e.js → User2.15031d00.js} +1 -1
- package/dist/assets/test/pages/Bar.html.a5046c13.css +1 -0
- package/dist/assets/test/pages/BarcodeScannerDialog.html.b8919118.css +1 -0
- package/dist/assets/test/pages/Components.html.b41617c5.css +1 -0
- package/dist/assets/test/pages/DynamicSideContent.html.9b81aa24.css +1 -0
- package/dist/assets/test/pages/FCL.html.6763e066.css +1 -0
- package/dist/assets/test/pages/FCLApp.html.4d2da1a7.css +1 -0
- package/dist/assets/test/pages/FCLCustom.html.1af2df31.css +1 -0
- package/dist/assets/test/pages/IllustratedMessage.html.ebec5a1c.css +1 -0
- package/dist/assets/test/pages/MediaGallery.html.dee36218.css +1 -0
- package/dist/assets/test/pages/NotificationListGroupItem.html.5c7fb00c.css +1 -0
- package/dist/assets/test/pages/NotificationListItem.html.01df347d.css +1 -0
- package/dist/assets/test/pages/NotificationList_test_page.html.883d5b51.css +1 -0
- package/dist/assets/test/pages/Page.html.b165889d.css +1 -0
- package/dist/assets/test/pages/ProductSwitch.html.6253dac2.css +1 -0
- package/dist/assets/test/pages/ProductSwitchItem.html.51a96d28.css +1 -0
- package/dist/assets/test/pages/ShellBar.html.a08df365.css +1 -0
- package/dist/assets/test/pages/SideNavigation.html.835d71ad.css +1 -0
- package/dist/assets/test/pages/Timeline.html.aa1e8833.css +1 -0
- package/dist/assets/test/pages/UploadCollection.html.078191be.css +1 -0
- package/dist/assets/test/pages/UploadCollection.html.86a22ac1.js +1 -0
- package/dist/assets/test/pages/ViewSettingsDialog.html.1d108f2f.css +1 -0
- package/dist/assets/test/pages/Wizard.html.929fda0f.css +1 -0
- package/dist/assets/test/pages/Wizard_test.html.3d4fc1a9.css +1 -0
- package/dist/assets/test/pages/Wizard_test_mobile.html.9216347a.css +1 -0
- package/dist/test/pages/Bar.html +88 -0
- package/dist/test/pages/BarcodeScannerDialog.html +51 -0
- package/dist/test/pages/Components.html +29 -0
- package/dist/test/pages/DynamicSideContent.html +134 -0
- package/dist/test/pages/F6TestPage.html +475 -0
- package/dist/test/pages/F6TestPage_2.html +43 -0
- package/dist/test/pages/FCL.html +965 -0
- package/dist/test/pages/FCLApp.html +238 -0
- package/dist/test/pages/FCLCustom.html +293 -0
- package/dist/test/pages/IllustratedMessage.html +174 -0
- package/dist/test/pages/MediaGallery.html +278 -0
- package/dist/test/pages/NotificationListGroupItem.html +315 -0
- package/dist/test/pages/NotificationListItem.html +277 -0
- package/dist/test/pages/NotificationList_test_page.html +195 -0
- package/dist/test/pages/Page.html +67 -0
- package/dist/test/pages/ProductSwitch.html +67 -0
- package/dist/test/pages/ProductSwitchItem.html +32 -0
- package/dist/test/pages/ShellBar.html +319 -0
- package/dist/test/pages/SideNavigation.html +115 -0
- package/dist/test/pages/Timeline.html +146 -0
- package/dist/test/pages/UploadCollection.html +208 -0
- package/dist/test/pages/ViewSettingsDialog.html +128 -0
- package/dist/test/pages/Wizard.html +774 -0
- package/dist/test/pages/Wizard_test.html +382 -0
- package/dist/test/pages/Wizard_test_mobile.html +104 -0
- package/package.json +9 -8
- package/src/SideNavigation.js +8 -8
|
@@ -0,0 +1,278 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
6
|
+
<title>ui5-media-gallery</title>
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
<script type="module" crossorigin src="/assets/bundle.esm.6bf68e9d.js"></script>
|
|
15
|
+
<link rel="stylesheet" href="/assets/test/pages/MediaGallery.html.dee36218.css">
|
|
16
|
+
</head>
|
|
17
|
+
|
|
18
|
+
<body style="background-color: var(--sapBackgroundColor);">
|
|
19
|
+
<div class="controls layout">
|
|
20
|
+
<ui5-label>Switch theme: </ui5-label>
|
|
21
|
+
<ui5-select id="selectTheme">
|
|
22
|
+
<ui5-option value="sap_fiori_3">Fiori 3</ui5-option>
|
|
23
|
+
<ui5-option value="sap_fiori_3_dark">Fiori 3 Dark</ui5-option>
|
|
24
|
+
<ui5-option value="sap_fiori_3_hcb">Fiori 3 HCB</ui5-option>
|
|
25
|
+
<ui5-option value="sap_fiori_3_hcw">Fiori 3 HCW</ui5-option>
|
|
26
|
+
<ui5-option value="sap_belize">Belize</ui5-option>
|
|
27
|
+
<ui5-option value="sap_belize_hcb">Belize HCB</ui5-option>
|
|
28
|
+
<ui5-option value="sap_belize_hcw">Belize HCW</ui5-option>
|
|
29
|
+
<ui5-option value="sap_horizon">Horizon</ui5-option>
|
|
30
|
+
</ui5-select>
|
|
31
|
+
</div>
|
|
32
|
+
|
|
33
|
+
<div class="controls layout">
|
|
34
|
+
<ui5-title level="H1">Layout preferences:</ui5-title>
|
|
35
|
+
|
|
36
|
+
<div>
|
|
37
|
+
<ui5-label>Layout: </ui5-label>
|
|
38
|
+
<ui5-select id="layout">
|
|
39
|
+
<ui5-option selected>Auto</ui5-option>
|
|
40
|
+
<ui5-option>Vertical</ui5-option>
|
|
41
|
+
<ui5-option>Horizontal</ui5-option>
|
|
42
|
+
</ui5-select>
|
|
43
|
+
</div>
|
|
44
|
+
<ui5-title level="H3">Thumbnails menu:</ui5-title>
|
|
45
|
+
<div>
|
|
46
|
+
<ui5-checkbox id="selectMenuDesign" text="Show all thumbnails"></ui5-checkbox>
|
|
47
|
+
</div>
|
|
48
|
+
<div>
|
|
49
|
+
<ui5-label>Menu horizontal align: </ui5-label>
|
|
50
|
+
<ui5-select id="selectHorizontalAlign">
|
|
51
|
+
<ui5-option>Right</ui5-option>
|
|
52
|
+
<ui5-option selected>Left</ui5-option>
|
|
53
|
+
</ui5-select>
|
|
54
|
+
</div>
|
|
55
|
+
<div>
|
|
56
|
+
<ui5-label>Menu vertical align: </ui5-label>
|
|
57
|
+
<ui5-select id="selectVerticalAlign">
|
|
58
|
+
<ui5-option>Top</ui5-option>
|
|
59
|
+
<ui5-option selected>Bottom</ui5-option>
|
|
60
|
+
</ui5-select>
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
<div class="content">
|
|
64
|
+
<ui5-media-gallery id="mGallery1">
|
|
65
|
+
<ui5-media-gallery-item>
|
|
66
|
+
<img src="/assets/HT-1000.59a0ea5a.jpg">
|
|
67
|
+
<img src="/assets/HT-1000.59a0ea5a.jpg" slot="thumbnail">
|
|
68
|
+
</ui5-media-gallery-item>
|
|
69
|
+
<ui5-media-gallery-item selected>
|
|
70
|
+
<img src="/assets/HT-1010.7b05e4f5.jpg">
|
|
71
|
+
<img src="/assets/HT-1010.7b05e4f5.jpg" slot="thumbnail">
|
|
72
|
+
</ui5-media-gallery-item>
|
|
73
|
+
<ui5-media-gallery-item>
|
|
74
|
+
<img src="/assets/HT-1022.6fa171f0.jpg">
|
|
75
|
+
<img src="/assets/HT-1022.6fa171f0.jpg" slot="thumbnail">
|
|
76
|
+
</ui5-media-gallery-item>
|
|
77
|
+
<ui5-media-gallery-item layout="Wide">
|
|
78
|
+
<iframe src="https://www.youtube.com/embed/GxGZG2fv6Aw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
|
79
|
+
<img src="data:image/jpeg;base64,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" slot="thumbnail">
|
|
80
|
+
</ui5-media-gallery-item>
|
|
81
|
+
<ui5-media-gallery-item layout="Wide">
|
|
82
|
+
<iframe allowfullscreen src="https://www.youtube.com/embed/r2-XOMtsbT0?rel=0&showinfo=0&autoplay=1"></iframe>
|
|
83
|
+
<img src="https://www.plustechnologies.com/wp-content/uploads/2019/03/SAP.jpg" slot="thumbnail">
|
|
84
|
+
</ui5-media-gallery-item>
|
|
85
|
+
<ui5-media-gallery-item>
|
|
86
|
+
<img src="/assets/HT-1030.7ead454a.jpg">
|
|
87
|
+
<img src="/assets/HT-1030.7ead454a.jpg" slot="thumbnail">
|
|
88
|
+
</ui5-media-gallery-item>
|
|
89
|
+
<ui5-media-gallery-item>
|
|
90
|
+
<img src="/assets/Overlayed mask.eb7a3287.png">
|
|
91
|
+
<img src="/assets/Overlayed mask.eb7a3287.png" slot="thumbnail">
|
|
92
|
+
</ui5-media-gallery-item>
|
|
93
|
+
<ui5-media-gallery-item>
|
|
94
|
+
<img src="/assets/HT-2002.0e49d270.jpg">
|
|
95
|
+
<img src="/assets/HT-2002.0e49d270.jpg" slot="thumbnail">
|
|
96
|
+
</ui5-media-gallery-item>
|
|
97
|
+
<ui5-media-gallery-item>
|
|
98
|
+
<img src="/assets/HT-2026.8d3d321d.jpg">
|
|
99
|
+
<img src="/assets/HT-2026.8d3d321d.jpg" slot="thumbnail">
|
|
100
|
+
</ui5-media-gallery-item>
|
|
101
|
+
</ui5-media-gallery>
|
|
102
|
+
</div>
|
|
103
|
+
<div id="events" class="controls events">
|
|
104
|
+
<ui5-title level="H1">Events:</ui5-title>
|
|
105
|
+
<div>
|
|
106
|
+
<ui5-checkbox id="isDisplayAreaInteractive" text="Interactive display area"></ui5-checkbox>
|
|
107
|
+
</div>
|
|
108
|
+
<div>
|
|
109
|
+
<ui5-label>Last selected index: </ui5-label>
|
|
110
|
+
<ui5-label class="resultLabel" id="selectedIndexLabel"></ui5-label>
|
|
111
|
+
</div>
|
|
112
|
+
<div>
|
|
113
|
+
<ui5-label>Call count "selection-change": </ui5-label>
|
|
114
|
+
<ui5-label class="resultLabel" id="selectionChangeCallCountLabel"></ui5-label>
|
|
115
|
+
<button id="clearBtn">Clear</button>
|
|
116
|
+
</div>
|
|
117
|
+
<div>
|
|
118
|
+
<ui5-label>Call count "overflow-click": </ui5-label>
|
|
119
|
+
<ui5-label class="resultLabel" id="overflowClickCallCountLabel"></ui5-label>
|
|
120
|
+
</div>
|
|
121
|
+
<div>
|
|
122
|
+
<ui5-label>Call count "display-area-click": </ui5-label>
|
|
123
|
+
<ui5-label class="resultLabel" id="displayAreaClickCallCountLabel"></ui5-label>
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
<div class="content">
|
|
127
|
+
<ui5-media-gallery id="mGallery2">
|
|
128
|
+
<ui5-media-gallery-item>
|
|
129
|
+
<img src="/assets/HT-1000.59a0ea5a.jpg">
|
|
130
|
+
<img src="/assets/HT-1000.59a0ea5a.jpg" slot="thumbnail">
|
|
131
|
+
</ui5-media-gallery-item>
|
|
132
|
+
<ui5-media-gallery-item>
|
|
133
|
+
<img src="/assets/HT-1010.7b05e4f5.jpg">
|
|
134
|
+
<img src="/assets/HT-1010.7b05e4f5.jpg" slot="thumbnail">
|
|
135
|
+
</ui5-media-gallery-item>
|
|
136
|
+
<ui5-media-gallery-item>
|
|
137
|
+
<img src="/assets/HT-1022.6fa171f0.jpg">
|
|
138
|
+
<img src="/assets/HT-1022.6fa171f0.jpg" slot="thumbnail">
|
|
139
|
+
</ui5-media-gallery-item>
|
|
140
|
+
<ui5-media-gallery-item layout="Wide">
|
|
141
|
+
<iframe src="https://www.youtube.com/embed/GxGZG2fv6Aw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
|
142
|
+
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBYWFRgSFRUZGBgYGBgYGBgcHBgaGBgYGBgZGRgYGBgcIS4lHB4rHxgYJjgmKy8xNTU1GiQ7QDszPy40NTEBDAwMEA8QGBESHzcrISQ0NjQ2NDQ0NzE0NDQxPzoxNDQ3NDQ2MTQ0NzExNjQ0NDQxNDQ0MTY0NDQ0NDQ0NDQxMf/AABEIAKgBLAMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAAAAgEDBQQGB//EAD0QAAIBAgMCDAMGBgMBAQAAAAECAAMRBBIhMVEFBhMiQVJTYYGRodFxovAWMkKSseEUFVRigsEjcvHCsv/EABkBAQEBAQEBAAAAAAAAAAAAAAABAgMEBf/EACURAQACAgICAQQDAQAAAAAAAAABEQISA1ETITEEQWGBIjKhI//aAAwDAQACEQMRAD8A+MwhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCB9OXgDDdivze8ccX8N2K/N7zQURwJ9DTHp49su2d9n8N2C/N7xhxdw3YJ83vNIRxGmPRtl2zRxdwvYL83vGHFvC9gvze80hHEmmPRtl2zBxbwnYL83vHHFrCdgvze80hHWNMejbLtmjizg+wX5veH2Zwn9Onze80wY15Ncel2y7ZX2Ywn9Onze8PszhP6dPm95rCEaY9JtPbJ+zGE/p0+b3k/ZjCf06fN7zWk3jTHpdp7ZI4sYPsF+b3k/ZjB/06/N7zXheTTHo2ntkfZfB/wBOvze8Psvg/wCnX5vea95IjTHo2ntkfZfB9gvze8Psvg+wX5vebEJNcejae2P9l8H2C/N7w+y+D7Bfm95r3gTLpj0m09sY8V8J/Tp83vEbixhOwX5vebZMRhLrj0bZdsQ8WsJ2CfN7xDxbwvYJ83vNl4pl1x6Nsu2MeLmF7Bfm94p4u4XsF+b3mwYhjTHo2y7ZB4u4bsF+b3ini7huwX5vebBEUiNMejbLtjni9huxX5veKeAMN2K/N7zXIlZEumPSbZdso8AYfsV+b3iHgHD9ivze81yIhEumPRtl2yTwFh+yX194p4Dw/ZL6+81SIhEaY9G2XbKPAmH7JfX3kfyWh2S+vvNMiRGmPS7Zdu4RxFUSwLCJEYQCyQIsTJEgCMBAYRhIAjWksSDC8AIWgTeTeQBJtAm8m8W0kQHBk3kARgJASVkWjAQGikRrQtItEIkWlhi2iyiwMcJLDRiynK6yplnSyyspLZTmIikS9lilZbRzkSCJeUiFYspSREKy4rIlsVqsVwJYRFKRY5mEQy9klbLLYpMS0tYRLRY0wsaSIBZi1pAEYCMFjhIsogEcLJCxwsllFAkxwsYJFlKxGtLAkkLJa0rAkx8spr6EDfN4RGU1LlzZZY4TOPyfSAImhhuLuIcXyqoPWNj5AEjxtGr8WsQouFVvg2vkwE3/AMrq/wDXl3+pq9f8Z4YSc4nNVDKSrAqw0IIIIPwm0OLWI3J+b9pcsePH5lMeXnyvWLr8M7OIZxOaqCrFG0KkqRuINjNr7M4jcn5v2jLHjx+ZMeXnyvWLr8M7lBJ5QTsq8XcSovkDf9WW/raZNQMpKsCrDaCCCPiDGOPHl/WbTPm58f7RX6dJcQzicvKR6Klj3dJmp48Yi5TD6jmzmodaODsloMQLbQQM801M+n0MIyiI2+Uuo2iVMseQYaUuJUVnQREZZLFDxDLysrKy2lKWEQidBSVlZbKVSbRisiLKKUlT0jul95KtFlOI04vJzRygycgjZAqRxT+tIiPLOUmLdahISMqRQ8dXMWUYJGCQDyQ8WUAkYJDNJzSWUkJG5OQGjB4soBJo8XsMrYkFh91Cyj+7MBfwuZn5px1+EWoVkqqdQDodjAnVT3SxE5XEfeHPOYiImfiJh77hzGVqaBqNPOb67TlFtuUanwnm6XHRxcPSW9jbKSLG2l1N9L981ODuOGHqABzyTdIb7vgw0t8bTSx3BtHELdlVrjR1tm7irD/yc8dcPXJj+2s4yz98eX6eH4vUWr4lS2tiajHfY3HmxE+jZxcLfUgkDpsLAn1HnMPizwIcPyuY3LPZTvRRzT3E3N/hOPF4uqOEUtTqGmoFMsFbKc4uWzWtYNkuf7ZrlnyZTXxEJw4+LCNo9zLJ454Xk6+cDm1Bm/yXRv8A5PjPeYmplRm6qk+QJmHx0wWfDlwOdTOcfAfe9NfCb1VAylTsIIPwIsZnPPbDC/tbXHx658lfepeZ4B40NXqCk6BSwJBBNrgXsQe4HWJx5w65Eq21DZCf7SrHX4EepmxwfwLh6BLouU2sWLMSB8WOk87xlx64hlo0zdEbM7jYWsQEU9OhNzs1E1hlHljLCKiGMscvFOOc3M/DzuEw7OdPujaf9DvmotLKLAWEdECgKNAOiTedc+Scp/DPFwY4R+VeWBSPeBfvnO3WlRWKVlmeQzRZSoiKRLS0gtLZSgiKRLmeKWiylBikS/NEdospSRKyJcWiMZbKUkQjkxCYtKAMnPIhJZSj+Oo9sn5l94HhCl2qfmWeYFP4SRTPd6y0zb0v8yp9on5hGHCVPtE/MJ5paR7o3J94il2emHCdPtE8xGXhOn2iec8yKfeIwpHul1g2el/mlPtF84w4Tp9ovrPNrSO/68o3Jn6/8jWDZ6QcJU+0X1jjhKn2izzXJd8nk++NYNnpv5inXXzlvBlJK+JpqzJlALMCRzrHRRfaSbabrzywSQ5tNYYXNRLOWXr2+pYriRh2bMrOl/wqVK+GYEjzm1wfg0w9JaSk5QbAsRcljfu1JOwT5BQ4bxCjKteoo3Bmt4C8qrcJ1mYO1V2ZdVYsxKnepvp4Rl9NnlFZZelx5cMZvGPb7bisQqI1RtiKzH4KLn9J50cecLa//ID1cmvobes+aVOFKzAq1aoynQgu5BG4gnWc+aXH6OIj+UmX1E/aH2/BYpK9Jai6pUXYdtjoQRv2gx+ET/xVP+j/AP5M+K0eEqqDKlV1UbFV3UC+psAZ34DE16h59eqE2Mc7m9/wjW1zOeX0uv8AK/TUc9+q9pwGFqV9pYoNpJJHwF+mb9PCsoCqtgNg0l9LEU0UIoyqNALW2C52/qZDcJJvPhl95M+Scp+PRhxxjH5VGk+79JU+YbZa/CaEGwY/l10J013Azlr41Tbmm+vSCdoF7DXpmYmW6hDVwOmQcUN/6zibFKdhF/UDd3dE4qmIvv3d36zVMTLUfHp1h6+0T+Zp1x6+0wa1Q/v9GcbMTNawm0vUnhSn1x6xf5pS66zyLgypj3/pGsG0vYnhOn11inhKn118544oe6IUP1aNYNns/wCZU+uvmIp4Rp9dfMTxZQ/RikGNYNnszwgnXT8wh/Gp10/MPeeJIO+I15KNnuP4un2ifmEYYqn01E/MJ4K5iFj3xRb6IMVS7RPzCH8XS66fmX3nznOfoxcxii5bgv8ARjW+rygMOt6iSWXrypS0SxT3/pOZWXr+pkiqvQx/Mf0vBTqDfWkYPOUVAdjere8tWou8n83vCOhX7vUe8YHu/SUhlOzXzMkEfQPvAvzHdDNKgbbfrwklr/uIF6t3SSwPRKh4eQjAn6tFh7L9CSoX6H7Rc53Rlc7gJdsuyoXIibh5ftOj+GTXRdPXW2hGk5VfTYL+k66TrbUEadFh8QdCddB4yb5drEQvGFpdQE9Ootpttbo0Os60RVsoQINbc47B0G5039HjOZOSuwzGxBtp3grfUX/ae5V3/wCILVRaS0KTPSYBqhQffJXKTbLYadN5zzzn7umOMPJquwAAXOUHNmW9rEA20NrEeEgC4X8O0g3XLc63ItpoBtHrNVsFRY0cqMFxDkgWHNTlAoAA1Vcuu4dN47cFYdeTVuVBqVKiArbQo+QXJOzS9rG+szsurDqqAl8wa+2xPNNrG9u6+um0ThdgFvYHYQbsND0WB3keXfNvDcFIa1SiWZcheyqEQ1GUrlVGJyAm17HXm9151UsFcYinaugLYUMrLTBIeoy2BUG4U3NwfOa2pNXk61M9IynU6kk23WJve4PmNNk5nOyx2gbATtv6z1GK4Nwx5fn174Zlz6IQwZmUKgJuCCLZmPTe1tlVbgTDqtSsz1VprQw9dRzC4FZnUqwta/NGvf02l3hnWXlKlYbL2+tsod+8+U9zheC1FGscPULU8TQTky9swblghDWFrXI19pwcNcV1pUqrqaoaiAS78lydUXAbIASykXuM220sZxZOMvIE93oYhbXpkNfbm/Q/CVs39+nhNMG5T4/XjK3fffyilr7Gv8QIuY7/AEECWf4+UQn4+Qks3x8ADE5T6tFtIJ+PpEcjugzt0XiO7bbHzPvBRWcb/wBIpbvHywzN1G87/wC5Bd+ofSS1oeEm8TO/VNv8ZHKt1W9PeLKaQqjv9I3Kjv8ASV8om/0hnTrDy/aLSlgqd36e8nlDu9B7xBUTrRhUXrfrBRuUPw8FjKRu9F9tIoqjpJPhLVrL/dAdSO/zH+hGzjv/ANSkON7ecsFRd/naBYrfVzHFe20geMoFQbxBnXcJUp0mvutAYnvA8P8Ac5hVA6F8/wBpJqjaQPAmQp2JW01IPh+kdaoJ18pxcou2w0Fzr32lqONTZQVsCL2Ykm1gp1PwhaddKqNgNhvtOlHGljckDXZY7r/7nFWzhshH3dPvAgDaQGByjb4XmhgcKXXMite2ZecNRmKabOm3wt8JJlYxlfhuioVGUA/5HUDS99pE3l4YCtTqc0NTpogIGbMgBDIQG0uLanTadNJlfyR1N9L6EI5AvvBs19pA8tk76PBfXVdedlBF1fMvN2aLp62+OJmJbiJhdhuG3AREooVRsysSW5MM9ypFwD+IDpHxlWL4VZgj8koai71BmUm+d8z2UDTn63v0DXWSeDUQEEd4UEDUFmXMdL6i3T0bpD8F09i2Y5tVJU6XbYDqNl7X/B8ZPR/JwJwlnqVKj0EqBwc6shtlz5jbn81ubpvtL6nGhhzRTphQlIBbFlU0TyiKLnZmPeRfunDiaDC/3gLhbAc8oQC6so2OCt7HQjXcTi4ivzxkAIAXaNCNozA67CFI7jvmqiWbmGnW4wOwr2SmGxDKWIzfhYtYagjU9N/9ztwfGK1CslRKTsKOGo0kK1CtRKbuWz2JsQHJvcajpnmqWKdH0sbXIKtYixN8pOw6X7xvvKMVjHzXOhI1Gy3da2nh4S6wly26/GbEEOqqiKUWmiKrBaSowcFDc3YnaTfYJz4rjEXbO2Cw5qFlZ3NM5mKkHUFrLmtziLXuZhGux118PGVGs23M3w/8jWC5XYis7MzBFXMzNlUWVcxvZR0AXsJWeU3D677xGqDpLRC43t5zSHOf+zylTh/7R4Q0PS3jaLk7/UwEYvsunhJ53SR4RSg6G9DDJvYesKjK+3NaQwbrHwHvJKL1h9eMrdF6T5QIZT129LxQx6xMYqu+4+H7yDk7/IyKV3bd6gxeWfvks6d0jOu6FdWYbhDON0qVY4t3SFJ5QD8N/CSKx6FPpBTAyoYVW3RgzRVbuj5j3D9YE2Y98BTPdJUtvliud8IhaR2x+TPTJQxswgKtP4SxVG8SFAPRJCDeID0gBzgwFjoem43e8AoJvm/eIyDyjimPgYHbRqoLcwGw2MTbSxO7TRvPfrOg4gMWa4B5oAA2aHUdC6kWA/1OAYY2BINje2h1sbE+ek6MNhSxA1sSbGx1IW4Gm3o2b5FalHHNplzHLmCgG4zsLBtmp5pb4j437l4RrOCVUDIobmjU5xkudd922TLwwdM7BlAprfW5GYrlW29rEtu1v0zQw2LdDSKZDlQISvQGsxBJOpsm22kkrC3JUfJTZSmZVDDKwJVWBzG+thlHO323y98MT/zFeZVZr86zZDd2uTsJynTvA6TK8Rwi+Y1CRzkdAV1FgGe4YtuDftskNwlZ0zEOosSuhUhlTJZRuzC3wMntVRoqb5S5Co75yLsjqAGDLt+5YFT07JzV3eoFKujMqE5gLOUVls6ta552m/m95E1cS1LOKYZ0qOGuy6gvdsqvb7y2LjUbAN0zcNwk5polFA5VDnXKCwyMuckadBA785OlotKYmJxpLHMik2sxIFybk5tLWJB6PaJVpWXNr0dVl5w01BuNQejpt0G6Y/DMP+Qc9LI2a1vvjYRtFmV1/wATKeFMSge9G6oyqStybNl566km177d82lBiVFyQCdQNdR0G/T0+m3W1DVybA2trb/2czVrkFySNpsRfXbbaL9MoeptA110Oy/h0RaU63c30I8REao3QROUvvlWY74tad5ZrdHkIhfcbTgLmKS26LKdrE7x4SoVAfx2PiPQziLkRTXktdXY4B/FeLyC9b/c5RU7o3jFlLxhh1pBojefCc7Dvleo6ZLWnRkXrecmw3yjlDE5U/QktalpCvS649Y38RS649Z5+E5+SW9IeiGKpdf9ZH8XS6w9Z56EeSTxw9D/ABlPrD1guMp9Yes89CPJJ44ejOOTrD1gManXX1nnIR5JTxw9KuPTrj1h/MKfWHrPNQjySeOHpTjqZ/GPWA4QQahx6+081CPJK+OHqFx9LLcvzr6DWwA6Tca/D4915pcJU1N84vfbr57J5aEeSTSHuE4xqBlzr9zIDY6KdDpbbYW8T0m8vrcZle2esAADYKoAuVyg6DdbXoyi08BCXySaQ98OFsMzqrVRk6TZtSwGY2A0F/QTtocYcKrsy1LZkABIYgOxGdrNs0LC+5jPmkJPJJpD6tjOMeDWkiJUUsjhjbMFI1zdGtwbbOkzkxXDmGZQi10UB2e4z5tWZtDl07v+3RPmkJN5XSH0jg/hzDq4q1MQCxdWsA5YEXCsTbozOLa6ETmo8O00cPTrhWzNcgGxVmNwbj7ugP8Ake6eAhHklNIe2xPDFPO5StzH5zJzrEkqxVgRtzKNRuuLTlxOLw5YsrgA6gWbTZofeeThL5JNIemr4uhc5W0NjrtGmo0H1YbJQ9WloQ4O2410t4dIt67pgQjySaQ3WxFPrD1lfL0+sPWY0I8kmkNfl0B0Yesn+KTrTHhHkk0hqnErvEjlk3iZcJPJJpDV/iE3iI1VD0/rM2EvkldId/Krvkcss4YSbyaw7eUXfF5Qb5yQjeTWBCEJhoQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCB//2Q==" slot="thumbnail">
|
|
143
|
+
</ui5-media-gallery-item>
|
|
144
|
+
<ui5-media-gallery-item>
|
|
145
|
+
<img src="/assets/HT-2002.0e49d270.jpg">
|
|
146
|
+
<img src="/assets/HT-2002.0e49d270.jpg" slot="thumbnail">
|
|
147
|
+
</ui5-media-gallery-item>
|
|
148
|
+
<ui5-media-gallery-item>
|
|
149
|
+
<img src="/assets/HT-1030.7ead454a.jpg">
|
|
150
|
+
<img src="/assets/HT-1030.7ead454a.jpg" slot="thumbnail">
|
|
151
|
+
</ui5-media-gallery-item>
|
|
152
|
+
</ui5-media-gallery>
|
|
153
|
+
</div>
|
|
154
|
+
<div id="disableditems" class="controls">
|
|
155
|
+
<ui5-title level="H2">MediaGallery with disabled items:</ui5-title>
|
|
156
|
+
</div>
|
|
157
|
+
<div class="content">
|
|
158
|
+
<ui5-media-gallery>
|
|
159
|
+
<ui5-media-gallery-item disabled>
|
|
160
|
+
<img src="/assets/HT-1000.59a0ea5a.jpg">
|
|
161
|
+
<img src="/assets/HT-1000.59a0ea5a.jpg" slot="thumbnail">
|
|
162
|
+
</ui5-media-gallery-item>
|
|
163
|
+
<ui5-media-gallery-item>
|
|
164
|
+
<img src="/assets/HT-1010.7b05e4f5.jpg">
|
|
165
|
+
<img src="/assets/HT-1010.7b05e4f5.jpg" slot="thumbnail">
|
|
166
|
+
</ui5-media-gallery-item>
|
|
167
|
+
<ui5-media-gallery-item>
|
|
168
|
+
<img src="/assets/HT-1022.6fa171f0.jpg">
|
|
169
|
+
<img src="/assets/HT-1022.6fa171f0.jpg" slot="thumbnail">
|
|
170
|
+
</ui5-media-gallery-item>
|
|
171
|
+
<ui5-media-gallery-item layout="Wide">
|
|
172
|
+
<iframe src="https://www.youtube.com/embed/GxGZG2fv6Aw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
|
173
|
+
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBYWFRgSFRUZGBgYGBgYGBgcHBgaGBgYGBgZGRgYGBgcIS4lHB4rHxgYJjgmKy8xNTU1GiQ7QDszPy40NTEBDAwMEA8QGBESHzcrISQ0NjQ2NDQ0NzE0NDQxPzoxNDQ3NDQ2MTQ0NzExNjQ0NDQxNDQ0MTY0NDQ0NDQ0NDQxMf/AABEIAKgBLAMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAAAAgEDBQQGB//EAD0QAAIBAgMCDAMGBgMBAQAAAAECAAMRBBIhMVEFBhMiQVJTYYGRodFxovAWMkKSseEUFVRigsEjcvHCsv/EABkBAQEBAQEBAAAAAAAAAAAAAAABAgMEBf/EACURAQACAgICAQQDAQAAAAAAAAABEQISA1ETITEEQWGBIjKhI//aAAwDAQACEQMRAD8A+MwhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCB9OXgDDdivze8ccX8N2K/N7zQURwJ9DTHp49su2d9n8N2C/N7xhxdw3YJ83vNIRxGmPRtl2zRxdwvYL83vGHFvC9gvze80hHEmmPRtl2zBxbwnYL83vHHFrCdgvze80hHWNMejbLtmjizg+wX5veH2Zwn9Onze80wY15Ncel2y7ZX2Ywn9Onze8PszhP6dPm95rCEaY9JtPbJ+zGE/p0+b3k/ZjCf06fN7zWk3jTHpdp7ZI4sYPsF+b3k/ZjB/06/N7zXheTTHo2ntkfZfB/wBOvze8Psvg/wCnX5vea95IjTHo2ntkfZfB9gvze8Psvg+wX5vebEJNcejae2P9l8H2C/N7w+y+D7Bfm95r3gTLpj0m09sY8V8J/Tp83vEbixhOwX5vebZMRhLrj0bZdsQ8WsJ2CfN7xDxbwvYJ83vNl4pl1x6Nsu2MeLmF7Bfm94p4u4XsF+b3mwYhjTHo2y7ZB4u4bsF+b3ini7huwX5vebBEUiNMejbLtjni9huxX5veKeAMN2K/N7zXIlZEumPSbZdso8AYfsV+b3iHgHD9ivze81yIhEumPRtl2yTwFh+yX194p4Dw/ZL6+81SIhEaY9G2XbKPAmH7JfX3kfyWh2S+vvNMiRGmPS7Zdu4RxFUSwLCJEYQCyQIsTJEgCMBAYRhIAjWksSDC8AIWgTeTeQBJtAm8m8W0kQHBk3kARgJASVkWjAQGikRrQtItEIkWlhi2iyiwMcJLDRiynK6yplnSyyspLZTmIikS9lilZbRzkSCJeUiFYspSREKy4rIlsVqsVwJYRFKRY5mEQy9klbLLYpMS0tYRLRY0wsaSIBZi1pAEYCMFjhIsogEcLJCxwsllFAkxwsYJFlKxGtLAkkLJa0rAkx8spr6EDfN4RGU1LlzZZY4TOPyfSAImhhuLuIcXyqoPWNj5AEjxtGr8WsQouFVvg2vkwE3/AMrq/wDXl3+pq9f8Z4YSc4nNVDKSrAqw0IIIIPwm0OLWI3J+b9pcsePH5lMeXnyvWLr8M7OIZxOaqCrFG0KkqRuINjNr7M4jcn5v2jLHjx+ZMeXnyvWLr8M7lBJ5QTsq8XcSovkDf9WW/raZNQMpKsCrDaCCCPiDGOPHl/WbTPm58f7RX6dJcQzicvKR6Klj3dJmp48Yi5TD6jmzmodaODsloMQLbQQM801M+n0MIyiI2+Uuo2iVMseQYaUuJUVnQREZZLFDxDLysrKy2lKWEQidBSVlZbKVSbRisiLKKUlT0jul95KtFlOI04vJzRygycgjZAqRxT+tIiPLOUmLdahISMqRQ8dXMWUYJGCQDyQ8WUAkYJDNJzSWUkJG5OQGjB4soBJo8XsMrYkFh91Cyj+7MBfwuZn5px1+EWoVkqqdQDodjAnVT3SxE5XEfeHPOYiImfiJh77hzGVqaBqNPOb67TlFtuUanwnm6XHRxcPSW9jbKSLG2l1N9L981ODuOGHqABzyTdIb7vgw0t8bTSx3BtHELdlVrjR1tm7irD/yc8dcPXJj+2s4yz98eX6eH4vUWr4lS2tiajHfY3HmxE+jZxcLfUgkDpsLAn1HnMPizwIcPyuY3LPZTvRRzT3E3N/hOPF4uqOEUtTqGmoFMsFbKc4uWzWtYNkuf7ZrlnyZTXxEJw4+LCNo9zLJ454Xk6+cDm1Bm/yXRv8A5PjPeYmplRm6qk+QJmHx0wWfDlwOdTOcfAfe9NfCb1VAylTsIIPwIsZnPPbDC/tbXHx658lfepeZ4B40NXqCk6BSwJBBNrgXsQe4HWJx5w65Eq21DZCf7SrHX4EepmxwfwLh6BLouU2sWLMSB8WOk87xlx64hlo0zdEbM7jYWsQEU9OhNzs1E1hlHljLCKiGMscvFOOc3M/DzuEw7OdPujaf9DvmotLKLAWEdECgKNAOiTedc+Scp/DPFwY4R+VeWBSPeBfvnO3WlRWKVlmeQzRZSoiKRLS0gtLZSgiKRLmeKWiylBikS/NEdospSRKyJcWiMZbKUkQjkxCYtKAMnPIhJZSj+Oo9sn5l94HhCl2qfmWeYFP4SRTPd6y0zb0v8yp9on5hGHCVPtE/MJ5paR7o3J94il2emHCdPtE8xGXhOn2iec8yKfeIwpHul1g2el/mlPtF84w4Tp9ovrPNrSO/68o3Jn6/8jWDZ6QcJU+0X1jjhKn2izzXJd8nk++NYNnpv5inXXzlvBlJK+JpqzJlALMCRzrHRRfaSbabrzywSQ5tNYYXNRLOWXr2+pYriRh2bMrOl/wqVK+GYEjzm1wfg0w9JaSk5QbAsRcljfu1JOwT5BQ4bxCjKteoo3Bmt4C8qrcJ1mYO1V2ZdVYsxKnepvp4Rl9NnlFZZelx5cMZvGPb7bisQqI1RtiKzH4KLn9J50cecLa//ID1cmvobes+aVOFKzAq1aoynQgu5BG4gnWc+aXH6OIj+UmX1E/aH2/BYpK9Jai6pUXYdtjoQRv2gx+ET/xVP+j/AP5M+K0eEqqDKlV1UbFV3UC+psAZ34DE16h59eqE2Mc7m9/wjW1zOeX0uv8AK/TUc9+q9pwGFqV9pYoNpJJHwF+mb9PCsoCqtgNg0l9LEU0UIoyqNALW2C52/qZDcJJvPhl95M+Scp+PRhxxjH5VGk+79JU+YbZa/CaEGwY/l10J013Azlr41Tbmm+vSCdoF7DXpmYmW6hDVwOmQcUN/6zibFKdhF/UDd3dE4qmIvv3d36zVMTLUfHp1h6+0T+Zp1x6+0wa1Q/v9GcbMTNawm0vUnhSn1x6xf5pS66zyLgypj3/pGsG0vYnhOn11inhKn118544oe6IUP1aNYNns/wCZU+uvmIp4Rp9dfMTxZQ/RikGNYNnszwgnXT8wh/Gp10/MPeeJIO+I15KNnuP4un2ifmEYYqn01E/MJ4K5iFj3xRb6IMVS7RPzCH8XS66fmX3nznOfoxcxii5bgv8ARjW+rygMOt6iSWXrypS0SxT3/pOZWXr+pkiqvQx/Mf0vBTqDfWkYPOUVAdjere8tWou8n83vCOhX7vUe8YHu/SUhlOzXzMkEfQPvAvzHdDNKgbbfrwklr/uIF6t3SSwPRKh4eQjAn6tFh7L9CSoX6H7Rc53Rlc7gJdsuyoXIibh5ftOj+GTXRdPXW2hGk5VfTYL+k66TrbUEadFh8QdCddB4yb5drEQvGFpdQE9Ootpttbo0Os60RVsoQINbc47B0G5039HjOZOSuwzGxBtp3grfUX/ae5V3/wCILVRaS0KTPSYBqhQffJXKTbLYadN5zzzn7umOMPJquwAAXOUHNmW9rEA20NrEeEgC4X8O0g3XLc63ItpoBtHrNVsFRY0cqMFxDkgWHNTlAoAA1Vcuu4dN47cFYdeTVuVBqVKiArbQo+QXJOzS9rG+szsurDqqAl8wa+2xPNNrG9u6+um0ThdgFvYHYQbsND0WB3keXfNvDcFIa1SiWZcheyqEQ1GUrlVGJyAm17HXm9151UsFcYinaugLYUMrLTBIeoy2BUG4U3NwfOa2pNXk61M9IynU6kk23WJve4PmNNk5nOyx2gbATtv6z1GK4Nwx5fn174Zlz6IQwZmUKgJuCCLZmPTe1tlVbgTDqtSsz1VprQw9dRzC4FZnUqwta/NGvf02l3hnWXlKlYbL2+tsod+8+U9zheC1FGscPULU8TQTky9swblghDWFrXI19pwcNcV1pUqrqaoaiAS78lydUXAbIASykXuM220sZxZOMvIE93oYhbXpkNfbm/Q/CVs39+nhNMG5T4/XjK3fffyilr7Gv8QIuY7/AEECWf4+UQn4+Qks3x8ADE5T6tFtIJ+PpEcjugzt0XiO7bbHzPvBRWcb/wBIpbvHywzN1G87/wC5Bd+ofSS1oeEm8TO/VNv8ZHKt1W9PeLKaQqjv9I3Kjv8ASV8om/0hnTrDy/aLSlgqd36e8nlDu9B7xBUTrRhUXrfrBRuUPw8FjKRu9F9tIoqjpJPhLVrL/dAdSO/zH+hGzjv/ANSkON7ecsFRd/naBYrfVzHFe20geMoFQbxBnXcJUp0mvutAYnvA8P8Ac5hVA6F8/wBpJqjaQPAmQp2JW01IPh+kdaoJ18pxcou2w0Fzr32lqONTZQVsCL2Ykm1gp1PwhaddKqNgNhvtOlHGljckDXZY7r/7nFWzhshH3dPvAgDaQGByjb4XmhgcKXXMite2ZecNRmKabOm3wt8JJlYxlfhuioVGUA/5HUDS99pE3l4YCtTqc0NTpogIGbMgBDIQG0uLanTadNJlfyR1N9L6EI5AvvBs19pA8tk76PBfXVdedlBF1fMvN2aLp62+OJmJbiJhdhuG3AREooVRsysSW5MM9ypFwD+IDpHxlWL4VZgj8koai71BmUm+d8z2UDTn63v0DXWSeDUQEEd4UEDUFmXMdL6i3T0bpD8F09i2Y5tVJU6XbYDqNl7X/B8ZPR/JwJwlnqVKj0EqBwc6shtlz5jbn81ubpvtL6nGhhzRTphQlIBbFlU0TyiKLnZmPeRfunDiaDC/3gLhbAc8oQC6so2OCt7HQjXcTi4ivzxkAIAXaNCNozA67CFI7jvmqiWbmGnW4wOwr2SmGxDKWIzfhYtYagjU9N/9ztwfGK1CslRKTsKOGo0kK1CtRKbuWz2JsQHJvcajpnmqWKdH0sbXIKtYixN8pOw6X7xvvKMVjHzXOhI1Gy3da2nh4S6wly26/GbEEOqqiKUWmiKrBaSowcFDc3YnaTfYJz4rjEXbO2Cw5qFlZ3NM5mKkHUFrLmtziLXuZhGux118PGVGs23M3w/8jWC5XYis7MzBFXMzNlUWVcxvZR0AXsJWeU3D677xGqDpLRC43t5zSHOf+zylTh/7R4Q0PS3jaLk7/UwEYvsunhJ53SR4RSg6G9DDJvYesKjK+3NaQwbrHwHvJKL1h9eMrdF6T5QIZT129LxQx6xMYqu+4+H7yDk7/IyKV3bd6gxeWfvks6d0jOu6FdWYbhDON0qVY4t3SFJ5QD8N/CSKx6FPpBTAyoYVW3RgzRVbuj5j3D9YE2Y98BTPdJUtvliud8IhaR2x+TPTJQxswgKtP4SxVG8SFAPRJCDeID0gBzgwFjoem43e8AoJvm/eIyDyjimPgYHbRqoLcwGw2MTbSxO7TRvPfrOg4gMWa4B5oAA2aHUdC6kWA/1OAYY2BINje2h1sbE+ek6MNhSxA1sSbGx1IW4Gm3o2b5FalHHNplzHLmCgG4zsLBtmp5pb4j437l4RrOCVUDIobmjU5xkudd922TLwwdM7BlAprfW5GYrlW29rEtu1v0zQw2LdDSKZDlQISvQGsxBJOpsm22kkrC3JUfJTZSmZVDDKwJVWBzG+thlHO323y98MT/zFeZVZr86zZDd2uTsJynTvA6TK8Rwi+Y1CRzkdAV1FgGe4YtuDftskNwlZ0zEOosSuhUhlTJZRuzC3wMntVRoqb5S5Co75yLsjqAGDLt+5YFT07JzV3eoFKujMqE5gLOUVls6ta552m/m95E1cS1LOKYZ0qOGuy6gvdsqvb7y2LjUbAN0zcNwk5polFA5VDnXKCwyMuckadBA785OlotKYmJxpLHMik2sxIFybk5tLWJB6PaJVpWXNr0dVl5w01BuNQejpt0G6Y/DMP+Qc9LI2a1vvjYRtFmV1/wATKeFMSge9G6oyqStybNl566km177d82lBiVFyQCdQNdR0G/T0+m3W1DVybA2trb/2czVrkFySNpsRfXbbaL9MoeptA110Oy/h0RaU63c30I8REao3QROUvvlWY74tad5ZrdHkIhfcbTgLmKS26LKdrE7x4SoVAfx2PiPQziLkRTXktdXY4B/FeLyC9b/c5RU7o3jFlLxhh1pBojefCc7Dvleo6ZLWnRkXrecmw3yjlDE5U/QktalpCvS649Y38RS649Z5+E5+SW9IeiGKpdf9ZH8XS6w9Z56EeSTxw9D/ABlPrD1guMp9Yes89CPJJ44ejOOTrD1gManXX1nnIR5JTxw9KuPTrj1h/MKfWHrPNQjySeOHpTjqZ/GPWA4QQahx6+081CPJK+OHqFx9LLcvzr6DWwA6Tca/D4915pcJU1N84vfbr57J5aEeSTSHuE4xqBlzr9zIDY6KdDpbbYW8T0m8vrcZle2esAADYKoAuVyg6DdbXoyi08BCXySaQ98OFsMzqrVRk6TZtSwGY2A0F/QTtocYcKrsy1LZkABIYgOxGdrNs0LC+5jPmkJPJJpD6tjOMeDWkiJUUsjhjbMFI1zdGtwbbOkzkxXDmGZQi10UB2e4z5tWZtDl07v+3RPmkJN5XSH0jg/hzDq4q1MQCxdWsA5YEXCsTbozOLa6ETmo8O00cPTrhWzNcgGxVmNwbj7ugP8Ake6eAhHklNIe2xPDFPO5StzH5zJzrEkqxVgRtzKNRuuLTlxOLw5YsrgA6gWbTZofeeThL5JNIemr4uhc5W0NjrtGmo0H1YbJQ9WloQ4O2410t4dIt67pgQjySaQ3WxFPrD1lfL0+sPWY0I8kmkNfl0B0Yesn+KTrTHhHkk0hqnErvEjlk3iZcJPJJpDV/iE3iI1VD0/rM2EvkldId/Krvkcss4YSbyaw7eUXfF5Qb5yQjeTWBCEJhoQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCAQhCB//2Q==" slot="thumbnail">
|
|
174
|
+
</ui5-media-gallery-item>
|
|
175
|
+
</ui5-media-gallery>
|
|
176
|
+
</div>
|
|
177
|
+
<div id="notfoundcontent" class="controls">
|
|
178
|
+
<ui5-title level="H2">Not found content:</ui5-title>
|
|
179
|
+
</div>
|
|
180
|
+
<div class="content">
|
|
181
|
+
<ui5-media-gallery>
|
|
182
|
+
<ui5-media-gallery-item>
|
|
183
|
+
<img src="./img/Tool1.png">
|
|
184
|
+
<img src="/assets/HT-1000.59a0ea5a.jpg" slot="thumbnail">
|
|
185
|
+
</ui5-media-gallery-item>
|
|
186
|
+
<ui5-media-gallery-item layout="Wide">
|
|
187
|
+
<iframe src="https://www.youtube.com/embed/GxGZG2fv6Aw1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
|
188
|
+
<img src="data:image/jpeg;base64,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" slot="thumbnail">
|
|
189
|
+
</ui5-media-gallery-item>
|
|
190
|
+
</ui5-media-gallery>
|
|
191
|
+
</div>
|
|
192
|
+
<div id="notfoundthumbnail" class="controls">
|
|
193
|
+
<ui5-title level="H2">Not found thumbnail and content:</ui5-title>
|
|
194
|
+
</div>
|
|
195
|
+
<div class="content">
|
|
196
|
+
<ui5-media-gallery>
|
|
197
|
+
<ui5-media-gallery-item>
|
|
198
|
+
<img src="./img/HT-10001.jpg">
|
|
199
|
+
<img src="./img/Tool1.png" slot="thumbnail">
|
|
200
|
+
</ui5-media-gallery-item>
|
|
201
|
+
</ui5-media-gallery>
|
|
202
|
+
</div>
|
|
203
|
+
|
|
204
|
+
<div class="controls">
|
|
205
|
+
<ui5-title level="H2">Narrow container</ui5-title>
|
|
206
|
+
</div>
|
|
207
|
+
<div class="narrowContainer">
|
|
208
|
+
<ui5-media-gallery id="galleryInNarrowContainer">
|
|
209
|
+
<ui5-media-gallery-item>
|
|
210
|
+
<img src="/assets/HT-1000.59a0ea5a.jpg">
|
|
211
|
+
</ui5-media-gallery-item>
|
|
212
|
+
<ui5-media-gallery-item>
|
|
213
|
+
<img src="/assets/HT-1010.7b05e4f5.jpg">
|
|
214
|
+
</ui5-media-gallery-item>
|
|
215
|
+
</ui5-media-gallery>
|
|
216
|
+
</div>
|
|
217
|
+
|
|
218
|
+
<script>
|
|
219
|
+
|
|
220
|
+
let selectionChangeCallCount = 0,
|
|
221
|
+
overflowClickCallCount = 0,
|
|
222
|
+
displayAreaClickCallCount = 0;
|
|
223
|
+
|
|
224
|
+
layout.addEventListener("ui5-change", function(event) {
|
|
225
|
+
let newValue = event.detail.selectedOption.innerText;
|
|
226
|
+
mGallery1.layout = newValue;
|
|
227
|
+
});
|
|
228
|
+
|
|
229
|
+
selectHorizontalAlign.addEventListener("ui5-change", function(event) {
|
|
230
|
+
let newValue = event.detail.selectedOption.innerText;
|
|
231
|
+
mGallery1.menuHorizontalAlign = newValue;
|
|
232
|
+
});
|
|
233
|
+
|
|
234
|
+
selectVerticalAlign.addEventListener("ui5-change", function(event) {
|
|
235
|
+
let newValue = event.detail.selectedOption.innerText;
|
|
236
|
+
mGallery1.menuVerticalAlign = newValue;
|
|
237
|
+
});
|
|
238
|
+
|
|
239
|
+
isDisplayAreaInteractive.addEventListener("ui5-change", function(event) {
|
|
240
|
+
mGallery2.interactiveDisplayArea = isDisplayAreaInteractive.checked;
|
|
241
|
+
});
|
|
242
|
+
|
|
243
|
+
mGallery2.addEventListener("ui5-selection-change", function(event) {
|
|
244
|
+
const item = event.detail.item,
|
|
245
|
+
index = mGallery2.items.indexOf(item);
|
|
246
|
+
selectedIndexLabel.innerText = index;
|
|
247
|
+
selectionChangeCallCountLabel.innerText = ++selectionChangeCallCount;
|
|
248
|
+
});
|
|
249
|
+
|
|
250
|
+
mGallery2.addEventListener("ui5-overflow-click", function(event) {
|
|
251
|
+
overflowClickCallCountLabel.innerText = ++overflowClickCallCount;
|
|
252
|
+
});
|
|
253
|
+
|
|
254
|
+
mGallery2.addEventListener("ui5-display-area-click", function(event) {
|
|
255
|
+
displayAreaClickCallCountLabel.innerText = ++displayAreaClickCallCount;
|
|
256
|
+
});
|
|
257
|
+
|
|
258
|
+
selectMenuDesign.addEventListener("ui5-change", function(event) {
|
|
259
|
+
mGallery1.showAllThumbnails = selectMenuDesign.checked;
|
|
260
|
+
});
|
|
261
|
+
|
|
262
|
+
clearBtn.addEventListener("click", function() {
|
|
263
|
+
selectedIndexLabel.innerText = "";
|
|
264
|
+
selectionChangeCallCountLabel.innerText = "";
|
|
265
|
+
overflowClickCallCountLabel.innerText = "";
|
|
266
|
+
displayAreaClickCallCountLabel.innerText = "";
|
|
267
|
+
});
|
|
268
|
+
|
|
269
|
+
selectTheme.addEventListener("ui5-change", function(event) {
|
|
270
|
+
var theme = event.detail.selectedOption.value;
|
|
271
|
+
var Conf = window["sap-ui-webcomponents-bundle"].configuration;
|
|
272
|
+
Conf.setTheme(theme);
|
|
273
|
+
});
|
|
274
|
+
|
|
275
|
+
</script>
|
|
276
|
+
</body>
|
|
277
|
+
|
|
278
|
+
</html>
|
|
@@ -0,0 +1,315 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
6
|
+
<title>NotificationListGroupItem</title>
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
<script type="module" crossorigin src="/assets/bundle.esm.6bf68e9d.js"></script>
|
|
14
|
+
<link rel="stylesheet" href="/assets/test/pages/NotificationListGroupItem.html.5c7fb00c.css">
|
|
15
|
+
</head>
|
|
16
|
+
|
|
17
|
+
<body class="notificationlistgroupitem1auto">
|
|
18
|
+
|
|
19
|
+
<ui5-shellbar id="shellbar" primary-title="Product Title" show-notifications>
|
|
20
|
+
</ui5-shellbar>
|
|
21
|
+
|
|
22
|
+
<ui5-list id="notificationList" header-text="Notifications grouped">
|
|
23
|
+
<ui5-li-notification-group
|
|
24
|
+
show-close
|
|
25
|
+
show-counter
|
|
26
|
+
title-text="Orders"
|
|
27
|
+
priority="High"
|
|
28
|
+
>
|
|
29
|
+
<ui5-li-notification
|
|
30
|
+
show-close
|
|
31
|
+
title-text="New order (#2525) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
|
|
32
|
+
priority="High"
|
|
33
|
+
>
|
|
34
|
+
And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
|
|
35
|
+
<ui5-avatar icon="employee" size="XS" slot="avatar"></ui5-avatar>
|
|
36
|
+
|
|
37
|
+
<span slot="footnotes">Office Notifications</span>
|
|
38
|
+
<span slot="footnotes">3 Days</span>
|
|
39
|
+
|
|
40
|
+
<ui5-notification-action icon="accept" text="Accept" slot="actions"></ui5-notification-action>
|
|
41
|
+
<ui5-notification-action icon="message-error" text="Reject" slot="actions"></ui5-notification-action>
|
|
42
|
+
</ui5-li-notification>
|
|
43
|
+
|
|
44
|
+
<ui5-li-notification
|
|
45
|
+
show-close
|
|
46
|
+
title-text="New order (#2526) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
|
|
47
|
+
priority="High"
|
|
48
|
+
>
|
|
49
|
+
And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
|
|
50
|
+
<ui5-avatar icon="employee" size="XS" slot="avatar"></ui5-avatar>
|
|
51
|
+
|
|
52
|
+
<span slot="footnotes">Office Notifications</span>
|
|
53
|
+
<span slot="footnotes">3 Days</span>
|
|
54
|
+
|
|
55
|
+
<ui5-notification-action icon="accept" text="Accept" slot="actions"></ui5-notification-action>
|
|
56
|
+
</ui5-li-notification>
|
|
57
|
+
|
|
58
|
+
<ui5-li-notification
|
|
59
|
+
show-close
|
|
60
|
+
title-text="New order (#252) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
|
|
61
|
+
priority="High"
|
|
62
|
+
>
|
|
63
|
+
And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
|
|
64
|
+
<ui5-avatar icon="employee" size="XS" slot="avatar"></ui5-avatar>
|
|
65
|
+
|
|
66
|
+
<span slot="footnotes">Office Notifications</span>
|
|
67
|
+
<span slot="footnotes">3 Days</span>
|
|
68
|
+
|
|
69
|
+
<ui5-notification-action icon="accept" text="Accept" slot="actions"></ui5-notification-action>
|
|
70
|
+
</ui5-li-notification>
|
|
71
|
+
|
|
72
|
+
<ui5-notification-action icon="accept" text="Accept All" slot="actions"></ui5-notification-action>
|
|
73
|
+
<ui5-notification-action icon="message-error" text="Reject All" slot="actions"></ui5-notification-action>
|
|
74
|
+
</ui5-li-notification-group>
|
|
75
|
+
|
|
76
|
+
<ui5-li-notification-group
|
|
77
|
+
show-close
|
|
78
|
+
show-counter
|
|
79
|
+
title-text="Payments"
|
|
80
|
+
priority="High"
|
|
81
|
+
>
|
|
82
|
+
<ui5-li-notification
|
|
83
|
+
busy
|
|
84
|
+
show-close
|
|
85
|
+
title-text="New order (#2900) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
|
|
86
|
+
priority="High"
|
|
87
|
+
>
|
|
88
|
+
And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
|
|
89
|
+
<ui5-avatar icon="employee" size="XS" slot="avatar"></ui5-avatar>
|
|
90
|
+
|
|
91
|
+
<span slot="footnotes">Office Notifications</span>
|
|
92
|
+
<span slot="footnotes">3 Days</span>
|
|
93
|
+
|
|
94
|
+
<ui5-notification-action icon="accept" text="Accept" slot="actions"></ui5-notification-action>
|
|
95
|
+
</ui5-li-notification>
|
|
96
|
+
|
|
97
|
+
<ui5-li-notification
|
|
98
|
+
show-close
|
|
99
|
+
title-text="New order (#29001) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
|
|
100
|
+
priority="High"
|
|
101
|
+
>
|
|
102
|
+
And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
|
|
103
|
+
<ui5-avatar icon="employee" size="XS" slot="avatar"></ui5-avatar>
|
|
104
|
+
|
|
105
|
+
<span slot="footnotes">Office Notifications</span>
|
|
106
|
+
<span slot="footnotes">3 Days</span>
|
|
107
|
+
|
|
108
|
+
<ui5-notification-action icon="accept" text="Accept" slot="actions"></ui5-notification-action>
|
|
109
|
+
</ui5-li-notification>
|
|
110
|
+
|
|
111
|
+
<ui5-li-notification
|
|
112
|
+
show-close
|
|
113
|
+
title-text="New order (#29003) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
|
|
114
|
+
priority="High"
|
|
115
|
+
>
|
|
116
|
+
And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
|
|
117
|
+
<ui5-avatar icon="employee" size="XS" slot="avatar"></ui5-avatar>
|
|
118
|
+
|
|
119
|
+
<span slot="footnotes">Office Notifications</span>
|
|
120
|
+
<span slot="footnotes">3 Days</span>
|
|
121
|
+
|
|
122
|
+
<ui5-notification-action icon="accept" text="Accept" slot="actions"></ui5-notification-action>
|
|
123
|
+
</ui5-li-notification>
|
|
124
|
+
</ui5-li-notification-group>
|
|
125
|
+
|
|
126
|
+
<ui5-li-notification-group
|
|
127
|
+
id="busyGroup"
|
|
128
|
+
show-close
|
|
129
|
+
show-counter
|
|
130
|
+
read
|
|
131
|
+
priority="High"
|
|
132
|
+
title-text="Meetings With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
|
|
133
|
+
>
|
|
134
|
+
<ui5-li-notification
|
|
135
|
+
busy
|
|
136
|
+
show-close
|
|
137
|
+
title-text="New order (#35001) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
|
|
138
|
+
priority="High"
|
|
139
|
+
read
|
|
140
|
+
>
|
|
141
|
+
And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
|
|
142
|
+
<ui5-avatar icon="employee" size="XS" slot="avatar"></ui5-avatar>
|
|
143
|
+
|
|
144
|
+
<span slot="footnotes">Office Notifications</span>
|
|
145
|
+
<span slot="footnotes">3 Days</span>
|
|
146
|
+
</ui5-li-notification>
|
|
147
|
+
|
|
148
|
+
<ui5-li-notification
|
|
149
|
+
show-close
|
|
150
|
+
title-text="New order (#35002) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
|
|
151
|
+
priority="High"
|
|
152
|
+
read
|
|
153
|
+
>
|
|
154
|
+
And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
|
|
155
|
+
<ui5-avatar icon="employee" size="XS" slot="avatar"></ui5-avatar>
|
|
156
|
+
|
|
157
|
+
<span slot="footnotes">Office Notifications</span>
|
|
158
|
+
<span slot="footnotes">3 Days</span>
|
|
159
|
+
</ui5-li-notification>
|
|
160
|
+
|
|
161
|
+
<ui5-li-notification
|
|
162
|
+
show-close
|
|
163
|
+
title-text="New order (#35003) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
|
|
164
|
+
priority="High"
|
|
165
|
+
read
|
|
166
|
+
>
|
|
167
|
+
And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
|
|
168
|
+
<ui5-avatar icon="employee" size="XS" slot="avatar"></ui5-avatar>
|
|
169
|
+
|
|
170
|
+
<span slot="footnotes">Office Notifications</span>
|
|
171
|
+
<span slot="footnotes">3 Days</span>
|
|
172
|
+
</ui5-li-notification>
|
|
173
|
+
|
|
174
|
+
<ui5-notification-action id="btnMakeGroupBusy" icon="accept" text="Accept All" slot="actions"></ui5-notification-action>
|
|
175
|
+
</ui5-li-notification-group>
|
|
176
|
+
</ui5-list>
|
|
177
|
+
|
|
178
|
+
<br><br>
|
|
179
|
+
|
|
180
|
+
<ui5-toast id="wcToastBS" duration="2000"></ui5-toast>
|
|
181
|
+
|
|
182
|
+
<ui5-popover id="notificationsPopover" class="notificationlistgroupitem2auto" placement-type="Bottom" horizontal-align="Right">
|
|
183
|
+
<ui5-list id="notificationListTop" header-text="Notifications titleText and content 'truncates'">
|
|
184
|
+
<ui5-li-notification-group
|
|
185
|
+
show-close
|
|
186
|
+
show-counter
|
|
187
|
+
title-text="Orders"
|
|
188
|
+
priority="Medium"
|
|
189
|
+
>
|
|
190
|
+
<ui5-li-notification
|
|
191
|
+
show-close
|
|
192
|
+
priority="Medium"
|
|
193
|
+
title-text="New order (#2525) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
|
|
194
|
+
>
|
|
195
|
+
And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
|
|
196
|
+
|
|
197
|
+
<ui5-avatar size="XS" slot="avatar">
|
|
198
|
+
<img src="/assets/man_avatar_1.ffaff72e.png" />
|
|
199
|
+
</ui5-avatar>
|
|
200
|
+
|
|
201
|
+
<span slot="footnotes">John Doe</span>
|
|
202
|
+
<span slot="footnotes">2 Days</span>
|
|
203
|
+
<span slot="footnotes">Other stuff</span>
|
|
204
|
+
|
|
205
|
+
<ui5-notification-action id="acceptBtnInPopover" icon="accept" text="Accept" slot="actions"></ui5-notification-action>
|
|
206
|
+
<ui5-notification-action id="rejectBtnInPopover" icon="message-error" text="Reject" slot="actions"></ui5-notification-action>
|
|
207
|
+
</ui5-li-notification>
|
|
208
|
+
|
|
209
|
+
<ui5-li-notification
|
|
210
|
+
show-close
|
|
211
|
+
show-counter
|
|
212
|
+
title-text="Orders"
|
|
213
|
+
priority="Medium"
|
|
214
|
+
>
|
|
215
|
+
And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
|
|
216
|
+
<ui5-avatar icon="employee" size="XS" slot="avatar"></ui5-avatar>
|
|
217
|
+
|
|
218
|
+
<span slot="footnotes">Office Notifications</span>
|
|
219
|
+
<span slot="footnotes">3 Days</span>
|
|
220
|
+
|
|
221
|
+
<ui5-notification-action icon="accept" text="Accept" slot="actions"></ui5-notification-action>
|
|
222
|
+
</ui5-li-notification>
|
|
223
|
+
|
|
224
|
+
</ui5-li-notification-group>
|
|
225
|
+
|
|
226
|
+
<ui5-li-notification-group
|
|
227
|
+
show-close
|
|
228
|
+
show-counter
|
|
229
|
+
title-text="Calls"
|
|
230
|
+
priority="Low"
|
|
231
|
+
>
|
|
232
|
+
<ui5-li-notification
|
|
233
|
+
title-text="New order (#2565) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
|
|
234
|
+
priority="Low"
|
|
235
|
+
>
|
|
236
|
+
Short description
|
|
237
|
+
<ui5-avatar initials="JS" size="XS" slot="avatar"></ui5-avatar>
|
|
238
|
+
|
|
239
|
+
<span slot="footnotes">Patricia Clarck</span>
|
|
240
|
+
<span slot="footnotes">3 Days</span>
|
|
241
|
+
|
|
242
|
+
<ui5-notification-action icon="accept" text="Accept All Requested Information" slot="actions"></ui5-notification-action>
|
|
243
|
+
<ui5-notification-action icon="message-error" text="Reject All Requested Information" slot="actions"></ui5-notification-action>
|
|
244
|
+
</ui5-li-notification>
|
|
245
|
+
|
|
246
|
+
<ui5-li-notification
|
|
247
|
+
title-text="New order (#2523)"
|
|
248
|
+
priority="Low"
|
|
249
|
+
>
|
|
250
|
+
<div>. With a very long description - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.</div>
|
|
251
|
+
|
|
252
|
+
<span slot="footnotes">John SMith</span>
|
|
253
|
+
<span slot="footnotes">3 Days</span>
|
|
254
|
+
|
|
255
|
+
<ui5-notification-action icon="message-error" text="Reject" slot="actions"></ui5-notification-action>
|
|
256
|
+
</ui5-li-notification>
|
|
257
|
+
</ui5-li-notification-group>
|
|
258
|
+
</ui5-list>
|
|
259
|
+
</ui5-popover>
|
|
260
|
+
|
|
261
|
+
<div class="notificationlistgroupitem3auto">
|
|
262
|
+
<ui5-button id="openNotifications" design="Transparent" icon="bell"></ui5-button>
|
|
263
|
+
</div>
|
|
264
|
+
|
|
265
|
+
<script>
|
|
266
|
+
notificationList.addEventListener("item-click", function(event) {
|
|
267
|
+
wcToastBS.textContent = event.detail.item.titleText;
|
|
268
|
+
wcToastBS.show();
|
|
269
|
+
});
|
|
270
|
+
|
|
271
|
+
notificationList.addEventListener("item-close", function(event) {
|
|
272
|
+
wcToastBS.textContent = event.detail.item.titleText;
|
|
273
|
+
wcToastBS.show();
|
|
274
|
+
});
|
|
275
|
+
|
|
276
|
+
notificationList.addEventListener("item-toggle", function(event) {
|
|
277
|
+
var item = event.detail.item;
|
|
278
|
+
wcToastBS.textContent = item.titleText + " has been " + (item.collapsed ? "collapsed" : "expanded");
|
|
279
|
+
wcToastBS.show();
|
|
280
|
+
});
|
|
281
|
+
|
|
282
|
+
acceptBtnInPopover.addEventListener("click", function(event) {
|
|
283
|
+
wcToastBS.textContent = "Accept btn In popover btn clicked";
|
|
284
|
+
wcToastBS.show();
|
|
285
|
+
});
|
|
286
|
+
|
|
287
|
+
rejectBtnInPopover.addEventListener("click", function(event) {
|
|
288
|
+
wcToastBS.textContent = "Reject btn In popover btn clicked";
|
|
289
|
+
wcToastBS.show();
|
|
290
|
+
});
|
|
291
|
+
|
|
292
|
+
openNotifications.addEventListener("click", function(event) {
|
|
293
|
+
notificationsPopover.showAt(openNotifications);
|
|
294
|
+
});
|
|
295
|
+
|
|
296
|
+
btnMakeGroupBusy.addEventListener("click", function(event) {
|
|
297
|
+
busyGroup.busy = true;
|
|
298
|
+
|
|
299
|
+
setTimeout(function() {
|
|
300
|
+
busyGroup.busy = false;
|
|
301
|
+
}, 2000);
|
|
302
|
+
});
|
|
303
|
+
|
|
304
|
+
shellbar.addEventListener("ui5-notifications-click", function(event) {
|
|
305
|
+
event.preventDefault();
|
|
306
|
+
notificationsPopover.showAt(event.detail.targetRef);
|
|
307
|
+
});
|
|
308
|
+
|
|
309
|
+
notificationListTop.addEventListener("item-close", function (event) {
|
|
310
|
+
wcToastBS.textContent = event.detail.item.titleText;
|
|
311
|
+
wcToastBS.show();
|
|
312
|
+
});
|
|
313
|
+
</script>
|
|
314
|
+
</body>
|
|
315
|
+
</html>
|