diff --git a/container/cypress/e2e/test-app/compound/create-dynamic-compound-container.cy.js b/container/cypress/e2e/test-app/compound/create-dynamic-compound-container.cy.js
index be914d1135..7854527601 100644
--- a/container/cypress/e2e/test-app/compound/create-dynamic-compound-container.cy.js
+++ b/container/cypress/e2e/test-app/compound/create-dynamic-compound-container.cy.js
@@ -7,7 +7,7 @@ describe('create luigi-compound-container dynamically', () => {
const content = document.querySelector('.content');
const wc = document.createElement('luigi-compound-container');
wc.context = { title: 'Nested' }
- wc.viewurl = 'https://luigiwebcomponents.gitlab.io/nested2.js';
+ wc.viewurl = 'http://localhost:8080/assets/nested2.js';
wc.compoundConfig = {
eventListeners: [
@@ -28,7 +28,7 @@ describe('create luigi-compound-container dynamically', () => {
}
],
children: [{
- viewUrl: 'https://luigiwebcomponents.gitlab.io/layouts/panelHeader.js',
+ viewUrl: 'http://localhost:8080/assets/panelHeader.js',
context: {
title: 'My Awesome Grid',
description: 'Really awesome'
@@ -45,7 +45,7 @@ describe('create luigi-compound-container dynamically', () => {
}
}]
}, {
- viewUrl: 'https://luigiwebcomponents.gitlab.io/layouts/panelFooter.js',
+ viewUrl: 'http://localhost:8080/assets/panelFooter.js',
context: {
footer: 'This is the end of awesomeness'
},
@@ -53,7 +53,7 @@ describe('create luigi-compound-container dynamically', () => {
slot: "footer"
}
}, {
- viewUrl: 'https://luigiwebcomponents.gitlab.io/luigiwebcomponentmf/main.js',
+ viewUrl: 'http://localhost:8080/assets/main.js',
layoutConfig: {
slot: "content"
},
@@ -61,7 +61,7 @@ describe('create luigi-compound-container dynamically', () => {
label: 'I am nested!'
}
}, {
- viewUrl: 'https://luigiwebcomponents.gitlab.io/luigi-wc-mfe/main.js',
+ viewUrl: 'http://localhost:8080/assets/mfeMain.js',
context: {
label: 'Update Joke',
showAlert: false
@@ -80,16 +80,12 @@ describe('create luigi-compound-container dynamically', () => {
.then(($container) => {
return cy
.wrap($container)
- .find(
- 'luigi-wc-68747470733a2f2f6c75696769776562636f6d706f6e656e74732e6769746c61622e696f2f6e6573746564322e6a73'
- )
+ .find('luigi-wc-687474703a2f2f6c6f63616c686f73743a383038302f6173736574732f6e6573746564322e6a73')
.shadow();
})
.then(($innerContainer) => {
cy.wrap($innerContainer)
- .get(
- 'luigi-wc-68747470733a2f2f6c75696769776562636f6d706f6e656e74732e6769746c61622e696f2f6c756967692d77632d6d66652f6d61696e2e6a73'
- )
+ .get('luigi-wc-687474703a2f2f6c6f63616c686f73743a383038302f6173736574732f6d61696e2e6a73')
.should('exist')
.shadow()
.should('not.exist'); // ShadowRoot in 'closed' mode
@@ -102,7 +98,7 @@ describe('create luigi-compound-container dynamically', () => {
const content = document.querySelector('.content');
const wc = document.createElement('luigi-compound-container');
wc.context = '{"invalid": "JSON}'
- wc.viewurl = 'https://luigiwebcomponents.gitlab.io/nested2.js';
+ wc.viewurl = 'http://localhost:8080/assets/nested2.js';
wc.compoundConfig = {
eventListeners: [
@@ -123,7 +119,7 @@ describe('create luigi-compound-container dynamically', () => {
}
],
children: [{
- viewUrl: 'https://luigiwebcomponents.gitlab.io/layouts/panelHeader.js',
+ viewUrl: 'http://localhost:8080/assets/panelHeader.js',
context: {
title: 'My Awesome Grid',
description: 'Really awesome'
@@ -140,7 +136,7 @@ describe('create luigi-compound-container dynamically', () => {
}
}]
}, {
- viewUrl: 'https://luigiwebcomponents.gitlab.io/layouts/panelFooter.js',
+ viewUrl: 'http://localhost:8080/assets/panelFooter.js',
context: {
footer: 'This is the end of awesomeness'
},
@@ -148,7 +144,7 @@ describe('create luigi-compound-container dynamically', () => {
slot: "footer"
}
}, {
- viewUrl: 'https://luigiwebcomponents.gitlab.io/luigiwebcomponentmf/main.js',
+ viewUrl: 'http://localhost:8080/assets/main.js',
layoutConfig: {
slot: "content"
},
@@ -156,7 +152,7 @@ describe('create luigi-compound-container dynamically', () => {
label: 'I am nested!'
}
}, {
- viewUrl: 'https://luigiwebcomponents.gitlab.io/luigi-wc-mfe/main.js',
+ viewUrl: 'http://localhost:8080/assets/mfeMain.js',
context: {
label: 'Update Joke',
showAlert: false
@@ -180,7 +176,7 @@ describe('create luigi-compound-container dynamically', () => {
const content = document.querySelector('.content');
const wc = document.createElement('luigi-compound-container');
wc.context = { title: 'Nested' }
- wc.viewurl = 'https://luigiwebcomponents.gitlab.io/nested2.js';
+ wc.viewurl = 'http://localhost:8080/assets/nested2.js';
wc.noShadow = true;
wc.compoundConfig = {
eventListeners: [
@@ -201,7 +197,7 @@ describe('create luigi-compound-container dynamically', () => {
}
],
children: [{
- viewUrl: 'https://luigiwebcomponents.gitlab.io/layouts/panelHeader.js',
+ viewUrl: 'http://localhost:8080/assets/panelHeader.js',
context: {
title: 'My Awesome Grid',
description: 'Really awesome'
@@ -218,7 +214,7 @@ describe('create luigi-compound-container dynamically', () => {
}
}]
}, {
- viewUrl: 'https://luigiwebcomponents.gitlab.io/layouts/panelFooter.js',
+ viewUrl: 'http://localhost:8080/assets/panelFooter.js',
context: {
footer: 'This is the end of awesomeness'
},
@@ -226,7 +222,7 @@ describe('create luigi-compound-container dynamically', () => {
slot: "footer"
}
}, {
- viewUrl: 'https://luigiwebcomponents.gitlab.io/luigiwebcomponentmf/main.js',
+ viewUrl: 'http://localhost:8080/assets/main.js',
layoutConfig: {
slot: "content"
},
@@ -234,7 +230,7 @@ describe('create luigi-compound-container dynamically', () => {
label: 'I am nested!'
}
}, {
- viewUrl: 'https://luigiwebcomponents.gitlab.io/luigi-wc-mfe/main.js',
+ viewUrl: 'http://localhost:8080/assets/mfeMain.js',
context: {
label: 'Update Joke',
showAlert: false
diff --git a/container/package.json b/container/package.json
index e398059684..15e28d7eab 100644
--- a/container/package.json
+++ b/container/package.json
@@ -12,12 +12,12 @@
"public"
],
"scripts": {
- "build": "npm run sync-event-typings && npm run generate-cem && rollup -c",
+ "build": "npm run sync-event-typings && npm run generate-cem && rollup -c",
"test": "jest",
"lint": "eslint src/**/*.*",
"bundle": "npm run build",
"dev": "rollup -c -w",
- "copyBundle": "cp public/bundle.js public/bundle.js.map test-app/ && cp public/bundle.js public/bundle.js.map examples/ || COPY public\\* test-app\\",
+ "copyBundle": "cp public/bundle.js public/bundle.js.map test-app/ && cp public/bundle.js public/bundle.js.map examples/ || COPY public\\* test-app\\",
"copyLuigiClient": "cp ../client/public/luigi-client.js test-app/iframe",
"copyLuigiElement": "cp ../client/src/luigi-element.js test-app/compound",
"serve": "npm run build && npm run copyLuigiClient && npm run copyLuigiElement && npm run copyBundle && sirv -D -c test-app --no-clear",
@@ -31,7 +31,6 @@
"replace-version-in-docu": "node prepareNextRelease.js",
"sync-event-typings": "cp src/constants/communication.ts typings/constants/events.d.ts",
"generate-cem": "node generateCEM.js"
-
},
"devDependencies": {
"@babel/node": "7.22.10",
diff --git a/container/test-app/assets/button.css b/container/test-app/assets/button.css
new file mode 100644
index 0000000000..0cc6631c49
--- /dev/null
+++ b/container/test-app/assets/button.css
@@ -0,0 +1,6 @@
+/*!
+ * Fundamental Library Styles v0.11.2
+ * Copyright (c) 2020 SAP SE or an SAP affiliate company.
+ * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/master/LICENSE)
+ */
+.fd-button{overflow:visible;min-width:2.25rem}.fd-button,.fd-button[class*=sap-icon]{font-size:.875rem;font-size:var(--sapFontSize,.875rem);line-height:1.4;line-height:var(--sapContent_LineHeight,1.4);color:#32363a;color:var(--sapTextColor,#32363a);font-family:"72","72full",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily,"72","72full",Arial,Helvetica,sans-serif);font-weight:400;-webkit-font-smoothing:antialiased;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;border:0;background-image:none;display:inline-block;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;background-color:transparent;border-radius:.25rem;border-radius:var(--sapButton_BorderCornerRadius,.25rem);height:2.25rem;max-height:2.25rem;min-width:2.25rem;line-height:2.125rem;line-height:calc(2.25rem - 2*var(--sapButton_BorderWidth,.0625rem));overflow:hidden;text-overflow:ellipsis;padding-left:.5625rem;padding-left:calc(.625rem - var(--sapButton_BorderWidth,.0625rem));padding-right:.5625rem;padding-right:calc(.625rem - var(--sapButton_BorderWidth,.0625rem));text-align:center;border-style:solid;border-width:.0625rem;border-width:var(--sapButton_BorderWidth,.0625rem)}.fd-button:after,.fd-button:before,.fd-button[class*=sap-icon]:after,.fd-button[class*=sap-icon]:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-button::-moz-focus-inner,.fd-button[class*=sap-icon]::-moz-focus-inner{border:0}.fd-button:after,.fd-button:before,.fd-button[class*=sap-icon]:after,.fd-button[class*=sap-icon]:before{width:1rem;height:1rem;font-size:1rem;line-height:1rem;font-family:SAP-icons}.fd-button:before,.fd-button[class*=sap-icon]:before{margin-right:.375rem;vertical-align:text-bottom}.fd-button:after,.fd-button[class*=sap-icon]:after{margin-left:.375rem;vertical-align:middle}.fd-button[class*=sap-icon][dir=rtl]:before,.fd-button[dir=rtl]:before,[dir=rtl] .fd-button:before,[dir=rtl] .fd-button[class*=sap-icon]:before{margin-right:0;margin-left:.375rem}.fd-button[class*=sap-icon][dir=rtl]:after,.fd-button[dir=rtl]:after,[dir=rtl] .fd-button:after,[dir=rtl] .fd-button[class*=sap-icon]:after{margin-left:0;margin-right:.375rem}.fd-button.is-empty:after,.fd-button.is-empty:before,.fd-button:empty:after,.fd-button:empty:before,.fd-button[class*=sap-icon].is-empty:after,.fd-button[class*=sap-icon].is-empty:before,.fd-button[class*=sap-icon]:empty:after,.fd-button[class*=sap-icon]:empty:before{margin-right:0;margin-left:0}.fd-button,.fd-button[class*=sap-icon]{color:#0854a0;color:var(--sapButton_TextColor,#0854a0);border-color:#0854a0;border-color:var(--sapButton_BorderColor,#0854a0);background-color:#fff;background-color:var(--sapButton_Background,#fff)}.fd-button.fd-button--ghost,.fd-button[class*=sap-icon].fd-button--ghost{color:#0854a0;color:var(--sapButton_TextColor,#0854a0);border-color:#0854a0;border-color:var(--sapButton_BorderColor,#0854a0);background-color:transparent;background-color:var(--sapButton_Lite_Background,transparent)}.fd-button.fd-button--positive,.fd-button[class*=sap-icon].fd-button--positive{color:#107e3e;color:var(--sapButton_Accept_TextColor,#107e3e);border-color:#107e3e;border-color:var(--sapButton_Accept_BorderColor,#107e3e);background-color:#fff;background-color:var(--sapButton_Accept_Background,#fff)}.fd-button.fd-button--negative,.fd-button[class*=sap-icon].fd-button--negative{color:#b00;color:var(--sapButton_Reject_TextColor,#b00);border-color:#b00;border-color:var(--sapButton_Reject_BorderColor,#b00);background-color:#fff;background-color:var(--sapButton_Reject_Background,#fff)}.fd-button.fd-button--attention,.fd-button[class*=sap-icon].fd-button--attention{color:#e9730c;color:var(--sapButton_Attention_TextColor,#e9730c);border-color:#e9730c;border-color:var(--sapButton_Attention_BorderColor,#e9730c);background-color:#fff;background-color:var(--sapButton_Attention_Background,#fff)}.fd-button.fd-button--emphasized,.fd-button[class*=sap-icon].fd-button--emphasized{font-weight:700;color:#fff;color:var(--sapButton_Emphasized_TextColor,#fff);border-color:#0a6ed1;border-color:var(--sapButton_Emphasized_BorderColor,#0a6ed1);background-color:#0a6ed1;background-color:var(--sapButton_Emphasized_Background,#0a6ed1)}.fd-button.fd-button--transparent,.fd-button[class*=sap-icon].fd-button--transparent{border-color:transparent;border-color:var(--sapButton_Lite_BorderColor,transparent);background-color:transparent;background-color:var(--sapButton_Lite_Background,transparent)}.fd-button--compact,.fd-button--compact[class*=sap-icon]{height:1.625rem;max-height:1.625rem;min-width:2rem;padding-left:.4375rem;padding-left:calc(.5rem - var(--sapButton_BorderWidth,.0625rem));padding-right:.4375rem;padding-right:calc(.5rem - var(--sapButton_BorderWidth,.0625rem));line-height:1.5rem;line-height:calc(1.625rem - 2*var(--sapButton_BorderWidth,.0625rem))}.fd-button--menu,.fd-button--menu[class*=sap-icon]{max-width:12rem;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:1.937rem}.fd-button--menu:after,.fd-button--menu[class*=sap-icon]:after{font-family:SAP-icons;font-weight:400;font-size:.75rem;content:"\e1ef";position:absolute;top:.6rem;right:.562rem;margin-right:0;margin-left:0}.fd-button--menu[class*=sap-icon][dir=rtl],.fd-button--menu[dir=rtl],[dir=rtl] .fd-button--menu,[dir=rtl] .fd-button--menu[class*=sap-icon]{padding-left:1.937rem;padding-right:.5625rem;padding-right:calc(.625rem - var(--sapButton_BorderWidth,.0625rem))}.fd-button--menu[class*=sap-icon][dir=rtl]:after,.fd-button--menu[dir=rtl]:after,[dir=rtl] .fd-button--menu:after,[dir=rtl] .fd-button--menu[class*=sap-icon]:after{left:.562rem;right:auto}.fd-button--menu[class*=sap-icon][dir=rtl].is-empty:before,.fd-button--menu[class*=sap-icon][dir=rtl]:empty:before,.fd-button--menu[dir=rtl].is-empty:before,.fd-button--menu[dir=rtl]:empty:before,[dir=rtl] .fd-button--menu.is-empty:before,[dir=rtl] .fd-button--menu:empty:before,[dir=rtl] .fd-button--menu[class*=sap-icon].is-empty:before,[dir=rtl] .fd-button--menu[class*=sap-icon]:empty:before{margin-left:0}.fd-button--menu.fd-button--compact,.fd-button--menu.fd-button--compact[class*=sap-icon]{padding-right:1.812rem}.fd-button--menu.fd-button--compact:after,.fd-button--menu.fd-button--compact[class*=sap-icon]:after{top:.235rem;right:.438rem}.fd-button--menu.fd-button--compact[class*=sap-icon][dir=rtl],.fd-button--menu.fd-button--compact[dir=rtl],[dir=rtl] .fd-button--menu.fd-button--compact,[dir=rtl] .fd-button--menu.fd-button--compact[class*=sap-icon]{padding-left:1.812rem;padding-right:.4375rem;padding-right:calc(.5rem - var(--sapButton_BorderWidth,.0625rem))}.fd-button--menu.fd-button--compact[class*=sap-icon][dir=rtl]:after,.fd-button--menu.fd-button--compact[dir=rtl]:after,[dir=rtl] .fd-button--menu.fd-button--compact:after,[dir=rtl] .fd-button--menu.fd-button--compact[class*=sap-icon]:after{right:auto;left:.438rem}.fd-button--text-alignment-left,.fd-button--text-alignment[class*=sap-icon]-left{text-align:left}.fd-button--text-alignment-right,.fd-button--text-alignment[class*=sap-icon]-right{text-align:right}.fd-button--text-alignment-center,.fd-button--text-alignment[class*=sap-icon]-center{text-align:center}.fd-button--half,.fd-button--half[class*=sap-icon]{height:1.125rem;max-height:1.125rem;line-height:1}.fd-button--half.fd-button--compact,.fd-button--half[class*=sap-icon].fd-button--compact{height:.8125rem;max-height:.8125rem;line-height:1}.fd-button.is-hover,.fd-button.is-hover[class*=sap-icon],.fd-button:hover,.fd-button:hover[class*=sap-icon]{color:#0854a0;color:var(--sapButton_Hover_TextColor,#0854a0);border-color:#0854a0;border-color:var(--sapButton_Hover_BorderColor,#0854a0);background-color:#ebf5fe;background-color:var(--sapButton_Hover_Background,#ebf5fe)}.fd-button.is-hover.fd-button--ghost,.fd-button.is-hover[class*=sap-icon].fd-button--ghost,.fd-button:hover.fd-button--ghost,.fd-button:hover[class*=sap-icon].fd-button--ghost{color:#0854a0;color:var(--sapButton_Hover_TextColor,#0854a0);border-color:#0854a0;border-color:var(--sapButton_Hover_BorderColor,#0854a0);background-color:#ebf5fe;background-color:var(--sapButton_Hover_Background,#ebf5fe)}.fd-button.is-hover.fd-button--positive,.fd-button.is-hover[class*=sap-icon].fd-button--positive,.fd-button:hover.fd-button--positive,.fd-button:hover[class*=sap-icon].fd-button--positive{color:#107e3e;color:var(--sapButton_Accept_Hover_TextColor,#107e3e);border-color:#107e3e;border-color:var(--sapButton_Accept_Hover_BorderColor,#107e3e);background-color:#f1fdf6;background-color:var(--sapButton_Accept_Hover_Background,#f1fdf6)}.fd-button.is-hover.fd-button--negative,.fd-button.is-hover[class*=sap-icon].fd-button--negative,.fd-button:hover.fd-button--negative,.fd-button:hover[class*=sap-icon].fd-button--negative{color:#b00;color:var(--sapButton_Reject_Hover_TextColor,#b00);border-color:#b00;border-color:var(--sapButton_Reject_Hover_BorderColor,#b00);background-color:#ffebeb;background-color:var(--sapButton_Reject_Hover_Background,#ffebeb)}.fd-button.is-hover.fd-button--attention,.fd-button.is-hover[class*=sap-icon].fd-button--attention,.fd-button:hover.fd-button--attention,.fd-button:hover[class*=sap-icon].fd-button--attention{color:#e9730c;color:var(--sapButton_Attention_Hover_TextColor,#e9730c);border-color:#e9730c;border-color:var(--sapButton_Attention_Hover_BorderColor,#e9730c);background-color:#fef7f1;background-color:var(--sapButton_Attention_Hover_Background,#fef7f1)}.fd-button.is-hover.fd-button--emphasized,.fd-button.is-hover[class*=sap-icon].fd-button--emphasized,.fd-button:hover.fd-button--emphasized,.fd-button:hover[class*=sap-icon].fd-button--emphasized{color:#fff;color:var(--sapButton_Emphasized_Hover_TextColor,#fff);border-color:#085caf;border-color:var(--sapButton_Emphasized_Hover_Background,#085caf);background-color:#085caf;background-color:var(--sapButton_Emphasized_Hover_Background,#085caf)}.fd-button.is-active,.fd-button.is-pressed,.fd-button.is-selected,.fd-button:active,.fd-button[aria-pressed=true],.fd-button[aria-selected=true]{outline:0}.fd-button.is-active,.fd-button.is-active[class*=sap-icon],.fd-button.is-pressed,.fd-button.is-pressed[class*=sap-icon],.fd-button.is-selected,.fd-button.is-selected[class*=sap-icon],.fd-button:active,.fd-button:active[class*=sap-icon],.fd-button[aria-pressed=true],.fd-button[aria-pressed=true][class*=sap-icon],.fd-button[aria-selected=true],.fd-button[aria-selected=true][class*=sap-icon]{color:#fff;color:var(--sapButton_Selected_TextColor,#fff);border-color:#0854a0;border-color:var(--sapButton_BorderColor,#0854a0);background-color:#0854a0;background-color:var(--sapButton_Active_Background,#0854a0)}.fd-button.is-active.fd-button--ghost,.fd-button.is-active[class*=sap-icon].fd-button--ghost,.fd-button.is-pressed.fd-button--ghost,.fd-button.is-pressed[class*=sap-icon].fd-button--ghost,.fd-button.is-selected.fd-button--ghost,.fd-button.is-selected[class*=sap-icon].fd-button--ghost,.fd-button:active.fd-button--ghost,.fd-button:active[class*=sap-icon].fd-button--ghost,.fd-button[aria-pressed=true].fd-button--ghost,.fd-button[aria-pressed=true][class*=sap-icon].fd-button--ghost,.fd-button[aria-selected=true].fd-button--ghost,.fd-button[aria-selected=true][class*=sap-icon].fd-button--ghost{color:#fff;color:var(--sapButton_Selected_TextColor,#fff);border-color:#0854a0;border-color:var(--sapButton_BorderColor,#0854a0);background-color:#0854a0;background-color:var(--sapButton_Active_Background,#0854a0)}.fd-button.is-active.fd-button--positive,.fd-button.is-active[class*=sap-icon].fd-button--positive,.fd-button.is-pressed.fd-button--positive,.fd-button.is-pressed[class*=sap-icon].fd-button--positive,.fd-button.is-selected.fd-button--positive,.fd-button.is-selected[class*=sap-icon].fd-button--positive,.fd-button:active.fd-button--positive,.fd-button:active[class*=sap-icon].fd-button--positive,.fd-button[aria-pressed=true].fd-button--positive,.fd-button[aria-pressed=true][class*=sap-icon].fd-button--positive,.fd-button[aria-selected=true].fd-button--positive,.fd-button[aria-selected=true][class*=sap-icon].fd-button--positive{color:#fff;color:var(--sapButton_Selected_TextColor,#fff);border-color:#0d6733;border-color:var(--sapButton_Accept_Active_BorderColor,#0d6733);background-color:#0d6733;background-color:var(--sapButton_Accept_Active_Background,#0d6733)}.fd-button.is-active.fd-button--negative,.fd-button.is-active[class*=sap-icon].fd-button--negative,.fd-button.is-pressed.fd-button--negative,.fd-button.is-pressed[class*=sap-icon].fd-button--negative,.fd-button.is-selected.fd-button--negative,.fd-button.is-selected[class*=sap-icon].fd-button--negative,.fd-button:active.fd-button--negative,.fd-button:active[class*=sap-icon].fd-button--negative,.fd-button[aria-pressed=true].fd-button--negative,.fd-button[aria-pressed=true][class*=sap-icon].fd-button--negative,.fd-button[aria-selected=true].fd-button--negative,.fd-button[aria-selected=true][class*=sap-icon].fd-button--negative{color:#fff;color:var(--sapButton_Selected_TextColor,#fff);border-color:#a20000;border-color:var(--sapButton_Reject_Active_BorderColor,#a20000);background-color:#a20000;background-color:var(--sapButton_Reject_Active_Background,#a20000)}.fd-button.is-active.fd-button--attention,.fd-button.is-active[class*=sap-icon].fd-button--attention,.fd-button.is-pressed.fd-button--attention,.fd-button.is-pressed[class*=sap-icon].fd-button--attention,.fd-button.is-selected.fd-button--attention,.fd-button.is-selected[class*=sap-icon].fd-button--attention,.fd-button:active.fd-button--attention,.fd-button:active[class*=sap-icon].fd-button--attention,.fd-button[aria-pressed=true].fd-button--attention,.fd-button[aria-pressed=true][class*=sap-icon].fd-button--attention,.fd-button[aria-selected=true].fd-button--attention,.fd-button[aria-selected=true][class*=sap-icon].fd-button--attention{color:#fff;color:var(--sapButton_Selected_TextColor,#fff);border-color:#d1670b;border-color:var(--sapButton_Attention_Active_BorderColor,#d1670b);background-color:#d1670b;background-color:var(--sapButton_Attention_Active_Background,#d1670b)}.fd-button.is-active.fd-button--emphasized,.fd-button.is-active[class*=sap-icon].fd-button--emphasized,.fd-button.is-pressed.fd-button--emphasized,.fd-button.is-pressed[class*=sap-icon].fd-button--emphasized,.fd-button.is-selected.fd-button--emphasized,.fd-button.is-selected[class*=sap-icon].fd-button--emphasized,.fd-button:active.fd-button--emphasized,.fd-button:active[class*=sap-icon].fd-button--emphasized,.fd-button[aria-pressed=true].fd-button--emphasized,.fd-button[aria-pressed=true][class*=sap-icon].fd-button--emphasized,.fd-button[aria-selected=true].fd-button--emphasized,.fd-button[aria-selected=true][class*=sap-icon].fd-button--emphasized{color:#fff;color:var(--sapButton_Emphasized_TextColor,#fff);border-color:#0854a0;border-color:var(--sapButton_Emphasized_Active_BorderColor,#0854a0);background-color:#0854a0;background-color:var(--sapButton_Emphasized_Active_Background,#0854a0)}.fd-button.is-focus,.fd-button:focus{z-index:5}.fd-button.is-focus,.fd-button.is-focus[class*=sap-icon],.fd-button:focus,.fd-button:focus[class*=sap-icon]{-webkit-box-shadow:none;box-shadow:none;outline-style:dotted;outline-width:.0625rem;outline-width:var(--sapContent_FocusWidth,.0625rem);outline-color:#000;outline-color:var(--sapContent_FocusColor,#000);outline-offset:-.1875rem}.fd-button.is-focus.fd-button--ghost,.fd-button.is-focus[class*=sap-icon].fd-button--ghost,.fd-button:focus.fd-button--ghost,.fd-button:focus[class*=sap-icon].fd-button--ghost{outline-style:dotted;outline-width:.0625rem;outline-width:var(--sapContent_FocusWidth,.0625rem);outline-color:#000;outline-color:var(--sapContent_FocusColor,#000);outline-offset:-.1875rem}.fd-button.is-focus.fd-button--positive,.fd-button.is-focus[class*=sap-icon].fd-button--positive,.fd-button:focus.fd-button--positive,.fd-button:focus[class*=sap-icon].fd-button--positive{outline-style:dotted;outline-width:.0625rem;outline-width:var(--sapContent_FocusWidth,.0625rem);outline-color:#000;outline-color:var(--sapContent_FocusColor,#000);outline-offset:-.1875rem}.fd-button.is-focus.fd-button--negative,.fd-button.is-focus[class*=sap-icon].fd-button--negative,.fd-button:focus.fd-button--negative,.fd-button:focus[class*=sap-icon].fd-button--negative{outline-style:dotted;outline-width:.0625rem;outline-width:var(--sapContent_FocusWidth,.0625rem);outline-color:#000;outline-color:var(--sapContent_FocusColor,#000);outline-offset:-.1875rem}.fd-button.is-focus.fd-button--attention,.fd-button.is-focus[class*=sap-icon].fd-button--attention,.fd-button:focus.fd-button--attention,.fd-button:focus[class*=sap-icon].fd-button--attention{outline-style:dotted;outline-width:.0625rem;outline-width:var(--sapContent_FocusWidth,.0625rem);outline-color:#000;outline-color:var(--sapContent_FocusColor,#000);outline-offset:-.1875rem}.fd-button.is-focus.fd-button--emphasized,.fd-button.is-focus[class*=sap-icon].fd-button--emphasized,.fd-button:focus.fd-button--emphasized,.fd-button:focus[class*=sap-icon].fd-button--emphasized{outline-style:dotted;outline-width:.0625rem;outline-width:var(--sapContent_FocusWidth,.0625rem);outline-color:#000;outline-color:var(--sapContent_FocusColor,#000);outline-offset:-.1875rem}.fd-button.is-focus.is-active,.fd-button.is-focus.is-active[class*=sap-icon],.fd-button.is-focus.is-pressed,.fd-button.is-focus.is-pressed[class*=sap-icon],.fd-button.is-focus.is-selected,.fd-button.is-focus.is-selected[class*=sap-icon],.fd-button.is-focus:active,.fd-button.is-focus:active[class*=sap-icon],.fd-button.is-focus[aria-pressed=true],.fd-button.is-focus[aria-pressed=true][class*=sap-icon],.fd-button.is-focus[aria-selected=true],.fd-button.is-focus[aria-selected=true][class*=sap-icon],.fd-button:focus.is-active,.fd-button:focus.is-active[class*=sap-icon],.fd-button:focus.is-pressed,.fd-button:focus.is-pressed[class*=sap-icon],.fd-button:focus.is-selected,.fd-button:focus.is-selected[class*=sap-icon],.fd-button:focus:active,.fd-button:focus:active[class*=sap-icon],.fd-button:focus[aria-pressed=true],.fd-button:focus[aria-pressed=true][class*=sap-icon],.fd-button:focus[aria-selected=true],.fd-button:focus[aria-selected=true][class*=sap-icon]{-webkit-box-shadow:none;box-shadow:none;outline-color:#fff;outline-color:var(--sapContent_ContrastFocusColor,#fff)}.fd-button.is-focus.is-active.fd-button--ghost,.fd-button.is-focus.is-active[class*=sap-icon].fd-button--ghost,.fd-button.is-focus.is-pressed.fd-button--ghost,.fd-button.is-focus.is-pressed[class*=sap-icon].fd-button--ghost,.fd-button.is-focus.is-selected.fd-button--ghost,.fd-button.is-focus.is-selected[class*=sap-icon].fd-button--ghost,.fd-button.is-focus:active.fd-button--ghost,.fd-button.is-focus:active[class*=sap-icon].fd-button--ghost,.fd-button.is-focus[aria-pressed=true].fd-button--ghost,.fd-button.is-focus[aria-pressed=true][class*=sap-icon].fd-button--ghost,.fd-button.is-focus[aria-selected=true].fd-button--ghost,.fd-button.is-focus[aria-selected=true][class*=sap-icon].fd-button--ghost,.fd-button:focus.is-active.fd-button--ghost,.fd-button:focus.is-active[class*=sap-icon].fd-button--ghost,.fd-button:focus.is-pressed.fd-button--ghost,.fd-button:focus.is-pressed[class*=sap-icon].fd-button--ghost,.fd-button:focus.is-selected.fd-button--ghost,.fd-button:focus.is-selected[class*=sap-icon].fd-button--ghost,.fd-button:focus:active.fd-button--ghost,.fd-button:focus:active[class*=sap-icon].fd-button--ghost,.fd-button:focus[aria-pressed=true].fd-button--ghost,.fd-button:focus[aria-pressed=true][class*=sap-icon].fd-button--ghost,.fd-button:focus[aria-selected=true].fd-button--ghost,.fd-button:focus[aria-selected=true][class*=sap-icon].fd-button--ghost{outline-color:#fff;outline-color:var(--sapContent_ContrastFocusColor,#fff)}.fd-button.is-focus.is-active.fd-button--positive,.fd-button.is-focus.is-active[class*=sap-icon].fd-button--positive,.fd-button.is-focus.is-pressed.fd-button--positive,.fd-button.is-focus.is-pressed[class*=sap-icon].fd-button--positive,.fd-button.is-focus.is-selected.fd-button--positive,.fd-button.is-focus.is-selected[class*=sap-icon].fd-button--positive,.fd-button.is-focus:active.fd-button--positive,.fd-button.is-focus:active[class*=sap-icon].fd-button--positive,.fd-button.is-focus[aria-pressed=true].fd-button--positive,.fd-button.is-focus[aria-pressed=true][class*=sap-icon].fd-button--positive,.fd-button.is-focus[aria-selected=true].fd-button--positive,.fd-button.is-focus[aria-selected=true][class*=sap-icon].fd-button--positive,.fd-button:focus.is-active.fd-button--positive,.fd-button:focus.is-active[class*=sap-icon].fd-button--positive,.fd-button:focus.is-pressed.fd-button--positive,.fd-button:focus.is-pressed[class*=sap-icon].fd-button--positive,.fd-button:focus.is-selected.fd-button--positive,.fd-button:focus.is-selected[class*=sap-icon].fd-button--positive,.fd-button:focus:active.fd-button--positive,.fd-button:focus:active[class*=sap-icon].fd-button--positive,.fd-button:focus[aria-pressed=true].fd-button--positive,.fd-button:focus[aria-pressed=true][class*=sap-icon].fd-button--positive,.fd-button:focus[aria-selected=true].fd-button--positive,.fd-button:focus[aria-selected=true][class*=sap-icon].fd-button--positive{outline-color:#fff;outline-color:var(--sapContent_ContrastFocusColor,#fff)}.fd-button.is-focus.is-active.fd-button--negative,.fd-button.is-focus.is-active[class*=sap-icon].fd-button--negative,.fd-button.is-focus.is-pressed.fd-button--negative,.fd-button.is-focus.is-pressed[class*=sap-icon].fd-button--negative,.fd-button.is-focus.is-selected.fd-button--negative,.fd-button.is-focus.is-selected[class*=sap-icon].fd-button--negative,.fd-button.is-focus:active.fd-button--negative,.fd-button.is-focus:active[class*=sap-icon].fd-button--negative,.fd-button.is-focus[aria-pressed=true].fd-button--negative,.fd-button.is-focus[aria-pressed=true][class*=sap-icon].fd-button--negative,.fd-button.is-focus[aria-selected=true].fd-button--negative,.fd-button.is-focus[aria-selected=true][class*=sap-icon].fd-button--negative,.fd-button:focus.is-active.fd-button--negative,.fd-button:focus.is-active[class*=sap-icon].fd-button--negative,.fd-button:focus.is-pressed.fd-button--negative,.fd-button:focus.is-pressed[class*=sap-icon].fd-button--negative,.fd-button:focus.is-selected.fd-button--negative,.fd-button:focus.is-selected[class*=sap-icon].fd-button--negative,.fd-button:focus:active.fd-button--negative,.fd-button:focus:active[class*=sap-icon].fd-button--negative,.fd-button:focus[aria-pressed=true].fd-button--negative,.fd-button:focus[aria-pressed=true][class*=sap-icon].fd-button--negative,.fd-button:focus[aria-selected=true].fd-button--negative,.fd-button:focus[aria-selected=true][class*=sap-icon].fd-button--negative{outline-color:#fff;outline-color:var(--sapContent_ContrastFocusColor,#fff)}.fd-button.is-focus.is-active.fd-button--attention,.fd-button.is-focus.is-active[class*=sap-icon].fd-button--attention,.fd-button.is-focus.is-pressed.fd-button--attention,.fd-button.is-focus.is-pressed[class*=sap-icon].fd-button--attention,.fd-button.is-focus.is-selected.fd-button--attention,.fd-button.is-focus.is-selected[class*=sap-icon].fd-button--attention,.fd-button.is-focus:active.fd-button--attention,.fd-button.is-focus:active[class*=sap-icon].fd-button--attention,.fd-button.is-focus[aria-pressed=true].fd-button--attention,.fd-button.is-focus[aria-pressed=true][class*=sap-icon].fd-button--attention,.fd-button.is-focus[aria-selected=true].fd-button--attention,.fd-button.is-focus[aria-selected=true][class*=sap-icon].fd-button--attention,.fd-button:focus.is-active.fd-button--attention,.fd-button:focus.is-active[class*=sap-icon].fd-button--attention,.fd-button:focus.is-pressed.fd-button--attention,.fd-button:focus.is-pressed[class*=sap-icon].fd-button--attention,.fd-button:focus.is-selected.fd-button--attention,.fd-button:focus.is-selected[class*=sap-icon].fd-button--attention,.fd-button:focus:active.fd-button--attention,.fd-button:focus:active[class*=sap-icon].fd-button--attention,.fd-button:focus[aria-pressed=true].fd-button--attention,.fd-button:focus[aria-pressed=true][class*=sap-icon].fd-button--attention,.fd-button:focus[aria-selected=true].fd-button--attention,.fd-button:focus[aria-selected=true][class*=sap-icon].fd-button--attention{outline-color:#fff;outline-color:var(--sapContent_ContrastFocusColor,#fff)}.fd-button.is-focus.is-active.fd-button--emphasized,.fd-button.is-focus.is-active[class*=sap-icon].fd-button--emphasized,.fd-button.is-focus.is-pressed.fd-button--emphasized,.fd-button.is-focus.is-pressed[class*=sap-icon].fd-button--emphasized,.fd-button.is-focus.is-selected.fd-button--emphasized,.fd-button.is-focus.is-selected[class*=sap-icon].fd-button--emphasized,.fd-button.is-focus:active.fd-button--emphasized,.fd-button.is-focus:active[class*=sap-icon].fd-button--emphasized,.fd-button.is-focus[aria-pressed=true].fd-button--emphasized,.fd-button.is-focus[aria-pressed=true][class*=sap-icon].fd-button--emphasized,.fd-button.is-focus[aria-selected=true].fd-button--emphasized,.fd-button.is-focus[aria-selected=true][class*=sap-icon].fd-button--emphasized,.fd-button:focus.is-active.fd-button--emphasized,.fd-button:focus.is-active[class*=sap-icon].fd-button--emphasized,.fd-button:focus.is-pressed.fd-button--emphasized,.fd-button:focus.is-pressed[class*=sap-icon].fd-button--emphasized,.fd-button:focus.is-selected.fd-button--emphasized,.fd-button:focus.is-selected[class*=sap-icon].fd-button--emphasized,.fd-button:focus:active.fd-button--emphasized,.fd-button:focus:active[class*=sap-icon].fd-button--emphasized,.fd-button:focus[aria-pressed=true].fd-button--emphasized,.fd-button:focus[aria-pressed=true][class*=sap-icon].fd-button--emphasized,.fd-button:focus[aria-selected=true].fd-button--emphasized,.fd-button:focus[aria-selected=true][class*=sap-icon].fd-button--emphasized{outline-color:#fff;outline-color:var(--sapContent_ContrastFocusColor,#fff)}.fd-button.is-disabled,.fd-button.is-disabled[class*=sap-icon],.fd-button:disabled,.fd-button:disabled[class*=sap-icon],.fd-button[aria-disabled=true],.fd-button[aria-disabled=true][class*=sap-icon]{opacity:.4;opacity:var(--sapContent_DisabledOpacity,.4);cursor:not-allowed;color:#0854a0;color:var(--sapButton_TextColor,#0854a0);border-color:#0854a0;border-color:var(--sapButton_BorderColor,#0854a0);background-color:#fff;background-color:var(--sapButton_Background,#fff);outline:0;-webkit-box-shadow:none;box-shadow:none}.fd-button.is-disabled:focus,.fd-button.is-disabled[class*=sap-icon]:focus,.fd-button:disabled:focus,.fd-button:disabled[class*=sap-icon]:focus,.fd-button[aria-disabled=true]:focus,.fd-button[aria-disabled=true][class*=sap-icon]:focus{outline:0}.fd-button.is-disabled.fd-button--ghost,.fd-button.is-disabled[class*=sap-icon].fd-button--ghost,.fd-button:disabled.fd-button--ghost,.fd-button:disabled[class*=sap-icon].fd-button--ghost,.fd-button[aria-disabled=true].fd-button--ghost,.fd-button[aria-disabled=true][class*=sap-icon].fd-button--ghost{opacity:.4;opacity:var(--sapContent_DisabledOpacity,.4);cursor:not-allowed;color:#0854a0;color:var(--sapButton_TextColor,#0854a0);border-color:#0854a0;border-color:var(--sapButton_BorderColor,#0854a0);background-color:transparent;background-color:var(--sapButton_Lite_Background,transparent);outline:0;-webkit-box-shadow:none;box-shadow:none}.fd-button.is-disabled.fd-button--ghost:focus,.fd-button.is-disabled[class*=sap-icon].fd-button--ghost:focus,.fd-button:disabled.fd-button--ghost:focus,.fd-button:disabled[class*=sap-icon].fd-button--ghost:focus,.fd-button[aria-disabled=true].fd-button--ghost:focus,.fd-button[aria-disabled=true][class*=sap-icon].fd-button--ghost:focus{outline:0}.fd-button.is-disabled.fd-button--positive,.fd-button.is-disabled[class*=sap-icon].fd-button--positive,.fd-button:disabled.fd-button--positive,.fd-button:disabled[class*=sap-icon].fd-button--positive,.fd-button[aria-disabled=true].fd-button--positive,.fd-button[aria-disabled=true][class*=sap-icon].fd-button--positive{opacity:.4;opacity:var(--sapContent_DisabledOpacity,.4);cursor:not-allowed;color:#107e3e;color:var(--sapButton_Accept_TextColor,#107e3e);border-color:#107e3e;border-color:var(--sapButton_Accept_BorderColor,#107e3e);background-color:#fff;background-color:var(--sapButton_Accept_Background,#fff);-webkit-box-shadow:none;box-shadow:none;outline:0}.fd-button.is-disabled.fd-button--positive:focus,.fd-button.is-disabled[class*=sap-icon].fd-button--positive:focus,.fd-button:disabled.fd-button--positive:focus,.fd-button:disabled[class*=sap-icon].fd-button--positive:focus,.fd-button[aria-disabled=true].fd-button--positive:focus,.fd-button[aria-disabled=true][class*=sap-icon].fd-button--positive:focus{outline:0}.fd-button.is-disabled.fd-button--negative,.fd-button.is-disabled[class*=sap-icon].fd-button--negative,.fd-button:disabled.fd-button--negative,.fd-button:disabled[class*=sap-icon].fd-button--negative,.fd-button[aria-disabled=true].fd-button--negative,.fd-button[aria-disabled=true][class*=sap-icon].fd-button--negative{opacity:.4;opacity:var(--sapContent_DisabledOpacity,.4);cursor:not-allowed;color:#b00;color:var(--sapButton_Reject_TextColor,#b00);border-color:#b00;border-color:var(--sapButton_Reject_BorderColor,#b00);background-color:#fff;background-color:var(--sapButton_Reject_Background,#fff);-webkit-box-shadow:none;box-shadow:none}.fd-button.is-disabled.fd-button--negative:focus,.fd-button.is-disabled[class*=sap-icon].fd-button--negative:focus,.fd-button:disabled.fd-button--negative:focus,.fd-button:disabled[class*=sap-icon].fd-button--negative:focus,.fd-button[aria-disabled=true].fd-button--negative:focus,.fd-button[aria-disabled=true][class*=sap-icon].fd-button--negative:focus{outline:0}.fd-button.is-disabled.fd-button--attention,.fd-button.is-disabled[class*=sap-icon].fd-button--attention,.fd-button:disabled.fd-button--attention,.fd-button:disabled[class*=sap-icon].fd-button--attention,.fd-button[aria-disabled=true].fd-button--attention,.fd-button[aria-disabled=true][class*=sap-icon].fd-button--attention{opacity:.4;opacity:var(--sapContent_DisabledOpacity,.4);cursor:not-allowed;color:#e9730c;color:var(--sapButton_Attention_TextColor,#e9730c);border-color:#e9730c;border-color:var(--sapButton_Attention_BorderColor,#e9730c);background-color:#fff;background-color:var(--sapButton_Attention_Background,#fff);-webkit-box-shadow:none;box-shadow:none}.fd-button.is-disabled.fd-button--attention:focus,.fd-button.is-disabled[class*=sap-icon].fd-button--attention:focus,.fd-button:disabled.fd-button--attention:focus,.fd-button:disabled[class*=sap-icon].fd-button--attention:focus,.fd-button[aria-disabled=true].fd-button--attention:focus,.fd-button[aria-disabled=true][class*=sap-icon].fd-button--attention:focus{outline:0}.fd-button.is-disabled.fd-button--emphasized,.fd-button.is-disabled[class*=sap-icon].fd-button--emphasized,.fd-button:disabled.fd-button--emphasized,.fd-button:disabled[class*=sap-icon].fd-button--emphasized,.fd-button[aria-disabled=true].fd-button--emphasized,.fd-button[aria-disabled=true][class*=sap-icon].fd-button--emphasized{opacity:.4;opacity:var(--sapContent_DisabledOpacity,.4);cursor:not-allowed;color:#fff;color:var(--sapButton_Emphasized_TextColor,#fff);border-color:#0a6ed1;border-color:var(--sapButton_Emphasized_BorderColor,#0a6ed1);background-color:#0a6ed1;background-color:var(--sapButton_Emphasized_Background,#0a6ed1);-webkit-box-shadow:none;box-shadow:none}.fd-button.is-disabled.fd-button--emphasized:focus,.fd-button.is-disabled[class*=sap-icon].fd-button--emphasized:focus,.fd-button:disabled.fd-button--emphasized:focus,.fd-button:disabled[class*=sap-icon].fd-button--emphasized:focus,.fd-button[aria-disabled=true].fd-button--emphasized:focus,.fd-button[aria-disabled=true][class*=sap-icon].fd-button--emphasized:focus{outline:0}.fd-button.is-disabled.fd-button--transparent,.fd-button.is-disabled[class*=sap-icon].fd-button--transparent,.fd-button:disabled.fd-button--transparent,.fd-button:disabled[class*=sap-icon].fd-button--transparent,.fd-button[aria-disabled=true].fd-button--transparent,.fd-button[aria-disabled=true][class*=sap-icon].fd-button--transparent{border-color:transparent;border-color:var(--sapButton_Lite_BorderColor,transparent);background-color:transparent;background-color:var(--sapButton_Lite_Background,transparent);opacity:.4;opacity:var(--sapContent_DisabledOpacity,.4);cursor:not-allowed;-webkit-box-shadow:none;box-shadow:none}.fd-button.is-disabled.fd-button--transparent:focus,.fd-button.is-disabled[class*=sap-icon].fd-button--transparent:focus,.fd-button:disabled.fd-button--transparent:focus,.fd-button:disabled[class*=sap-icon].fd-button--transparent:focus,.fd-button[aria-disabled=true].fd-button--transparent:focus,.fd-button[aria-disabled=true][class*=sap-icon].fd-button--transparent:focus{outline:0}
\ No newline at end of file
diff --git a/container/test-app/assets/icon.css b/container/test-app/assets/icon.css
new file mode 100644
index 0000000000..769a0980f0
--- /dev/null
+++ b/container/test-app/assets/icon.css
@@ -0,0 +1,6 @@
+/*!
+ * Fundamental Library Styles v0.11.2
+ * Copyright (c) 2020 SAP SE or an SAP affiliate company.
+ * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/master/LICENSE)
+ */
+@charset "UTF-8";[class*=sap-icon]{font-size:.875rem;font-size:var(--sapFontSize,.875rem);line-height:1.4;line-height:var(--sapContent_LineHeight,1.4);color:#32363a;color:var(--sapTextColor,#32363a);font-family:"72","72full",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily,"72","72full",Arial,Helvetica,sans-serif);font-weight:400;-webkit-font-smoothing:antialiased;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;border:0;display:inline-block}[class*=sap-icon]:after,[class*=sap-icon]:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}[class*=sap-icon]:before{font-family:SAP-icons;text-align:center;text-decoration:inherit;text-transform:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sap-icon--accidental-leave:before{content:""}.sap-icon--account:before{content:""}.sap-icon--wrench:before{content:""}.sap-icon--windows-doors:before{content:""}.sap-icon--washing-machine:before{content:""}.sap-icon--visits:before{content:""}.sap-icon--video:before{content:""}.sap-icon--travel-expense:before{content:""}.sap-icon--temperature:before{content:""}.sap-icon--task:before{content:""}.sap-icon--synchronize:before{content:""}.sap-icon--survey:before{content:""}.sap-icon--settings:before{content:""}.sap-icon--search:before{content:""}.sap-icon--sales-document:before{content:""}.sap-icon--retail-store:before{content:""}.sap-icon--refresh:before{content:""}.sap-icon--product:before{content:""}.sap-icon--present:before{content:""}.sap-icon--ppt-attachment:before{content:""}.sap-icon--pool:before{content:""}.sap-icon--pie-chart:before{content:""}.sap-icon--picture:before{content:""}.sap-icon--photo-voltaic:before{content:""}.sap-icon--phone:before{content:""}.sap-icon--pending:before{content:""}.sap-icon--pdf-attachment:before{content:""}.sap-icon--past:before{content:""}.sap-icon--outgoing-call:before{content:""}.sap-icon--opportunity:before{content:""}.sap-icon--opportunities:before{content:""}.sap-icon--notes:before{content:""}.sap-icon--money-bills:before{content:""}.sap-icon--map:before{content:""}.sap-icon--log:before{content:""}.sap-icon--line-charts:before{content:""}.sap-icon--lightbulb:before{content:""}.sap-icon--leads:before{content:""}.sap-icon--lead:before{content:""}.sap-icon--laptop:before{content:""}.sap-icon--kpi-managing-my-area:before{content:""}.sap-icon--kpi-corporate-performance:before{content:""}.sap-icon--incoming-call:before{content:""}.sap-icon--inbox:before{content:""}.sap-icon--horizontal-bar-chart:before{content:""}.sap-icon--history:before{content:""}.sap-icon--heating-cooling:before{content:""}.sap-icon--gantt-bars:before{content:""}.sap-icon--future:before{content:""}.sap-icon--fridge:before{content:""}.sap-icon--fallback:before{content:""}.sap-icon--expense-report:before{content:""}.sap-icon--excel-attachment:before{content:""}.sap-icon--energy-saving-lightbulb:before{content:""}.sap-icon--employee:before{content:""}.sap-icon--email:before{content:""}.sap-icon--edit:before{content:""}.sap-icon--duplicate:before{content:""}.sap-icon--download:before{content:""}.sap-icon--doc-attachment:before{content:""}.sap-icon--dishwasher:before{content:""}.sap-icon--delete:before{content:""}.sap-icon--decline:before{content:""}.sap-icon--complete:before{content:""}.sap-icon--competitor:before{content:""}.sap-icon--collections-management:before{content:""}.sap-icon--chalkboard:before{content:""}.sap-icon--cart:before{content:""}.sap-icon--card:before{content:""}.sap-icon--camera:before{content:""}.sap-icon--calendar:before{content:""}.sap-icon--begin:before{content:""}.sap-icon--basket:before{content:""}.sap-icon--bar-chart:before{content:""}.sap-icon--attachment:before{content:""}.sap-icon--arrow-top:before{content:""}.sap-icon--arrow-right:before{content:""}.sap-icon--arrow-left:before{content:""}.sap-icon--arrow-bottom:before{content:""}.sap-icon--approvals:before{content:""}.sap-icon--appointment:before{content:""}.sap-icon--alphabetical-order:before{content:""}.sap-icon--along-stacked-chart:before{content:""}.sap-icon--alert:before{content:""}.sap-icon--addresses:before{content:""}.sap-icon--address-book:before{content:""}.sap-icon--add-filter:before{content:""}.sap-icon--add-favorite:before{content:""}.sap-icon--add:before{content:""}.sap-icon--activities:before{content:""}.sap-icon--action:before{content:""}.sap-icon--accept:before{content:""}.sap-icon--hint:before{content:""}.sap-icon--group:before{content:""}.sap-icon--check-availability:before{content:""}.sap-icon--weather-proofing:before{content:""}.sap-icon--payment-approval:before{content:""}.sap-icon--batch-payments:before{content:""}.sap-icon--bed:before{content:""}.sap-icon--arobase:before{content:""}.sap-icon--family-care:before{content:""}.sap-icon--favorite:before{content:""}.sap-icon--navigation-right-arrow:before{content:""}.sap-icon--navigation-left-arrow:before{content:""}.sap-icon--e-care:before{content:""}.sap-icon--less:before{content:""}.sap-icon--lateness:before{content:""}.sap-icon--lab:before{content:""}.sap-icon--internet-browser:before{content:""}.sap-icon--instance:before{content:""}.sap-icon--inspection:before{content:""}.sap-icon--image-viewer:before{content:""}.sap-icon--home:before{content:""}.sap-icon--grid:before{content:""}.sap-icon--goalseek:before{content:""}.sap-icon--general-leave-request:before{content:""}.sap-icon--create-leave-request:before{content:""}.sap-icon--flight:before{content:""}.sap-icon--filter:before{content:""}.sap-icon--favorite-list:before{content:""}.sap-icon--factory:before{content:""}.sap-icon--endoscopy:before{content:""}.sap-icon--employee-pane:before{content:""}.sap-icon--employee-approvals:before{content:""}.sap-icon--email-read:before{content:""}.sap-icon--electrocardiogram:before{content:""}.sap-icon--documents:before{content:""}.sap-icon--decision:before{content:""}.sap-icon--database:before{content:""}.sap-icon--customer-history:before{content:""}.sap-icon--customer:before{content:""}.sap-icon--credit-card:before{content:""}.sap-icon--create-entry-time:before{content:""}.sap-icon--contacts:before{content:""}.sap-icon--compare:before{content:""}.sap-icon--clinical-order:before{content:""}.sap-icon--chain-link:before{content:""}.sap-icon--pull-down:before{content:""}.sap-icon--cargo-train:before{content:""}.sap-icon--car-rental:before{content:""}.sap-icon--business-card:before{content:""}.sap-icon--bar-code:before{content:""}.sap-icon--folder-blank:before{content:""}.sap-icon--passenger-train:before{content:""}.sap-icon--question-mark:before{content:""}.sap-icon--world:before{content:""}.sap-icon--iphone:before{content:""}.sap-icon--ipad:before{content:""}.sap-icon--warning:before{content:""}.sap-icon--sort:before{content:""}.sap-icon--course-book:before{content:""}.sap-icon--course-program:before{content:""}.sap-icon--add-coursebook:before{content:""}.sap-icon--print:before{content:""}.sap-icon--save:before{content:""}.sap-icon--play:before{content:""}.sap-icon--pause:before{content:""}.sap-icon--record:before{content:""}.sap-icon--response:before{content:""}.sap-icon--pushpin-on:before{content:""}.sap-icon--pushpin-off:before{content:""}.sap-icon--unfavorite:before{content:""}.sap-icon--learning-assistant:before{content:""}.sap-icon--timesheet:before{content:""}.sap-icon--time-entry-request:before{content:""}.sap-icon--list:before{content:""}.sap-icon--action-settings:before{content:""}.sap-icon--share:before{content:""}.sap-icon--feed:before{content:""}.sap-icon--role:before{content:""}.sap-icon--flag:before{content:""}.sap-icon--post:before{content:""}.sap-icon--inspect:before{content:""}.sap-icon--inspect-down:before{content:""}.sap-icon--appointment-2:before{content:""}.sap-icon--target-group:before{content:""}.sap-icon--marketing-campaign:before{content:""}.sap-icon--message-error:before{content:""}.sap-icon--notification:before{content:""}.sap-icon--comment:before{content:""}.sap-icon--shipping-status:before{content:""}.sap-icon--collaborate:before{content:""}.sap-icon--shortcut:before{content:""}.sap-icon--lead-outdated:before{content:""}.sap-icon--tools-opportunity:before{content:""}.sap-icon--permission:before{content:""}.sap-icon--supplier:before{content:""}.sap-icon--table-view:before{content:""}.sap-icon--table-chart:before{content:""}.sap-icon--switch-views:before{content:""}.sap-icon--e-learning:before{content:""}.sap-icon--manager:before{content:""}.sap-icon--switch-classes:before{content:""}.sap-icon--simple-payment:before{content:""}.sap-icon--signature:before{content:""}.sap-icon--sales-order-item:before{content:""}.sap-icon--sales-order:before{content:""}.sap-icon--request:before{content:""}.sap-icon--receipt:before{content:""}.sap-icon--puzzle:before{content:""}.sap-icon--process:before{content:""}.sap-icon--private:before{content:""}.sap-icon--popup-window:before{content:""}.sap-icon--person-placeholder:before{content:""}.sap-icon--per-diem:before{content:""}.sap-icon--paper-plane:before{content:""}.sap-icon--paid-leave:before{content:""}.sap-icon--pdf-reader:before{content:""}.sap-icon--overview-chart:before{content:""}.sap-icon--overlay:before{content:""}.sap-icon--org-chart:before{content:""}.sap-icon--number-sign:before{content:""}.sap-icon--notification-2:before{content:""}.sap-icon--my-sales-order:before{content:""}.sap-icon--meal:before{content:""}.sap-icon--loan:before{content:""}.sap-icon--order-status:before{content:""}.sap-icon--customer-order-entry:before{content:""}.sap-icon--performance:before{content:""}.sap-icon--menu:before{content:""}.sap-icon--employee-lookup:before{content:""}.sap-icon--education:before{content:""}.sap-icon--customer-briefing:before{content:""}.sap-icon--customer-and-contacts:before{content:""}.sap-icon--my-view:before{content:""}.sap-icon--accelerated:before{content:""}.sap-icon--to-be-reviewed:before{content:""}.sap-icon--warning2:before{content:""}.sap-icon--feeder-arrow:before{content:""}.sap-icon--quality-issue:before{content:""}.sap-icon--workflow-tasks:before{content:""}.sap-icon--create:before{content:""}.sap-icon--home-share:before{content:""}.sap-icon--globe:before{content:""}.sap-icon--tags:before{content:""}.sap-icon--work-history:before{content:""}.sap-icon--x-ray:before{content:""}.sap-icon--wounds-doc:before{content:""}.sap-icon--web-cam:before{content:""}.sap-icon--waiver:before{content:""}.sap-icon--vertical-bar-chart:before{content:""}.sap-icon--upstacked-chart:before{content:""}.sap-icon--trip-report:before{content:""}.sap-icon--microphone:before{content:""}.sap-icon--unpaid-leave:before{content:""}.sap-icon--tree:before{content:""}.sap-icon--toaster-up:before{content:""}.sap-icon--toaster-top:before{content:""}.sap-icon--toaster-down:before{content:""}.sap-icon--time-account:before{content:""}.sap-icon--theater:before{content:""}.sap-icon--taxi:before{content:""}.sap-icon--subway-train:before{content:""}.sap-icon--study-leave:before{content:""}.sap-icon--stethoscope:before{content:""}.sap-icon--step:before{content:""}.sap-icon--sonography:before{content:""}.sap-icon--soccor:before{content:""}.sap-icon--physical-activity:before{content:""}.sap-icon--pharmacy:before{content:""}.sap-icon--official-service:before{content:""}.sap-icon--offsite-work:before{content:""}.sap-icon--nutrition-activity:before{content:""}.sap-icon--newspaper:before{content:""}.sap-icon--monitor-payments:before{content:""}.sap-icon--map-2:before{content:""}.sap-icon--machine:before{content:""}.sap-icon--mri-scan:before{content:""}.sap-icon--end-user-experience-monitoring:before{content:""}.sap-icon--unwired:before{content:""}.sap-icon--customer-financial-fact-sheet:before{content:""}.sap-icon--retail-store-manager:before{content:""}.sap-icon--Netweaver-business-client:before{content:""}.sap-icon--electronic-medical-record:before{content:""}.sap-icon--eam-work-order:before{content:""}.sap-icon--customer-view:before{content:""}.sap-icon--crm-service-manager:before{content:""}.sap-icon--crm-sales:before{content:""}.sap-icon--widgets:before{content:""}.sap-icon--commission-check:before{content:""}.sap-icon--collections-insight:before{content:""}.sap-icon--clinical-tast-tracker:before{content:""}.sap-icon--citizen-connect:before{content:""}.sap-icon--cart-approval:before{content:""}.sap-icon--capital-projects:before{content:""}.sap-icon--bo-strategy-management:before{content:""}.sap-icon--business-objects-mobile:before{content:""}.sap-icon--business-objects-explorer:before{content:""}.sap-icon--business-objects-experience:before{content:""}.sap-icon--bbyd-dashboard:before{content:""}.sap-icon--bbyd-active-sales:before{content:""}.sap-icon--business-by-design:before{content:""}.sap-icon--business-one:before{content:""}.sap-icon--sap-box:before{content:""}.sap-icon--manager-insight:before{content:""}.sap-icon--accounting-document-verification:before{content:""}.sap-icon--hr-approval:before{content:""}.sap-icon--idea-wall:before{content:""}.sap-icon--Chart-Tree-Map:before{content:""}.sap-icon--cart-5:before{content:""}.sap-icon--cart-4:before{content:""}.sap-icon--wallet:before{content:""}.sap-icon--vehicle-repair:before{content:""}.sap-icon--upload:before{content:""}.sap-icon--unlocked:before{content:""}.sap-icon--umbrella:before{content:""}.sap-icon--travel-request:before{content:""}.sap-icon--travel-expense-report:before{content:""}.sap-icon--travel-itinerary:before{content:""}.sap-icon--time-overtime:before{content:""}.sap-icon--thing-type:before{content:""}.sap-icon--technical-object:before{content:""}.sap-icon--tag:before{content:""}.sap-icon--syringe:before{content:""}.sap-icon--syntax:before{content:""}.sap-icon--suitcase:before{content:""}.sap-icon--simulate:before{content:""}.sap-icon--shield:before{content:""}.sap-icon--share-2:before{content:""}.sap-icon--sales-quote:before{content:""}.sap-icon--repost:before{content:""}.sap-icon--provision:before{content:""}.sap-icon--projector:before{content:""}.sap-icon--add-product:before{content:""}.sap-icon--pipeline-analysis:before{content:""}.sap-icon--add-photo:before{content:""}.sap-icon--palette:before{content:""}.sap-icon--nurse:before{content:""}.sap-icon--sales-notification:before{content:""}.sap-icon--mileage:before{content:""}.sap-icon--meeting-room:before{content:""}.sap-icon--media-forward:before{content:""}.sap-icon--media-play:before{content:""}.sap-icon--media-pause:before{content:""}.sap-icon--media-reverse:before{content:""}.sap-icon--media-rewind:before{content:""}.sap-icon--measurement-document:before{content:""}.sap-icon--measuring-point:before{content:""}.sap-icon--measure:before{content:""}.sap-icon--map-3:before{content:""}.sap-icon--locked:before{content:""}.sap-icon--letter:before{content:""}.sap-icon--journey-arrive:before{content:""}.sap-icon--journey-change:before{content:""}.sap-icon--journey-depart:before{content:""}.sap-icon--it-system:before{content:""}.sap-icon--it-instance:before{content:""}.sap-icon--it-host:before{content:""}.sap-icon--iphone-2:before{content:""}.sap-icon--ipad-2:before{content:""}.sap-icon--inventory:before{content:""}.sap-icon--insurance-house:before{content:""}.sap-icon--insurance-life:before{content:""}.sap-icon--insurance-car:before{content:""}.sap-icon--initiative:before{content:""}.sap-icon--incident:before{content:""}.sap-icon--group-2:before{content:""}.sap-icon--goal:before{content:""}.sap-icon--functional-location:before{content:""}.sap-icon--full-screen:before{content:""}.sap-icon--form:before{content:""}.sap-icon--fob-watch:before{content:""}.sap-icon--blank-tag:before{content:""}.sap-icon--family-protection:before{content:""}.sap-icon--folder:before{content:""}.sap-icon--fax-machine:before{content:""}.sap-icon--example:before{content:""}.sap-icon--eraser:before{content:""}.sap-icon--employee-rejections:before{content:""}.sap-icon--drop-down-list:before{content:""}.sap-icon--draw-rectangle:before{content:""}.sap-icon--document:before{content:""}.sap-icon--doctor:before{content:""}.sap-icon--discussion-2:before{content:""}.sap-icon--discussion:before{content:""}.sap-icon--dimension:before{content:""}.sap-icon--customer-and-supplier:before{content:""}.sap-icon--crop:before{content:""}.sap-icon--add-contact:before{content:""}.sap-icon--compare-2:before{content:""}.sap-icon--color-fill:before{content:""}.sap-icon--collision:before{content:""}.sap-icon--curriculum:before{content:""}.sap-icon--chart-axis:before{content:""}.sap-icon--full-stacked-chart:before{content:""}.sap-icon--full-stacked-column-chart:before{content:""}.sap-icon--vertical-bar-chart-2:before{content:""}.sap-icon--horizontal-bar-chart-2:before{content:""}.sap-icon--horizontal-stacked-chart:before{content:""}.sap-icon--vertical-stacked-chart:before{content:""}.sap-icon--choropleth-chart:before{content:""}.sap-icon--geographic-bubble-chart:before{content:""}.sap-icon--multiple-radar-chart:before{content:""}.sap-icon--radar-chart:before{content:""}.sap-icon--crossed-line-chart:before{content:""}.sap-icon--multiple-line-chart:before{content:""}.sap-icon--multiple-bar-chart:before{content:""}.sap-icon--line-chart:before{content:""}.sap-icon--line-chart-dual-axis:before{content:""}.sap-icon--bubble-chart:before{content:""}.sap-icon--scatter-chart:before{content:""}.sap-icon--multiple-pie-chart:before{content:""}.sap-icon--column-chart-dual-axis:before{content:""}.sap-icon--tag-cloud-chart:before{content:""}.sap-icon--area-chart:before{content:""}.sap-icon--cause:before{content:""}.sap-icon--cart-3:before{content:""}.sap-icon--cart-2:before{content:""}.sap-icon--bus-public-transport:before{content:""}.sap-icon--burglary:before{content:""}.sap-icon--building:before{content:""}.sap-icon--border:before{content:""}.sap-icon--bookmark:before{content:""}.sap-icon--badge:before{content:""}.sap-icon--attachment-audio:before{content:""}.sap-icon--attachment-video:before{content:""}.sap-icon--attachment-html:before{content:""}.sap-icon--attachment-photo:before{content:""}.sap-icon--attachment-e-pub:before{content:""}.sap-icon--attachment-zip-file:before{content:""}.sap-icon--attachment-text-file:before{content:""}.sap-icon--add-equipment:before{content:""}.sap-icon--add-activity:before{content:""}.sap-icon--activity-individual:before{content:""}.sap-icon--activity-2:before{content:""}.sap-icon--add-activity-2:before{content:""}.sap-icon--activity-items:before{content:""}.sap-icon--activity-assigned-to-goal:before{content:""}.sap-icon--status-positive:before{content:""}.sap-icon--status-completed:before{content:""}.sap-icon--status-negative:before{content:""}.sap-icon--status-error:before{content:""}.sap-icon--status-inactive:before{content:""}.sap-icon--status-critical:before{content:""}.sap-icon--status-in-progress:before{content:""}.sap-icon--blank-tag-2:before{content:""}.sap-icon--cart-full:before{content:""}.sap-icon--locate-me:before{content:""}.sap-icon--paging:before{content:""}.sap-icon--company-view:before{content:""}.sap-icon--document-text:before{content:""}.sap-icon--explorer:before{content:""}.sap-icon--personnel-view:before{content:""}.sap-icon--sorting-ranking:before{content:""}.sap-icon--drill-down:before{content:""}.sap-icon--drill-up:before{content:""}.sap-icon--vds-file:before{content:""}.sap-icon--sap-logo-shape:before{content:""}.sap-icon--folder-full:before{content:""}.sap-icon--system-exit:before{content:""}.sap-icon--system-exit-2:before{content:""}.sap-icon--close-command-field:before{content:""}.sap-icon--open-command-field:before{content:""}.sap-icon--sys-enter-2:before{content:""}.sap-icon--sys-enter:before{content:""}.sap-icon--sys-help-2:before{content:""}.sap-icon--sys-help:before{content:""}.sap-icon--sys-back:before{content:""}.sap-icon--sys-back-2:before{content:""}.sap-icon--sys-cancel:before{content:""}.sap-icon--sys-cancel-2:before{content:""}.sap-icon--open-folder:before{content:""}.sap-icon--sys-find-next:before{content:""}.sap-icon--sys-find:before{content:""}.sap-icon--sys-monitor:before{content:""}.sap-icon--sys-prev-page:before{content:""}.sap-icon--sys-first-page:before{content:""}.sap-icon--sys-next-page:before{content:""}.sap-icon--sys-last-page:before{content:""}.sap-icon--generate-shortcut:before{content:""}.sap-icon--create-session:before{content:""}.sap-icon--display-more:before{content:""}.sap-icon--enter-more:before{content:""}.sap-icon--zoom-in:before{content:""}.sap-icon--zoom-out:before{content:""}.sap-icon--header:before{content:""}.sap-icon--detail-view:before{content:""}.sap-icon--show-edit:before{content:""}.sap-icon--collapse:before{content:""}.sap-icon--expand:before{content:""}.sap-icon--positive:before{content:""}.sap-icon--negative:before{content:""}.sap-icon--display:before{content:""}.sap-icon--menu2:before{content:""}.sap-icon--redo:before{content:""}.sap-icon--undo:before{content:""}.sap-icon--navigation-up-arrow:before{content:""}.sap-icon--navigation-down-arrow:before{content:""}.sap-icon--down:before{content:""}.sap-icon--up:before{content:""}.sap-icon--shelf:before{content:""}.sap-icon--background:before{content:""}.sap-icon--resize:before{content:""}.sap-icon--move:before{content:""}.sap-icon--show:before{content:""}.sap-icon--hide:before{content:""}.sap-icon--nav-back:before{content:""}.sap-icon--error:before{content:""}.sap-icon--slim-arrow-right:before{content:""}.sap-icon--slim-arrow-left:before{content:""}.sap-icon--slim-arrow-down:before{content:""}.sap-icon--slim-arrow-up:before{content:""}.sap-icon--forward:before{content:""}.sap-icon--overflow:before{content:""}.sap-icon--value-help:before{content:""}.sap-icon--multiselect:before{content:""}.sap-icon--exitfullscreen:before{content:""}.sap-icon--sys-add:before{content:""}.sap-icon--sys-minus:before{content:""}.sap-icon--dropdown:before{content:""}.sap-icon--expand-group:before{content:""}.sap-icon--vertical-grip:before{content:""}.sap-icon--horizontal-grip:before{content:""}.sap-icon--sort-descending:before{content:""}.sap-icon--sort-ascending:before{content:""}.sap-icon--arrow-down:before{content:""}.sap-icon--legend:before{content:""}.sap-icon--collapse-group:before{content:""}.sap-icon--message-warning:before{content:""}.sap-icon--message-information:before{content:""}.sap-icon--message-success:before{content:""}.sap-icon--restart:before{content:""}.sap-icon--stop:before{content:""}.sap-icon--add-process:before{content:""}.sap-icon--cancel-maintenance:before{content:""}.sap-icon--activate:before{content:""}.sap-icon--resize-horizontal:before{content:""}.sap-icon--resize-vertical:before{content:""}.sap-icon--connected:before{content:""}.sap-icon--disconnected:before{content:""}.sap-icon--edit-outside:before{content:""}.sap-icon--key:before{content:""}.sap-icon--minimize:before{content:""}.sap-icon--back-to-top:before{content:""}.sap-icon--hello-world:before{content:""}.sap-icon--outbox:before{content:""}.sap-icon--donut-chart:before{content:""}.sap-icon--heatmap-chart:before{content:""}.sap-icon--horizontal-bullet-chart:before{content:""}.sap-icon--vertical-bullet-chart:before{content:""}.sap-icon--call:before{content:""}.sap-icon--download-from-cloud:before{content:""}.sap-icon--upload-to-cloud:before{content:""}.sap-icon--jam:before{content:""}.sap-icon--sap-ui5:before{content:""}.sap-icon--message-popup:before{content:""}.sap-icon--cloud:before{content:""}.sap-icon--horizontal-waterfall-chart:before{content:""}.sap-icon--vertical-waterfall-chart:before{content:""}.sap-icon--broken-link:before{content:""}.sap-icon--headset:before{content:""}.sap-icon--thumb-up:before{content:""}.sap-icon--thumb-down:before{content:""}.sap-icon--multiselect-all:before{content:""}.sap-icon--multiselect-none:before{content:""}.sap-icon--scissors:before{content:""}.sap-icon--sound:before{content:""}.sap-icon--sound-loud:before{content:""}.sap-icon--sound-off:before{content:""}.sap-icon--date-time:before{content:""}.sap-icon--user-settings:before{content:""}.sap-icon--key-user-settings:before{content:""}.sap-icon--developer-settings:before{content:""}.sap-icon--text-formatting:before{content:""}.sap-icon--bold-text:before{content:""}.sap-icon--italic-text:before{content:""}.sap-icon--underline-text:before{content:""}.sap-icon--text-align-justified:before{content:""}.sap-icon--text-align-left:before{content:""}.sap-icon--text-align-center:before{content:""}.sap-icon--text-align-right:before{content:""}.sap-icon--bullet-text:before{content:""}.sap-icon--numbered-text:before{content:""}.sap-icon--co:before{content:""}.sap-icon--ui-notifications:before{content:""}.sap-icon--bell:before{content:""}.sap-icon--cancel-share:before{content:""}.sap-icon--write-new-document:before{content:""}.sap-icon--write-new:before{content:""}.sap-icon--cancel:before{content:""}.sap-icon--screen-split-one:before{content:""}.sap-icon--screen-split-two:before{content:""}.sap-icon--screen-split-three:before{content:""}.sap-icon--customize:before{content:""}.sap-icon--user-edit:before{content:""}.sap-icon--source-code:before{content:""}.sap-icon--copy:before{content:""}.sap-icon--paste:before{content:""}.sap-icon--line-chart-time-axis:before{content:""}.sap-icon--clear-filter:before{content:""}.sap-icon--reset:before{content:""}.sap-icon--trend-up:before{content:""}.sap-icon--trend-down:before{content:""}.sap-icon--cursor:before{content:""}.sap-icon--add-document:before{content:""}.sap-icon--create-form:before{content:""}.sap-icon--resize-corner:before{content:""}.sap-icon--chevron-phase:before{content:""}.sap-icon--chevron-phase-2:before{content:""}.sap-icon--rhombus-milestone:before{content:""}.sap-icon--rhombus-milestone-2:before{content:""}.sap-icon--circle-task:before{content:""}.sap-icon--circle-task-2:before{content:""}.sap-icon--project-definition-triangle:before{content:""}.sap-icon--project-definition-triangle-2:before{content:""}.sap-icon--master-task-triangle:before{content:""}.sap-icon--master-task-triangle-2:before{content:""}.sap-icon--program-triangles:before{content:""}.sap-icon--program-triangles-2:before{content:""}.sap-icon--mirrored-task-circle:before{content:""}.sap-icon--mirrored-task-circle-2:before{content:""}.sap-icon--checklist-item:before{content:""}.sap-icon--checklist-item-2:before{content:""}.sap-icon--checklist:before{content:""}.sap-icon--checklist-2:before{content:""}.sap-icon--chart-table-view:before{content:""}.sap-icon--filter-analytics:before{content:""}.sap-icon--filter-facets:before{content:""}.sap-icon--filter-fields:before{content:""}.sap-icon--indent:before{content:""}.sap-icon--outdent:before{content:""}.sap-icon--heading-1:before{content:""}.sap-icon--heading-2:before{content:""}.sap-icon--heading-3:before{content:""}.sap-icon--decrease-line-height:before{content:""}.sap-icon--increase-line-height:before{content:""}.sap-icon--fx:before{content:""}.sap-icon--add-folder:before{content:""}.sap-icon--away:before{content:""}.sap-icon--busy:before{content:""}.sap-icon--appear-offline:before{content:""}.sap-icon--blur:before{content:""}.sap-icon--pixelate:before{content:""}.sap-icon--horizontal-combination-chart:before{content:""}.sap-icon--add-employee:before{content:""}.sap-icon--text-color:before{content:""}.sap-icon--browse-folder:before{content:""}.sap-icon--primary-key:before{content:""}.sap-icon--two-keys:before{content:""}.sap-icon--strikethrough:before{content:""}.sap-icon--text:before{content:""}.sap-icon--responsive:before{content:""}.sap-icon--desktop-mobile:before{content:""}.sap-icon--table-row:before{content:""}.sap-icon--table-column:before{content:""}.sap-icon--validate:before{content:""}.sap-icon--keyboard-and-mouse:before{content:""}.sap-icon--touch:before{content:""}.sap-icon--expand-all:before{content:""}.sap-icon--collapse-all:before{content:""}.sap-icon--combine:before{content:""}.sap-icon--split:before{content:""}.sap-icon--megamenu:before{content:""}.sap-icon--feedback:before{content:""}.sap-icon--information:before{content:""}
\ No newline at end of file
diff --git a/container/test-app/assets/input.css b/container/test-app/assets/input.css
new file mode 100644
index 0000000000..6e12727c29
--- /dev/null
+++ b/container/test-app/assets/input.css
@@ -0,0 +1,8 @@
+/*!
+ * Fundamental Library Styles v0.11.2
+ * Copyright (c) 2020 SAP SE or an SAP affiliate company.
+ * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/master/LICENSE)
+ */
+/*!
+.fd-input
+*/.fd-input{font-size:.875rem;font-size:var(--sapFontSize,.875rem);line-height:1.4;line-height:var(--sapContent_LineHeight,1.4);color:var(--sapTextColor,#32363a);font-family:"72","72full",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily,"72","72full",Arial,Helvetica,sans-serif);font-weight:400;-webkit-font-smoothing:antialiased;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;text-overflow:ellipsis;color:#32363a;color:var(--sapField_TextColor,#32363a);background-color:#fff;background-color:var(--sapField_Background,#fff);border-style:solid;border-width:.0625rem;border-width:var(--sapField_BorderWidth,.0625rem);border-color:#89919a;border-color:var(--sapField_BorderColor,#89919a);border-radius:.125rem;border-radius:var(--sapField_BorderCornerRadius,.125rem);outline:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-left:.75rem;padding-right:.75rem;min-width:2.75rem;width:100%;height:2.25rem;margin-top:.25rem;margin-bottom:.25rem;padding:0 .625rem;z-index:1;cursor:text;overflow:hidden}.fd-input:after,.fd-input:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-input::-webkit-input-placeholder{font-style:italic;color:#74777a;color:var(--sapField_PlaceholderTextColor,#74777a)}.fd-input::-moz-placeholder{font-style:italic;color:#74777a;color:var(--sapField_PlaceholderTextColor,#74777a)}.fd-input:-ms-input-placeholder{font-style:italic;color:#74777a;color:var(--sapField_PlaceholderTextColor,#74777a)}.fd-input::-ms-input-placeholder{font-style:italic;color:#74777a;color:var(--sapField_PlaceholderTextColor,#74777a)}.fd-input::placeholder{font-style:italic;color:#74777a;color:var(--sapField_PlaceholderTextColor,#74777a)}.fd-input::-moz-selection{color:#fff;color:var(--sapContent_ContrastTextColor,#fff);background-color:#0854a0;background-color:var(--sapSelectedColor,#0854a0)}.fd-input::selection{color:#fff;color:var(--sapContent_ContrastTextColor,#fff);background-color:#0854a0;background-color:var(--sapSelectedColor,#0854a0)}.fd-input.is-hover,.fd-input:hover{background-color:#fff;background-color:var(--sapField_Hover_Background,#fff);border-color:#0854a0;border-color:var(--sapField_Hover_BorderColor,#0854a0)}.fd-input.is-success{background-color:#fff;background-color:var(--sapField_SuccessBackground,#fff);border-color:#107e3e;border-color:var(--sapField_SuccessColor,#107e3e);border-width:.0625rem}.fd-input.is-success.is-hover,.fd-input.is-success:hover{background-color:#fff;background-color:var(--sapField_SuccessBackground,#fff);border-color:#107e3e;border-color:var(--sapField_SuccessColor,#107e3e)}.fd-input.is-error{background-color:#fff;background-color:var(--sapField_InvalidBackground,#fff);border-color:#b00;border-color:var(--sapField_InvalidColor,#b00)}.fd-input.is-error.is-hover,.fd-input.is-error:hover{background-color:#fff;background-color:var(--sapField_InvalidBackground,#fff);border-color:#b00;border-color:var(--sapField_InvalidColor,#b00)}.fd-input.is-alert,.fd-input.is-warning{background-color:#fff;background-color:var(--sapField_WarningBackground,#fff);border-color:#e9730c;border-color:var(--sapField_WarningColor,#e9730c)}.fd-input.is-alert.is-hover,.fd-input.is-alert:hover,.fd-input.is-warning.is-hover,.fd-input.is-warning:hover{background-color:#fff;background-color:var(--sapField_WarningBackground,#fff);border-color:#e9730c;border-color:var(--sapField_WarningColor,#e9730c)}.fd-input.is-information{background-color:#fff;background-color:var(--sapField_InformationBackground,#fff);border-color:#0a6ed1;border-color:var(--sapField_InformationColor,#0a6ed1)}.fd-input.is-information.is-hover,.fd-input.is-information:hover{background-color:#fff;background-color:var(--sapField_InformationBackground,#fff);border-color:#0a6ed1;border-color:var(--sapField_InformationColor,#0a6ed1)}.fd-input.is-focus,.fd-input:focus{z-index:5;-webkit-box-shadow:none;box-shadow:none;outline-offset:-.1875rem;outline-width:.0625rem;outline-width:var(--sapContent_FocusWidth,.0625rem);outline-color:#000;outline-color:var(--sapContent_FocusColor,#000);outline-style:dotted;outline-style:var(--sapContent_FocusStyle,dotted)}.fd-input.is-alert,.fd-input.is-error,.fd-input.is-information,.fd-input.is-warning{border-width:.125rem}.fd-input.is-alert.is-focus,.fd-input.is-alert:focus,.fd-input.is-error.is-focus,.fd-input.is-error:focus,.fd-input.is-information.is-focus,.fd-input.is-information:focus,.fd-input.is-warning.is-focus,.fd-input.is-warning:focus{z-index:5;-webkit-box-shadow:none;box-shadow:none;outline-offset:-.25rem}.fd-input.is-disabled,.fd-input:disabled,.fd-input[aria-disabled=true]{pointer-events:none;opacity:.4;opacity:var(--sapContent_DisabledOpacity,.4)}.fd-input.is-disabled::-webkit-input-placeholder,.fd-input:disabled::-webkit-input-placeholder,.fd-input[aria-disabled=true]::-webkit-input-placeholder{color:transparent}.fd-input.is-disabled::-moz-placeholder,.fd-input:disabled::-moz-placeholder,.fd-input[aria-disabled=true]::-moz-placeholder{color:transparent}.fd-input.is-disabled:-ms-input-placeholder,.fd-input:disabled:-ms-input-placeholder,.fd-input[aria-disabled=true]:-ms-input-placeholder{color:transparent}.fd-input.is-disabled::-ms-input-placeholder,.fd-input:disabled::-ms-input-placeholder,.fd-input[aria-disabled=true]::-ms-input-placeholder{color:transparent}.fd-input.is-disabled::placeholder,.fd-input:disabled::placeholder,.fd-input[aria-disabled=true]::placeholder{color:transparent}.fd-input.is-readonly,.fd-input[aria-readonly=true],.fd-input[readonly]{background-color:hsla(0,0%,94.9%,.5);background-color:var(--sapField_ReadOnly_Background,hsla(0,0%,94.9%,.5));border-color:#89919a;border-color:var(--sapField_ReadOnly_BorderColor,#89919a)}.fd-input.is-readonly::-webkit-input-placeholder,.fd-input[aria-readonly=true]::-webkit-input-placeholder,.fd-input[readonly]::-webkit-input-placeholder{color:transparent}.fd-input.is-readonly::-moz-placeholder,.fd-input[aria-readonly=true]::-moz-placeholder,.fd-input[readonly]::-moz-placeholder{color:transparent}.fd-input.is-readonly:-ms-input-placeholder,.fd-input[aria-readonly=true]:-ms-input-placeholder,.fd-input[readonly]:-ms-input-placeholder{color:transparent}.fd-input.is-readonly::-ms-input-placeholder,.fd-input[aria-readonly=true]::-ms-input-placeholder,.fd-input[readonly]::-ms-input-placeholder{color:transparent}.fd-input.is-readonly::placeholder,.fd-input[aria-readonly=true]::placeholder,.fd-input[readonly]::placeholder{color:transparent}.fd-input::-ms-clear{display:none}.fd-input[aria-expanded=false]{z-index:0}.fd-input[aria-expanded=true]{z-index:4}.fd-input:last-child{margin-bottom:.25rem}.fd-input--compact{min-width:2rem;height:1.625rem;margin-top:.1875rem;margin-bottom:.1875rem;padding:0 .5rem;-webkit-box-sizing:border-box;box-sizing:border-box}.fd-input--no-number-spinner{-moz-appearance:textfield}.fd-input--no-number-spinner::-webkit-inner-spin-button,.fd-input--no-number-spinner::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fd-input.right-align{text-align:right}
\ No newline at end of file
diff --git a/container/test-app/assets/layout-panel.css b/container/test-app/assets/layout-panel.css
new file mode 100644
index 0000000000..b450ad46f2
--- /dev/null
+++ b/container/test-app/assets/layout-panel.css
@@ -0,0 +1,12 @@
+/*!
+ * Fundamental Library Styles v0.11.2
+ * Copyright (c) 2020 SAP SE or an SAP affiliate company.
+ * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/master/LICENSE)
+ */
+/*!
+.fd-layout-panel
+ .fd-layout-panel__header
+ .fd-layout-panel__title
+ .fd-layout-panel__actions
+ .fd-layout-panel__footer
+*/.fd-layout-panel{font-size:.875rem;font-size:var(--sapFontSize,.875rem);line-height:1.4;line-height:var(--sapContent_LineHeight,1.4);color:#32363a;color:var(--sapTextColor,#32363a);font-family:"72","72full",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily,"72","72full",Arial,Helvetica,sans-serif);font-weight:400;-webkit-font-smoothing:antialiased;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;border:0;border-style:solid;border-width:0;border-color:transparent;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius,.25rem);background-color:#fff;background-color:var(--sapGroup_ContentBackground,#fff);-webkit-box-shadow:0 .3125rem 1.25rem 0 #d9d9d9;-webkit-box-shadow:0 .3125rem 1.25rem 0 var(--sapGroup_ContentBorderColor,#d9d9d9);box-shadow:0 .3125rem 1.25rem 0 #d9d9d9;box-shadow:0 .3125rem 1.25rem 0 var(--sapGroup_ContentBorderColor,#d9d9d9)}.fd-layout-panel:after{content:"";display:table;clear:both}.fd-layout-panel:after,.fd-layout-panel:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-layout-panel__header{font-size:.875rem;font-size:var(--sapFontSize,.875rem);line-height:1.4;line-height:var(--sapContent_LineHeight,1.4);color:#32363a;color:var(--sapTextColor,#32363a);font-family:"72","72full",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily,"72","72full",Arial,Helvetica,sans-serif);font-weight:400;-webkit-font-smoothing:antialiased;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;border:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:2.5rem;line-height:normal;color:#6a6d70;color:var(--sapNeutralTextColor,#6a6d70);padding:1rem 1.5rem;font-size:.75rem;font-size:var(--sapFontSmallSize,.75rem);border-bottom-style:solid;border-bottom-width:.0625rem;border-bottom-width:var(--sapElement_BorderWidth,.0625rem);border-bottom-color:#d9d9d9;border-bottom-color:var(--sapGroup_ContentBorderColor,#d9d9d9)}.fd-layout-panel__header:after,.fd-layout-panel__header:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-layout-panel__head{font-size:.875rem;font-size:var(--sapFontSize,.875rem);line-height:1.4;line-height:var(--sapContent_LineHeight,1.4);color:#32363a;color:var(--sapTextColor,#32363a);font-family:"72","72full",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily,"72","72full",Arial,Helvetica,sans-serif);font-weight:400;-webkit-font-smoothing:antialiased;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;border:0}.fd-layout-panel__head:after,.fd-layout-panel__head:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-layout-panel__title{font-size:.875rem;font-size:var(--sapFontSize,.875rem);line-height:1.4;line-height:var(--sapContent_LineHeight,1.4);font-family:"72","72full",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily,"72","72full",Arial,Helvetica,sans-serif);font-weight:400;-webkit-font-smoothing:antialiased;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;border:0;-webkit-box-flex:1;-ms-flex:1;flex:1;margin-bottom:0;line-height:normal;font-size:1rem;font-size:var(--sapFontLargeSize,1rem);color:#32363a;color:var(--sapTextColor,#32363a)}.fd-layout-panel__title:after,.fd-layout-panel__title:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-layout-panel__description{font-size:.875rem;font-size:var(--sapFontSize,.875rem);line-height:1.4;line-height:var(--sapContent_LineHeight,1.4);color:#32363a;color:var(--sapTextColor,#32363a);font-family:"72","72full",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily,"72","72full",Arial,Helvetica,sans-serif);font-weight:400;-webkit-font-smoothing:antialiased;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;border:0;margin-top:.25rem;color:#6a6d70;color:var(--sapNeutralTextColor,#6a6d70);font-size:.75rem;font-size:var(--sapFontSmallSize,.75rem)}.fd-layout-panel__description:after,.fd-layout-panel__description:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-layout-panel__actions{font-size:.875rem;font-size:var(--sapFontSize,.875rem);line-height:1.4;line-height:var(--sapContent_LineHeight,1.4);color:#32363a;color:var(--sapTextColor,#32363a);font-family:"72","72full",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily,"72","72full",Arial,Helvetica,sans-serif);font-weight:400;-webkit-font-smoothing:antialiased;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;border:0;margin-left:auto;margin-top:-.25rem;margin-bottom:-.25rem;color:#6a6d70;color:var(--sapNeutralTextColor,#6a6d70);font-size:.75rem;font-size:var(--sapFontSmallSize,.75rem)}.fd-layout-panel__actions:after,.fd-layout-panel__actions:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-layout-panel__actions[dir=rtl],[dir=rtl] .fd-layout-panel__actions{margin-right:auto;margin-left:0}.fd-layout-panel__filters{font-size:.875rem;font-size:var(--sapFontSize,.875rem);line-height:1.4;line-height:var(--sapContent_LineHeight,1.4);color:#32363a;color:var(--sapTextColor,#32363a);font-family:"72","72full",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily,"72","72full",Arial,Helvetica,sans-serif);font-weight:400;-webkit-font-smoothing:antialiased;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;border:0;padding:.75rem 1.5rem;border-bottom-style:solid;border-bottom-width:.0625rem;border-bottom-width:var(--sapElement_BorderWidth,.0625rem);border-bottom-color:#d9d9d9;border-bottom-color:var(--sapGroup_ContentBorderColor,#d9d9d9);-webkit-transition:all .15s ease-in;transition:all .15s ease-in}.fd-layout-panel__filters:after,.fd-layout-panel__filters:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-layout-panel__filters.is-hidden{padding-top:0;padding-bottom:0;max-height:0;overflow:hidden}.fd-layout-panel__body{font-size:.875rem;font-size:var(--sapFontSize,.875rem);line-height:1.4;line-height:var(--sapContent_LineHeight,1.4);color:#32363a;color:var(--sapTextColor,#32363a);font-family:"72","72full",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily,"72","72full",Arial,Helvetica,sans-serif);font-weight:400;-webkit-font-smoothing:antialiased;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;border:0;padding:1rem 1.5rem}.fd-layout-panel__body:after,.fd-layout-panel__body:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-layout-panel__body--bleed,.fd-layout-panel__body--full-bleed{padding:0}.fd-layout-panel__body>:first-child{margin-top:0}.fd-layout-panel__body>:last-child{margin-bottom:0}.fd-layout-panel__footer{font-size:.875rem;font-size:var(--sapFontSize,.875rem);line-height:1.4;line-height:var(--sapContent_LineHeight,1.4);color:#32363a;color:var(--sapTextColor,#32363a);font-family:"72","72full",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily,"72","72full",Arial,Helvetica,sans-serif);font-weight:400;-webkit-font-smoothing:antialiased;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;border:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:1rem 1.5rem;border-top-style:solid;border-top-width:.0625rem;border-top-width:var(--sapElement_BorderWidth,.0625rem);border-top-color:#d9d9d9;border-top-color:var(--sapGroup_ContentBorderColor,#d9d9d9)}.fd-layout-panel__footer:after,.fd-layout-panel__footer:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}
\ No newline at end of file
diff --git a/container/test-app/assets/main.js b/container/test-app/assets/main.js
new file mode 100644
index 0000000000..426f820605
--- /dev/null
+++ b/container/test-app/assets/main.js
@@ -0,0 +1,6126 @@
+var class2type = {};
+var hasOwn = class2type.hasOwnProperty;
+var toString = class2type.toString;
+var fnToString = hasOwn.toString;
+var ObjectFunctionString = fnToString.call(Object);
+var fnIsPlainObject = function (obj) {
+ var proto, Ctor;
+ if (!obj || toString.call(obj) !== '[object Object]') {
+ return false;
+ }
+ proto = Object.getPrototypeOf(obj);
+ if (!proto) {
+ return true;
+ }
+ Ctor = hasOwn.call(proto, 'constructor') && proto.constructor;
+ return typeof Ctor === 'function' && fnToString.call(Ctor) === ObjectFunctionString;
+};
+var oToken = Object.create(null);
+var fnMerge = function () {
+ var src,
+ copyIsArray,
+ copy,
+ name,
+ options,
+ clone,
+ target = arguments[2] || {},
+ i = 3,
+ length = arguments.length,
+ deep = arguments[0] || false,
+ skipToken = arguments[1] ? undefined : oToken;
+ if (typeof target !== 'object' && typeof target !== 'function') {
+ target = {};
+ }
+ for (; i < length; i++) {
+ if ((options = arguments[i]) != null) {
+ for (name in options) {
+ src = target[name];
+ copy = options[name];
+ if (name === '__proto__' || target === copy) {
+ continue;
+ }
+ if (deep && copy && (fnIsPlainObject(copy) || (copyIsArray = Array.isArray(copy)))) {
+ if (copyIsArray) {
+ copyIsArray = false;
+ clone = src && Array.isArray(src) ? src : [];
+ } else {
+ clone = src && fnIsPlainObject(src) ? src : {};
+ }
+ target[name] = fnMerge(deep, arguments[1], clone, copy);
+ } else if (copy !== skipToken) {
+ target[name] = copy;
+ }
+ }
+ }
+ }
+ return target;
+};
+var fnMerge$1 = function () {
+ var args = [true, false];
+ args.push.apply(args, arguments);
+ return fnMerge.apply(null, args);
+};
+const whenDOMReady = () => {
+ return new Promise((resolve) => {
+ if (document.body) {
+ resolve();
+ } else {
+ document.addEventListener('DOMContentLoaded', () => {
+ resolve();
+ });
+ }
+ });
+}; /**
+ * Creates a ${templateResult}`;
+ }
+ render(templateResult, domNode, { eventContext });
+};
+
+const scopedHtml = (strings, ...values) => html(scopeHTML(strings, tags, suffix), ...values);
+const scopedSvg = (strings, ...values) => svg(scopeHTML(strings, tags, suffix), ...values);
+const KeyCodes = {
+ BACKSPACE: 8,
+ TAB: 9,
+ ENTER: 13,
+ SHIFT: 16,
+ CONTROL: 17,
+ ALT: 18,
+ BREAK: 19,
+ CAPS_LOCK: 20,
+ ESCAPE: 27,
+ SPACE: 32,
+ PAGE_UP: 33,
+ PAGE_DOWN: 34,
+ END: 35,
+ HOME: 36,
+ ARROW_LEFT: 37,
+ ARROW_UP: 38,
+ ARROW_RIGHT: 39,
+ ARROW_DOWN: 40,
+ PRINT: 44,
+ INSERT: 45,
+ DELETE: 46,
+ DIGIT_0: 48,
+ DIGIT_1: 49,
+ DIGIT_2: 50,
+ DIGIT_3: 51,
+ DIGIT_4: 52,
+ DIGIT_5: 53,
+ DIGIT_6: 54,
+ DIGIT_7: 55,
+ DIGIT_8: 56,
+ DIGIT_9: 57,
+ A: 65,
+ B: 66,
+ C: 67,
+ D: 68,
+ E: 69,
+ F: 70,
+ G: 71,
+ H: 72,
+ I: 73,
+ J: 74,
+ K: 75,
+ L: 76,
+ M: 77,
+ N: 78,
+ O: 79,
+ P: 80,
+ Q: 81,
+ R: 82,
+ S: 83,
+ T: 84,
+ U: 85,
+ V: 86,
+ W: 87,
+ X: 88,
+ Y: 89,
+ Z: 90,
+ WINDOWS: 91,
+ CONTEXT_MENU: 93,
+ TURN_OFF: 94,
+ SLEEP: 95,
+ NUMPAD_0: 96,
+ NUMPAD_1: 97,
+ NUMPAD_2: 98,
+ NUMPAD_3: 99,
+ NUMPAD_4: 100,
+ NUMPAD_5: 101,
+ NUMPAD_6: 102,
+ NUMPAD_7: 103,
+ NUMPAD_8: 104,
+ NUMPAD_9: 105,
+ NUMPAD_ASTERISK: 106,
+ NUMPAD_PLUS: 107,
+ NUMPAD_MINUS: 109,
+ NUMPAD_COMMA: 110,
+ NUMPAD_SLASH: 111,
+ F1: 112,
+ F2: 113,
+ F3: 114,
+ F4: 115,
+ F5: 116,
+ F6: 117,
+ F7: 118,
+ F8: 119,
+ F9: 120,
+ F10: 121,
+ F11: 122,
+ F12: 123,
+ NUM_LOCK: 144,
+ SCROLL_LOCK: 145,
+ OPEN_BRACKET: 186,
+ PLUS: 187,
+ COMMA: 188,
+ SLASH: 189,
+ DOT: 190,
+ PIPE: 191,
+ SEMICOLON: 192,
+ MINUS: 219,
+ GREAT_ACCENT: 220,
+ EQUALS: 221,
+ SINGLE_QUOTE: 222,
+ BACKSLASH: 226
+};
+
+const isEnter = (event) =>
+ (event.key ? event.key === 'Enter' : event.keyCode === KeyCodes.ENTER) && !hasModifierKeys(event);
+
+const isSpace = (event) =>
+ (event.key ? event.key === 'Spacebar' || event.key === ' ' : event.keyCode === KeyCodes.SPACE) &&
+ !hasModifierKeys(event);
+
+const hasModifierKeys = (event) => event.shiftKey || event.altKey || getCtrlKey(event);
+
+const getCtrlKey = (event) => !!(event.metaKey || event.ctrlKey); // double negation doesn't have effect on boolean but ensures null and undefined are equivalent to false.
+const rLocale =
+ /^((?:[A-Z]{2,3}(?:-[A-Z]{3}){0,3})|[A-Z]{4}|[A-Z]{5,8})(?:-([A-Z]{4}))?(?:-([A-Z]{2}|[0-9]{3}))?((?:-[0-9A-Z]{5,8}|-[0-9][0-9A-Z]{3})*)((?:-[0-9A-WYZ](?:-[0-9A-Z]{2,8})+)*)(?:-(X(?:-[0-9A-Z]{1,8})+))?$/i;
+
+class Locale {
+ constructor(sLocaleId) {
+ const aResult = rLocale.exec(sLocaleId.replace(/_/g, '-'));
+ if (aResult === null) {
+ throw new Error(`The given language ${sLocaleId} does not adhere to BCP-47.`);
+ }
+ this.sLocaleId = sLocaleId;
+ this.sLanguage = aResult[1] || null;
+ this.sScript = aResult[2] || null;
+ this.sRegion = aResult[3] || null;
+ this.sVariant = (aResult[4] && aResult[4].slice(1)) || null;
+ this.sExtension = (aResult[5] && aResult[5].slice(1)) || null;
+ this.sPrivateUse = aResult[6] || null;
+ if (this.sLanguage) {
+ this.sLanguage = this.sLanguage.toLowerCase();
+ }
+ if (this.sScript) {
+ this.sScript = this.sScript.toLowerCase().replace(/^[a-z]/, (s) => {
+ return s.toUpperCase();
+ });
+ }
+ if (this.sRegion) {
+ this.sRegion = this.sRegion.toUpperCase();
+ }
+ }
+
+ getLanguage() {
+ return this.sLanguage;
+ }
+
+ getScript() {
+ return this.sScript;
+ }
+
+ getRegion() {
+ return this.sRegion;
+ }
+
+ getVariant() {
+ return this.sVariant;
+ }
+
+ getVariantSubtags() {
+ return this.sVariant ? this.sVariant.split('-') : [];
+ }
+
+ getExtension() {
+ return this.sExtension;
+ }
+
+ getExtensionSubtags() {
+ return this.sExtension ? this.sExtension.slice(2).split('-') : [];
+ }
+
+ getPrivateUse() {
+ return this.sPrivateUse;
+ }
+
+ getPrivateUseSubtags() {
+ return this.sPrivateUse ? this.sPrivateUse.slice(2).split('-') : [];
+ }
+
+ hasPrivateUseSubtag(sSubtag) {
+ return this.getPrivateUseSubtags().indexOf(sSubtag) >= 0;
+ }
+
+ toString() {
+ const r = [this.sLanguage];
+
+ if (this.sScript) {
+ r.push(this.sScript);
+ }
+ if (this.sRegion) {
+ r.push(this.sRegion);
+ }
+ if (this.sVariant) {
+ r.push(this.sVariant);
+ }
+ if (this.sExtension) {
+ r.push(this.sExtension);
+ }
+ if (this.sPrivateUse) {
+ r.push(this.sPrivateUse);
+ }
+ return r.join('-');
+ }
+}
+const convertToLocaleOrNull = (lang) => {
+ try {
+ if (lang && typeof lang === 'string') {
+ return new Locale(lang);
+ }
+ } catch (e) {
+ // ignore
+ }
+};
+
+/**
+ * Returns the locale based on the parameter or configured language Configuration#getLanguage
+ * If no language has been configured - a new locale based on browser language is returned
+ */
+const getLocale = (lang) => {
+ if (lang) {
+ return convertToLocaleOrNull(lang);
+ }
+
+ if (getLanguage$1()) {
+ return new Locale(getLanguage$1());
+ }
+
+ return convertToLocaleOrNull(detectNavigatorLanguage());
+};
+const localeRegEX =
+ /^((?:[A-Z]{2,3}(?:-[A-Z]{3}){0,3})|[A-Z]{4}|[A-Z]{5,8})(?:-([A-Z]{4}))?(?:-([A-Z]{2}|[0-9]{3}))?((?:-[0-9A-Z]{5,8}|-[0-9][0-9A-Z]{3})*)((?:-[0-9A-WYZ](?:-[0-9A-Z]{2,8})+)*)(?:-(X(?:-[0-9A-Z]{1,8})+))?$/i;
+const SAPSupportabilityLocales = /(?:^|-)(saptrc|sappsd)(?:-|$)/i;
+
+/* Map for old language names for a few ISO639 codes. */
+const M_ISO639_NEW_TO_OLD = {
+ he: 'iw',
+ yi: 'ji',
+ id: 'in',
+ sr: 'sh'
+};
+
+/**
+ * Normalizes the given locale in BCP-47 syntax.
+ * @param {string} locale locale to normalize
+ * @returns {string} Normalized locale, "undefined" if the locale can't be normalized or the default locale, if no locale provided.
+ */
+const normalizeLocale = (locale) => {
+ let m;
+
+ if (!locale) {
+ return DEFAULT_LOCALE;
+ }
+
+ if (typeof locale === 'string' && (m = localeRegEX.exec(locale.replace(/_/g, '-')))) {
+ /* eslint-disable-line */
+ let language = m[1].toLowerCase();
+ let region = m[3] ? m[3].toUpperCase() : undefined;
+ const script = m[2] ? m[2].toLowerCase() : undefined;
+ const variants = m[4] ? m[4].slice(1) : undefined;
+ const isPrivate = m[6];
+
+ language = M_ISO639_NEW_TO_OLD[language] || language;
+
+ // recognize and convert special SAP supportability locales (overwrites m[]!)
+ if (
+ (isPrivate && (m = SAPSupportabilityLocales.exec(isPrivate))) /* eslint-disable-line */ ||
+ (variants && (m = SAPSupportabilityLocales.exec(variants)))
+ ) {
+ /* eslint-disable-line */
+ return `en_US_${m[1].toLowerCase()}`; // for now enforce en_US (agreed with SAP SLS)
+ }
+
+ // Chinese: when no region but a script is specified, use default region for each script
+ if (language === 'zh' && !region) {
+ if (script === 'hans') {
+ region = 'CN';
+ } else if (script === 'hant') {
+ region = 'TW';
+ }
+ }
+
+ return (
+ language + (region ? '_' + region + (variants ? '_' + variants.replace('-', '_') : '') : '')
+ ); /* eslint-disable-line */
+ }
+}; /**
+ * Calculates the next fallback locale for the given locale.
+ *
+ * @param {string} locale Locale string in Java format (underscores) or null
+ * @returns {string} Next fallback Locale or "en" if no fallbacks found.
+ */
+const nextFallbackLocale = (locale) => {
+ if (!locale) {
+ return DEFAULT_LOCALE;
+ }
+
+ if (locale === 'zh_HK') {
+ return 'zh_TW';
+ }
+
+ // if there are multiple segments (separated by underscores), remove the last one
+ const p = locale.lastIndexOf('_');
+ if (p >= 0) {
+ return locale.slice(0, p);
+ }
+
+ // for any language but the default, fallback to the default first before falling back to the 'raw' language (empty string)
+ return locale !== DEFAULT_LOCALE ? DEFAULT_LOCALE : '';
+};
+const bundleData = new Map();
+const bundleURLs = new Map();
+
+/**
+ * Sets a map with texts and ID the are related to.
+ * @param {string} packageName package ID that the i18n bundle will be related to
+ * @param {Object} data an object with string locales as keys and text translataions as values
+ * @public
+ */
+const setI18nBundleData = (packageName, data) => {
+ bundleData.set(packageName, data);
+};
+
+const getI18nBundleData = (packageName) => {
+ return bundleData.get(packageName);
+};
+
+/**
+ * This method preforms the asynchronous task of fetching the actual text resources. It will fetch
+ * each text resource over the network once (even for multiple calls to the same method).
+ * It should be fully finished before the i18nBundle class is created in the webcomponents.
+ * This method uses the bundle URLs that are populated by the registerI18nBundle
method.
+ * To simplify the usage, the synchronization of both methods happens internally for the same bundleId
+ * @param {packageName} packageName the NPM package name
+ * @public
+ */
+const fetchI18nBundle = async (packageName) => {
+ const bundlesForPackage = bundleURLs.get(packageName);
+
+ if (!bundlesForPackage) {
+ console.warn(
+ `Message bundle assets are not configured. Falling back to English texts.` /* eslint-disable-line */,
+ ` You need to import ${packageName}/dist/Assets.js with a build tool that supports JSON imports.`
+ ); /* eslint-disable-line */
+ return;
+ }
+
+ const language = getLocale().getLanguage();
+ const region = getLocale().getRegion();
+ const useDefaultLanguage = getUseDefaultLanguage$1();
+ let localeId = normalizeLocale(language + (region ? `-${region}` : ``));
+
+ while (localeId !== DEFAULT_LANGUAGE && !bundlesForPackage[localeId]) {
+ localeId = nextFallbackLocale(localeId);
+ }
+
+ if (useDefaultLanguage && localeId === DEFAULT_LANGUAGE) {
+ setI18nBundleData(packageName, null); // reset for the default language (if data was set for a previous language)
+ return;
+ }
+
+ const bundleURL = bundlesForPackage[localeId];
+
+ if (typeof bundleURL === 'object') {
+ // inlined from build
+ setI18nBundleData(packageName, bundleURL);
+ return;
+ }
+
+ const content = await fetchTextOnce(getEffectiveAssetPath(bundleURL));
+ let parser;
+ if (content.startsWith('{')) {
+ parser = JSON.parse;
+ } else {
+ const PropertiesFormatSupport = getFeature('PropertiesFormatSupport');
+ if (!PropertiesFormatSupport) {
+ throw new Error(
+ `In order to support .properties files, please: import "@ui5/webcomponents-base/dist/features/PropertiesFormatSupport.js";`
+ );
+ }
+ parser = PropertiesFormatSupport.parser;
+ }
+
+ const data = parser(content);
+
+ setI18nBundleData(packageName, data);
+};
+
+// When the language changes dynamically (the user calls setLanguage), re-fetch all previously fetched bundles
+attachLanguageChange(() => {
+ const allPackages = [...bundleData.keys()];
+ return Promise.all(allPackages.map(fetchI18nBundle));
+});
+const messageFormatRegEX = /('')|'([^']+(?:''[^']*)*)(?:'|$)|\{([0-9]+(?:\s*,[^{}]*)?)\}|[{}]/g;
+
+const formatMessage = (text, values) => {
+ values = values || [];
+
+ return text.replace(messageFormatRegEX, ($0, $1, $2, $3, offset) => {
+ if ($1) {
+ return "'"; /* eslint-disable-line */
+ }
+
+ if ($2) {
+ return $2.replace(/''/g, "'"); /* eslint-disable-line */
+ }
+
+ if ($3) {
+ return String(values[parseInt($3)]);
+ }
+
+ throw new Error(`[i18n]: pattern syntax error at pos ${offset}`);
+ });
+};
+const I18nBundleInstances = new Map();
+
+/**
+ * @class
+ * @public
+ */
+class I18nBundle {
+ constructor(packageName) {
+ this.packageName = packageName;
+ }
+
+ /**
+ * Returns a text in the currently loaded language
+ *
+ * @param {Object|String} textObj key/defaultText pair or just the key
+ * @param params Values for the placeholders
+ * @returns {*}
+ */
+ getText(textObj, ...params) {
+ if (typeof textObj === 'string') {
+ textObj = { key: textObj, defaultText: textObj };
+ }
+
+ if (!textObj || !textObj.key) {
+ return '';
+ }
+
+ const bundle = getI18nBundleData(this.packageName);
+ const messageText = bundle && bundle[textObj.key] ? bundle[textObj.key] : textObj.defaultText || textObj.key;
+
+ return formatMessage(messageText, params);
+ }
+}
+
+const getI18nBundle = (packageName) => {
+ if (I18nBundleInstances.has(packageName)) {
+ return I18nBundleInstances.get(packageName);
+ }
+
+ const i18nBundle = new I18nBundle(packageName);
+ I18nBundleInstances.set(packageName, i18nBundle);
+ return i18nBundle;
+};
+const findNodeOwner = (node) => {
+ if (!(node instanceof HTMLElement)) {
+ throw new Error('Argument node should be of type HTMLElement');
+ }
+
+ const ownerTypes = [HTMLHtmlElement, HTMLIFrameElement];
+ let currentShadowRootFlag = true;
+ let currentCustomElementFlag = true;
+
+ while (node) {
+ if (node.toString() === '[object ShadowRoot]') {
+ // Web Component
+ // or the shadow root of web component with attached shadow root
+ if (currentShadowRootFlag) {
+ currentShadowRootFlag = false;
+ }
+ if (!currentCustomElementFlag && !currentShadowRootFlag) {
+ return node;
+ }
+ } else if (node.tagName && node.tagName.indexOf('-') > -1) {
+ if (currentCustomElementFlag) {
+ currentCustomElementFlag = false;
+ } else {
+ return node;
+ }
+ } else if (ownerTypes.indexOf(node.constructor) > -1) {
+ // Document or Iframe reached
+ return node;
+ }
+
+ node = node.parentNode || node.host;
+ }
+};
+const getEffectiveAriaLabelText = (el) => {
+ if (!el.ariaLabelledby) {
+ if (el.ariaLabel) {
+ return el.ariaLabel;
+ }
+
+ return undefined;
+ }
+
+ return getAriaLabelledByTexts(el);
+};
+
+/**
+ *
+ * @param {HTMLElement} el Defines the HTMLElement, for which you need to get all related texts
+ * @param {HTMLElement} ownerDocument (Optional) Defines the HTMLElement(might document or custom element) where the you want to search for the texts.
+ * @param {String} readyIds (Optional) Defines a string of elements ids. The text of these elements will be returned. If used you should provide either el or ownerDocument
+ */
+const getAriaLabelledByTexts = (el, ownerDocument, readyIds = '') => {
+ const ids = (readyIds && readyIds.split(' ')) || el.ariaLabelledby.split(' ');
+ const owner = ownerDocument || findNodeOwner(el);
+ let result = '';
+
+ ids.forEach((elementId, index) => {
+ const element = owner.querySelector(`[id='${elementId}']`);
+ result += `${element ? element.textContent : ''}`;
+
+ if (index < ids.length - 1) {
+ result += ' ';
+ }
+ });
+
+ return result;
+}; /**
+ * @lends sap.ui.webcomponents.main.types.ButtonDesign.prototype
+ * @public
+ */
+const ButtonTypes = {
+ /**
+ * default type (no special styling)
+ * @public
+ * @type {Default}
+ */
+ Default: 'Default',
+
+ /**
+ * accept type (green button)
+ * @public
+ * @type {Positive}
+ */
+ Positive: 'Positive',
+
+ /**
+ * reject style (red button)
+ * @public
+ * @type {Negative}
+ */
+ Negative: 'Negative',
+
+ /**
+ * transparent type
+ * @public
+ * @type {Transparent}
+ */
+ Transparent: 'Transparent',
+
+ /**
+ * emphasized type
+ * @public
+ * @type {Emphasized}
+ */
+ Emphasized: 'Emphasized'
+};
+
+/**
+ * @class
+ * Different types of Button.
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.types.ButtonDesign
+ * @public
+ * @enum {string}
+ */
+class ButtonDesign extends DataType {
+ static isValid(value) {
+ return !!ButtonTypes[value];
+ }
+}
+
+ButtonDesign.generataTypeAcessors(ButtonTypes); /*
+ lit-html directive that removes and attribute if it is undefined
+*/
+var ifDefined = directive((value) => (part) => {
+ if (value === undefined && part instanceof AttributePart) {
+ if (value !== part.value) {
+ const name = part.committer.name;
+ part.committer.element.removeAttribute(name);
+ }
+ } else if (
+ part.committer &&
+ part.committer.element &&
+ part.committer.element.getAttribute(part.committer.name) === value
+ ) {
+ part.setValue(noChange);
+ } else {
+ part.setValue(value);
+ }
+});
+const block0 = (context) => {
+ return scopedHtml` `;
+};
+const block1 = (context) => {
+ return scopedHtml`
ui5-icon
.
+ * name='add'
, name='delete'
, name='employee'
.
+ *
+ * @type {string}
+ * @defaultvalue ""
+ * @public
+ */
+ name: {
+ type: String
+ },
+
+ /**
+ * Defines the text alternative of the ui5-icon
.
+ * If not provided a default text alternative will be set, if present.
+ * ui5-icon
should have a tooltip.
+ *
+ * @type {boolean}
+ * @defaultvalue false
+ * @public
+ */
+ showTooltip: {
+ type: Boolean
+ },
+
+ /**
+ * @private
+ */
+ pathData: {
+ type: String,
+ noAttribute: true
+ },
+
+ /**
+ * @private
+ */
+ accData: {
+ type: Object,
+ noAttribute: true
+ },
+
+ /**
+ * @private
+ */
+ focused: {
+ type: Boolean
+ },
+
+ /**
+ * @private
+ */
+ invalid: {
+ type: Boolean
+ }
+ },
+ events: {
+ /**
+ * Fired on mouseup, space and enter if icon is interactive
+ * @private
+ * @since 1.0.0-rc.8
+ */
+ click: {}
+ }
+};
+
+/**
+ * @class
+ * ui5-icon
component represents an SVG icon.
+ * There are two main scenarios how the ui5-icon
component is used:
+ * as a purely decorative element; or as a visually appealing clickable area in the form of an icon button.
+ * name
property on the ui5-icon
.
+ *
+ * import "@ui5/webcomponents/dist/Icon.js";
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.Icon
+ * @extends sap.ui.webcomponents.base.UI5Element
+ * @tagname ui5-icon
+ * @public
+ */
+class Icon extends UI5Element {
+ constructor() {
+ super();
+ this.i18nBundle = getI18nBundle('@ui5/webcomponents');
+ }
+
+ static get metadata() {
+ return metadata$1;
+ }
+
+ static get render() {
+ return litRender;
+ }
+
+ static get template() {
+ return main$1;
+ }
+
+ static get styles() {
+ return iconCss;
+ }
+
+ static async onDefine() {
+ this.createGlobalStyle(); // hide all icons until the first icon has rendered (and added the Icon.css)
+ await fetchI18nBundle('@ui5/webcomponents');
+ }
+
+ _onfocusin(event) {
+ if (this.interactive) {
+ this.focused = true;
+ }
+ }
+
+ _onfocusout(event) {
+ this.focused = false;
+ }
+
+ _onkeydown(event) {
+ if (this.interactive && isEnter(event)) {
+ this.fireEvent('click');
+ }
+ }
+
+ _onkeyup(event) {
+ if (this.interactive && isSpace(event)) {
+ this.fireEvent('click');
+ }
+ }
+
+ _onclick(event) {
+ if (this.interactive) {
+ event.preventDefault();
+ // Prevent the native event and fire custom event because otherwise the noConfict event won't be thrown
+ this.fireEvent('click');
+ }
+ }
+
+ get _dir() {
+ if (!this.effectiveDir) {
+ return;
+ }
+
+ if (this.ltr) {
+ return 'ltr';
+ }
+
+ return this.effectiveDir;
+ }
+
+ get tabIndex() {
+ return this.interactive ? '0' : '-1';
+ }
+
+ get role() {
+ if (this.interactive) {
+ return 'button';
+ }
+
+ return this.accessibleNameText ? 'img' : 'presentation';
+ }
+
+ static createGlobalStyle() {
+ if (!window.ShadyDOM) {
+ return;
+ }
+ const styleElement = document.head.querySelector(`style[data-ui5-icon-global]`);
+ if (!styleElement) {
+ createStyleInHead(`ui5-icon { display: none !important; }`, { 'data-ui5-icon-global': '' });
+ }
+ }
+
+ static removeGlobalStyle() {
+ if (!window.ShadyDOM) {
+ return;
+ }
+ const styleElement = document.head.querySelector(`style[data-ui5-icon-global]`);
+ if (styleElement) {
+ document.head.removeChild(styleElement);
+ }
+ }
+
+ async onBeforeRendering() {
+ const name = this.name;
+ if (!name) {
+ /* eslint-disable-next-line */
+ return console.warn('Icon name property is required', this);
+ }
+ let iconData = getIconDataSync(name);
+ if (!iconData) {
+ iconData = await getIconData(name);
+ }
+
+ if (iconData === ICON_NOT_FOUND$1) {
+ this.invalid = true;
+ /* eslint-disable-next-line */
+ return console.warn(
+ `Required icon is not registered. You can either import the icon as a module in order to use it e.g. "@ui5/webcomponents-icons/dist/icons/${name.replace('sap-icon://', '')}.js", or setup a JSON build step and import "@ui5/webcomponents-icons/dist/Assets.js".`
+ );
+ }
+
+ if (!iconData) {
+ this.invalid = true;
+ /* eslint-disable-next-line */
+ return console.warn(`Required icon is not registered. Invalid icon name: ${this.name}`);
+ }
+
+ this.pathData = iconData.pathData;
+ this.accData = iconData.accData;
+ this.ltr = iconData.ltr;
+ }
+
+ get hasIconTooltip() {
+ return this.showTooltip && this.accessibleNameText;
+ }
+
+ get accessibleNameText() {
+ if (this.accessibleName) {
+ return this.accessibleName;
+ }
+
+ return this.i18nBundle.getText(this.accData) || undefined;
+ }
+
+ async onEnterDOM() {
+ setTimeout(() => {
+ this.constructor.removeGlobalStyle(); // remove the global style as Icon.css is already in place
+ }, 0);
+ }
+}
+
+Icon.define();
+const BUTTON_ARIA_TYPE_ACCEPT = { key: 'BUTTON_ARIA_TYPE_ACCEPT', defaultText: 'Positive Action' };
+const BUTTON_ARIA_TYPE_REJECT = { key: 'BUTTON_ARIA_TYPE_REJECT', defaultText: 'Negative Action' };
+const BUTTON_ARIA_TYPE_EMPHASIZED = { key: 'BUTTON_ARIA_TYPE_EMPHASIZED', defaultText: 'Emphasized' };
+registerThemeProperties('@ui5/webcomponents-theme-base', 'sap_fiori_3', defaultThemeBase);
+registerThemeProperties('@ui5/webcomponents', 'sap_fiori_3', defaultTheme);
+var buttonCss =
+ '.ui5-hidden-text{position:absolute;clip:rect(1px,1px,1px,1px);user-select:none;left:0;top:0}:host(:not([hidden])){display:inline-block}:host{min-width:var(--_ui5_button_base_min_width);height:var(--_ui5_button_base_height);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);text-shadow:var(--_ui5_button_text_shadow);border-radius:var(--_ui5_button_border_radius);border-width:.0625rem;cursor:pointer;background-color:var(--sapButton_Background);border:1px solid var(--sapButton_BorderColor);color:var(--sapButton_TextColor);box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([has-icon]) button[dir=rtl].ui5-button-root .ui5-button-text{margin-right:var(--_ui5_button_base_icon_margin);margin-left:0}:host([has-icon][icon-end]) button[dir=rtl].ui5-button-root .ui5-button-icon{margin-right:var(--_ui5_button_base_icon_margin);margin-left:0}.ui5-button-root{min-width:inherit;cursor:inherit;height:100%;width:100%;box-sizing:border-box;display:flex;justify-content:center;align-items:center;outline:none;padding:0 var(--_ui5_button_base_padding);position:relative;background:transparent;border:none;color:inherit;text-shadow:inherit;font:inherit;white-space:inherit;overflow:inherit;text-overflow:inherit;letter-spacing:inherit;word-spacing:inherit;line-height:inherit}:host(:not([active]):hover),:host(:not([hidden]).ui5_hovered){background:var(--sapButton_Hover_Background)}.ui5-button-icon{color:inherit;flex-shrink:0}:host([icon-end]) .ui5-button-root{flex-direction:row-reverse}:host([icon-end]) .ui5-button-icon{margin-left:var(--_ui5_button_base_icon_margin)}:host([icon-only]) .ui5-button-root{min-width:auto;padding:0}:host([icon-only]) .ui5-button-text{display:none}.ui5-button-text{outline:none;position:relative;white-space:inherit;overflow:inherit;text-overflow:inherit}:host([has-icon]:not([icon-end])) .ui5-button-text{margin-left:var(--_ui5_button_base_icon_margin)}:host([has-icon][icon-end]) .ui5-button-text{margin-left:0}:host([disabled]){opacity:.5;pointer-events:none}:host([focused]){outline:var(--_ui5_button_outline);outline-offset:var(--_ui5_button_outline_offset)}.ui5-button-root::-moz-focus-inner{border:0}bdi{display:block;white-space:inherit;overflow:inherit;text-overflow:inherit}:host([active]:not([disabled])){background-image:none;background-color:var(--sapButton_Active_Background);border-color:var(--_ui5_button_active_border_color);color:var(--sapButton_Active_TextColor);text-shadow:none}:host([active]){outline-color:var(--sapContent_ContrastFocusColor)}:host([design=Positive]){background-color:var(--sapButton_Accept_Background);border-color:var(--_ui5_button_positive_border_color);color:var(--sapButton_Accept_TextColor);text-shadow:var(--_ui5_button_text_shadow)}:host([design=Positive]:hover){background-color:var(--sapButton_Accept_Hover_Background);border-color:var(--_ui5_button_positive_border_hover_color)}:host([design=Positive][active]){background-color:var(--sapButton_Accept_Active_Background);border-color:var(--_ui5_button_positive_border_active_color);color:var(--sapButton_Active_TextColor);text-shadow:none}:host([design=Positive][focused]){outline-color:var(--_ui5_button_positive_border_focus_hover_color);border-color:var(--_ui5_button_positive_focus_border_color)}:host([design=Positive][active][focused]){outline-color:var(--sapContent_ContrastFocusColor)}:host([design=Negative]){background-color:var(--sapButton_Reject_Background);border-color:var(--sapButton_Reject_BorderColor);color:var(--sapButton_Reject_TextColor);text-shadow:var(--_ui5_button_text_shadow)}:host([design=Negative]:hover){background-color:var(--sapButton_Reject_Hover_Background);border-color:var(--sapButton_Reject_Hover_BorderColor)}:host([design=Negative][focused]){border-color:var(--_ui5_button_negative_focus_border_color);outline-color:var(--_ui5_button_positive_border_focus_hover_color)}:host([design=Negative][active]){background-color:var(--sapButton_Reject_Active_Background);border-color:var(--_ui5_button_negative_active_border_color);color:var(--sapButton_Active_TextColor);text-shadow:none}:host([design=Negative][active][focused]){outline-color:var(--sapContent_ContrastFocusColor)}:host([design=Emphasized]){background-color:var(--sapButton_Emphasized_Background);border-color:var(--sapButton_Emphasized_BorderColor);color:var(--sapButton_Emphasized_TextColor);text-shadow:0 0 .125rem var(--sapButton_Emphasized_TextShadow);font-weight:var(--_ui5_button_emphasized_font_weight)}:host([design=Emphasized]:not([active]):hover){background-color:var(--sapButton_Emphasized_Hover_Background);border-color:var(--sapButton_Emphasized_Hover_BorderColor)}:host([design=Empasized][active]){background-color:var(--sapButton_Emphasized_Active_Background);border-color:var(--sapButton_Emphasized_Active_BorderColor);color:var(--sapButton_Active_TextColor);text-shadow:none}:host([design=Emphasized][focused]){outline-color:var(--sapContent_ContrastFocusColor);border-color:var(--_ui5_button_emphasized_focused_border_color)}:host([design=Transparent]){background-color:var(--sapButton_Lite_Background);color:var(--sapButton_Lite_TextColor);text-shadow:var(--_ui5_button_text_shadow);border-color:var(--_ui5_button_transparent_border_color)}:host([design=Transparent]):hover{background-color:var(--sapButton_Lite_Hover_Background)}:host([design=Transparent][active]){background-color:var(--sapButton_Active_Background);color:var(--sapButton_Active_TextColor);text-shadow:none}:host([design=Transparent]:not([active]):hover){border-color:var(--_ui5_button_transparent_hover_border_color)}[ui5-button][focused]{outline:none}[ui5-button][focused] .ui5-button-root{position:relative}[ui5-button][focused] .ui5-button-root:after{content:"";position:absolute;border-width:1px;border-style:dotted;border-color:var(--_ui5_button_focus_color);top:var(--_ui5_button_focus_offset);bottom:var(--_ui5_button_focus_offset);left:var(--_ui5_button_focus_offset);right:var(--_ui5_button_focus_offset)}[ui5-button][active] .ui5-button-root:after{border-color:var(--sapContent_ContrastFocusColor)}[ui5-button][design=Positive][focused] .ui5-button-root:after{border-color:var(--_ui5_button_positive_border_focus_hover_color)}[ui5-button][design=Positive][active][focused] .ui5-button-root:after{border-color:var(--sapContent_ContrastFocusColor)}[ui5-button][design=Negative][focused] .ui5-button-root:after{border-color:var(--_ui5_button_positive_border_focus_hover_color)}[ui5-button][design=Negative][active][focused] .ui5-button-root:after{border-color:var(--sapContent_ContrastFocusColor)}[ui5-button][design=Emphasized][focused] .ui5-button-root:after{border-color:var(--sapContent_ContrastFocusColor)}[ui5-button] [ui5-icon].ui5-button-icon{height:var(--_ui5_button_icon_font_size);top:0}';
+let isGlobalHandlerAttached = false;
+let activeButton = null;
+
+/**
+ * @public
+ */
+const metadata$2 = {
+ tag: 'ui5-button',
+ languageAware: true,
+ properties: /** @lends sap.ui.webcomponents.main.Button.prototype */ {
+ /**
+ * Defines the ui5-button
design.
+ * ui5-button
is disabled
+ * (default is set to false
).
+ * A disabled ui5-button
can't be pressed or
+ * focused, and it is not in the tab chain.
+ *
+ * @type {boolean}
+ * @defaultvalue false
+ * @public
+ */
+ disabled: {
+ type: Boolean
+ },
+
+ /**
+ * Defines the icon to be displayed as graphical element within the ui5-button
.
+ * The SAP-icons font provides numerous options.
+ * ui5-button icon="palette"+ * + * See all the available icons in the
ui5-button
text.
+ *
+ * @type {boolean}
+ * @defaultvalue false
+ * @public
+ */
+ iconEnd: {
+ type: Boolean
+ },
+
+ /**
+ * Defines the size of the icon inside the ui5-button
.
+ *
+ * @type {string}
+ * @defaultvalue undefined
+ * @public
+ * @since 1.0.0-rc.8
+ */
+ iconSize: {
+ type: String,
+ defaultValue: undefined
+ },
+
+ /**
+ * When set to true
, the ui5-button
will
+ * automatically submit the nearest form element upon press
.
+ * submits
property to have effect, you must add the following import to your project:
+ * import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";
+ *
+ * @type {boolean}
+ * @defaultvalue false
+ * @public
+ */
+ submits: {
+ type: Boolean
+ },
+
+ /**
+ * Used to switch the active state (pressed or not) of the ui5-button
.
+ * @private
+ */
+ active: {
+ type: Boolean
+ },
+
+ /**
+ * Defines if a content has been added to the default slot
+ * @private
+ */
+ iconOnly: {
+ type: Boolean
+ },
+
+ /**
+ * Indicates if the elements is on focus
+ * @private
+ */
+ focused: {
+ type: Boolean
+ },
+
+ /**
+ * Indicates if the elements has a slotted icon
+ * @private
+ */
+ hasIcon: {
+ type: Boolean
+ },
+
+ /**
+ * Defines the aria-label attribute for the button
+ * @type {String}
+ * @defaultvalue: ""
+ * @private
+ * @since 1.0.0-rc.7
+ */
+ ariaLabel: {
+ type: String,
+ defaultValue: undefined
+ },
+
+ /**
+ * Receives id(or many ids) of the elements that label the button
+ * @type {String}
+ * @defaultvalue ""
+ * @private
+ * @since 1.0.0-rc.7
+ */
+ ariaLabelledby: {
+ type: String,
+ defaultValue: ''
+ },
+
+ /**
+ * @type {String}
+ * @defaultvalue ""
+ * @private
+ * @since 1.0.0-rc.8
+ */
+ ariaExpanded: {
+ type: String
+ },
+
+ /**
+ * Indicates if the element if focusable
+ * @private
+ */
+ nonFocusable: {
+ type: Boolean
+ },
+
+ _iconSettings: {
+ type: Object
+ },
+ _buttonAccInfo: {
+ type: Object
+ },
+
+ /**
+ * Defines the tabIndex of the component.
+ * @private
+ */
+ _tabIndex: {
+ type: String,
+ defaultValue: '0',
+ noAttribute: true
+ }
+ },
+ managedSlots: true,
+ slots: /** @lends sap.ui.webcomponents.main.Button.prototype */ {
+ /**
+ * Defines the text of the ui5-button
.
+ * ui5-button
is activated either with a
+ * mouse/tap or by using the Enter or Space key.
+ * disabled
+ * property is set to true
.
+ *
+ * @event
+ * @public
+ */
+ click: {}
+ }
+};
+
+/**
+ * @class
+ *
+ * ui5-button
component represents a simple push button.
+ * It enables users to trigger actions by clicking or tapping the ui5-button
, or by pressing
+ * certain keyboard keys, such as Enter.
+ *
+ *
+ * ui5-button
UI, you can define text, icon, or both. You can also specify
+ * whether the text or the icon is displayed first.
+ * ui5-button
as enabled or disabled. An enabled
+ * ui5-button
can be pressed by clicking or tapping it. The button changes
+ * its style to provide visual feedback to the user that it is pressed or hovered over with
+ * the mouse cursor. A disabled ui5-button
appears inactive and cannot be pressed.
+ *
+ * import "@ui5/webcomponents/dist/Button";
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.Button
+ * @extends UI5Element
+ * @tagname ui5-button
+ * @public
+ */
+class Button extends UI5Element {
+ static get metadata() {
+ return metadata$2;
+ }
+
+ static get styles() {
+ return buttonCss;
+ }
+
+ static get render() {
+ return litRender;
+ }
+
+ static get template() {
+ return main;
+ }
+
+ static get dependencies() {
+ return [Icon];
+ }
+
+ constructor() {
+ super();
+
+ this._deactivate = () => {
+ if (activeButton) {
+ activeButton.active = false;
+ }
+ };
+
+ if (!isGlobalHandlerAttached) {
+ document.addEventListener('mouseup', this._deactivate);
+
+ isGlobalHandlerAttached = true;
+ }
+
+ this.i18nBundle = getI18nBundle('@ui5/webcomponents');
+ }
+
+ onBeforeRendering() {
+ const FormSupport = getFeature('FormSupport');
+ if (this.submits && !FormSupport) {
+ console.warn(
+ `In order for the "submits" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`
+ ); // eslint-disable-line
+ }
+
+ this.iconOnly = this.isIconOnly;
+ this.hasIcon = !!this.icon;
+ }
+
+ _onclick(event) {
+ event.isMarked = 'button';
+ const FormSupport = getFeature('FormSupport');
+ if (FormSupport) {
+ FormSupport.triggerFormSubmit(this);
+ }
+ }
+
+ _onmousedown(event) {
+ event.isMarked = 'button';
+ this.active = true;
+ activeButton = this; // eslint-disable-line
+ }
+
+ _onmouseup(event) {
+ event.isMarked = 'button';
+ }
+
+ _onkeydown(event) {
+ event.isMarked = 'button';
+
+ if (isSpace(event) || isEnter(event)) {
+ this.active = true;
+ }
+ }
+
+ _onkeyup(event) {
+ if (isSpace(event) || isEnter(event)) {
+ this.active = false;
+ }
+ }
+
+ _onfocusout(_event) {
+ this.active = false;
+ this.focused = false;
+ }
+
+ _onfocusin(event) {
+ event.isMarked = 'button';
+ this.focused = true;
+ }
+
+ get hasButtonType() {
+ return this.design !== ButtonDesign.Default && this.design !== ButtonDesign.Transparent;
+ }
+
+ get isIconOnly() {
+ return !Array.from(this.childNodes).filter((node) => node.nodeType !== Node.COMMENT_NODE).length;
+ }
+
+ get accInfo() {
+ return {
+ ariaExpanded: this.ariaExpanded || (this._buttonAccInfo && this._buttonAccInfo.ariaExpanded),
+ ariaControls: this._buttonAccInfo && this._buttonAccInfo.ariaControls,
+ ariaHaspopup: this._buttonAccInfo && this._buttonAccInfo.ariaHaspopup,
+ title: this._buttonAccInfo && this._buttonAccInfo.title
+ };
+ }
+
+ get ariaLabelText() {
+ return getEffectiveAriaLabelText(this);
+ }
+
+ static typeTextMappings() {
+ return {
+ Positive: BUTTON_ARIA_TYPE_ACCEPT,
+ Negative: BUTTON_ARIA_TYPE_REJECT,
+ Emphasized: BUTTON_ARIA_TYPE_EMPHASIZED
+ };
+ }
+
+ get buttonTypeText() {
+ return this.i18nBundle.getText(Button.typeTextMappings()[this.design]);
+ }
+
+ get tabIndexValue() {
+ const tabindex = this.getAttribute('tabindex');
+
+ if (tabindex) {
+ return tabindex;
+ }
+
+ return this.nonFocusable ? '-1' : this._tabIndex;
+ }
+
+ get styles() {
+ return {
+ icon: {
+ width: this.iconSize,
+ height: this.iconSize
+ }
+ };
+ }
+
+ static async onDefine() {
+ await fetchI18nBundle('@ui5/webcomponents');
+ }
+}
+
+Button.define();
+
+/**
+ * Base class for Luigi web component micro frontends.
+ */
+class LuigiElement extends HTMLElement {
+ constructor(options) {
+ super();
+ const closedShadow = options ? options.closedShadow : false;
+ this._shadowRoot = this.attachShadow({
+ mode: closedShadow ? 'closed' : 'open',
+ delegatesFocus: false
+ });
+ this.__initialized = false;
+ this.deferLuigiClientWCInit = options ? options.deferLuigiClientWCInit : false;
+ }
+
+ /**
+ * Invoked by luigi core if present, internal, don't override.
+ * @private
+ */
+ __postProcess(ctx, luigiClient, module_location_path) {
+ this.LuigiClient = luigiClient;
+ this.context = ctx;
+ const template = document.createElement('template');
+ template.innerHTML = this.render(ctx);
+ const attCnt = () => {
+ if (!this.__initialized) {
+ this._shadowRoot.appendChild(template.content.cloneNode(true));
+ Reflect.ownKeys(Reflect.getPrototypeOf(this)).forEach((el) => {
+ if (el.startsWith('$_')) {
+ this._shadowRoot[el] = this[el].bind(this);
+ }
+ });
+ const elementsWithIds = this._shadowRoot.querySelectorAll('[id]');
+ if (elementsWithIds) {
+ elementsWithIds.forEach((el) => {
+ this['$' + el.getAttribute('id')] = el;
+ });
+ }
+ this.afterInit(ctx);
+ this.__initialized = true;
+ }
+ };
+ if (this.luigiConfig && this.luigiConfig.styleSources && this.luigiConfig.styleSources.length > 0) {
+ let nr_styles = this.luigiConfig.styleSources.length;
+ const loadStylesSync = this.luigiConfig.loadStylesSync;
+ const afterLoadOrError = () => {
+ nr_styles--;
+ if (nr_styles < 1) {
+ attCnt();
+ }
+ };
+
+ this.luigiConfig.styleSources.forEach((element, index) => {
+ const link = document.createElement('link');
+ link.setAttribute('rel', 'stylesheet');
+ link.setAttribute('href', module_location_path + element);
+ if (loadStylesSync) {
+ link.addEventListener('load', afterLoadOrError);
+ link.addEventListener('error', afterLoadOrError);
+ }
+ this._shadowRoot.appendChild(link);
+ });
+ if (!loadStylesSync) {
+ attCnt();
+ }
+ } else {
+ attCnt();
+ }
+ }
+
+ /**
+ * Override to execute logic after initialization of the web component, i.e.
+ * after internal rendering and all context data set.
+ *
+ * @param {*} ctx The context object passed by luigi core
+ */
+ afterInit(ctx) {
+ return;
+ }
+
+ /**
+ * Override to return the html template string defining the web component view.
+ *
+ * @param {*} ctx The context object passed by luigi core
+ */
+ render(ctx) {
+ return '';
+ }
+
+ /**
+ * Override to execute logic after an attribute of this web component has changed.
+ */
+ update() {
+ return;
+ }
+
+ /**
+ * Override to execute logic when a new context object is set.
+ *
+ * @param {*} ctx The new context object passed by luigi core
+ */
+ onContextUpdate(ctx) {
+ return;
+ }
+
+ /**
+ * Query selector operating on shadow root.
+ *
+ * @see ParentNode.querySelector
+ */
+ querySelector(selector) {
+ return this._shadowRoot.querySelector(selector);
+ }
+
+ /**
+ * Handles changes on the context property.
+ *
+ * @private
+ */
+ set context(ctx) {
+ this.__lui_ctx = ctx;
+ if (this.__initialized) {
+ this.onContextUpdate(ctx);
+ this.attributeChangedCallback();
+ }
+ }
+
+ get context() {
+ return this.__lui_ctx;
+ }
+
+ /**
+ * Handles changes on attributes.
+ *
+ * @private
+ */
+ attributeChangedCallback(name, oldVal, newVal) {
+ this.update();
+ }
+}
+
+/**
+ * Html string processing according to luigi functionality.
+ * Also useful in combination with LitElement VS Code plugins.
+ *
+ * @param {String} literal The literal to process.
+ * @returns {String} Returns the processed literal.
+ */
+function html$1(literal, ...keys) {
+ let html = '';
+ literal.forEach((el, index) => {
+ html += el;
+ if (index < keys.length && keys[index] !== undefined && keys[index] !== null) {
+ html += keys[index];
+ }
+ });
+ return html.replace(/\$\_/gi, 'this.getRootNode().$_');
+}
+
+class myCustomWebComponent extends LuigiElement {
+ constructor() {
+ super();
+ }
+
+ afterInit(ctx) {
+ this.$button = this.querySelector('ui5-button');
+ this.$button.addEventListener('click', () => {
+ if (this.showAlert) {
+ this.LuigiClient.uxManager().showAlert({
+ text: 'Hello from ' + this.label,
+ type: 'info'
+ });
+ }
+ this.LuigiClient.publishEvent(new CustomEvent('buttonPressed', { details: this.label }));
+ });
+ this.onContextUpdate(ctx);
+ }
+
+ onContextUpdate(ctx) {
+ this.label = ctx.label;
+ this.$button.innerHTML = this.label;
+ this.showAlert = ctx.showAlert === undefined ? true : ctx.showAlert;
+ }
+
+ render() {
+ return html$1`
+ This is a luigi micro frontend, based on web components.
+registerI18nBundle
method.
+ * To simplify the usage, the synchronization of both methods happens internally for the same bundleId
+ * @param {packageName} packageName the NPM package name
+ * @public
+ */
+const fetchI18nBundle = async (packageName) => {
+ const bundlesForPackage = bundleURLs.get(packageName);
+
+ if (!bundlesForPackage) {
+ console.warn(
+ `Message bundle assets are not configured. Falling back to English texts.` /* eslint-disable-line */,
+ ` You need to import ${packageName}/dist/Assets.js with a build tool that supports JSON imports.`
+ ); /* eslint-disable-line */
+ return;
+ }
+
+ const language = getLocale().getLanguage();
+ const region = getLocale().getRegion();
+ const useDefaultLanguage = getUseDefaultLanguage$1();
+ let localeId = normalizeLocale(language + (region ? `-${region}` : ``));
+
+ while (localeId !== DEFAULT_LANGUAGE && !bundlesForPackage[localeId]) {
+ localeId = nextFallbackLocale(localeId);
+ }
+
+ if (useDefaultLanguage && localeId === DEFAULT_LANGUAGE) {
+ setI18nBundleData(packageName, null); // reset for the default language (if data was set for a previous language)
+ return;
+ }
+
+ const bundleURL = bundlesForPackage[localeId];
+
+ if (typeof bundleURL === 'object') {
+ // inlined from build
+ setI18nBundleData(packageName, bundleURL);
+ return;
+ }
+
+ const content = await fetchTextOnce(getEffectiveAssetPath(bundleURL));
+ let parser;
+ if (content.startsWith('{')) {
+ parser = JSON.parse;
+ } else {
+ const PropertiesFormatSupport = getFeature('PropertiesFormatSupport');
+ if (!PropertiesFormatSupport) {
+ throw new Error(
+ `In order to support .properties files, please: import "@ui5/webcomponents-base/dist/features/PropertiesFormatSupport.js";`
+ );
+ }
+ parser = PropertiesFormatSupport.parser;
+ }
+
+ const data = parser(content);
+
+ setI18nBundleData(packageName, data);
+};
+
+// When the language changes dynamically (the user calls setLanguage), re-fetch all previously fetched bundles
+attachLanguageChange(() => {
+ const allPackages = [...bundleData.keys()];
+ return Promise.all(allPackages.map(fetchI18nBundle));
+});
+const messageFormatRegEX = /('')|'([^']+(?:''[^']*)*)(?:'|$)|\{([0-9]+(?:\s*,[^{}]*)?)\}|[{}]/g;
+
+const formatMessage = (text, values) => {
+ values = values || [];
+
+ return text.replace(messageFormatRegEX, ($0, $1, $2, $3, offset) => {
+ if ($1) {
+ return "'"; /* eslint-disable-line */
+ }
+
+ if ($2) {
+ return $2.replace(/''/g, "'"); /* eslint-disable-line */
+ }
+
+ if ($3) {
+ return String(values[parseInt($3)]);
+ }
+
+ throw new Error(`[i18n]: pattern syntax error at pos ${offset}`);
+ });
+};
+const I18nBundleInstances = new Map();
+
+/**
+ * @class
+ * @public
+ */
+class I18nBundle {
+ constructor(packageName) {
+ this.packageName = packageName;
+ }
+
+ /**
+ * Returns a text in the currently loaded language
+ *
+ * @param {Object|String} textObj key/defaultText pair or just the key
+ * @param params Values for the placeholders
+ * @returns {*}
+ */
+ getText(textObj, ...params) {
+ if (typeof textObj === 'string') {
+ textObj = { key: textObj, defaultText: textObj };
+ }
+
+ if (!textObj || !textObj.key) {
+ return '';
+ }
+
+ const bundle = getI18nBundleData(this.packageName);
+ const messageText = bundle && bundle[textObj.key] ? bundle[textObj.key] : textObj.defaultText || textObj.key;
+
+ return formatMessage(messageText, params);
+ }
+}
+
+const getI18nBundle = (packageName) => {
+ if (I18nBundleInstances.has(packageName)) {
+ return I18nBundleInstances.get(packageName);
+ }
+
+ const i18nBundle = new I18nBundle(packageName);
+ I18nBundleInstances.set(packageName, i18nBundle);
+ return i18nBundle;
+};
+const findNodeOwner = (node) => {
+ if (!(node instanceof HTMLElement)) {
+ throw new Error('Argument node should be of type HTMLElement');
+ }
+
+ const ownerTypes = [HTMLHtmlElement, HTMLIFrameElement];
+ let currentShadowRootFlag = true;
+ let currentCustomElementFlag = true;
+
+ while (node) {
+ if (node.toString() === '[object ShadowRoot]') {
+ // Web Component
+ // or the shadow root of web component with attached shadow root
+ if (currentShadowRootFlag) {
+ currentShadowRootFlag = false;
+ }
+ if (!currentCustomElementFlag && !currentShadowRootFlag) {
+ return node;
+ }
+ } else if (node.tagName && node.tagName.indexOf('-') > -1) {
+ if (currentCustomElementFlag) {
+ currentCustomElementFlag = false;
+ } else {
+ return node;
+ }
+ } else if (ownerTypes.indexOf(node.constructor) > -1) {
+ // Document or Iframe reached
+ return node;
+ }
+
+ node = node.parentNode || node.host;
+ }
+};
+const getEffectiveAriaLabelText = (el) => {
+ if (!el.ariaLabelledby) {
+ if (el.ariaLabel) {
+ return el.ariaLabel;
+ }
+
+ return undefined;
+ }
+
+ return getAriaLabelledByTexts(el);
+};
+
+/**
+ *
+ * @param {HTMLElement} el Defines the HTMLElement, for which you need to get all related texts
+ * @param {HTMLElement} ownerDocument (Optional) Defines the HTMLElement(might document or custom element) where the you want to search for the texts.
+ * @param {String} readyIds (Optional) Defines a string of elements ids. The text of these elements will be returned. If used you should provide either el or ownerDocument
+ */
+const getAriaLabelledByTexts = (el, ownerDocument, readyIds = '') => {
+ const ids = (readyIds && readyIds.split(' ')) || el.ariaLabelledby.split(' ');
+ const owner = ownerDocument || findNodeOwner(el);
+ let result = '';
+
+ ids.forEach((elementId, index) => {
+ const element = owner.querySelector(`[id='${elementId}']`);
+ result += `${element ? element.textContent : ''}`;
+
+ if (index < ids.length - 1) {
+ result += ' ';
+ }
+ });
+
+ return result;
+}; /**
+ * @lends sap.ui.webcomponents.main.types.ButtonDesign.prototype
+ * @public
+ */
+const ButtonTypes = {
+ /**
+ * default type (no special styling)
+ * @public
+ * @type {Default}
+ */
+ Default: 'Default',
+
+ /**
+ * accept type (green button)
+ * @public
+ * @type {Positive}
+ */
+ Positive: 'Positive',
+
+ /**
+ * reject style (red button)
+ * @public
+ * @type {Negative}
+ */
+ Negative: 'Negative',
+
+ /**
+ * transparent type
+ * @public
+ * @type {Transparent}
+ */
+ Transparent: 'Transparent',
+
+ /**
+ * emphasized type
+ * @public
+ * @type {Emphasized}
+ */
+ Emphasized: 'Emphasized'
+};
+
+/**
+ * @class
+ * Different types of Button.
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.types.ButtonDesign
+ * @public
+ * @enum {string}
+ */
+class ButtonDesign extends DataType {
+ static isValid(value) {
+ return !!ButtonTypes[value];
+ }
+}
+
+ButtonDesign.generataTypeAcessors(ButtonTypes); /*
+ lit-html directive that removes and attribute if it is undefined
+*/
+var ifDefined = directive((value) => (part) => {
+ if (value === undefined && part instanceof AttributePart) {
+ if (value !== part.value) {
+ const name = part.committer.name;
+ part.committer.element.removeAttribute(name);
+ }
+ } else if (
+ part.committer &&
+ part.committer.element &&
+ part.committer.element.getAttribute(part.committer.name) === value
+ ) {
+ part.setValue(noChange);
+ } else {
+ part.setValue(value);
+ }
+});
+const block0 = (context) => {
+ return scopedHtml` `;
+};
+const block1 = (context) => {
+ return scopedHtml`ui5-icon
.
+ * name='add'
, name='delete'
, name='employee'
.
+ *
+ * @type {string}
+ * @defaultvalue ""
+ * @public
+ */
+ name: {
+ type: String
+ },
+
+ /**
+ * Defines the text alternative of the ui5-icon
.
+ * If not provided a default text alternative will be set, if present.
+ * ui5-icon
should have a tooltip.
+ *
+ * @type {boolean}
+ * @defaultvalue false
+ * @public
+ */
+ showTooltip: {
+ type: Boolean
+ },
+
+ /**
+ * @private
+ */
+ pathData: {
+ type: String,
+ noAttribute: true
+ },
+
+ /**
+ * @private
+ */
+ accData: {
+ type: Object,
+ noAttribute: true
+ },
+
+ /**
+ * @private
+ */
+ focused: {
+ type: Boolean
+ },
+
+ /**
+ * @private
+ */
+ invalid: {
+ type: Boolean
+ }
+ },
+ events: {
+ /**
+ * Fired on mouseup, space and enter if icon is interactive
+ * @private
+ * @since 1.0.0-rc.8
+ */
+ click: {}
+ }
+};
+
+/**
+ * @class
+ * ui5-icon
component represents an SVG icon.
+ * There are two main scenarios how the ui5-icon
component is used:
+ * as a purely decorative element; or as a visually appealing clickable area in the form of an icon button.
+ * name
property on the ui5-icon
.
+ *
+ * import "@ui5/webcomponents/dist/Icon.js";
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.Icon
+ * @extends sap.ui.webcomponents.base.UI5Element
+ * @tagname ui5-icon
+ * @public
+ */
+class Icon extends UI5Element {
+ constructor() {
+ super();
+ this.i18nBundle = getI18nBundle('@ui5/webcomponents');
+ }
+
+ static get metadata() {
+ return metadata$1;
+ }
+
+ static get render() {
+ return litRender;
+ }
+
+ static get template() {
+ return main$1;
+ }
+
+ static get styles() {
+ return iconCss;
+ }
+
+ static async onDefine() {
+ this.createGlobalStyle(); // hide all icons until the first icon has rendered (and added the Icon.css)
+ await fetchI18nBundle('@ui5/webcomponents');
+ }
+
+ _onfocusin(event) {
+ if (this.interactive) {
+ this.focused = true;
+ }
+ }
+
+ _onfocusout(event) {
+ this.focused = false;
+ }
+
+ _onkeydown(event) {
+ if (this.interactive && isEnter(event)) {
+ this.fireEvent('click');
+ }
+ }
+
+ _onkeyup(event) {
+ if (this.interactive && isSpace(event)) {
+ this.fireEvent('click');
+ }
+ }
+
+ _onclick(event) {
+ if (this.interactive) {
+ event.preventDefault();
+ // Prevent the native event and fire custom event because otherwise the noConfict event won't be thrown
+ this.fireEvent('click');
+ }
+ }
+
+ get _dir() {
+ if (!this.effectiveDir) {
+ return;
+ }
+
+ if (this.ltr) {
+ return 'ltr';
+ }
+
+ return this.effectiveDir;
+ }
+
+ get tabIndex() {
+ return this.interactive ? '0' : '-1';
+ }
+
+ get role() {
+ if (this.interactive) {
+ return 'button';
+ }
+
+ return this.accessibleNameText ? 'img' : 'presentation';
+ }
+
+ static createGlobalStyle() {
+ if (!window.ShadyDOM) {
+ return;
+ }
+ const styleElement = document.head.querySelector(`style[data-ui5-icon-global]`);
+ if (!styleElement) {
+ createStyleInHead(`ui5-icon { display: none !important; }`, { 'data-ui5-icon-global': '' });
+ }
+ }
+
+ static removeGlobalStyle() {
+ if (!window.ShadyDOM) {
+ return;
+ }
+ const styleElement = document.head.querySelector(`style[data-ui5-icon-global]`);
+ if (styleElement) {
+ document.head.removeChild(styleElement);
+ }
+ }
+
+ async onBeforeRendering() {
+ const name = this.name;
+ if (!name) {
+ /* eslint-disable-next-line */
+ return console.warn('Icon name property is required', this);
+ }
+ let iconData = getIconDataSync(name);
+ if (!iconData) {
+ iconData = await getIconData(name);
+ }
+
+ if (iconData === ICON_NOT_FOUND$1) {
+ this.invalid = true;
+ /* eslint-disable-next-line */
+ return console.warn(
+ `Required icon is not registered. You can either import the icon as a module in order to use it e.g. "@ui5/webcomponents-icons/dist/icons/${name.replace('sap-icon://', '')}.js", or setup a JSON build step and import "@ui5/webcomponents-icons/dist/Assets.js".`
+ );
+ }
+
+ if (!iconData) {
+ this.invalid = true;
+ /* eslint-disable-next-line */
+ return console.warn(`Required icon is not registered. Invalid icon name: ${this.name}`);
+ }
+
+ this.pathData = iconData.pathData;
+ this.accData = iconData.accData;
+ this.ltr = iconData.ltr;
+ }
+
+ get hasIconTooltip() {
+ return this.showTooltip && this.accessibleNameText;
+ }
+
+ get accessibleNameText() {
+ if (this.accessibleName) {
+ return this.accessibleName;
+ }
+
+ return this.i18nBundle.getText(this.accData) || undefined;
+ }
+
+ async onEnterDOM() {
+ setTimeout(() => {
+ this.constructor.removeGlobalStyle(); // remove the global style as Icon.css is already in place
+ }, 0);
+ }
+}
+
+Icon.define();
+const BUTTON_ARIA_TYPE_ACCEPT = { key: 'BUTTON_ARIA_TYPE_ACCEPT', defaultText: 'Positive Action' };
+const BUTTON_ARIA_TYPE_REJECT = { key: 'BUTTON_ARIA_TYPE_REJECT', defaultText: 'Negative Action' };
+const BUTTON_ARIA_TYPE_EMPHASIZED = { key: 'BUTTON_ARIA_TYPE_EMPHASIZED', defaultText: 'Emphasized' };
+registerThemeProperties('@ui5/webcomponents-theme-base', 'sap_fiori_3', defaultThemeBase);
+registerThemeProperties('@ui5/webcomponents', 'sap_fiori_3', defaultTheme);
+var buttonCss =
+ '.ui5-hidden-text{position:absolute;clip:rect(1px,1px,1px,1px);user-select:none;left:0;top:0}:host(:not([hidden])){display:inline-block}:host{min-width:var(--_ui5_button_base_min_width);height:var(--_ui5_button_base_height);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);text-shadow:var(--_ui5_button_text_shadow);border-radius:var(--_ui5_button_border_radius);border-width:.0625rem;cursor:pointer;background-color:var(--sapButton_Background);border:1px solid var(--sapButton_BorderColor);color:var(--sapButton_TextColor);box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([has-icon]) button[dir=rtl].ui5-button-root .ui5-button-text{margin-right:var(--_ui5_button_base_icon_margin);margin-left:0}:host([has-icon][icon-end]) button[dir=rtl].ui5-button-root .ui5-button-icon{margin-right:var(--_ui5_button_base_icon_margin);margin-left:0}.ui5-button-root{min-width:inherit;cursor:inherit;height:100%;width:100%;box-sizing:border-box;display:flex;justify-content:center;align-items:center;outline:none;padding:0 var(--_ui5_button_base_padding);position:relative;background:transparent;border:none;color:inherit;text-shadow:inherit;font:inherit;white-space:inherit;overflow:inherit;text-overflow:inherit;letter-spacing:inherit;word-spacing:inherit;line-height:inherit}:host(:not([active]):hover),:host(:not([hidden]).ui5_hovered){background:var(--sapButton_Hover_Background)}.ui5-button-icon{color:inherit;flex-shrink:0}:host([icon-end]) .ui5-button-root{flex-direction:row-reverse}:host([icon-end]) .ui5-button-icon{margin-left:var(--_ui5_button_base_icon_margin)}:host([icon-only]) .ui5-button-root{min-width:auto;padding:0}:host([icon-only]) .ui5-button-text{display:none}.ui5-button-text{outline:none;position:relative;white-space:inherit;overflow:inherit;text-overflow:inherit}:host([has-icon]:not([icon-end])) .ui5-button-text{margin-left:var(--_ui5_button_base_icon_margin)}:host([has-icon][icon-end]) .ui5-button-text{margin-left:0}:host([disabled]){opacity:.5;pointer-events:none}:host([focused]){outline:var(--_ui5_button_outline);outline-offset:var(--_ui5_button_outline_offset)}.ui5-button-root::-moz-focus-inner{border:0}bdi{display:block;white-space:inherit;overflow:inherit;text-overflow:inherit}:host([active]:not([disabled])){background-image:none;background-color:var(--sapButton_Active_Background);border-color:var(--_ui5_button_active_border_color);color:var(--sapButton_Active_TextColor);text-shadow:none}:host([active]){outline-color:var(--sapContent_ContrastFocusColor)}:host([design=Positive]){background-color:var(--sapButton_Accept_Background);border-color:var(--_ui5_button_positive_border_color);color:var(--sapButton_Accept_TextColor);text-shadow:var(--_ui5_button_text_shadow)}:host([design=Positive]:hover){background-color:var(--sapButton_Accept_Hover_Background);border-color:var(--_ui5_button_positive_border_hover_color)}:host([design=Positive][active]){background-color:var(--sapButton_Accept_Active_Background);border-color:var(--_ui5_button_positive_border_active_color);color:var(--sapButton_Active_TextColor);text-shadow:none}:host([design=Positive][focused]){outline-color:var(--_ui5_button_positive_border_focus_hover_color);border-color:var(--_ui5_button_positive_focus_border_color)}:host([design=Positive][active][focused]){outline-color:var(--sapContent_ContrastFocusColor)}:host([design=Negative]){background-color:var(--sapButton_Reject_Background);border-color:var(--sapButton_Reject_BorderColor);color:var(--sapButton_Reject_TextColor);text-shadow:var(--_ui5_button_text_shadow)}:host([design=Negative]:hover){background-color:var(--sapButton_Reject_Hover_Background);border-color:var(--sapButton_Reject_Hover_BorderColor)}:host([design=Negative][focused]){border-color:var(--_ui5_button_negative_focus_border_color);outline-color:var(--_ui5_button_positive_border_focus_hover_color)}:host([design=Negative][active]){background-color:var(--sapButton_Reject_Active_Background);border-color:var(--_ui5_button_negative_active_border_color);color:var(--sapButton_Active_TextColor);text-shadow:none}:host([design=Negative][active][focused]){outline-color:var(--sapContent_ContrastFocusColor)}:host([design=Emphasized]){background-color:var(--sapButton_Emphasized_Background);border-color:var(--sapButton_Emphasized_BorderColor);color:var(--sapButton_Emphasized_TextColor);text-shadow:0 0 .125rem var(--sapButton_Emphasized_TextShadow);font-weight:var(--_ui5_button_emphasized_font_weight)}:host([design=Emphasized]:not([active]):hover){background-color:var(--sapButton_Emphasized_Hover_Background);border-color:var(--sapButton_Emphasized_Hover_BorderColor)}:host([design=Empasized][active]){background-color:var(--sapButton_Emphasized_Active_Background);border-color:var(--sapButton_Emphasized_Active_BorderColor);color:var(--sapButton_Active_TextColor);text-shadow:none}:host([design=Emphasized][focused]){outline-color:var(--sapContent_ContrastFocusColor);border-color:var(--_ui5_button_emphasized_focused_border_color)}:host([design=Transparent]){background-color:var(--sapButton_Lite_Background);color:var(--sapButton_Lite_TextColor);text-shadow:var(--_ui5_button_text_shadow);border-color:var(--_ui5_button_transparent_border_color)}:host([design=Transparent]):hover{background-color:var(--sapButton_Lite_Hover_Background)}:host([design=Transparent][active]){background-color:var(--sapButton_Active_Background);color:var(--sapButton_Active_TextColor);text-shadow:none}:host([design=Transparent]:not([active]):hover){border-color:var(--_ui5_button_transparent_hover_border_color)}[ui5-button][focused]{outline:none}[ui5-button][focused] .ui5-button-root{position:relative}[ui5-button][focused] .ui5-button-root:after{content:"";position:absolute;border-width:1px;border-style:dotted;border-color:var(--_ui5_button_focus_color);top:var(--_ui5_button_focus_offset);bottom:var(--_ui5_button_focus_offset);left:var(--_ui5_button_focus_offset);right:var(--_ui5_button_focus_offset)}[ui5-button][active] .ui5-button-root:after{border-color:var(--sapContent_ContrastFocusColor)}[ui5-button][design=Positive][focused] .ui5-button-root:after{border-color:var(--_ui5_button_positive_border_focus_hover_color)}[ui5-button][design=Positive][active][focused] .ui5-button-root:after{border-color:var(--sapContent_ContrastFocusColor)}[ui5-button][design=Negative][focused] .ui5-button-root:after{border-color:var(--_ui5_button_positive_border_focus_hover_color)}[ui5-button][design=Negative][active][focused] .ui5-button-root:after{border-color:var(--sapContent_ContrastFocusColor)}[ui5-button][design=Emphasized][focused] .ui5-button-root:after{border-color:var(--sapContent_ContrastFocusColor)}[ui5-button] [ui5-icon].ui5-button-icon{height:var(--_ui5_button_icon_font_size);top:0}';
+let isGlobalHandlerAttached = false;
+let activeButton = null;
+
+/**
+ * @public
+ */
+const metadata$2 = {
+ tag: 'ui5-button',
+ languageAware: true,
+ properties: /** @lends sap.ui.webcomponents.main.Button.prototype */ {
+ /**
+ * Defines the ui5-button
design.
+ * ui5-button
is disabled
+ * (default is set to false
).
+ * A disabled ui5-button
can't be pressed or
+ * focused, and it is not in the tab chain.
+ *
+ * @type {boolean}
+ * @defaultvalue false
+ * @public
+ */
+ disabled: {
+ type: Boolean
+ },
+
+ /**
+ * Defines the icon to be displayed as graphical element within the ui5-button
.
+ * The SAP-icons font provides numerous options.
+ * ui5-button icon="palette"+ * + * See all the available icons in the
ui5-button
text.
+ *
+ * @type {boolean}
+ * @defaultvalue false
+ * @public
+ */
+ iconEnd: {
+ type: Boolean
+ },
+
+ /**
+ * Defines the size of the icon inside the ui5-button
.
+ *
+ * @type {string}
+ * @defaultvalue undefined
+ * @public
+ * @since 1.0.0-rc.8
+ */
+ iconSize: {
+ type: String,
+ defaultValue: undefined
+ },
+
+ /**
+ * When set to true
, the ui5-button
will
+ * automatically submit the nearest form element upon press
.
+ * submits
property to have effect, you must add the following import to your project:
+ * import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";
+ *
+ * @type {boolean}
+ * @defaultvalue false
+ * @public
+ */
+ submits: {
+ type: Boolean
+ },
+
+ /**
+ * Used to switch the active state (pressed or not) of the ui5-button
.
+ * @private
+ */
+ active: {
+ type: Boolean
+ },
+
+ /**
+ * Defines if a content has been added to the default slot
+ * @private
+ */
+ iconOnly: {
+ type: Boolean
+ },
+
+ /**
+ * Indicates if the elements is on focus
+ * @private
+ */
+ focused: {
+ type: Boolean
+ },
+
+ /**
+ * Indicates if the elements has a slotted icon
+ * @private
+ */
+ hasIcon: {
+ type: Boolean
+ },
+
+ /**
+ * Defines the aria-label attribute for the button
+ * @type {String}
+ * @defaultvalue: ""
+ * @private
+ * @since 1.0.0-rc.7
+ */
+ ariaLabel: {
+ type: String,
+ defaultValue: undefined
+ },
+
+ /**
+ * Receives id(or many ids) of the elements that label the button
+ * @type {String}
+ * @defaultvalue ""
+ * @private
+ * @since 1.0.0-rc.7
+ */
+ ariaLabelledby: {
+ type: String,
+ defaultValue: ''
+ },
+
+ /**
+ * @type {String}
+ * @defaultvalue ""
+ * @private
+ * @since 1.0.0-rc.8
+ */
+ ariaExpanded: {
+ type: String
+ },
+
+ /**
+ * Indicates if the element if focusable
+ * @private
+ */
+ nonFocusable: {
+ type: Boolean
+ },
+
+ _iconSettings: {
+ type: Object
+ },
+ _buttonAccInfo: {
+ type: Object
+ },
+
+ /**
+ * Defines the tabIndex of the component.
+ * @private
+ */
+ _tabIndex: {
+ type: String,
+ defaultValue: '0',
+ noAttribute: true
+ }
+ },
+ managedSlots: true,
+ slots: /** @lends sap.ui.webcomponents.main.Button.prototype */ {
+ /**
+ * Defines the text of the ui5-button
.
+ * ui5-button
is activated either with a
+ * mouse/tap or by using the Enter or Space key.
+ * disabled
+ * property is set to true
.
+ *
+ * @event
+ * @public
+ */
+ click: {}
+ }
+};
+
+/**
+ * @class
+ *
+ * ui5-button
component represents a simple push button.
+ * It enables users to trigger actions by clicking or tapping the ui5-button
, or by pressing
+ * certain keyboard keys, such as Enter.
+ *
+ *
+ * ui5-button
UI, you can define text, icon, or both. You can also specify
+ * whether the text or the icon is displayed first.
+ * ui5-button
as enabled or disabled. An enabled
+ * ui5-button
can be pressed by clicking or tapping it. The button changes
+ * its style to provide visual feedback to the user that it is pressed or hovered over with
+ * the mouse cursor. A disabled ui5-button
appears inactive and cannot be pressed.
+ *
+ * import "@ui5/webcomponents/dist/Button";
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.Button
+ * @extends UI5Element
+ * @tagname ui5-button
+ * @public
+ */
+class Button extends UI5Element {
+ static get metadata() {
+ return metadata$2;
+ }
+
+ static get styles() {
+ return buttonCss;
+ }
+
+ static get render() {
+ return litRender;
+ }
+
+ static get template() {
+ return main;
+ }
+
+ static get dependencies() {
+ return [Icon];
+ }
+
+ constructor() {
+ super();
+
+ this._deactivate = () => {
+ if (activeButton) {
+ activeButton.active = false;
+ }
+ };
+
+ if (!isGlobalHandlerAttached) {
+ document.addEventListener('mouseup', this._deactivate);
+
+ isGlobalHandlerAttached = true;
+ }
+
+ this.i18nBundle = getI18nBundle('@ui5/webcomponents');
+ }
+
+ onBeforeRendering() {
+ const FormSupport = getFeature('FormSupport');
+ if (this.submits && !FormSupport) {
+ console.warn(
+ `In order for the "submits" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`
+ ); // eslint-disable-line
+ }
+
+ this.iconOnly = this.isIconOnly;
+ this.hasIcon = !!this.icon;
+ }
+
+ _onclick(event) {
+ event.isMarked = 'button';
+ const FormSupport = getFeature('FormSupport');
+ if (FormSupport) {
+ FormSupport.triggerFormSubmit(this);
+ }
+ }
+
+ _onmousedown(event) {
+ event.isMarked = 'button';
+ this.active = true;
+ activeButton = this; // eslint-disable-line
+ }
+
+ _onmouseup(event) {
+ event.isMarked = 'button';
+ }
+
+ _onkeydown(event) {
+ event.isMarked = 'button';
+
+ if (isSpace(event) || isEnter(event)) {
+ this.active = true;
+ }
+ }
+
+ _onkeyup(event) {
+ if (isSpace(event) || isEnter(event)) {
+ this.active = false;
+ }
+ }
+
+ _onfocusout(_event) {
+ this.active = false;
+ this.focused = false;
+ }
+
+ _onfocusin(event) {
+ event.isMarked = 'button';
+ this.focused = true;
+ }
+
+ get hasButtonType() {
+ return this.design !== ButtonDesign.Default && this.design !== ButtonDesign.Transparent;
+ }
+
+ get isIconOnly() {
+ return !Array.from(this.childNodes).filter((node) => node.nodeType !== Node.COMMENT_NODE).length;
+ }
+
+ get accInfo() {
+ return {
+ ariaExpanded: this.ariaExpanded || (this._buttonAccInfo && this._buttonAccInfo.ariaExpanded),
+ ariaControls: this._buttonAccInfo && this._buttonAccInfo.ariaControls,
+ ariaHaspopup: this._buttonAccInfo && this._buttonAccInfo.ariaHaspopup,
+ title: this._buttonAccInfo && this._buttonAccInfo.title
+ };
+ }
+
+ get ariaLabelText() {
+ return getEffectiveAriaLabelText(this);
+ }
+
+ static typeTextMappings() {
+ return {
+ Positive: BUTTON_ARIA_TYPE_ACCEPT,
+ Negative: BUTTON_ARIA_TYPE_REJECT,
+ Emphasized: BUTTON_ARIA_TYPE_EMPHASIZED
+ };
+ }
+
+ get buttonTypeText() {
+ return this.i18nBundle.getText(Button.typeTextMappings()[this.design]);
+ }
+
+ get tabIndexValue() {
+ const tabindex = this.getAttribute('tabindex');
+
+ if (tabindex) {
+ return tabindex;
+ }
+
+ return this.nonFocusable ? '-1' : this._tabIndex;
+ }
+
+ get styles() {
+ return {
+ icon: {
+ width: this.iconSize,
+ height: this.iconSize
+ }
+ };
+ }
+
+ static async onDefine() {
+ await fetchI18nBundle('@ui5/webcomponents');
+ }
+}
+
+Button.define();
+
+/**
+ * Base class for Luigi web component micro frontends.
+ */
+class LuigiElement extends HTMLElement {
+ constructor(options) {
+ super();
+ const closedShadow = options ? options.closedShadow : false;
+ this._shadowRoot = this.attachShadow({
+ mode: closedShadow ? 'closed' : 'open',
+ delegatesFocus: false
+ });
+ this.__initialized = false;
+ this.deferLuigiClientWCInit = options ? options.deferLuigiClientWCInit : false;
+ }
+
+ /**
+ * Invoked by luigi core if present, internal, don't override.
+ * @private
+ */
+ __postProcess(ctx, luigiClient, module_location_path) {
+ this.LuigiClient = luigiClient;
+ this.context = ctx;
+ const template = document.createElement('template');
+ template.innerHTML = this.render(ctx);
+ const attCnt = () => {
+ if (!this.__initialized) {
+ this._shadowRoot.appendChild(template.content.cloneNode(true));
+ Reflect.ownKeys(Reflect.getPrototypeOf(this)).forEach((el) => {
+ if (el.startsWith('$_')) {
+ this._shadowRoot[el] = this[el].bind(this);
+ }
+ });
+ const elementsWithIds = this._shadowRoot.querySelectorAll('[id]');
+ if (elementsWithIds) {
+ elementsWithIds.forEach((el) => {
+ this['$' + el.getAttribute('id')] = el;
+ });
+ }
+ this.afterInit(ctx);
+ this.__initialized = true;
+ }
+ };
+ if (this.luigiConfig && this.luigiConfig.styleSources && this.luigiConfig.styleSources.length > 0) {
+ let nr_styles = this.luigiConfig.styleSources.length;
+ const loadStylesSync = this.luigiConfig.loadStylesSync;
+ const afterLoadOrError = () => {
+ nr_styles--;
+ if (nr_styles < 1) {
+ attCnt();
+ }
+ };
+
+ this.luigiConfig.styleSources.forEach((element, index) => {
+ const link = document.createElement('link');
+ link.setAttribute('rel', 'stylesheet');
+ link.setAttribute('href', module_location_path + element);
+ if (loadStylesSync) {
+ link.addEventListener('load', afterLoadOrError);
+ link.addEventListener('error', afterLoadOrError);
+ }
+ this._shadowRoot.appendChild(link);
+ });
+ if (!loadStylesSync) {
+ attCnt();
+ }
+ } else {
+ attCnt();
+ }
+ }
+
+ /**
+ * Override to execute logic after initialization of the web component, i.e.
+ * after internal rendering and all context data set.
+ *
+ * @param {*} ctx The context object passed by luigi core
+ */
+ afterInit(ctx) {
+ return;
+ }
+
+ /**
+ * Override to return the html template string defining the web component view.
+ *
+ * @param {*} ctx The context object passed by luigi core
+ */
+ render(ctx) {
+ return '';
+ }
+
+ /**
+ * Override to execute logic after an attribute of this web component has changed.
+ */
+ update() {
+ return;
+ }
+
+ /**
+ * Override to execute logic when a new context object is set.
+ *
+ * @param {*} ctx The new context object passed by luigi core
+ */
+ onContextUpdate(ctx) {
+ return;
+ }
+
+ /**
+ * Query selector operating on shadow root.
+ *
+ * @see ParentNode.querySelector
+ */
+ querySelector(selector) {
+ return this._shadowRoot.querySelector(selector);
+ }
+
+ /**
+ * Handles changes on the context property.
+ *
+ * @private
+ */
+ set context(ctx) {
+ this.__lui_ctx = ctx;
+ if (this.__initialized) {
+ this.onContextUpdate(ctx);
+ this.attributeChangedCallback();
+ }
+ }
+
+ get context() {
+ return this.__lui_ctx;
+ }
+
+ /**
+ * Handles changes on attributes.
+ *
+ * @private
+ */
+ attributeChangedCallback(name, oldVal, newVal) {
+ this.update();
+ }
+}
+
+/**
+ * Html string processing according to luigi functionality.
+ * Also useful in combination with LitElement VS Code plugins.
+ *
+ * @param {String} literal The literal to process.
+ * @returns {String} Returns the processed literal.
+ */
+function html$1(literal, ...keys) {
+ let html = '';
+ literal.forEach((el, index) => {
+ html += el;
+ if (index < keys.length && keys[index] !== undefined && keys[index] !== null) {
+ html += keys[index];
+ }
+ });
+ return html.replace(/\$\_/gi, 'this.getRootNode().$_');
+}
+
+class myCustomWebComponent extends LuigiElement {
+ constructor() {
+ super();
+ }
+
+ afterInit(ctx) {
+ this.$button = this.querySelector('ui5-button');
+ this.$button.addEventListener('click', () => {
+ if (this.showAlert) {
+ this.LuigiClient.uxManager().showAlert({
+ text: 'Hello from ' + this.label,
+ type: 'info'
+ });
+ }
+ this.LuigiClient.publishEvent(new CustomEvent('buttonPressed', { details: this.label }));
+ });
+ this.onContextUpdate(ctx);
+ }
+
+ onContextUpdate(ctx) {
+ this.label = ctx.label;
+ this.$button.innerHTML = this.label;
+ this.showAlert = ctx.showAlert === undefined ? true : ctx.showAlert;
+ }
+
+ render() {
+ return html$1`
+ This is a luigi micro frontend, based on web components.
+${ctx.description}
+