@ui5/webcomponents-fiori 0.0.0-037d08c67

package/dist/MediaGallery.d.ts

@@ -0,0 +1,178 @@
+import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import type { CarouselNavigateEventDetail } from "@ui5/webcomponents/dist/Carousel.js";
+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 type MediaGalleryMenuHorizontalAlign from "./types/MediaGalleryMenuHorizontalAlign.js";
+import type MediaGalleryMenuVerticalAlign from "./types/MediaGalleryMenuVerticalAlign.js";
+/**
+ * Interface for components that can be slotted inside `ui5-media-gallery` as items.
+ * @public
+ */
+interface IMediaGalleryItem extends UI5Element, ITabbable {
+    selected: boolean;
+    disabled: boolean;
+    displayedContent: HTMLElement | null;
+    layout: `${MediaGalleryItemLayout}`;
+}
+type MediaGallerySelectionChangeEventDetail = {
+    item: IMediaGalleryItem;
+};
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * 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.
+ *
+ * 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.
+ *
+ * ### 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:
+ *
+ * - [Up] or [Down] - Navigates up and down the items
+ * - [Home] - Navigates to first item
+ * - [End] - Navigates to the last item
+ * - [Space], [Enter] - Selects an item
+ *
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents-fiori/dist/MediaGallery.js";`
+ *
+ * `import "@ui5/webcomponents-fiori/dist/MediaGalleryItem.js";`
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @since 1.1.0
+ */
+declare class MediaGallery extends UI5Element {
+    eventDetails: {
+        "selection-change": MediaGallerySelectionChangeEventDetail;
+        "overflow-click": void;
+        "display-area-click": void;
+    };
+    /**
+     * 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 `display-area-click` event is fired
+     * when the user clicks or taps on the display area.
+     *
+     * 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
+     */
+    layout: `${MediaGalleryLayout}`;
+    /**
+     * Determines the horizontal alignment of the thumbnails menu
+     * vs. the central display area.
+     * @default "Left"
+     * @public
+     */
+    menuHorizontalAlign: `${MediaGalleryMenuHorizontalAlign}`;
+    /**
+     * Determines the vertical alignment of the thumbnails menu
+     * vs. the central display area.
+     * @default "Bottom"
+     * @public
+     */
+    menuVerticalAlign: `${MediaGalleryMenuVerticalAlign}`;
+    /**
+     * Determines the actual applied layout type
+     * (esp. needed when the app did not specify a fixed 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.
+     *
+     * **Note:** Only one selected item is allowed.
+     *
+     * **Note:** Use the `ui5-media-gallery-item` component to define the desired items.
+     * @public
+     */
+    items: DefaultSlot<IMediaGalleryItem>;
+    _itemNavigation: ItemNavigation;
+    _onResize: () => void;
+    _selectedItem?: IMediaGalleryItem;
+    constructor();
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    onAfterRendering(): void;
+    _updateSelection(): void;
+    _isSelectableItem(this: void, item: IMediaGalleryItem): boolean;
+    _findSelectableItem(): IMediaGalleryItem | undefined;
+    _updateMediaRange(width: number): void;
+    _updateLayout(): void;
+    _calculateOverflowSize(width: number, height: number): number;
+    _toggleDisplaySquareSize(enable: boolean): void;
+    _toggleMainItem9x16size(enable: boolean): void;
+    _infereffectiveLayout(): "Vertical" | "Horizontal" | MediaGalleryLayout.Vertical | MediaGalleryLayout.Horizontal;
+    _getMaxAllowedThumbnailsInColumn(columnHeight: number): number;
+    _getOverflowSize(columnHeight: number, columnsCount: number): number;
+    _getFocusableItems(): ITabbable[];
+    getFocusDomRef(): HTMLElement | undefined;
+    _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(): IMediaGalleryItem[];
+    get _carousel(): Carousel | null;
+    get _display(): HTMLElement | null;
+    get _mainItem(): MediaGalleryItem | null;
+    get _overflowBtn(): Button | null;
+    get _visibleItems(): IMediaGalleryItem[];
+    get _isPhonePlatform(): boolean;
+    get _showThumbnails(): boolean;
+    get _showOverflowBtn(): boolean;
+    get _isPhoneSize(): boolean;
+    get _mainItemHasWideLayout(): boolean | null;
+    get _shouldHaveWideDisplay(): boolean;
+    get _shouldHaveSquareDisplay(): boolean;
+    static get THUMBNAIL_HEIGHT(): number;
+    static get THUMBNAIL_MARGIN(): number;
+}
+export default MediaGallery;
+export type { MediaGallerySelectionChangeEventDetail, IMediaGalleryItem, };

package/dist/MediaGallery.js

@@ -0,0 +1,441 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var MediaGallery_1;
+import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import Carousel from "@ui5/webcomponents/dist/Carousel.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import MediaGalleryItem from "./MediaGalleryItem.js";
+import MediaGalleryItemLayout from "./types/MediaGalleryItemLayout.js";
+import MediaGalleryLayout from "./types/MediaGalleryLayout.js";
+// Styles
+import MediaGalleryCss from "./generated/themes/MediaGallery.css.js";
+// Template
+import MediaGalleryTemplate from "./MediaGalleryTemplate.js";
+// The allowed number of thumbnail columns on each size
+// (relevant when `showAllThumbnails` is enabled)
+const COLUMNS_COUNT = {
+    "S": 1,
+    "M": 2,
+    "L": 3,
+    "XL": 4,
+};
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * 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.
+ *
+ * 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.
+ *
+ * ### 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:
+ *
+ * - [Up] or [Down] - Navigates up and down the items
+ * - [Home] - Navigates to first item
+ * - [End] - Navigates to the last item
+ * - [Space], [Enter] - Selects an item
+ *
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents-fiori/dist/MediaGallery.js";`
+ *
+ * `import "@ui5/webcomponents-fiori/dist/MediaGalleryItem.js";`
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @since 1.1.0
+ */
+let MediaGallery = MediaGallery_1 = class MediaGallery extends UI5Element {
+    constructor() {
+        super();
+        /**
+         * 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
+         */
+        this.showAllThumbnails = false;
+        /**
+         * If enabled, a `display-area-click` event is fired
+         * when the user clicks or taps on the display area.
+         *
+         * The display area is the central area that contains
+         * the enlarged content of the currently selected item.
+         * @default false
+         * @public
+         */
+        this.interactiveDisplayArea = false;
+        /**
+         * Determines the layout of the component.
+         * @default "Auto"
+         * @public
+         */
+        this.layout = "Auto";
+        /**
+         * Determines the horizontal alignment of the thumbnails menu
+         * vs. the central display area.
+         * @default "Left"
+         * @public
+         */
+        this.menuHorizontalAlign = "Left";
+        /**
+         * Determines the vertical alignment of the thumbnails menu
+         * vs. the central display area.
+         * @default "Bottom"
+         * @public
+         */
+        this.menuVerticalAlign = "Bottom";
+        /**
+         * Determines the actual applied layout type
+         * (esp. needed when the app did not specify a fixed layout type
+         * but selected `Auto` layout type).
+         * @default "Vertical"
+         * @private
+         */
+        this.effectiveLayout = "Vertical";
+        /**
+         * Defines the current media query size.
+         * @private
+         */
+        this.mediaRange = "S";
+        /**
+         * The number of items in the overflow.
+         * @private
+         */
+        this._overflowSize = 0;
+        this._onResize = this._updateLayout.bind(this);
+        this._itemNavigation = new ItemNavigation(this, {
+            navigationMode: NavigationMode.Auto,
+            getItemsCallback: () => this._getFocusableItems(),
+        });
+    }
+    onEnterDOM() {
+        !isPhone() && ResizeHandler.register(this, this._onResize);
+    }
+    onExitDOM() {
+        !isPhone() && ResizeHandler.deregister(this, this._onResize);
+    }
+    onAfterRendering() {
+        this._updateLayout();
+        this._updateSelection();
+    }
+    _updateSelection() {
+        if (this.items.length === 0) {
+            this._selectedItem = undefined;
+            if (this._mainItem) {
+                const oldContent = this._mainItem.displayedContent;
+                oldContent?.remove();
+            }
+            return;
+        }
+        let itemToSelect = this.items.find(item => item.selected);
+        if (!itemToSelect || !this._isSelectableItem(itemToSelect)) {
+            itemToSelect = this._findSelectableItem();
+        }
+        if (itemToSelect && itemToSelect !== this._selectedItem) {
+            this._selectItem(itemToSelect);
+        }
+    }
+    _isSelectableItem(item) {
+        return !item.disabled && !item.hidden;
+    }
+    _findSelectableItem() {
+        return this.items.find(this._isSelectableItem);
+    }
+    _updateMediaRange(width) {
+        this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, width);
+    }
+    _updateLayout() {
+        const rootNode = this.getDomRef(), height = rootNode.offsetHeight, width = rootNode.offsetWidth;
+        if (!width || !height || isPhone()) {
+            return;
+        }
+        this._updateMediaRange(width);
+        this.effectiveLayout = this._infereffectiveLayout();
+        this._overflowSize = this._calculateOverflowSize(width, height);
+        this._toggleDisplaySquareSize(this._shouldHaveSquareDisplay);
+        this._toggleMainItem9x16size(this._shouldHaveWideDisplay);
+    }
+    _calculateOverflowSize(width, height) {
+        const marginSize = MediaGallery_1.THUMBNAIL_MARGIN;
+        let columnHeight, columnsCount;
+        if (this.showAllThumbnails) {
+            return 0;
+        }
+        if (this.effectiveLayout === MediaGalleryLayout.Horizontal) {
+            columnHeight = height - marginSize;
+            columnsCount = this.showAllThumbnails ? COLUMNS_COUNT[this.mediaRange] : 1;
+        }
+        else {
+            columnHeight = width - (marginSize * 2); // column is flexed to appear as a row in this case
+            columnsCount = 1;
+        }
+        return this._getOverflowSize(columnHeight, columnsCount);
+    }
+    _toggleDisplaySquareSize(enable) {
+        this._display.style.width = ""; // restore default width
+        if (enable) {
+            const marginSize = MediaGallery_1.THUMBNAIL_MARGIN, width = this._display.offsetWidth;
+            let availableHeight = this.getDomRef().offsetHeight - (2 * marginSize);
+            if (this.effectiveLayout === MediaGalleryLayout.Vertical) {
+                availableHeight -= (MediaGallery_1.THUMBNAIL_HEIGHT + marginSize);
+            }
+            if (width > availableHeight) {
+                // set to square
+                this._display.style.width = `${availableHeight}px`;
+            }
+        }
+    }
+    _toggleMainItem9x16size(enable) {
+        if (!this._mainItem) {
+            return;
+        }
+        const width = this._mainItem.offsetWidth, contentHeight = enable ? `${(width / 16) * 9}px` : "";
+        this._mainItem.contentHeight = contentHeight;
+    }
+    _infereffectiveLayout() {
+        if (this.layout === MediaGalleryLayout.Auto) {
+            return (this._isPhoneSize) ? MediaGalleryLayout.Vertical
+                : MediaGalleryLayout.Horizontal;
+        }
+        return this.layout;
+    }
+    _getMaxAllowedThumbnailsInColumn(columnHeight) {
+        let maxAllowedItems = Math.floor(columnHeight / MediaGallery_1.THUMBNAIL_HEIGHT);
+        if (!this.showAllThumbnails) {
+            maxAllowedItems = Math.min(maxAllowedItems, 5);
+        }
+        return maxAllowedItems;
+    }
+    _getOverflowSize(columnHeight, columnsCount) {
+        const maxAlowedThumbnailsInColumn = this._getMaxAllowedThumbnailsInColumn(columnHeight), overflowSize = Math.max(0, this.items.length - maxAlowedThumbnailsInColumn * columnsCount);
+        if (overflowSize === this.items.length || overflowSize === 0) {
+            return overflowSize;
+        }
+        return overflowSize + 1; // overflow 1 extra item to make room for overflow btn as well
+    }
+    _getFocusableItems() {
+        if (!this._showThumbnails) {
+            return [];
+        }
+        const items = this._visibleItems.filter(item => !item.disabled);
+        if (this._overflowBtn) {
+            items.push(this._overflowBtn);
+        }
+        return items;
+    }
+    getFocusDomRef() {
+        return this._itemNavigation._getCurrentItem();
+    }
+    _selectItem(item, userInteraction = false) {
+        if (item === this._selectedItem) {
+            return;
+        }
+        this._selectedItem = item;
+        this._updateSelectedFlag(item);
+        this._itemNavigation.setCurrentItem(item);
+        if (userInteraction) {
+            this.fireDecoratorEvent("selection-change", { item });
+        }
+        if (isPhone()) {
+            this._selectItemOnPhone(item);
+        }
+        else {
+            this._displayContent(item);
+        }
+    }
+    _updateSelectedFlag(itemToSelect) {
+        this.items.forEach(next => { next.selected = false; });
+        itemToSelect.selected = true;
+    }
+    _selectItemOnPhone(item) {
+        const selectableItemIndex = this._selectableItems.indexOf(item), carousel = this._carousel;
+        carousel && carousel.navigateTo(selectableItemIndex);
+    }
+    _displayContent(item) {
+        let clone;
+        const mainItem = this._mainItem, oldContent = mainItem.displayedContent, newContent = item.displayedContent;
+        mainItem._thumbnailDesign = false;
+        oldContent && oldContent.remove();
+        if (newContent) {
+            clone = newContent.cloneNode(true);
+            mainItem.layout = item.layout;
+            mainItem.appendChild(clone);
+        }
+    }
+    _onThumbnailClick(e) {
+        const target = e.target;
+        const item = target.closest("[ui5-media-gallery-item]");
+        if (item.disabled) {
+            return;
+        }
+        if (item !== this._selectedItem) {
+            this._selectItem(item, true /* userInteraction */);
+        }
+    }
+    _onOverflowBtnClick() {
+        this.fireDecoratorEvent("overflow-click");
+    }
+    _onDisplayAreaClick() {
+        if (!this.interactiveDisplayArea) {
+            return;
+        }
+        this.fireDecoratorEvent("display-area-click");
+    }
+    _onCarouselNavigate(e) {
+        const selectedIndex = e.detail.selectedIndex, item = this._selectableItems[selectedIndex];
+        this.fireDecoratorEvent("selection-change", { item });
+    }
+    get _mainItemTabIndex() {
+        return this.interactiveDisplayArea ? 0 : undefined;
+    }
+    get _selectableItems() {
+        return this.items.filter(this._isSelectableItem);
+    }
+    get _carousel() {
+        return this.shadowRoot.querySelector("[ui5-carousel]");
+    }
+    get _display() {
+        return this.shadowRoot.querySelector(".ui5-media-gallery-display");
+    }
+    get _mainItem() {
+        return this.shadowRoot.querySelector(".ui5-media-gallery-display [ui5-media-gallery-item]");
+    }
+    get _overflowBtn() {
+        return this.shadowRoot.querySelector(".ui5-media-gallery-overflow [ui5-button]");
+    }
+    get _visibleItems() {
+        const visibleItemsCount = this.items.length - this._overflowSize;
+        return this.items.slice(0, visibleItemsCount);
+    }
+    get _isPhonePlatform() {
+        return isPhone();
+    }
+    get _showThumbnails() {
+        return !isPhone();
+    }
+    get _showOverflowBtn() {
+        return this._overflowSize > 0;
+    }
+    get _isPhoneSize() {
+        return this.mediaRange === "S";
+    }
+    get _mainItemHasWideLayout() {
+        return this._mainItem && (this._mainItem.layout === MediaGalleryItemLayout.Wide);
+    }
+    get _shouldHaveWideDisplay() {
+        return !!this._mainItemHasWideLayout
+            && this.showAllThumbnails
+            && (this.effectiveLayout === MediaGalleryLayout.Horizontal);
+    }
+    get _shouldHaveSquareDisplay() {
+        // by default it should be square
+        // with the only exception when a wide 9*16 item should be displayed
+        return !this._shouldHaveWideDisplay;
+    }
+    static get THUMBNAIL_HEIGHT() {
+        return 80; // px
+    }
+    static get THUMBNAIL_MARGIN() {
+        return 16; // px
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], MediaGallery.prototype, "showAllThumbnails", void 0);
+__decorate([
+    property({ type: Boolean })
+], MediaGallery.prototype, "interactiveDisplayArea", void 0);
+__decorate([
+    property()
+], MediaGallery.prototype, "layout", void 0);
+__decorate([
+    property()
+], MediaGallery.prototype, "menuHorizontalAlign", void 0);
+__decorate([
+    property()
+], MediaGallery.prototype, "menuVerticalAlign", void 0);
+__decorate([
+    property()
+], MediaGallery.prototype, "effectiveLayout", void 0);
+__decorate([
+    property()
+], MediaGallery.prototype, "mediaRange", void 0);
+__decorate([
+    property({ type: Number, noAttribute: true })
+], MediaGallery.prototype, "_overflowSize", void 0);
+__decorate([
+    slot({
+        type: HTMLElement,
+        individualSlots: true,
+        invalidateOnChildChange: true,
+        "default": true,
+    })
+], MediaGallery.prototype, "items", void 0);
+MediaGallery = MediaGallery_1 = __decorate([
+    customElement({
+        tag: "ui5-media-gallery",
+        renderer: jsxRenderer,
+        styles: [MediaGalleryCss],
+        template: MediaGalleryTemplate,
+        dependencies: [
+            MediaGalleryItem,
+            Button,
+            Carousel,
+        ],
+    })
+    /**
+     * Fired when selection is changed by user interaction.
+     * @param {HTMLElement} item the selected item.
+     * @public
+     */
+    ,
+    event("selection-change", {
+        bubbles: true,
+    })
+    /**
+     * Fired when the thumbnails overflow button is clicked.
+     * @public
+     */
+    ,
+    event("overflow-click", {
+        bubbles: true,
+    })
+    /**
+     * 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
+     */
+    ,
+    event("display-area-click", {
+        bubbles: true,
+    })
+], MediaGallery);
+MediaGallery.define();
+export default MediaGallery;
+//# sourceMappingURL=MediaGallery.js.map

package/dist/MediaGallery.js.map

@@ -0,0 +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 jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport NavigationMode from \"@ui5/webcomponents-base/dist/types/NavigationMode.js\";\nimport UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } 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-strict.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.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 type MediaGalleryMenuHorizontalAlign from \"./types/MediaGalleryMenuHorizontalAlign.js\";\nimport type MediaGalleryMenuVerticalAlign from \"./types/MediaGalleryMenuVerticalAlign.js\";\n\n// Styles\nimport MediaGalleryCss from \"./generated/themes/MediaGallery.css.js\";\n\n// Template\nimport MediaGalleryTemplate from \"./MediaGalleryTemplate.js\";\n\n/**\n * Interface for components that can be slotted inside `ui5-media-gallery` as items.\n * @public\n */\ninterface IMediaGalleryItem extends UI5Element, ITabbable {\n\tselected: boolean,\n\tdisabled: 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] or [Down] - Navigates up and down the items\n * - [Home] - Navigates to first item\n * - [End] - Navigates to the last item\n * - [Space], [Enter] - Selects 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: jsxRenderer,\n\tstyles: [MediaGalleryCss],\n\ttemplate: 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(\"selection-change\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the thumbnails overflow button is clicked.\n * @public\n */\n@event(\"overflow-click\", {\n\tbubbles: true,\n})\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\tbubbles: true,\n})\n\nclass MediaGallery extends UI5Element {\n\teventDetails!: {\n\t\t\"selection-change\": MediaGallerySelectionChangeEventDetail,\n\t\t\"overflow-click\": void,\n\t\t\"display-area-click\": void,\n\t}\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 = false;\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 = false;\n\n\t/**\n\t * Determines the layout of the component.\n\t * @default \"Auto\"\n\t * @public\n\t */\n\t@property()\n\tlayout: `${MediaGalleryLayout}` = \"Auto\";\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()\n\tmenuHorizontalAlign: `${MediaGalleryMenuHorizontalAlign}` = \"Left\";\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()\n\tmenuVerticalAlign: `${MediaGalleryMenuVerticalAlign}` = \"Bottom\";\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()\n\teffectiveLayout: `${MediaGalleryLayout}` = \"Vertical\";\n\n\t/**\n\t * Defines the current media query size.\n\t * @private\n\t */\n\t@property()\n\tmediaRange = \"S\";\n\n\t/**\n\t * The number of items in the overflow.\n\t * @private\n\t */\n\t@property({ type: Number, noAttribute: true })\n\t_overflowSize = 0;\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!: DefaultSlot<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\tif (this.items.length === 0) {\n\t\t\tthis._selectedItem = undefined;\n\t\t\tif (this._mainItem) {\n\t\t\t\tconst oldContent = this._mainItem.displayedContent;\n\t\t\t\toldContent?.remove();\n\t\t\t}\n\t\t\treturn;\n\t\t}\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\tgetFocusDomRef() {\n\t\treturn this._itemNavigation._getCurrentItem();\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.fireDecoratorEvent(\"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.fireDecoratorEvent(\"overflow-click\");\n\t}\n\n\t_onDisplayAreaClick() {\n\t\tif (!this.interactiveDisplayArea) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.fireDecoratorEvent(\"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.fireDecoratorEvent(\"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 9*16 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"]}