npm - @ui5/webcomponents-fiori - Versions diffs - 1.23.0-rc.5 → 1.23.0 - Mend

@ui5/webcomponents-fiori 1.23.0-rc.5 → 1.23.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 (739) hide show

package/dist/IllustratedMessage.js.map CHANGED Viewed

	@@ -1 +1 @@
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 <br/>\n\t\n\t <b>Note:</b> Doesn't take effect when <code>title</code> slot is being used.\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 ### Overview\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 * `titleText` and `subtitleText` properties.\n \n To display the desired illustration, use the `name` property, where you can find the list of all available illustrations.\n \n Note: By default the “BeforeSearch” illustration is loaded. To use other illustrations, make sure you import them in addition, for example:\n \n `import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\"`\n \n Note: Illustrations starting with the “Tnt” prefix are part of another illustration set. For example to use the “TntSuccess” illustration, add the following import::\n \n `import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/Success.js\"`\n \n ### Structure\n * The IllustratedMessage consists of the following elements, which are displayed below each other in the following order:\n \n - Illustration\n * - Title\n * - Subtitle\n * - Actions\n \n ### Usage\n * `ui5-illustrated-message` is meant to be used inside container component, for example a `ui5-card`,\n * a `ui5-dialog` or a `ui5-page`\n \n ### ES6 Module Import\n \n `import \"@ui5/webcomponents-fiori/dist/IllustratedMessage.js\";`\n * @csspart subtitle - Used to style the subtitle wrapper of the `ui5-illustrated-message`\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\n\t Example:\n\t\n\t `name='BeforeSearch'`, `name='UnableToUpload'`, etc..\n\t\n\t Note: To use the TNT illustrations,\n\t* you need to set the `tnt` or `Tnt` prefix in front of the icon's name.\n\t\n\t Example:\n\t\n\t `name='tnt/Avatar'` or `name='TntAvatar'`.\n\t\n\t Note: By default the `BeforeSearch` illustration is loaded.\n\t* When using an illustration type, other than the default, it should be loaded in addition:\n\t\n\t `import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\";`\n\t\n\t For TNT illustrations:\n\t\n\t `import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/SessionExpired.js\";`\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\n\t As `IllustratedMessage` adapts itself around the `Illustration`, the other\n\t* elements of the component are displayed differently on the different breakpoints/illustration sizes.\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\n\t Note: Using this property, the default subtitle text of illustration will be overwritten.\n\t\n\t Note: Using `subtitle` 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\n\t Note: 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* @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 Note: Used for accessibility purposes only.\n\t\n\t Note: Doesn't take effect when `title` slot is being used.\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>Dot</code> size.\n\t\n\t @private\n\t* @since 1.24.0\n\t/\n\t@property({ noAttribute: true })\n\tdotSvg!: string;\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 `Scene` size.\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 `Dialog` size.\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\n\t Note: Using this slot, the default title text of illustration and the value of `title` 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\n\t Note: Using this slot, the default subtitle text of illustration and the value of `subtitleText` 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: 681,\n\t\t\tSPOT: 360,\n\t\t\tDOT: 260,\n\t\t\tBASE: 160,\n\t\t};\n\t}\n\n\tstatic get BREAKPOINTS_HEIGHT() {\n\t\treturn {\n\t\t\tDIALOG: 415,\n\t\t\tSPOT: 284,\n\t\t\tDOT: 207,\n\t\t\tBASE: 61,\n\t\t};\n\t}\n\n\tstatic get MEDIA() {\n\t\treturn {\n\t\t\tBASE: \"base\",\n\t\t\tDOT: \"dot\",\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.dotSvg = illustrationData!.dotSvg;\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.DOT) {\n\t\t\tnewMedia = IllustratedMessage.MEDIA.DOT;\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.Dot:\n\t\t\tthis.media = IllustratedMessage.MEDIA.DOT;\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.DOT:\n\t\t\treturn this.dotSvg;\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

@@ -10,8 +10,7 @@ import MediaGalleryLayout from "./types/MediaGalleryLayout.js";
 import MediaGalleryMenuHorizontalAlign from "./types/MediaGalleryMenuHorizontalAlign.js";
 import MediaGalleryMenuVerticalAlign from "./types/MediaGalleryMenuVerticalAlign.js";
 /**
- * Interface for components that can be slotted inside <code>ui5-media-gallery</code> as items.
- *
+ * Interface for components that can be slotted inside `ui5-media-gallery` as items.
  * @public
  */
 interface IMediaGalleryItem extends HTMLElement, ITabbable {
@@ -27,38 +26,33 @@ type MediaGallerySelectionChangeEventDetail = {
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-media-gallery</code> component allows the user to browse through multimedia items. Currently,
- * the supported items are images and videos. The items should be defined using the <code>ui5-media-gallery-item</code>
+ * The `ui5-media-gallery` component allows the user to browse through multimedia items. Currently,
+ * the supported items are images and videos. The items should be defined using the `ui5-media-gallery-item`
  * component.
  *
  * The items are initially displayed as thumbnails. When the user selects a thumbnail, the corresponding item
  * is displayed in larger size.
- * <br>
+ *
  * The component is responsive by default and adjusts the position of the menu with respect to viewport size,
  * but the application is able to further customize the layout via the provided API.
  *
-* <h3>Keyboard Handling</h3>
- * The <code>ui5-media-gallery</code> provides advanced keyboard handling.
- * <br>
+ * ### Keyboard Handling
+ * The `ui5-media-gallery` provides advanced keyboard handling.
+ *
  * When the thumbnails menu is focused the following keyboard
  * shortcuts allow the user to navigate through the thumbnail items:
- * <br>
  *
- * <ul>
- * <li>[UP/DOWN] - Navigates up and down the items</li>
- * <li>[HOME] - Navigates to first item</li>
- * <li>[END] - Navigates to the last item</li>
- * <li>[SPACE/ENTER] - Select an item</li>
- * </ul>
- * <br>
+ * - [UP/DOWN] - Navigates up and down the items
+ * - [HOME] - Navigates to first item
+ * - [END] - Navigates to the last item
+ * - [SPACE/ENTER] - Select an item
  *
- * <h3>ES6 Module Import</h3>
- * <code>import "@ui5/webcomponents-fiori/dist/MediaGallery";</code>
- * <br>
- * <code>import "@ui5/webcomponents-fiori/dist/MediaGalleryItem";</code>
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents-fiori/dist/MediaGallery.js";`
  *
+ * `import "@ui5/webcomponents-fiori/dist/MediaGalleryItem.js";`
  * @constructor
  * @extends UI5Element
  * @public
@@ -66,28 +60,25 @@ type MediaGallerySelectionChangeEventDetail = {
  */
 declare class MediaGallery extends UI5Element {
     /**
-     * If set to <code>true</code>, all thumbnails are rendered in a scrollable container.
-     * If <code>false</code>, only up to five thumbnails are rendered, followed by
+     * If set to `true`, all thumbnails are rendered in a scrollable container.
+     * If `false`, only up to five thumbnails are rendered, followed by
      * an overflow button that shows the count of the remaining thumbnails.
-     *
      * @default false
      * @public
      */
     showAllThumbnails: boolean;
     /**
-     * If enabled, a <code>display-area-click</code> event is fired
+     * If enabled, a `display-area-click` event is fired
      * when the user clicks or taps on the display area.
-     * <br>
+     *
      * The display area is the central area that contains
      * the enlarged content of the currently selected item.
-     *
      * @default false
      * @public
      */
     interactiveDisplayArea: boolean;
     /**
      * Determines the layout of the component.
-     *
      * @default "Auto"
      * @public
      */
@@ -95,7 +86,6 @@ declare class MediaGallery extends UI5Element {
     /**
      * Determines the horizontal alignment of the thumbnails menu
      * vs. the central display area.
-     *
      * @default "Left"
      * @public
      */
@@ -103,7 +93,6 @@ declare class MediaGallery extends UI5Element {
     /**
      * Determines the vertical alignment of the thumbnails menu
      * vs. the central display area.
-     *
      * @default "Bottom"
      * @public
      */
@@ -111,33 +100,27 @@ declare class MediaGallery extends UI5Element {
     /**
      * Determines the actual applied layout type
      * (esp. needed when the app did not specify a fixed layout type
-     * but selected <code>Auto</code> layout type).
-     *
+     * but selected `Auto` layout type).
      * @default "Vertical"
      * @private
      */
     effectiveLayout: `${MediaGalleryLayout}`;
     /**
      * Defines the current media query size.
-     *
      * @private
      */
     mediaRange: string;
     /**
      * The number of items in the overflow.
-     *
      * @private
      */
     _overflowSize: number;
     /**
      * Defines the component items.
      *
-     * <br><br>
-     * <b>Note:</b> Only one selected item is allowed.
-     *
-     * <br><br>
-     * <b>Note:</b> Use the <code>ui5-media-gallery-item</code> component to define the desired items.
+     * **Note:** Only one selected item is allowed.
      *
+     * **Note:** Use the `ui5-media-gallery-item` component to define the desired items.
      * @public
      */
     items: Array<IMediaGalleryItem>;

package/dist/MediaGallery.js CHANGED Viewed

@@ -29,7 +29,7 @@ import MediaGalleryCss from "./generated/themes/MediaGallery.css.js";
 // Template
 import MediaGalleryTemplate from "./generated/templates/MediaGalleryTemplate.lit.js";
 // The allowed number of thumbnail columns on each size
-// (relevant when <code>showAllThumbnails</code> is enabled)
+// (relevant when `showAllThumbnails` is enabled)
 const COLUMNS_COUNT = {
     "S": 1,
     "M": 2,
@@ -39,38 +39,33 @@ const COLUMNS_COUNT = {
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-media-gallery</code> component allows the user to browse through multimedia items. Currently,
- * the supported items are images and videos. The items should be defined using the <code>ui5-media-gallery-item</code>
+ * The `ui5-media-gallery` component allows the user to browse through multimedia items. Currently,
+ * the supported items are images and videos. The items should be defined using the `ui5-media-gallery-item`
  * component.
  *
  * The items are initially displayed as thumbnails. When the user selects a thumbnail, the corresponding item
  * is displayed in larger size.
- * <br>
+ *
  * The component is responsive by default and adjusts the position of the menu with respect to viewport size,
  * but the application is able to further customize the layout via the provided API.
  *
-* <h3>Keyboard Handling</h3>
- * The <code>ui5-media-gallery</code> provides advanced keyboard handling.
- * <br>
+ * ### Keyboard Handling
+ * The `ui5-media-gallery` provides advanced keyboard handling.
+ *
  * When the thumbnails menu is focused the following keyboard
  * shortcuts allow the user to navigate through the thumbnail items:
- * <br>
  *
- * <ul>
- * <li>[UP/DOWN] - Navigates up and down the items</li>
- * <li>[HOME] - Navigates to first item</li>
- * <li>[END] - Navigates to the last item</li>
- * <li>[SPACE/ENTER] - Select an item</li>
- * </ul>
- * <br>
+ * - [UP/DOWN] - Navigates up and down the items
+ * - [HOME] - Navigates to first item
+ * - [END] - Navigates to the last item
+ * - [SPACE/ENTER] - Select an item
  *
- * <h3>ES6 Module Import</h3>
- * <code>import "@ui5/webcomponents-fiori/dist/MediaGallery";</code>
- * <br>
- * <code>import "@ui5/webcomponents-fiori/dist/MediaGalleryItem";</code>
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents-fiori/dist/MediaGallery.js";`
  *
+ * `import "@ui5/webcomponents-fiori/dist/MediaGalleryItem.js";`
  * @constructor
  * @extends UI5Element
  * @public
@@ -352,7 +347,6 @@ MediaGallery = MediaGallery_1 = __decorate([
     })
     /**
      * Fired when selection is changed by user interaction.
-     *
      * @param {HTMLElement} item the selected item.
      * @public
      */
@@ -367,16 +361,14 @@ MediaGallery = MediaGallery_1 = __decorate([
     })
     /**
      * Fired when the thumbnails overflow button is clicked.
-     *
      * @public
      */
     ,
     event("overflow-click")
     /**
-     * Fired when the display area is clicked.<br>
+     * Fired when the display area is clicked.
      * The display area is the central area that contains
      * the enlarged content of the currently selected item.
-     *
      * @public
      */
     ,

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\";\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"]}
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 `ui5-media-gallery` as items.\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 `showAllThumbnails` 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 ### Overview\n \n The `ui5-media-gallery` 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 `ui5-media-gallery-item`\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 \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 ### Keyboard Handling\n * The `ui5-media-gallery` provides advanced keyboard handling.\n \n When the thumbnails menu is focused the following keyboard\n * shortcuts allow the user to navigate through the thumbnail items:\n \n - [UP/DOWN] - Navigates up and down the items\n * - [HOME] - Navigates to first item\n * - [END] - Navigates to the last item\n * - [SPACE/ENTER] - Select an item\n \n ### ES6 Module Import\n * `import \"@ui5/webcomponents-fiori/dist/MediaGallery.js\";`\n \n `import \"@ui5/webcomponents-fiori/dist/MediaGalleryItem.js\";`\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 * @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 * @public\n /\n@event(\"overflow-click\")\n\n/\n Fired when the display area is clicked.\n * The display area is the central area that contains\n * the enlarged content of the currently selected item.\n * @public\n /\n@event(\"display-area-click\")\n\nclass MediaGallery extends UI5Element {\n\t/\n\t If set to `true`, all thumbnails are rendered in a scrollable container.\n\t * If `false`, only up to five thumbnails are rendered, followed by\n\t * an overflow button that shows the count of the remaining thumbnails.\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 `display-area-click` event is fired\n\t * when the user clicks or taps on the display area.\n\t \n\t The display area is the central area that contains\n\t * the enlarged content of the currently selected item.\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 * @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 * @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 * @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 `Auto` layout type).\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 * @private\n\t /\n\t@property()\n\tmediaRange!: string;\n\n\t/\n\t The number of items in the overflow.\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 Note: Only one selected item is allowed.\n\t \n\t Note: Use the `ui5-media-gallery-item` component to define the desired items.\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

@@ -4,25 +4,21 @@ import MediaGalleryItemLayout from "./types/MediaGalleryItemLayout.js";
 import type { IMediaGalleryItem } from "./MediaGallery.js";
 /**
  * @class
- * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-media-gallery-item</code> web component represents the items displayed in the
- * <code>ui5-media-gallery</code> web component.
- * <br><br>
- * <b>Note:</b> <code>ui5-media-gallery-item</code> is not supported when used outside of <code>ui5-media-gallery</code>.
- * <br><br>
+ * ### Overview
+ * The `ui5-media-gallery-item` web component represents the items displayed in the
+ * `ui5-media-gallery` web component.
  *
- * <h3>Keyboard Handling</h3>
- * The <code>ui5-media-gallery</code> provides advanced keyboard handling.
+ * **Note:** `ui5-media-gallery-item` is not supported when used outside of `ui5-media-gallery`.
+ *
+ * ### Keyboard Handling
+ * The `ui5-media-gallery` provides advanced keyboard handling.
  * When focused, the user can use the following keyboard
  * shortcuts in order to perform a navigation:
- * <br>
- * <ul>
- * <li>[SPACE/ENTER/RETURN] - Trigger <code>ui5-click</code> event</li>
- * </ul>
  *
- * <h3>ES6 Module Import</h3>
- * <code>import "@ui5/webcomponents-fiori/dist/MediaGalleryItem.js";</code> (comes with <code>ui5-media-gallery</code>)
+ * - [SPACE/ENTER/RETURN] - Trigger `ui5-click` event
  *
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents-fiori/dist/MediaGalleryItem.js";` (comes with `ui5-media-gallery`)
  * @constructor
  * @extends UI5Element
  * @public
@@ -32,27 +28,18 @@ import type { IMediaGalleryItem } from "./MediaGallery.js";
 declare class MediaGalleryItem extends UI5Element implements IMediaGalleryItem {
     /**
      * Defines the selected state of the component.
-     *
      * @default false
      * @public
      */
     selected: boolean;
     /**
      * Defines whether the component is in disabled state.
-     *
      * @default false
      * @public
      */
     disabled: boolean;
     /**
      * Determines the layout of the item container.
-     * <br><br>
-     * Available options are:
-     * <ul>
-     * <li><code>Square</code></li>
-     * <li><code>Wide</code></li>
-     * </ul>
-     *
      * @default "Square"
      * @public
      */
@@ -91,13 +78,11 @@ declare class MediaGalleryItem extends UI5Element implements IMediaGalleryItem {
     contentHeight: string;
     /**
      * Defines the content of the component.
-     *
      * @public
      */
     content: Array<HTMLElement>;
     /**
      * Defines the content of the thumbnail.
-     *
      * @public
      */
     thumbnail: Array<HTMLElement>;

package/dist/MediaGalleryItem.js CHANGED Viewed

@@ -20,25 +20,21 @@ import MediaGalleryItemCss from "./generated/themes/MediaGalleryItem.css.js";
 import MediaGalleryItemTemplate from "./generated/templates/MediaGalleryItemTemplate.lit.js";
 /**
  * @class
- * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-media-gallery-item</code> web component represents the items displayed in the
- * <code>ui5-media-gallery</code> web component.
- * <br><br>
- * <b>Note:</b> <code>ui5-media-gallery-item</code> is not supported when used outside of <code>ui5-media-gallery</code>.
- * <br><br>
+ * ### Overview
+ * The `ui5-media-gallery-item` web component represents the items displayed in the
+ * `ui5-media-gallery` web component.
  *
- * <h3>Keyboard Handling</h3>
- * The <code>ui5-media-gallery</code> provides advanced keyboard handling.
+ * **Note:** `ui5-media-gallery-item` is not supported when used outside of `ui5-media-gallery`.
+ *
+ * ### Keyboard Handling
+ * The `ui5-media-gallery` provides advanced keyboard handling.
  * When focused, the user can use the following keyboard
  * shortcuts in order to perform a navigation:
- * <br>
- * <ul>
- * <li>[SPACE/ENTER/RETURN] - Trigger <code>ui5-click</code> event</li>
- * </ul>
  *
- * <h3>ES6 Module Import</h3>
- * <code>import "@ui5/webcomponents-fiori/dist/MediaGalleryItem.js";</code> (comes with <code>ui5-media-gallery</code>)
+ * - [SPACE/ENTER/RETURN] - Trigger `ui5-click` event
  *
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents-fiori/dist/MediaGalleryItem.js";` (comes with `ui5-media-gallery`)
  * @constructor
  * @extends UI5Element
  * @public