npm - @ui5/webcomponents-fiori - Versions diffs - 1.22.0-rc.3 → 1.22.0 - Mend

@ui5/webcomponents-fiori 1.22.0-rc.3 → 1.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (188) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [1.22.0](https://github.com/SAP/ui5-webcomponents/compare/v1.22.0-rc.3...v1.22.0) (2024-02-05)
+**Note:** Version bump only for package @ui5/webcomponents-fiori
 # [1.22.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.22.0-rc.2...v1.22.0-rc.3) (2024-02-01)

package/dist/Bar.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import BarDesign from "./types/BarDesign.js";
-import type { IBar } from "./Interfaces.js";
 /**
  * @class
  *
@@ -33,12 +32,11 @@ import type { IBar } from "./Interfaces.js";
  *
  * @csspart bar - Used to style the wrapper of the content of the component
  * @constructor
- * @implements { IBar }
  * @extends UI5Element
  * @public
  * @since 1.0.0-rc.11
  */
-declare class Bar extends UI5Element implements IBar {
+declare class Bar extends UI5Element {
     /**
      * Defines the component's design.
      *

package/dist/Bar.js CHANGED Viewed

@@ -47,7 +47,6 @@ import BarCss from "./generated/themes/Bar.css.js";
  *
  * @csspart bar - Used to style the wrapper of the content of the component
  * @constructor
- * @implements { IBar }
  * @extends UI5Element
  * @public
  * @since 1.0.0-rc.11

package/dist/Bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Bar.js","sourceRoot":"","sources":["../src/Bar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,aAAa,MAAM,wDAAwD,CAAC;AACnF,OAAO,SAAS,MAAM,sBAAsB,CAAC;~~AAG7C~~,WAAW;AACX,OAAO,WAAW,MAAM,0CAA0C,CAAC;AAEnE,SAAS;AACT,OAAO,MAAM,MAAM,+BAA+B,CAAC;AAEnD~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG~~;AAQH,IAAM,GAAG,GAAT,MAAM,GAAI,SAAQ,UAAU;IAiC3B,IAAI,OAAO;QACV,OAAO;YACN,OAAO,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC;IACH,CAAC;IAED;QACC,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACxD,CAAC;IAED,YAAY;QACX,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,EAAG,CAAC;QAC9B,MAAM,QAAQ,GAAG,GAAG,CAAC,WAAW,CAAC;QACjC,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;YAC1D,OAAQ,KAAqB,CAAC,WAAW,GAAG,QAAQ,GAAG,CAAC,CAAC;QAC1D,CAAC,CAAC,CAAC;QAEH,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,uBAAuB,EAAE,YAAY,CAAC,CAAC;IAC7D,CAAC;IAED,IAAI,OAAO;QACV,OAAO;YACN,IAAI,EAAE;gBACL,cAAc,EAAE,IAAI;aACpB;SACD,CAAC;IACH,CAAC;IAED,UAAU;QACT,aAAa,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAEtD,IAAI,CAAC,SAAS,EAAG,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YAChF,aAAa,CAAC,QAAQ,CAAC,KAAoB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QACvE,CAAC,EAAE,IAAI,CAAC,CAAC;IACV,CAAC;IAED,SAAS;QACR,aAAa,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAExD,IAAI,CAAC,SAAS,EAAG,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YAChF,aAAa,CAAC,UAAU,CAAC,KAAoB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QACzE,CAAC,EAAE,IAAI,CAAC,CAAC;IACT,CAAC;CACF,CAAA;AAtEA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,CAAC,MAAM,EAAE,CAAC;mCACvC;AAOvB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;yCACM;AAOlC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;0CACX;AAOlC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;uCACG;AA7B1B,GAAG;IAPR,aAAa,CAAC;QACd,GAAG,EAAE,SAAS;QACd,cAAc,EAAE,IAAI;QACpB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,WAAW;KACrB,CAAC;GACI,GAAG,CA8ER;AAED,GAAG,CAAC,MAAM,EAAE,CAAC;AAEb,eAAe,GAAG,CAAC","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 litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport BarDesign from \"./types/BarDesign.js\";\~~nimport type { IBar } from \"./Interfaces.js\";\~~n\n// Template\nimport BarTemplate from \"./generated/templates/BarTemplate.lit.js\";\n\n// Styles\nimport BarCss from \"./generated/themes/Bar.css.js\";\n\n/*\n @class\n \n <h3 class=\"comment-api-title\">Overview</h3>\n * The Bar is a container which is primarily used to hold titles, buttons and input elements\n * and its design and functionality is the basis for page headers and footers.\n * The component consists of three areas to hold its content - startContent slot, default slot and endContent slot.\n * It has the capability to center content, such as a title, while having other components on the left and right side.\n \n <h3>Usage</h3>\n * With the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter.\n * <br>\n * <b>Note:</b> Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.\n \n <h3>Responsive Behavior</h3>\n * The default slot will be centered in the available space between the startContent and the endContent areas,\n * therefore it might not always be centered in the entire bar.\n \n <h3>Keyboard Handling</h3>\n \n <h4>Fast Navigation</h4>\n * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>.\n * In order to use this functionality, you need to import the following module:\n * <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code>\n * <br><br>\n \n <h3>ES6 Module Import</h3>\n \n <code>import \"@ui5/webcomponents-fiori/dist/Bar.js\";</code>\n \n @csspart bar - Used to style the wrapper of the content of the component\n * @constructor\n * @~~implements { IBar }\n * @~~extends UI5Element\n * @public\n * @since 1.0.0-rc.11\n /\n@customElement({\n\ttag: \"ui5-bar\",\n\tfastNavigation: true,\n\trenderer: litRender,\n\tstyles: BarCss,\n\ttemplate: BarTemplate,\n})\nclass Bar extends UI5Element ~~implements IBar~~ {\n\t/\n\t Defines the component's design.\n\t \n\t @default \"Header\"\n\t * @public\n\t /\n\t@property({ type: BarDesign, defaultValue: BarDesign.Header })\n\tdesign!: `${BarDesign}`\n\n\t/\n\t Defines the content at the start of the bar.\n\t* @public\n\t/\n\t@slot({ type: HTMLElement })\n\tstartContent!: Array<HTMLElement>;\n\n\t/\n\t Defines the content in the middle of the bar.\n\t* @public\n\t/\n\t@slot({ type: HTMLElement, \"default\": true })\n\tmiddleContent!: Array<HTMLElement>\n\n\t/\n\t Defines the content at the end of the bar.\n\t* @public\n\t*/\n\t@slot({ type: HTMLElement })\n\tendContent!: Array<HTMLElement>\n\n\t_handleResizeBound: () => void;\n\n\tget accInfo() {\n\t\treturn {\n\t\t\t\"label\": this.design,\n\t\t};\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._handleResizeBound = this.handleResize.bind(this);\n\t}\n\n\thandleResize() {\n\t\tconst bar = this.getDomRef()!;\n\t\tconst barWidth = bar.offsetWidth;\n\t\tconst needShrinked = Array.from(bar.children).some(child => {\n\t\t\treturn (child as HTMLElement).offsetWidth > barWidth / 3;\n\t\t});\n\n\t\tbar.classList.toggle(\"ui5-bar-root-shrinked\", needShrinked);\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t\"ui5-bar-root\": true,\n\t\t\t},\n\t\t};\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._handleResizeBound);\n\n\t\tthis.getDomRef()!.querySelectorAll(\".ui5-bar-content-container\").forEach(child => {\n\t\t\tResizeHandler.register(child as HTMLElement, this._handleResizeBound);\n\t\t}, this);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._handleResizeBound);\n\n\t\tthis.getDomRef()!.querySelectorAll(\".ui5-bar-content-container\").forEach(child => {\n\t\t\tResizeHandler.deregister(child as HTMLElement, this._handleResizeBound);\n\t\t}, this);\n\t }\n}\n\nBar.define();\n\nexport default Bar;\n"]}
1	+ {"version":3,"file":"Bar.js","sourceRoot":"","sources":["../src/Bar.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 litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport BarDesign from \"./types/BarDesign.js\";\n\n// Template\nimport BarTemplate from \"./generated/templates/BarTemplate.lit.js\";\n\n// Styles\nimport BarCss from \"./generated/themes/Bar.css.js\";\n\n/*\n @class\n \n <h3 class=\"comment-api-title\">Overview</h3>\n * The Bar is a container which is primarily used to hold titles, buttons and input elements\n * and its design and functionality is the basis for page headers and footers.\n * The component consists of three areas to hold its content - startContent slot, default slot and endContent slot.\n * It has the capability to center content, such as a title, while having other components on the left and right side.\n \n <h3>Usage</h3>\n * With the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter.\n * <br>\n * <b>Note:</b> Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.\n \n <h3>Responsive Behavior</h3>\n * The default slot will be centered in the available space between the startContent and the endContent areas,\n * therefore it might not always be centered in the entire bar.\n \n <h3>Keyboard Handling</h3>\n \n <h4>Fast Navigation</h4>\n * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>.\n * In order to use this functionality, you need to import the following module:\n * <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code>\n * <br><br>\n \n <h3>ES6 Module Import</h3>\n \n <code>import \"@ui5/webcomponents-fiori/dist/Bar.js\";</code>\n \n @csspart bar - Used to style the wrapper of the content of the component\n * @constructor\n * @extends UI5Element\n * @public\n * @since 1.0.0-rc.11\n /\n@customElement({\n\ttag: \"ui5-bar\",\n\tfastNavigation: true,\n\trenderer: litRender,\n\tstyles: BarCss,\n\ttemplate: BarTemplate,\n})\nclass Bar extends UI5Element {\n\t/\n\t Defines the component's design.\n\t \n\t @default \"Header\"\n\t * @public\n\t /\n\t@property({ type: BarDesign, defaultValue: BarDesign.Header })\n\tdesign!: `${BarDesign}`\n\n\t/\n\t Defines the content at the start of the bar.\n\t* @public\n\t/\n\t@slot({ type: HTMLElement })\n\tstartContent!: Array<HTMLElement>;\n\n\t/\n\t Defines the content in the middle of the bar.\n\t* @public\n\t/\n\t@slot({ type: HTMLElement, \"default\": true })\n\tmiddleContent!: Array<HTMLElement>\n\n\t/\n\t Defines the content at the end of the bar.\n\t* @public\n\t*/\n\t@slot({ type: HTMLElement })\n\tendContent!: Array<HTMLElement>\n\n\t_handleResizeBound: () => void;\n\n\tget accInfo() {\n\t\treturn {\n\t\t\t\"label\": this.design,\n\t\t};\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._handleResizeBound = this.handleResize.bind(this);\n\t}\n\n\thandleResize() {\n\t\tconst bar = this.getDomRef()!;\n\t\tconst barWidth = bar.offsetWidth;\n\t\tconst needShrinked = Array.from(bar.children).some(child => {\n\t\t\treturn (child as HTMLElement).offsetWidth > barWidth / 3;\n\t\t});\n\n\t\tbar.classList.toggle(\"ui5-bar-root-shrinked\", needShrinked);\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t\"ui5-bar-root\": true,\n\t\t\t},\n\t\t};\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._handleResizeBound);\n\n\t\tthis.getDomRef()!.querySelectorAll(\".ui5-bar-content-container\").forEach(child => {\n\t\t\tResizeHandler.register(child as HTMLElement, this._handleResizeBound);\n\t\t}, this);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._handleResizeBound);\n\n\t\tthis.getDomRef()!.querySelectorAll(\".ui5-bar-content-container\").forEach(child => {\n\t\t\tResizeHandler.deregister(child as HTMLElement, this._handleResizeBound);\n\t\t}, this);\n\t }\n}\n\nBar.define();\n\nexport default Bar;\n"]}

package/dist/IllustratedMessage.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import TitleLevel from "@ui5/webcomponents/dist/types/TitleLevel.js";
-import type IButton from "@ui5/webcomponents/dist/Button.js";
+import type { IButton } from "@ui5/webcomponents/dist/Button.js";
 import IllustrationMessageSize from "./types/IllustrationMessageSize.js";
 import "./illustrations/BeforeSearch.js";
 /**

package/dist/IllustratedMessage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IllustratedMessage.js","sourceRoot":"","sources":["../src/IllustratedMessage.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,aAAa,MAAM,wDAAwD,CAAC;AAEnF,OAAO,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,MAAM,gEAAgE,CAAC;AAC9H,OAAO,EAAE,yBAAyB,EAAE,MAAM,sDAAsD,CAAC;AACjG,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAE3E,OAAO,KAAK,MAAM,kCAAkC,CAAC;AACrD,OAAO,UAAU,MAAM,6CAA6C,CAAC;AACrE,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAE7E,OAAO,uBAAuB,MAAM,oCAAoC,CAAC;AACzE,OAAO,uBAAuB,MAAM,oCAAoC,CAAC;AACzE,OAAO,iCAAiC,CAAC;AAEzC,SAAS;AACT,OAAO,qBAAqB,MAAM,8CAA8C,CAAC;AAEjF,WAAW;AACX,OAAO,0BAA0B,MAAM,yDAAyD,CAAC;AAEjG,MAAM,4BAA4B,GAAG,CAAC,IAAY,EAAU,EAAE;IAC7D,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE;QAC3B,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;KACnC;IAED,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;QACvB,OAAO,IAAI,CAAC;KACZ;IAED,OAAO,SAAS,IAAI,EAAE,CAAC;AACxB,CAAC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AAWH,IAAM,kBAAkB,0BAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAgK1C;QACC,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClD,gHAAgH;QAChH,IAAI,CAAC,6BAA6B,GAAG,EAAE,CAAC;QACxC,IAAI,CAAC,8BAA8B,GAAG,EAAE,CAAC;QACzC,8HAA8H;QAC9H,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC;IAC/B,CAAC;IAED,MAAM,CAAC,KAAK,CAAC,QAAQ;QACpB,oBAAkB,CAAC,UAAU,GAAG,MAAM,aAAa,CAAC,0BAA0B,CAAC,CAAC;IACjF,CAAC;IAED,MAAM,KAAK,WAAW;QACrB,OAAO;YACN,MAAM,EAAE,GAAG;YACX,IAAI,EAAE,GAAG;YACT,IAAI,EAAE,GAAG;SACT,CAAC;IACH,CAAC;IAED,MAAM,KAAK,kBAAkB;QAC5B,OAAO;YACN,MAAM,EAAE,GAAG;YACX,IAAI,EAAE,GAAG;YACT,IAAI,EAAE,EAAE;SACR,CAAC;IACH,CAAC;IAED,MAAM,KAAK,KAAK;QACf,OAAO;YACN,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE,QAAQ;YAChB,KAAK,EAAE,OAAO;SACd,CAAC;IACH,CAAC;IAED,KAAK,CAAC,iBAAiB;QACtB,mEAAmE;QACnE,IAAI,aAAa,GAAG,4BAA4B,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5D,IAAI,gBAAgB,GAAG,uBAAuB,CAAC,aAAa,CAAC,CAAC;QAE9D,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,aAAa,CAAC,EAAE;YAC1E,aAAa,GAAG,4BAA4B,CAAC,uBAAuB,CAAC,YAAY,CAAC,CAAC;YACnF,2BAA2B;YAC3B,OAAO,CAAC,IAAI,CAAC,qBAAqB,aAAc,+CAA+C,uBAAuB,CAAC,YAAY,sBAAsB,CAAC,CAAC;SAC3J;QAED,IAAI,gBAAgB,KAAK,SAAS,EAAE;YACnC,gBAAgB,GAAG,MAAM,mBAAmB,CAAC,aAAa,CAAC,CAAC;SAC5D;QAED,IAAI,CAAC,OAAO,GAAG,gBAAiB,CAAC,OAAO,CAAC;QACzC,IAAI,CAAC,SAAS,GAAG,gBAAiB,CAAC,SAAS,CAAC;QAC7C,IAAI,CAAC,QAAQ,GAAG,gBAAiB,CAAC,QAAQ,CAAC;QAE3C,IAAI,CAAC,iBAAiB,GAAG,oBAAkB,CAAC,UAAU,CAAC,OAAO,CAAC,gBAAiB,CAAC,KAAK,CAAC,CAAC;QACxF,IAAI,CAAC,oBAAoB,GAAG,oBAAkB,CAAC,UAAU,CAAC,OAAO,CAAC,gBAAiB,CAAC,QAAQ,CAAC,CAAC;QAE9F,IAAI,IAAI,CAAC,IAAI,KAAK,uBAAuB,CAAC,IAAI,EAAE;YAC/C,IAAI,CAAC,iBAAiB,EAAE,CAAC;SACzB;IACF,CAAC;IAED,UAAU;QACT,aAAa,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAClD,CAAC;IAED,SAAS;QACR,aAAa,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACpD,CAAC;IAED,YAAY;QACX,IAAI,IAAI,CAAC,IAAI,KAAK,uBAAuB,CAAC,IAAI,EAAE;YAC/C,IAAI,CAAC,2BAA2B,EAAE,CAAC;YACnC,OAAO;SACP;QAED,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAC3E,CAAC;IAED,WAAW,CAAC,YAAsB;QACjC,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,EACvC,gBAAgB,GAAG,IAAI,CAAC,YAAY,CAAC;QAEtC,MAAM,IAAI,GAAG,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,EAC7D,YAAY,GAAG,YAAY,CAAC,CAAC,CAAC,oBAAkB,CAAC,kBAAkB,CAAC,CAAC,CAAC,oBAAkB,CAAC,WAAW,CAAC;QACtG,IAAI,QAAQ,GAAG,EAAE,CAAC;QAElB,IAAI,IAAI,IAAI,YAAY,CAAC,IAAI,EAAE;YAC9B,QAAQ,GAAG,oBAAkB,CAAC,KAAK,CAAC,IAAI,CAAC;SACzC;aAAM,IAAI,IAAI,IAAI,YAAY,CAAC,IAAI,EAAE;YACrC,QAAQ,GAAG,oBAAkB,CAAC,KAAK,CAAC,IAAI,CAAC;SACzC;aAAM,IAAI,IAAI,IAAI,YAAY,CAAC,MAAM,EAAE;YACvC,QAAQ,GAAG,oBAAkB,CAAC,KAAK,CAAC,MAAM,CAAC;SAC3C;aAAM;YACN,QAAQ,GAAG,oBAAkB,CAAC,KAAK,CAAC,KAAK,CAAC;SAC1C;QACD,MAAM,oBAAoB,GAAG,IAAI,CAAC,6BAA6B,CAAC,QAAQ,CAAC,EACxE,qBAAqB,GAAG,IAAI,CAAC,8BAA8B,CAAC,QAAQ,CAAC,CAAC;QACtE,8EAA8E;QAC9E,sFAAsF;QACvF,IAAI,CAAC,CAAC,oBAAoB,IAAI,eAAe,KAAK,oBAAoB;eAClE,qBAAqB,IAAI,gBAAgB,KAAK,qBAAqB,CAAC;eACpE,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC;eAC9D,IAAI,CAAC,8BAA8B,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC;eAC/D,IAAI,CAAC,eAAe,KAAK,QAAQ,EAAE;YACtC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;YACtB,IAAI,CAAC,6BAA6B,CAAC,QAAQ,CAAC,GAAG,eAAe,CAAC;YAC/D,IAAI,CAAC,8BAA8B,CAAC,QAAQ,CAAC,GAAG,gBAAgB,CAAC;YACjE,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC;SAChC;IACF,CAAC;IAED,eAAe;QACd,MAAM,GAAG,GAAG,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,2CAA2C,CAAC,CAAC;QACxF,IAAI,GAAG,EAAE;YACR,IAAI,IAAI,CAAC,aAAa,EAAE;gBACvB,GAAG,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;aACnD;iBAAM;gBACN,GAAG,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;aAClC;SACD;IACF,CAAC;IAED,2BAA2B;QAC1B,MAAM,mBAAmB,GAAiB,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,uCAAuC,CAAC,EAChH,YAAY,GAAG,mBAAmB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAEzD,IAAI,YAAY,EAAE;YACjB,mBAAmB,CAAC,SAAS,CAAC,MAAM,CAAC,kDAAkD,EAAE,KAAK,CAAC,CAAC;YAChG,IAAI,IAAI,CAAC,SAAS,EAAG,CAAC,YAAY,GAAG,IAAI,CAAC,SAAS,EAAG,CAAC,YAAY,EAAE;gBACpE,mBAAmB,CAAC,SAAS,CAAC,MAAM,CAAC,kDAAkD,EAAE,IAAI,CAAC,CAAC;gBAC/F,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;aAC3C;SACD;IACF,CAAC;IAED,gBAAgB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;IACxB,CAAC;IAED;;;;;OAKG;IACH,iBAAiB;QAChB,QAAQ,IAAI,CAAC,IAAI,EAAE;YACnB,KAAK,uBAAuB,CAAC,IAAI;gBAChC,IAAI,CAAC,KAAK,GAAG,oBAAkB,CAAC,KAAK,CAAC,IAAI,CAAC;gBAC3C,OAAO;YACR,KAAK,uBAAuB,CAAC,IAAI;gBAChC,IAAI,CAAC,KAAK,GAAG,oBAAkB,CAAC,KAAK,CAAC,IAAI,CAAC;gBAC3C,OAAO;YACR,KAAK,uBAAuB,CAAC,MAAM;gBAClC,IAAI,CAAC,KAAK,GAAG,oBAAkB,CAAC,KAAK,CAAC,MAAM,CAAC;gBAC7C,OAAO;YACR;gBACC,IAAI,CAAC,KAAK,GAAG,oBAAkB,CAAC,KAAK,CAAC,KAAK,CAAC;SAC5C;IACF,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,yBAAyB,CAAC,IAAI,CAAC,CAAC;IACxC,CAAC;IAED,IAAI,qBAAqB;QACxB,QAAQ,IAAI,CAAC,KAAK,EAAE;YACpB,KAAK,oBAAkB,CAAC,KAAK,CAAC,IAAI;gBACjC,OAAO,IAAI,CAAC,OAAO,CAAC;YACrB,KAAK,oBAAkB,CAAC,KAAK,CAAC,MAAM;gBACnC,OAAO,IAAI,CAAC,SAAS,CAAC;YACvB,KAAK,oBAAkB,CAAC,KAAK,CAAC,KAAK;gBAClC,OAAO,IAAI,CAAC,QAAQ,CAAC;YACtB;gBACC,OAAO,EAAE,CAAC;SACV;IACF,CAAC;IAED,IAAI,oBAAoB;QACvB,OAAO,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;IAC/B,CAAC;IAED,IAAI,iBAAiB;QACpB,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;IAC5B,CAAC;IAED,IAAI,kBAAkB;QACrB,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC;IACjE,CAAC;IAED,IAAI,oBAAoB;QACvB,OAAO,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,oBAAoB,CAAC;IAC1E,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAC/E,CAAC;IAED,IAAI,WAAW;QACd,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,oBAAoB,CAAC,CAAC;IACxF,CAAC;IAED,IAAI,UAAU;QACb,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,KAAK,oBAAkB,CAAC,KAAK,CAAC,IAAI,CAAC;IAC9E,CAAC;IAED,mBAAmB,CAAC,mBAA2B;QAC9C,mBAAmB,GAAG,mBAAmB,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QAEtJ,OAAO,mBAAmB,IAAI,uBAAuB,CAAC;IACvD,CAAC;CACD,CAAA;AA5VA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,uBAAuB,CAAC,YAAY,EAAE,CAAC;gDACjE;AAcd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,uBAAuB,EAAE,YAAY,EAAE,uBAAuB,CAAC,IAAI,EAAE,CAAC;gDACpD;AAYpC;IADC,QAAQ,EAAE;wDACW;AAUtB;IADC,QAAQ,EAAE;qDACQ;AAUnB;IADC,QAAQ,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;6DACJ;AAY3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,EAAE,CAAC;sDAC/B;AAS7B;IADC,QAAQ,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;mDACf;AASjB;IADC,QAAQ,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;oDACd;AASlB;IADC,QAAQ,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;qDACb;AAOnB;IADC,QAAQ,EAAE;iDACI;AAUf;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;iDACQ;AAUpC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;oDACE;AAO9B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;mDACpB;AArJpB,kBAAkB;IATvB,aAAa,CAAC;QACd,GAAG,EAAE,yBAAyB;QAC9B,aAAa,EAAE,IAAI;QACnB,UAAU,EAAE,IAAI;QAChB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,qBAAqB;QAC7B,QAAQ,EAAE,0BAA0B;QACpC,YAAY,EAAE,CAAC,KAAK,CAAC;KACrB,CAAC;GACI,kBAAkB,CA0XvB;AAED,kBAAkB,CAAC,MAAM,EAAE,CAAC;AAE5B,eAAe,kBAAkB,CAAC","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 ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { getIllustrationDataSync, getIllustrationData } from \"@ui5/webcomponents-base/dist/asset-registries/Illustrations.js\";\nimport { getEffectiveAriaLabelText } from \"@ui5/webcomponents-base/dist/util/AriaLabelHelper.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport Title from \"@ui5/webcomponents/dist/Title.js\";\nimport TitleLevel from \"@ui5/webcomponents/dist/types/TitleLevel.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport type IButton from \"@ui5/webcomponents/dist/Button.js\";\nimport IllustrationMessageSize from \"./types/IllustrationMessageSize.js\";\nimport IllustrationMessageType from \"./types/IllustrationMessageType.js\";\nimport \"./illustrations/BeforeSearch.js\";\n\n// Styles\nimport IllustratedMessageCss from \"./generated/themes/IllustratedMessage.css.js\";\n\n// Template\nimport IllustratedMessageTemplate from \"./generated/templates/IllustratedMessageTemplate.lit.js\";\n\nconst getEffectiveIllustrationName = (name: string): string => {\n\tif (name.startsWith(\"Tnt\")) {\n\t\treturn name.replace(\"Tnt\", \"tnt/\");\n\t}\n\n\tif (name.includes(\"/\")) {\n\t\treturn name;\n\t}\n\n\treturn `fiori/${name}`;\n};\n\n/*\n @class\n \n <h3 class=\"comment-api-title\">Overview</h3>\n * An IllustratedMessage is a recommended combination of a solution-oriented message, an engaging\n * illustration, and conversational tone to better communicate an empty or a success state than just show\n * a message alone.\n \n Each illustration has default internationalised title and subtitle texts. Also they can be managed with\n * <code>titleText</code> and <code>subtitleText</code> properties.\n \n To display the desired illustration, use the <code>name</code> property, where you can find the list of all available illustrations.\n * <br><br>\n * <b>Note:</b> By default the “BeforeSearch” illustration is loaded. To use other illustrations, make sure you import them in addition, for example:\n * <br>\n * <code>import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\"</code>\n * <br>\n * <b>Note:</b> Illustrations starting with the “Tnt” prefix are part of another illustration set. For example to use the “TntSuccess” illustration, add the following import::\n * <br>\n * <code>import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/Success.js\"</code>\n \n <h3>Structure</h3>\n * The IllustratedMessage consists of the following elements, which are displayed below each other in the following order:\n * <br>\n * <ul>\n * <li>Illustration</li>\n * <li>Title</li>\n * <li>Subtitle</li>\n * <li>Actions</li>\n * </ul>\n \n <h3>Usage</h3>\n * <code>ui5-illustrated-message</code> is meant to be used inside container component, for example a <code>ui5-card</code>,\n * a <code>ui5-dialog</code> or a <code>ui5-page</code>\n \n <h3>ES6 Module Import</h3>\n \n <code>import \"@ui5/webcomponents-fiori/dist/IllustratedMessage.js\";</code>\n \n @csspart subtitle - Used to style the subtitle wrapper of the <code>ui5-illustrated-message</code>\n \n @constructor\n * @extends UI5Element\n * @public\n * @since 1.0.0-rc.15\n /\n\n@customElement({\n\ttag: \"ui5-illustrated-message\",\n\tlanguageAware: true,\n\tthemeAware: true,\n\trenderer: litRender,\n\tstyles: IllustratedMessageCss,\n\ttemplate: IllustratedMessageTemplate,\n\tdependencies: [Title],\n})\nclass IllustratedMessage extends UI5Element {\n\t/\n\t Defines the illustration name that will be displayed in the component.\n\t* <br>\n\t* Example:\n\t* <br>\n\t* <code>name='BeforeSearch'</code>, <code>name='UnableToUpload'</code>, etc..\n\t* <br>\n\t* <br>\n\t* <b>Note:</b> To use the TNT illustrations,\n\t* you need to set the <code>tnt</code> or <code>Tnt</code> prefix in front of the icon's name.\n\t* <br>\n\t* Example:\n\t* <br>\n\t* <code>name='tnt/Avatar'</code> or <code>name='TntAvatar'</code>.\n\t* <br>\n\t* <br>\n\t* <b>Note:</b> By default the <code>BeforeSearch</code> illustration is loaded.\n\t* When using an illustration type, other than the default, it should be loaded in addition:\n\t* <br>\n\t* <code>import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\";</code>\n\t* <br>\n\t* <br>\n\t* For TNT illustrations:\n\t* <br>\n\t* <code>import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/SessionExpired.js\";</code>\n\t* @default \"BeforeSearch\"\n\t* @public\n\t/\n\t@property({ type: String, defaultValue: IllustrationMessageType.BeforeSearch })\n\tname!: string;\n\n\t/\n\t Determines which illustration breakpoint variant is used.\n\t* <br><br>\n\t\n\t As <code>IllustratedMessage</code> adapts itself around the <code>Illustration</code>, the other\n\t* elements of the component are displayed differently on the different breakpoints/illustration sizes.\n\t\n\t @default \"Auto\"\n\t* @public\n\t* @since 1.5.0\n\t/\n\t@property({ type: IllustrationMessageSize, defaultValue: IllustrationMessageSize.Auto })\n\tsize!: `${IllustrationMessageSize}`;\n\n\t/\n\t Defines the subtitle of the component.\n\t* <br><br>\n\t* <b>Note:</b> Using this property, the default subtitle text of illustration will be overwritten.\n\t* <br><br>\n\t* <b>Note:</b> Using <code>subtitle</code> slot, the default of this property will be overwritten.\n\t* @default \"\"\n\t* @public\n\t/\n\t@property()\n\tsubtitleText!: string;\n\n\t/\n\t Defines the title of the component.\n\t* <br><br>\n\t* <b>Note:</b> Using this property, the default title text of illustration will be overwritten.\n\t* @default \"\"\n\t* @public\n\t/\n\t@property()\n\ttitleText!: string;\n\n\t/\n\t Receives id(or many ids) of the elements that label the component.\n\t\n\t @default \"\"\n\t* @public\n\t* @since 1.7.0\n\t/\n\t@property({ defaultValue: \"\" })\n\taccessibleNameRef!: string;\n\n\t/\n\t Defines the semantic level of the title.\n\t\n\t <b>Note:</b> Used for accessibility purposes only.\n\t\n\t @default \"H2\"\n\t* @public\n\t* @since 1.20.0\n\t/\n\t@property({ type: TitleLevel, defaultValue: TitleLevel.H2 })\n\ttitleLevel!: `${TitleLevel}`;\n\n\t/\n\t Illustration breakpoint variant for the <code>Spot</code> size.\n\t\n\t @private\n\t* @since 1.9.0\n\t/\n\t@property({ noAttribute: true })\n\tspotSvg!: string;\n\n\t/\n\t Illustration breakpoint variant for the <code>Scene</code> size.\n\t\n\t @private\n\t* @since 1.9.0\n\t/\n\t@property({ noAttribute: true })\n\tsceneSvg!: string;\n\n\t/\n\t Illustration breakpoint variant for the <code>Dialog</code> size.\n\t\n\t @private\n\t* @since 1.9.0\n\t/\n\t@property({ noAttribute: true })\n\tdialogSvg!: string;\n\n\t/\n\t Determinates what is the current media of the component based on its width.\n\t* @private\n\t/\n\t@property()\n\tmedia!: string;\n\n\t/\n\t Defines the title of the component.\n\t* <br><br>\n\t* <b>Note:</b> Using this slot, the default title text of illustration and the value of <code>title</code> property will be overwritten.\n\t* @public\n\t* @since 1.7.0\n\t/\n\t@slot({ type: HTMLElement })\n\ttitle!: Array<HTMLElement> & string; // Note: since title collides with HTMLElement's title attribute and it's a String, we're adding the \"& string\" to the type Array<HTMLElement> to avoid ts complains. In the future we will rename/deprecate this slot name, so that it doesn't collide with HTMLElement's title attribute.\n\n\t/\n\t Defines the subtitle of the component.\n\t* <br><br>\n\t* <b>Note:</b> Using this slot, the default subtitle text of illustration and the value of <code>subtitleText</code> property will be overwritten.\n\t* @public\n\t* @since 1.0.0-rc.16\n\t/\n\t@slot({ type: HTMLElement })\n\tsubtitle!: Array<HTMLElement>;\n\n\t/\n\t Defines the component actions.\n\t* @public\n\t/\n\t@slot({ type: HTMLElement, \"default\": true })\n\tactions!: Array<IButton>;\n\n\tillustrationTitle?: string;\n\tillustrationSubtitle?: string;\n\n\tstatic i18nBundle: I18nBundle;\n\t_lastKnownOffsetWidthForMedia: Record<string, number>;\n\t_lastKnownOffsetHeightForMedia: Record<string, number>;\n\t_lastKnownMedia: string;\n\t_handleResize: ResizeObserverCallback;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._handleResize = this.handleResize.bind(this);\n\t\t// this will store the last known offsetWidth of the IllustratedMessage DOM node for a given media (e.g. \"Spot\")\n\t\tthis._lastKnownOffsetWidthForMedia = {};\n\t\tthis._lastKnownOffsetHeightForMedia = {};\n\t\t// this will store the last known media, in order to detect if IllustratedMessage has been hidden by expand/collapse container\n\t\tthis._lastKnownMedia = \"base\";\n\t}\n\n\tstatic async onDefine() {\n\t\tIllustratedMessage.i18nBundle = await getI18nBundle(\"@ui5/webcomponents-fiori\");\n\t}\n\n\tstatic get BREAKPOINTS() {\n\t\treturn {\n\t\t\tDIALOG: 679,\n\t\t\tSPOT: 319,\n\t\t\tBASE: 259,\n\t\t};\n\t}\n\n\tstatic get BREAKPOINTS_HEIGHT() {\n\t\treturn {\n\t\t\tDIALOG: 451,\n\t\t\tSPOT: 296,\n\t\t\tBASE: 87,\n\t\t};\n\t}\n\n\tstatic get MEDIA() {\n\t\treturn {\n\t\t\tBASE: \"base\",\n\t\t\tSPOT: \"spot\",\n\t\t\tDIALOG: \"dialog\",\n\t\t\tSCENE: \"scene\",\n\t\t};\n\t}\n\n\tasync onBeforeRendering() {\n\t\t// Gets the current illustration name given in the \"name\" attribute\n\t\tlet effectiveName = getEffectiveIllustrationName(this.name);\n\t\tlet illustrationData = getIllustrationDataSync(effectiveName);\n\n\t\tif (this.hasAttribute(\"name\") && !this.isValidIllustration(effectiveName)) {\n\t\t\teffectiveName = getEffectiveIllustrationName(IllustrationMessageType.BeforeSearch);\n\t\t\t// eslint-disable-next-line\n\t\t\tconsole.warn(`The illustration \"${effectiveName!}\" does not exist. The default illustration \"${IllustrationMessageType.BeforeSearch}\" is loaded instead.`);\n\t\t}\n\n\t\tif (illustrationData === undefined) {\n\t\t\tillustrationData = await getIllustrationData(effectiveName);\n\t\t}\n\n\t\tthis.spotSvg = illustrationData!.spotSvg;\n\t\tthis.dialogSvg = illustrationData!.dialogSvg;\n\t\tthis.sceneSvg = illustrationData!.sceneSvg;\n\n\t\tthis.illustrationTitle = IllustratedMessage.i18nBundle.getText(illustrationData!.title);\n\t\tthis.illustrationSubtitle = IllustratedMessage.i18nBundle.getText(illustrationData!.subtitle);\n\n\t\tif (this.size !== IllustrationMessageSize.Auto) {\n\t\t\tthis._handleCustomSize();\n\t\t}\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._handleResize);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._handleResize);\n\t}\n\n\thandleResize() {\n\t\tif (this.size !== IllustrationMessageSize.Auto) {\n\t\t\tthis._adjustHeightToFitContainer();\n\t\t\treturn;\n\t\t}\n\n\t\tthis._applyMedia();\n\t\twindow.requestAnimationFrame(this._adjustHeightToFitContainer.bind(this));\n\t}\n\n\t_applyMedia(heightChange?: boolean) {\n\t\tconst currOffsetWidth = this.offsetWidth,\n\t\t\tcurrOffsetHeight = this.offsetHeight;\n\n\t\tconst size = heightChange ? currOffsetHeight : currOffsetWidth,\n\t\t\toBreakpounts = heightChange ? IllustratedMessage.BREAKPOINTS_HEIGHT : IllustratedMessage.BREAKPOINTS;\n\t\tlet newMedia = \"\";\n\n\t\tif (size <= oBreakpounts.BASE) {\n\t\t\tnewMedia = IllustratedMessage.MEDIA.BASE;\n\t\t} else if (size <= oBreakpounts.SPOT) {\n\t\t\tnewMedia = IllustratedMessage.MEDIA.SPOT;\n\t\t} else if (size <= oBreakpounts.DIALOG) {\n\t\t\tnewMedia = IllustratedMessage.MEDIA.DIALOG;\n\t\t} else {\n\t\t\tnewMedia = IllustratedMessage.MEDIA.SCENE;\n\t\t}\n\t\tconst lastKnownOffsetWidth = this._lastKnownOffsetWidthForMedia[newMedia],\n\t\t\tlastKnownOffsetHeight = this._lastKnownOffsetHeightForMedia[newMedia];\n\t\t // prevents infinite resizing, when same width is detected for the same media,\n\t\t // excluding the case in which, the control is placed inside expand/collapse container\n\t\tif (!(lastKnownOffsetWidth && currOffsetWidth === lastKnownOffsetWidth\n\t\t\t&& lastKnownOffsetHeight && currOffsetHeight === lastKnownOffsetHeight)\n\t\t\t\|\| this._lastKnownOffsetWidthForMedia[this._lastKnownMedia] === 0\n\t\t\t\|\| this._lastKnownOffsetHeightForMedia[this._lastKnownMedia] === 0\n\t\t\t\|\| this._lastKnownMedia !== newMedia) {\n\t\t\tthis.media = newMedia;\n\t\t\tthis._lastKnownOffsetWidthForMedia[newMedia] = currOffsetWidth;\n\t\t\tthis._lastKnownOffsetHeightForMedia[newMedia] = currOffsetHeight;\n\t\t\tthis._lastKnownMedia = newMedia;\n\t\t}\n\t}\n\n\t_setSVGAccAttrs() {\n\t\tconst svg = this.shadowRoot!.querySelector(\".ui5-illustrated-message-illustration svg\");\n\t\tif (svg) {\n\t\t\tif (this.ariaLabelText) {\n\t\t\t\tsvg.setAttribute(\"aria-label\", this.ariaLabelText);\n\t\t\t} else {\n\t\t\t\tsvg.removeAttribute(\"aria-label\");\n\t\t\t}\n\t\t}\n\t}\n\n\t_adjustHeightToFitContainer() {\n\t\tconst illustrationWrapper = <HTMLElement> this.shadowRoot!.querySelector(\".ui5-illustrated-message-illustration\"),\n\t\t\tillustration = illustrationWrapper.querySelector(\"svg\");\n\n\t\tif (illustration) {\n\t\t\tillustrationWrapper.classList.toggle(\"ui5-illustrated-message-illustration-fit-content\", false);\n\t\t\tif (this.getDomRef()!.scrollHeight > this.getDomRef()!.offsetHeight) {\n\t\t\t\tillustrationWrapper.classList.toggle(\"ui5-illustrated-message-illustration-fit-content\", true);\n\t\t\t\tthis._applyMedia(true / height change /);\n\t\t\t}\n\t\t}\n\t}\n\n\tonAfterRendering() {\n\t\tthis._setSVGAccAttrs();\n\t}\n\n\t/\n\t Modifies the IM styles in accordance to the `size` property's value.\n\t * Note: The resize handler has no effect when size is different than \"Auto\".\n\t * @private\n\t * @since 1.5.0\n\t */\n\t_handleCustomSize() {\n\t\tswitch (this.size) {\n\t\tcase IllustrationMessageSize.Base:\n\t\t\tthis.media = IllustratedMessage.MEDIA.BASE;\n\t\t\treturn;\n\t\tcase IllustrationMessageSize.Spot:\n\t\t\tthis.media = IllustratedMessage.MEDIA.SPOT;\n\t\t\treturn;\n\t\tcase IllustrationMessageSize.Dialog:\n\t\t\tthis.media = IllustratedMessage.MEDIA.DIALOG;\n\t\t\treturn;\n\t\tdefault:\n\t\t\tthis.media = IllustratedMessage.MEDIA.SCENE;\n\t\t}\n\t}\n\n\tget ariaLabelText(): string \| undefined {\n\t\treturn getEffectiveAriaLabelText(this);\n\t}\n\n\tget effectiveIllustration(): string {\n\t\tswitch (this.media) {\n\t\tcase IllustratedMessage.MEDIA.SPOT:\n\t\t\treturn this.spotSvg;\n\t\tcase IllustratedMessage.MEDIA.DIALOG:\n\t\t\treturn this.dialogSvg;\n\t\tcase IllustratedMessage.MEDIA.SCENE:\n\t\t\treturn this.sceneSvg;\n\t\tdefault:\n\t\t\treturn \"\";\n\t\t}\n\t}\n\n\tget hasFormattedSubtitle(): boolean {\n\t\treturn !!this.subtitle.length;\n\t}\n\n\tget hasFormattedTitle(): boolean {\n\t\treturn !!this.title.length;\n\t}\n\n\tget effectiveTitleText(): string \| undefined {\n\t\treturn this.titleText ? this.titleText : this.illustrationTitle;\n\t}\n\n\tget effectiveSubitleText(): string \| undefined {\n\t\treturn this.subtitleText ? this.subtitleText : this.illustrationSubtitle;\n\t}\n\n\tget hasTitle(): boolean {\n\t\treturn !!(this.hasFormattedTitle \|\| this.titleText \|\| this.illustrationTitle);\n\t}\n\n\tget hasSubtitle(): boolean {\n\t\treturn !!(this.hasFormattedSubtitle \|\| this.subtitleText \|\| this.illustrationSubtitle);\n\t}\n\n\tget hasActions(): boolean {\n\t\treturn !!this.actions.length && this.media !== IllustratedMessage.MEDIA.BASE;\n\t}\n\n\tisValidIllustration(currentIllustration: string): boolean {\n\t\tcurrentIllustration = currentIllustration.startsWith(\"tnt/\") ? currentIllustration.replace(\"tnt/\", \"Tnt\") : currentIllustration.replace(\"fiori/\", \"\");\n\n\t\treturn currentIllustration in IllustrationMessageType;\n\t}\n}\n\nIllustratedMessage.define();\n\nexport default IllustratedMessage;\n"]}
1	+ {"version":3,"file":"IllustratedMessage.js","sourceRoot":"","sources":["../src/IllustratedMessage.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 ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { getIllustrationDataSync, getIllustrationData } from \"@ui5/webcomponents-base/dist/asset-registries/Illustrations.js\";\nimport { getEffectiveAriaLabelText } from \"@ui5/webcomponents-base/dist/util/AriaLabelHelper.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport Title from \"@ui5/webcomponents/dist/Title.js\";\nimport TitleLevel from \"@ui5/webcomponents/dist/types/TitleLevel.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport type { IButton } from \"@ui5/webcomponents/dist/Button.js\";\nimport IllustrationMessageSize from \"./types/IllustrationMessageSize.js\";\nimport IllustrationMessageType from \"./types/IllustrationMessageType.js\";\nimport \"./illustrations/BeforeSearch.js\";\n\n// Styles\nimport IllustratedMessageCss from \"./generated/themes/IllustratedMessage.css.js\";\n\n// Template\nimport IllustratedMessageTemplate from \"./generated/templates/IllustratedMessageTemplate.lit.js\";\n\nconst getEffectiveIllustrationName = (name: string): string => {\n\tif (name.startsWith(\"Tnt\")) {\n\t\treturn name.replace(\"Tnt\", \"tnt/\");\n\t}\n\n\tif (name.includes(\"/\")) {\n\t\treturn name;\n\t}\n\n\treturn `fiori/${name}`;\n};\n\n/*\n @class\n \n <h3 class=\"comment-api-title\">Overview</h3>\n * An IllustratedMessage is a recommended combination of a solution-oriented message, an engaging\n * illustration, and conversational tone to better communicate an empty or a success state than just show\n * a message alone.\n \n Each illustration has default internationalised title and subtitle texts. Also they can be managed with\n * <code>titleText</code> and <code>subtitleText</code> properties.\n \n To display the desired illustration, use the <code>name</code> property, where you can find the list of all available illustrations.\n * <br><br>\n * <b>Note:</b> By default the “BeforeSearch” illustration is loaded. To use other illustrations, make sure you import them in addition, for example:\n * <br>\n * <code>import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\"</code>\n * <br>\n * <b>Note:</b> Illustrations starting with the “Tnt” prefix are part of another illustration set. For example to use the “TntSuccess” illustration, add the following import::\n * <br>\n * <code>import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/Success.js\"</code>\n \n <h3>Structure</h3>\n * The IllustratedMessage consists of the following elements, which are displayed below each other in the following order:\n * <br>\n * <ul>\n * <li>Illustration</li>\n * <li>Title</li>\n * <li>Subtitle</li>\n * <li>Actions</li>\n * </ul>\n \n <h3>Usage</h3>\n * <code>ui5-illustrated-message</code> is meant to be used inside container component, for example a <code>ui5-card</code>,\n * a <code>ui5-dialog</code> or a <code>ui5-page</code>\n \n <h3>ES6 Module Import</h3>\n \n <code>import \"@ui5/webcomponents-fiori/dist/IllustratedMessage.js\";</code>\n \n @csspart subtitle - Used to style the subtitle wrapper of the <code>ui5-illustrated-message</code>\n \n @constructor\n * @extends UI5Element\n * @public\n * @since 1.0.0-rc.15\n /\n\n@customElement({\n\ttag: \"ui5-illustrated-message\",\n\tlanguageAware: true,\n\tthemeAware: true,\n\trenderer: litRender,\n\tstyles: IllustratedMessageCss,\n\ttemplate: IllustratedMessageTemplate,\n\tdependencies: [Title],\n})\nclass IllustratedMessage extends UI5Element {\n\t/\n\t Defines the illustration name that will be displayed in the component.\n\t* <br>\n\t* Example:\n\t* <br>\n\t* <code>name='BeforeSearch'</code>, <code>name='UnableToUpload'</code>, etc..\n\t* <br>\n\t* <br>\n\t* <b>Note:</b> To use the TNT illustrations,\n\t* you need to set the <code>tnt</code> or <code>Tnt</code> prefix in front of the icon's name.\n\t* <br>\n\t* Example:\n\t* <br>\n\t* <code>name='tnt/Avatar'</code> or <code>name='TntAvatar'</code>.\n\t* <br>\n\t* <br>\n\t* <b>Note:</b> By default the <code>BeforeSearch</code> illustration is loaded.\n\t* When using an illustration type, other than the default, it should be loaded in addition:\n\t* <br>\n\t* <code>import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\";</code>\n\t* <br>\n\t* <br>\n\t* For TNT illustrations:\n\t* <br>\n\t* <code>import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/SessionExpired.js\";</code>\n\t* @default \"BeforeSearch\"\n\t* @public\n\t/\n\t@property({ type: String, defaultValue: IllustrationMessageType.BeforeSearch })\n\tname!: string;\n\n\t/\n\t Determines which illustration breakpoint variant is used.\n\t* <br><br>\n\t\n\t As <code>IllustratedMessage</code> adapts itself around the <code>Illustration</code>, the other\n\t* elements of the component are displayed differently on the different breakpoints/illustration sizes.\n\t\n\t @default \"Auto\"\n\t* @public\n\t* @since 1.5.0\n\t/\n\t@property({ type: IllustrationMessageSize, defaultValue: IllustrationMessageSize.Auto })\n\tsize!: `${IllustrationMessageSize}`;\n\n\t/\n\t Defines the subtitle of the component.\n\t* <br><br>\n\t* <b>Note:</b> Using this property, the default subtitle text of illustration will be overwritten.\n\t* <br><br>\n\t* <b>Note:</b> Using <code>subtitle</code> slot, the default of this property will be overwritten.\n\t* @default \"\"\n\t* @public\n\t/\n\t@property()\n\tsubtitleText!: string;\n\n\t/\n\t Defines the title of the component.\n\t* <br><br>\n\t* <b>Note:</b> Using this property, the default title text of illustration will be overwritten.\n\t* @default \"\"\n\t* @public\n\t/\n\t@property()\n\ttitleText!: string;\n\n\t/\n\t Receives id(or many ids) of the elements that label the component.\n\t\n\t @default \"\"\n\t* @public\n\t* @since 1.7.0\n\t/\n\t@property({ defaultValue: \"\" })\n\taccessibleNameRef!: string;\n\n\t/\n\t Defines the semantic level of the title.\n\t\n\t <b>Note:</b> Used for accessibility purposes only.\n\t\n\t @default \"H2\"\n\t* @public\n\t* @since 1.20.0\n\t/\n\t@property({ type: TitleLevel, defaultValue: TitleLevel.H2 })\n\ttitleLevel!: `${TitleLevel}`;\n\n\t/\n\t Illustration breakpoint variant for the <code>Spot</code> size.\n\t\n\t @private\n\t* @since 1.9.0\n\t/\n\t@property({ noAttribute: true })\n\tspotSvg!: string;\n\n\t/\n\t Illustration breakpoint variant for the <code>Scene</code> size.\n\t\n\t @private\n\t* @since 1.9.0\n\t/\n\t@property({ noAttribute: true })\n\tsceneSvg!: string;\n\n\t/\n\t Illustration breakpoint variant for the <code>Dialog</code> size.\n\t\n\t @private\n\t* @since 1.9.0\n\t/\n\t@property({ noAttribute: true })\n\tdialogSvg!: string;\n\n\t/\n\t Determinates what is the current media of the component based on its width.\n\t* @private\n\t/\n\t@property()\n\tmedia!: string;\n\n\t/\n\t Defines the title of the component.\n\t* <br><br>\n\t* <b>Note:</b> Using this slot, the default title text of illustration and the value of <code>title</code> property will be overwritten.\n\t* @public\n\t* @since 1.7.0\n\t/\n\t@slot({ type: HTMLElement })\n\ttitle!: Array<HTMLElement> & string; // Note: since title collides with HTMLElement's title attribute and it's a String, we're adding the \"& string\" to the type Array<HTMLElement> to avoid ts complains. In the future we will rename/deprecate this slot name, so that it doesn't collide with HTMLElement's title attribute.\n\n\t/\n\t Defines the subtitle of the component.\n\t* <br><br>\n\t* <b>Note:</b> Using this slot, the default subtitle text of illustration and the value of <code>subtitleText</code> property will be overwritten.\n\t* @public\n\t* @since 1.0.0-rc.16\n\t/\n\t@slot({ type: HTMLElement })\n\tsubtitle!: Array<HTMLElement>;\n\n\t/\n\t Defines the component actions.\n\t* @public\n\t/\n\t@slot({ type: HTMLElement, \"default\": true })\n\tactions!: Array<IButton>;\n\n\tillustrationTitle?: string;\n\tillustrationSubtitle?: string;\n\n\tstatic i18nBundle: I18nBundle;\n\t_lastKnownOffsetWidthForMedia: Record<string, number>;\n\t_lastKnownOffsetHeightForMedia: Record<string, number>;\n\t_lastKnownMedia: string;\n\t_handleResize: ResizeObserverCallback;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._handleResize = this.handleResize.bind(this);\n\t\t// this will store the last known offsetWidth of the IllustratedMessage DOM node for a given media (e.g. \"Spot\")\n\t\tthis._lastKnownOffsetWidthForMedia = {};\n\t\tthis._lastKnownOffsetHeightForMedia = {};\n\t\t// this will store the last known media, in order to detect if IllustratedMessage has been hidden by expand/collapse container\n\t\tthis._lastKnownMedia = \"base\";\n\t}\n\n\tstatic async onDefine() {\n\t\tIllustratedMessage.i18nBundle = await getI18nBundle(\"@ui5/webcomponents-fiori\");\n\t}\n\n\tstatic get BREAKPOINTS() {\n\t\treturn {\n\t\t\tDIALOG: 679,\n\t\t\tSPOT: 319,\n\t\t\tBASE: 259,\n\t\t};\n\t}\n\n\tstatic get BREAKPOINTS_HEIGHT() {\n\t\treturn {\n\t\t\tDIALOG: 451,\n\t\t\tSPOT: 296,\n\t\t\tBASE: 87,\n\t\t};\n\t}\n\n\tstatic get MEDIA() {\n\t\treturn {\n\t\t\tBASE: \"base\",\n\t\t\tSPOT: \"spot\",\n\t\t\tDIALOG: \"dialog\",\n\t\t\tSCENE: \"scene\",\n\t\t};\n\t}\n\n\tasync onBeforeRendering() {\n\t\t// Gets the current illustration name given in the \"name\" attribute\n\t\tlet effectiveName = getEffectiveIllustrationName(this.name);\n\t\tlet illustrationData = getIllustrationDataSync(effectiveName);\n\n\t\tif (this.hasAttribute(\"name\") && !this.isValidIllustration(effectiveName)) {\n\t\t\teffectiveName = getEffectiveIllustrationName(IllustrationMessageType.BeforeSearch);\n\t\t\t// eslint-disable-next-line\n\t\t\tconsole.warn(`The illustration \"${effectiveName!}\" does not exist. The default illustration \"${IllustrationMessageType.BeforeSearch}\" is loaded instead.`);\n\t\t}\n\n\t\tif (illustrationData === undefined) {\n\t\t\tillustrationData = await getIllustrationData(effectiveName);\n\t\t}\n\n\t\tthis.spotSvg = illustrationData!.spotSvg;\n\t\tthis.dialogSvg = illustrationData!.dialogSvg;\n\t\tthis.sceneSvg = illustrationData!.sceneSvg;\n\n\t\tthis.illustrationTitle = IllustratedMessage.i18nBundle.getText(illustrationData!.title);\n\t\tthis.illustrationSubtitle = IllustratedMessage.i18nBundle.getText(illustrationData!.subtitle);\n\n\t\tif (this.size !== IllustrationMessageSize.Auto) {\n\t\t\tthis._handleCustomSize();\n\t\t}\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._handleResize);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._handleResize);\n\t}\n\n\thandleResize() {\n\t\tif (this.size !== IllustrationMessageSize.Auto) {\n\t\t\tthis._adjustHeightToFitContainer();\n\t\t\treturn;\n\t\t}\n\n\t\tthis._applyMedia();\n\t\twindow.requestAnimationFrame(this._adjustHeightToFitContainer.bind(this));\n\t}\n\n\t_applyMedia(heightChange?: boolean) {\n\t\tconst currOffsetWidth = this.offsetWidth,\n\t\t\tcurrOffsetHeight = this.offsetHeight;\n\n\t\tconst size = heightChange ? currOffsetHeight : currOffsetWidth,\n\t\t\toBreakpounts = heightChange ? IllustratedMessage.BREAKPOINTS_HEIGHT : IllustratedMessage.BREAKPOINTS;\n\t\tlet newMedia = \"\";\n\n\t\tif (size <= oBreakpounts.BASE) {\n\t\t\tnewMedia = IllustratedMessage.MEDIA.BASE;\n\t\t} else if (size <= oBreakpounts.SPOT) {\n\t\t\tnewMedia = IllustratedMessage.MEDIA.SPOT;\n\t\t} else if (size <= oBreakpounts.DIALOG) {\n\t\t\tnewMedia = IllustratedMessage.MEDIA.DIALOG;\n\t\t} else {\n\t\t\tnewMedia = IllustratedMessage.MEDIA.SCENE;\n\t\t}\n\t\tconst lastKnownOffsetWidth = this._lastKnownOffsetWidthForMedia[newMedia],\n\t\t\tlastKnownOffsetHeight = this._lastKnownOffsetHeightForMedia[newMedia];\n\t\t // prevents infinite resizing, when same width is detected for the same media,\n\t\t // excluding the case in which, the control is placed inside expand/collapse container\n\t\tif (!(lastKnownOffsetWidth && currOffsetWidth === lastKnownOffsetWidth\n\t\t\t&& lastKnownOffsetHeight && currOffsetHeight === lastKnownOffsetHeight)\n\t\t\t\|\| this._lastKnownOffsetWidthForMedia[this._lastKnownMedia] === 0\n\t\t\t\|\| this._lastKnownOffsetHeightForMedia[this._lastKnownMedia] === 0\n\t\t\t\|\| this._lastKnownMedia !== newMedia) {\n\t\t\tthis.media = newMedia;\n\t\t\tthis._lastKnownOffsetWidthForMedia[newMedia] = currOffsetWidth;\n\t\t\tthis._lastKnownOffsetHeightForMedia[newMedia] = currOffsetHeight;\n\t\t\tthis._lastKnownMedia = newMedia;\n\t\t}\n\t}\n\n\t_setSVGAccAttrs() {\n\t\tconst svg = this.shadowRoot!.querySelector(\".ui5-illustrated-message-illustration svg\");\n\t\tif (svg) {\n\t\t\tif (this.ariaLabelText) {\n\t\t\t\tsvg.setAttribute(\"aria-label\", this.ariaLabelText);\n\t\t\t} else {\n\t\t\t\tsvg.removeAttribute(\"aria-label\");\n\t\t\t}\n\t\t}\n\t}\n\n\t_adjustHeightToFitContainer() {\n\t\tconst illustrationWrapper = <HTMLElement> this.shadowRoot!.querySelector(\".ui5-illustrated-message-illustration\"),\n\t\t\tillustration = illustrationWrapper.querySelector(\"svg\");\n\n\t\tif (illustration) {\n\t\t\tillustrationWrapper.classList.toggle(\"ui5-illustrated-message-illustration-fit-content\", false);\n\t\t\tif (this.getDomRef()!.scrollHeight > this.getDomRef()!.offsetHeight) {\n\t\t\t\tillustrationWrapper.classList.toggle(\"ui5-illustrated-message-illustration-fit-content\", true);\n\t\t\t\tthis._applyMedia(true / height change /);\n\t\t\t}\n\t\t}\n\t}\n\n\tonAfterRendering() {\n\t\tthis._setSVGAccAttrs();\n\t}\n\n\t/\n\t Modifies the IM styles in accordance to the `size` property's value.\n\t * Note: The resize handler has no effect when size is different than \"Auto\".\n\t * @private\n\t * @since 1.5.0\n\t */\n\t_handleCustomSize() {\n\t\tswitch (this.size) {\n\t\tcase IllustrationMessageSize.Base:\n\t\t\tthis.media = IllustratedMessage.MEDIA.BASE;\n\t\t\treturn;\n\t\tcase IllustrationMessageSize.Spot:\n\t\t\tthis.media = IllustratedMessage.MEDIA.SPOT;\n\t\t\treturn;\n\t\tcase IllustrationMessageSize.Dialog:\n\t\t\tthis.media = IllustratedMessage.MEDIA.DIALOG;\n\t\t\treturn;\n\t\tdefault:\n\t\t\tthis.media = IllustratedMessage.MEDIA.SCENE;\n\t\t}\n\t}\n\n\tget ariaLabelText(): string \| undefined {\n\t\treturn getEffectiveAriaLabelText(this);\n\t}\n\n\tget effectiveIllustration(): string {\n\t\tswitch (this.media) {\n\t\tcase IllustratedMessage.MEDIA.SPOT:\n\t\t\treturn this.spotSvg;\n\t\tcase IllustratedMessage.MEDIA.DIALOG:\n\t\t\treturn this.dialogSvg;\n\t\tcase IllustratedMessage.MEDIA.SCENE:\n\t\t\treturn this.sceneSvg;\n\t\tdefault:\n\t\t\treturn \"\";\n\t\t}\n\t}\n\n\tget hasFormattedSubtitle(): boolean {\n\t\treturn !!this.subtitle.length;\n\t}\n\n\tget hasFormattedTitle(): boolean {\n\t\treturn !!this.title.length;\n\t}\n\n\tget effectiveTitleText(): string \| undefined {\n\t\treturn this.titleText ? this.titleText : this.illustrationTitle;\n\t}\n\n\tget effectiveSubitleText(): string \| undefined {\n\t\treturn this.subtitleText ? this.subtitleText : this.illustrationSubtitle;\n\t}\n\n\tget hasTitle(): boolean {\n\t\treturn !!(this.hasFormattedTitle \|\| this.titleText \|\| this.illustrationTitle);\n\t}\n\n\tget hasSubtitle(): boolean {\n\t\treturn !!(this.hasFormattedSubtitle \|\| this.subtitleText \|\| this.illustrationSubtitle);\n\t}\n\n\tget hasActions(): boolean {\n\t\treturn !!this.actions.length && this.media !== IllustratedMessage.MEDIA.BASE;\n\t}\n\n\tisValidIllustration(currentIllustration: string): boolean {\n\t\tcurrentIllustration = currentIllustration.startsWith(\"tnt/\") ? currentIllustration.replace(\"tnt/\", \"Tnt\") : currentIllustration.replace(\"fiori/\", \"\");\n\n\t\treturn currentIllustration in IllustrationMessageType;\n\t}\n}\n\nIllustratedMessage.define();\n\nexport default IllustratedMessage;\n"]}

package/dist/MediaGallery.d.ts CHANGED Viewed

@@ -5,12 +5,24 @@ import type { CarouselNavigateEventDetail } from "@ui5/webcomponents/dist/Carous
 import Carousel from "@ui5/webcomponents/dist/Carousel.js";
 import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import MediaGalleryItem from "./MediaGalleryItem.js";
+import MediaGalleryItemLayout from "./types/MediaGalleryItemLayout.js";
 import MediaGalleryLayout from "./types/MediaGalleryLayout.js";
 import MediaGalleryMenuHorizontalAlign from "./types/MediaGalleryMenuHorizontalAlign.js";
 import MediaGalleryMenuVerticalAlign from "./types/MediaGalleryMenuVerticalAlign.js";
-import type IMediaGalleryItem from "./MediaGalleryItem.js";
+/**
+ * Interface for components that can be slotted inside <code>ui5-media-gallery</code> as items.
+ *
+ * @public
+ */
+interface IMediaGalleryItem extends HTMLElement, ITabbable {
+    selected: boolean;
+    disabled: boolean;
+    focused: boolean;
+    displayedContent: HTMLElement | null;
+    layout: `${MediaGalleryItemLayout}`;
+}
 type MediaGallerySelectionChangeEventDetail = {
-    item: MediaGalleryItem;
+    item: IMediaGalleryItem;
 };
 /**
  * @class
@@ -131,14 +143,14 @@ declare class MediaGallery extends UI5Element {
     items: Array<IMediaGalleryItem>;
     _itemNavigation: ItemNavigation;
     _onResize: () => void;
-    _selectedItem?: MediaGalleryItem;
+    _selectedItem?: IMediaGalleryItem;
     constructor();
     onEnterDOM(): void;
     onExitDOM(): void;
     onAfterRendering(): void;
     _updateSelection(): void;
-    _isSelectableItem(this: void, item: MediaGalleryItem): boolean;
-    _findSelectableItem(): MediaGalleryItem | undefined;
+    _isSelectableItem(this: void, item: IMediaGalleryItem): boolean;
+    _findSelectableItem(): IMediaGalleryItem | undefined;
     _updateMediaRange(width: number): void;
     _updateLayout(): void;
     _calculateOverflowSize(width: number, height: number): number;
@@ -148,21 +160,21 @@ declare class MediaGallery extends UI5Element {
     _getMaxAllowedThumbnailsInColumn(columnHeight: number): number;
     _getOverflowSize(columnHeight: number, columnsCount: number): number;
     _getFocusableItems(): ITabbable[];
-    _selectItem(item: MediaGalleryItem, userInteraction?: boolean): void;
-    _updateSelectedFlag(itemToSelect: MediaGalleryItem): void;
-    _selectItemOnPhone(item: MediaGalleryItem): void;
-    _displayContent(item: MediaGalleryItem): void;
+    _selectItem(item: IMediaGalleryItem, userInteraction?: boolean): void;
+    _updateSelectedFlag(itemToSelect: IMediaGalleryItem): void;
+    _selectItemOnPhone(item: IMediaGalleryItem): void;
+    _displayContent(item: IMediaGalleryItem): void;
     _onThumbnailClick(e: MouseEvent): void;
     _onOverflowBtnClick(): void;
     _onDisplayAreaClick(): void;
     _onCarouselNavigate(e: CustomEvent<CarouselNavigateEventDetail>): void;
     get _mainItemTabIndex(): 0 | undefined;
-    get _selectableItems(): MediaGalleryItem[];
+    get _selectableItems(): IMediaGalleryItem[];
     get _carousel(): Carousel | null;
     get _display(): HTMLElement | null;
     get _mainItem(): MediaGalleryItem | null;
     get _overflowBtn(): Button | null;
-    get _visibleItems(): MediaGalleryItem[];
+    get _visibleItems(): IMediaGalleryItem[];
     get _isPhonePlatform(): boolean;
     get _showThumbnails(): boolean;
     get _showOverflowBtn(): boolean;
@@ -174,4 +186,4 @@ declare class MediaGallery extends UI5Element {
     static get THUMBNAIL_MARGIN(): number;
 }
 export default MediaGallery;
-export type { MediaGallerySelectionChangeEventDetail };
+export type { MediaGallerySelectionChangeEventDetail, IMediaGalleryItem, };

package/dist/MediaGallery.js CHANGED Viewed

@@ -219,7 +219,7 @@ let MediaGallery = MediaGallery_1 = class MediaGallery extends UI5Element {
     }
     _displayContent(item) {
         let clone;
-        const mainItem = this._mainItem, oldContent = mainItem._content, newContent = item._content;
+        const mainItem = this._mainItem, oldContent = mainItem.displayedContent, newContent = item.displayedContent;
         mainItem._thumbnailDesign = false;
         oldContent && oldContent.remove();
         if (newContent) {

package/dist/MediaGallery.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MediaGallery.js","sourceRoot":"","sources":["../src/MediaGallery.ts"],"names":[],"mappings":"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","sourcesContent":["import ItemNavigation from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport MediaRange from \"@ui5/webcomponents-base/dist/MediaRange.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport NavigationMode from \"@ui5/webcomponents-base/dist/types/NavigationMode.js\";\nimport UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport type { CarouselNavigateEventDetail } from \"@ui5/webcomponents/dist/Carousel.js\";\nimport Carousel from \"@ui5/webcomponents/dist/Carousel.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 event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport type { ITabbable } from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport MediaGalleryItem from \"./MediaGalleryItem.js\";\nimport MediaGalleryItemLayout from \"./types/MediaGalleryItemLayout.js\";\nimport MediaGalleryLayout from \"./types/MediaGalleryLayout.js\";\nimport MediaGalleryMenuHorizontalAlign from \"./types/MediaGalleryMenuHorizontalAlign.js\";\nimport MediaGalleryMenuVerticalAlign from \"./types/MediaGalleryMenuVerticalAlign.js\";\nimport type IMediaGalleryItem from \"./MediaGalleryItem.js\";\n\n// Styles\nimport MediaGalleryCss from \"./generated/themes/MediaGallery.css.js\";\n\n// Template\nimport MediaGalleryTemplate from \"./generated/templates/MediaGalleryTemplate.lit.js\";\n\ntype MediaGallerySelectionChangeEventDetail = {\n\titem: MediaGalleryItem;\n}\n\n// The allowed number of thumbnail columns on each size\n// (relevant when <code>showAllThumbnails</code> is enabled)\nconst COLUMNS_COUNT: Record<string, number> = {\n\t\"S\": 1,\n\t\"M\": 2,\n\t\"L\": 3,\n\t\"XL\": 4,\n};\n\n/*\n @class\n \n <h3 class=\"comment-api-title\">Overview</h3>\n \n The <code>ui5-media-gallery</code> component allows the user to browse through multimedia items. Currently,\n * the supported items are images and videos. The items should be defined using the <code>ui5-media-gallery-item</code>\n * component.\n \n The items are initially displayed as thumbnails. When the user selects a thumbnail, the corresponding item\n * is displayed in larger size.\n * <br>\n * The component is responsive by default and adjusts the position of the menu with respect to viewport size,\n * but the application is able to further customize the layout via the provided API.\n \n <h3>Keyboard Handling</h3>\n * The <code>ui5-media-gallery</code> provides advanced keyboard handling.\n * <br>\n * When the thumbnails menu is focused the following keyboard\n * shortcuts allow the user to navigate through the thumbnail items:\n * <br>\n \n <ul>\n * <li>[UP/DOWN] - Navigates up and down the items</li>\n * <li>[HOME] - Navigates to first item</li>\n * <li>[END] - Navigates to the last item</li>\n * <li>[SPACE/ENTER] - Select an item</li>\n * </ul>\n * <br>\n \n <h3>ES6 Module Import</h3>\n * <code>import \"@ui5/webcomponents-fiori/dist/MediaGallery\";</code>\n * <br>\n * <code>import \"@ui5/webcomponents-fiori/dist/MediaGalleryItem\";</code>\n \n @constructor\n * @extends UI5Element\n * @public\n * @since 1.1.0\n /\n@customElement({\n\ttag: \"ui5-media-gallery\",\n\trenderer: litRender,\n\tstyles: [MediaGalleryCss],\n\ttemplate: MediaGalleryTemplate,\n\tstaticAreaTemplate: MediaGalleryTemplate,\n\tdependencies: [\n\t\tMediaGalleryItem,\n\t\tButton,\n\t\tCarousel,\n\t],\n})\n\n/\n Fired when selection is changed by user interaction.\n \n @param {HTMLElement} item the selected item.\n * @public\n /\n@event<MediaGallerySelectionChangeEventDetail>(\"selection-change\", {\n\tdetail: {\n\t\t/\n\t\t @public\n\t\t /\n\t\titem: { type: HTMLElement },\n\t},\n})\n\n/\n Fired when the thumbnails overflow button is clicked.\n \n @public\n /\n@event(\"overflow-click\")\n\n/\n Fired when the display area is clicked.<br>\n * The display area is the central area that contains\n * the enlarged content of the currently selected item.\n \n @public\n /\n@event(\"display-area-click\")\n\nclass MediaGallery extends UI5Element {\n\t/\n\t If set to <code>true</code>, all thumbnails are rendered in a scrollable container.\n\t * If <code>false</code>, only up to five thumbnails are rendered, followed by\n\t * an overflow button that shows the count of the remaining thumbnails.\n\t \n\t @default false\n\t * @public\n\t /\n\t@property({ type: Boolean })\n\tshowAllThumbnails!: boolean;\n\n\t/\n\t If enabled, a <code>display-area-click</code> event is fired\n\t * when the user clicks or taps on the display area.\n\t * <br>\n\t * The display area is the central area that contains\n\t * the enlarged content of the currently selected item.\n\t \n\t @default false\n\t * @public\n\t /\n\t@property({ type: Boolean })\n\tinteractiveDisplayArea!: boolean;\n\n\t/\n\t Determines the layout of the component.\n\t \n\t @default \"Auto\"\n\t * @public\n\t /\n\t@property({ type: MediaGalleryLayout, defaultValue: MediaGalleryLayout.Auto })\n\tlayout!: `${MediaGalleryLayout}`;\n\n\t/\n\t Determines the horizontal alignment of the thumbnails menu\n\t * vs. the central display area.\n\t \n\t @default \"Left\"\n\t * @public\n\t /\n\t@property({ type: MediaGalleryMenuHorizontalAlign, defaultValue: MediaGalleryMenuHorizontalAlign.Left })\n\tmenuHorizontalAlign!: `${MediaGalleryMenuHorizontalAlign}`;\n\n\t/\n\t Determines the vertical alignment of the thumbnails menu\n\t * vs. the central display area.\n\t \n\t @default \"Bottom\"\n\t * @public\n\t /\n\t@property({ type: MediaGalleryMenuVerticalAlign, defaultValue: MediaGalleryMenuVerticalAlign.Bottom })\n\tmenuVerticalAlign!: `${MediaGalleryMenuVerticalAlign}`;\n\n\t/\n\t Determines the actual applied layout type\n\t * (esp. needed when the app did not specify a fixed layout type\n\t * but selected <code>Auto</code> layout type).\n\t \n\t @default \"Vertical\"\n\t * @private\n\t /\n\t@property({ type: MediaGalleryLayout, defaultValue: MediaGalleryLayout.Vertical })\n\teffectiveLayout!: `${MediaGalleryLayout}`;\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 The number of items in the overflow.\n\t \n\t @private\n\t /\n\t@property({ validator: Integer, noAttribute: true, defaultValue: 0 })\n\t_overflowSize!: number;\n\n\t/\n\t Defines the component items.\n\t \n\t <br><br>\n\t * <b>Note:</b> Only one selected item is allowed.\n\t \n\t <br><br>\n\t * <b>Note:</b> Use the <code>ui5-media-gallery-item</code> component to define the desired items.\n\t \n\t @public\n\t /\n\t@slot({\n\t\ttype: HTMLElement,\n\t\tindividualSlots: true,\n\t\tinvalidateOnChildChange: true,\n\t\t\"default\": true,\n\t})\n\titems!: Array<IMediaGalleryItem>;\n\n\t_itemNavigation: ItemNavigation;\n\t_onResize: () => void;\n\t_selectedItem?: MediaGalleryItem;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._onResize = this._updateLayout.bind(this);\n\n\t\tthis._itemNavigation = new ItemNavigation(this, {\n\t\t\tnavigationMode: NavigationMode.Auto,\n\t\t\tgetItemsCallback: () => this._getFocusableItems(),\n\t\t});\n\t}\n\n\tonEnterDOM() {\n\t\t!isPhone() && ResizeHandler.register(this, this._onResize);\n\t}\n\n\tonExitDOM() {\n\t\t!isPhone() && ResizeHandler.deregister(this, this._onResize);\n\t}\n\n\tonAfterRendering() {\n\t\tthis._updateLayout();\n\t\tthis._updateSelection();\n\t}\n\n\t_updateSelection() {\n\t\tlet itemToSelect = this.items.find(item => item.selected);\n\t\tif (!itemToSelect \|\| !this._isSelectableItem(itemToSelect)) {\n\t\t\titemToSelect = this._findSelectableItem();\n\t\t}\n\t\tif (itemToSelect && itemToSelect !== this._selectedItem) {\n\t\t\tthis._selectItem(itemToSelect);\n\t\t}\n\t}\n\n\t_isSelectableItem(this: void, item: MediaGalleryItem) {\n\t\treturn !item.disabled && !item.hidden;\n\t}\n\n\t_findSelectableItem() {\n\t\treturn this.items.find(this._isSelectableItem);\n\t}\n\n\t_updateMediaRange(width: number) {\n\t\tthis.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, width);\n\t}\n\n\t_updateLayout() {\n\t\tconst rootNode = this.getDomRef()!,\n\t\t\theight = rootNode.offsetHeight,\n\t\t\twidth = rootNode.offsetWidth;\n\n\t\tif (!width \|\| !height \|\| isPhone()) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._updateMediaRange(width);\n\t\tthis.effectiveLayout = this._infereffectiveLayout();\n\t\tthis._overflowSize = this._calculateOverflowSize(width, height);\n\n\t\tthis._toggleDisplaySquareSize(this._shouldHaveSquareDisplay);\n\t\tthis._toggleMainItem9x16size(this._shouldHaveWideDisplay);\n\t}\n\n\t_calculateOverflowSize(width: number, height: number) {\n\t\tconst marginSize = MediaGallery.THUMBNAIL_MARGIN;\n\t\tlet columnHeight,\n\t\t\tcolumnsCount;\n\n\t\tif (this.showAllThumbnails) {\n\t\t\treturn 0;\n\t\t}\n\n\t\tif (this.effectiveLayout === MediaGalleryLayout.Horizontal) {\n\t\t\tcolumnHeight = height - marginSize;\n\t\t\tcolumnsCount = this.showAllThumbnails ? COLUMNS_COUNT[this.mediaRange] : 1;\n\t\t} else {\n\t\t\tcolumnHeight = width - (marginSize 2); // column is flexed to appear as a row in this case\n\t\t\tcolumnsCount = 1;\n\t\t}\n\t\treturn this._getOverflowSize(columnHeight, columnsCount);\n\t}\n\n\t_toggleDisplaySquareSize(enable: boolean) {\n\t\tthis._display!.style.width = \"\"; // restore default width\n\n\t\tif (enable) {\n\t\t\tconst marginSize = MediaGallery.THUMBNAIL_MARGIN,\n\t\t\t\twidth = this._display!.offsetWidth;\n\n\t\t\tlet availableHeight = this.getDomRef()!.offsetHeight - (2 * marginSize);\n\t\t\tif (this.effectiveLayout === MediaGalleryLayout.Vertical) {\n\t\t\t\tavailableHeight -= (MediaGallery.THUMBNAIL_HEIGHT + marginSize);\n\t\t\t}\n\n\t\t\tif (width > availableHeight) {\n\t\t\t\t// set to square\n\t\t\t\tthis._display!.style.width = `${availableHeight}px`;\n\t\t\t}\n\t\t}\n\t}\n\n\t_toggleMainItem9x16size(enable: boolean) {\n\t\tif (!this._mainItem) {\n\t\t\treturn;\n\t\t}\n\t\tconst width = this._mainItem.offsetWidth,\n\t\t\tcontentHeight = enable ? `${(width / 16) * 9}px` : \"\";\n\n\t\tthis._mainItem.contentHeight = contentHeight;\n\t}\n\n\t_infereffectiveLayout() {\n\t\tif (this.layout === MediaGalleryLayout.Auto) {\n\t\t\treturn (this._isPhoneSize) ? MediaGalleryLayout.Vertical\n\t\t\t\t: MediaGalleryLayout.Horizontal;\n\t\t}\n\t\treturn this.layout;\n\t}\n\n\t_getMaxAllowedThumbnailsInColumn(columnHeight: number) {\n\t\tlet maxAllowedItems = Math.floor(columnHeight / MediaGallery.THUMBNAIL_HEIGHT);\n\t\tif (!this.showAllThumbnails) {\n\t\t\tmaxAllowedItems = Math.min(maxAllowedItems, 5);\n\t\t}\n\t\treturn maxAllowedItems;\n\t}\n\n\t_getOverflowSize(columnHeight: number, columnsCount: number) {\n\t\tconst maxAlowedThumbnailsInColumn = this._getMaxAllowedThumbnailsInColumn(columnHeight),\n\t\t\toverflowSize = Math.max(0, this.items.length - maxAlowedThumbnailsInColumn * columnsCount);\n\t\tif (overflowSize === this.items.length \|\| overflowSize === 0) {\n\t\t\treturn overflowSize;\n\t\t}\n\t\treturn overflowSize + 1; // overflow 1 extra item to make room for overflow btn as well\n\t}\n\n\t_getFocusableItems() {\n\t\tif (!this._showThumbnails) {\n\t\t\treturn [];\n\t\t}\n\n\t\tconst items: Array<ITabbable> = this._visibleItems.filter(item => !item.disabled);\n\n\t\tif (this._overflowBtn) {\n\t\t\titems.push(this._overflowBtn);\n\t\t}\n\t\treturn items;\n\t}\n\n\t_selectItem(item: MediaGalleryItem, userInteraction = false) {\n\t\tif (item === this._selectedItem) {\n\t\t\treturn;\n\t\t}\n\t\tthis._selectedItem = item;\n\n\t\tthis._updateSelectedFlag(item);\n\t\tthis._itemNavigation.setCurrentItem(item);\n\n\t\tif (userInteraction) {\n\t\t\tthis.fireEvent<MediaGallerySelectionChangeEventDetail>(\"selection-change\", { item });\n\t\t}\n\n\t\tif (isPhone()) {\n\t\t\tthis._selectItemOnPhone(item);\n\t\t} else {\n\t\t\tthis._displayContent(item);\n\t\t}\n\t}\n\n\t_updateSelectedFlag(itemToSelect: MediaGalleryItem) {\n\t\tthis.items.forEach(next => { next.selected = false; });\n\t\titemToSelect.selected = true;\n\t}\n\n\t_selectItemOnPhone(item: MediaGalleryItem) {\n\t\tconst selectableItemIndex = this._selectableItems.indexOf(item),\n\t\t\tcarousel = this._carousel;\n\t\tcarousel && carousel.navigateTo(selectableItemIndex);\n\t}\n\n\t_displayContent(item: MediaGalleryItem) {\n\t\tlet clone;\n\t\tconst mainItem = this._mainItem,\n\t\t\toldContent = mainItem!._content,\n\t\t\tnewContent = item._content;\n\n\t\tmainItem!._thumbnailDesign = false;\n\t\toldContent && oldContent.remove();\n\n\t\tif (newContent) {\n\t\t\tclone = newContent.cloneNode(true);\n\t\t\tmainItem!.layout = item.layout;\n\t\t\tmainItem!.appendChild(clone);\n\t\t}\n\t}\n\n\t_onThumbnailClick(e: MouseEvent) {\n\t\tconst target = e.target as HTMLElement;\n\t\tconst item = target.closest<MediaGalleryItem>(\"[ui5-media-gallery-item]\")!;\n\n\t\tif (item.disabled) {\n\t\t\treturn;\n\t\t}\n\t\tif (item !== this._selectedItem) {\n\t\t\tthis._selectItem(item, true /* userInteraction /);\n\t\t}\n\t}\n\n\t_onOverflowBtnClick() {\n\t\tthis.fireEvent(\"overflow-click\");\n\t}\n\n\t_onDisplayAreaClick() {\n\t\tif (!this.interactiveDisplayArea) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.fireEvent(\"display-area-click\");\n\t}\n\n\t_onCarouselNavigate(e: CustomEvent<CarouselNavigateEventDetail>) {\n\t\tconst selectedIndex = e.detail.selectedIndex,\n\t\t\titem = this._selectableItems[selectedIndex];\n\n\t\tthis.fireEvent<MediaGallerySelectionChangeEventDetail>(\"selection-change\", { item });\n\t}\n\n\tget _mainItemTabIndex() {\n\t\treturn this.interactiveDisplayArea ? 0 : undefined;\n\t}\n\n\tget _selectableItems() {\n\t\treturn this.items.filter(this._isSelectableItem);\n\t}\n\n\tget _carousel() {\n\t\treturn this.shadowRoot!.querySelector<Carousel>(\"[ui5-carousel]\");\n\t}\n\n\tget _display() {\n\t\treturn this.shadowRoot!.querySelector<HTMLElement>(\".ui5-media-gallery-display\");\n\t}\n\n\tget _mainItem() {\n\t\treturn this.shadowRoot!.querySelector<MediaGalleryItem>(\".ui5-media-gallery-display [ui5-media-gallery-item]\");\n\t}\n\n\tget _overflowBtn() {\n\t\treturn this.shadowRoot!.querySelector<Button>(\".ui5-media-gallery-overflow [ui5-button]\");\n\t}\n\n\tget _visibleItems() {\n\t\tconst visibleItemsCount = this.items.length - this._overflowSize;\n\t\treturn this.items.slice(0, visibleItemsCount);\n\t}\n\n\tget _isPhonePlatform() {\n\t\treturn isPhone();\n\t}\n\n\tget _showThumbnails() {\n\t\treturn !isPhone();\n\t}\n\n\tget _showOverflowBtn() {\n\t\treturn this._overflowSize > 0;\n\t}\n\n\tget _isPhoneSize() {\n\t\treturn this.mediaRange === \"S\";\n\t}\n\n\tget _mainItemHasWideLayout() {\n\t\treturn this._mainItem && (this._mainItem.layout === MediaGalleryItemLayout.Wide);\n\t}\n\n\tget _shouldHaveWideDisplay() {\n\t\treturn !!this._mainItemHasWideLayout\n\t\t\t&& this.showAllThumbnails\n\t\t\t&& (this.effectiveLayout === MediaGalleryLayout.Horizontal);\n\t}\n\n\tget _shouldHaveSquareDisplay() {\n\t\t// by default it should be square\n\t\t// with the only exception when a wide 916 item should be displayed\n\t\treturn !this._shouldHaveWideDisplay;\n\t}\n\n\tstatic get THUMBNAIL_HEIGHT() {\n\t\treturn 80; // px\n\t}\n\n\tstatic get THUMBNAIL_MARGIN() {\n\t\treturn 16; // px\n\t}\n}\n\nMediaGallery.define();\n\nexport default MediaGallery;\n\nexport type { MediaGallerySelectionChangeEventDetail };\n"]}
1	+ {"version":3,"file":"MediaGallery.js","sourceRoot":"","sources":["../src/MediaGallery.ts"],"names":[],"mappings":"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","sourcesContent":["import ItemNavigation from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport MediaRange from \"@ui5/webcomponents-base/dist/MediaRange.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport NavigationMode from \"@ui5/webcomponents-base/dist/types/NavigationMode.js\";\nimport UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport type { CarouselNavigateEventDetail } from \"@ui5/webcomponents/dist/Carousel.js\";\nimport Carousel from \"@ui5/webcomponents/dist/Carousel.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 event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport type { ITabbable } from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport MediaGalleryItem from \"./MediaGalleryItem.js\";\nimport MediaGalleryItemLayout from \"./types/MediaGalleryItemLayout.js\";\nimport MediaGalleryLayout from \"./types/MediaGalleryLayout.js\";\nimport MediaGalleryMenuHorizontalAlign from \"./types/MediaGalleryMenuHorizontalAlign.js\";\nimport MediaGalleryMenuVerticalAlign from \"./types/MediaGalleryMenuVerticalAlign.js\";\n\n// Styles\nimport MediaGalleryCss from \"./generated/themes/MediaGallery.css.js\";\n\n// Template\nimport MediaGalleryTemplate from \"./generated/templates/MediaGalleryTemplate.lit.js\";\n\n/*\n Interface for components that can be slotted inside <code>ui5-media-gallery</code> as items.\n \n @public\n /\ninterface IMediaGalleryItem extends HTMLElement, ITabbable {\n\tselected: boolean,\n\tdisabled: boolean,\n\tfocused: boolean,\n\tdisplayedContent: HTMLElement \| null;\n\tlayout: `${MediaGalleryItemLayout}`\n}\n\ntype MediaGallerySelectionChangeEventDetail = {\n\titem: IMediaGalleryItem;\n}\n\n// The allowed number of thumbnail columns on each size\n// (relevant when <code>showAllThumbnails</code> is enabled)\nconst COLUMNS_COUNT: Record<string, number> = {\n\t\"S\": 1,\n\t\"M\": 2,\n\t\"L\": 3,\n\t\"XL\": 4,\n};\n\n/\n @class\n \n <h3 class=\"comment-api-title\">Overview</h3>\n \n The <code>ui5-media-gallery</code> component allows the user to browse through multimedia items. Currently,\n * the supported items are images and videos. The items should be defined using the <code>ui5-media-gallery-item</code>\n * component.\n \n The items are initially displayed as thumbnails. When the user selects a thumbnail, the corresponding item\n * is displayed in larger size.\n * <br>\n * The component is responsive by default and adjusts the position of the menu with respect to viewport size,\n * but the application is able to further customize the layout via the provided API.\n \n <h3>Keyboard Handling</h3>\n * The <code>ui5-media-gallery</code> provides advanced keyboard handling.\n * <br>\n * When the thumbnails menu is focused the following keyboard\n * shortcuts allow the user to navigate through the thumbnail items:\n * <br>\n \n <ul>\n * <li>[UP/DOWN] - Navigates up and down the items</li>\n * <li>[HOME] - Navigates to first item</li>\n * <li>[END] - Navigates to the last item</li>\n * <li>[SPACE/ENTER] - Select an item</li>\n * </ul>\n * <br>\n \n <h3>ES6 Module Import</h3>\n * <code>import \"@ui5/webcomponents-fiori/dist/MediaGallery\";</code>\n * <br>\n * <code>import \"@ui5/webcomponents-fiori/dist/MediaGalleryItem\";</code>\n \n @constructor\n * @extends UI5Element\n * @public\n * @since 1.1.0\n /\n@customElement({\n\ttag: \"ui5-media-gallery\",\n\trenderer: litRender,\n\tstyles: [MediaGalleryCss],\n\ttemplate: MediaGalleryTemplate,\n\tstaticAreaTemplate: MediaGalleryTemplate,\n\tdependencies: [\n\t\tMediaGalleryItem,\n\t\tButton,\n\t\tCarousel,\n\t],\n})\n\n/\n Fired when selection is changed by user interaction.\n \n @param {HTMLElement} item the selected item.\n * @public\n /\n@event<MediaGallerySelectionChangeEventDetail>(\"selection-change\", {\n\tdetail: {\n\t\t/\n\t\t @public\n\t\t /\n\t\titem: { type: HTMLElement },\n\t},\n})\n\n/\n Fired when the thumbnails overflow button is clicked.\n \n @public\n /\n@event(\"overflow-click\")\n\n/\n Fired when the display area is clicked.<br>\n * The display area is the central area that contains\n * the enlarged content of the currently selected item.\n \n @public\n /\n@event(\"display-area-click\")\n\nclass MediaGallery extends UI5Element {\n\t/\n\t If set to <code>true</code>, all thumbnails are rendered in a scrollable container.\n\t * If <code>false</code>, only up to five thumbnails are rendered, followed by\n\t * an overflow button that shows the count of the remaining thumbnails.\n\t \n\t @default false\n\t * @public\n\t /\n\t@property({ type: Boolean })\n\tshowAllThumbnails!: boolean;\n\n\t/\n\t If enabled, a <code>display-area-click</code> event is fired\n\t * when the user clicks or taps on the display area.\n\t * <br>\n\t * The display area is the central area that contains\n\t * the enlarged content of the currently selected item.\n\t \n\t @default false\n\t * @public\n\t /\n\t@property({ type: Boolean })\n\tinteractiveDisplayArea!: boolean;\n\n\t/\n\t Determines the layout of the component.\n\t \n\t @default \"Auto\"\n\t * @public\n\t /\n\t@property({ type: MediaGalleryLayout, defaultValue: MediaGalleryLayout.Auto })\n\tlayout!: `${MediaGalleryLayout}`;\n\n\t/\n\t Determines the horizontal alignment of the thumbnails menu\n\t * vs. the central display area.\n\t \n\t @default \"Left\"\n\t * @public\n\t /\n\t@property({ type: MediaGalleryMenuHorizontalAlign, defaultValue: MediaGalleryMenuHorizontalAlign.Left })\n\tmenuHorizontalAlign!: `${MediaGalleryMenuHorizontalAlign}`;\n\n\t/\n\t Determines the vertical alignment of the thumbnails menu\n\t * vs. the central display area.\n\t \n\t @default \"Bottom\"\n\t * @public\n\t /\n\t@property({ type: MediaGalleryMenuVerticalAlign, defaultValue: MediaGalleryMenuVerticalAlign.Bottom })\n\tmenuVerticalAlign!: `${MediaGalleryMenuVerticalAlign}`;\n\n\t/\n\t Determines the actual applied layout type\n\t * (esp. needed when the app did not specify a fixed layout type\n\t * but selected <code>Auto</code> layout type).\n\t \n\t @default \"Vertical\"\n\t * @private\n\t /\n\t@property({ type: MediaGalleryLayout, defaultValue: MediaGalleryLayout.Vertical })\n\teffectiveLayout!: `${MediaGalleryLayout}`;\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 The number of items in the overflow.\n\t \n\t @private\n\t /\n\t@property({ validator: Integer, noAttribute: true, defaultValue: 0 })\n\t_overflowSize!: number;\n\n\t/\n\t Defines the component items.\n\t \n\t <br><br>\n\t * <b>Note:</b> Only one selected item is allowed.\n\t \n\t <br><br>\n\t * <b>Note:</b> Use the <code>ui5-media-gallery-item</code> component to define the desired items.\n\t \n\t @public\n\t /\n\t@slot({\n\t\ttype: HTMLElement,\n\t\tindividualSlots: true,\n\t\tinvalidateOnChildChange: true,\n\t\t\"default\": true,\n\t})\n\titems!: Array<IMediaGalleryItem>;\n\n\t_itemNavigation: ItemNavigation;\n\t_onResize: () => void;\n\t_selectedItem?: IMediaGalleryItem;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._onResize = this._updateLayout.bind(this);\n\n\t\tthis._itemNavigation = new ItemNavigation(this, {\n\t\t\tnavigationMode: NavigationMode.Auto,\n\t\t\tgetItemsCallback: () => this._getFocusableItems(),\n\t\t});\n\t}\n\n\tonEnterDOM() {\n\t\t!isPhone() && ResizeHandler.register(this, this._onResize);\n\t}\n\n\tonExitDOM() {\n\t\t!isPhone() && ResizeHandler.deregister(this, this._onResize);\n\t}\n\n\tonAfterRendering() {\n\t\tthis._updateLayout();\n\t\tthis._updateSelection();\n\t}\n\n\t_updateSelection() {\n\t\tlet itemToSelect = this.items.find(item => item.selected);\n\t\tif (!itemToSelect \|\| !this._isSelectableItem(itemToSelect)) {\n\t\t\titemToSelect = this._findSelectableItem();\n\t\t}\n\t\tif (itemToSelect && itemToSelect !== this._selectedItem) {\n\t\t\tthis._selectItem(itemToSelect);\n\t\t}\n\t}\n\n\t_isSelectableItem(this: void, item: IMediaGalleryItem) {\n\t\treturn !item.disabled && !item.hidden;\n\t}\n\n\t_findSelectableItem() {\n\t\treturn this.items.find(this._isSelectableItem);\n\t}\n\n\t_updateMediaRange(width: number) {\n\t\tthis.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, width);\n\t}\n\n\t_updateLayout() {\n\t\tconst rootNode = this.getDomRef()!,\n\t\t\theight = rootNode.offsetHeight,\n\t\t\twidth = rootNode.offsetWidth;\n\n\t\tif (!width \|\| !height \|\| isPhone()) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._updateMediaRange(width);\n\t\tthis.effectiveLayout = this._infereffectiveLayout();\n\t\tthis._overflowSize = this._calculateOverflowSize(width, height);\n\n\t\tthis._toggleDisplaySquareSize(this._shouldHaveSquareDisplay);\n\t\tthis._toggleMainItem9x16size(this._shouldHaveWideDisplay);\n\t}\n\n\t_calculateOverflowSize(width: number, height: number) {\n\t\tconst marginSize = MediaGallery.THUMBNAIL_MARGIN;\n\t\tlet columnHeight,\n\t\t\tcolumnsCount;\n\n\t\tif (this.showAllThumbnails) {\n\t\t\treturn 0;\n\t\t}\n\n\t\tif (this.effectiveLayout === MediaGalleryLayout.Horizontal) {\n\t\t\tcolumnHeight = height - marginSize;\n\t\t\tcolumnsCount = this.showAllThumbnails ? COLUMNS_COUNT[this.mediaRange] : 1;\n\t\t} else {\n\t\t\tcolumnHeight = width - (marginSize 2); // column is flexed to appear as a row in this case\n\t\t\tcolumnsCount = 1;\n\t\t}\n\t\treturn this._getOverflowSize(columnHeight, columnsCount);\n\t}\n\n\t_toggleDisplaySquareSize(enable: boolean) {\n\t\tthis._display!.style.width = \"\"; // restore default width\n\n\t\tif (enable) {\n\t\t\tconst marginSize = MediaGallery.THUMBNAIL_MARGIN,\n\t\t\t\twidth = this._display!.offsetWidth;\n\n\t\t\tlet availableHeight = this.getDomRef()!.offsetHeight - (2 * marginSize);\n\t\t\tif (this.effectiveLayout === MediaGalleryLayout.Vertical) {\n\t\t\t\tavailableHeight -= (MediaGallery.THUMBNAIL_HEIGHT + marginSize);\n\t\t\t}\n\n\t\t\tif (width > availableHeight) {\n\t\t\t\t// set to square\n\t\t\t\tthis._display!.style.width = `${availableHeight}px`;\n\t\t\t}\n\t\t}\n\t}\n\n\t_toggleMainItem9x16size(enable: boolean) {\n\t\tif (!this._mainItem) {\n\t\t\treturn;\n\t\t}\n\t\tconst width = this._mainItem.offsetWidth,\n\t\t\tcontentHeight = enable ? `${(width / 16) * 9}px` : \"\";\n\n\t\tthis._mainItem.contentHeight = contentHeight;\n\t}\n\n\t_infereffectiveLayout() {\n\t\tif (this.layout === MediaGalleryLayout.Auto) {\n\t\t\treturn (this._isPhoneSize) ? MediaGalleryLayout.Vertical\n\t\t\t\t: MediaGalleryLayout.Horizontal;\n\t\t}\n\t\treturn this.layout;\n\t}\n\n\t_getMaxAllowedThumbnailsInColumn(columnHeight: number) {\n\t\tlet maxAllowedItems = Math.floor(columnHeight / MediaGallery.THUMBNAIL_HEIGHT);\n\t\tif (!this.showAllThumbnails) {\n\t\t\tmaxAllowedItems = Math.min(maxAllowedItems, 5);\n\t\t}\n\t\treturn maxAllowedItems;\n\t}\n\n\t_getOverflowSize(columnHeight: number, columnsCount: number) {\n\t\tconst maxAlowedThumbnailsInColumn = this._getMaxAllowedThumbnailsInColumn(columnHeight),\n\t\t\toverflowSize = Math.max(0, this.items.length - maxAlowedThumbnailsInColumn * columnsCount);\n\t\tif (overflowSize === this.items.length \|\| overflowSize === 0) {\n\t\t\treturn overflowSize;\n\t\t}\n\t\treturn overflowSize + 1; // overflow 1 extra item to make room for overflow btn as well\n\t}\n\n\t_getFocusableItems() {\n\t\tif (!this._showThumbnails) {\n\t\t\treturn [];\n\t\t}\n\n\t\tconst items: Array<ITabbable> = this._visibleItems.filter(item => !item.disabled);\n\n\t\tif (this._overflowBtn) {\n\t\t\titems.push(this._overflowBtn);\n\t\t}\n\t\treturn items;\n\t}\n\n\t_selectItem(item: IMediaGalleryItem, userInteraction = false) {\n\t\tif (item === this._selectedItem) {\n\t\t\treturn;\n\t\t}\n\t\tthis._selectedItem = item;\n\n\t\tthis._updateSelectedFlag(item);\n\t\tthis._itemNavigation.setCurrentItem(item);\n\n\t\tif (userInteraction) {\n\t\t\tthis.fireEvent<MediaGallerySelectionChangeEventDetail>(\"selection-change\", { item });\n\t\t}\n\n\t\tif (isPhone()) {\n\t\t\tthis._selectItemOnPhone(item);\n\t\t} else {\n\t\t\tthis._displayContent(item);\n\t\t}\n\t}\n\n\t_updateSelectedFlag(itemToSelect: IMediaGalleryItem) {\n\t\tthis.items.forEach(next => { next.selected = false; });\n\t\titemToSelect.selected = true;\n\t}\n\n\t_selectItemOnPhone(item: IMediaGalleryItem) {\n\t\tconst selectableItemIndex = this._selectableItems.indexOf(item),\n\t\t\tcarousel = this._carousel;\n\t\tcarousel && carousel.navigateTo(selectableItemIndex);\n\t}\n\n\t_displayContent(item: IMediaGalleryItem) {\n\t\tlet clone;\n\t\tconst mainItem = this._mainItem,\n\t\t\toldContent = mainItem!.displayedContent,\n\t\t\tnewContent = item.displayedContent;\n\n\t\tmainItem!._thumbnailDesign = false;\n\t\toldContent && oldContent.remove();\n\n\t\tif (newContent) {\n\t\t\tclone = newContent.cloneNode(true);\n\t\t\tmainItem!.layout = item.layout;\n\t\t\tmainItem!.appendChild(clone);\n\t\t}\n\t}\n\n\t_onThumbnailClick(e: MouseEvent) {\n\t\tconst target = e.target as HTMLElement;\n\t\tconst item = target.closest<IMediaGalleryItem>(\"[ui5-media-gallery-item]\")!;\n\n\t\tif (item.disabled) {\n\t\t\treturn;\n\t\t}\n\t\tif (item !== this._selectedItem) {\n\t\t\tthis._selectItem(item, true /* userInteraction /);\n\t\t}\n\t}\n\n\t_onOverflowBtnClick() {\n\t\tthis.fireEvent(\"overflow-click\");\n\t}\n\n\t_onDisplayAreaClick() {\n\t\tif (!this.interactiveDisplayArea) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.fireEvent(\"display-area-click\");\n\t}\n\n\t_onCarouselNavigate(e: CustomEvent<CarouselNavigateEventDetail>) {\n\t\tconst selectedIndex = e.detail.selectedIndex,\n\t\t\titem = this._selectableItems[selectedIndex];\n\n\t\tthis.fireEvent<MediaGallerySelectionChangeEventDetail>(\"selection-change\", { item });\n\t}\n\n\tget _mainItemTabIndex() {\n\t\treturn this.interactiveDisplayArea ? 0 : undefined;\n\t}\n\n\tget _selectableItems() {\n\t\treturn this.items.filter(this._isSelectableItem);\n\t}\n\n\tget _carousel() {\n\t\treturn this.shadowRoot!.querySelector<Carousel>(\"[ui5-carousel]\");\n\t}\n\n\tget _display() {\n\t\treturn this.shadowRoot!.querySelector<HTMLElement>(\".ui5-media-gallery-display\");\n\t}\n\n\tget _mainItem() {\n\t\treturn this.shadowRoot!.querySelector<MediaGalleryItem>(\".ui5-media-gallery-display [ui5-media-gallery-item]\");\n\t}\n\n\tget _overflowBtn() {\n\t\treturn this.shadowRoot!.querySelector<Button>(\".ui5-media-gallery-overflow [ui5-button]\");\n\t}\n\n\tget _visibleItems() {\n\t\tconst visibleItemsCount = this.items.length - this._overflowSize;\n\t\treturn this.items.slice(0, visibleItemsCount);\n\t}\n\n\tget _isPhonePlatform() {\n\t\treturn isPhone();\n\t}\n\n\tget _showThumbnails() {\n\t\treturn !isPhone();\n\t}\n\n\tget _showOverflowBtn() {\n\t\treturn this._overflowSize > 0;\n\t}\n\n\tget _isPhoneSize() {\n\t\treturn this.mediaRange === \"S\";\n\t}\n\n\tget _mainItemHasWideLayout() {\n\t\treturn this._mainItem && (this._mainItem.layout === MediaGalleryItemLayout.Wide);\n\t}\n\n\tget _shouldHaveWideDisplay() {\n\t\treturn !!this._mainItemHasWideLayout\n\t\t\t&& this.showAllThumbnails\n\t\t\t&& (this.effectiveLayout === MediaGalleryLayout.Horizontal);\n\t}\n\n\tget _shouldHaveSquareDisplay() {\n\t\t// by default it should be square\n\t\t// with the only exception when a wide 916 item should be displayed\n\t\treturn !this._shouldHaveWideDisplay;\n\t}\n\n\tstatic get THUMBNAIL_HEIGHT() {\n\t\treturn 80; // px\n\t}\n\n\tstatic get THUMBNAIL_MARGIN() {\n\t\treturn 16; // px\n\t}\n}\n\nMediaGallery.define();\n\nexport default MediaGallery;\n\nexport type {\n\tMediaGallerySelectionChangeEventDetail,\n\tIMediaGalleryItem,\n};\n"]}

package/dist/MediaGalleryItem.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import "@ui5/webcomponents-icons/dist/background.js";
 import MediaGalleryItemLayout from "./types/MediaGalleryItemLayout.js";
-import type { IMediaGalleryItem } from "./Interfaces.js";
+import type { IMediaGalleryItem } from "./MediaGallery.js";
 /**
  * @class
  * <h3 class="comment-api-title">Overview</h3>
@@ -84,7 +84,7 @@ declare class MediaGalleryItem extends UI5Element implements IMediaGalleryItem {
     /**
      * @private
      */
-    _tabIndex: string;
+    forcedTabIndex: string;
     /**
      * @private
      */
@@ -106,7 +106,7 @@ declare class MediaGalleryItem extends UI5Element implements IMediaGalleryItem {
     constructor();
     onEnterDOM(): void;
     get _thumbnail(): HTMLElement | null;
-    get _content(): HTMLElement | null;
+    get displayedContent(): HTMLElement | null;
     get _isThubmnailAvailable(): boolean | null;
     get _isContentAvailable(): boolean | null;
     get _useThumbnail(): boolean | null;

package/dist/MediaGalleryItem.js CHANGED Viewed

@@ -59,14 +59,14 @@ let MediaGalleryItem = class MediaGalleryItem extends UI5Element {
     get _thumbnail() {
         return this.thumbnail.length ? this.thumbnail[0] : null;
     }
-    get _content() {
+    get displayedContent() {
         return this.content.length ? this.content[0] : null;
     }
     get _isThubmnailAvailable() {
         return this._thumbnail && !this._thumbnailNotFound;
     }
     get _isContentAvailable() {
-        return this._content && !this._contentImageNotFound;
+        return this.displayedContent && !this._contentImageNotFound;
     }
     get _useThumbnail() {
         return this._thumbnailDesign && this._isThubmnailAvailable;
@@ -75,7 +75,7 @@ let MediaGalleryItem = class MediaGalleryItem extends UI5Element {
         return !this._useThumbnail && this._isContentAvailable;
     }
     get effectiveTabIndex() {
-        return this.disabled ? undefined : this._tabIndex;
+        return this.disabled ? undefined : this.forcedTabIndex;
     }
     get _showBackgroundIcon() {
         return this._thumbnailNotFound || this._contentImageNotFound;
@@ -101,11 +101,11 @@ let MediaGalleryItem = class MediaGalleryItem extends UI5Element {
             success = this._attachListeners(this._thumbnail, callback);
             success && (this._monitoredThumbnail = this._thumbnail);
         }
-        if (!this._useThumbnail && this.content.length && (this._monitoredContent !== this._content)) {
+        if (!this._useThumbnail && this.content.length && (this._monitoredContent !== this.displayedContent)) {
             this._contentImageNotFound = false; // reset flag
             callback = this._updateContentImageLoaded.bind(this);
-            success = this._attachListeners(this._content, callback);
-            success && (this._monitoredContent = this._content);
+            success = this._attachListeners(this.displayedContent, callback);
+            success && (this._monitoredContent = this.displayedContent);
         }
     }
     _attachListeners(element, callback) {
@@ -183,7 +183,7 @@ __decorate([
 ], MediaGalleryItem.prototype, "focused", void 0);
 __decorate([
     property()
-], MediaGalleryItem.prototype, "_tabIndex", void 0);
+], MediaGalleryItem.prototype, "forcedTabIndex", void 0);
 __decorate([
     property({ noAttribute: true })
 ], MediaGalleryItem.prototype, "contentHeight", void 0);

package/dist/MediaGalleryItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MediaGalleryItem.js","sourceRoot":"","sources":["../src/MediaGalleryItem.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport \"@ui5/webcomponents-icons/dist/background.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 MediaGalleryItemLayout from \"./types/MediaGalleryItemLayout.js\";\nimport type { IMediaGalleryItem } from \"./Interfaces.js\";\n\n// Styles\nimport MediaGalleryItemCss from \"./generated/themes/MediaGalleryItem.css.js\";\n\n// Template\nimport MediaGalleryItemTemplate from \"./generated/templates/MediaGalleryItemTemplate.lit.js\";\n\n/*\n @class\n * <h3 class=\"comment-api-title\">Overview</h3>\n * The <code>ui5-media-gallery-item</code> web component represents the items displayed in the\n * <code>ui5-media-gallery</code> web component.\n * <br><br>\n * <b>Note:</b> <code>ui5-media-gallery-item</code> is not supported when used outside of <code>ui5-media-gallery</code>.\n * <br><br>\n \n <h3>Keyboard Handling</h3>\n * The <code>ui5-media-gallery</code> provides advanced keyboard handling.\n * When focused, the user can use the following keyboard\n * shortcuts in order to perform a navigation:\n * <br>\n * <ul>\n * <li>[SPACE/ENTER/RETURN] - Trigger <code>ui5-click</code> event</li>\n * </ul>\n \n <h3>ES6 Module Import</h3>\n * <code>import \"@ui5/webcomponents-fiori/dist/MediaGalleryItem.js\";</code> (comes with <code>ui5-media-gallery</code>)\n \n @constructor\n * @extends UI5Element\n * @public\n * @implements {IMediaGalleryItem}\n * @since 1.1.0\n /\n@customElement({\n\ttag: \"ui5-media-gallery-item\",\n\trenderer: litRender,\n\tstyles: MediaGalleryItemCss,\n\ttemplate: MediaGalleryItemTemplate,\n\tdependencies: [Icon],\n})\nclass MediaGalleryItem extends UI5Element implements IMediaGalleryItem {\n\t/\n\t Defines the selected state of the component.\n\t \n\t @default false\n\t * @public\n\t /\n\t@property({ type: Boolean })\n\tselected!: boolean;\n\n\t/\n\t Defines whether the component is in disabled state.\n\t \n\t @default false\n\t * @public\n\t /\n\t@property({ type: Boolean })\n\tdisabled!: boolean;\n\n\t/\n\t Determines the layout of the item container.\n\t * <br><br>\n\t * Available options are:\n\t * <ul>\n\t * <li><code>Square</code></li>\n\t * <li><code>Wide</code></li>\n\t * </ul>\n\t \n\t @default \"Square\"\n\t * @public\n\t /\n\t@property({ type: MediaGalleryItemLayout, defaultValue: MediaGalleryItemLayout.Square })\n\tlayout!: `${MediaGalleryItemLayout}`;\n\n\t/\n\t @private\n\t /\n\t@property({ type: Boolean })\n\t_interactive!: boolean;\n\n\t/\n\t @private\n\t /\n\t@property({ type: Boolean })\n\t_square!: boolean;\n\n\t/\n\t @private\n\t /\n\t@property({ type: Boolean })\n\t_contentImageNotFound!: boolean;\n\n\t/\n\t @private\n\t /\n\t@property({ type: Boolean })\n\t_thumbnailNotFound!: boolean;\n\n\t/\n\t @private\n\t /\n\t@property({ type: Boolean })\n\t_thumbnailDesign!: boolean;\n\n\t/\n\t @private\n\t /\n\t@property({ type: Boolean })\n\tfocused!: boolean;\n\n\t/\n\t @private\n\t /\n\t@property()\n\t_tabIndex!: string;\n\n\t/\n\t @private\n\t /\n\t@property({ noAttribute: true })\n\tcontentHeight!: string;\n\n\t/\n\t Defines the content of the component.\n\t \n\t @public\n\t /\n\t@slot({ type: HTMLElement, \"default\": true })\n\tcontent!: Array<HTMLElement>;\n\n\t/\n\t Defines the content of the thumbnail.\n\t \n\t @public\n\t */\n\t@slot()\n\tthumbnail!: Array<HTMLElement>;\n\n\t_monitoredThumbnail: HTMLElement \| null;\n\t_monitoredContent: HTMLElement \| null;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._monitoredContent = null;\n\t\tthis._monitoredThumbnail = null;\n\t}\n\n\tonEnterDOM() {\n\t\tthis._thumbnailDesign = !isPhone();\n\t\tthis._interactive = !isPhone();\n\t\tthis._square = true;\n\t}\n\n\tget _thumbnail() {\n\t\treturn this.thumbnail.length ? this.thumbnail[0] : null;\n\t}\n\n\tget _content() {\n\t\treturn this.content.length ? this.content[0] : null;\n\t}\n\n\tget _isThubmnailAvailable() {\n\t\treturn this._thumbnail && !this._thumbnailNotFound;\n\t}\n\n\tget _isContentAvailable() {\n\t\treturn this._content && !this._contentImageNotFound;\n\t}\n\n\tget _useThumbnail() {\n\t\treturn this._thumbnailDesign && this._isThubmnailAvailable;\n\t}\n\n\tget _useContent() {\n\t\treturn !this._useThumbnail && this._isContentAvailable;\n\t}\n\n\tget effectiveTabIndex() {\n\t\treturn this.disabled ? undefined : this._tabIndex;\n\t}\n\n\tget _showBackgroundIcon() {\n\t\treturn this._thumbnailNotFound \|\| this._contentImageNotFound;\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\twrapper: {\n\t\t\t\theight: this.contentHeight,\n\t\t\t},\n\t\t};\n\t}\n\n\tget _role() {\n\t\treturn this._interactive ? \"button\" : undefined;\n\t}\n\n\tonBeforeRendering() {\n\t\tthis._monitorLoadingError();\n\t}\n\n\t_monitorLoadingError() {\n\t\tlet callback,\n\t\t\tsuccess;\n\t\tif (this._thumbnailDesign && this.thumbnail.length && (this._monitoredThumbnail !== this._thumbnail)) {\n\t\t\tthis._thumbnailNotFound = false; // reset flag\n\t\t\tcallback = this._updateThumbnailLoaded.bind(this);\n\t\t\tsuccess = this._attachListeners(this._thumbnail as HTMLImageElement, callback);\n\t\t\tsuccess && (this._monitoredThumbnail = this._thumbnail);\n\t\t}\n\t\tif (!this._useThumbnail && this.content.length && (this._monitoredContent !== this._content)) {\n\t\t\tthis._contentImageNotFound = false; // reset flag\n\t\t\tcallback = this._updateContentImageLoaded.bind(this);\n\t\t\tsuccess = this._attachListeners(this._content as HTMLImageElement, callback);\n\t\t\tsuccess && (this._monitoredContent = this._content);\n\t\t}\n\t}\n\n\t_attachListeners(element: HTMLImageElement, callback: (image: HTMLImageElement) => void) {\n\t\tconst isImg = element.tagName === \"IMG\",\n\t\t\timg = isImg ? element : element.querySelector(\"img\");\n\t\tif (img) {\n\t\t\tcallback(img);\n\t\t\timg.addEventListener(\"error\", () => {\n\t\t\t\tif (this.contains(img)) { // img still belongs to us\n\t\t\t\t\tcallback(img);\n\t\t\t\t}\n\t\t\t});\n\t\t\timg.addEventListener(\"load\", () => {\n\t\t\t\tif (this.contains(img)) { // img still belongs to us\n\t\t\t\t\tcallback(img);\n\t\t\t\t}\n\t\t\t});\n\t\t\treturn true;\n\t\t}\n\t}\n\n\t_updateContentImageLoaded(image: HTMLImageElement) {\n\t\tthis._contentImageNotFound = image.naturalHeight === 0 && image.naturalWidth === 0;\n\t}\n\n\t_updateThumbnailLoaded(image: HTMLImageElement) {\n\t\tthis._thumbnailNotFound = image.naturalHeight === 0 && image.naturalWidth === 0;\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis._fireItemClick();\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\tthis._fireItemClick();\n\t\t}\n\t}\n\n\t_onfocusout() {\n\t\tthis.focused = false;\n\t}\n\n\t_onfocusin() {\n\t\tthis.focused = true;\n\t}\n\n\t_fireItemClick() {\n\t\tthis.fireEvent(\"click\", { item: this });\n\t}\n}\n\nMediaGalleryItem.define();\n\nexport default MediaGalleryItem;\n"]}
1	+ {"version":3,"file":"MediaGalleryItem.js","sourceRoot":"","sources":["../src/MediaGalleryItem.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport \"@ui5/webcomponents-icons/dist/background.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 MediaGalleryItemLayout from \"./types/MediaGalleryItemLayout.js\";\nimport type { IMediaGalleryItem } from \"./MediaGallery.js\";\n\n// Styles\nimport MediaGalleryItemCss from \"./generated/themes/MediaGalleryItem.css.js\";\n\n// Template\nimport MediaGalleryItemTemplate from \"./generated/templates/MediaGalleryItemTemplate.lit.js\";\n\n/*\n @class\n * <h3 class=\"comment-api-title\">Overview</h3>\n * The <code>ui5-media-gallery-item</code> web component represents the items displayed in the\n * <code>ui5-media-gallery</code> web component.\n * <br><br>\n * <b>Note:</b> <code>ui5-media-gallery-item</code> is not supported when used outside of <code>ui5-media-gallery</code>.\n * <br><br>\n \n <h3>Keyboard Handling</h3>\n * The <code>ui5-media-gallery</code> provides advanced keyboard handling.\n * When focused, the user can use the following keyboard\n * shortcuts in order to perform a navigation:\n * <br>\n * <ul>\n * <li>[SPACE/ENTER/RETURN] - Trigger <code>ui5-click</code> event</li>\n * </ul>\n \n <h3>ES6 Module Import</h3>\n * <code>import \"@ui5/webcomponents-fiori/dist/MediaGalleryItem.js\";</code> (comes with <code>ui5-media-gallery</code>)\n \n @constructor\n * @extends UI5Element\n * @public\n * @implements {IMediaGalleryItem}\n * @since 1.1.0\n /\n@customElement({\n\ttag: \"ui5-media-gallery-item\",\n\trenderer: litRender,\n\tstyles: MediaGalleryItemCss,\n\ttemplate: MediaGalleryItemTemplate,\n\tdependencies: [Icon],\n})\nclass MediaGalleryItem extends UI5Element implements IMediaGalleryItem {\n\t/\n\t Defines the selected state of the component.\n\t \n\t @default false\n\t * @public\n\t /\n\t@property({ type: Boolean })\n\tselected!: boolean;\n\n\t/\n\t Defines whether the component is in disabled state.\n\t \n\t @default false\n\t * @public\n\t /\n\t@property({ type: Boolean })\n\tdisabled!: boolean;\n\n\t/\n\t Determines the layout of the item container.\n\t * <br><br>\n\t * Available options are:\n\t * <ul>\n\t * <li><code>Square</code></li>\n\t * <li><code>Wide</code></li>\n\t * </ul>\n\t \n\t @default \"Square\"\n\t * @public\n\t /\n\t@property({ type: MediaGalleryItemLayout, defaultValue: MediaGalleryItemLayout.Square })\n\tlayout!: `${MediaGalleryItemLayout}`;\n\n\t/\n\t @private\n\t /\n\t@property({ type: Boolean })\n\t_interactive!: boolean;\n\n\t/\n\t @private\n\t /\n\t@property({ type: Boolean })\n\t_square!: boolean;\n\n\t/\n\t @private\n\t /\n\t@property({ type: Boolean })\n\t_contentImageNotFound!: boolean;\n\n\t/\n\t @private\n\t /\n\t@property({ type: Boolean })\n\t_thumbnailNotFound!: boolean;\n\n\t/\n\t @private\n\t /\n\t@property({ type: Boolean })\n\t_thumbnailDesign!: boolean;\n\n\t/\n\t @private\n\t /\n\t@property({ type: Boolean })\n\tfocused!: boolean;\n\n\t/\n\t @private\n\t /\n\t@property()\n\tforcedTabIndex!: string;\n\n\t/\n\t @private\n\t /\n\t@property({ noAttribute: true })\n\tcontentHeight!: string;\n\n\t/\n\t Defines the content of the component.\n\t \n\t @public\n\t /\n\t@slot({ type: HTMLElement, \"default\": true })\n\tcontent!: Array<HTMLElement>;\n\n\t/\n\t Defines the content of the thumbnail.\n\t \n\t @public\n\t */\n\t@slot()\n\tthumbnail!: Array<HTMLElement>;\n\n\t_monitoredThumbnail: HTMLElement \| null;\n\t_monitoredContent: HTMLElement \| null;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._monitoredContent = null;\n\t\tthis._monitoredThumbnail = null;\n\t}\n\n\tonEnterDOM() {\n\t\tthis._thumbnailDesign = !isPhone();\n\t\tthis._interactive = !isPhone();\n\t\tthis._square = true;\n\t}\n\n\tget _thumbnail() {\n\t\treturn this.thumbnail.length ? this.thumbnail[0] : null;\n\t}\n\n\tget displayedContent() {\n\t\treturn this.content.length ? this.content[0] : null;\n\t}\n\n\tget _isThubmnailAvailable() {\n\t\treturn this._thumbnail && !this._thumbnailNotFound;\n\t}\n\n\tget _isContentAvailable() {\n\t\treturn this.displayedContent && !this._contentImageNotFound;\n\t}\n\n\tget _useThumbnail() {\n\t\treturn this._thumbnailDesign && this._isThubmnailAvailable;\n\t}\n\n\tget _useContent() {\n\t\treturn !this._useThumbnail && this._isContentAvailable;\n\t}\n\n\tget effectiveTabIndex() {\n\t\treturn this.disabled ? undefined : this.forcedTabIndex;\n\t}\n\n\tget _showBackgroundIcon() {\n\t\treturn this._thumbnailNotFound \|\| this._contentImageNotFound;\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\twrapper: {\n\t\t\t\theight: this.contentHeight,\n\t\t\t},\n\t\t};\n\t}\n\n\tget _role() {\n\t\treturn this._interactive ? \"button\" : undefined;\n\t}\n\n\tonBeforeRendering() {\n\t\tthis._monitorLoadingError();\n\t}\n\n\t_monitorLoadingError() {\n\t\tlet callback,\n\t\t\tsuccess;\n\t\tif (this._thumbnailDesign && this.thumbnail.length && (this._monitoredThumbnail !== this._thumbnail)) {\n\t\t\tthis._thumbnailNotFound = false; // reset flag\n\t\t\tcallback = this._updateThumbnailLoaded.bind(this);\n\t\t\tsuccess = this._attachListeners(this._thumbnail as HTMLImageElement, callback);\n\t\t\tsuccess && (this._monitoredThumbnail = this._thumbnail);\n\t\t}\n\t\tif (!this._useThumbnail && this.content.length && (this._monitoredContent !== this.displayedContent)) {\n\t\t\tthis._contentImageNotFound = false; // reset flag\n\t\t\tcallback = this._updateContentImageLoaded.bind(this);\n\t\t\tsuccess = this._attachListeners(this.displayedContent as HTMLImageElement, callback);\n\t\t\tsuccess && (this._monitoredContent = this.displayedContent);\n\t\t}\n\t}\n\n\t_attachListeners(element: HTMLImageElement, callback: (image: HTMLImageElement) => void) {\n\t\tconst isImg = element.tagName === \"IMG\",\n\t\t\timg = isImg ? element : element.querySelector(\"img\");\n\t\tif (img) {\n\t\t\tcallback(img);\n\t\t\timg.addEventListener(\"error\", () => {\n\t\t\t\tif (this.contains(img)) { // img still belongs to us\n\t\t\t\t\tcallback(img);\n\t\t\t\t}\n\t\t\t});\n\t\t\timg.addEventListener(\"load\", () => {\n\t\t\t\tif (this.contains(img)) { // img still belongs to us\n\t\t\t\t\tcallback(img);\n\t\t\t\t}\n\t\t\t});\n\t\t\treturn true;\n\t\t}\n\t}\n\n\t_updateContentImageLoaded(image: HTMLImageElement) {\n\t\tthis._contentImageNotFound = image.naturalHeight === 0 && image.naturalWidth === 0;\n\t}\n\n\t_updateThumbnailLoaded(image: HTMLImageElement) {\n\t\tthis._thumbnailNotFound = image.naturalHeight === 0 && image.naturalWidth === 0;\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis._fireItemClick();\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\tthis._fireItemClick();\n\t\t}\n\t}\n\n\t_onfocusout() {\n\t\tthis.focused = false;\n\t}\n\n\t_onfocusin() {\n\t\tthis.focused = true;\n\t}\n\n\t_fireItemClick() {\n\t\tthis.fireEvent(\"click\", { item: this });\n\t}\n}\n\nMediaGalleryItem.define();\n\nexport default MediaGalleryItem;\n"]}

package/dist/NotificationAction.d.ts CHANGED Viewed

@@ -11,6 +11,7 @@ type NotificationActionClickEventDetail = {
  *
  * @constructor
  * @extends UI5Element
+ * @abstract
  * @public
  */
 declare class NotificationAction extends UI5Element {

package/dist/NotificationAction.js CHANGED Viewed

@@ -16,6 +16,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event.js";
  *
  * @constructor
  * @extends UI5Element
+ * @abstract
  * @public
  */
 let NotificationAction = class NotificationAction extends UI5Element {