@ui5/webcomponents-fiori 2.5.0-rc.3 → 2.6.0-rc.0

package/dist/BarcodeScannerDialog.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var BarcodeScannerDialog_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import Dialog from "@ui5/webcomponents/dist/Dialog.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
 import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
@@ -21,7 +21,7 @@ import ZXing from "@ui5/webcomponents-fiori/dist/ssr-zxing.js";
 // Texts
 import { BARCODE_SCANNER_DIALOG_CANCEL_BUTTON_TXT, BARCODE_SCANNER_DIALOG_LOADING_TXT, } from "./generated/i18n/i18n-defaults.js";
 // Template
-import BarcodeScannerDialogTemplate from "./generated/templates/BarcodeScannerDialogTemplate.lit.js";
+import BarcodeScannerDialogTemplate from "./BarcodeScannerDialogTemplate.js";
 // Styles
 import BarcodeScannerDialogCss from "./generated/themes/BarcodeScannerDialog.css.js";
 // some tools handle named exports from UMD files and the window object is not assigned but the imports work (vitejs)
@@ -335,7 +335,7 @@ BarcodeScannerDialog = BarcodeScannerDialog_1 = __decorate([
     customElement({
         tag: "ui5-barcode-scanner-dialog",
         languageAware: true,
-        renderer: litRender,
+        renderer: jsxRenderer,
         template: BarcodeScannerDialogTemplate,
         styles: [BarcodeScannerDialogCss],
         dependencies: [

package/dist/BarcodeScannerDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarcodeScannerDialog.js","sourceRoot":"","sources":["../src/BarcodeScannerDialog.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAE7E,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,aAAa,MAAM,0CAA0C,CAAC;AACrE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAG3E,6DAA6D;AAC7D,OAAO,KAAK,MAAM,4CAA4C,CAAC;AAE/D,QAAQ;AACR,OAAO,EACN,wCAAwC,EACxC,kCAAkC,GAClC,MAAM,mCAAmC,CAAC;AAE3C,WAAW;AACX,OAAO,4BAA4B,MAAM,2DAA2D,CAAC;AAErG,SAAS;AACT,OAAO,uBAAuB,MAAM,gDAAgD,CAAC;AAErF,qHAAqH;AACrH,oJAAoJ;AACpJ,MAAM,WAAW,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;AACtE,MAAM,cAAc,GAAG,EAAE,GAAG,KAAK,EAAE,GAAG,WAAW,EAAE,CAAC;AACpD,MAAM,EAAE,wBAAwB,EAAE,iBAAiB,EAAE,GAAG,cAAc,CAAC;AAEvE,MAAM,uBAAuB,GAAG;IAC/B,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE;QACN,MAAM,EAAE;YACP,GAAG,EAAE,GAAG;YACR,KAAK,EAAE,GAAG;YACV,GAAG,EAAE,IAAI;SACT;QACD,WAAW,EAAE,WAAW;QACxB,UAAU,EAAE,aAAa;KACzB;CACD,CAAC;AAWF;;;;;;;;;;;;;;;;;;GAkBG;AA0CH,IAAM,oBAAoB,4BAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAsE5C;QACC,KAAK,EAAE,CAAC;QArCT;;;;;;WAMG;QAEH,SAAI,GAAG,KAAK,CAAC;QAEb;;;;WAIG;QAEH,YAAO,GAAG,KAAK,CAAC;QAEhB;;;;WAIG;QAEH,kBAAa,GAAG,KAAK,CAAC;QAcrB,IAAI,CAAC,WAAW,GAAG,IAAI,wBAAwB,EAAE,CAAC;QAClD,IAAI,CAAC,wBAAwB,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACpE,IAAI,CAAC,yBAAyB,GAAG,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3E,CAAC;IAED,MAAM,CAAC,KAAK,CAAC,QAAQ;QACpB,sBAAoB,CAAC,UAAU,GAAG,MAAM,aAAa,CAAC,0BAA0B,CAAC,CAAC;IACnF,CAAC;IAED,KAAK,CAAC,gBAAgB;QACrB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAE,CAAC;YAC9B,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE,EAAE,OAAO,EAAE,iDAAiD,EAAE,CAAC,CAAC;YACtG,OAAO;QACR,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAChC,OAAO;QACR,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YACzB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACrB,CAAC;QAED,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACtC,IAAI,KAAK,CAAC,SAAS,EAAE,CAAC;YACrB,OAAO;QACR,CAAC;QAED,IAAI,CAAC;YACJ,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC/C,KAAK,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,wBAAwB,CAAC,CAAC;YACpE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;QAC1B,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YAChB,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE,EAAE,OAAO,EAAG,KAAe,CAAC,OAAO,EAAE,CAAC,CAAC;YAC7E,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACtB,CAAC;IACF,CAAC;IAED,UAAU;QACT,KAAK,CAAC,UAAU,EAAE,CAAC;QACnB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,yBAAyB,CAAC,CAAC;IACnE,CAAC;IAED,SAAS;QACR,KAAK,CAAC,SAAS,EAAE,CAAC;QAClB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,yBAAyB,CAAC,CAAC;IACtE,CAAC;IAED,IAAI,KAAK;QACR,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,CAAC;IACxC,CAAC;IAED,IAAI,iBAAiB;QACpB,OAAO,sBAAoB,CAAC,UAAU,CAAC,OAAO,CAAC,wCAAwC,CAAC,CAAC;IAC1F,CAAC;IAED,IAAI,kBAAkB;QACrB,OAAO,sBAAoB,CAAC,UAAU,CAAC,OAAO,CAAC,kCAAkC,CAAC,CAAC;IACpF,CAAC;IAED,gBAAgB;QACf,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,YAAY,IAAI,SAAS,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;IAC1E,CAAC;IAED,kBAAkB;QACjB,OAAO,SAAS,CAAC,YAAY,CAAC,YAAY,CAAC,uBAAuB,CAAC,CAAC;IACrE,CAAC;IAED,gBAAgB;QACf,OAAO,IAAI,CAAC,UAAW,CAAC,aAAa,CAAmB,mCAAmC,CAAE,CAAC;IAC/F,CAAC;IAED,wBAAwB;QACvB,OAAO,IAAI,CAAC,UAAW,CAAC,aAAa,CAAoB,qCAAqC,CAAE,CAAC;IAClG,CAAC;IAED;;;;;;;;;;;;;OAaG;IAEH,uBAAuB,CAAC,WAAmB,EAAE,YAAoB;QAChE,oEAAoE;QACpE,MAAM,iBAAiB,GAAG,UAAU,CAAC,CAAC,MAAM;QAC5C,kFAAkF;QAClF,MAAM,gBAAgB,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,YAAY,CAAC,GAAG,iBAAiB,CAAC;QACjF,oDAAoD;QACpD,MAAM,OAAO,GAAG,CAAC,WAAW,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC;QACrD,MAAM,OAAO,GAAG,CAAC,YAAY,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC;QACtD,oDAAoD;QACpD,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;QAC/C,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;QAEhD,OAAO;YACN,UAAU;YACV,SAAS;YACT,OAAO;YACP,OAAO;SACP,CAAC;IACH,CAAC;IAED,kBAAkB;QACjB,MAAM,YAAY,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC7C,MAAM,aAAa,GAAG,IAAI,CAAC,wBAAwB,EAAE,CAAC;QACtD,MAAM,OAAO,GAAG,aAAa,CAAC,UAAU,CAAC,IAAI,CAAE,CAAC;QAEhD,MAAM,gBAAgB,GAAG,YAAY,CAAC,WAAW,CAAC;QAClD,MAAM,iBAAiB,GAAG,YAAY,CAAC,YAAY,CAAC;QAEpD,gEAAgE;QAChE,aAAa,CAAC,KAAK,GAAG,gBAAgB,CAAC;QACvC,aAAa,CAAC,MAAM,GAAG,iBAAiB,CAAC;QAEzC,mBAAmB;QACnB,OAAO,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;QAC7D,+BAA+B;QAC/B,MAAM,aAAa,GAAG,IAAI,CAAC,uBAAuB,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;QAExF,uDAAuD;QACvD,OAAO,CAAC,SAAS,GAAG,oBAAoB,CAAC;QACzC,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;QAC5D,OAAO,CAAC,SAAS,CAAC,aAAa,CAAC,OAAO,EAAE,aAAa,CAAC,OAAO,EAAE,aAAa,CAAC,SAAS,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;QAEnH,4CAA4C;QAC5C,OAAO,CAAC,WAAW,GAAG,KAAK,CAAC;QAC5B,OAAO,CAAC,SAAS,GAAG,CAAC,CAAC;QACtB,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,EAAE,aAAa,CAAC,OAAO,EAAE,aAAa,CAAC,SAAS,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;QAEpH,sBAAsB;QACtB,aAAa,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;IACvC,CAAC;IAED,qBAAqB;QACpB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACvB,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACrD,CAAC;QACD,OAAO,IAAI,CAAC,WAAW,CAAC;IACzB,CAAC;IAED,aAAa;QACZ,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACtC,MAAM,UAAU,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAChD,MAAM,OAAO,GAAG,UAAU,CAAC,UAAU,CAAC,IAAI,CAAE,CAAC;QAE7C,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC;QACpC,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC;QACtC,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC;QACtC,MAAM,YAAY,GAAG,KAAK,CAAC,YAAY,CAAC;QAExC,MAAM,aAAa,GAAG,IAAI,CAAC,uBAAuB,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;QAE9E,iDAAiD;QACjD,MAAM,MAAM,GAAG,UAAU,GAAG,WAAW,CAAC;QACxC,MAAM,MAAM,GAAG,WAAW,GAAG,YAAY,CAAC;QAC1C,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAEvC,sCAAsC;QACtC,MAAM,aAAa,GAAG,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;QACpD,MAAM,aAAa,GAAG,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;QACpD,MAAM,eAAe,GAAG,aAAa,CAAC,SAAS,GAAG,KAAK,CAAC;QACxD,MAAM,gBAAgB,GAAG,aAAa,CAAC,UAAU,GAAG,KAAK,CAAC;QAE1D,+DAA+D;QAC/D,UAAU,CAAC,KAAK,GAAG,aAAa,CAAC,SAAS,CAAC;QAC3C,UAAU,CAAC,MAAM,GAAG,aAAa,CAAC,UAAU,CAAC;QAE7C,mBAAmB;QACnB,OAAO,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;QAE7D,qDAAqD;QACrD,MAAM,SAAS,GAAG,CAAC,UAAU,GAAG,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;QACzD,MAAM,SAAS,GAAG,CAAC,WAAW,GAAG,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;QAE3D,yEAAyE;QACzE,MAAM,YAAY,GAAG,aAAa,GAAG,SAAS,CAAC;QAC/C,MAAM,YAAY,GAAG,aAAa,GAAG,SAAS,CAAC;QAE/C,8CAA8C;QAC9C,OAAO,CAAC,SAAS,CAChB,KAAK,EACL,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,mBAAmB;QAClF,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,MAAM,CACzC,CAAC;QAEF,OAAO,UAAU,CAAC;IACnB,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,aAAa;QAClB,IAAI,CAAC;YACJ,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YACpC,MAAM,OAAO,GAAG,MAAM,CAAC,SAAS,EAAE,CAAC;YACnC,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,WAAW,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;YAElE,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC;QACjC,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YAChB,IAAI,CAAC,gBAAgB,CAAC,KAAkB,CAAC,CAAC;QAC3C,CAAC;IACF,CAAC;IAED,kBAAkB,CAAC,MAAc;QAChC,IAAI,CAAC,kBAAkB,CAAC,cAAc,EAAE;YACvC,IAAI,EAAE,MAAM,CAAC,OAAO,EAAE;YACtB,QAAQ,EAAE,MAAM,CAAC,WAAW,EAAE;SAC9B,CAAC,CAAC;IACJ,CAAC;IAED,gBAAgB,CAAC,KAAgB;QAChC,IAAI,KAAK,YAAY,iBAAiB,EAAE,CAAC;YACxC,OAAO;QACR,CAAC;QAED,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC;IACnE,CAAC;IAED,mBAAmB;QAClB,MAAM,yBAAyB,GAAG,GAAG,CAAC,CAAC,sBAAsB;QAE7D,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAE1B,sEAAsE;QACtE,qBAAqB,CAAC,GAAG,EAAE;YAC1B,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC3B,CAAC,CAAC,CAAC;QAEH,mEAAmE;QACnE,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACxB,aAAa,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACnC,CAAC;QAED,IAAI,CAAC,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;YACrC,IAAI,CAAC,aAAa,EAAE,CAAC;QACtB,CAAC,EAAE,yBAAyB,CAAC,CAAC;IAC/B,CAAC;IAED,wBAAwB;QACvB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC3B,CAAC;IAED,YAAY;QACX,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;IAClC,CAAC;IAED,YAAY;QACX,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACtC,KAAK,CAAC,KAAK,EAAE,CAAC;QAEd,IAAI,KAAK,CAAC,SAAS,EAAE,CAAC;YACrB,MAAM,MAAM,GAAG,KAAK,CAAC,SAAwB,CAAC;YAC9C,MAAM,MAAM,GAAG,MAAM,CAAC,SAAS,EAAE,CAAC;YAClC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;QACvC,CAAC;QAED,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;QACvB,KAAK,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,wBAAwB,CAAC,CAAC;QAEvE,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACxB,aAAa,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YAClC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC3B,CAAC;QAED,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACtB,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;QAC1B,CAAC;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAChD,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAE/B,wBAAwB;QACxB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC5B,CAAC;CACD,CAAA;AAvVA;IADC,IAAI,EAAE;oDACqB;AAgB5B;IADC,IAAI,EAAE;oDACqB;AAU5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDACf;AAQb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDACZ;AAQhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;2DACzB;AAKf;IADN,IAAI,CAAC,0BAA0B,CAAC;8CACH;AA/DzB,oBAAoB;IAzCzB,aAAa,CAAC;QACd,GAAG,EAAE,4BAA4B;QACjC,aAAa,EAAE,IAAI;QACnB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,4BAA4B;QACtC,MAAM,EAAE,CAAC,uBAAuB,CAAC;QACjC,YAAY,EAAE;YACb,MAAM;YACN,aAAa;YACb,MAAM;SACN;KACD,CAAC;IAEF;;;;OAIG;;IACF,KAAK,CAAC,OAAO,EAAE;QACf,OAAO,EAAE,IAAI;KACb,CAAC;IAEF;;;;;OAKG;;IACF,KAAK,CAAC,cAAc,EAAE;QACtB,OAAO,EAAE,IAAI;KACb,CAAC;IAEF;;;;OAIG;;IACF,KAAK,CAAC,YAAY,EAAE;QACpB,OAAO,EAAE,IAAI;KACb,CAAC;GAEI,oBAAoB,CAuWzB;AAED,oBAAoB,CAAC,MAAM,EAAE,CAAC;AAE9B,eAAe,oBAAoB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport Dialog from \"@ui5/webcomponents/dist/Dialog.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport BusyIndicator from \"@ui5/webcomponents/dist/BusyIndicator.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { Result, Exception } from \"@zxing/library\";\nimport type { Interval } from \"@ui5/webcomponents-base/dist/types.js\";\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport ZXing from \"@ui5/webcomponents-fiori/dist/ssr-zxing.js\";\n\n// Texts\nimport {\n\tBARCODE_SCANNER_DIALOG_CANCEL_BUTTON_TXT,\n\tBARCODE_SCANNER_DIALOG_LOADING_TXT,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Template\nimport BarcodeScannerDialogTemplate from \"./generated/templates/BarcodeScannerDialogTemplate.lit.js\";\n\n// Styles\nimport BarcodeScannerDialogCss from \"./generated/themes/BarcodeScannerDialog.css.js\";\n\n// some tools handle named exports from UMD files and the window object is not assigned but the imports work (vitejs)\n// other tools do not handle named exports (they are undefined after the import), but the window global is assigned and can be used (web dev server)\nconst windowZXing = typeof window === \"undefined\" ? {} : window.ZXing;\nconst effectiveZXing = { ...ZXing, ...windowZXing };\nconst { BrowserMultiFormatReader, NotFoundException } = effectiveZXing;\n\nconst defaultMediaConstraints = {\n\taudio: false,\n\tvideo: {\n\t\theight: {\n\t\t\tmin: 480,\n\t\t\tideal: 960,\n\t\t\tmax: 1440,\n\t\t},\n\t\taspectRatio: 1.333333333,\n\t\tfacingMode: \"environment\",\n\t},\n};\n\ntype BarcodeScannerDialogScanSuccessEventDetail = {\n\ttext: string,\n\trawBytes: Uint8Array,\n};\n\ntype BarcodeScannerDialogScanErrorEventDetail = {\n\tmessage: string,\n};\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `BarcodeScannerDialog` component provides barcode scanning functionality for all devices that support the `MediaDevices.getUserMedia()` native API.\n * Opening the dialog launches the device camera and scans for known barcode formats.\n *\n * A `scanSuccess` event fires whenever a barcode is identified\n * and a `scanError` event fires when the scan failed (for example, due to missing permisions).\n *\n * Internally, the component  uses the zxing-js/library third party OSS.\n *\n * For a list of supported barcode formats, see the [zxing-js/library](https://github.com/zxing-js/library) documentation.\n * @constructor\n * @extends UI5Element\n * @public\n * @since 1.0.0-rc.15\n */\n@customElement({\n\ttag: \"ui5-barcode-scanner-dialog\",\n\tlanguageAware: true,\n\trenderer: litRender,\n\ttemplate: BarcodeScannerDialogTemplate,\n\tstyles: [BarcodeScannerDialogCss],\n\tdependencies: [\n\t\tDialog,\n\t\tBusyIndicator,\n\t\tButton,\n\t],\n})\n\n/**\n * Fired when the user closes the component.\n * @since 2.0.0\n * @public\n */\n@event(\"close\", {\n\tbubbles: true,\n})\n\n/**\n * Fires when the scan is completed successfuuly.\n * @param {string} text the scan result as string\n * @param {Object} rawBytes the scan result as a Uint8Array\n * @public\n */\n@event(\"scan-success\", {\n\tbubbles: true,\n})\n\n/**\n * Fires when the scan fails with error.\n * @param {string} message the error message\n * @public\n */\n@event(\"scan-error\", {\n\tbubbles: true,\n})\n\nclass BarcodeScannerDialog extends UI5Element {\n\teventDetails!: {\n\t\tclose: void,\n\t\t\"scan-success\": BarcodeScannerDialogScanSuccessEventDetail,\n\t\t\"scan-error\": BarcodeScannerDialogScanErrorEventDetail,\n\t}\n\t/**\n\t * Defines the header HTML Element.\n\t *\n\t * **Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n\t * `accessibleName` should be used.\n\t *\n\t * @public\n\t * @since 2.4.0\n\t */\n\t@slot()\n\theader!: Array<HTMLElement>;\n\n\t/**\n\t * Defines the footer HTML Element.\n\t *\n\t * **Note:** When you provide custom content for the `footer` slot, the default close button is not rendered.\n\t * This means you need to include your own mechanism within the custom `footer` to close the dialog,\n\t * such as a button with an event listener that closes the dialog.\n\t *\n\t * **Note:** If the `footer` slot is not provided, a default footer with a close button is rendered automatically,\n\t * allowing users to close the dialog without any additional implementation.\n\t *\n\t * @public\n\t * @since 2.4.0\n\t */\n\t@slot()\n\tfooter!: Array<HTMLElement>;\n\n\t/**\n\t * Indicates whether the dialog is open.\n\t *\n\t * @public\n\t * @default false\n\t * @since 1.24.0\n\t */\n\t@property({ type: Boolean })\n\topen = false;\n\n\t/**\n\t * Indicates whether a loading indicator should be displayed while the scanner is loading.\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tloading = false;\n\n\t/**\n\t * Indicates whether the scanner is ready to scan.\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean, noAttribute: true })\n\tisReadyToScan = false;\n\n\tdialog?: Dialog;\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\t_codeReader: InstanceType<typeof BrowserMultiFormatReader>;\n\t_tempCanvas!: HTMLCanvasElement;\n\t_scanInterval!: Interval | null;\n\t_handleVideoPlayingBound: () => void;\n\t_handleCaptureRegionBound: () => void;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._codeReader = new BrowserMultiFormatReader();\n\t\tthis._handleVideoPlayingBound = this._handleVideoPlaying.bind(this);\n\t\tthis._handleCaptureRegionBound = this._handleDrawCaptureRegion.bind(this);\n\t}\n\n\tstatic async onDefine() {\n\t\tBarcodeScannerDialog.i18nBundle = await getI18nBundle(\"@ui5/webcomponents-fiori\");\n\t}\n\n\tasync onAfterRendering() {\n\t\tif (!this._hasGetUserMedia()) {\n\t\t\tthis.fireDecoratorEvent(\"scan-error\", { message: \"getUserMedia() is not supported by your browser\" });\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this.open || this.loading) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this.isReadyToScan) {\n\t\t\tthis.loading = true;\n\t\t}\n\n\t\tconst video = this._getVideoElement();\n\t\tif (video.srcObject) {\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tconst stream = await this._getUserPermission();\n\t\t\tvideo.addEventListener(\"loadeddata\", this._handleVideoPlayingBound);\n\t\t\tvideo.srcObject = stream;\n\t\t} catch (error) {\n\t\t\tthis.fireDecoratorEvent(\"scan-error\", { message: (error as Error).message });\n\t\t\tthis.loading = false;\n\t\t}\n\t}\n\n\tonEnterDOM() {\n\t\tsuper.onEnterDOM();\n\t\twindow.addEventListener(\"resize\", this._handleCaptureRegionBound);\n\t}\n\n\tonExitDOM() {\n\t\tsuper.onExitDOM();\n\t\twindow.removeEventListener(\"resize\", this._handleCaptureRegionBound);\n\t}\n\n\tget _open() {\n\t\treturn this.open && this.isReadyToScan;\n\t}\n\n\tget _cancelButtonText() {\n\t\treturn BarcodeScannerDialog.i18nBundle.getText(BARCODE_SCANNER_DIALOG_CANCEL_BUTTON_TXT);\n\t}\n\n\tget _busyIndicatorText() {\n\t\treturn BarcodeScannerDialog.i18nBundle.getText(BARCODE_SCANNER_DIALOG_LOADING_TXT);\n\t}\n\n\t_hasGetUserMedia() {\n\t\treturn !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia);\n\t}\n\n\t_getUserPermission() {\n\t\treturn navigator.mediaDevices.getUserMedia(defaultMediaConstraints);\n\t}\n\n\t_getVideoElement() {\n\t\treturn this.shadowRoot!.querySelector<HTMLVideoElement>(\".ui5-barcode-scanner-dialog-video\")!;\n\t}\n\n\t_getOverlayCanvasElement() {\n\t\treturn this.shadowRoot!.querySelector<HTMLCanvasElement>(\".ui5-barcode-scanner-dialog-overlay\")!;\n\t}\n\n\t/**\n\t * CALCULATIONS\n\t *\n\t * The following methods are used to calculate the capture region\n\t * and draw it on the overlay canvas.\n\t * The capture region is a square area in the center of the video element\n\t * where the barcode scanning is performed.\n\t * The region is defined as a proportion of the video element's dimensions.\n\t * The overlay canvas is used to draw a semi-transparent black overlay\n\t * over the video element and a red border around the capture region.\n\t * The overlay canvas is updated on every frame to ensure the capture region is always visible.\n\t * The capture region is used to crop the video frame and extract the barcode image.\n\t * The extracted image is then processed by the zxing-js library to decode the barcode.\n\t */\n\n\t_calculateCaptureRegion(clientWidth: number, clientHeight: number) {\n\t\t// Define the maximum scan size as a proportion of the video element\n\t\tconst maxScanProportion = 0.66666667; // 2:3\n\t\t// Calculate maximum square dimension based on video dimensions and max proportion\n\t\tconst maxScanDimension = Math.min(clientWidth, clientHeight) * maxScanProportion;\n\t\t// Calculate offset to center the square scan region\n\t\tconst xOffset = (clientWidth - maxScanDimension) / 2;\n\t\tconst yOffset = (clientHeight - maxScanDimension) / 2;\n\t\t// Calculate the width and height of the scan region\n\t\tconst scanWidth = Math.floor(maxScanDimension);\n\t\tconst scanHeight = Math.floor(maxScanDimension);\n\n\t\treturn {\n\t\t\tscanHeight,\n\t\t\tscanWidth,\n\t\t\txOffset,\n\t\t\tyOffset,\n\t\t};\n\t}\n\n\t_drawCaptureRegion() {\n\t\tconst videoElement = this._getVideoElement();\n\t\tconst canvasElement = this._getOverlayCanvasElement();\n\t\tconst context = canvasElement.getContext(\"2d\")!;\n\n\t\tconst videoClientWidth = videoElement.clientWidth;\n\t\tconst videoClientHeight = videoElement.clientHeight;\n\n\t\t// Set canvas dimensions to match the video element's dimensions\n\t\tcanvasElement.width = videoClientWidth;\n\t\tcanvasElement.height = videoClientHeight;\n\n\t\t// Clear the canvas\n\t\tcontext.clearRect(0, 0, videoClientWidth, videoClientHeight);\n\t\t// Calculate the capture region\n\t\tconst captureRegion = this._calculateCaptureRegion(videoClientWidth, videoClientHeight);\n\n\t\t// Draw a semi-transparent black overlay over the video\n\t\tcontext.fillStyle = \"rgba(0, 0, 0, 0.5)\";\n\t\tcontext.fillRect(0, 0, videoClientWidth, videoClientHeight);\n\t\tcontext.clearRect(captureRegion.xOffset, captureRegion.yOffset, captureRegion.scanWidth, captureRegion.scanHeight);\n\n\t\t// Draw red border around the capture region\n\t\tcontext.strokeStyle = \"red\";\n\t\tcontext.lineWidth = 1;\n\t\tcontext.strokeRect(captureRegion.xOffset, captureRegion.yOffset, captureRegion.scanWidth, captureRegion.scanHeight);\n\n\t\t// Display the overlay\n\t\tcanvasElement.style.display = \"block\";\n\t}\n\n\t_getTempCanvasElement() {\n\t\tif (!this._tempCanvas) {\n\t\t\tthis._tempCanvas = document.createElement(\"canvas\");\n\t\t}\n\t\treturn this._tempCanvas;\n\t}\n\n\t_captureFrame() {\n\t\tconst video = this._getVideoElement();\n\t\tconst tempCanvas = this._getTempCanvasElement();\n\t\tconst context = tempCanvas.getContext(\"2d\")!;\n\n\t\tconst videoWidth = video.videoWidth;\n\t\tconst videoHeight = video.videoHeight;\n\t\tconst clientWidth = video.clientWidth;\n\t\tconst clientHeight = video.clientHeight;\n\n\t\tconst captureRegion = this._calculateCaptureRegion(clientWidth, clientHeight);\n\n\t\t// Calculate the ratio of videoSize to clientSize\n\t\tconst ratioX = videoWidth / clientWidth;\n\t\tconst ratioY = videoHeight / clientHeight;\n\t\tconst scale = Math.min(ratioX, ratioY);\n\n\t\t// Calculate the scaled capture region\n\t\tconst scaledXOffset = captureRegion.xOffset * scale;\n\t\tconst scaledYOffset = captureRegion.yOffset * scale;\n\t\tconst scaledScanWidth = captureRegion.scanWidth * scale;\n\t\tconst scaledScanHeight = captureRegion.scanHeight * scale;\n\n\t\t// Set canvas dimensions to match the capture region dimensions\n\t\ttempCanvas.width = captureRegion.scanWidth;\n\t\ttempCanvas.height = captureRegion.scanHeight;\n\n\t\t// Clear the canvas\n\t\tcontext.clearRect(0, 0, tempCanvas.width, tempCanvas.height);\n\n\t\t// Correct positioning if aspect ratios are different\n\t\tconst positionX = (videoWidth - clientWidth * scale) / 2;\n\t\tconst positionY = (videoHeight - clientHeight * scale) / 2;\n\n\t\t// Calculate final source position considering the video element's offset\n\t\tconst finalXOffset = scaledXOffset + positionX;\n\t\tconst finalYOffset = scaledYOffset + positionY;\n\n\t\t// Draw the portion of the video on the canvas\n\t\tcontext.drawImage(\n\t\t\tvideo,\n\t\t\tfinalXOffset, finalYOffset, scaledScanWidth, scaledScanHeight, // Source rectangle\n\t\t\t0, 0, tempCanvas.width, tempCanvas.height, // Destination rectangle\n\t\t);\n\n\t\treturn tempCanvas;\n\t}\n\n\t/**\n\t * HANDLERS\n\t */\n\n\tasync _processFrame() {\n\t\ttry {\n\t\t\tconst canvas = this._captureFrame();\n\t\t\tconst dataUrl = canvas.toDataURL();\n\t\t\tconst result = await this._codeReader.decodeFromImageUrl(dataUrl);\n\n\t\t\tthis._handleScanSuccess(result);\n\t\t} catch (error) {\n\t\t\tthis._handleScanError(error as Exception);\n\t\t}\n\t}\n\n\t_handleScanSuccess(result: Result) {\n\t\tthis.fireDecoratorEvent(\"scan-success\", {\n\t\t\ttext: result.getText(),\n\t\t\trawBytes: result.getRawBytes(),\n\t\t});\n\t}\n\n\t_handleScanError(error: Exception) {\n\t\tif (error instanceof NotFoundException) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.fireDecoratorEvent(\"scan-error\", { message: error.message });\n\t}\n\n\t_handleVideoPlaying() {\n\t\tconst FRAME_PROCESSING_INTERVAL = 200; // 5 frames per second\n\n\t\tthis.loading = false;\n\t\tthis.isReadyToScan = true;\n\n\t\t// Wait for the next animation frame before drawing the capture region\n\t\trequestAnimationFrame(() => {\n\t\t\tthis._drawCaptureRegion();\n\t\t});\n\n\t\t// Ensure any existing interval is cleared before setting a new one\n\t\tif (this._scanInterval) {\n\t\t\tclearInterval(this._scanInterval);\n\t\t}\n\n\t\tthis._scanInterval = setInterval(() => {\n\t\t\tthis._processFrame();\n\t\t}, FRAME_PROCESSING_INTERVAL);\n\t}\n\n\t_handleDrawCaptureRegion() {\n\t\tthis._drawCaptureRegion();\n\t}\n\n\t_closeDialog() {\n\t\tthis._resetReader();\n\t\tthis.open = false;\n\t\tthis.fireDecoratorEvent(\"close\");\n\t}\n\n\t_resetReader() {\n\t\tconst video = this._getVideoElement();\n\t\tvideo.pause();\n\n\t\tif (video.srcObject) {\n\t\t\tconst stream = video.srcObject as MediaStream;\n\t\t\tconst tracks = stream.getTracks();\n\t\t\ttracks.forEach(track => track.stop());\n\t\t}\n\n\t\tvideo.srcObject = null;\n\t\tvideo.removeEventListener(\"loadeddata\", this._handleVideoPlayingBound);\n\n\t\tif (this._scanInterval) {\n\t\t\tclearInterval(this._scanInterval);\n\t\t\tthis._scanInterval = null;\n\t\t}\n\n\t\tif (this._codeReader) {\n\t\t\tthis._codeReader.reset();\n\t\t}\n\n\t\tconst overlay = this._getOverlayCanvasElement();\n\t\toverlay.style.display = \"none\";\n\n\t\t// Reset the ready state\n\t\tthis.isReadyToScan = false;\n\t}\n}\n\nBarcodeScannerDialog.define();\n\nexport default BarcodeScannerDialog;\nexport type {\n\tBarcodeScannerDialogScanErrorEventDetail,\n\tBarcodeScannerDialogScanSuccessEventDetail,\n};\n"]}
+{"version":3,"file":"BarcodeScannerDialog.js","sourceRoot":"","sources":["../src/BarcodeScannerDialog.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport Dialog from \"@ui5/webcomponents/dist/Dialog.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport BusyIndicator from \"@ui5/webcomponents/dist/BusyIndicator.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { Result, Exception } from \"@zxing/library\";\nimport type { Interval } from \"@ui5/webcomponents-base/dist/types.js\";\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport ZXing from \"@ui5/webcomponents-fiori/dist/ssr-zxing.js\";\n\n// Texts\nimport {\n\tBARCODE_SCANNER_DIALOG_CANCEL_BUTTON_TXT,\n\tBARCODE_SCANNER_DIALOG_LOADING_TXT,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Template\nimport BarcodeScannerDialogTemplate from \"./BarcodeScannerDialogTemplate.js\";\n\n// Styles\nimport BarcodeScannerDialogCss from \"./generated/themes/BarcodeScannerDialog.css.js\";\n\n// some tools handle named exports from UMD files and the window object is not assigned but the imports work (vitejs)\n// other tools do not handle named exports (they are undefined after the import), but the window global is assigned and can be used (web dev server)\nconst windowZXing = typeof window === \"undefined\" ? {} : window.ZXing;\nconst effectiveZXing = { ...ZXing, ...windowZXing };\nconst { BrowserMultiFormatReader, NotFoundException } = effectiveZXing;\n\nconst defaultMediaConstraints = {\n\taudio: false,\n\tvideo: {\n\t\theight: {\n\t\t\tmin: 480,\n\t\t\tideal: 960,\n\t\t\tmax: 1440,\n\t\t},\n\t\taspectRatio: 1.333333333,\n\t\tfacingMode: \"environment\",\n\t},\n};\n\ntype BarcodeScannerDialogScanSuccessEventDetail = {\n\ttext: string,\n\trawBytes: Uint8Array,\n};\n\ntype BarcodeScannerDialogScanErrorEventDetail = {\n\tmessage: string,\n};\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `BarcodeScannerDialog` component provides barcode scanning functionality for all devices that support the `MediaDevices.getUserMedia()` native API.\n * Opening the dialog launches the device camera and scans for known barcode formats.\n *\n * A `scanSuccess` event fires whenever a barcode is identified\n * and a `scanError` event fires when the scan failed (for example, due to missing permisions).\n *\n * Internally, the component  uses the zxing-js/library third party OSS.\n *\n * For a list of supported barcode formats, see the [zxing-js/library](https://github.com/zxing-js/library) documentation.\n * @constructor\n * @extends UI5Element\n * @public\n * @since 1.0.0-rc.15\n */\n@customElement({\n\ttag: \"ui5-barcode-scanner-dialog\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: BarcodeScannerDialogTemplate,\n\tstyles: [BarcodeScannerDialogCss],\n\tdependencies: [\n\t\tDialog,\n\t\tBusyIndicator,\n\t\tButton,\n\t],\n})\n\n/**\n * Fired when the user closes the component.\n * @since 2.0.0\n * @public\n */\n@event(\"close\", {\n\tbubbles: true,\n})\n\n/**\n * Fires when the scan is completed successfuuly.\n * @param {string} text the scan result as string\n * @param {Object} rawBytes the scan result as a Uint8Array\n * @public\n */\n@event(\"scan-success\", {\n\tbubbles: true,\n})\n\n/**\n * Fires when the scan fails with error.\n * @param {string} message the error message\n * @public\n */\n@event(\"scan-error\", {\n\tbubbles: true,\n})\n\nclass BarcodeScannerDialog extends UI5Element {\n\teventDetails!: {\n\t\tclose: void,\n\t\t\"scan-success\": BarcodeScannerDialogScanSuccessEventDetail,\n\t\t\"scan-error\": BarcodeScannerDialogScanErrorEventDetail,\n\t}\n\t/**\n\t * Defines the header HTML Element.\n\t *\n\t * **Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n\t * `accessibleName` should be used.\n\t *\n\t * @public\n\t * @since 2.4.0\n\t */\n\t@slot()\n\theader!: Array<HTMLElement>;\n\n\t/**\n\t * Defines the footer HTML Element.\n\t *\n\t * **Note:** When you provide custom content for the `footer` slot, the default close button is not rendered.\n\t * This means you need to include your own mechanism within the custom `footer` to close the dialog,\n\t * such as a button with an event listener that closes the dialog.\n\t *\n\t * **Note:** If the `footer` slot is not provided, a default footer with a close button is rendered automatically,\n\t * allowing users to close the dialog without any additional implementation.\n\t *\n\t * @public\n\t * @since 2.4.0\n\t */\n\t@slot()\n\tfooter!: Array<HTMLElement>;\n\n\t/**\n\t * Indicates whether the dialog is open.\n\t *\n\t * @public\n\t * @default false\n\t * @since 1.24.0\n\t */\n\t@property({ type: Boolean })\n\topen = false;\n\n\t/**\n\t * Indicates whether a loading indicator should be displayed while the scanner is loading.\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tloading = false;\n\n\t/**\n\t * Indicates whether the scanner is ready to scan.\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean, noAttribute: true })\n\tisReadyToScan = false;\n\n\tdialog?: Dialog;\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\t_codeReader: InstanceType<typeof BrowserMultiFormatReader>;\n\t_tempCanvas!: HTMLCanvasElement;\n\t_scanInterval!: Interval | null;\n\t_handleVideoPlayingBound: () => void;\n\t_handleCaptureRegionBound: () => void;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._codeReader = new BrowserMultiFormatReader();\n\t\tthis._handleVideoPlayingBound = this._handleVideoPlaying.bind(this);\n\t\tthis._handleCaptureRegionBound = this._handleDrawCaptureRegion.bind(this);\n\t}\n\n\tstatic async onDefine() {\n\t\tBarcodeScannerDialog.i18nBundle = await getI18nBundle(\"@ui5/webcomponents-fiori\");\n\t}\n\n\tasync onAfterRendering() {\n\t\tif (!this._hasGetUserMedia()) {\n\t\t\tthis.fireDecoratorEvent(\"scan-error\", { message: \"getUserMedia() is not supported by your browser\" });\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this.open || this.loading) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this.isReadyToScan) {\n\t\t\tthis.loading = true;\n\t\t}\n\n\t\tconst video = this._getVideoElement();\n\t\tif (video.srcObject) {\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tconst stream = await this._getUserPermission();\n\t\t\tvideo.addEventListener(\"loadeddata\", this._handleVideoPlayingBound);\n\t\t\tvideo.srcObject = stream;\n\t\t} catch (error) {\n\t\t\tthis.fireDecoratorEvent(\"scan-error\", { message: (error as Error).message });\n\t\t\tthis.loading = false;\n\t\t}\n\t}\n\n\tonEnterDOM() {\n\t\tsuper.onEnterDOM();\n\t\twindow.addEventListener(\"resize\", this._handleCaptureRegionBound);\n\t}\n\n\tonExitDOM() {\n\t\tsuper.onExitDOM();\n\t\twindow.removeEventListener(\"resize\", this._handleCaptureRegionBound);\n\t}\n\n\tget _open() {\n\t\treturn this.open && this.isReadyToScan;\n\t}\n\n\tget _cancelButtonText() {\n\t\treturn BarcodeScannerDialog.i18nBundle.getText(BARCODE_SCANNER_DIALOG_CANCEL_BUTTON_TXT);\n\t}\n\n\tget _busyIndicatorText() {\n\t\treturn BarcodeScannerDialog.i18nBundle.getText(BARCODE_SCANNER_DIALOG_LOADING_TXT);\n\t}\n\n\t_hasGetUserMedia() {\n\t\treturn !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia);\n\t}\n\n\t_getUserPermission() {\n\t\treturn navigator.mediaDevices.getUserMedia(defaultMediaConstraints);\n\t}\n\n\t_getVideoElement() {\n\t\treturn this.shadowRoot!.querySelector<HTMLVideoElement>(\".ui5-barcode-scanner-dialog-video\")!;\n\t}\n\n\t_getOverlayCanvasElement() {\n\t\treturn this.shadowRoot!.querySelector<HTMLCanvasElement>(\".ui5-barcode-scanner-dialog-overlay\")!;\n\t}\n\n\t/**\n\t * CALCULATIONS\n\t *\n\t * The following methods are used to calculate the capture region\n\t * and draw it on the overlay canvas.\n\t * The capture region is a square area in the center of the video element\n\t * where the barcode scanning is performed.\n\t * The region is defined as a proportion of the video element's dimensions.\n\t * The overlay canvas is used to draw a semi-transparent black overlay\n\t * over the video element and a red border around the capture region.\n\t * The overlay canvas is updated on every frame to ensure the capture region is always visible.\n\t * The capture region is used to crop the video frame and extract the barcode image.\n\t * The extracted image is then processed by the zxing-js library to decode the barcode.\n\t */\n\n\t_calculateCaptureRegion(clientWidth: number, clientHeight: number) {\n\t\t// Define the maximum scan size as a proportion of the video element\n\t\tconst maxScanProportion = 0.66666667; // 2:3\n\t\t// Calculate maximum square dimension based on video dimensions and max proportion\n\t\tconst maxScanDimension = Math.min(clientWidth, clientHeight) * maxScanProportion;\n\t\t// Calculate offset to center the square scan region\n\t\tconst xOffset = (clientWidth - maxScanDimension) / 2;\n\t\tconst yOffset = (clientHeight - maxScanDimension) / 2;\n\t\t// Calculate the width and height of the scan region\n\t\tconst scanWidth = Math.floor(maxScanDimension);\n\t\tconst scanHeight = Math.floor(maxScanDimension);\n\n\t\treturn {\n\t\t\tscanHeight,\n\t\t\tscanWidth,\n\t\t\txOffset,\n\t\t\tyOffset,\n\t\t};\n\t}\n\n\t_drawCaptureRegion() {\n\t\tconst videoElement = this._getVideoElement();\n\t\tconst canvasElement = this._getOverlayCanvasElement();\n\t\tconst context = canvasElement.getContext(\"2d\")!;\n\n\t\tconst videoClientWidth = videoElement.clientWidth;\n\t\tconst videoClientHeight = videoElement.clientHeight;\n\n\t\t// Set canvas dimensions to match the video element's dimensions\n\t\tcanvasElement.width = videoClientWidth;\n\t\tcanvasElement.height = videoClientHeight;\n\n\t\t// Clear the canvas\n\t\tcontext.clearRect(0, 0, videoClientWidth, videoClientHeight);\n\t\t// Calculate the capture region\n\t\tconst captureRegion = this._calculateCaptureRegion(videoClientWidth, videoClientHeight);\n\n\t\t// Draw a semi-transparent black overlay over the video\n\t\tcontext.fillStyle = \"rgba(0, 0, 0, 0.5)\";\n\t\tcontext.fillRect(0, 0, videoClientWidth, videoClientHeight);\n\t\tcontext.clearRect(captureRegion.xOffset, captureRegion.yOffset, captureRegion.scanWidth, captureRegion.scanHeight);\n\n\t\t// Draw red border around the capture region\n\t\tcontext.strokeStyle = \"red\";\n\t\tcontext.lineWidth = 1;\n\t\tcontext.strokeRect(captureRegion.xOffset, captureRegion.yOffset, captureRegion.scanWidth, captureRegion.scanHeight);\n\n\t\t// Display the overlay\n\t\tcanvasElement.style.display = \"block\";\n\t}\n\n\t_getTempCanvasElement() {\n\t\tif (!this._tempCanvas) {\n\t\t\tthis._tempCanvas = document.createElement(\"canvas\");\n\t\t}\n\t\treturn this._tempCanvas;\n\t}\n\n\t_captureFrame() {\n\t\tconst video = this._getVideoElement();\n\t\tconst tempCanvas = this._getTempCanvasElement();\n\t\tconst context = tempCanvas.getContext(\"2d\")!;\n\n\t\tconst videoWidth = video.videoWidth;\n\t\tconst videoHeight = video.videoHeight;\n\t\tconst clientWidth = video.clientWidth;\n\t\tconst clientHeight = video.clientHeight;\n\n\t\tconst captureRegion = this._calculateCaptureRegion(clientWidth, clientHeight);\n\n\t\t// Calculate the ratio of videoSize to clientSize\n\t\tconst ratioX = videoWidth / clientWidth;\n\t\tconst ratioY = videoHeight / clientHeight;\n\t\tconst scale = Math.min(ratioX, ratioY);\n\n\t\t// Calculate the scaled capture region\n\t\tconst scaledXOffset = captureRegion.xOffset * scale;\n\t\tconst scaledYOffset = captureRegion.yOffset * scale;\n\t\tconst scaledScanWidth = captureRegion.scanWidth * scale;\n\t\tconst scaledScanHeight = captureRegion.scanHeight * scale;\n\n\t\t// Set canvas dimensions to match the capture region dimensions\n\t\ttempCanvas.width = captureRegion.scanWidth;\n\t\ttempCanvas.height = captureRegion.scanHeight;\n\n\t\t// Clear the canvas\n\t\tcontext.clearRect(0, 0, tempCanvas.width, tempCanvas.height);\n\n\t\t// Correct positioning if aspect ratios are different\n\t\tconst positionX = (videoWidth - clientWidth * scale) / 2;\n\t\tconst positionY = (videoHeight - clientHeight * scale) / 2;\n\n\t\t// Calculate final source position considering the video element's offset\n\t\tconst finalXOffset = scaledXOffset + positionX;\n\t\tconst finalYOffset = scaledYOffset + positionY;\n\n\t\t// Draw the portion of the video on the canvas\n\t\tcontext.drawImage(\n\t\t\tvideo,\n\t\t\tfinalXOffset, finalYOffset, scaledScanWidth, scaledScanHeight, // Source rectangle\n\t\t\t0, 0, tempCanvas.width, tempCanvas.height, // Destination rectangle\n\t\t);\n\n\t\treturn tempCanvas;\n\t}\n\n\t/**\n\t * HANDLERS\n\t */\n\n\tasync _processFrame() {\n\t\ttry {\n\t\t\tconst canvas = this._captureFrame();\n\t\t\tconst dataUrl = canvas.toDataURL();\n\t\t\tconst result = await this._codeReader.decodeFromImageUrl(dataUrl);\n\n\t\t\tthis._handleScanSuccess(result);\n\t\t} catch (error) {\n\t\t\tthis._handleScanError(error as Exception);\n\t\t}\n\t}\n\n\t_handleScanSuccess(result: Result) {\n\t\tthis.fireDecoratorEvent(\"scan-success\", {\n\t\t\ttext: result.getText(),\n\t\t\trawBytes: result.getRawBytes(),\n\t\t});\n\t}\n\n\t_handleScanError(error: Exception) {\n\t\tif (error instanceof NotFoundException) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.fireDecoratorEvent(\"scan-error\", { message: error.message });\n\t}\n\n\t_handleVideoPlaying() {\n\t\tconst FRAME_PROCESSING_INTERVAL = 200; // 5 frames per second\n\n\t\tthis.loading = false;\n\t\tthis.isReadyToScan = true;\n\n\t\t// Wait for the next animation frame before drawing the capture region\n\t\trequestAnimationFrame(() => {\n\t\t\tthis._drawCaptureRegion();\n\t\t});\n\n\t\t// Ensure any existing interval is cleared before setting a new one\n\t\tif (this._scanInterval) {\n\t\t\tclearInterval(this._scanInterval);\n\t\t}\n\n\t\tthis._scanInterval = setInterval(() => {\n\t\t\tthis._processFrame();\n\t\t}, FRAME_PROCESSING_INTERVAL);\n\t}\n\n\t_handleDrawCaptureRegion() {\n\t\tthis._drawCaptureRegion();\n\t}\n\n\t_closeDialog() {\n\t\tthis._resetReader();\n\t\tthis.open = false;\n\t\tthis.fireDecoratorEvent(\"close\");\n\t}\n\n\t_resetReader() {\n\t\tconst video = this._getVideoElement();\n\t\tvideo.pause();\n\n\t\tif (video.srcObject) {\n\t\t\tconst stream = video.srcObject as MediaStream;\n\t\t\tconst tracks = stream.getTracks();\n\t\t\ttracks.forEach(track => track.stop());\n\t\t}\n\n\t\tvideo.srcObject = null;\n\t\tvideo.removeEventListener(\"loadeddata\", this._handleVideoPlayingBound);\n\n\t\tif (this._scanInterval) {\n\t\t\tclearInterval(this._scanInterval);\n\t\t\tthis._scanInterval = null;\n\t\t}\n\n\t\tif (this._codeReader) {\n\t\t\tthis._codeReader.reset();\n\t\t}\n\n\t\tconst overlay = this._getOverlayCanvasElement();\n\t\toverlay.style.display = \"none\";\n\n\t\t// Reset the ready state\n\t\tthis.isReadyToScan = false;\n\t}\n}\n\nBarcodeScannerDialog.define();\n\nexport default BarcodeScannerDialog;\nexport type {\n\tBarcodeScannerDialogScanErrorEventDetail,\n\tBarcodeScannerDialogScanSuccessEventDetail,\n};\n"]}

package/dist/BarcodeScannerDialogTemplate.d.ts

@@ -0,0 +1,2 @@
+import type BarcodeScannerDialog from "./BarcodeScannerDialog.js";
+export default function BarcodeScannerDialogTemplate(this: BarcodeScannerDialog): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/BarcodeScannerDialogTemplate.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import Dialog from "@ui5/webcomponents/dist/Dialog.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
+export default function BarcodeScannerDialogTemplate() {
+    return (_jsxs(_Fragment, { children: [_jsxs(Dialog, { stretch: true, class: "ui5-barcode-scanner-dialog-root", open: this._open, onClose: this._closeDialog, children: [_jsx("slot", { name: "header" }), _jsxs("div", { class: "ui5-barcode-scanner-dialog-video-wrapper", children: [_jsx("video", { autoplay: true, playsinline: true, muted: true, class: "ui5-barcode-scanner-dialog-video" }), _jsx("canvas", { class: "ui5-barcode-scanner-dialog-overlay" })] }), _jsx("slot", { name: "footer", class: "ui5-barcode-scanner-dialog-footer", children: _jsx(Button, { design: "Transparent", onClick: this._closeDialog, children: this._cancelButtonText }) })] }), _jsx(BusyIndicator, { class: "ui5-barcode-scanner-dialog-busy", active: this.loading, size: "L", text: this._busyIndicatorText })] }));
+}
+//# sourceMappingURL=BarcodeScannerDialogTemplate.js.map

package/dist/BarcodeScannerDialogTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarcodeScannerDialogTemplate.js","sourceRoot":"","sources":["../src/BarcodeScannerDialogTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,aAAa,MAAM,0CAA0C,CAAC;AAGrE,MAAM,CAAC,OAAO,UAAU,4BAA4B;IACnD,OAAO,CAAC,8BACP,MAAC,MAAM,IACN,OAAO,EAAE,IAAI,EACb,KAAK,EAAC,iCAAiC,EACvC,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,OAAO,EAAE,IAAI,CAAC,YAAY,aAE1B,eAAM,IAAI,EAAC,QAAQ,GAAQ,EAC3B,eAAK,KAAK,EAAC,0CAA0C,aACpD,gBACC,QAAQ,EAAE,IAAI,EACd,WAAW,EAAE,IAAI,EACjB,KAAK,EAAE,IAAI,EACX,KAAK,EAAC,kCAAkC,GAChC,EACT,iBAAQ,KAAK,EAAC,oCAAoC,GAAU,IACvD,EACN,eAAM,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,mCAAmC,YAC5D,KAAC,MAAM,IACN,MAAM,EAAC,aAAa,EACpB,OAAO,EAAE,IAAI,CAAC,YAAY,YACzB,IAAI,CAAC,iBAAiB,GAAU,GAC5B,IACC,EACT,KAAC,aAAa,IACb,KAAK,EAAC,iCAAiC,EACvC,MAAM,EAAE,IAAI,CAAC,OAAO,EACpB,IAAI,EAAC,GAAG,EACR,IAAI,EAAE,IAAI,CAAC,kBAAkB,GAC5B,IACA,CAAC,CAAC;AACN,CAAC","sourcesContent":["import Dialog from \"@ui5/webcomponents/dist/Dialog.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport BusyIndicator from \"@ui5/webcomponents/dist/BusyIndicator.js\";\nimport type BarcodeScannerDialog from \"./BarcodeScannerDialog.js\";\n\nexport default function BarcodeScannerDialogTemplate(this: BarcodeScannerDialog) {\n\treturn (<>\n\t\t<Dialog\n\t\t\tstretch={true}\n\t\t\tclass=\"ui5-barcode-scanner-dialog-root\"\n\t\t\topen={this._open}\n\t\t\tonClose={this._closeDialog}\n\t\t>\n\t\t\t<slot name=\"header\"></slot>\n\t\t\t<div class=\"ui5-barcode-scanner-dialog-video-wrapper\">\n\t\t\t\t<video\n\t\t\t\t\tautoplay={true}\n\t\t\t\t\tplaysinline={true}\n\t\t\t\t\tmuted={true}\n\t\t\t\t\tclass=\"ui5-barcode-scanner-dialog-video\"\n\t\t\t\t></video>\n\t\t\t\t<canvas class=\"ui5-barcode-scanner-dialog-overlay\"></canvas>\n\t\t\t</div>\n\t\t\t<slot name=\"footer\" class=\"ui5-barcode-scanner-dialog-footer\">\n\t\t\t\t<Button\n\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\tonClick={this._closeDialog}\n\t\t\t\t>{this._cancelButtonText}</Button>\n\t\t\t</slot>\n\t\t</Dialog>\n\t\t<BusyIndicator\n\t\t\tclass=\"ui5-barcode-scanner-dialog-busy\"\n\t\t\tactive={this.loading}\n\t\t\tsize=\"L\"\n\t\t\ttext={this._busyIndicatorText}\n\t\t/>\n\t</>);\n}\n"]}

package/dist/DynamicPage.d.ts

@@ -141,7 +141,7 @@ declare class DynamicPage extends UI5Element {
     get _headerLabel(): string;
     get _headerExpanded(): boolean;
     get _accAttributesForHeaderActions(): {
-        controls: string;
+        controls: Lowercase<string>;
     };
     get headerTabIndex(): 0 | -1;
     get headerAriaHidden(): boolean;

package/dist/DynamicPage.js

@@ -12,7 +12,7 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import query from "@ui5/webcomponents-base/dist/decorators/query.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
@@ -21,7 +21,7 @@ import InvisibleMessageMode from "@ui5/webcomponents-base/dist/types/InvisibleMe
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
 // Template
-import DynamicPageTemplate from "./generated/templates/DynamicPageTemplate.lit.js";
+import DynamicPageTemplate from "./DynamicPageTemplate.js";
 // Styles
 import DynamicPageCss from "./generated/themes/DynamicPage.css.js";
 import DynamicPageHeader from "./DynamicPageHeader.js";
@@ -338,7 +338,7 @@ __decorate([
 DynamicPage = DynamicPage_1 = __decorate([
     customElement({
         tag: "ui5-dynamic-page",
-        renderer: litRender,
+        renderer: jsxRenderer,
         styles: DynamicPageCss,
         template: DynamicPageTemplate,
         dependencies: [DynamicPageHeaderActions],

package/dist/DynamicPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicPage.js","sourceRoot":"","sources":["../src/DynamicPage.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport query from \"@ui5/webcomponents-base/dist/decorators/query.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport MediaRange from \"@ui5/webcomponents-base/dist/MediaRange.js\";\nimport announce from \"@ui5/webcomponents-base/dist/util/InvisibleMessage.js\";\nimport InvisibleMessageMode from \"@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\n\nimport debounce from \"@ui5/webcomponents-base/dist/util/debounce.js\";\n\n// Template\nimport DynamicPageTemplate from \"./generated/templates/DynamicPageTemplate.lit.js\";\n\n// Styles\nimport DynamicPageCss from \"./generated/themes/DynamicPage.css.js\";\n\nimport DynamicPageHeader from \"./DynamicPageHeader.js\";\nimport DynamicPageTitle from \"./DynamicPageTitle.js\";\nimport DynamicPageHeaderActions from \"./DynamicPageHeaderActions.js\";\n\n// Texts\nimport {\n\tDYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER,\n\tDYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nconst SCROLL_DEBOUNCE_RATE = 5; // ms\nconst SCROLL_THRESHOLD = 10; // px\n/**\n * @class\n *\n * ### Overview\n *\n * A layout component, representing a web page, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer.\n *\n * The component consist of several components:\n *\n * - `DynamicPageTitle` - a component, holding the title of the page, the navigation actions and the content. The displayed content changes based on the current mode of the `DynamicPageHeader`.\n * - `DynamicPageHeader` - a generic container, which can contain a single layout component and any other HTML elements. The header works in two modes - expanded and snapped and its behavior can be adjusted with the help of different properties.\n * - `Content area` - a generic container, which can have a single UI5 layout.\n * - `Footer` - positioned at the bottom with a small offset and used for additional actions, the footer floats above the content.\n *\n * ### Usage\n *\n * Use the `DynamicPage` if you need to have a title, that is always visible\n * and a header, that has configurable Expanding/Snapping functionality.\n * If you don't need the Expanding/Snapping functionality it is better to use the\n * `ui5-page` as a lighter component.\n *\n * The app can add to the `default` slot of the ui5-dynamic-page either content that is designed to fit its container (e.g. has 100% height),\n * or content with own height that may overflow its container. In the second case the `DynamicPage` will show a scrollbar that allows the user\n * scroll through the content.\n *\n * ## Notes:\n *\n * - Snapping of the `DynamicPageTitle` is not supported in the following case:\n *  - When the `DynamicPage` has a scroll bar, the component usually scrolls to the snapping point - the point, where the `DynamicPageHeader` is scrolled out completely. However, when there is a scroll bar, but not enough content to reach the snapping point, the snapping is not possible using scrolling.\n *\n * ### Responsive Behavior\n *\n * Dynamic page web component implements the responsive paddings design.\n *\n * ### Keyboard Handling\n *\n *\n * ### Basic Navigation\n *\n * - [SPACE, ENTER, RETURN] - If focus is on a button inside DynamicPageTitle its action is being triggered, once activated.\n * If focus is on the snap header button (arrow button), or on the header itself, once activated, it triggers the associated action (such as snap/expand the header).\n * If focus is on pin button (the button with pin icon on the bottom of the header), once activated, it triggers the associated action (pinning of the header).\n *\n * ### Fast Navigation\n * - This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up`.\n * In order to use this functionality, you need to import the following module:\n *\n * - `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/DynamicPage.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @since 2.0.0\n * @public\n * @csspart content - Used to style the content of the component\n * @csspart fit-content - Used to style the fit content container of the component.\n * @csspart footer - Used to style the footer of the component\n */\n@customElement({\n\ttag: \"ui5-dynamic-page\",\n\trenderer: litRender,\n\tstyles: DynamicPageCss,\n\ttemplate: DynamicPageTemplate,\n\tdependencies: [DynamicPageHeaderActions],\n})\n\n/**\n * Fired when the pin header button is toggled.\n *\n * @public\n */\n@event(\"pin-button-toggle\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the expand/collapse area of the title is toggled.\n *\n * @public\n */\n@event(\"title-toggle\", {\n\tbubbles: true,\n})\n\nclass DynamicPage extends UI5Element {\n\teventDetails!: {\n\t\t\"pin-button-toggle\": void;\n\t\t\"title-toggle\": void;\n\t}\n\t/**\n\t * Defines if the pin button is hidden.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\thidePinButton = false;\n\n\t/**\n\t * Defines if the header is pinned.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\theaderPinned = false;\n\n\t/**\n\t * Defines if the footer is shown.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowFooter = false;\n\n\t/**\n\t * Defines the current media query size.\n\t *\n\t * @private\n\t */\n\t@property()\n\tmediaRange?: string;\n\n\t/**\n\t * Defines the content of the Dynamic Page.\n\t *\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement })\n\tcontent!: HTMLElement[];\n\n\t/**\n\t * Defines the title HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: DynamicPageTitle })\n\ttitleArea!: Array<DynamicPageTitle>;\n\n\t/**\n\t * Defines the header HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: DynamicPageHeader })\n\theaderArea!: Array<DynamicPageHeader>;\n\n\t/**\n\t * Defines the footer HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tfooterArea!: HTMLElement[];\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\tskipSnapOnScroll = false;\n\tshowHeaderInStickArea = false;\n\tisToggled = false;\n\n\t@property({ type: Boolean })\n\t_headerSnapped = false;\n\n\t_updateMediaRange: ResizeObserverCallback;\n\n\t@query(\".ui5-dynamic-page-scroll-container\")\n\tscrollContainer?: HTMLElement;\n\n\t@query(\"[ui5-dynamic-page-header-actions]\")\n\theaderActions?: DynamicPageHeaderActions;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._updateMediaRange = this.updateMediaRange.bind(this);\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._updateMediaRange);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._updateMediaRange);\n\t}\n\n\tonBeforeRendering() {\n\t\tif (this.dynamicPageTitle) {\n\t\t\tthis.dynamicPageTitle.snapped = this._headerSnapped;\n\t\t\tthis.dynamicPageTitle.interactive = this.hasHeading;\n\t\t\tthis.dynamicPageTitle.hasSnappedTitleOnMobile = !!this.hasSnappedTitleOnMobile;\n\t\t\tthis.dynamicPageTitle.removeAttribute(\"hovered\");\n\t\t}\n\t}\n\n\tget dynamicPageTitle(): DynamicPageTitle | null {\n\t\treturn this.querySelector<DynamicPageTitle>(\"[ui5-dynamic-page-title]\");\n\t}\n\n\tget dynamicPageHeader(): DynamicPageHeader | null {\n\t\treturn this.querySelector<DynamicPageHeader>(\"[ui5-dynamic-page-header]\");\n\t}\n\n\tget actionsInTitle(): boolean {\n\t\treturn this._headerSnapped || this.showHeaderInStickArea || this.headerPinned;\n\t}\n\n\tget headerInTitle(): boolean {\n\t\treturn !this._headerSnapped && (this.showHeaderInStickArea || this.headerPinned);\n\t}\n\n\tget headerInContent(): boolean {\n\t\treturn !this.showHeaderInStickArea && !this.headerInTitle && !this.hasSnappedTitleOnMobile;\n\t}\n\n\tget _headerLabel() {\n\t\treturn this._headerSnapped\n\t\t\t? DynamicPage.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER)\n\t\t\t: DynamicPage.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER);\n\t}\n\n\tget _headerExpanded() {\n\t\treturn !this._headerSnapped;\n\t}\n\n\tget _accAttributesForHeaderActions() {\n\t\treturn {\n\t\t\tcontrols: `${this._id}-header`,\n\t\t};\n\t}\n\n\tget headerTabIndex() {\n\t\treturn (this._headerSnapped || this.showHeaderInStickArea) ? -1 : 0;\n\t}\n\n\tget headerAriaHidden() {\n\t\treturn (this._headerSnapped || this.showHeaderInStickArea);\n\t}\n\n\tget hasHeading() {\n\t\treturn this.headerArea.length > 0;\n\t}\n\n\tget headerSnapped(): boolean {\n\t\treturn this._headerSnapped;\n\t}\n\n\tget hasSnappedTitleOnMobile() {\n\t\treturn isPhone() && this.headerSnapped && this.dynamicPageTitle?.snappedTitleOnMobile.length;\n\t}\n\n\t/**\n\t * Defines if the header is snapped.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tset headerSnapped(snapped: boolean) {\n\t\tif (snapped !== this._headerSnapped) {\n\t\t\tthis._toggleHeader();\n\t\t}\n\t}\n\n\tsnapOnScroll() {\n\t\tdebounce(() => this.snapTitleByScroll(), SCROLL_DEBOUNCE_RATE);\n\t}\n\n\tsnapTitleByScroll() {\n\t\tif (!this.dynamicPageTitle || !this.dynamicPageHeader || this.headerPinned) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.isToggled) {\n\t\t\tthis.isToggled = false;\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.skipSnapOnScroll) {\n\t\t\tthis.skipSnapOnScroll = false;\n\t\t\treturn;\n\t\t}\n\n\t\tconst scrollTop = this.scrollContainer!.scrollTop;\n\t\tconst headerHeight = this.dynamicPageHeader.getBoundingClientRect().height;\n\t\tconst lastHeaderSnapped = this._headerSnapped;\n\n\t\tconst shouldSnap = !this._headerSnapped && scrollTop > headerHeight + SCROLL_THRESHOLD;\n\t\tconst shouldExpand = this._headerSnapped && (scrollTop < headerHeight - SCROLL_THRESHOLD\n\t\t\t|| (!scrollTop && !headerHeight));\n\n\t\tif (shouldSnap) {\n\t\t\tthis.showHeaderInStickArea = false;\n\t\t\tthis._headerSnapped = true;\n\n\t\t\t//* snappedTitleOnMobile\n\t\t\t// If the header is snapped and the scroll is at the top, scroll down a bit\n\t\t\t// to avoid ending in an endless loop of snapping and unsnapping\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tif (this.scrollContainer!.scrollTop === 0) {\n\t\t\t\t\tthis.scrollContainer!.scrollTop = SCROLL_THRESHOLD;\n\t\t\t\t}\n\t\t\t});\n\t\t} else if (shouldExpand) {\n\t\t\tthis._headerSnapped = false;\n\t\t}\n\n\t\t// Fire event if snapped state changed\n\t\tif (lastHeaderSnapped !== this._headerSnapped) {\n\t\t\tthis.fireDecoratorEvent(\"title-toggle\");\n\t\t}\n\t}\n\n\tasync onExpandClick() {\n\t\tthis.isToggled = true;\n\t\tthis._toggleHeader();\n\t\tthis.fireDecoratorEvent(\"title-toggle\");\n\t\tawait renderFinished();\n\t\tthis.headerActions?.focusExpandButton();\n\n\t\tif (this.hasSnappedTitleOnMobile) {\n\t\t\tthis.dynamicPageTitle?.focus();\n\t\t}\n\n\t\tannounce(this._headerLabel, InvisibleMessageMode.Polite);\n\t}\n\n\tasync onPinClick() {\n\t\tthis.headerPinned = !this.headerPinned;\n\t\tthis.fireDecoratorEvent(\"pin-button-toggle\");\n\t\tawait renderFinished();\n\t\tthis.headerActions?.focusPinButton();\n\t}\n\n\tasync onToggleTitle() {\n\t\tif (!this.hasHeading) {\n\t\t\treturn;\n\t\t}\n\t\tthis.isToggled = true;\n\t\tthis._toggleHeader();\n\t\tthis.fireDecoratorEvent(\"title-toggle\");\n\t\tawait renderFinished();\n\t\tthis.dynamicPageTitle!.focus();\n\t}\n\n\tasync _toggleHeader() {\n\t\tconst headerHeight = this.dynamicPageHeader?.getBoundingClientRect().height || 0;\n\t\tconst currentScrollTop = this.scrollContainer!.scrollTop;\n\n\t\tif (currentScrollTop > SCROLL_THRESHOLD && currentScrollTop < headerHeight) {\n\t\t\tif (!this._headerSnapped) {\n\t\t\t\tthis._headerSnapped = true;\n\t\t\t\tthis.showHeaderInStickArea = true;\n\t\t\t\tthis.scrollContainer!.scrollTop = 0;\n\t\t\t} else {\n\t\t\t\tthis.showHeaderInStickArea = false;\n\t\t\t\tthis._headerSnapped = false;\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.scrollContainer!.scrollTop === SCROLL_THRESHOLD) {\n\t\t\tthis.scrollContainer!.scrollTop = 0;\n\t\t}\n\n\t\tthis.showHeaderInStickArea = !this.showHeaderInStickArea;\n\t\tthis._headerSnapped = !this._headerSnapped;\n\n\t\tthis.skipSnapOnScroll = true;\n\n\t\tawait renderFinished();\n\t\tif (this._headerSnapped && this.scrollContainer!.scrollTop < SCROLL_THRESHOLD) {\n\t\t\tthis.scrollContainer!.scrollTop = SCROLL_THRESHOLD;\n\t\t}\n\t}\n\n\tasync onExpandHoverIn() {\n\t\tthis.dynamicPageTitle?.setAttribute(\"hovered\", \"\");\n\t\tawait renderFinished();\n\t}\n\n\tasync onExpandHoverOut() {\n\t\tthis.dynamicPageTitle?.removeAttribute(\"hovered\");\n\t\tawait renderFinished();\n\t}\n\n\tupdateMediaRange() {\n\t\tthis.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef()!.offsetWidth);\n\t}\n}\n\nDynamicPage.define();\n\nexport default DynamicPage;\n"]}
+{"version":3,"file":"DynamicPage.js","sourceRoot":"","sources":["../src/DynamicPage.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport query from \"@ui5/webcomponents-base/dist/decorators/query.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport MediaRange from \"@ui5/webcomponents-base/dist/MediaRange.js\";\nimport announce from \"@ui5/webcomponents-base/dist/util/InvisibleMessage.js\";\nimport InvisibleMessageMode from \"@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\n\nimport debounce from \"@ui5/webcomponents-base/dist/util/debounce.js\";\n\n// Template\nimport DynamicPageTemplate from \"./DynamicPageTemplate.js\";\n\n// Styles\nimport DynamicPageCss from \"./generated/themes/DynamicPage.css.js\";\n\nimport DynamicPageHeader from \"./DynamicPageHeader.js\";\nimport DynamicPageTitle from \"./DynamicPageTitle.js\";\nimport DynamicPageHeaderActions from \"./DynamicPageHeaderActions.js\";\n\n// Texts\nimport {\n\tDYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER,\n\tDYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nconst SCROLL_DEBOUNCE_RATE = 5; // ms\nconst SCROLL_THRESHOLD = 10; // px\n/**\n * @class\n *\n * ### Overview\n *\n * A layout component, representing a web page, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer.\n *\n * The component consist of several components:\n *\n * - `DynamicPageTitle` - a component, holding the title of the page, the navigation actions and the content. The displayed content changes based on the current mode of the `DynamicPageHeader`.\n * - `DynamicPageHeader` - a generic container, which can contain a single layout component and any other HTML elements. The header works in two modes - expanded and snapped and its behavior can be adjusted with the help of different properties.\n * - `Content area` - a generic container, which can have a single UI5 layout.\n * - `Footer` - positioned at the bottom with a small offset and used for additional actions, the footer floats above the content.\n *\n * ### Usage\n *\n * Use the `DynamicPage` if you need to have a title, that is always visible\n * and a header, that has configurable Expanding/Snapping functionality.\n * If you don't need the Expanding/Snapping functionality it is better to use the\n * `ui5-page` as a lighter component.\n *\n * The app can add to the `default` slot of the ui5-dynamic-page either content that is designed to fit its container (e.g. has 100% height),\n * or content with own height that may overflow its container. In the second case the `DynamicPage` will show a scrollbar that allows the user\n * scroll through the content.\n *\n * ## Notes:\n *\n * - Snapping of the `DynamicPageTitle` is not supported in the following case:\n *  - When the `DynamicPage` has a scroll bar, the component usually scrolls to the snapping point - the point, where the `DynamicPageHeader` is scrolled out completely. However, when there is a scroll bar, but not enough content to reach the snapping point, the snapping is not possible using scrolling.\n *\n * ### Responsive Behavior\n *\n * Dynamic page web component implements the responsive paddings design.\n *\n * ### Keyboard Handling\n *\n *\n * ### Basic Navigation\n *\n * - [SPACE, ENTER, RETURN] - If focus is on a button inside DynamicPageTitle its action is being triggered, once activated.\n * If focus is on the snap header button (arrow button), or on the header itself, once activated, it triggers the associated action (such as snap/expand the header).\n * If focus is on pin button (the button with pin icon on the bottom of the header), once activated, it triggers the associated action (pinning of the header).\n *\n * ### Fast Navigation\n * - This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up`.\n * In order to use this functionality, you need to import the following module:\n *\n * - `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/DynamicPage.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @since 2.0.0\n * @public\n * @csspart content - Used to style the content of the component\n * @csspart fit-content - Used to style the fit content container of the component.\n * @csspart footer - Used to style the footer of the component\n */\n@customElement({\n\ttag: \"ui5-dynamic-page\",\n\trenderer: jsxRenderer,\n\tstyles: DynamicPageCss,\n\ttemplate: DynamicPageTemplate,\n\tdependencies: [DynamicPageHeaderActions],\n})\n\n/**\n * Fired when the pin header button is toggled.\n *\n * @public\n */\n@event(\"pin-button-toggle\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the expand/collapse area of the title is toggled.\n *\n * @public\n */\n@event(\"title-toggle\", {\n\tbubbles: true,\n})\n\nclass DynamicPage extends UI5Element {\n\teventDetails!: {\n\t\t\"pin-button-toggle\": void;\n\t\t\"title-toggle\": void;\n\t}\n\t/**\n\t * Defines if the pin button is hidden.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\thidePinButton = false;\n\n\t/**\n\t * Defines if the header is pinned.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\theaderPinned = false;\n\n\t/**\n\t * Defines if the footer is shown.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowFooter = false;\n\n\t/**\n\t * Defines the current media query size.\n\t *\n\t * @private\n\t */\n\t@property()\n\tmediaRange?: string;\n\n\t/**\n\t * Defines the content of the Dynamic Page.\n\t *\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement })\n\tcontent!: HTMLElement[];\n\n\t/**\n\t * Defines the title HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: DynamicPageTitle })\n\ttitleArea!: Array<DynamicPageTitle>;\n\n\t/**\n\t * Defines the header HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: DynamicPageHeader })\n\theaderArea!: Array<DynamicPageHeader>;\n\n\t/**\n\t * Defines the footer HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tfooterArea!: HTMLElement[];\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\tskipSnapOnScroll = false;\n\tshowHeaderInStickArea = false;\n\tisToggled = false;\n\n\t@property({ type: Boolean })\n\t_headerSnapped = false;\n\n\t_updateMediaRange: ResizeObserverCallback;\n\n\t@query(\".ui5-dynamic-page-scroll-container\")\n\tscrollContainer?: HTMLElement;\n\n\t@query(\"[ui5-dynamic-page-header-actions]\")\n\theaderActions?: DynamicPageHeaderActions;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._updateMediaRange = this.updateMediaRange.bind(this);\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._updateMediaRange);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._updateMediaRange);\n\t}\n\n\tonBeforeRendering() {\n\t\tif (this.dynamicPageTitle) {\n\t\t\tthis.dynamicPageTitle.snapped = this._headerSnapped;\n\t\t\tthis.dynamicPageTitle.interactive = this.hasHeading;\n\t\t\tthis.dynamicPageTitle.hasSnappedTitleOnMobile = !!this.hasSnappedTitleOnMobile;\n\t\t\tthis.dynamicPageTitle.removeAttribute(\"hovered\");\n\t\t}\n\t}\n\n\tget dynamicPageTitle(): DynamicPageTitle | null {\n\t\treturn this.querySelector<DynamicPageTitle>(\"[ui5-dynamic-page-title]\");\n\t}\n\n\tget dynamicPageHeader(): DynamicPageHeader | null {\n\t\treturn this.querySelector<DynamicPageHeader>(\"[ui5-dynamic-page-header]\");\n\t}\n\n\tget actionsInTitle(): boolean {\n\t\treturn this._headerSnapped || this.showHeaderInStickArea || this.headerPinned;\n\t}\n\n\tget headerInTitle(): boolean {\n\t\treturn !this._headerSnapped && (this.showHeaderInStickArea || this.headerPinned);\n\t}\n\n\tget headerInContent(): boolean {\n\t\treturn !this.showHeaderInStickArea && !this.headerInTitle && !this.hasSnappedTitleOnMobile;\n\t}\n\n\tget _headerLabel() {\n\t\treturn this._headerSnapped\n\t\t\t? DynamicPage.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER)\n\t\t\t: DynamicPage.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER);\n\t}\n\n\tget _headerExpanded() {\n\t\treturn !this._headerSnapped;\n\t}\n\n\tget _accAttributesForHeaderActions() {\n\t\treturn {\n\t\t\tcontrols: `${this._id}-header` as Lowercase<string>,\n\t\t};\n\t}\n\n\tget headerTabIndex() {\n\t\treturn (this._headerSnapped || this.showHeaderInStickArea) ? -1 : 0;\n\t}\n\n\tget headerAriaHidden() {\n\t\treturn (this._headerSnapped || this.showHeaderInStickArea);\n\t}\n\n\tget hasHeading() {\n\t\treturn this.headerArea.length > 0;\n\t}\n\n\tget headerSnapped(): boolean {\n\t\treturn this._headerSnapped;\n\t}\n\n\tget hasSnappedTitleOnMobile() {\n\t\treturn isPhone() && this.headerSnapped && this.dynamicPageTitle?.snappedTitleOnMobile.length;\n\t}\n\n\t/**\n\t * Defines if the header is snapped.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tset headerSnapped(snapped: boolean) {\n\t\tif (snapped !== this._headerSnapped) {\n\t\t\tthis._toggleHeader();\n\t\t}\n\t}\n\n\tsnapOnScroll() {\n\t\tdebounce(() => this.snapTitleByScroll(), SCROLL_DEBOUNCE_RATE);\n\t}\n\n\tsnapTitleByScroll() {\n\t\tif (!this.dynamicPageTitle || !this.dynamicPageHeader || this.headerPinned) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.isToggled) {\n\t\t\tthis.isToggled = false;\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.skipSnapOnScroll) {\n\t\t\tthis.skipSnapOnScroll = false;\n\t\t\treturn;\n\t\t}\n\n\t\tconst scrollTop = this.scrollContainer!.scrollTop;\n\t\tconst headerHeight = this.dynamicPageHeader.getBoundingClientRect().height;\n\t\tconst lastHeaderSnapped = this._headerSnapped;\n\n\t\tconst shouldSnap = !this._headerSnapped && scrollTop > headerHeight + SCROLL_THRESHOLD;\n\t\tconst shouldExpand = this._headerSnapped && (scrollTop < headerHeight - SCROLL_THRESHOLD\n\t\t\t|| (!scrollTop && !headerHeight));\n\n\t\tif (shouldSnap) {\n\t\t\tthis.showHeaderInStickArea = false;\n\t\t\tthis._headerSnapped = true;\n\n\t\t\t//* snappedTitleOnMobile\n\t\t\t// If the header is snapped and the scroll is at the top, scroll down a bit\n\t\t\t// to avoid ending in an endless loop of snapping and unsnapping\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tif (this.scrollContainer!.scrollTop === 0) {\n\t\t\t\t\tthis.scrollContainer!.scrollTop = SCROLL_THRESHOLD;\n\t\t\t\t}\n\t\t\t});\n\t\t} else if (shouldExpand) {\n\t\t\tthis._headerSnapped = false;\n\t\t}\n\n\t\t// Fire event if snapped state changed\n\t\tif (lastHeaderSnapped !== this._headerSnapped) {\n\t\t\tthis.fireDecoratorEvent(\"title-toggle\");\n\t\t}\n\t}\n\n\tasync onExpandClick() {\n\t\tthis.isToggled = true;\n\t\tthis._toggleHeader();\n\t\tthis.fireDecoratorEvent(\"title-toggle\");\n\t\tawait renderFinished();\n\t\tthis.headerActions?.focusExpandButton();\n\n\t\tif (this.hasSnappedTitleOnMobile) {\n\t\t\tthis.dynamicPageTitle?.focus();\n\t\t}\n\n\t\tannounce(this._headerLabel, InvisibleMessageMode.Polite);\n\t}\n\n\tasync onPinClick() {\n\t\tthis.headerPinned = !this.headerPinned;\n\t\tthis.fireDecoratorEvent(\"pin-button-toggle\");\n\t\tawait renderFinished();\n\t\tthis.headerActions?.focusPinButton();\n\t}\n\n\tasync onToggleTitle() {\n\t\tif (!this.hasHeading) {\n\t\t\treturn;\n\t\t}\n\t\tthis.isToggled = true;\n\t\tthis._toggleHeader();\n\t\tthis.fireDecoratorEvent(\"title-toggle\");\n\t\tawait renderFinished();\n\t\tthis.dynamicPageTitle!.focus();\n\t}\n\n\tasync _toggleHeader() {\n\t\tconst headerHeight = this.dynamicPageHeader?.getBoundingClientRect().height || 0;\n\t\tconst currentScrollTop = this.scrollContainer!.scrollTop;\n\n\t\tif (currentScrollTop > SCROLL_THRESHOLD && currentScrollTop < headerHeight) {\n\t\t\tif (!this._headerSnapped) {\n\t\t\t\tthis._headerSnapped = true;\n\t\t\t\tthis.showHeaderInStickArea = true;\n\t\t\t\tthis.scrollContainer!.scrollTop = 0;\n\t\t\t} else {\n\t\t\t\tthis.showHeaderInStickArea = false;\n\t\t\t\tthis._headerSnapped = false;\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.scrollContainer!.scrollTop === SCROLL_THRESHOLD) {\n\t\t\tthis.scrollContainer!.scrollTop = 0;\n\t\t}\n\n\t\tthis.showHeaderInStickArea = !this.showHeaderInStickArea;\n\t\tthis._headerSnapped = !this._headerSnapped;\n\n\t\tthis.skipSnapOnScroll = true;\n\n\t\tawait renderFinished();\n\t\tif (this._headerSnapped && this.scrollContainer!.scrollTop < SCROLL_THRESHOLD) {\n\t\t\tthis.scrollContainer!.scrollTop = SCROLL_THRESHOLD;\n\t\t}\n\t}\n\n\tasync onExpandHoverIn() {\n\t\tthis.dynamicPageTitle?.setAttribute(\"hovered\", \"\");\n\t\tawait renderFinished();\n\t}\n\n\tasync onExpandHoverOut() {\n\t\tthis.dynamicPageTitle?.removeAttribute(\"hovered\");\n\t\tawait renderFinished();\n\t}\n\n\tupdateMediaRange() {\n\t\tthis.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef()!.offsetWidth);\n\t}\n}\n\nDynamicPage.define();\n\nexport default DynamicPage;\n"]}

package/dist/DynamicPageHeader.js

@@ -7,9 +7,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 // Template
-import DynamicPageHeaderTemplate from "./generated/templates/DynamicPageHeaderTemplate.lit.js";
+import DynamicPageHeaderTemplate from "./DynamicPageHeaderTemplate.js";
 // Styles
 import DynamicPageHeaderCss from "./generated/themes/DynamicPageHeader.css.js";
 /**
@@ -48,7 +48,7 @@ __decorate([
 DynamicPageHeader = __decorate([
     customElement({
         tag: "ui5-dynamic-page-header",
-        renderer: litRender,
+        renderer: jsxRenderer,
         styles: DynamicPageHeaderCss,
         template: DynamicPageHeaderTemplate,
     })

package/dist/DynamicPageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicPageHeader.js","sourceRoot":"","sources":["../src/DynamicPageHeader.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAE7E,WAAW;AACX,OAAO,yBAAyB,MAAM,wDAAwD,CAAC;AAE/F,SAAS;AACT,OAAO,oBAAoB,MAAM,6CAA6C,CAAC;AAE/E;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAOH,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;CAQzC,CAAA;AADA;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;kDACrB;AAPnB,iBAAiB;IANtB,aAAa,CAAC;QACd,GAAG,EAAE,yBAAyB;QAC9B,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,oBAAoB;QAC5B,QAAQ,EAAE,yBAAyB;KACnC,CAAC;GACI,iBAAiB,CAQtB;AAED,iBAAiB,CAAC,MAAM,EAAE,CAAC;AAE3B,eAAe,iBAAiB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\n\n// Template\nimport DynamicPageHeaderTemplate from \"./generated/templates/DynamicPageHeaderTemplate.lit.js\";\n\n// Styles\nimport DynamicPageHeaderCss from \"./generated/themes/DynamicPageHeader.css.js\";\n\n/**\n * @class\n *\n * Header of the DynamicPage.\n *\n * ### Overview\n *\n * The DynamicPageHeader `ui5-dynamic-page-header` is part of the DynamicPage family\n * and is used to serve as header of the `DynamicPage`.\n *\n * ### Usage\n *\n * The `DynamicPageHeader` can hold any layout control and has two states - expanded\n * and collapsed (snapped). The switching between these states happens when:\n *\t- the user scrolls below its bottom margin\n *\t- the user clicks on the `DynamicPageTitle`\n *\t- through the `DynamicPage` property `headerSnapped`\n *\n * ### Responsive Behavior\n *\n * The responsive behavior of the `DynamicPageHeader` depends on the behavior of the\n * content that is displayed.\n *\n * @constructor\n * @extends UI5Element\n * @public\n * @since 2.0.0\n */\n@customElement({\n\ttag: \"ui5-dynamic-page-header\",\n\trenderer: litRender,\n\tstyles: DynamicPageHeaderCss,\n\ttemplate: DynamicPageHeaderTemplate,\n})\nclass DynamicPageHeader extends UI5Element {\n\t/**\n\t * Defines the content of the Dynamic Page Header.\n\t *\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement })\n\tcontent!: HTMLElement[];\n}\n\nDynamicPageHeader.define();\n\nexport default DynamicPageHeader;\n"]}
+{"version":3,"file":"DynamicPageHeader.js","sourceRoot":"","sources":["../src/DynamicPageHeader.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAE/E,WAAW;AACX,OAAO,yBAAyB,MAAM,gCAAgC,CAAC;AAEvE,SAAS;AACT,OAAO,oBAAoB,MAAM,6CAA6C,CAAC;AAE/E;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAOH,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;CAQzC,CAAA;AADA;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;kDACrB;AAPnB,iBAAiB;IANtB,aAAa,CAAC;QACd,GAAG,EAAE,yBAAyB;QAC9B,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,oBAAoB;QAC5B,QAAQ,EAAE,yBAAyB;KACnC,CAAC;GACI,iBAAiB,CAQtB;AAED,iBAAiB,CAAC,MAAM,EAAE,CAAC;AAE3B,eAAe,iBAAiB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\n\n// Template\nimport DynamicPageHeaderTemplate from \"./DynamicPageHeaderTemplate.js\";\n\n// Styles\nimport DynamicPageHeaderCss from \"./generated/themes/DynamicPageHeader.css.js\";\n\n/**\n * @class\n *\n * Header of the DynamicPage.\n *\n * ### Overview\n *\n * The DynamicPageHeader `ui5-dynamic-page-header` is part of the DynamicPage family\n * and is used to serve as header of the `DynamicPage`.\n *\n * ### Usage\n *\n * The `DynamicPageHeader` can hold any layout control and has two states - expanded\n * and collapsed (snapped). The switching between these states happens when:\n *\t- the user scrolls below its bottom margin\n *\t- the user clicks on the `DynamicPageTitle`\n *\t- through the `DynamicPage` property `headerSnapped`\n *\n * ### Responsive Behavior\n *\n * The responsive behavior of the `DynamicPageHeader` depends on the behavior of the\n * content that is displayed.\n *\n * @constructor\n * @extends UI5Element\n * @public\n * @since 2.0.0\n */\n@customElement({\n\ttag: \"ui5-dynamic-page-header\",\n\trenderer: jsxRenderer,\n\tstyles: DynamicPageHeaderCss,\n\ttemplate: DynamicPageHeaderTemplate,\n})\nclass DynamicPageHeader extends UI5Element {\n\t/**\n\t * Defines the content of the Dynamic Page Header.\n\t *\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement })\n\tcontent!: HTMLElement[];\n}\n\nDynamicPageHeader.define();\n\nexport default DynamicPageHeader;\n"]}

package/dist/DynamicPageHeaderActions.d.ts

@@ -2,10 +2,12 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
 import ToggleButton from "@ui5/webcomponents/dist/ToggleButton.js";
+import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-up.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import "@ui5/webcomponents-icons/dist/pushpin-off.js";
 import "@ui5/webcomponents-icons/dist/pushpin-on.js";
+type DynamicPageHeaderActionsAccessibilityAttributes = Pick<AccessibilityAttributes, "controls">;
 /**
  * @class
  *
@@ -56,9 +58,7 @@ declare class DynamicPageHeaderActions extends UI5Element {
      * @protected
      * @default {}
      */
-    accessibilityAttributes: {
-        controls?: string;
-    };
+    accessibilityAttributes: DynamicPageHeaderActionsAccessibilityAttributes;
     static i18nBundle: I18nBundle;
     get arrowButtonIcon(): "slim-arrow-down" | "slim-arrow-up";
     get pinButtonIcon(): "pushpin-off" | "pushpin-on";

package/dist/DynamicPageHeaderActions.js

@@ -10,7 +10,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
 import ToggleButton from "@ui5/webcomponents/dist/ToggleButton.js";
 import { isLegacyThemeFamily } from "@ui5/webcomponents-base/dist/config/Theme.js";
@@ -19,7 +19,7 @@ import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import "@ui5/webcomponents-icons/dist/pushpin-off.js";
 import "@ui5/webcomponents-icons/dist/pushpin-on.js";
 // Template
-import DynamicPageHeaderActionsTemplate from "./generated/templates/DynamicPageHeaderActionsTemplate.lit.js";
+import DynamicPageHeaderActionsTemplate from "./DynamicPageHeaderActionsTemplate.js";
 // Styles
 import DynamicPageHeaderActionsCss from "./generated/themes/DynamicPageHeaderActions.css.js";
 // Texts
@@ -135,7 +135,7 @@ __decorate([
 DynamicPageHeaderActions = DynamicPageHeaderActions_1 = __decorate([
     customElement({
         tag: "ui5-dynamic-page-header-actions",
-        renderer: litRender,
+        renderer: jsxRenderer,
         styles: DynamicPageHeaderActionsCss,
         template: DynamicPageHeaderActionsTemplate,
         dependencies: [Button, ToggleButton],

package/dist/DynamicPageHeaderActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicPageHeaderActions.js","sourceRoot":"","sources":["../src/DynamicPageHeaderActions.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport ToggleButton from \"@ui5/webcomponents/dist/ToggleButton.js\";\nimport { isLegacyThemeFamily } from \"@ui5/webcomponents-base/dist/config/Theme.js\";\n\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-up.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\nimport \"@ui5/webcomponents-icons/dist/pushpin-off.js\";\nimport \"@ui5/webcomponents-icons/dist/pushpin-on.js\";\n\n// Template\nimport DynamicPageHeaderActionsTemplate from \"./generated/templates/DynamicPageHeaderActionsTemplate.lit.js\";\n\n// Styles\nimport DynamicPageHeaderActionsCss from \"./generated/themes/DynamicPageHeaderActions.css.js\";\n\n// Texts\nimport {\n\tDYNAMIC_PAGE_ARIA_LABEL_EXPAND_HEADER,\n\tDYNAMIC_PAGE_ARIA_LABEL_SNAP_HEADER,\n\tDYNAMIC_PAGE_ARIA_LABEL_PIN_HEADER,\n} from \"./generated/i18n/i18n-defaults.js\";\n/**\n * @class\n *\n * ### Overview\n *\n * The `DynamicPageHeaderActions` component is part of the `DynamicPage`\n * family and is holding the action buttons behind the `DynamicPageTitle` and the `DynamicPageHeader`.\n *\n * The \"pin\" action is used to attach the header to a certain state (expanded/collapsed).\n * The expand/collapse action is used to switch between the two states of `DynamicPageHeader`.\n *\n *\n * @constructor\n * @extends UI5Element\n * @private\n */\n@customElement({\n\ttag: \"ui5-dynamic-page-header-actions\",\n\trenderer: litRender,\n\tstyles: DynamicPageHeaderActionsCss,\n\ttemplate: DynamicPageHeaderActionsTemplate,\n\tdependencies: [Button, ToggleButton],\n})\n\n/**\n * Event that is being fired by clicking on the expand button.\n *\n * @protected\n */\n@event(\"expand-button-click\", {\n\tbubbles: true,\n})\n\n/**\n * Event that is being fired by clicking on the pin button.\n *\n * @protected\n */\n@event(\"pin-button-click\", {\n\tbubbles: true,\n})\n\n/**\n * Event that is being fired by hovering in the expand button.\n *\n * @protected\n */\n@event(\"expand-button-hover-in\", {\n\tbubbles: true,\n})\n/**\n * Event that is being fired by hovering out the expand button.\n *\n * @protected\n */\n@event(\"expand-button-hover-out\", {\n\tbubbles: true,\n})\nclass DynamicPageHeaderActions extends UI5Element {\n\teventDetails!: {\n\t\t\"expand-button-click\": void;\n\t\t\"pin-button-click\": void;\n\t\t\"expand-button-hover-in\": void;\n\t\t\"expand-button-hover-out\": void;\n\t}\n\t/**\n\t * Defines whether the header is pinned.\n\t *\n\t * @protected\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\tpinned = false;\n\n\t/**\n\t * Defines whether the pin button is hidden.\n\t *\n\t * @protected\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\thidePinButton = false;\n\n\t/**\n\t * Defines whether the header is snapped.\n\t *\n\t * @protected\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\tsnapped = false;\n\n\t/**\n\t * Contains attributes to be added to HTML to gain accessibility.\n\t *\n\t * @protected\n\t * @default {}\n\t */\n\t@property({ type: Object })\n\taccessibilityAttributes: { controls?: string } = {};\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\tget arrowButtonIcon() {\n\t\treturn this.snapped ? \"slim-arrow-down\" : \"slim-arrow-up\";\n\t}\n\n\tget pinButtonIcon() {\n\t\tif (isLegacyThemeFamily()) {\n\t\t\treturn \"pushpin-off\";\n\t\t}\n\t\treturn this.pinned ? \"pushpin-on\" : \"pushpin-off\";\n\t}\n\n\tget expandButton(): Button | null {\n\t\treturn this.shadowRoot!.querySelector<Button>(\".ui5-dynamic-page-header-action-expand\");\n\t}\n\n\tget pinButton(): ToggleButton | null {\n\t\treturn this.shadowRoot!.querySelector<ToggleButton>(\".ui5-dynamic-page-header-action-pin\");\n\t}\n\n\tget pinLabel() {\n\t\treturn DynamicPageHeaderActions.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_PIN_HEADER);\n\t}\n\n\tget expandLabel() {\n\t\treturn this.snapped\n\t\t\t? DynamicPageHeaderActions.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_EXPAND_HEADER)\n\t\t\t: DynamicPageHeaderActions.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_SNAP_HEADER);\n\t}\n\n\tfocusExpandButton() {\n\t\tthis.expandButton?.focus();\n\t}\n\n\tfocusPinButton() {\n\t\tthis.pinButton?.focus();\n\t}\n\n\tonExpandClick() {\n\t\tthis.fireDecoratorEvent(\"expand-button-click\");\n\t}\n\n\tonPinClick() {\n\t\tthis.fireDecoratorEvent(\"pin-button-click\");\n\t}\n\n\tonExpandHoverIn() {\n\t\tthis.fireDecoratorEvent(\"expand-button-hover-in\");\n\t}\n\n\tonExpandHoverOut() {\n\t\tthis.fireDecoratorEvent(\"expand-button-hover-out\");\n\t}\n\n\tget showPinButton() {\n\t\treturn !this.hidePinButton && !this.snapped;\n\t}\n}\n\nDynamicPageHeaderActions.define();\n\nexport default DynamicPageHeaderActions;\n"]}
+{"version":3,"file":"DynamicPageHeaderActions.js","sourceRoot":"","sources":["../src/DynamicPageHeaderActions.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport ToggleButton from \"@ui5/webcomponents/dist/ToggleButton.js\";\nimport { isLegacyThemeFamily } from \"@ui5/webcomponents-base/dist/config/Theme.js\";\nimport type { AccessibilityAttributes } from \"@ui5/webcomponents-base/dist/types.js\";\n\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-up.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\nimport \"@ui5/webcomponents-icons/dist/pushpin-off.js\";\nimport \"@ui5/webcomponents-icons/dist/pushpin-on.js\";\n\n// Template\nimport DynamicPageHeaderActionsTemplate from \"./DynamicPageHeaderActionsTemplate.js\";\n\n// Styles\nimport DynamicPageHeaderActionsCss from \"./generated/themes/DynamicPageHeaderActions.css.js\";\n\n// Texts\nimport {\n\tDYNAMIC_PAGE_ARIA_LABEL_EXPAND_HEADER,\n\tDYNAMIC_PAGE_ARIA_LABEL_SNAP_HEADER,\n\tDYNAMIC_PAGE_ARIA_LABEL_PIN_HEADER,\n} from \"./generated/i18n/i18n-defaults.js\";\n\ntype DynamicPageHeaderActionsAccessibilityAttributes = Pick<AccessibilityAttributes, \"controls\">;\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `DynamicPageHeaderActions` component is part of the `DynamicPage`\n * family and is holding the action buttons behind the `DynamicPageTitle` and the `DynamicPageHeader`.\n *\n * The \"pin\" action is used to attach the header to a certain state (expanded/collapsed).\n * The expand/collapse action is used to switch between the two states of `DynamicPageHeader`.\n *\n *\n * @constructor\n * @extends UI5Element\n * @private\n */\n@customElement({\n\ttag: \"ui5-dynamic-page-header-actions\",\n\trenderer: jsxRenderer,\n\tstyles: DynamicPageHeaderActionsCss,\n\ttemplate: DynamicPageHeaderActionsTemplate,\n\tdependencies: [Button, ToggleButton],\n})\n\n/**\n * Event that is being fired by clicking on the expand button.\n *\n * @protected\n */\n@event(\"expand-button-click\", {\n\tbubbles: true,\n})\n\n/**\n * Event that is being fired by clicking on the pin button.\n *\n * @protected\n */\n@event(\"pin-button-click\", {\n\tbubbles: true,\n})\n\n/**\n * Event that is being fired by hovering in the expand button.\n *\n * @protected\n */\n@event(\"expand-button-hover-in\", {\n\tbubbles: true,\n})\n/**\n * Event that is being fired by hovering out the expand button.\n *\n * @protected\n */\n@event(\"expand-button-hover-out\", {\n\tbubbles: true,\n})\nclass DynamicPageHeaderActions extends UI5Element {\n\teventDetails!: {\n\t\t\"expand-button-click\": void;\n\t\t\"pin-button-click\": void;\n\t\t\"expand-button-hover-in\": void;\n\t\t\"expand-button-hover-out\": void;\n\t}\n\t/**\n\t * Defines whether the header is pinned.\n\t *\n\t * @protected\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\tpinned = false;\n\n\t/**\n\t * Defines whether the pin button is hidden.\n\t *\n\t * @protected\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\thidePinButton = false;\n\n\t/**\n\t * Defines whether the header is snapped.\n\t *\n\t * @protected\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\tsnapped = false;\n\n\t/**\n\t * Contains attributes to be added to HTML to gain accessibility.\n\t *\n\t * @protected\n\t * @default {}\n\t */\n\t@property({ type: Object })\n\taccessibilityAttributes: DynamicPageHeaderActionsAccessibilityAttributes = {};\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\tget arrowButtonIcon() {\n\t\treturn this.snapped ? \"slim-arrow-down\" : \"slim-arrow-up\";\n\t}\n\n\tget pinButtonIcon() {\n\t\tif (isLegacyThemeFamily()) {\n\t\t\treturn \"pushpin-off\";\n\t\t}\n\t\treturn this.pinned ? \"pushpin-on\" : \"pushpin-off\";\n\t}\n\n\tget expandButton(): Button | null {\n\t\treturn this.shadowRoot!.querySelector<Button>(\".ui5-dynamic-page-header-action-expand\");\n\t}\n\n\tget pinButton(): ToggleButton | null {\n\t\treturn this.shadowRoot!.querySelector<ToggleButton>(\".ui5-dynamic-page-header-action-pin\");\n\t}\n\n\tget pinLabel() {\n\t\treturn DynamicPageHeaderActions.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_PIN_HEADER);\n\t}\n\n\tget expandLabel() {\n\t\treturn this.snapped\n\t\t\t? DynamicPageHeaderActions.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_EXPAND_HEADER)\n\t\t\t: DynamicPageHeaderActions.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_SNAP_HEADER);\n\t}\n\n\tfocusExpandButton() {\n\t\tthis.expandButton?.focus();\n\t}\n\n\tfocusPinButton() {\n\t\tthis.pinButton?.focus();\n\t}\n\n\tonExpandClick() {\n\t\tthis.fireDecoratorEvent(\"expand-button-click\");\n\t}\n\n\tonPinClick() {\n\t\tthis.fireDecoratorEvent(\"pin-button-click\");\n\t}\n\n\tonExpandHoverIn() {\n\t\tthis.fireDecoratorEvent(\"expand-button-hover-in\");\n\t}\n\n\tonExpandHoverOut() {\n\t\tthis.fireDecoratorEvent(\"expand-button-hover-out\");\n\t}\n\n\tget showPinButton() {\n\t\treturn !this.hidePinButton && !this.snapped;\n\t}\n}\n\nDynamicPageHeaderActions.define();\n\nexport default DynamicPageHeaderActions;\n"]}

package/dist/DynamicPageHeaderActionsTemplate.d.ts

@@ -0,0 +1,2 @@
+import type DynamicPageHeaderActions from "./DynamicPageHeaderActions.js";
+export default function DynamicPageHeaderActionsTemplate(this: DynamicPageHeaderActions): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/DynamicPageHeaderActionsTemplate.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import ToggleButton from "@ui5/webcomponents/dist/ToggleButton.js";
+export default function DynamicPageHeaderActionsTemplate() {
+    return (_jsx("div", { class: "ui5-dynamic-page-header-actions-root", children: _jsxs("div", { class: "ui5-dynamic-page-header-actions--wrapper", children: [_jsx(Button, { class: "ui5-dynamic-page-header-action ui5-dynamic-page-header-action-expand", onClick: this.onExpandClick, icon: this.arrowButtonIcon, accessibleName: this.expandLabel, accessibilityAttributes: this.accessibilityAttributes, tooltip: this.expandLabel, onMouseOver: this.onExpandHoverIn, onMouseOut: this.onExpandHoverOut }), this.showPinButton &&
+                    _jsx(ToggleButton, { class: "ui5-dynamic-page-header-action ui5-dynamic-page-header-action-pin", onClick: this.onPinClick, icon: this.pinButtonIcon, pressed: this.pinned, accessibilityAttributes: this.accessibilityAttributes, accessibleName: this.pinLabel, tooltip: this.pinLabel })] }) }));
+}
+//# sourceMappingURL=DynamicPageHeaderActionsTemplate.js.map

package/dist/DynamicPageHeaderActionsTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicPageHeaderActionsTemplate.js","sourceRoot":"","sources":["../src/DynamicPageHeaderActionsTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,YAAY,MAAM,yCAAyC,CAAC;AAGnE,MAAM,CAAC,OAAO,UAAU,gCAAgC;IACvD,OAAO,CACN,cAAK,KAAK,EAAC,sCAAsC,YAChD,eAAK,KAAK,EAAC,0CAA0C,aACpD,KAAC,MAAM,IACN,KAAK,EAAC,sEAAsE,EAC5E,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,IAAI,EAAE,IAAI,CAAC,eAAe,EAC1B,cAAc,EAAE,IAAI,CAAC,WAAW,EAChC,uBAAuB,EAAE,IAAI,CAAC,uBAAuB,EACrD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,WAAW,EAAE,IAAI,CAAC,eAAe,EACjC,UAAU,EAAE,IAAI,CAAC,gBAAgB,GAChC,EACD,IAAI,CAAC,aAAa;oBAClB,KAAC,YAAY,IACZ,KAAK,EAAC,mEAAmE,EACzE,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,IAAI,EAAE,IAAI,CAAC,aAAa,EACxB,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,uBAAuB,EAAE,IAAI,CAAC,uBAAuB,EACrD,cAAc,EAAE,IAAI,CAAC,QAAQ,EAC7B,OAAO,EAAE,IAAI,CAAC,QAAQ,GACrB,IAEE,GACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import Button from \"@ui5/webcomponents/dist/Button.js\";\nimport ToggleButton from \"@ui5/webcomponents/dist/ToggleButton.js\";\nimport type DynamicPageHeaderActions from \"./DynamicPageHeaderActions.js\";\n\nexport default function DynamicPageHeaderActionsTemplate(this: DynamicPageHeaderActions) {\n\treturn (\n\t\t<div class=\"ui5-dynamic-page-header-actions-root\">\n\t\t\t<div class=\"ui5-dynamic-page-header-actions--wrapper\">\n\t\t\t\t<Button\n\t\t\t\t\tclass=\"ui5-dynamic-page-header-action ui5-dynamic-page-header-action-expand\"\n\t\t\t\t\tonClick={this.onExpandClick}\n\t\t\t\t\ticon={this.arrowButtonIcon}\n\t\t\t\t\taccessibleName={this.expandLabel}\n\t\t\t\t\taccessibilityAttributes={this.accessibilityAttributes}\n\t\t\t\t\ttooltip={this.expandLabel}\n\t\t\t\t\tonMouseOver={this.onExpandHoverIn}\n\t\t\t\t\tonMouseOut={this.onExpandHoverOut}\n\t\t\t\t/>\n\t\t\t\t{this.showPinButton &&\n\t\t\t\t\t<ToggleButton\n\t\t\t\t\t\tclass=\"ui5-dynamic-page-header-action ui5-dynamic-page-header-action-pin\"\n\t\t\t\t\t\tonClick={this.onPinClick}\n\t\t\t\t\t\ticon={this.pinButtonIcon}\n\t\t\t\t\t\tpressed={this.pinned}\n\t\t\t\t\t\taccessibilityAttributes={this.accessibilityAttributes}\n\t\t\t\t\t\taccessibleName={this.pinLabel}\n\t\t\t\t\t\ttooltip={this.pinLabel}\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}

package/dist/DynamicPageHeaderTemplate.d.ts

@@ -0,0 +1,2 @@
+import type DynamicPageHeader from "./DynamicPageHeader.js";
+export default function DynamicPageHeaderTemplate(this: DynamicPageHeader): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/DynamicPageHeaderTemplate.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+export default function DynamicPageHeaderTemplate() {
+    return (_jsx("div", { class: "ui5-dynamic-page-header-root", role: "region", children: _jsx("slot", {}) }));
+}
+//# sourceMappingURL=DynamicPageHeaderTemplate.js.map

package/dist/DynamicPageHeaderTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicPageHeaderTemplate.js","sourceRoot":"","sources":["../src/DynamicPageHeaderTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,yBAAyB;IAChD,OAAO,CACN,cAAK,KAAK,EAAC,8BAA8B,EAAC,IAAI,EAAC,QAAQ,YACtD,gBAAa,GACR,CACN,CAAC;AACH,CAAC","sourcesContent":["import type DynamicPageHeader from \"./DynamicPageHeader.js\";\n\nexport default function DynamicPageHeaderTemplate(this: DynamicPageHeader) {\n\treturn (\n\t\t<div class=\"ui5-dynamic-page-header-root\" role=\"region\">\n\t\t\t<slot></slot>\n\t\t</div>\n\t);\n}\n"]}

package/dist/DynamicPageTemplate.d.ts

@@ -0,0 +1,2 @@
+import type DynamicPage from "./DynamicPage.js";
+export default function DynamicPageTemplate(this: DynamicPage): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/DynamicPageTemplate.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import DynamicPageHeaderActions from "./DynamicPageHeaderActions.js";
+export default function DynamicPageTemplate() {
+    return (_jsxs("div", { class: "ui5-dynamic-page-root", children: [_jsxs("div", { class: "ui5-dynamic-page-scroll-container", onScroll: this.snapOnScroll, children: [_jsxs("header", { class: "ui5-dynamic-page-title-header-wrapper", id: `${this._id}-header`, "aria-label": this._headerLabel, "aria-expanded": this._headerExpanded, "onui5-toggle-title": this.onToggleTitle, children: [_jsx("slot", { name: "titleArea" }), this.headerInTitle &&
+                                _jsx("slot", { tabIndex: this.headerTabIndex, "aria-hidden": this.headerAriaHidden, name: "headerArea" }), this.actionsInTitle && headerActions.call(this)] }), this.headerInContent &&
+                        _jsx("slot", { tabIndex: this.headerTabIndex, "aria-hidden": this.headerAriaHidden, name: "headerArea" }), !this.actionsInTitle && headerActions.call(this), _jsx("div", { class: "ui5-dynamic-page-content", part: "content", children: _jsxs("div", { class: "ui5-dynamic-page-fit-content", part: "fit-content", children: [_jsx("slot", {}), this.showFooter &&
+                                    _jsx("div", { class: "ui5-dynamic-page-spacer" })] }) })] }), _jsx("div", { class: "ui5-dynamic-page-footer", part: "footer", children: _jsx("slot", { name: "footerArea" }) })] }));
+}
+function headerActions() {
+    if (!this.hasSnappedTitleOnMobile && this.hasHeading) {
+        return (_jsx(DynamicPageHeaderActions, { snapped: this.headerSnapped, pinned: this.headerPinned, hidePinButton: this.hidePinButton, accessibilityAttributes: this._accAttributesForHeaderActions, "onui5-expand-button-click": this.onExpandClick, "onui5-pin-button-click": this.onPinClick, "onui5-expand-button-hover-in": this.onExpandHoverIn, "onui5-expand-button-hover-out": this.onExpandHoverOut }));
+    }
+}
+//# sourceMappingURL=DynamicPageTemplate.js.map

package/dist/DynamicPageTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicPageTemplate.js","sourceRoot":"","sources":["../src/DynamicPageTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAErE,MAAM,CAAC,OAAO,UAAU,mBAAmB;IAC1C,OAAO,CACN,eAAK,KAAK,EAAC,uBAAuB,aACjC,eAAK,KAAK,EAAC,mCAAmC,EAC7C,QAAQ,EAAE,IAAI,CAAC,YAAY,aAE3B,kBACC,KAAK,EAAC,uCAAuC,EAC7C,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,SAAS,gBACZ,IAAI,CAAC,YAAY,mBACd,IAAI,CAAC,eAAe,wBACf,IAAI,CAAC,aAAa,aAEtC,eAAM,IAAI,EAAC,WAAW,GAAQ,EAC7B,IAAI,CAAC,aAAa;gCAClB,eAAM,QAAQ,EAAE,IAAI,CAAC,cAAc,iBACrB,IAAI,CAAC,gBAAgB,EAClC,IAAI,EAAC,YAAY,GACV,EAGR,IAAI,CAAC,cAAc,IAAI,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,IACxC,EAER,IAAI,CAAC,eAAe;wBACpB,eAAM,QAAQ,EAAE,IAAI,CAAC,cAAc,iBACrB,IAAI,CAAC,gBAAgB,EAClC,IAAI,EAAC,YAAY,GACV,EAGR,CAAC,IAAI,CAAC,cAAc,IAAI,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAEjD,cAAK,KAAK,EAAC,0BAA0B,EAAC,IAAI,EAAC,SAAS,YACnD,eAAK,KAAK,EAAC,8BAA8B,EAAC,IAAI,EAAC,aAAa,aAC3D,gBAAa,EACZ,IAAI,CAAC,UAAU;oCACf,cAAK,KAAK,EAAC,yBAAyB,GAAO,IAEvC,GACD,IACD,EAEN,cAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,QAAQ,YACjD,eAAM,IAAI,EAAC,YAAY,GAAQ,GAC1B,IACD,CACN,CAAC;AACH,CAAC;AAED,SAAS,aAAa;IACrB,IAAI,CAAC,IAAI,CAAC,uBAAuB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;QACtD,OAAO,CACN,KAAC,wBAAwB,IACxB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,uBAAuB,EAAE,IAAI,CAAC,8BAA8B,+BACjC,IAAI,CAAC,aAAa,4BACrB,IAAI,CAAC,UAAU,kCACT,IAAI,CAAC,eAAe,mCACnB,IAAI,CAAC,gBAAgB,GACnD,CACF,CAAC;IACH,CAAC;AACF,CAAC","sourcesContent":["import type DynamicPage from \"./DynamicPage.js\";\nimport DynamicPageHeaderActions from \"./DynamicPageHeaderActions.js\";\n\nexport default function DynamicPageTemplate(this: DynamicPage) {\n\treturn (\n\t\t<div class=\"ui5-dynamic-page-root\">\n\t\t\t<div class=\"ui5-dynamic-page-scroll-container\"\n\t\t\t\tonScroll={this.snapOnScroll}\n\t\t\t>\n\t\t\t\t<header\n\t\t\t\t\tclass=\"ui5-dynamic-page-title-header-wrapper\"\n\t\t\t\t\tid={`${this._id}-header`}\n\t\t\t\t\taria-label={this._headerLabel}\n\t\t\t\t\taria-expanded={this._headerExpanded}\n\t\t\t\t\tonui5-toggle-title={this.onToggleTitle}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"titleArea\"></slot>\n\t\t\t\t\t{this.headerInTitle &&\n\t\t\t\t\t\t<slot tabIndex={this.headerTabIndex}\n\t\t\t\t\t\t\taria-hidden={this.headerAriaHidden}\n\t\t\t\t\t\t\tname=\"headerArea\"\n\t\t\t\t\t\t></slot>\n\t\t\t\t\t}\n\n\t\t\t\t\t{this.actionsInTitle && headerActions.call(this)}\n\t\t\t\t</header>\n\n\t\t\t\t{this.headerInContent &&\n\t\t\t\t\t<slot tabIndex={this.headerTabIndex}\n\t\t\t\t\t\taria-hidden={this.headerAriaHidden}\n\t\t\t\t\t\tname=\"headerArea\"\n\t\t\t\t\t></slot>\n\t\t\t\t}\n\n\t\t\t\t{!this.actionsInTitle && headerActions.call(this)}\n\n\t\t\t\t<div class=\"ui5-dynamic-page-content\" part=\"content\">\n\t\t\t\t\t<div class=\"ui5-dynamic-page-fit-content\" part=\"fit-content\">\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t{this.showFooter &&\n\t\t\t\t\t\t\t<div class=\"ui5-dynamic-page-spacer\"></div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div class=\"ui5-dynamic-page-footer\" part=\"footer\">\n\t\t\t\t<slot name=\"footerArea\"></slot>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nfunction headerActions(this: DynamicPage) {\n\tif (!this.hasSnappedTitleOnMobile && this.hasHeading) {\n\t\treturn (\n\t\t\t<DynamicPageHeaderActions\n\t\t\t\tsnapped={this.headerSnapped}\n\t\t\t\tpinned={this.headerPinned}\n\t\t\t\thidePinButton={this.hidePinButton}\n\t\t\t\taccessibilityAttributes={this._accAttributesForHeaderActions}\n\t\t\t\tonui5-expand-button-click={this.onExpandClick}\n\t\t\t\tonui5-pin-button-click={this.onPinClick}\n\t\t\t\tonui5-expand-button-hover-in={this.onExpandHoverIn}\n\t\t\t\tonui5-expand-button-hover-out={this.onExpandHoverOut}\n\t\t\t/>\n\t\t);\n\t}\n}\n"]}

package/dist/DynamicPageTitle.d.ts

@@ -38,7 +38,7 @@ import Title from "@ui5/webcomponents/dist/Title.js";
  */
 declare class DynamicPageTitle extends UI5Element {
     eventDetails: {
-        "_toggle-title": void;
+        "toggle-title": void;
     };
     /**
      * Defines if the title is snapped.
@@ -151,18 +151,10 @@ declare class DynamicPageTitle extends UI5Element {
     onEnterDOM(): void;
     onExitDOM(): void;
     onBeforeRendering(): void;
-    get styles(): {
-        content: {
-            "min-width": string | undefined;
-        };
-        actions: {
-            "min-width": string | undefined;
-        };
-    };
     get hasContent(): boolean;
     get headingSlotName(): "heading" | "snappedHeading";
     get subheadingSlotName(): "subheading" | "snappedSubheading";
-    get _tabIndex(): "0" | undefined;
+    get _tabIndex(): 0 | undefined;
     get _headerExpanded(): boolean;
     get _ariaDescribedbyText(): string;
     get _ariaLabelledBy(): string | undefined;