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``; +}; +const block2 = (context) => { + return scopedHtml`${ifDefined(context.buttonTypeText)}`; +}; + +const main = (context, tags, suffix) => { + setTags(tags); + setSuffix(suffix); + return block0(context); +}; +const getSharedResourcesInstance = () => getSingletonElementInstance('ui5-shared-resources', document.head); + +/** + * Use this method to initialize/get resources that you would like to be shared among UI5 Web Components runtime instances. + * The data will be accessed via a singleton "ui5-shared-resources" HTML element in the "head" element of the page. + * + * @public + * @param namespace Unique ID of the resource, may contain "." to denote hierarchy + * @param initialValue Object or primitive that will be used as an initial value if the resource does not exist + * @returns {*} + */ +const getSharedResource = (namespace, initialValue) => { + const parts = namespace.split('.'); + let current = getSharedResourcesInstance(); + + for (let i = 0; i < parts.length; i++) { + const part = parts[i]; + const lastPart = i === parts.length - 1; + if (!Object.prototype.hasOwnProperty.call(current, part)) { + current[part] = lastPart ? initialValue : {}; + } + current = current[part]; + } + + return current; +}; +const registry = getSharedResource('SVGIcons.registry', new Map()); +const iconCollectionPromises = getSharedResource('SVGIcons.promises', new Map()); + +const ICON_NOT_FOUND = 'ICON_NOT_FOUND'; +const DEFAULT_COLLECTION = 'SAP-icons'; + +const calcKey = (name, collection) => { + // silently support ui5-compatible URIs + if (name.startsWith('sap-icon://')) { + name = name.replace('sap-icon://', ''); + [name, collection] = name.split('/').reverse(); + } + collection = collection || DEFAULT_COLLECTION; + return `${collection}:${name}`; +}; + +const getIconDataSync = (name, collection = DEFAULT_COLLECTION) => { + const key = calcKey(name, collection); + return registry.get(key); +}; + +const getIconData = async (name, collection = DEFAULT_COLLECTION) => { + const key = calcKey(name, collection); + + if (!iconCollectionPromises.has(collection)) { + iconCollectionPromises.set(collection, Promise.resolve(ICON_NOT_FOUND)); + } + + const iconData = await iconCollectionPromises.get(collection); + + if (iconData === ICON_NOT_FOUND) { + return iconData; + } + + return registry.get(key); +}; +const block0$1 = (context) => { + return scopedHtml`${blockSVG1(context)}`; +}; +const block1$1 = (context) => { + return scopedSvg`${ifDefined(context.accessibleNameText)}`; +}; + +const blockSVG1 = (context) => { + return scopedSvg`${context.hasIconTooltip ? block1$1(context) : undefined}`; +}; + +const main$1 = (context, tags, suffix) => { + setTags(tags); + setSuffix(suffix); + return block0$1(context); +}; +var defaultThemeBase = + ':root{--sapBrandColor:#0a6ed1;--sapHighlightColor:#0854a0;--sapBaseColor:#fff;--sapShellColor:#354a5f;--sapBackgroundColor:#f7f7f7;--sapFontFamily:"72","72full",Arial,Helvetica,sans-serif;--sapFontLightFamily:"72-Light","72-Lightfull","72","72full",Arial,Helvetica,sans-serif;--sapFontBoldFamily:"72-Bold","72-Boldfull","72","72full",Arial,Helvetica,sans-serif;--sapFontHeaderFamily:"72","72full",Arial,Helvetica,sans-serif;--sapFontSize:.875rem;--sapFontSmallSize:.75rem;--sapFontLargeSize:1rem;--sapFontHeader1Size:2.25rem;--sapFontHeader2Size:1.5rem;--sapFontHeader3Size:1.25rem;--sapFontHeader4Size:1.125rem;--sapFontHeader5Size:1rem;--sapFontHeader6Size:.875rem;--sapTextColor:#32363a;--sapLinkColor:#0a6ed1;--sapLink_Hover_Color:#0854a0;--sapLink_Active_Color:#0a6ed1;--sapLink_Visited_Color:#0a6ed1;--sapLink_InvertedColor:#d3e8fd;--sapLink_SubtleColor:#074888;--sapCompanyLogo:none;--sapBackgroundImage:none;--sapBackgroundImageOpacity:1.0;--sapBackgroundImageRepeat:false;--sapSelectedColor:#0854a0;--sapActiveColor:#0854a0;--sapHighlightTextColor:#fff;--sapTitleColor:#32363a;--sapNegativeColor:#b00;--sapCriticalColor:#e9730c;--sapPositiveColor:#107e3e;--sapInformativeColor:#0a6ed1;--sapNeutralColor:#6a6d70;--sapNegativeElementColor:#b00;--sapCriticalElementColor:#e9730c;--sapPositiveElementColor:#107e3e;--sapInformativeElementColor:#0a6ed1;--sapNeutralElementColor:#6a6d70;--sapNegativeTextColor:#b00;--sapPositiveTextColor:#107e3e;--sapCriticalTextColor:#e9730c;--sapInformativeTextColor:#053b70;--sapNeutralTextColor:#6a6d70;--sapNeutralBorderColor:#6a6d70;--sapErrorColor:#b00;--sapErrorBorderColor:#b00;--sapWarningColor:#e9730c;--sapWarningBorderColor:#e9730c;--sapSuccessColor:#107e3e;--sapSuccessBorderColor:#107e3e;--sapInformationColor:#0a6ed1;--sapInformationBorderColor:#0a6ed1;--sapErrorBackground:#ffebeb;--sapWarningBackground:#fef7f1;--sapSuccessBackground:#f1fdf6;--sapInformationBackground:#f5faff;--sapNeutralBackground:#f4f4f4;--sapIndicationColor_1:#800;--sapIndicationColor_1_Hover_Background:#6f0000;--sapIndicationColor_1_Active_Background:#500;--sapIndicationColor_1_TextColor:#fff;--sapIndicationColor_2:#b00;--sapIndicationColor_2_Hover_Background:#a20000;--sapIndicationColor_2_Active_Background:#800;--sapIndicationColor_2_TextColor:#fff;--sapIndicationColor_3:#e9730c;--sapIndicationColor_3_Hover_Background:#da6c0b;--sapIndicationColor_3_Active_Background:#cc650b;--sapIndicationColor_3_TextColor:#fff;--sapIndicationColor_4:#107e3e;--sapIndicationColor_4_Hover_Background:#0d6733;--sapIndicationColor_4_Active_Background:#0a5128;--sapIndicationColor_4_TextColor:#fff;--sapIndicationColor_5:#0a6ed1;--sapIndicationColor_5_Hover_Background:#0961b9;--sapIndicationColor_5_Active_Background:#0854a0;--sapIndicationColor_5_TextColor:#fff;--sapIndicationColor_6:#0f828f;--sapIndicationColor_6_Hover_Background:#0d6d78;--sapIndicationColor_6_Active_Background:#0a5861;--sapIndicationColor_6_TextColor:#fff;--sapIndicationColor_7:#925ace;--sapIndicationColor_7_Hover_Background:#8546c8;--sapIndicationColor_7_Active_Background:#7838bd;--sapIndicationColor_7_TextColor:#fff;--sapIndicationColor_8:#c0399f;--sapIndicationColor_8_Hover_Background:#ac338f;--sapIndicationColor_8_Active_Background:#992d7e;--sapIndicationColor_8_TextColor:#fff;--sapElement_LineHeight:2.75rem;--sapElement_Height:2.25rem;--sapElement_BorderWidth:.0625rem;--sapElement_BorderCornerRadius:.25rem;--sapElement_Compact_LineHeight:2rem;--sapElement_Compact_Height:1.625rem;--sapElement_Condensed_LineHeight:1.5rem;--sapElement_Condensed_Height:1.375rem;--sapContent_LineHeight:1.4;--sapContent_IconHeight:1rem;--sapContent_IconColor:#0854a0;--sapContent_ContrastIconColor:#fff;--sapContent_NonInteractiveIconColor:#6a6d70;--sapContent_MarkerIconColor:#286eb4;--sapContent_MarkerTextColor:#0e7581;--sapContent_ImagePlaceholderBackground:#ccc;--sapContent_ImagePlaceholderForegroundColor:#fff;--sapContent_RatedColor:#d08014;--sapContent_UnratedColor:#89919a;--sapContent_FocusColor:#000;--sapContent_FocusStyle:dotted;--sapContent_FocusWidth:.0625rem;--sapContent_ContrastFocusColor:#fff;--sapContent_ShadowColor:#000;--sapContent_ContrastShadowColor:#fff;--sapContent_Shadow0:0 0 0 0.0625rem rgba(0,0,0,0.1),0 0.125rem 0.5rem 0 rgba(0,0,0,0.1);--sapContent_Shadow1:0 0 0 0.0625rem rgba(0,0,0,0.42),0 0.125rem 0.5rem 0 rgba(0,0,0,0.3);--sapContent_Shadow2:0 0 0 0.0625rem rgba(0,0,0,0.42),0 0.625rem 1.875rem 0 rgba(0,0,0,0.3);--sapContent_Shadow3:0 0 0 0.0625rem rgba(0,0,0,0.42),0 1.25rem 5rem 0 rgba(0,0,0,0.3);--sapContent_TextShadow:0 0 0.125rem #fff;--sapContent_HeaderShadow:0 0 0.25rem 0 rgba(0,0,0,0.15),inset 0 -0.0625rem 0 0 #d9d9d9;--sapContent_SearchHighlightColor:#d4f7db;--sapContent_HelpColor:#3f8600;--sapContent_LabelColor:#6a6d70;--sapContent_MonospaceFontFamily:lucida console,monospace;--sapContent_DisabledTextColor:rgba(50,54,58,0.6);--sapContent_DisabledOpacity:0.4;--sapContent_ContrastTextThreshold:0.65;--sapContent_ContrastTextColor:#fff;--sapContent_ForegroundColor:#efefef;--sapContent_ForegroundBorderColor:#89919a;--sapContent_ForegroundTextColor:#32363a;--sapContent_BadgeBackground:#d04343;--sapContent_BadgeTextColor:#fff;--sapContent_Placeholderloading_Background:#e0e0e0;--sapContent_Placeholderloading_Gradient:linear-gradient(90deg,#e0e0e0 0%,#e0e0e0 35%,#d3d3d3 50%,#e0e0e0 65%,#e0e0e0);--sapContent_DragAndDropActiveColor:#0854a0;--sapContent_Selected_Background:#0854a0;--sapContent_Selected_TextColor:#fff;--sapContent_Selected_Hover_Background:#095caf;--sapContent_Illustrative_Color1:#0a6ed1;--sapContent_Illustrative_Color2:#72b5f8;--sapContent_Illustrative_Color3:#ffba10;--sapContent_Illustrative_Color4:#4a5055;--sapContent_Illustrative_Color5:#9da4aa;--sapContent_Illustrative_Color6:#c6cace;--sapContent_Illustrative_Color7:#e7e9ea;--sapContent_Illustrative_Color8:#fff;--sapShell_Background:#edeff0;--sapShell_BackgroundImage:linear-gradient(180deg,#dfe3e4,#f3f4f5);--sapShell_BackgroundGradient:linear-gradient(180deg,#dfe3e4,#f3f4f5);--sapShell_BackgroundImageOpacity:1.0;--sapShell_BackgroundImageRepeat:false;--sapShell_BorderColor:#354a5f;--sapShell_TextColor:#fff;--sapShell_InteractiveTextColor:#d1e8ff;--sapShell_InteractiveBorderColor:#7996b4;--sapShell_GroupTitleTextColor:#32363a;--sapShell_Hover_Background:#283848;--sapShell_Active_Background:#23303e;--sapShell_Active_TextColor:#fff;--sapShell_Selected_Background:#23303e;--sapShell_Selected_TextColor:#fff;--sapShell_Selected_Hover_Background:#23303e;--sapShell_Favicon:none;--sapShell_Navigation_Background:#fff;--sapShell_Navigation_SelectedColor:#0854a0;--sapShell_Navigation_Selected_TextColor:#0854a0;--sapShell_Navigation_TextColor:#32363a;--sapShell_Shadow:0 0 0.25rem 0 rgba(0,0,0,0.15),inset 0 -0.0625rem 0 0 rgba(0,0,0,0.2);--sapButton_BorderWidth:.0625rem;--sapButton_BorderCornerRadius:.25rem;--sapButton_Background:#fff;--sapButton_BorderColor:#0854a0;--sapButton_TextColor:#0854a0;--sapButton_Hover_Background:#ebf5fe;--sapButton_Hover_BorderColor:#0854a0;--sapButton_Hover_TextColor:#0854a0;--sapButton_IconColor:#0854a0;--sapButton_Active_Background:#0854a0;--sapButton_Active_BorderColor:#0854a0;--sapButton_Active_TextColor:#fff;--sapButton_Emphasized_Background:#0a6ed1;--sapButton_Emphasized_BorderColor:#0a6ed1;--sapButton_Emphasized_TextColor:#fff;--sapButton_Emphasized_Hover_Background:#085caf;--sapButton_Emphasized_Hover_BorderColor:#085caf;--sapButton_Emphasized_Hover_TextColor:#fff;--sapButton_Emphasized_Active_Background:#0854a0;--sapButton_Emphasized_Active_BorderColor:#0854a0;--sapButton_Emphasized_TextShadow:transparent;--sapButton_Accept_Background:#fff;--sapButton_Accept_BorderColor:#107e3e;--sapButton_Accept_Hover_Background:#f1fdf6;--sapButton_Accept_Hover_BorderColor:#107e3e;--sapButton_Accept_Hover_TextColor:#107e3e;--sapButton_Accept_Active_Background:#0d6733;--sapButton_Accept_Active_BorderColor:#0d6733;--sapButton_Accept_TextColor:#107e3e;--sapButton_Accept_Selected_Background:#0d6733;--sapButton_Accept_Selected_BorderColor:#0d6733;--sapButton_Accept_Selected_TextColor:#fff;--sapButton_Accept_Selected_Hover_Background:#107e3e;--sapButton_Accept_Selected_Hover_BorderColor:#107e3e;--sapButton_Reject_Background:#fff;--sapButton_Reject_BorderColor:#b00;--sapButton_Reject_Hover_Background:#ffebeb;--sapButton_Reject_Hover_BorderColor:#b00;--sapButton_Reject_Hover_TextColor:#b00;--sapButton_Reject_Active_Background:#a20000;--sapButton_Reject_Active_BorderColor:#a20000;--sapButton_Reject_TextColor:#b00;--sapButton_Reject_Selected_Background:#a20000;--sapButton_Reject_Selected_BorderColor:#a20000;--sapButton_Reject_Selected_TextColor:#fff;--sapButton_Reject_Selected_Hover_Background:#b00;--sapButton_Reject_Selected_Hover_BorderColor:#b00;--sapButton_Lite_Background:transparent;--sapButton_Lite_BorderColor:transparent;--sapButton_Lite_TextColor:#0854a0;--sapButton_Lite_Hover_Background:#ebf5fe;--sapButton_Lite_Hover_BorderColor:#0854a0;--sapButton_Lite_Hover_TextColor:#0854a0;--sapButton_Lite_Active_Background:#0854a0;--sapButton_Lite_Active_BorderColor:#0854a0;--sapButton_Selected_Background:#0854a0;--sapButton_Selected_BorderColor:#0854a0;--sapButton_Selected_TextColor:#fff;--sapButton_Selected_Hover_Background:#095caf;--sapButton_Selected_Hover_BorderColor:#095caf;--sapButton_Attention_Background:#fff;--sapButton_Attention_BorderColor:#e9730c;--sapButton_Attention_TextColor:#e9730c;--sapButton_Attention_Hover_Background:#fef7f1;--sapButton_Attention_Hover_BorderColor:#e9730c;--sapButton_Attention_Hover_TextColor:#e9730c;--sapButton_Attention_Active_Background:#d1670b;--sapButton_Attention_Active_BorderColor:#d1670b;--sapButton_Attention_Selected_Background:#d1670b;--sapButton_Attention_Selected_BorderColor:#d1670b;--sapButton_Attention_Selected_TextColor:#fff;--sapButton_Attention_Selected_Hover_Background:#e9730c;--sapButton_Attention_Selected_Hover_BorderColor:#e9730c;--sapButton_Negative_Background:#b00;--sapButton_Negative_BorderColor:#b00;--sapButton_Negative_TextColor:#fff;--sapButton_Negative_Hover_Background:#970000;--sapButton_Negative_Hover_BorderColor:#970000;--sapButton_Negative_Hover_TextColor:#fff;--sapButton_Negative_Active_Background:#800;--sapButton_Negative_Active_BorderColor:#800;--sapButton_Critical_Background:#e9730c;--sapButton_Critical_BorderColor:#e9730c;--sapButton_Critical_TextColor:#fff;--sapButton_Critical_Hover_Background:#c7620a;--sapButton_Critical_Hover_BorderColor:#c7620a;--sapButton_Critical_Hover_TextColor:#fff;--sapButton_Critical_Active_Background:#b85b0a;--sapButton_Critical_Active_BorderColor:#b85b0a;--sapButton_Success_Background:#107e3e;--sapButton_Success_BorderColor:#107e3e;--sapButton_Success_TextColor:#fff;--sapButton_Success_Hover_Background:#0c5e2e;--sapButton_Success_Hover_BorderColor:#0c5e2e;--sapButton_Success_Hover_TextColor:#fff;--sapButton_Success_Active_Background:#0a5128;--sapButton_Success_Active_BorderColor:#0a5128;--sapButton_Information_Background:#0a6ed1;--sapButton_Information_BorderColor:#0a6ed1;--sapButton_Information_TextColor:#fff;--sapButton_Information_Hover_Background:#0961b9;--sapButton_Information_Hover_BorderColor:#0961b9;--sapButton_Information_Hover_TextColor:#fff;--sapButton_Information_Active_Background:#0854a0;--sapButton_Information_Active_BorderColor:#0854a0;--sapButton_Neutral_Background:#6a6d70;--sapButton_Neutral_BorderColor:#6a6d70;--sapButton_Neutral_TextColor:#fff;--sapButton_Neutral_Hover_Background:#595b5e;--sapButton_Neutral_Hover_BorderColor:#595b5e;--sapButton_Neutral_Hover_TextColor:#fff;--sapButton_Neutral_Active_Background:#515456;--sapButton_Neutral_Active_BorderColor:#515456;--sapButton_Track_Selected_Background:#ebf5fe;--sapButton_Track_Selected_TextColor:#32363a;--sapButton_Track_Background:#ededed;--sapButton_Track_TextColor:#32363a;--sapButton_TokenBackground:#fafafa;--sapButton_TokenBorderColor:#c2c2c2;--sapField_Background:#fff;--sapField_TextColor:#32363a;--sapField_PlaceholderTextColor:#74777a;--sapField_BorderColor:#89919a;--sapField_HelpBackground:#fff;--sapField_BorderWidth:.0625rem;--sapField_BorderCornerRadius:.125rem;--sapField_Hover_Background:#fff;--sapField_Hover_BorderColor:#0854a0;--sapField_Hover_HelpBackground:#ebf5fe;--sapField_Active_BorderColor:#0854a0;--sapField_Focus_Background:#fff;--sapField_Focus_BorderColor:#89919a;--sapField_Focus_HelpBackground:#fff;--sapField_ReadOnly_Background:hsla(0,0%,94.9%,0.5);--sapField_ReadOnly_BorderColor:#89919a;--sapField_ReadOnly_HelpBackground:hsla(0,0%,94.9%,0.5);--sapField_RequiredColor:#ce3b3b;--sapField_InvalidColor:#b00;--sapField_InvalidBackground:#fff;--sapField_WarningColor:#e9730c;--sapField_WarningBackground:#fff;--sapField_SuccessColor:#107e3e;--sapField_SuccessBackground:#fff;--sapField_InformationColor:#0a6ed1;--sapField_InformationBackground:#fff;--sapGroup_TitleBackground:transparent;--sapGroup_TitleBorderColor:#d9d9d9;--sapGroup_TitleTextColor:#32363a;--sapGroup_ContentBackground:#fff;--sapGroup_ContentBorderColor:#d9d9d9;--sapGroup_BorderWidth:.0625rem;--sapGroup_BorderCornerRadius:0;--sapGroup_FooterBackground:transparent;--sapToolbar_Background:transparent;--sapToolbar_SeparatorColor:#d9d9d9;--sapList_HeaderBackground:#f2f2f2;--sapList_HeaderBorderColor:#e4e4e4;--sapList_HeaderTextColor:#32363a;--sapList_BorderColor:#e4e4e4;--sapList_TextColor:#32363a;--sapList_Active_TextColor:#fff;--sapList_BorderWidth:.0625rem;--sapList_SelectionBackgroundColor:#e5f0fa;--sapList_SelectionBorderColor:#0854a0;--sapList_Hover_SelectionBackground:#d8e9f8;--sapList_Background:#fff;--sapList_Hover_Background:#f5f5f5;--sapList_AlternatingBackground:#fafafa;--sapList_GroupHeaderBackground:#fff;--sapList_GroupHeaderBorderColor:#d8d8d8;--sapList_GroupHeaderTextColor:#32363a;--sapList_FooterBackground:#fafafa;--sapList_FooterTextColor:#32363a;--sapList_TableGroupHeaderBackground:#efefef;--sapList_TableGroupHeaderBorderColor:#d8d8d8;--sapList_TableGroupHeaderTextColor:#32363a;--sapList_TableFooterBorder:#d8d8d8;--sapList_TableFixedBorderColor:#d8d8d8;--sapList_Active_Background:#0854a0;--sapScrollBar_FaceColor:#949494;--sapScrollBar_TrackColor:#fff;--sapScrollBar_BorderColor:#949494;--sapScrollBar_SymbolColor:#0854a0;--sapScrollBar_Dimension:.75rem;--sapScrollBar_Hover_FaceColor:#8c8c8c;--sapPageHeader_Background:#fff;--sapPageHeader_BorderColor:#d9d9d9;--sapPageHeader_TextColor:#32363a;--sapPageFooter_Background:#fff;--sapPageFooter_BorderColor:#d9d9d9;--sapPageFooter_TextColor:#32363a;--sapInfobar_Background:#0f828f;--sapInfobar_Hover_Background:#0e7581;--sapInfobar_Active_Background:#0a545c;--sapObjectHeader_Background:#fff;--sapObjectHeader_BorderColor:#d9d9d9;--sapBlockLayer_Background:#000;--sapTile_Background:#fff;--sapTile_Hover_Background:#f5f5f5;--sapTile_Active_Background:#f5f5f5;--sapTile_BorderColor:transparent;--sapTile_TitleTextColor:#32363a;--sapTile_TextColor:#6a6d70;--sapTile_IconColor:#5a7da0;--sapTile_SeparatorColor:#ccc;--sapAccentColor1:#d08014;--sapAccentColor2:#d04343;--sapAccentColor3:#db1f77;--sapAccentColor4:#c0399f;--sapAccentColor5:#6367de;--sapAccentColor6:#286eb4;--sapAccentColor7:#0f828f;--sapAccentColor8:#7ca10c;--sapAccentColor9:#925ace;--sapAccentColor10:#647987;--sapLegend_WorkingBackground:#fafafa;--sapLegend_NonWorkingBackground:#dedede;--sapLegend_CurrentDateTime:#c0399f;--sapLegendColor1:#d58215;--sapLegendColor2:#dc5b5b;--sapLegendColor3:#db1f77;--sapLegendColor4:#9b3b3b;--sapLegendColor5:#cf5db3;--sapLegendColor6:#286eb4;--sapLegendColor7:#1193a2;--sapLegendColor8:#8b9668;--sapLegendColor9:#647987;--sapLegendColor10:#892971;--sapLegendColor11:#725a3a;--sapLegendColor12:#bb2f2f;--sapLegendColor13:#bc1b66;--sapLegendColor14:#8b714f;--sapLegendColor15:#606190;--sapLegendColor16:#597da1;--sapLegendColor17:#49797e;--sapLegendColor18:#687a33;--sapLegendColor19:#295989;--sapLegendColor20:#5154bd;--sapLegendBackgroundColor1:#fdf3e7;--sapLegendBackgroundColor2:#faeaea;--sapLegendBackgroundColor3:#fce9f2;--sapLegendBackgroundColor4:#f8ecec;--sapLegendBackgroundColor5:#f9ebf5;--sapLegendBackgroundColor6:#ebf3fa;--sapLegendBackgroundColor7:#e8fbfd;--sapLegendBackgroundColor8:#f3f4ef;--sapLegendBackgroundColor9:#f1f3f4;--sapLegendBackgroundColor10:#f9ebf6;--sapLegendBackgroundColor11:#f6f2ed;--sapLegendBackgroundColor12:#faeaea;--sapLegendBackgroundColor13:#fce9f2;--sapLegendBackgroundColor14:#f5f2ee;--sapLegendBackgroundColor15:#f0f0f5;--sapLegendBackgroundColor16:#eff2f6;--sapLegendBackgroundColor17:#eff5f6;--sapLegendBackgroundColor18:#f5f7ed;--sapLegendBackgroundColor19:#ebf2f9;--sapLegendBackgroundColor20:#ecedf8;--sapChart_OrderedColor_1:#5899da;--sapChart_OrderedColor_2:#e8743b;--sapChart_OrderedColor_3:#19a979;--sapChart_OrderedColor_4:#ed4a7b;--sapChart_OrderedColor_5:#945ecf;--sapChart_OrderedColor_6:#13a4b4;--sapChart_OrderedColor_7:#525df4;--sapChart_OrderedColor_8:#bf399e;--sapChart_OrderedColor_9:#6c8893;--sapChart_OrderedColor_10:#ee6868;--sapChart_OrderedColor_11:#2f6497;--sapChart_Bad:#dc0d0e;--sapChart_Critical:#de890d;--sapChart_Good:#3fa45b;--sapChart_Neutral:#848f94;--sapChart_Sequence_1:#5899da;--sapChart_Sequence_2:#e8743b;--sapChart_Sequence_3:#19a979;--sapChart_Sequence_4:#ed4a7b;--sapChart_Sequence_5:#945ecf;--sapChart_Sequence_6:#13a4b4;--sapChart_Sequence_7:#525df4;--sapChart_Sequence_8:#bf399e;--sapChart_Sequence_9:#6c8893;--sapChart_Sequence_10:#ee6868;--sapChart_Sequence_11:#2f6497;--sapChart_Sequence_Neutral:#848f94;}'; +var defaultTheme = + ':root{--_ui5_calendar_header_height:3rem;--_ui5_calendar_header_arrow_button_width:2.5rem;--_ui5_calendar_header_padding:0.25rem 0;--_ui5_checkbox_root_side_padding:.6875rem;--_ui5_checkbox_icon_size:1rem;--_ui5_custom_list_item_height:3rem;--_ui5_custom_list_item_rb_min_width:2.75rem;--_ui5_day_picker_item_width:2.25rem;--_ui5_day_picker_item_height:2.875rem;--_ui5_day_picker_empty_height:3rem;--_ui5_datetime_picker_width:40.0625rem;--_ui5_datetime_picker_height:25rem;--_ui5_datetime_timeview_phonemode_width:19.5rem;--_ui5_datetime_timeview_padding:1rem;--_ui5_input_inner_padding:0 0.625rem;--_ui5_input_inner_padding_with_icon:0 0.25rem 0 0.625rem;--_ui5_input_value_state_icon_padding:var(--_ui5-input-icon-padding);--_ui5_list_no_data_height:3rem;--_ui5_list_item_cb_margin_right:0;--_ui5_list_item_title_size:var(--sapMFontLargeSize);--_ui5_list_item_img_size:3rem;--_ui5_list_item_img_margin:0.5rem 0.75rem 0.5rem 0rem;--_ui5_list_item_base_height:2.75rem;--_ui5_list_item_icon_size:1.125rem;--_ui5_list_busy_row_height:3rem;--_ui5_month_picker_item_height:3rem;--_ui5_year_picker_item_height:3rem;--_ui5_tokenizer_root_padding:0.1875rem;--_ui5_token_height:1.625rem;--_ui5_token_icon_size:1rem;--_ui5_token_icon_padding:0.25rem 0.5rem;--_ui5_token_wrapper_right_padding:0.3125rem;--_ui5_tl_bubble_padding:1rem;--_ui5_tl_indicator_before_bottom:-1.625rem;--_ui5_tl_padding:1rem 1rem 1rem .5rem;--_ui5_tl_li_margin_bottom:1.625rem;--_ui5_rb_height:2.75rem;--_ui5_rb_label_side_padding:.875rem;--_ui5_rb_focus_dist:.5rem;--_ui5_rb_inner_size:2.75rem;--_ui5_rb_svg_size:1.375rem;--_ui5_rb_label_width:calc(100% - 2.75rem);--_ui5_rb_rtl_focus_right:0.5rem;--_ui5_switch_text_on_left:calc(-100% + 1.9125rem);--_ui5_switch_slide_transform:translateX(100%) translateX(-1.875rem);--_ui5_switch_rtl_transform:translateX(1.875rem) translateX(-100%);--_ui5_switch_text_right:calc(-100% + 1.9125rem);--_ui5_tc_item_text:3rem;--_ui5_tc_item_text_text_only:3rem;--_ui5_tc_item_text_line_height:normal;--_ui5_tc_item_icon_size:1.5rem;--_ui5_tc_item_add_text_margin_top:0.625rem;--_ui5_textarea_padding:0.5625rem 0.6875rem;--_ui5-responnsive_popover_header_height:2.75rem;--ui5_side_navigation_item_height:2.75rem;--_ui5-tree-indent-step:1.5rem;--_ui5-tree-toggle-box-width:2.75rem;--_ui5-tree-toggle-box-height:2.25rem;--_ui5-tree-toggle-icon-size:1.0625rem;--_ui5_segmented_btn_border_radius:0.375rem;--ui5-avatar-initials-color:var(--sapContent_ImagePlaceholderForegroundColor);--ui5-avatar-initials-border:none;--ui5-avatar-accent1:var(--sapAccentColor1);--ui5-avatar-accent2:var(--sapAccentColor2);--ui5-avatar-accent3:var(--sapAccentColor3);--ui5-avatar-accent4:var(--sapAccentColor4);--ui5-avatar-accent5:var(--sapAccentColor5);--ui5-avatar-accent6:var(--sapAccentColor6);--ui5-avatar-accent7:var(--sapAccentColor7);--ui5-avatar-accent8:var(--sapAccentColor8);--ui5-avatar-accent9:var(--sapAccentColor9);--ui5-avatar-accent10:var(--sapAccentColor10);--ui5-avatar-placeholder:var(--sapContent_ImagePlaceholderBackground);--ui5-badge-font-size:0.75em;--ui5-badge-color-scheme-1-background:var(--sapLegendBackgroundColor1);--ui5-badge-color-scheme-1-border:var(--sapLegendColor1);--ui5-badge-color-scheme-2-background:var(--sapLegendBackgroundColor2);--ui5-badge-color-scheme-2-border:var(--sapLegendColor2);--ui5-badge-color-scheme-3-background:var(--sapLegendBackgroundColor3);--ui5-badge-color-scheme-3-border:var(--sapLegendColor3);--ui5-badge-color-scheme-4-background:var(--sapLegendBackgroundColor5);--ui5-badge-color-scheme-4-border:var(--sapLegendColor5);--ui5-badge-color-scheme-5-background:var(--sapLegendBackgroundColor20);--ui5-badge-color-scheme-5-border:var(--sapLegendColor20);--ui5-badge-color-scheme-6-background:var(--sapLegendBackgroundColor6);--ui5-badge-color-scheme-6-border:var(--sapLegendColor6);--ui5-badge-color-scheme-7-background:var(--sapLegendBackgroundColor7);--ui5-badge-color-scheme-7-border:var(--sapLegendColor7);--ui5-badge-color-scheme-8-background:var(--sapLegendBackgroundColor8);--ui5-badge-color-scheme-8-border:var(--sapLegendColor8);--ui5-badge-color-scheme-9-background:var(--sapLegendBackgroundColor10);--ui5-badge-color-scheme-9-border:var(--sapLegendColor10);--ui5-badge-color-scheme-10-background:var(--sapLegendBackgroundColor9);--ui5-badge-color-scheme-10-border:var(--sapAccentColor9);--_ui5_button_base_min_compact_width:2rem;--_ui5_button_compact_height:1.625rem;--_ui5_button_compact_padding:0.4375rem;--_ui5_button_outline:1px dotted var(--sapContent_FocusColor);--_ui5_button_outline_offset:-0.1875rem;--_ui5_button_focus_offset:1px;--_ui5_button_focus_width:1px;--_ui5_button_focus_color:var(--sapContent_FocusColor);--_ui5_button_transparent_border_color:transparent;--_ui5_button_transparent_hover_border_color:var(--sapButton_BorderColor);--_ui5_button_active_border_color:var(--sapButton_Active_BorderColor);--_ui5_button_positive_border_color:var(--sapButton_Accept_BorderColor);--_ui5_button_positive_border_hover_color:var(--sapButton_Accept_Hover_BorderColor);--_ui5_button_positive_border_active_color:var(--sapButton_Accept_Active_BorderColor);--_ui5_button_positive_border_focus_hover_color:var(--sapContent_FocusColor);--_ui5_button_positive_focus_border_color:var(--sapButton_Accept_BorderColor);--_ui5_button_negative_focus_border_color:var(--sapButton_Reject_BorderColor);--_ui5_button_negative_active_border_color:var(--sapButton_Reject_Active_BorderColor);--_ui5_button_emphasized_focused_border_color:var(--sapButton_Emphasized_BorderColor);--_ui5_button_base_min_width:2.25rem;--_ui5_button_base_height:2.25rem;--_ui5_button_border_radius:0.25rem;--_ui5_button_base_padding:0.5625rem;--_ui5_button_base_icon_only_padding:0.5625rem;--_ui5_button_base_icon_margin:0.375rem;--_ui5_button_emphasized_font_weight:bold;--_ui5_button_text_shadow:none;--_ui5_card_border_color:var(--sapTile_SeparatorColor);--_ui5_card_content_padding:1rem;--_ui5_card_header_hover_bg:var(--sapList_Hover_Background);--_ui5_card_header_active_bg:var(--_ui5_card_header_hover_bg);--_ui5_card_header_border_color:var(--_ui5_card_border_color);--_ui5_card_header_focus_border:1px dotted var(--sapContent_FocusColor);--ui5_carousel_button_size:2.5rem;--ui5_carousel_height:0.25rem;--ui5_carousel_width:0.25rem;--ui5_carousel_margin:0 0.375rem;--ui5_carousel_border:1px solid var(--sapContent_ForegroundBorderColor);--ui5_carousel_dot_border:none;--ui5_carousel_dot_background:var(--sapContent_NonInteractiveIconColor);--_ui5_checkbox_hover_background:var(--sapField_Hover_Background);--_ui5_checkbox_inner_width_height:1.375rem;--_ui5_checkbox_inner_error_border:0.125rem solid var(--sapField_InvalidColor);--_ui5_checkbox_inner_warning_border:0.125rem solid var(--sapField_WarningColor);--_ui5_checkbox_inner_information_border:0.125rem solid var(--sapField_InformationColor);--_ui5_checkbox_checkmark_warning_color:var(--sapField_TextColor);--_ui5_checkbox_checkmark_color:var(--sapSelectedColor);--_ui5_checkbox_wrapped_focus_left_top_bottom_position:.5625rem;--_ui5_checkbox_focus_outline:1px dotted var(--sapContent_FocusColor);--_ui5_checkbox_compact_wrapper_padding:.5rem;--_ui5_checkbox_compact_width_height:2rem;--_ui5_checkbox_compact_inner_size:1rem;--_ui5_checkbox_compact_focus_position:.375rem;--_ui5_checkbox_wrapper_padding:.6875rem;--_ui5_checkbox_width_height:2.75rem;--_ui5_checkbox_inner_border:.0625rem solid var(--sapField_BorderColor);--_ui5_checkbox_focus_position:0.5625rem;--_ui5_checkbox_inner_border_radius:.125rem;--_ui5_checkbox_wrapped_content_margin_top:0;--_ui5_checkbox_wrapped_focus_padding:.5rem;--_ui5_checkbox_inner_readonly_border:1px solid var(--sapField_ReadOnly_BorderColor);--_ui5_checkbox_compact_wrapped_label_margin_top:-0.125rem;--_ui5_datepicker_icon_border:none;--_ui5_daypicker_item_margin:2px;--_ui5_daypicker_item_border:none;--_ui5_daypicker_item_outline_width:1px;--_ui5_daypicker_item_outline_offset:1px;--_ui5_daypicker_daynames_container_height:2rem;--_ui5_daypicker_item_othermonth_background_color:var(--sapList_Background);--_ui5_daypicker_item_othermonth_color:var(--sapContent_LabelColor);--_ui5_daypicker_item_othermonth_hover_color:var(--sapContent_LabelColor);--_ui5_daypicker_dayname_color:var(--sapContent_LabelColor);--_ui5_daypicker_weekname_color:var(--sapContent_LabelColor);--_ui5_daypicker_item_now_selected_focus_after_width:calc(100% - 0.125rem);--_ui5_daypicker_item_now_selected_focus_after_height:calc(100% - 0.125rem);--_ui5_daypicker_item_selected_hover_background_color:var(--sapActiveColor_Lighten3);--_ui5_daypicker_item_border_radius:0.25rem;--_ui5_daypicker_item_now_inner_border_radius:0.125rem;--ui5-group-header-listitem-background-color:var(--sapList_GroupHeaderBackground);--_ui5_input_width:13.125rem;--_ui5_input_compact_height:1.625rem;--_ui5_input_state_border_width:0.125rem;--_ui5-input-information_border_width:0.125rem;--_ui5_input_error_font_weight:normal;--_ui5_input_focus_border_width:1px;--_ui5_input_error_warning_border_style:solid;--_ui5_input_error_warning_font_style:inherit;--_ui5_input_disabled_color:var(--sapContent_DisabledTextColor);--_ui5_input_disabled_font_weight:normal;--_ui5_input_disabled_border_color:var(--sapField_BorderColor);--_ui5_input_disabled_background:var(--sapField_Background);--_ui5_input_icon_min_width:2.375rem;--_ui5_input_compact_min_width:2rem;--_ui5_input_height:2.25rem;--_ui5_input_disabled_opacity:0.4;--_ui5_input_wrapper_border_radius:0.125rem;--_ui5_input_icon_padding:.5625rem .6875rem;--_ui5_link_opacity:0.4;--_ui5_link_text_decoration:none;--_ui5_link_hover_text_decoration:underline;--ui5_list_footer_text_color:var(--sapTextColor);--ui5-listitem-background-color:var(--sapList_Background);--ui5-listitem-border-bottom:1px solid var(--sapList_BorderColor);--ui5-listitem-selected-border-bottom:1px solid var(--sapList_SelectionBorderColor);--_ui5_listitembase_focus_width:1px;--_ui5_product_switch_item_border:none;--_ui5_monthpicker_item_border:none;--_ui5_monthpicker_item_margin:1px;--_ui5_monthpicker_item_focus_after_width:calc(100% - 0.375rem);--_ui5_monthpicker_item_focus_after_height:calc(100% - 0.375rem);--_ui5_monthpicker_item_focus_after_border:1px dotted var(--sapContent_FocusColor);--_ui5_monthpicker_item_focus_after_offset:2px;--_ui5_monthpicker_item_border_radius:0.25rem;--_ui5_messagestrip_icon_width:2.5rem;--_ui5_messagestrip_border_radius:0.1875rem;--_ui5_messagestrip_button_border_width:0;--_ui5_messagestrip_button_border_style:none;--_ui5_messagestrip_button_border_color:transparent;--_ui5_messagestrip_button_border_radius:0;--_ui5_messagestrip_padding:0.4375rem 2.5rem 0.4375rem 2.5rem;--_ui5_messagestrip_padding_no_icon:0.4375rem 2.5rem 0.4375rem 1rem;--_ui5_messagestrip_button_height:1.625rem;--_ui5_messagestrip_border_width:1px;--_ui5_messagestrip_close_button_border:none;--_ui5_messagestrip_close_button_size:1.625rem;--_ui5_messagestrip_icon_top:0.4375rem;--_ui5_messagestrip_focus_width:1px;--_ui5_messagestrip_focus_offset:-2px;--_ui5_panel_focus_border:1px dotted var(--sapContent_FocusColor);--_ui5_panel_header_height:2.75rem;--_ui5_panel_button_root_width:2.75rem;--_ui5_popup_content_padding:.4375em;--_ui5_progress_indicator_value_state_none:var(--sapNeutralElementColor);--_ui5_progress_indicator_value_state_error:var(--sapNegativeElementColor);--_ui5_progress_indicator_value_state_warning:var(--sapCriticalElementColor);--_ui5_progress_indicator_value_state_success:var(--sapPositiveElementColor);--_ui5_progress_indicator_value_state_information:var(--sapInformativeElementColor);--_ui5_progress_indicator_color:var(--sapTextColor);--_ui5_progress_indicator_bar_color:var(--sapContent_ContrastTextColor);--_ui5_progress_indicator_border:0.0625rem solid var(--sapField_BorderColor);--_ui5_progress_indicator_bar_border_max:none;--_ui5_progress_indicator_icon_visibility:none;--_ui5_radiobutton_min_width:2.75rem;--_ui5_radiobutton_min_width_compact:2rem;--_ui5_radiobutton_hover_fill:var(--sapField_Hover_Background);--_ui5_radiobutton_border_width:1px;--_ui5_radiobutton_selected_fill:var(--sapSelectedColor);--_ui5_radiobutton_selected_error_fill:var(--sapField_InvalidColor);--_ui5_radiobutton_selected_warning_fill:var(--sapField_TextColor);--_ui5_radiobutton_warning_error_border_dash:0;--_ui5_select_disabled_background:var(--sapField_Background);--_ui5_select_disabled_border_color:var(--sapField_BorderColor);--_ui5_select_state_error_warning_border_style:solid;--_ui5_select_state_error_warning_border_width:0.125rem;--_ui5_select_hover_icon_left_border:1px solid transparent;--_ui5_select_rtl_hover_icon_left_border:none;--_ui5_select_rtl_hover_icon_right_border:none;--_ui5_select_focus_width:1px;--_ui5_switch_height:2.75rem;--_ui5_switch_width:3.875rem;--_ui5_switch_no_label_width:3.25rem;--_ui5_switch_outline:1px;--_ui5_switch_compact_height:2rem;--_ui5_switch_compact_width:3.5rem;--_ui5_switch_compact_no_label_width:2.5rem;--_ui5_switch_track_height:1.375rem;--_ui5_switch_track_no_label_height:1.25rem;--_ui5_switch_track_compact_no_label_height:1rem;--_ui5_switch_track_hover_border_color:var(--_ui5_switch_track_checked_border_color);--_ui5_switch_track_hover_background_color:var(--sapButton_Track_Background);--_ui5_switch_track_hover_checked_background_color:var(--sapButton_Track_Selected_Background);--_ui5_switch_track_border_radius:0.75rem;--_ui5_switch_track_disabled_checked_bg:var(--_ui5_switch_track_checked_bg);--_ui5_switch_track_disabled_border_color:var(--sapContent_ForegroundBorderColor);--_ui5_switch_track_disabled_semantic_checked_bg:var(--sapSuccessBackground);--_ui5_switch_track_disabled_semantic_checked_border_color:var(--sapSuccessBorderColor);--_ui5_switch_track_disabled_semantic_bg:var(--sapErrorBackground);--_ui5_switch_track_disabled_semantic_border_color:var(--sapErrorBorderColor);--_ui5_switch_handle_width:2rem;--_ui5_switch_handle_height:2rem;--_ui5_switch_handle_border_width:1px;--_ui5_switch_handle_border_radius:1rem;--_ui5_switch_handle_bg:var(--sapButton_TokenBackground);--_ui5_switch_handle_checked_bg:var(--sapButton_Selected_Background);--_ui5_switch_handle_checked_border_color:var(--sapButton_Selected_BorderColor);--_ui5_switch_handle_semantic_hover_bg:var(--sapErrorBackground);--_ui5_switch_handle_semantic_checked_hover_bg:var(--sapSuccessBackground);--_ui5_switch_handle_semantic_hover_border_color:var(--sapErrorBorderColor);--_ui5_switch_handle_semantic_checked_hover_border_color:var(--sapSuccessBorderColor);--_ui5_switch_handle_compact_width:1.625rem;--_ui5_switch_handle_compact_height:1.625rem;--_ui5_switch_handle_disabled_bg:var(--_ui5_switch_handle_bg);--_ui5_switch_handle_disabled_checked_bg:var(--_ui5_switch_handle_checked_bg);--_ui5_switch_handle_disabled_border_color:var(--sapContent_ForegroundBorderColor);--_ui5_switch_handle_disabled_semantic_checked_bg:var(--sapButton_Background);--_ui5_switch_handle_disabled_semantic_checked_border_color:var(--sapSuccessBorderColor);--_ui5_switch_handle_disabled_semantic_border_color:var(--sapErrorBorderColor);--_ui5_switch_text_on_semantic_color:var(--sapPositiveElementColor);--_ui5_switch_text_off_semantic_color:var(--sapNegativeElementColor);--_ui5_switch_text_disabled_color:var(--sapTextColor);--_ui5_tc_header_height:4.6875rem;--_ui5_tc_header_height_compact:3.6875rem;--_ui5_tc_header_height_text_only:3rem;--_ui5_tc_header_height_text_only_compact:2rem;--_ui5_tc_headeritem_text_selected_color:var(--sapSelectedColor);--_ui5_tc_headerItem_neutral_color:var(--sapNeutralColor);--_ui5_tc_headerItem_positive_color:var(--sapPositiveColor);--_ui5_tc_headerItem_negative_color:var(--sapNegativeColor);--_ui5_tc_headerItem_critical_color:var(--sapCriticalColor);--_ui5_tc_headerItem_neutral_border_color:var(--_ui5_tc_headerItem_neutral_color);--_ui5_tc_headerItem_positive_border_color:var(--_ui5_tc_headerItem_positive_color);--_ui5_tc_headerItem_negative_border_color:var(--_ui5_tc_headerItem_negative_color);--_ui5_tc_headerItem_critical_border_color:var(--_ui5_tc_headerItem_critical_color);--_ui5_tc_headerItem_neutral_selected_border_color:var(--_ui5_tc_headerItem_neutral_color);--_ui5_tc_headerItem_positive_selected_border_color:var(--_ui5_tc_headerItem_positive_color);--_ui5_tc_headerItem_negative_selected_border_color:var(--_ui5_tc_headerItem_negative_color);--_ui5_tc_headerItem_critical_selected_border_color:var(--_ui5_tc_headerItem_critical_color);--_ui5_tc_headerItem_focus_border:1px dotted var(--sapContent_FocusColor);--_ui5_tc_headerItemSemanticIcon_display:none;--_ui5_tc_overflowItem_neutral_color:var(--sapNeutralColor);--_ui5_tc_overflowItem_positive_color:var(--sapPositiveColor);--_ui5_tc_overflowItem_negative_color:var(--sapNegativeColor);--_ui5_tc_overflowItem_critical_color:var(--sapCriticalColor);--_ui5_tc_headerItemIcon_border:1px solid var(--sapHighlightColor);--_ui5_tc_headerItemIcon_color:var(--sapHighlightColor);--_ui5_tc_headerItemIcon_selected_background:var(--sapHighlightColor);--_ui5_tc_headerItemIcon_selected_color:var(--sapGroup_ContentBackground);--_ui5_tc_headerItemIcon_positive_selected_background:var(--sapPositiveColor);--_ui5_tc_headerItemIcon_negative_selected_background:var(--sapNegativeColor);--_ui5_tc_headerItemIcon_critical_selected_background:var(--sapCriticalColor);--_ui5_tc_headerItemIcon_neutral_selected_background:var(--sapNeutralColor);--_ui5_tc_headerItemIcon_semantic_selected_color:var(--sapGroup_ContentBackground);--_ui5_tc_header_box_shadow:var(--sapContent_HeaderShadow);--_ui5_tc_header_border_bottom:0.0625rem solid var(--sapObjectHeader_Background);--_ui5_tc_headerItem_color:var(--sapContent_LabelColor);--_ui5_tc_headerItemContent_border_bottom:0.188rem solid var(--sapSelectedColor);--_ui5_tc_overflowItem_default_color:var(--sapHighlightColor);--_ui5_tc_overflowItem_current_color:CurrentColor;--_ui5_tc_content_border_bottom:0.0625rem solid var(--sapObjectHeader_BorderColor);--_ui5_textarea_focus_after_width:1px;--_ui5_textarea_warning_border_style:solid;--_ui5_textarea_warning_border_width:2px;--_ui5_TimelineItem_arrow_size:1.625rem;--_ui5_TimelineItem_bubble_outline_width:0.0625rem;--_ui5_TimelineItem_bubble_outline_top:-0.125rem;--_ui5_TimelineItem_bubble_outline_right:-0.125rem;--_ui5_TimelineItem_bubble_outline_bottom:-0.125rem;--_ui5_TimelineItem_bubble_outline_left:-0.625rem;--_ui5_TimelineItem_bubble_rtl_left_offset:-0.125rem;--_ui5_TimelineItem_bubble_rtl_right_offset:-0.625rem;--_ui5_time_picker_border:0.0625rem solid transparent;--_ui5_toast_vertical_offset:3rem;--_ui5_toast_horizontal_offset:2rem;--_ui5_toast_background:var(--sapList_Background);--_ui5_toast_shadow:var(--sapContent_Shadow2);--_ui5_wheelslider_item_text_size:var(--sapFontSize);--_ui5_wheelslider_label_text_size:var(--sapFontSmallSize);--_ui5_wheelslider_mobile_selection_frame_margin_top:calc(var(--_ui5_wheelslider_item_height)*4);--_ui5_wheelslider_label_text_color:var(--sapContent_LabelColor);--_ui5_wheelslider_height:15rem;--_ui5_wheelslider_mobile_height:27rem;--_ui5_wheelslider_arrows_visibility:hidden;--_ui5_wheelslider_item_background_color:var(--sapLegend_WorkingBackground);--_ui5_wheelslider_item_text_color:var(--sapTextColor);--_ui_wheelslider_item_hover_color:var(--sapButton_Emphasized_Hover_BorderColor);--_ui5_wheelslider_item_border_color:var(--sapList_Background);--_ui5_wheelslider_item_hovered_border_color:var(--sapList_Background);--_ui5_wheelslider_collapsed_item_text_color:var(--_ui5_wheelslider_item_border_color);--_ui5_wheelslider_selected_item_background_color:var(--sapContent_Selected_Background);--_ui5_wheelslider_selected_item_hover_background_color:var(--sapButton_Emphasized_Hover_BorderColor);--_ui5_wheelslider_active_item_background_color:var(--sapContent_Selected_Background);--_ui5_wheelslider_active_item_text_color:var(--sapContent_Selected_TextColor);--_ui5_wheelslider_item_width:3rem;--_ui5_wheelslider_item_height:2.875rem;--_ui5_wheelslider_selection_frame_color:var(--sapList_SelectionBorderColor);--_ui_wheelslider_item_border_radius:var(--_ui5_button_border_radius);--_ui5_toggle_button_pressed_focussed:var(--sapButton_Selected_BorderColor);--_ui5_toggle_button_pressed_focussed_hovered:var(--sapButton_Selected_BorderColor);--_ui5_yearpicker_item_selected_focus:var(--sapContent_Selected_Background);--_ui5_yearpicker_item_border:none;--_ui5_yearpicker_item_margin:1px;--_ui5_yearpicker_item_focus_after_width:calc(100% - 0.375rem);--_ui5_yearpicker_item_focus_after_height:calc(100% - 0.375rem);--_ui5_yearpicker_item_focus_after_border:1px dotted var(--sapContent_FocusColor);--_ui5_yearpicker_item_focus_after_offset:2px;--_ui5_yearpicker_item_border_radius:0.25rem;--_ui5_calendar_header_arrow_button_border:none;--_ui5_calendar_header_arrow_button_border_radius:0.25rem;--_ui5_calendar_header_middle_button_width:6.25rem;--_ui5_calendar_header_middle_button_flex:1 1 auto;--_ui5_calendar_header_middle_button_focus_border_radius:0.25rem;--_ui5_calendar_header_middle_button_focus_border:none;--_ui5_calendar_header_middle_button_focus_after_display:block;--_ui5_calendar_header_middle_button_focus_after_width:calc(100% - 0.375rem);--_ui5_calendar_header_middle_button_focus_after_height:calc(100% - 0.375rem);--_ui5_calendar_header_middle_button_focus_after_top_offset:0.125rem;--_ui5_calendar_header_middle_button_focus_after_left_offset:0.125rem;--ui5_table_header_row_outline_width:1px;--ui5_table_row_outline_width:1px;--ui5_title_level_1Size:1.625rem;--ui5_title_level_2Size:1.375rem;--ui5_title_level_3Size:1.250rem;--ui5_title_level_4Size:1.125rem;--ui5_title_level_5Size:1rem;--ui5_title_level_6Size:0.875rem;--_ui5_token_background:var(--sapButton_TokenBackground);--_ui5_token_border_radius:0.25rem;--_ui5_token_focus_outline_width:0.0625rem;--_ui5_token_text_color:var(--sapTextColor);--_ui5_token_icon_color:var(--sapContent_IconColor);--_ui5_value_state_message_border:none;--_ui5-multi_combobox_token_margin_top:1px}.sapUiSizeCompact,.ui5-content-density-compact,:root,[data-ui5-compact-size]{--_ui5_datetime_timeview_width:17rem;--_ui5_list_item_selection_btn_margin_top:calc(-1*var(--_ui5_checkbox_wrapper_padding));--_ui5_token_wrapper_left_padding:0;--_ui5_button_icon_font_size:1rem;--_ui5_daypicker_weeknumbers_container_padding_top:2rem;--_ui5_wheelslider_selection_frame_margin_top:calc(var(--_ui5_wheelslider_item_height)*2)}.sapUiSizeCompact,.ui5-content-density-compact,[data-ui5-compact-size]{--_ui5_button_base_height:1.625rem;--_ui5_button_base_padding:0.4375rem;--_ui5_button_base_min_width:2rem;--_ui5_calendar_header_height:2rem;--_ui5_calendar_header_padding:0;--_ui5_calendar_header_arrow_button_width:2rem;--_ui5_checkbox_root_side_padding:var(--_ui5_checkbox_wrapped_focus_padding);--_ui5_checkbox_wrapped_content_margin_top:var(--_ui5_checkbox_compact_wrapped_label_margin_top);--_ui5_checkbox_wrapped_focus_left_top_bottom_position:var(--_ui5_checkbox_compact_focus_position);--_ui5_checkbox_width_height:var(--_ui5_checkbox_compact_width_height);--_ui5_checkbox_wrapper_padding:var(--_ui5_checkbox_compact_wrapper_padding);--_ui5_checkbox_focus_position:var(--_ui5_checkbox_compact_focus_position);--_ui5_checkbox_inner_width_height:var(--_ui5_checkbox_compact_inner_size);--_ui5_checkbox_icon_size:.75rem;--_ui5_custom_list_item_height:2rem;--_ui5_custom_list_item_rb_min_width:2rem;--_ui5_day_picker_item_width:2rem;--_ui5_day_picker_item_height:2rem;--_ui5_day_picker_empty_height:2.125rem;--_ui5_datetime_picker_height:17rem;--_ui5_datetime_picker_width:34.0625rem;--_ui5_datetime_timeview_phonemode_width:18.5rem;--_ui5_datetime_timeview_padding:0.5rem;--_ui5_input_height:var(--_ui5_input_compact_height);--_ui5_input_inner_padding:0 0.5rem;--_ui5_input_icon_min_width:var(--_ui5_input_compact_min_width);--_ui5_input_icon_padding:.25rem .5rem;--_ui5_input_value_state_icon_padding:.1875rem .5rem;--_ui5_textarea_padding:.1875rem .5rem;--_ui5_list_no_data_height:2rem;--_ui5_list_item_cb_margin_right:.5rem;--_ui5_list_item_title_size:var(--sapFontSize);--_ui5_list_item_img_margin:0.55rem 0.75rem 0.5rem 0rem;--_ui5_list_item_base_height:2rem;--_ui5_list_item_icon_size:1rem;--_ui5_list_busy_row_height:2rem;--_ui5_month_picker_item_height:2rem;--_ui5_panel_header_height:2rem;--_ui5_year_picker_item_height:2rem;--_ui5_tokenizer_root_padding:0.125rem;--_ui5_token_height:1.125rem;--_ui5_token_icon_size:.75rem;--_ui5_token_icon_padding:0.1rem 0.25rem;--_ui5_token_wrapper_right_padding:0.25rem;--_ui5_tl_bubble_padding:.5rem;--_ui5_tl_indicator_before_bottom:-.5rem;--_ui5_tl_padding:.5rem;--_ui5_tl_li_margin_bottom:.5rem;--_ui5_rb_height:2rem;--_ui5_rb_label_side_padding:.5rem;--_ui5_rb_focus_dist:.375rem;--_ui5_rb_inner_size:2rem;--_ui5_rb_svg_size:1rem;--_ui5_rb_label_width:calc(100% - 2rem + 1px);--_ui5_rb_rtl_focus_right:0.375rem;--_ui5_wheelslider_item_width:4rem;--_ui5_wheelslider_item_height:2rem;--_ui5_wheelslider_height:14rem;--_ui5_wheelslider_arrows_visibility:visible;--_ui5_switch_height:var(--_ui5_switch_compact_height);--_ui5_switch_width:var(--_ui5_switch_compact_width);--_ui5_switch_handle_height:var(--_ui5_switch_handle_compact_height);--_ui5_switch_handle_width:var(--_ui5_switch_handle_compact_width);--_ui5_switch_text_on_left:calc(-100% + 1.5625rem);--_ui5_switch_slide_transform:translateX(100%) translateX(-1.5rem);--_ui5_switch_no_label_width:var(--_ui5_switch_compact_no_label_width);--_ui5_switch_track_no_label_height:var(--_ui5_switch_track_compact_no_label_height);--_ui5_switch_rtl_transform:translateX(-100%) translateX(1.5rem);--_ui5_switch_text_right:calc(-100% + 1.5625rem);--_ui5_tc_item_text:2rem;--_ui5_tc_item_text_line_height:1.325rem;--_ui5_tc_item_icon_size:1rem;--_ui5_tc_item_add_text_margin_top:0.3125rem;--_ui5_tc_header_height:var(--_ui5_tc_header_height_compact);--_ui5_radiobutton_min_width:var(--_ui5_radiobutton_min_width_compact);--_ui5-responnsive_popover_header_height:2.5rem;--ui5_side_navigation_item_height:2rem;--_ui5-tree-indent-step:0.5rem;--_ui5-tree-toggle-box-width:2rem;--_ui5-tree-toggle-box-height:1.5rem;--_ui5-tree-toggle-icon-size:0.8125rem}'; +registerThemeProperties('@ui5/webcomponents-theme-base', 'sap_fiori_3', defaultThemeBase); +registerThemeProperties('@ui5/webcomponents', 'sap_fiori_3', defaultTheme); +var iconCss = + ':host(:not([hidden])){display:inline-block}:host([invalid]){display:none}:host(:not([hidden]).ui5_hovered){opacity:.7}:host{width:1rem;height:1rem;color:var(--sapContent_NonInteractiveIconColor);fill:currentColor;outline:none}:host([interactive][focused]) .ui5-icon-root{outline:1px dotted var(--sapContent_FocusColor)}:host(:not([dir=ltr])) .ui5-icon-root[dir=rtl]{transform:scale(-1);transform-origin:center}.ui5-icon-root{display:flex;transform:scaleY(-1);transform-origin:center;outline:none}'; +const ICON_NOT_FOUND$1 = 'ICON_NOT_FOUND'; + +/** + * @public + */ +const metadata$1 = { + tag: 'ui5-icon', + languageAware: true, + properties: /** @lends sap.ui.webcomponents.main.Icon.prototype */ { + /** + * Defines if the icon is interactive (focusable and pressable) + * @type {boolean} + * @defaultvalue false + * @public + * @since 1.0.0-rc.8 + */ + interactive: { + type: Boolean + }, + + /** + * Defines the unique identifier (icon name) of each ui5-icon. + *

+ * To browse all available icons, see the + * Icon Explorer. + *

+ * Example: + *
+ * 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. + *

+ * Note: Every icon should have a text alternative in order to + * calculate its accessible name. + * + * @type {string} + * @defaultvalue "" + * @public + */ + accessibleName: { + type: String + }, + + /** + * Defines whether the 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 + *

Overview

+ * + * The 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. + *

+ * A large set of built-in icons is available + * and they can be used by setting the name property on the ui5-icon. + * + *

ES6 Module Import

+ * + * 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. + *

+ * Note: Available options are "Default", "Emphasized", "Positive", + * "Negative", and "Transparent". + * + * @type {ButtonDesign} + * @defaultvalue "Default" + * @public + */ + design: { + type: ButtonDesign, + defaultValue: ButtonDesign.Default + }, + + /** + * Defines whether the 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. + *

+ * Example: + *
+ *
ui5-button icon="palette"
+ * + * See all the available icons in the Icon Explorer. + * + * @type {string} + * @defaultvalue "" + * @public + */ + icon: { + type: String + }, + + /** + * Defines whether the icon should be displayed after 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. + *

+ * Important: For the 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. + *

+ * Note: Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design. + * + * @type {Node[]} + * @slot + * @public + */ + default: { + type: Node + } + }, + events: /** @lends sap.ui.webcomponents.main.Button.prototype */ { + /** + * Fired when the ui5-button is activated either with a + * mouse/tap or by using the Enter or Space key. + *

+ * Note: The event will not be fired if the disabled + * property is set to true. + * + * @event + * @public + */ + click: {} + } +}; + +/** + * @class + * + *

Overview

+ * + * The 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. + * + * + *

Usage

+ * + * For the ui5-button UI, you can define text, icon, or both. You can also specify + * whether the text or the icon is displayed first. + *

+ * You can choose from a set of predefined types that offer different + * styling to correspond to the triggered action. + *

+ * You can set the 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. + * + *

ES6 Module Import

+ * + * 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.

+
+
+ Hello world! +
+
+ `; + } +} + +export default myCustomWebComponent; diff --git a/container/test-app/assets/mfeMain.js b/container/test-app/assets/mfeMain.js new file mode 100644 index 0000000000..22e64de1cc --- /dev/null +++ b/container/test-app/assets/mfeMain.js @@ -0,0 +1,6127 @@ +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``; +}; +const block2 = (context) => { + return scopedHtml`${ifDefined(context.buttonTypeText)}`; +}; + +const main = (context, tags, suffix) => { + setTags(tags); + setSuffix(suffix); + return block0(context); +}; +const getSharedResourcesInstance = () => getSingletonElementInstance('ui5-shared-resources', document.head); + +/** + * Use this method to initialize/get resources that you would like to be shared among UI5 Web Components runtime instances. + * The data will be accessed via a singleton "ui5-shared-resources" HTML element in the "head" element of the page. + * + * @public + * @param namespace Unique ID of the resource, may contain "." to denote hierarchy + * @param initialValue Object or primitive that will be used as an initial value if the resource does not exist + * @returns {*} + */ +const getSharedResource = (namespace, initialValue) => { + const parts = namespace.split('.'); + let current = getSharedResourcesInstance(); + + for (let i = 0; i < parts.length; i++) { + const part = parts[i]; + const lastPart = i === parts.length - 1; + if (!Object.prototype.hasOwnProperty.call(current, part)) { + current[part] = lastPart ? initialValue : {}; + } + current = current[part]; + } + + return current; +}; +const registry = getSharedResource('SVGIcons.registry', new Map()); +const iconCollectionPromises = getSharedResource('SVGIcons.promises', new Map()); + +const ICON_NOT_FOUND = 'ICON_NOT_FOUND'; +const DEFAULT_COLLECTION = 'SAP-icons'; + +const calcKey = (name, collection) => { + // silently support ui5-compatible URIs + if (name.startsWith('sap-icon://')) { + name = name.replace('sap-icon://', ''); + [name, collection] = name.split('/').reverse(); + } + collection = collection || DEFAULT_COLLECTION; + return `${collection}:${name}`; +}; + +const getIconDataSync = (name, collection = DEFAULT_COLLECTION) => { + const key = calcKey(name, collection); + return registry.get(key); +}; + +const getIconData = async (name, collection = DEFAULT_COLLECTION) => { + const key = calcKey(name, collection); + + if (!iconCollectionPromises.has(collection)) { + iconCollectionPromises.set(collection, Promise.resolve(ICON_NOT_FOUND)); + } + + const iconData = await iconCollectionPromises.get(collection); + + if (iconData === ICON_NOT_FOUND) { + return iconData; + } + + return registry.get(key); +}; +const block0$1 = (context) => { + return scopedHtml`${blockSVG1(context)}`; +}; +const block1$1 = (context) => { + return scopedSvg`${ifDefined(context.accessibleNameText)}`; +}; + +const blockSVG1 = (context) => { + return scopedSvg`${context.hasIconTooltip ? block1$1(context) : undefined}`; +}; + +const main$1 = (context, tags, suffix) => { + setTags(tags); + setSuffix(suffix); + return block0$1(context); +}; +var defaultThemeBase = + ':root{--sapBrandColor:#0a6ed1;--sapHighlightColor:#0854a0;--sapBaseColor:#fff;--sapShellColor:#354a5f;--sapBackgroundColor:#f7f7f7;--sapFontFamily:"72","72full",Arial,Helvetica,sans-serif;--sapFontLightFamily:"72-Light","72-Lightfull","72","72full",Arial,Helvetica,sans-serif;--sapFontBoldFamily:"72-Bold","72-Boldfull","72","72full",Arial,Helvetica,sans-serif;--sapFontHeaderFamily:"72","72full",Arial,Helvetica,sans-serif;--sapFontSize:.875rem;--sapFontSmallSize:.75rem;--sapFontLargeSize:1rem;--sapFontHeader1Size:2.25rem;--sapFontHeader2Size:1.5rem;--sapFontHeader3Size:1.25rem;--sapFontHeader4Size:1.125rem;--sapFontHeader5Size:1rem;--sapFontHeader6Size:.875rem;--sapTextColor:#32363a;--sapLinkColor:#0a6ed1;--sapLink_Hover_Color:#0854a0;--sapLink_Active_Color:#0a6ed1;--sapLink_Visited_Color:#0a6ed1;--sapLink_InvertedColor:#d3e8fd;--sapLink_SubtleColor:#074888;--sapCompanyLogo:none;--sapBackgroundImage:none;--sapBackgroundImageOpacity:1.0;--sapBackgroundImageRepeat:false;--sapSelectedColor:#0854a0;--sapActiveColor:#0854a0;--sapHighlightTextColor:#fff;--sapTitleColor:#32363a;--sapNegativeColor:#b00;--sapCriticalColor:#e9730c;--sapPositiveColor:#107e3e;--sapInformativeColor:#0a6ed1;--sapNeutralColor:#6a6d70;--sapNegativeElementColor:#b00;--sapCriticalElementColor:#e9730c;--sapPositiveElementColor:#107e3e;--sapInformativeElementColor:#0a6ed1;--sapNeutralElementColor:#6a6d70;--sapNegativeTextColor:#b00;--sapPositiveTextColor:#107e3e;--sapCriticalTextColor:#e9730c;--sapInformativeTextColor:#053b70;--sapNeutralTextColor:#6a6d70;--sapNeutralBorderColor:#6a6d70;--sapErrorColor:#b00;--sapErrorBorderColor:#b00;--sapWarningColor:#e9730c;--sapWarningBorderColor:#e9730c;--sapSuccessColor:#107e3e;--sapSuccessBorderColor:#107e3e;--sapInformationColor:#0a6ed1;--sapInformationBorderColor:#0a6ed1;--sapErrorBackground:#ffebeb;--sapWarningBackground:#fef7f1;--sapSuccessBackground:#f1fdf6;--sapInformationBackground:#f5faff;--sapNeutralBackground:#f4f4f4;--sapIndicationColor_1:#800;--sapIndicationColor_1_Hover_Background:#6f0000;--sapIndicationColor_1_Active_Background:#500;--sapIndicationColor_1_TextColor:#fff;--sapIndicationColor_2:#b00;--sapIndicationColor_2_Hover_Background:#a20000;--sapIndicationColor_2_Active_Background:#800;--sapIndicationColor_2_TextColor:#fff;--sapIndicationColor_3:#e9730c;--sapIndicationColor_3_Hover_Background:#da6c0b;--sapIndicationColor_3_Active_Background:#cc650b;--sapIndicationColor_3_TextColor:#fff;--sapIndicationColor_4:#107e3e;--sapIndicationColor_4_Hover_Background:#0d6733;--sapIndicationColor_4_Active_Background:#0a5128;--sapIndicationColor_4_TextColor:#fff;--sapIndicationColor_5:#0a6ed1;--sapIndicationColor_5_Hover_Background:#0961b9;--sapIndicationColor_5_Active_Background:#0854a0;--sapIndicationColor_5_TextColor:#fff;--sapIndicationColor_6:#0f828f;--sapIndicationColor_6_Hover_Background:#0d6d78;--sapIndicationColor_6_Active_Background:#0a5861;--sapIndicationColor_6_TextColor:#fff;--sapIndicationColor_7:#925ace;--sapIndicationColor_7_Hover_Background:#8546c8;--sapIndicationColor_7_Active_Background:#7838bd;--sapIndicationColor_7_TextColor:#fff;--sapIndicationColor_8:#c0399f;--sapIndicationColor_8_Hover_Background:#ac338f;--sapIndicationColor_8_Active_Background:#992d7e;--sapIndicationColor_8_TextColor:#fff;--sapElement_LineHeight:2.75rem;--sapElement_Height:2.25rem;--sapElement_BorderWidth:.0625rem;--sapElement_BorderCornerRadius:.25rem;--sapElement_Compact_LineHeight:2rem;--sapElement_Compact_Height:1.625rem;--sapElement_Condensed_LineHeight:1.5rem;--sapElement_Condensed_Height:1.375rem;--sapContent_LineHeight:1.4;--sapContent_IconHeight:1rem;--sapContent_IconColor:#0854a0;--sapContent_ContrastIconColor:#fff;--sapContent_NonInteractiveIconColor:#6a6d70;--sapContent_MarkerIconColor:#286eb4;--sapContent_MarkerTextColor:#0e7581;--sapContent_ImagePlaceholderBackground:#ccc;--sapContent_ImagePlaceholderForegroundColor:#fff;--sapContent_RatedColor:#d08014;--sapContent_UnratedColor:#89919a;--sapContent_FocusColor:#000;--sapContent_FocusStyle:dotted;--sapContent_FocusWidth:.0625rem;--sapContent_ContrastFocusColor:#fff;--sapContent_ShadowColor:#000;--sapContent_ContrastShadowColor:#fff;--sapContent_Shadow0:0 0 0 0.0625rem rgba(0,0,0,0.1),0 0.125rem 0.5rem 0 rgba(0,0,0,0.1);--sapContent_Shadow1:0 0 0 0.0625rem rgba(0,0,0,0.42),0 0.125rem 0.5rem 0 rgba(0,0,0,0.3);--sapContent_Shadow2:0 0 0 0.0625rem rgba(0,0,0,0.42),0 0.625rem 1.875rem 0 rgba(0,0,0,0.3);--sapContent_Shadow3:0 0 0 0.0625rem rgba(0,0,0,0.42),0 1.25rem 5rem 0 rgba(0,0,0,0.3);--sapContent_TextShadow:0 0 0.125rem #fff;--sapContent_HeaderShadow:0 0 0.25rem 0 rgba(0,0,0,0.15),inset 0 -0.0625rem 0 0 #d9d9d9;--sapContent_SearchHighlightColor:#d4f7db;--sapContent_HelpColor:#3f8600;--sapContent_LabelColor:#6a6d70;--sapContent_MonospaceFontFamily:lucida console,monospace;--sapContent_DisabledTextColor:rgba(50,54,58,0.6);--sapContent_DisabledOpacity:0.4;--sapContent_ContrastTextThreshold:0.65;--sapContent_ContrastTextColor:#fff;--sapContent_ForegroundColor:#efefef;--sapContent_ForegroundBorderColor:#89919a;--sapContent_ForegroundTextColor:#32363a;--sapContent_BadgeBackground:#d04343;--sapContent_BadgeTextColor:#fff;--sapContent_Placeholderloading_Background:#e0e0e0;--sapContent_Placeholderloading_Gradient:linear-gradient(90deg,#e0e0e0 0%,#e0e0e0 35%,#d3d3d3 50%,#e0e0e0 65%,#e0e0e0);--sapContent_DragAndDropActiveColor:#0854a0;--sapContent_Selected_Background:#0854a0;--sapContent_Selected_TextColor:#fff;--sapContent_Selected_Hover_Background:#095caf;--sapContent_Illustrative_Color1:#0a6ed1;--sapContent_Illustrative_Color2:#72b5f8;--sapContent_Illustrative_Color3:#ffba10;--sapContent_Illustrative_Color4:#4a5055;--sapContent_Illustrative_Color5:#9da4aa;--sapContent_Illustrative_Color6:#c6cace;--sapContent_Illustrative_Color7:#e7e9ea;--sapContent_Illustrative_Color8:#fff;--sapShell_Background:#edeff0;--sapShell_BackgroundImage:linear-gradient(180deg,#dfe3e4,#f3f4f5);--sapShell_BackgroundGradient:linear-gradient(180deg,#dfe3e4,#f3f4f5);--sapShell_BackgroundImageOpacity:1.0;--sapShell_BackgroundImageRepeat:false;--sapShell_BorderColor:#354a5f;--sapShell_TextColor:#fff;--sapShell_InteractiveTextColor:#d1e8ff;--sapShell_InteractiveBorderColor:#7996b4;--sapShell_GroupTitleTextColor:#32363a;--sapShell_Hover_Background:#283848;--sapShell_Active_Background:#23303e;--sapShell_Active_TextColor:#fff;--sapShell_Selected_Background:#23303e;--sapShell_Selected_TextColor:#fff;--sapShell_Selected_Hover_Background:#23303e;--sapShell_Favicon:none;--sapShell_Navigation_Background:#fff;--sapShell_Navigation_SelectedColor:#0854a0;--sapShell_Navigation_Selected_TextColor:#0854a0;--sapShell_Navigation_TextColor:#32363a;--sapShell_Shadow:0 0 0.25rem 0 rgba(0,0,0,0.15),inset 0 -0.0625rem 0 0 rgba(0,0,0,0.2);--sapButton_BorderWidth:.0625rem;--sapButton_BorderCornerRadius:.25rem;--sapButton_Background:#fff;--sapButton_BorderColor:#0854a0;--sapButton_TextColor:#0854a0;--sapButton_Hover_Background:#ebf5fe;--sapButton_Hover_BorderColor:#0854a0;--sapButton_Hover_TextColor:#0854a0;--sapButton_IconColor:#0854a0;--sapButton_Active_Background:#0854a0;--sapButton_Active_BorderColor:#0854a0;--sapButton_Active_TextColor:#fff;--sapButton_Emphasized_Background:#0a6ed1;--sapButton_Emphasized_BorderColor:#0a6ed1;--sapButton_Emphasized_TextColor:#fff;--sapButton_Emphasized_Hover_Background:#085caf;--sapButton_Emphasized_Hover_BorderColor:#085caf;--sapButton_Emphasized_Hover_TextColor:#fff;--sapButton_Emphasized_Active_Background:#0854a0;--sapButton_Emphasized_Active_BorderColor:#0854a0;--sapButton_Emphasized_TextShadow:transparent;--sapButton_Accept_Background:#fff;--sapButton_Accept_BorderColor:#107e3e;--sapButton_Accept_Hover_Background:#f1fdf6;--sapButton_Accept_Hover_BorderColor:#107e3e;--sapButton_Accept_Hover_TextColor:#107e3e;--sapButton_Accept_Active_Background:#0d6733;--sapButton_Accept_Active_BorderColor:#0d6733;--sapButton_Accept_TextColor:#107e3e;--sapButton_Accept_Selected_Background:#0d6733;--sapButton_Accept_Selected_BorderColor:#0d6733;--sapButton_Accept_Selected_TextColor:#fff;--sapButton_Accept_Selected_Hover_Background:#107e3e;--sapButton_Accept_Selected_Hover_BorderColor:#107e3e;--sapButton_Reject_Background:#fff;--sapButton_Reject_BorderColor:#b00;--sapButton_Reject_Hover_Background:#ffebeb;--sapButton_Reject_Hover_BorderColor:#b00;--sapButton_Reject_Hover_TextColor:#b00;--sapButton_Reject_Active_Background:#a20000;--sapButton_Reject_Active_BorderColor:#a20000;--sapButton_Reject_TextColor:#b00;--sapButton_Reject_Selected_Background:#a20000;--sapButton_Reject_Selected_BorderColor:#a20000;--sapButton_Reject_Selected_TextColor:#fff;--sapButton_Reject_Selected_Hover_Background:#b00;--sapButton_Reject_Selected_Hover_BorderColor:#b00;--sapButton_Lite_Background:transparent;--sapButton_Lite_BorderColor:transparent;--sapButton_Lite_TextColor:#0854a0;--sapButton_Lite_Hover_Background:#ebf5fe;--sapButton_Lite_Hover_BorderColor:#0854a0;--sapButton_Lite_Hover_TextColor:#0854a0;--sapButton_Lite_Active_Background:#0854a0;--sapButton_Lite_Active_BorderColor:#0854a0;--sapButton_Selected_Background:#0854a0;--sapButton_Selected_BorderColor:#0854a0;--sapButton_Selected_TextColor:#fff;--sapButton_Selected_Hover_Background:#095caf;--sapButton_Selected_Hover_BorderColor:#095caf;--sapButton_Attention_Background:#fff;--sapButton_Attention_BorderColor:#e9730c;--sapButton_Attention_TextColor:#e9730c;--sapButton_Attention_Hover_Background:#fef7f1;--sapButton_Attention_Hover_BorderColor:#e9730c;--sapButton_Attention_Hover_TextColor:#e9730c;--sapButton_Attention_Active_Background:#d1670b;--sapButton_Attention_Active_BorderColor:#d1670b;--sapButton_Attention_Selected_Background:#d1670b;--sapButton_Attention_Selected_BorderColor:#d1670b;--sapButton_Attention_Selected_TextColor:#fff;--sapButton_Attention_Selected_Hover_Background:#e9730c;--sapButton_Attention_Selected_Hover_BorderColor:#e9730c;--sapButton_Negative_Background:#b00;--sapButton_Negative_BorderColor:#b00;--sapButton_Negative_TextColor:#fff;--sapButton_Negative_Hover_Background:#970000;--sapButton_Negative_Hover_BorderColor:#970000;--sapButton_Negative_Hover_TextColor:#fff;--sapButton_Negative_Active_Background:#800;--sapButton_Negative_Active_BorderColor:#800;--sapButton_Critical_Background:#e9730c;--sapButton_Critical_BorderColor:#e9730c;--sapButton_Critical_TextColor:#fff;--sapButton_Critical_Hover_Background:#c7620a;--sapButton_Critical_Hover_BorderColor:#c7620a;--sapButton_Critical_Hover_TextColor:#fff;--sapButton_Critical_Active_Background:#b85b0a;--sapButton_Critical_Active_BorderColor:#b85b0a;--sapButton_Success_Background:#107e3e;--sapButton_Success_BorderColor:#107e3e;--sapButton_Success_TextColor:#fff;--sapButton_Success_Hover_Background:#0c5e2e;--sapButton_Success_Hover_BorderColor:#0c5e2e;--sapButton_Success_Hover_TextColor:#fff;--sapButton_Success_Active_Background:#0a5128;--sapButton_Success_Active_BorderColor:#0a5128;--sapButton_Information_Background:#0a6ed1;--sapButton_Information_BorderColor:#0a6ed1;--sapButton_Information_TextColor:#fff;--sapButton_Information_Hover_Background:#0961b9;--sapButton_Information_Hover_BorderColor:#0961b9;--sapButton_Information_Hover_TextColor:#fff;--sapButton_Information_Active_Background:#0854a0;--sapButton_Information_Active_BorderColor:#0854a0;--sapButton_Neutral_Background:#6a6d70;--sapButton_Neutral_BorderColor:#6a6d70;--sapButton_Neutral_TextColor:#fff;--sapButton_Neutral_Hover_Background:#595b5e;--sapButton_Neutral_Hover_BorderColor:#595b5e;--sapButton_Neutral_Hover_TextColor:#fff;--sapButton_Neutral_Active_Background:#515456;--sapButton_Neutral_Active_BorderColor:#515456;--sapButton_Track_Selected_Background:#ebf5fe;--sapButton_Track_Selected_TextColor:#32363a;--sapButton_Track_Background:#ededed;--sapButton_Track_TextColor:#32363a;--sapButton_TokenBackground:#fafafa;--sapButton_TokenBorderColor:#c2c2c2;--sapField_Background:#fff;--sapField_TextColor:#32363a;--sapField_PlaceholderTextColor:#74777a;--sapField_BorderColor:#89919a;--sapField_HelpBackground:#fff;--sapField_BorderWidth:.0625rem;--sapField_BorderCornerRadius:.125rem;--sapField_Hover_Background:#fff;--sapField_Hover_BorderColor:#0854a0;--sapField_Hover_HelpBackground:#ebf5fe;--sapField_Active_BorderColor:#0854a0;--sapField_Focus_Background:#fff;--sapField_Focus_BorderColor:#89919a;--sapField_Focus_HelpBackground:#fff;--sapField_ReadOnly_Background:hsla(0,0%,94.9%,0.5);--sapField_ReadOnly_BorderColor:#89919a;--sapField_ReadOnly_HelpBackground:hsla(0,0%,94.9%,0.5);--sapField_RequiredColor:#ce3b3b;--sapField_InvalidColor:#b00;--sapField_InvalidBackground:#fff;--sapField_WarningColor:#e9730c;--sapField_WarningBackground:#fff;--sapField_SuccessColor:#107e3e;--sapField_SuccessBackground:#fff;--sapField_InformationColor:#0a6ed1;--sapField_InformationBackground:#fff;--sapGroup_TitleBackground:transparent;--sapGroup_TitleBorderColor:#d9d9d9;--sapGroup_TitleTextColor:#32363a;--sapGroup_ContentBackground:#fff;--sapGroup_ContentBorderColor:#d9d9d9;--sapGroup_BorderWidth:.0625rem;--sapGroup_BorderCornerRadius:0;--sapGroup_FooterBackground:transparent;--sapToolbar_Background:transparent;--sapToolbar_SeparatorColor:#d9d9d9;--sapList_HeaderBackground:#f2f2f2;--sapList_HeaderBorderColor:#e4e4e4;--sapList_HeaderTextColor:#32363a;--sapList_BorderColor:#e4e4e4;--sapList_TextColor:#32363a;--sapList_Active_TextColor:#fff;--sapList_BorderWidth:.0625rem;--sapList_SelectionBackgroundColor:#e5f0fa;--sapList_SelectionBorderColor:#0854a0;--sapList_Hover_SelectionBackground:#d8e9f8;--sapList_Background:#fff;--sapList_Hover_Background:#f5f5f5;--sapList_AlternatingBackground:#fafafa;--sapList_GroupHeaderBackground:#fff;--sapList_GroupHeaderBorderColor:#d8d8d8;--sapList_GroupHeaderTextColor:#32363a;--sapList_FooterBackground:#fafafa;--sapList_FooterTextColor:#32363a;--sapList_TableGroupHeaderBackground:#efefef;--sapList_TableGroupHeaderBorderColor:#d8d8d8;--sapList_TableGroupHeaderTextColor:#32363a;--sapList_TableFooterBorder:#d8d8d8;--sapList_TableFixedBorderColor:#d8d8d8;--sapList_Active_Background:#0854a0;--sapScrollBar_FaceColor:#949494;--sapScrollBar_TrackColor:#fff;--sapScrollBar_BorderColor:#949494;--sapScrollBar_SymbolColor:#0854a0;--sapScrollBar_Dimension:.75rem;--sapScrollBar_Hover_FaceColor:#8c8c8c;--sapPageHeader_Background:#fff;--sapPageHeader_BorderColor:#d9d9d9;--sapPageHeader_TextColor:#32363a;--sapPageFooter_Background:#fff;--sapPageFooter_BorderColor:#d9d9d9;--sapPageFooter_TextColor:#32363a;--sapInfobar_Background:#0f828f;--sapInfobar_Hover_Background:#0e7581;--sapInfobar_Active_Background:#0a545c;--sapObjectHeader_Background:#fff;--sapObjectHeader_BorderColor:#d9d9d9;--sapBlockLayer_Background:#000;--sapTile_Background:#fff;--sapTile_Hover_Background:#f5f5f5;--sapTile_Active_Background:#f5f5f5;--sapTile_BorderColor:transparent;--sapTile_TitleTextColor:#32363a;--sapTile_TextColor:#6a6d70;--sapTile_IconColor:#5a7da0;--sapTile_SeparatorColor:#ccc;--sapAccentColor1:#d08014;--sapAccentColor2:#d04343;--sapAccentColor3:#db1f77;--sapAccentColor4:#c0399f;--sapAccentColor5:#6367de;--sapAccentColor6:#286eb4;--sapAccentColor7:#0f828f;--sapAccentColor8:#7ca10c;--sapAccentColor9:#925ace;--sapAccentColor10:#647987;--sapLegend_WorkingBackground:#fafafa;--sapLegend_NonWorkingBackground:#dedede;--sapLegend_CurrentDateTime:#c0399f;--sapLegendColor1:#d58215;--sapLegendColor2:#dc5b5b;--sapLegendColor3:#db1f77;--sapLegendColor4:#9b3b3b;--sapLegendColor5:#cf5db3;--sapLegendColor6:#286eb4;--sapLegendColor7:#1193a2;--sapLegendColor8:#8b9668;--sapLegendColor9:#647987;--sapLegendColor10:#892971;--sapLegendColor11:#725a3a;--sapLegendColor12:#bb2f2f;--sapLegendColor13:#bc1b66;--sapLegendColor14:#8b714f;--sapLegendColor15:#606190;--sapLegendColor16:#597da1;--sapLegendColor17:#49797e;--sapLegendColor18:#687a33;--sapLegendColor19:#295989;--sapLegendColor20:#5154bd;--sapLegendBackgroundColor1:#fdf3e7;--sapLegendBackgroundColor2:#faeaea;--sapLegendBackgroundColor3:#fce9f2;--sapLegendBackgroundColor4:#f8ecec;--sapLegendBackgroundColor5:#f9ebf5;--sapLegendBackgroundColor6:#ebf3fa;--sapLegendBackgroundColor7:#e8fbfd;--sapLegendBackgroundColor8:#f3f4ef;--sapLegendBackgroundColor9:#f1f3f4;--sapLegendBackgroundColor10:#f9ebf6;--sapLegendBackgroundColor11:#f6f2ed;--sapLegendBackgroundColor12:#faeaea;--sapLegendBackgroundColor13:#fce9f2;--sapLegendBackgroundColor14:#f5f2ee;--sapLegendBackgroundColor15:#f0f0f5;--sapLegendBackgroundColor16:#eff2f6;--sapLegendBackgroundColor17:#eff5f6;--sapLegendBackgroundColor18:#f5f7ed;--sapLegendBackgroundColor19:#ebf2f9;--sapLegendBackgroundColor20:#ecedf8;--sapChart_OrderedColor_1:#5899da;--sapChart_OrderedColor_2:#e8743b;--sapChart_OrderedColor_3:#19a979;--sapChart_OrderedColor_4:#ed4a7b;--sapChart_OrderedColor_5:#945ecf;--sapChart_OrderedColor_6:#13a4b4;--sapChart_OrderedColor_7:#525df4;--sapChart_OrderedColor_8:#bf399e;--sapChart_OrderedColor_9:#6c8893;--sapChart_OrderedColor_10:#ee6868;--sapChart_OrderedColor_11:#2f6497;--sapChart_Bad:#dc0d0e;--sapChart_Critical:#de890d;--sapChart_Good:#3fa45b;--sapChart_Neutral:#848f94;--sapChart_Sequence_1:#5899da;--sapChart_Sequence_2:#e8743b;--sapChart_Sequence_3:#19a979;--sapChart_Sequence_4:#ed4a7b;--sapChart_Sequence_5:#945ecf;--sapChart_Sequence_6:#13a4b4;--sapChart_Sequence_7:#525df4;--sapChart_Sequence_8:#bf399e;--sapChart_Sequence_9:#6c8893;--sapChart_Sequence_10:#ee6868;--sapChart_Sequence_11:#2f6497;--sapChart_Sequence_Neutral:#848f94;}'; +var defaultTheme = + ':root{--_ui5_calendar_header_height:3rem;--_ui5_calendar_header_arrow_button_width:2.5rem;--_ui5_calendar_header_padding:0.25rem 0;--_ui5_checkbox_root_side_padding:.6875rem;--_ui5_checkbox_icon_size:1rem;--_ui5_custom_list_item_height:3rem;--_ui5_custom_list_item_rb_min_width:2.75rem;--_ui5_day_picker_item_width:2.25rem;--_ui5_day_picker_item_height:2.875rem;--_ui5_day_picker_empty_height:3rem;--_ui5_datetime_picker_width:40.0625rem;--_ui5_datetime_picker_height:25rem;--_ui5_datetime_timeview_phonemode_width:19.5rem;--_ui5_datetime_timeview_padding:1rem;--_ui5_input_inner_padding:0 0.625rem;--_ui5_input_inner_padding_with_icon:0 0.25rem 0 0.625rem;--_ui5_input_value_state_icon_padding:var(--_ui5-input-icon-padding);--_ui5_list_no_data_height:3rem;--_ui5_list_item_cb_margin_right:0;--_ui5_list_item_title_size:var(--sapMFontLargeSize);--_ui5_list_item_img_size:3rem;--_ui5_list_item_img_margin:0.5rem 0.75rem 0.5rem 0rem;--_ui5_list_item_base_height:2.75rem;--_ui5_list_item_icon_size:1.125rem;--_ui5_list_busy_row_height:3rem;--_ui5_month_picker_item_height:3rem;--_ui5_year_picker_item_height:3rem;--_ui5_tokenizer_root_padding:0.1875rem;--_ui5_token_height:1.625rem;--_ui5_token_icon_size:1rem;--_ui5_token_icon_padding:0.25rem 0.5rem;--_ui5_token_wrapper_right_padding:0.3125rem;--_ui5_tl_bubble_padding:1rem;--_ui5_tl_indicator_before_bottom:-1.625rem;--_ui5_tl_padding:1rem 1rem 1rem .5rem;--_ui5_tl_li_margin_bottom:1.625rem;--_ui5_rb_height:2.75rem;--_ui5_rb_label_side_padding:.875rem;--_ui5_rb_focus_dist:.5rem;--_ui5_rb_inner_size:2.75rem;--_ui5_rb_svg_size:1.375rem;--_ui5_rb_label_width:calc(100% - 2.75rem);--_ui5_rb_rtl_focus_right:0.5rem;--_ui5_switch_text_on_left:calc(-100% + 1.9125rem);--_ui5_switch_slide_transform:translateX(100%) translateX(-1.875rem);--_ui5_switch_rtl_transform:translateX(1.875rem) translateX(-100%);--_ui5_switch_text_right:calc(-100% + 1.9125rem);--_ui5_tc_item_text:3rem;--_ui5_tc_item_text_text_only:3rem;--_ui5_tc_item_text_line_height:normal;--_ui5_tc_item_icon_size:1.5rem;--_ui5_tc_item_add_text_margin_top:0.625rem;--_ui5_textarea_padding:0.5625rem 0.6875rem;--_ui5-responnsive_popover_header_height:2.75rem;--ui5_side_navigation_item_height:2.75rem;--_ui5-tree-indent-step:1.5rem;--_ui5-tree-toggle-box-width:2.75rem;--_ui5-tree-toggle-box-height:2.25rem;--_ui5-tree-toggle-icon-size:1.0625rem;--_ui5_segmented_btn_border_radius:0.375rem;--ui5-avatar-initials-color:var(--sapContent_ImagePlaceholderForegroundColor);--ui5-avatar-initials-border:none;--ui5-avatar-accent1:var(--sapAccentColor1);--ui5-avatar-accent2:var(--sapAccentColor2);--ui5-avatar-accent3:var(--sapAccentColor3);--ui5-avatar-accent4:var(--sapAccentColor4);--ui5-avatar-accent5:var(--sapAccentColor5);--ui5-avatar-accent6:var(--sapAccentColor6);--ui5-avatar-accent7:var(--sapAccentColor7);--ui5-avatar-accent8:var(--sapAccentColor8);--ui5-avatar-accent9:var(--sapAccentColor9);--ui5-avatar-accent10:var(--sapAccentColor10);--ui5-avatar-placeholder:var(--sapContent_ImagePlaceholderBackground);--ui5-badge-font-size:0.75em;--ui5-badge-color-scheme-1-background:var(--sapLegendBackgroundColor1);--ui5-badge-color-scheme-1-border:var(--sapLegendColor1);--ui5-badge-color-scheme-2-background:var(--sapLegendBackgroundColor2);--ui5-badge-color-scheme-2-border:var(--sapLegendColor2);--ui5-badge-color-scheme-3-background:var(--sapLegendBackgroundColor3);--ui5-badge-color-scheme-3-border:var(--sapLegendColor3);--ui5-badge-color-scheme-4-background:var(--sapLegendBackgroundColor5);--ui5-badge-color-scheme-4-border:var(--sapLegendColor5);--ui5-badge-color-scheme-5-background:var(--sapLegendBackgroundColor20);--ui5-badge-color-scheme-5-border:var(--sapLegendColor20);--ui5-badge-color-scheme-6-background:var(--sapLegendBackgroundColor6);--ui5-badge-color-scheme-6-border:var(--sapLegendColor6);--ui5-badge-color-scheme-7-background:var(--sapLegendBackgroundColor7);--ui5-badge-color-scheme-7-border:var(--sapLegendColor7);--ui5-badge-color-scheme-8-background:var(--sapLegendBackgroundColor8);--ui5-badge-color-scheme-8-border:var(--sapLegendColor8);--ui5-badge-color-scheme-9-background:var(--sapLegendBackgroundColor10);--ui5-badge-color-scheme-9-border:var(--sapLegendColor10);--ui5-badge-color-scheme-10-background:var(--sapLegendBackgroundColor9);--ui5-badge-color-scheme-10-border:var(--sapAccentColor9);--_ui5_button_base_min_compact_width:2rem;--_ui5_button_compact_height:1.625rem;--_ui5_button_compact_padding:0.4375rem;--_ui5_button_outline:1px dotted var(--sapContent_FocusColor);--_ui5_button_outline_offset:-0.1875rem;--_ui5_button_focus_offset:1px;--_ui5_button_focus_width:1px;--_ui5_button_focus_color:var(--sapContent_FocusColor);--_ui5_button_transparent_border_color:transparent;--_ui5_button_transparent_hover_border_color:var(--sapButton_BorderColor);--_ui5_button_active_border_color:var(--sapButton_Active_BorderColor);--_ui5_button_positive_border_color:var(--sapButton_Accept_BorderColor);--_ui5_button_positive_border_hover_color:var(--sapButton_Accept_Hover_BorderColor);--_ui5_button_positive_border_active_color:var(--sapButton_Accept_Active_BorderColor);--_ui5_button_positive_border_focus_hover_color:var(--sapContent_FocusColor);--_ui5_button_positive_focus_border_color:var(--sapButton_Accept_BorderColor);--_ui5_button_negative_focus_border_color:var(--sapButton_Reject_BorderColor);--_ui5_button_negative_active_border_color:var(--sapButton_Reject_Active_BorderColor);--_ui5_button_emphasized_focused_border_color:var(--sapButton_Emphasized_BorderColor);--_ui5_button_base_min_width:2.25rem;--_ui5_button_base_height:2.25rem;--_ui5_button_border_radius:0.25rem;--_ui5_button_base_padding:0.5625rem;--_ui5_button_base_icon_only_padding:0.5625rem;--_ui5_button_base_icon_margin:0.375rem;--_ui5_button_emphasized_font_weight:bold;--_ui5_button_text_shadow:none;--_ui5_card_border_color:var(--sapTile_SeparatorColor);--_ui5_card_content_padding:1rem;--_ui5_card_header_hover_bg:var(--sapList_Hover_Background);--_ui5_card_header_active_bg:var(--_ui5_card_header_hover_bg);--_ui5_card_header_border_color:var(--_ui5_card_border_color);--_ui5_card_header_focus_border:1px dotted var(--sapContent_FocusColor);--ui5_carousel_button_size:2.5rem;--ui5_carousel_height:0.25rem;--ui5_carousel_width:0.25rem;--ui5_carousel_margin:0 0.375rem;--ui5_carousel_border:1px solid var(--sapContent_ForegroundBorderColor);--ui5_carousel_dot_border:none;--ui5_carousel_dot_background:var(--sapContent_NonInteractiveIconColor);--_ui5_checkbox_hover_background:var(--sapField_Hover_Background);--_ui5_checkbox_inner_width_height:1.375rem;--_ui5_checkbox_inner_error_border:0.125rem solid var(--sapField_InvalidColor);--_ui5_checkbox_inner_warning_border:0.125rem solid var(--sapField_WarningColor);--_ui5_checkbox_inner_information_border:0.125rem solid var(--sapField_InformationColor);--_ui5_checkbox_checkmark_warning_color:var(--sapField_TextColor);--_ui5_checkbox_checkmark_color:var(--sapSelectedColor);--_ui5_checkbox_wrapped_focus_left_top_bottom_position:.5625rem;--_ui5_checkbox_focus_outline:1px dotted var(--sapContent_FocusColor);--_ui5_checkbox_compact_wrapper_padding:.5rem;--_ui5_checkbox_compact_width_height:2rem;--_ui5_checkbox_compact_inner_size:1rem;--_ui5_checkbox_compact_focus_position:.375rem;--_ui5_checkbox_wrapper_padding:.6875rem;--_ui5_checkbox_width_height:2.75rem;--_ui5_checkbox_inner_border:.0625rem solid var(--sapField_BorderColor);--_ui5_checkbox_focus_position:0.5625rem;--_ui5_checkbox_inner_border_radius:.125rem;--_ui5_checkbox_wrapped_content_margin_top:0;--_ui5_checkbox_wrapped_focus_padding:.5rem;--_ui5_checkbox_inner_readonly_border:1px solid var(--sapField_ReadOnly_BorderColor);--_ui5_checkbox_compact_wrapped_label_margin_top:-0.125rem;--_ui5_datepicker_icon_border:none;--_ui5_daypicker_item_margin:2px;--_ui5_daypicker_item_border:none;--_ui5_daypicker_item_outline_width:1px;--_ui5_daypicker_item_outline_offset:1px;--_ui5_daypicker_daynames_container_height:2rem;--_ui5_daypicker_item_othermonth_background_color:var(--sapList_Background);--_ui5_daypicker_item_othermonth_color:var(--sapContent_LabelColor);--_ui5_daypicker_item_othermonth_hover_color:var(--sapContent_LabelColor);--_ui5_daypicker_dayname_color:var(--sapContent_LabelColor);--_ui5_daypicker_weekname_color:var(--sapContent_LabelColor);--_ui5_daypicker_item_now_selected_focus_after_width:calc(100% - 0.125rem);--_ui5_daypicker_item_now_selected_focus_after_height:calc(100% - 0.125rem);--_ui5_daypicker_item_selected_hover_background_color:var(--sapActiveColor_Lighten3);--_ui5_daypicker_item_border_radius:0.25rem;--_ui5_daypicker_item_now_inner_border_radius:0.125rem;--ui5-group-header-listitem-background-color:var(--sapList_GroupHeaderBackground);--_ui5_input_width:13.125rem;--_ui5_input_compact_height:1.625rem;--_ui5_input_state_border_width:0.125rem;--_ui5-input-information_border_width:0.125rem;--_ui5_input_error_font_weight:normal;--_ui5_input_focus_border_width:1px;--_ui5_input_error_warning_border_style:solid;--_ui5_input_error_warning_font_style:inherit;--_ui5_input_disabled_color:var(--sapContent_DisabledTextColor);--_ui5_input_disabled_font_weight:normal;--_ui5_input_disabled_border_color:var(--sapField_BorderColor);--_ui5_input_disabled_background:var(--sapField_Background);--_ui5_input_icon_min_width:2.375rem;--_ui5_input_compact_min_width:2rem;--_ui5_input_height:2.25rem;--_ui5_input_disabled_opacity:0.4;--_ui5_input_wrapper_border_radius:0.125rem;--_ui5_input_icon_padding:.5625rem .6875rem;--_ui5_link_opacity:0.4;--_ui5_link_text_decoration:none;--_ui5_link_hover_text_decoration:underline;--ui5_list_footer_text_color:var(--sapTextColor);--ui5-listitem-background-color:var(--sapList_Background);--ui5-listitem-border-bottom:1px solid var(--sapList_BorderColor);--ui5-listitem-selected-border-bottom:1px solid var(--sapList_SelectionBorderColor);--_ui5_listitembase_focus_width:1px;--_ui5_product_switch_item_border:none;--_ui5_monthpicker_item_border:none;--_ui5_monthpicker_item_margin:1px;--_ui5_monthpicker_item_focus_after_width:calc(100% - 0.375rem);--_ui5_monthpicker_item_focus_after_height:calc(100% - 0.375rem);--_ui5_monthpicker_item_focus_after_border:1px dotted var(--sapContent_FocusColor);--_ui5_monthpicker_item_focus_after_offset:2px;--_ui5_monthpicker_item_border_radius:0.25rem;--_ui5_messagestrip_icon_width:2.5rem;--_ui5_messagestrip_border_radius:0.1875rem;--_ui5_messagestrip_button_border_width:0;--_ui5_messagestrip_button_border_style:none;--_ui5_messagestrip_button_border_color:transparent;--_ui5_messagestrip_button_border_radius:0;--_ui5_messagestrip_padding:0.4375rem 2.5rem 0.4375rem 2.5rem;--_ui5_messagestrip_padding_no_icon:0.4375rem 2.5rem 0.4375rem 1rem;--_ui5_messagestrip_button_height:1.625rem;--_ui5_messagestrip_border_width:1px;--_ui5_messagestrip_close_button_border:none;--_ui5_messagestrip_close_button_size:1.625rem;--_ui5_messagestrip_icon_top:0.4375rem;--_ui5_messagestrip_focus_width:1px;--_ui5_messagestrip_focus_offset:-2px;--_ui5_panel_focus_border:1px dotted var(--sapContent_FocusColor);--_ui5_panel_header_height:2.75rem;--_ui5_panel_button_root_width:2.75rem;--_ui5_popup_content_padding:.4375em;--_ui5_progress_indicator_value_state_none:var(--sapNeutralElementColor);--_ui5_progress_indicator_value_state_error:var(--sapNegativeElementColor);--_ui5_progress_indicator_value_state_warning:var(--sapCriticalElementColor);--_ui5_progress_indicator_value_state_success:var(--sapPositiveElementColor);--_ui5_progress_indicator_value_state_information:var(--sapInformativeElementColor);--_ui5_progress_indicator_color:var(--sapTextColor);--_ui5_progress_indicator_bar_color:var(--sapContent_ContrastTextColor);--_ui5_progress_indicator_border:0.0625rem solid var(--sapField_BorderColor);--_ui5_progress_indicator_bar_border_max:none;--_ui5_progress_indicator_icon_visibility:none;--_ui5_radiobutton_min_width:2.75rem;--_ui5_radiobutton_min_width_compact:2rem;--_ui5_radiobutton_hover_fill:var(--sapField_Hover_Background);--_ui5_radiobutton_border_width:1px;--_ui5_radiobutton_selected_fill:var(--sapSelectedColor);--_ui5_radiobutton_selected_error_fill:var(--sapField_InvalidColor);--_ui5_radiobutton_selected_warning_fill:var(--sapField_TextColor);--_ui5_radiobutton_warning_error_border_dash:0;--_ui5_select_disabled_background:var(--sapField_Background);--_ui5_select_disabled_border_color:var(--sapField_BorderColor);--_ui5_select_state_error_warning_border_style:solid;--_ui5_select_state_error_warning_border_width:0.125rem;--_ui5_select_hover_icon_left_border:1px solid transparent;--_ui5_select_rtl_hover_icon_left_border:none;--_ui5_select_rtl_hover_icon_right_border:none;--_ui5_select_focus_width:1px;--_ui5_switch_height:2.75rem;--_ui5_switch_width:3.875rem;--_ui5_switch_no_label_width:3.25rem;--_ui5_switch_outline:1px;--_ui5_switch_compact_height:2rem;--_ui5_switch_compact_width:3.5rem;--_ui5_switch_compact_no_label_width:2.5rem;--_ui5_switch_track_height:1.375rem;--_ui5_switch_track_no_label_height:1.25rem;--_ui5_switch_track_compact_no_label_height:1rem;--_ui5_switch_track_hover_border_color:var(--_ui5_switch_track_checked_border_color);--_ui5_switch_track_hover_background_color:var(--sapButton_Track_Background);--_ui5_switch_track_hover_checked_background_color:var(--sapButton_Track_Selected_Background);--_ui5_switch_track_border_radius:0.75rem;--_ui5_switch_track_disabled_checked_bg:var(--_ui5_switch_track_checked_bg);--_ui5_switch_track_disabled_border_color:var(--sapContent_ForegroundBorderColor);--_ui5_switch_track_disabled_semantic_checked_bg:var(--sapSuccessBackground);--_ui5_switch_track_disabled_semantic_checked_border_color:var(--sapSuccessBorderColor);--_ui5_switch_track_disabled_semantic_bg:var(--sapErrorBackground);--_ui5_switch_track_disabled_semantic_border_color:var(--sapErrorBorderColor);--_ui5_switch_handle_width:2rem;--_ui5_switch_handle_height:2rem;--_ui5_switch_handle_border_width:1px;--_ui5_switch_handle_border_radius:1rem;--_ui5_switch_handle_bg:var(--sapButton_TokenBackground);--_ui5_switch_handle_checked_bg:var(--sapButton_Selected_Background);--_ui5_switch_handle_checked_border_color:var(--sapButton_Selected_BorderColor);--_ui5_switch_handle_semantic_hover_bg:var(--sapErrorBackground);--_ui5_switch_handle_semantic_checked_hover_bg:var(--sapSuccessBackground);--_ui5_switch_handle_semantic_hover_border_color:var(--sapErrorBorderColor);--_ui5_switch_handle_semantic_checked_hover_border_color:var(--sapSuccessBorderColor);--_ui5_switch_handle_compact_width:1.625rem;--_ui5_switch_handle_compact_height:1.625rem;--_ui5_switch_handle_disabled_bg:var(--_ui5_switch_handle_bg);--_ui5_switch_handle_disabled_checked_bg:var(--_ui5_switch_handle_checked_bg);--_ui5_switch_handle_disabled_border_color:var(--sapContent_ForegroundBorderColor);--_ui5_switch_handle_disabled_semantic_checked_bg:var(--sapButton_Background);--_ui5_switch_handle_disabled_semantic_checked_border_color:var(--sapSuccessBorderColor);--_ui5_switch_handle_disabled_semantic_border_color:var(--sapErrorBorderColor);--_ui5_switch_text_on_semantic_color:var(--sapPositiveElementColor);--_ui5_switch_text_off_semantic_color:var(--sapNegativeElementColor);--_ui5_switch_text_disabled_color:var(--sapTextColor);--_ui5_tc_header_height:4.6875rem;--_ui5_tc_header_height_compact:3.6875rem;--_ui5_tc_header_height_text_only:3rem;--_ui5_tc_header_height_text_only_compact:2rem;--_ui5_tc_headeritem_text_selected_color:var(--sapSelectedColor);--_ui5_tc_headerItem_neutral_color:var(--sapNeutralColor);--_ui5_tc_headerItem_positive_color:var(--sapPositiveColor);--_ui5_tc_headerItem_negative_color:var(--sapNegativeColor);--_ui5_tc_headerItem_critical_color:var(--sapCriticalColor);--_ui5_tc_headerItem_neutral_border_color:var(--_ui5_tc_headerItem_neutral_color);--_ui5_tc_headerItem_positive_border_color:var(--_ui5_tc_headerItem_positive_color);--_ui5_tc_headerItem_negative_border_color:var(--_ui5_tc_headerItem_negative_color);--_ui5_tc_headerItem_critical_border_color:var(--_ui5_tc_headerItem_critical_color);--_ui5_tc_headerItem_neutral_selected_border_color:var(--_ui5_tc_headerItem_neutral_color);--_ui5_tc_headerItem_positive_selected_border_color:var(--_ui5_tc_headerItem_positive_color);--_ui5_tc_headerItem_negative_selected_border_color:var(--_ui5_tc_headerItem_negative_color);--_ui5_tc_headerItem_critical_selected_border_color:var(--_ui5_tc_headerItem_critical_color);--_ui5_tc_headerItem_focus_border:1px dotted var(--sapContent_FocusColor);--_ui5_tc_headerItemSemanticIcon_display:none;--_ui5_tc_overflowItem_neutral_color:var(--sapNeutralColor);--_ui5_tc_overflowItem_positive_color:var(--sapPositiveColor);--_ui5_tc_overflowItem_negative_color:var(--sapNegativeColor);--_ui5_tc_overflowItem_critical_color:var(--sapCriticalColor);--_ui5_tc_headerItemIcon_border:1px solid var(--sapHighlightColor);--_ui5_tc_headerItemIcon_color:var(--sapHighlightColor);--_ui5_tc_headerItemIcon_selected_background:var(--sapHighlightColor);--_ui5_tc_headerItemIcon_selected_color:var(--sapGroup_ContentBackground);--_ui5_tc_headerItemIcon_positive_selected_background:var(--sapPositiveColor);--_ui5_tc_headerItemIcon_negative_selected_background:var(--sapNegativeColor);--_ui5_tc_headerItemIcon_critical_selected_background:var(--sapCriticalColor);--_ui5_tc_headerItemIcon_neutral_selected_background:var(--sapNeutralColor);--_ui5_tc_headerItemIcon_semantic_selected_color:var(--sapGroup_ContentBackground);--_ui5_tc_header_box_shadow:var(--sapContent_HeaderShadow);--_ui5_tc_header_border_bottom:0.0625rem solid var(--sapObjectHeader_Background);--_ui5_tc_headerItem_color:var(--sapContent_LabelColor);--_ui5_tc_headerItemContent_border_bottom:0.188rem solid var(--sapSelectedColor);--_ui5_tc_overflowItem_default_color:var(--sapHighlightColor);--_ui5_tc_overflowItem_current_color:CurrentColor;--_ui5_tc_content_border_bottom:0.0625rem solid var(--sapObjectHeader_BorderColor);--_ui5_textarea_focus_after_width:1px;--_ui5_textarea_warning_border_style:solid;--_ui5_textarea_warning_border_width:2px;--_ui5_TimelineItem_arrow_size:1.625rem;--_ui5_TimelineItem_bubble_outline_width:0.0625rem;--_ui5_TimelineItem_bubble_outline_top:-0.125rem;--_ui5_TimelineItem_bubble_outline_right:-0.125rem;--_ui5_TimelineItem_bubble_outline_bottom:-0.125rem;--_ui5_TimelineItem_bubble_outline_left:-0.625rem;--_ui5_TimelineItem_bubble_rtl_left_offset:-0.125rem;--_ui5_TimelineItem_bubble_rtl_right_offset:-0.625rem;--_ui5_time_picker_border:0.0625rem solid transparent;--_ui5_toast_vertical_offset:3rem;--_ui5_toast_horizontal_offset:2rem;--_ui5_toast_background:var(--sapList_Background);--_ui5_toast_shadow:var(--sapContent_Shadow2);--_ui5_wheelslider_item_text_size:var(--sapFontSize);--_ui5_wheelslider_label_text_size:var(--sapFontSmallSize);--_ui5_wheelslider_mobile_selection_frame_margin_top:calc(var(--_ui5_wheelslider_item_height)*4);--_ui5_wheelslider_label_text_color:var(--sapContent_LabelColor);--_ui5_wheelslider_height:15rem;--_ui5_wheelslider_mobile_height:27rem;--_ui5_wheelslider_arrows_visibility:hidden;--_ui5_wheelslider_item_background_color:var(--sapLegend_WorkingBackground);--_ui5_wheelslider_item_text_color:var(--sapTextColor);--_ui_wheelslider_item_hover_color:var(--sapButton_Emphasized_Hover_BorderColor);--_ui5_wheelslider_item_border_color:var(--sapList_Background);--_ui5_wheelslider_item_hovered_border_color:var(--sapList_Background);--_ui5_wheelslider_collapsed_item_text_color:var(--_ui5_wheelslider_item_border_color);--_ui5_wheelslider_selected_item_background_color:var(--sapContent_Selected_Background);--_ui5_wheelslider_selected_item_hover_background_color:var(--sapButton_Emphasized_Hover_BorderColor);--_ui5_wheelslider_active_item_background_color:var(--sapContent_Selected_Background);--_ui5_wheelslider_active_item_text_color:var(--sapContent_Selected_TextColor);--_ui5_wheelslider_item_width:3rem;--_ui5_wheelslider_item_height:2.875rem;--_ui5_wheelslider_selection_frame_color:var(--sapList_SelectionBorderColor);--_ui_wheelslider_item_border_radius:var(--_ui5_button_border_radius);--_ui5_toggle_button_pressed_focussed:var(--sapButton_Selected_BorderColor);--_ui5_toggle_button_pressed_focussed_hovered:var(--sapButton_Selected_BorderColor);--_ui5_yearpicker_item_selected_focus:var(--sapContent_Selected_Background);--_ui5_yearpicker_item_border:none;--_ui5_yearpicker_item_margin:1px;--_ui5_yearpicker_item_focus_after_width:calc(100% - 0.375rem);--_ui5_yearpicker_item_focus_after_height:calc(100% - 0.375rem);--_ui5_yearpicker_item_focus_after_border:1px dotted var(--sapContent_FocusColor);--_ui5_yearpicker_item_focus_after_offset:2px;--_ui5_yearpicker_item_border_radius:0.25rem;--_ui5_calendar_header_arrow_button_border:none;--_ui5_calendar_header_arrow_button_border_radius:0.25rem;--_ui5_calendar_header_middle_button_width:6.25rem;--_ui5_calendar_header_middle_button_flex:1 1 auto;--_ui5_calendar_header_middle_button_focus_border_radius:0.25rem;--_ui5_calendar_header_middle_button_focus_border:none;--_ui5_calendar_header_middle_button_focus_after_display:block;--_ui5_calendar_header_middle_button_focus_after_width:calc(100% - 0.375rem);--_ui5_calendar_header_middle_button_focus_after_height:calc(100% - 0.375rem);--_ui5_calendar_header_middle_button_focus_after_top_offset:0.125rem;--_ui5_calendar_header_middle_button_focus_after_left_offset:0.125rem;--ui5_table_header_row_outline_width:1px;--ui5_table_row_outline_width:1px;--ui5_title_level_1Size:1.625rem;--ui5_title_level_2Size:1.375rem;--ui5_title_level_3Size:1.250rem;--ui5_title_level_4Size:1.125rem;--ui5_title_level_5Size:1rem;--ui5_title_level_6Size:0.875rem;--_ui5_token_background:var(--sapButton_TokenBackground);--_ui5_token_border_radius:0.25rem;--_ui5_token_focus_outline_width:0.0625rem;--_ui5_token_text_color:var(--sapTextColor);--_ui5_token_icon_color:var(--sapContent_IconColor);--_ui5_value_state_message_border:none;--_ui5-multi_combobox_token_margin_top:1px}.sapUiSizeCompact,.ui5-content-density-compact,:root,[data-ui5-compact-size]{--_ui5_datetime_timeview_width:17rem;--_ui5_list_item_selection_btn_margin_top:calc(-1*var(--_ui5_checkbox_wrapper_padding));--_ui5_token_wrapper_left_padding:0;--_ui5_button_icon_font_size:1rem;--_ui5_daypicker_weeknumbers_container_padding_top:2rem;--_ui5_wheelslider_selection_frame_margin_top:calc(var(--_ui5_wheelslider_item_height)*2)}.sapUiSizeCompact,.ui5-content-density-compact,[data-ui5-compact-size]{--_ui5_button_base_height:1.625rem;--_ui5_button_base_padding:0.4375rem;--_ui5_button_base_min_width:2rem;--_ui5_calendar_header_height:2rem;--_ui5_calendar_header_padding:0;--_ui5_calendar_header_arrow_button_width:2rem;--_ui5_checkbox_root_side_padding:var(--_ui5_checkbox_wrapped_focus_padding);--_ui5_checkbox_wrapped_content_margin_top:var(--_ui5_checkbox_compact_wrapped_label_margin_top);--_ui5_checkbox_wrapped_focus_left_top_bottom_position:var(--_ui5_checkbox_compact_focus_position);--_ui5_checkbox_width_height:var(--_ui5_checkbox_compact_width_height);--_ui5_checkbox_wrapper_padding:var(--_ui5_checkbox_compact_wrapper_padding);--_ui5_checkbox_focus_position:var(--_ui5_checkbox_compact_focus_position);--_ui5_checkbox_inner_width_height:var(--_ui5_checkbox_compact_inner_size);--_ui5_checkbox_icon_size:.75rem;--_ui5_custom_list_item_height:2rem;--_ui5_custom_list_item_rb_min_width:2rem;--_ui5_day_picker_item_width:2rem;--_ui5_day_picker_item_height:2rem;--_ui5_day_picker_empty_height:2.125rem;--_ui5_datetime_picker_height:17rem;--_ui5_datetime_picker_width:34.0625rem;--_ui5_datetime_timeview_phonemode_width:18.5rem;--_ui5_datetime_timeview_padding:0.5rem;--_ui5_input_height:var(--_ui5_input_compact_height);--_ui5_input_inner_padding:0 0.5rem;--_ui5_input_icon_min_width:var(--_ui5_input_compact_min_width);--_ui5_input_icon_padding:.25rem .5rem;--_ui5_input_value_state_icon_padding:.1875rem .5rem;--_ui5_textarea_padding:.1875rem .5rem;--_ui5_list_no_data_height:2rem;--_ui5_list_item_cb_margin_right:.5rem;--_ui5_list_item_title_size:var(--sapFontSize);--_ui5_list_item_img_margin:0.55rem 0.75rem 0.5rem 0rem;--_ui5_list_item_base_height:2rem;--_ui5_list_item_icon_size:1rem;--_ui5_list_busy_row_height:2rem;--_ui5_month_picker_item_height:2rem;--_ui5_panel_header_height:2rem;--_ui5_year_picker_item_height:2rem;--_ui5_tokenizer_root_padding:0.125rem;--_ui5_token_height:1.125rem;--_ui5_token_icon_size:.75rem;--_ui5_token_icon_padding:0.1rem 0.25rem;--_ui5_token_wrapper_right_padding:0.25rem;--_ui5_tl_bubble_padding:.5rem;--_ui5_tl_indicator_before_bottom:-.5rem;--_ui5_tl_padding:.5rem;--_ui5_tl_li_margin_bottom:.5rem;--_ui5_rb_height:2rem;--_ui5_rb_label_side_padding:.5rem;--_ui5_rb_focus_dist:.375rem;--_ui5_rb_inner_size:2rem;--_ui5_rb_svg_size:1rem;--_ui5_rb_label_width:calc(100% - 2rem + 1px);--_ui5_rb_rtl_focus_right:0.375rem;--_ui5_wheelslider_item_width:4rem;--_ui5_wheelslider_item_height:2rem;--_ui5_wheelslider_height:14rem;--_ui5_wheelslider_arrows_visibility:visible;--_ui5_switch_height:var(--_ui5_switch_compact_height);--_ui5_switch_width:var(--_ui5_switch_compact_width);--_ui5_switch_handle_height:var(--_ui5_switch_handle_compact_height);--_ui5_switch_handle_width:var(--_ui5_switch_handle_compact_width);--_ui5_switch_text_on_left:calc(-100% + 1.5625rem);--_ui5_switch_slide_transform:translateX(100%) translateX(-1.5rem);--_ui5_switch_no_label_width:var(--_ui5_switch_compact_no_label_width);--_ui5_switch_track_no_label_height:var(--_ui5_switch_track_compact_no_label_height);--_ui5_switch_rtl_transform:translateX(-100%) translateX(1.5rem);--_ui5_switch_text_right:calc(-100% + 1.5625rem);--_ui5_tc_item_text:2rem;--_ui5_tc_item_text_line_height:1.325rem;--_ui5_tc_item_icon_size:1rem;--_ui5_tc_item_add_text_margin_top:0.3125rem;--_ui5_tc_header_height:var(--_ui5_tc_header_height_compact);--_ui5_radiobutton_min_width:var(--_ui5_radiobutton_min_width_compact);--_ui5-responnsive_popover_header_height:2.5rem;--ui5_side_navigation_item_height:2rem;--_ui5-tree-indent-step:0.5rem;--_ui5-tree-toggle-box-width:2rem;--_ui5-tree-toggle-box-height:1.5rem;--_ui5-tree-toggle-icon-size:0.8125rem}'; +registerThemeProperties('@ui5/webcomponents-theme-base', 'sap_fiori_3', defaultThemeBase); +registerThemeProperties('@ui5/webcomponents', 'sap_fiori_3', defaultTheme); +var iconCss = + ':host(:not([hidden])){display:inline-block}:host([invalid]){display:none}:host(:not([hidden]).ui5_hovered){opacity:.7}:host{width:1rem;height:1rem;color:var(--sapContent_NonInteractiveIconColor);fill:currentColor;outline:none}:host([interactive][focused]) .ui5-icon-root{outline:1px dotted var(--sapContent_FocusColor)}:host(:not([dir=ltr])) .ui5-icon-root[dir=rtl]{transform:scale(-1);transform-origin:center}.ui5-icon-root{display:flex;transform:scaleY(-1);transform-origin:center;outline:none}'; +const ICON_NOT_FOUND$1 = 'ICON_NOT_FOUND'; + +/** + * @public + */ +const metadata$1 = { + tag: 'ui5-icon', + languageAware: true, + properties: /** @lends sap.ui.webcomponents.main.Icon.prototype */ { + /** + * Defines if the icon is interactive (focusable and pressable) + * @type {boolean} + * @defaultvalue false + * @public + * @since 1.0.0-rc.8 + */ + interactive: { + type: Boolean + }, + + /** + * Defines the unique identifier (icon name) of each ui5-icon. + *

+ * To browse all available icons, see the + * Icon Explorer. + *

+ * Example: + *
+ * 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. + *

+ * Note: Every icon should have a text alternative in order to + * calculate its accessible name. + * + * @type {string} + * @defaultvalue "" + * @public + */ + accessibleName: { + type: String + }, + + /** + * Defines whether the 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 + *

Overview

+ * + * The 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. + *

+ * A large set of built-in icons is available + * and they can be used by setting the name property on the ui5-icon. + * + *

ES6 Module Import

+ * + * 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. + *

+ * Note: Available options are "Default", "Emphasized", "Positive", + * "Negative", and "Transparent". + * + * @type {ButtonDesign} + * @defaultvalue "Default" + * @public + */ + design: { + type: ButtonDesign, + defaultValue: ButtonDesign.Default + }, + + /** + * Defines whether the 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. + *

+ * Example: + *
+ *
ui5-button icon="palette"
+ * + * See all the available icons in the Icon Explorer. + * + * @type {string} + * @defaultvalue "" + * @public + */ + icon: { + type: String + }, + + /** + * Defines whether the icon should be displayed after 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. + *

+ * Important: For the 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. + *

+ * Note: Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design. + * + * @type {Node[]} + * @slot + * @public + */ + default: { + type: Node + } + }, + events: /** @lends sap.ui.webcomponents.main.Button.prototype */ { + /** + * Fired when the ui5-button is activated either with a + * mouse/tap or by using the Enter or Space key. + *

+ * Note: The event will not be fired if the disabled + * property is set to true. + * + * @event + * @public + */ + click: {} + } +}; + +/** + * @class + * + *

Overview

+ * + * The 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. + * + * + *

Usage

+ * + * For the ui5-button UI, you can define text, icon, or both. You can also specify + * whether the text or the icon is displayed first. + *

+ * You can choose from a set of predefined types that offer different + * styling to correspond to the triggered action. + *

+ * You can set the 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. + * + *

ES6 Module Import

+ * + * 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.

+
+
+ Hello world! +
+
+ `; + } +} + +export default myCustomWebComponent; diff --git a/container/test-app/assets/nested2.js b/container/test-app/assets/nested2.js new file mode 100644 index 0000000000..2fe8eed0c1 --- /dev/null +++ b/container/test-app/assets/nested2.js @@ -0,0 +1,51 @@ +export default class extends HTMLElement { + constructor() { + super(); + const template = document.createElement('template'); + + template.innerHTML = /*html*/ ` + +
+ + + +
+
+
+ content +
+
+ +
+
+
+ +
header
+ +
+ `; + this._shadowRoot = this.attachShadow({ mode: 'open', delegatesFocus: false }); + this._shadowRoot.appendChild(template.content.cloneNode(true)); + this.$paragraph = this._shadowRoot.querySelector('p'); + + this.addEventListener('changeColor', (event) => { + console.log(event.detail); + let c1 = event.detail.color1; + let c2 = event.detail.color2; + this.shadowRoot + .querySelector('.unnamedslotcnt') + .setAttribute('style', `background: linear-gradient(120deg, rgba(${c1},1) 10%, rgba(${c2},1) 68%);`); + }); + } + + set context(ctx) { + if (this.$paragraph) { + this.$paragraph.innerHTML = ctx.title; + } + } +} diff --git a/container/test-app/assets/panelFooter.js b/container/test-app/assets/panelFooter.js new file mode 100644 index 0000000000..40d97e768d --- /dev/null +++ b/container/test-app/assets/panelFooter.js @@ -0,0 +1,174 @@ +/** + * Base class for Luigi web component micro frontends. + */ +class LuigiElement extends HTMLElement { + constructor() { + super(); + this._shadowRoot = this.attachShadow({ + mode: 'open', + delegatesFocus: false + }); + this.__initialized = 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 = () => { + 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(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 panelFooter extends LuigiElement { + constructor() { + super(); + this.luigiConfig = { + styleSources: ['layout-panel.css'], + loadStylesSync: true + }; + } + + render(ctx) { + return html` +
+ +
+ `; + } +} + +export default panelFooter; diff --git a/container/test-app/assets/panelHeader.js b/container/test-app/assets/panelHeader.js new file mode 100644 index 0000000000..27f2197444 --- /dev/null +++ b/container/test-app/assets/panelHeader.js @@ -0,0 +1,201 @@ +/** + * Base class for Luigi web component micro frontends. + */ +class LuigiElement extends HTMLElement { + constructor() { + super(); + this._shadowRoot = this.attachShadow({ + mode: 'open', + delegatesFocus: false + }); + this.__initialized = 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 = () => { + 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(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 panelHeader extends LuigiElement { + constructor() { + super(); + this.luigiConfig = { + styleSources: ['layout-panel.css'], + loadStylesSync: true + }; + this.addEventListener('update', (ev) => { + const $titleCmp = this._shadowRoot.querySelector('#titleCmp'); + + if ($titleCmp) { + $titleCmp.innerHTML = ev.detail; + } + }); + } + + afterInit(ctx) { + console.debug('after init', ctx); + } + + render(ctx) { + return html` + +
+
+
+

${ctx.title}

+

${ctx.description}

+
+
+
+ `; + } +} + +export default panelHeader; diff --git a/container/test-app/assets/step-input.css b/container/test-app/assets/step-input.css new file mode 100644 index 0000000000..d99c8e7374 --- /dev/null +++ b/container/test-app/assets/step-input.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-step-input{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;width:auto;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);background-color:#fff;background-color:var(--sapField_Background,#fff);height:2.25rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:0}.fd-step-input:after,.fd-step-input:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-step-input.is-hover,.fd-step-input:hover{background-color:#fff;background-color:var(--sapField_Hover_Background,#fff);border-color:#0854a0;border-color:var(--sapField_Hover_BorderColor,#0854a0)}.fd-step-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-step-input.is-success.is-hover,.fd-step-input.is-success:hover{background-color:#fff;background-color:var(--sapField_SuccessBackground,#fff);border-color:#107e3e;border-color:var(--sapField_SuccessColor,#107e3e)}.fd-step-input.is-error{background-color:#fff;background-color:var(--sapField_InvalidBackground,#fff);border-color:#b00;border-color:var(--sapField_InvalidColor,#b00)}.fd-step-input.is-error.is-hover,.fd-step-input.is-error:hover{background-color:#fff;background-color:var(--sapField_InvalidBackground,#fff);border-color:#b00;border-color:var(--sapField_InvalidColor,#b00)}.fd-step-input.is-alert,.fd-step-input.is-warning{background-color:#fff;background-color:var(--sapField_WarningBackground,#fff);border-color:#e9730c;border-color:var(--sapField_WarningColor,#e9730c)}.fd-step-input.is-alert.is-hover,.fd-step-input.is-alert:hover,.fd-step-input.is-warning.is-hover,.fd-step-input.is-warning:hover{background-color:#fff;background-color:var(--sapField_WarningBackground,#fff);border-color:#e9730c;border-color:var(--sapField_WarningColor,#e9730c)}.fd-step-input.is-information{background-color:#fff;background-color:var(--sapField_InformationBackground,#fff);border-color:#0a6ed1;border-color:var(--sapField_InformationColor,#0a6ed1)}.fd-step-input.is-information.is-hover,.fd-step-input.is-information:hover{background-color:#fff;background-color:var(--sapField_InformationBackground,#fff);border-color:#0a6ed1;border-color:var(--sapField_InformationColor,#0a6ed1)}.fd-step-input.is-focus,.fd-step-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-step-input.is-alert,.fd-step-input.is-error,.fd-step-input.is-information,.fd-step-input.is-warning{border-width:.125rem}.fd-step-input.is-alert.is-focus,.fd-step-input.is-alert:focus,.fd-step-input.is-error.is-focus,.fd-step-input.is-error:focus,.fd-step-input.is-information.is-focus,.fd-step-input.is-information:focus,.fd-step-input.is-warning.is-focus,.fd-step-input.is-warning:focus{z-index:5;-webkit-box-shadow:none;box-shadow:none;outline-offset:-.25rem}.fd-step-input.is-disabled,.fd-step-input:disabled,.fd-step-input[aria-disabled=true]{pointer-events:none;opacity:.4;opacity:var(--sapContent_DisabledOpacity,.4)}.fd-step-input.is-disabled::-webkit-input-placeholder,.fd-step-input:disabled::-webkit-input-placeholder,.fd-step-input[aria-disabled=true]::-webkit-input-placeholder{color:transparent}.fd-step-input.is-disabled::-moz-placeholder,.fd-step-input:disabled::-moz-placeholder,.fd-step-input[aria-disabled=true]::-moz-placeholder{color:transparent}.fd-step-input.is-disabled:-ms-input-placeholder,.fd-step-input:disabled:-ms-input-placeholder,.fd-step-input[aria-disabled=true]:-ms-input-placeholder{color:transparent}.fd-step-input.is-disabled::-ms-input-placeholder,.fd-step-input:disabled::-ms-input-placeholder,.fd-step-input[aria-disabled=true]::-ms-input-placeholder{color:transparent}.fd-step-input.is-disabled::placeholder,.fd-step-input:disabled::placeholder,.fd-step-input[aria-disabled=true]::placeholder{color:transparent}.fd-step-input.is-readonly,.fd-step-input[aria-readonly=true],.fd-step-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-step-input.is-readonly::-webkit-input-placeholder,.fd-step-input[aria-readonly=true]::-webkit-input-placeholder,.fd-step-input[readonly]::-webkit-input-placeholder{color:transparent}.fd-step-input.is-readonly::-moz-placeholder,.fd-step-input[aria-readonly=true]::-moz-placeholder,.fd-step-input[readonly]::-moz-placeholder{color:transparent}.fd-step-input.is-readonly:-ms-input-placeholder,.fd-step-input[aria-readonly=true]:-ms-input-placeholder,.fd-step-input[readonly]:-ms-input-placeholder{color:transparent}.fd-step-input.is-readonly::-ms-input-placeholder,.fd-step-input[aria-readonly=true]::-ms-input-placeholder,.fd-step-input[readonly]::-ms-input-placeholder{color:transparent}.fd-step-input.is-readonly::placeholder,.fd-step-input[aria-readonly=true]::placeholder,.fd-step-input[readonly]::placeholder{color:transparent}.fd-step-input:focus-within{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-step-input__button.fd-button{width:2.125rem;min-width:2.125rem;height:100%;padding:0;border:none;border-radius:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.fd-step-input__button.fd-button:after,.fd-step-input__button.fd-button:before{font-size:.875rem;margin:0}.fd-step-input__button.fd-button.is-focus,.fd-step-input__button.fd-button:focus{z-index:5;outline:0}.fd-step-input__button.fd-button.is-focus.is-hover,.fd-step-input__button.fd-button.is-focus:hover,.fd-step-input__button.fd-button:focus.is-hover,.fd-step-input__button.fd-button:focus:hover{z-index:auto}.fd-step-input__button.fd-button--compact{width:1.5rem;min-width:1.5rem}.fd-step-input__input.fd-input{width:auto;height:100%;text-align:right;border:none;margin:0;padding:0 .25rem;background-color:transparent}.fd-step-input__input.fd-input[dir=rtl],[dir=rtl] .fd-step-input__input.fd-input{text-align:left}.fd-step-input__input.fd-input:focus{outline:0}.fd-step-input__input.fd-input--compact{height:100%}.fd-step-input.is-error .fd-step-input__button.fd-button,.fd-step-input.is-information .fd-step-input__button.fd-button,.fd-step-input.is-warning .fd-step-input__button.fd-button{width:2rem;min-width:2rem}.fd-step-input--compact{height:1.625rem}.fd-step-input--compact.is-error .fd-step-input__button.fd-button,.fd-step-input--compact.is-information .fd-step-input__button.fd-button,.fd-step-input--compact.is-warning .fd-step-input__button.fd-button{width:1.375rem;min-width:1.375rem}.fd-step-input.is-readonly .fd-step-input__button.fd-button{display:none} \ No newline at end of file diff --git a/container/test-app/assets/timer.js b/container/test-app/assets/timer.js new file mode 100644 index 0000000000..080bd1df52 --- /dev/null +++ b/container/test-app/assets/timer.js @@ -0,0 +1,229 @@ +/** + * Base class for Luigi web component micro frontends. + */ +class LuigiElement extends HTMLElement { + constructor() { + super(); + this._shadowRoot = this.attachShadow({ + mode: 'open', + delegatesFocus: false + }); + this.__initialized = 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 = () => { + 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(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 timer extends LuigiElement { + constructor() { + super(); + this.luigiConfig = { + styleSources: ['button.css', 'input.css', 'step-input.css', 'icon.css'], + loadStylesSync: true + }; + } + + // NOT NEEDED + /*afterInit(ctx) { + this.$stepInput = this.querySelector('.fd-step-input__input'); + this.$activateButton = this.querySelector('.fd-step-input__input'); + }*/ + + $_stepInputValue(inc) { + const min = this.context.min || 1; + const newVal = parseInt(this.$stepInput.value) + inc; + this.$stepInput.value = newVal >= min ? newVal : min; + } + + $_toggleActivation() { + const sel = !this.$activateButton.classList.contains('is-selected'); + this.$activateButton.classList.toggle('is-selected'); + this.$activateButton.setAttribute('aria-selected', sel); + this.$activateButton.innerHTML = sel ? 'Disable' : 'Enable'; + if (sel) { + this.emInterval = setInterval(() => { + this.LuigiClient.publishEvent(new CustomEvent('timer', { detail: {} })); + }, this.$stepInput.value * 1000); + Array.from(this.$stepInputCnt.children).forEach((element) => { + element.setAttribute('disabled', 'true'); + }); + } else { + if (this.emInterval) { + clearInterval(this.emInterval); + } + Array.from(this.$stepInputCnt.children).forEach((element) => { + element.removeAttribute('disabled'); + }); + } + } + + render(ctx) { + return html` +
+ + + +
+ + + `; + } +} + +export default timer; diff --git a/container/test-app/compound/compoundClientAPI.html b/container/test-app/compound/compoundClientAPI.html index 24be5ecafb..016fbafffc 100644 --- a/container/test-app/compound/compoundClientAPI.html +++ b/container/test-app/compound/compoundClientAPI.html @@ -78,7 +78,7 @@

const compoundContainer = document.getElementById('dashboard'); compoundContainer.addEventListener(MFEventID.CUSTOM_MESSAGE, (e) => { - console.log('CUSTOM_MESSAGE Listener picked up: ', e.detail); + console.debug('CUSTOM_MESSAGE Listener picked up: ', e.detail); }); compoundContainer.compoundConfig = { @@ -104,7 +104,7 @@

}, children: [ { - viewUrl: 'https://luigiwebcomponents.gitlab.io/layouts/panelHeader.js', + viewUrl: '../assets/panelHeader.js', context: { title: 'My Awesome Grid 000', description: 'Really awesome', @@ -136,27 +136,27 @@

}, }, { - viewUrl: 'https://luigiwebcomponents.gitlab.io/luigi-wc-mfe/main.js', + viewUrl: '../assets/mfeMain.js', context: { label: 'Another web component', }, }, { id: 'timerMFE', - viewUrl: 'https://luigiwebcomponents.gitlab.io/util/timer.js', + viewUrl: '../assets/timer.js', context: { min: 2, fontScale: '0.5', }, }, { - viewUrl: 'https://luigiwebcomponents.gitlab.io/luigi-wc-mfe/main.js', + viewUrl: '../assets/mfeMain.js', context: { label: 'My Label', }, }, { - viewUrl: 'https://luigiwebcomponents.gitlab.io/layouts/panelFooter.js', + viewUrl: '../assets/panelFooter.js', context: { footer: 'This is the end of awesomeness', }, diff --git a/container/test-app/compound/helloWorldWC.js b/container/test-app/compound/helloWorldWC.js index f696f81aed..6764e68204 100644 --- a/container/test-app/compound/helloWorldWC.js +++ b/container/test-app/compound/helloWorldWC.js @@ -181,7 +181,7 @@ export default class extends HTMLElement { text: 'uxManager().showAlert() test', type: 'info' }); - }) + }); this.$publishEventBtn = this._shadowRoot.querySelector('#publishEvent'); this.$publishEventBtn.addEventListener('click', () => { @@ -359,7 +359,7 @@ export default class extends HTMLElement { type: 'info' }); }); - this.LuigiClient.linkManager().goBack({ goBackValue: 'some goBackValue' }); + this.LuigiClient.linkManager().goBack({ goBackValue: 'some goBackValue' }); }); this.$setViewGroupData = this._shadowRoot.querySelector('#setViewGroupData'); @@ -394,6 +394,8 @@ export default class extends HTMLElement { set context(ctx) { this.ctx = ctx; - this.$paragraph.innerHTML = ctx.title; + if (this.$paragraph && ctx.title) { + this.$paragraph.innerHTML = ctx.title; + } } }