@ui5/webcomponents-fiori 0.0.0-037d08c67

package/dist/MediaGalleryItem.d.ts

@@ -0,0 +1,117 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type MediaGalleryItemLayout from "./types/MediaGalleryItemLayout.js";
+import type { IMediaGalleryItem } from "./MediaGallery.js";
+import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+/**
+ * @class
+ * ### Overview
+ * The `ui5-media-gallery-item` web component represents the items displayed in the
+ * `ui5-media-gallery` web component.
+ *
+ * **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:
+ *
+ * - [Space] / [Enter] or [Return] - Trigger `ui5-click` event
+ *
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents-fiori/dist/MediaGalleryItem.js";` (comes with `ui5-media-gallery`)
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @implements {IMediaGalleryItem}
+ * @since 1.1.0
+ */
+declare class MediaGalleryItem extends UI5Element implements IMediaGalleryItem {
+    eventDetails: {
+        click: {
+            item: MediaGalleryItem;
+        };
+    };
+    /**
+     * 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.
+     * @default "Square"
+     * @public
+     */
+    layout: `${MediaGalleryItemLayout}`;
+    /**
+     * @private
+     */
+    _interactive: boolean;
+    /**
+     * @private
+     */
+    _square: boolean;
+    /**
+     * @private
+     */
+    _contentImageNotFound: boolean;
+    /**
+     * @private
+     */
+    _thumbnailNotFound: boolean;
+    /**
+     * @private
+     */
+    _thumbnailDesign: boolean;
+    /**
+     * @private
+     */
+    forcedTabIndex?: string;
+    /**
+     * @private
+     */
+    contentHeight?: string;
+    /**
+     * Defines the content of the component.
+     * @public
+     */
+    content: DefaultSlot<HTMLElement>;
+    /**
+     * Defines the content of the thumbnail.
+     * @public
+     */
+    thumbnail: Slot<HTMLElement>;
+    _monitoredThumbnail: HTMLElement | null;
+    _monitoredContent: HTMLElement | null;
+    constructor();
+    onEnterDOM(): void;
+    get _thumbnail(): HTMLElement | null;
+    get displayedContent(): HTMLElement | null;
+    get _isThubmnailAvailable(): boolean | null;
+    get _isContentAvailable(): boolean | null;
+    get _useThumbnail(): boolean | null;
+    get _useContent(): boolean | null;
+    get effectiveTabIndex(): number | undefined;
+    get _showBackgroundIcon(): boolean;
+    get styles(): {
+        wrapper: {
+            height: string | undefined;
+        };
+    };
+    get _role(): "button" | undefined;
+    onBeforeRendering(): void;
+    _monitorLoadingError(): void;
+    _attachListeners(element: HTMLImageElement, callback: (image: HTMLImageElement) => void): true | undefined;
+    _updateContentImageLoaded(image: HTMLImageElement): void;
+    _updateThumbnailLoaded(image: HTMLImageElement): void;
+    _onkeydown(e: KeyboardEvent): void;
+    _onkeyup(e: KeyboardEvent): void;
+    _fireItemClick(): void;
+}
+export default MediaGalleryItem;

package/dist/MediaGalleryItem.js

@@ -0,0 +1,238 @@
+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;
+};
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+// Styles
+import MediaGalleryItemCss from "./generated/themes/MediaGalleryItem.css.js";
+// Template
+import MediaGalleryItemTemplate from "./MediaGalleryItemTemplate.js";
+/**
+ * @class
+ * ### Overview
+ * The `ui5-media-gallery-item` web component represents the items displayed in the
+ * `ui5-media-gallery` web component.
+ *
+ * **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:
+ *
+ * - [Space] / [Enter] or [Return] - Trigger `ui5-click` event
+ *
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents-fiori/dist/MediaGalleryItem.js";` (comes with `ui5-media-gallery`)
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @implements {IMediaGalleryItem}
+ * @since 1.1.0
+ */
+let MediaGalleryItem = class MediaGalleryItem extends UI5Element {
+    constructor() {
+        super();
+        /**
+         * Defines the selected state of the component.
+         * @default false
+         * @public
+         */
+        this.selected = false;
+        /**
+         * Defines whether the component is in disabled state.
+         * @default false
+         * @public
+         */
+        this.disabled = false;
+        /**
+         * Determines the layout of the item container.
+         * @default "Square"
+         * @public
+         */
+        this.layout = "Square";
+        /**
+         * @private
+         */
+        this._interactive = !isPhone();
+        /**
+         * @private
+         */
+        this._square = false;
+        /**
+         * @private
+         */
+        this._contentImageNotFound = false;
+        /**
+         * @private
+         */
+        this._thumbnailNotFound = false;
+        /**
+         * @private
+         */
+        this._thumbnailDesign = false;
+        this._monitoredContent = null;
+        this._monitoredThumbnail = null;
+    }
+    onEnterDOM() {
+        this._thumbnailDesign = !isPhone();
+        this._square = true;
+    }
+    get _thumbnail() {
+        return this.thumbnail.length ? this.thumbnail[0] : null;
+    }
+    get displayedContent() {
+        return this.content.length ? this.content[0] : null;
+    }
+    get _isThubmnailAvailable() {
+        return this._thumbnail && !this._thumbnailNotFound;
+    }
+    get _isContentAvailable() {
+        return this.displayedContent && !this._contentImageNotFound;
+    }
+    get _useThumbnail() {
+        return this._thumbnailDesign && this._isThubmnailAvailable;
+    }
+    get _useContent() {
+        return !this._useThumbnail && this._isContentAvailable;
+    }
+    get effectiveTabIndex() {
+        if (this.disabled) {
+            return undefined;
+        }
+        return this.forcedTabIndex ? parseInt(this.forcedTabIndex) : undefined;
+    }
+    get _showBackgroundIcon() {
+        return this._thumbnailNotFound || this._contentImageNotFound;
+    }
+    get styles() {
+        return {
+            wrapper: {
+                height: this.contentHeight,
+            },
+        };
+    }
+    get _role() {
+        return this._interactive ? "button" : undefined;
+    }
+    onBeforeRendering() {
+        this._monitorLoadingError();
+    }
+    _monitorLoadingError() {
+        let callback, success;
+        if (this._thumbnailDesign && this.thumbnail.length && (this._monitoredThumbnail !== this._thumbnail)) {
+            this._thumbnailNotFound = false; // reset flag
+            callback = this._updateThumbnailLoaded.bind(this);
+            success = this._attachListeners(this._thumbnail, callback);
+            success && (this._monitoredThumbnail = this._thumbnail);
+        }
+        if (!this._useThumbnail && this.content.length && (this._monitoredContent !== this.displayedContent)) {
+            this._contentImageNotFound = false; // reset flag
+            callback = this._updateContentImageLoaded.bind(this);
+            success = this._attachListeners(this.displayedContent, callback);
+            success && (this._monitoredContent = this.displayedContent);
+        }
+    }
+    _attachListeners(element, callback) {
+        const isImg = element.tagName === "IMG", img = isImg ? element : element.querySelector("img");
+        if (img) {
+            callback(img);
+            img.addEventListener("error", () => {
+                if (this.contains(img)) { // img still belongs to us
+                    callback(img);
+                }
+            });
+            img.addEventListener("load", () => {
+                if (this.contains(img)) { // img still belongs to us
+                    callback(img);
+                }
+            });
+            return true;
+        }
+    }
+    _updateContentImageLoaded(image) {
+        this._contentImageNotFound = image.naturalHeight === 0 && image.naturalWidth === 0;
+    }
+    _updateThumbnailLoaded(image) {
+        this._thumbnailNotFound = image.naturalHeight === 0 && image.naturalWidth === 0;
+    }
+    _onkeydown(e) {
+        if (isSpace(e)) {
+            e.preventDefault();
+        }
+        if (isEnter(e)) {
+            this._fireItemClick();
+        }
+    }
+    _onkeyup(e) {
+        if (isSpace(e)) {
+            this._fireItemClick();
+        }
+    }
+    _fireItemClick() {
+        this.fireDecoratorEvent("click", { item: this });
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], MediaGalleryItem.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], MediaGalleryItem.prototype, "disabled", void 0);
+__decorate([
+    property()
+], MediaGalleryItem.prototype, "layout", void 0);
+__decorate([
+    property({ type: Boolean })
+], MediaGalleryItem.prototype, "_interactive", void 0);
+__decorate([
+    property({ type: Boolean })
+], MediaGalleryItem.prototype, "_square", void 0);
+__decorate([
+    property({ type: Boolean })
+], MediaGalleryItem.prototype, "_contentImageNotFound", void 0);
+__decorate([
+    property({ type: Boolean })
+], MediaGalleryItem.prototype, "_thumbnailNotFound", void 0);
+__decorate([
+    property({ type: Boolean })
+], MediaGalleryItem.prototype, "_thumbnailDesign", void 0);
+__decorate([
+    property()
+], MediaGalleryItem.prototype, "forcedTabIndex", void 0);
+__decorate([
+    property({ noAttribute: true })
+], MediaGalleryItem.prototype, "contentHeight", void 0);
+__decorate([
+    slot({ type: HTMLElement, "default": true })
+], MediaGalleryItem.prototype, "content", void 0);
+__decorate([
+    slot()
+], MediaGalleryItem.prototype, "thumbnail", void 0);
+MediaGalleryItem = __decorate([
+    customElement({
+        tag: "ui5-media-gallery-item",
+        renderer: jsxRenderer,
+        styles: MediaGalleryItemCss,
+        template: MediaGalleryItemTemplate,
+    })
+    /**
+     * @private
+     */
+    ,
+    event("click", {
+        bubbles: true,
+    })
+], MediaGalleryItem);
+MediaGalleryItem.define();
+export default MediaGalleryItem;
+//# sourceMappingURL=MediaGalleryItem.js.map

package/dist/MediaGalleryItem.js.map

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

package/dist/MediaGalleryItemTemplate.d.ts

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

package/dist/MediaGalleryItemTemplate.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import background from "@ui5/webcomponents-icons/dist/background.js";
+export default function MediaGalleryItemTemplate() {
+    return (_jsxs("div", { class: "ui5-media-gallery-item-root", tabindex: this.effectiveTabIndex, "data-sap-focus-ref": true, onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, role: this._role, children: [_jsx("div", { class: "ui5-media-gallery-item-mask-layer" }), _jsxs("div", { class: "ui5-media-gallery-item-wrapper", style: this.styles.wrapper, children: [this._showBackgroundIcon && _jsx(Icon, { name: background }), this._useContent && _jsx("slot", {}), this._useThumbnail && _jsx("slot", { name: "thumbnail" })] })] }));
+}
+//# sourceMappingURL=MediaGalleryItemTemplate.js.map

package/dist/MediaGalleryItemTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaGalleryItemTemplate.js","sourceRoot":"","sources":["../src/MediaGalleryItemTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,UAAU,MAAM,6CAA6C,CAAC;AAErE,MAAM,CAAC,OAAO,UAAU,wBAAwB;IAC/C,OAAO,CACN,eAAK,KAAK,EAAC,6BAA6B,EACvC,QAAQ,EAAE,IAAI,CAAC,iBAAiB,8BAEhC,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,IAAI,EAAE,IAAI,CAAC,KAAK,aAEhB,cAAK,KAAK,EAAC,mCAAmC,GAAO,EACrD,eAAK,KAAK,EAAC,gCAAgC,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,aACpE,IAAI,CAAC,mBAAmB,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,GAAG,EACrD,IAAI,CAAC,WAAW,IAAI,gBAAQ,EAC5B,IAAI,CAAC,aAAa,IAAI,eAAM,IAAI,EAAC,WAAW,GAAG,IAC3C,IACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import type MediaGalleryItem from \"./MediaGalleryItem.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport background from \"@ui5/webcomponents-icons/dist/background.js\";\n\nexport default function MediaGalleryItemTemplate(this: MediaGalleryItem) {\n\treturn (\n\t\t<div class=\"ui5-media-gallery-item-root\"\n\t\t\ttabindex={this.effectiveTabIndex}\n\t\t\tdata-sap-focus-ref\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\tonKeyUp={this._onkeyup}\n\t\t\trole={this._role}\n\t\t>\n\t\t\t<div class=\"ui5-media-gallery-item-mask-layer\"></div>\n\t\t\t<div class=\"ui5-media-gallery-item-wrapper\" style={this.styles.wrapper}>\n\t\t\t\t{this._showBackgroundIcon && <Icon name={background}/>}\n\t\t\t\t{this._useContent && <slot />}\n\t\t\t\t{this._useThumbnail && <slot name=\"thumbnail\" />}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}

package/dist/MediaGalleryTemplate.d.ts

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

package/dist/MediaGalleryTemplate.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import MediaGalleryItem from "./MediaGalleryItem.js";
+import Carousel from "@ui5/webcomponents/dist/Carousel.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+export default function MediaGalleryTemplate() {
+    return (_jsxs("div", { class: "ui5-media-gallery-root", children: [_jsx("div", { class: "ui5-media-gallery-display-wrapper", children: _jsx("div", { class: "ui5-media-gallery-display", onClick: this._onDisplayAreaClick, children: this._isPhonePlatform
+                        ? _jsx(Carousel, { onNavigate: this._onCarouselNavigate, hideNavigationArrows: true, children: this._selectableItems.map(item => _jsx("slot", { name: item._individualSlot })) })
+                        : _jsx(MediaGalleryItem, { _interactive: this.interactiveDisplayArea, _square: this._shouldHaveSquareDisplay, tabIndex: this._mainItemTabIndex }) }) }), this._showThumbnails && _jsx("div", { class: "ui5-media-gallery-thumbnails-wrapper", children: _jsxs("ul", { children: [this._visibleItems.map(item => _jsx("li", { id: item.id, class: "ui5-media-gallery-thumbnail", role: "option", onClick: this._onThumbnailClick, children: _jsx("slot", { name: item._individualSlot }) })), this._showOverflowBtn && _jsx("li", { class: "ui5-media-gallery-overflow", children: _jsxs(Button, { onClick: this._onOverflowBtnClick, children: ["+", this._overflowSize] }) })] }) })] }));
+}
+//# sourceMappingURL=MediaGalleryTemplate.js.map

package/dist/MediaGalleryTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaGalleryTemplate.js","sourceRoot":"","sources":["../src/MediaGalleryTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AACrD,OAAO,QAAQ,MAAM,qCAAqC,CAAC;AAC3D,OAAO,MAAM,MAAM,mCAAmC,CAAC;AAEvD,MAAM,CAAC,OAAO,UAAU,oBAAoB;IAC3C,OAAO,CACN,eAAK,KAAK,EAAC,wBAAwB,aAClC,cAAK,KAAK,EAAC,mCAAmC,YAC7C,cAAK,KAAK,EAAC,2BAA2B,EACrC,OAAO,EAAE,IAAI,CAAC,mBAAmB,YAChC,IAAI,CAAC,gBAAgB;wBACrB,CAAC,CAAC,KAAC,QAAQ,IACV,UAAU,EAAE,IAAI,CAAC,mBAAmB,EACpC,oBAAoB,EAAE,IAAI,YAEzB,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACjC,eAAM,IAAI,EAAE,IAAI,CAAC,eAAe,GAAS,CACzC,GACS;wBACX,CAAC,CAAC,KAAC,gBAAgB,IAClB,YAAY,EAAE,IAAI,CAAC,sBAAsB,EACzC,OAAO,EAAE,IAAI,CAAC,wBAAwB,EACtC,QAAQ,EAAE,IAAI,CAAC,iBAAiB,GACb,GAEhB,GACD,EAEL,IAAI,CAAC,eAAe,IAAI,cAAK,KAAK,EAAC,sCAAsC,YACzE,yBACE,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAC9B,aAAI,EAAE,EAAE,IAAI,CAAC,EAAE,EACd,KAAK,EAAC,6BAA6B,EACnC,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,iBAAiB,YAE/B,eAAM,IAAI,EAAE,IAAI,CAAC,eAAe,GAAS,GACrC,CACL,EACA,IAAI,CAAC,gBAAgB,IAAI,aAAI,KAAK,EAAC,4BAA4B,YAC/D,MAAC,MAAM,IAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,kBACtC,IAAI,CAAC,aAAa,IACZ,GACL,IACD,GACA,IACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import type MediaGallery from \"./MediaGallery.js\";\nimport MediaGalleryItem from \"./MediaGalleryItem.js\";\nimport Carousel from \"@ui5/webcomponents/dist/Carousel.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\n\nexport default function MediaGalleryTemplate(this: MediaGallery) {\n\treturn (\n\t\t<div class=\"ui5-media-gallery-root\">\n\t\t\t<div class=\"ui5-media-gallery-display-wrapper\">\n\t\t\t\t<div class=\"ui5-media-gallery-display\"\n\t\t\t\t\tonClick={this._onDisplayAreaClick}>\n\t\t\t\t\t{this._isPhonePlatform\n\t\t\t\t\t\t? <Carousel\n\t\t\t\t\t\t\tonNavigate={this._onCarouselNavigate}\n\t\t\t\t\t\t\thideNavigationArrows={true}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this._selectableItems.map(item =>\n\t\t\t\t\t\t\t\t<slot name={item._individualSlot}></slot>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Carousel>\n\t\t\t\t\t\t: <MediaGalleryItem\n\t\t\t\t\t\t\t_interactive={this.interactiveDisplayArea}\n\t\t\t\t\t\t\t_square={this._shouldHaveSquareDisplay}\n\t\t\t\t\t\t\ttabIndex={this._mainItemTabIndex}\n\t\t\t\t\t\t></MediaGalleryItem>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t{this._showThumbnails && <div class=\"ui5-media-gallery-thumbnails-wrapper\">\n\t\t\t\t<ul>\n\t\t\t\t\t{this._visibleItems.map(item =>\n\t\t\t\t\t\t<li id={item.id}\n\t\t\t\t\t\t\tclass=\"ui5-media-gallery-thumbnail\"\n\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\tonClick={this._onThumbnailClick}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<slot name={item._individualSlot}></slot>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t)}\n\t\t\t\t\t{this._showOverflowBtn && <li class=\"ui5-media-gallery-overflow\">\n\t\t\t\t\t\t<Button onClick={this._onOverflowBtnClick}>\n\t\t\t\t\t\t\t+{this._overflowSize}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</li>}\n\t\t\t\t</ul>\n\t\t\t</div>}\n\t\t</div>\n\t);\n}\n"]}

package/dist/NavigationLayout.d.ts

@@ -0,0 +1,74 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import NavigationLayoutMode from "./types/NavigationLayoutMode.js";
+import type SideNavigation from "./SideNavigation.js";
+import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-navigation-layout` is a container component that can be used to
+ * create a layout with a header, a side navigation and a content area.
+ *
+ * ### Usage
+ *
+ * Use the `ui5-navigation-layout` to create whole screen of an application with vertical navigation.
+ *
+ * ### Responsive Behavior
+ *
+ * On larger screens with a width of 600px or more, excluding mobile phone devices, the side navigation is visible
+ * by default and can be expanded or collapsed using the `mode` property.
+ * On mobile phone devices and screens with a width of 599px or less, the side navigation is hidden by
+ * default and can be displayed using the `mode` property.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/NavigationLayout.js";`
+ * @constructor
+ * @extends UI5Element
+ * @since 2.4.0
+ * @public
+ */
+declare class NavigationLayout extends UI5Element {
+    /**
+     * Specifies the navigation layout mode.
+     * @default "Auto"
+     * @public
+     */
+    mode: `${NavigationLayoutMode}`;
+    /**
+     * @private
+     */
+    sideCollapsed: boolean;
+    /**
+     * @private
+     */
+    hasSideNavigation: boolean;
+    /**
+     * @private
+     */
+    isPhone: boolean;
+    /**
+     * Gets whether the side navigation is collapsed.
+     * @public
+     */
+    isSideCollapsed(): boolean;
+    /**
+     * Defines the header.
+     * @public
+     */
+    header: Slot<HTMLElement>;
+    /**
+     * Defines the side content.
+     * @public
+     */
+    sideContent: Slot<SideNavigation>;
+    /**
+     * Defines the content.
+     * @public
+     */
+    content: DefaultSlot<HTMLElement>;
+    onBeforeRendering(): void;
+    calcSideCollapsed(): void;
+}
+export default NavigationLayout;

package/dist/NavigationLayout.js

@@ -0,0 +1,127 @@
+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;
+};
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.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 jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import NavigationLayoutMode from "./types/NavigationLayoutMode.js";
+// Template
+import NavigationLayoutTemplate from "./NavigationLayoutTemplate.js";
+// Styles
+import NavigationLayoutCss from "./generated/themes/NavigationLayout.css.js";
+const SCREEN_WIDTH_BREAKPOINT = 600;
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-navigation-layout` is a container component that can be used to
+ * create a layout with a header, a side navigation and a content area.
+ *
+ * ### Usage
+ *
+ * Use the `ui5-navigation-layout` to create whole screen of an application with vertical navigation.
+ *
+ * ### Responsive Behavior
+ *
+ * On larger screens with a width of 600px or more, excluding mobile phone devices, the side navigation is visible
+ * by default and can be expanded or collapsed using the `mode` property.
+ * On mobile phone devices and screens with a width of 599px or less, the side navigation is hidden by
+ * default and can be displayed using the `mode` property.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/NavigationLayout.js";`
+ * @constructor
+ * @extends UI5Element
+ * @since 2.4.0
+ * @public
+ */
+let NavigationLayout = class NavigationLayout extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Specifies the navigation layout mode.
+         * @default "Auto"
+         * @public
+         */
+        this.mode = "Auto";
+        /**
+         * @private
+         */
+        this.sideCollapsed = isPhone() || window.innerWidth < SCREEN_WIDTH_BREAKPOINT;
+        /**
+         * @private
+         */
+        this.hasSideNavigation = false;
+        /**
+         * @private
+         */
+        this.isPhone = isPhone();
+    }
+    /**
+     * Gets whether the side navigation is collapsed.
+     * @public
+     */
+    isSideCollapsed() {
+        this.calcSideCollapsed();
+        return this.sideCollapsed;
+    }
+    onBeforeRendering() {
+        this.calcSideCollapsed();
+        const sideNavigation = this.sideContent[0];
+        this.hasSideNavigation = !!sideNavigation;
+        if (sideNavigation) {
+            sideNavigation.collapsed = this.isSideCollapsed();
+        }
+    }
+    calcSideCollapsed() {
+        if (this.mode === NavigationLayoutMode.Auto) {
+            this.sideCollapsed = isPhone() || window.innerWidth < SCREEN_WIDTH_BREAKPOINT;
+        }
+        else {
+            this.sideCollapsed = this.mode === NavigationLayoutMode.Collapsed;
+        }
+    }
+};
+__decorate([
+    property()
+], NavigationLayout.prototype, "mode", void 0);
+__decorate([
+    property({ type: Boolean })
+], NavigationLayout.prototype, "sideCollapsed", void 0);
+__decorate([
+    property({ type: Boolean })
+], NavigationLayout.prototype, "hasSideNavigation", void 0);
+__decorate([
+    property({ type: Boolean })
+], NavigationLayout.prototype, "isPhone", void 0);
+__decorate([
+    slot()
+], NavigationLayout.prototype, "header", void 0);
+__decorate([
+    slot()
+], NavigationLayout.prototype, "sideContent", void 0);
+__decorate([
+    slot({ type: HTMLElement, "default": true })
+], NavigationLayout.prototype, "content", void 0);
+NavigationLayout = __decorate([
+    customElement({
+        tag: "ui5-navigation-layout",
+        languageAware: true,
+        renderer: jsxRenderer,
+        styles: [
+            NavigationLayoutCss,
+        ],
+        template: NavigationLayoutTemplate,
+    })
+], NavigationLayout);
+NavigationLayout.define();
+export default NavigationLayout;
+//# sourceMappingURL=NavigationLayout.js.map

package/dist/NavigationLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationLayout.js","sourceRoot":"","sources":["../src/NavigationLayout.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,EAAE,OAAO,EAAE,MAAM,wCAAwC,CAAC;AACjE,OAAO,oBAAoB,MAAM,iCAAiC,CAAC;AAInE,WAAW;AACX,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAErE,SAAS;AACT,OAAO,mBAAmB,MAAM,4CAA4C,CAAC;AAE7E,MAAM,uBAAuB,GAAG,GAAG,CAAC;AAEpC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAUH,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QACC;;;;WAIG;QAEH,SAAI,GAA8B,MAAM,CAAC;QAEzC;;WAEG;QAEH,kBAAa,GAAa,OAAO,EAAE,IAAI,MAAM,CAAC,UAAU,GAAG,uBAAuB,CAAC;QAEnF;;WAEG;QAEH,sBAAiB,GAAG,KAAK,CAAC;QAE1B;;WAEG;QAEH,YAAO,GAAG,OAAO,EAAE,CAAC;IAkDrB,CAAC;IAhDA;;;OAGG;IACH,eAAe;QACd,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,OAAO,IAAI,CAAC,aAAa,CAAC;IAC3B,CAAC;IAuBD,iBAAiB;QAChB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAEzB,MAAM,cAAc,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QAC3C,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,cAAc,CAAC;QAE1C,IAAI,cAAc,EAAE,CAAC;YACpB,cAAc,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACnD,CAAC;IACF,CAAC;IAED,iBAAiB;QAChB,IAAI,IAAI,CAAC,IAAI,KAAK,oBAAoB,CAAC,IAAI,EAAE,CAAC;YAC7C,IAAI,CAAC,aAAa,GAAG,OAAO,EAAE,IAAI,MAAM,CAAC,UAAU,GAAG,uBAAuB,CAAC;QAC/E,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,KAAK,oBAAoB,CAAC,SAAS,CAAC;QACnE,CAAC;IACF,CAAC;CACD,CAAA;AApEA;IADC,QAAQ,EAAE;8CAC8B;AAMzC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uDACuD;AAMnF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2DACF;AAM1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACR;AAgBpB;IADC,IAAI,EAAE;gDACoB;AAO3B;IADC,IAAI,EAAE;qDAC4B;AAOnC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;iDACV;AAvD9B,gBAAgB;IATrB,aAAa,CAAC;QACd,GAAG,EAAE,uBAAuB;QAC5B,aAAa,EAAE,IAAI;QACnB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE;YACP,mBAAmB;SACnB;QACD,QAAQ,EAAE,wBAAwB;KAClC,CAAC;GACI,gBAAgB,CA2ErB;AAED,gBAAgB,CAAC,MAAM,EAAE,CAAC;AAE1B,eAAe,gBAAgB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport NavigationLayoutMode from \"./types/NavigationLayoutMode.js\";\nimport type SideNavigation from \"./SideNavigation.js\";\nimport type { Slot, DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\n// Template\nimport NavigationLayoutTemplate from \"./NavigationLayoutTemplate.js\";\n\n// Styles\nimport NavigationLayoutCss from \"./generated/themes/NavigationLayout.css.js\";\n\nconst SCREEN_WIDTH_BREAKPOINT = 600;\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-navigation-layout` is a container component that can be used to\n * create a layout with a header, a side navigation and a content area.\n *\n * ### Usage\n *\n * Use the `ui5-navigation-layout` to create whole screen of an application with vertical navigation.\n *\n * ### Responsive Behavior\n *\n * On larger screens with a width of 600px or more, excluding mobile phone devices, the side navigation is visible\n * by default and can be expanded or collapsed using the `mode` property.\n * On mobile phone devices and screens with a width of 599px or less, the side navigation is hidden by\n * default and can be displayed using the `mode` property.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/NavigationLayout.js\";`\n * @constructor\n * @extends UI5Element\n * @since 2.4.0\n * @public\n */\n@customElement({\n\ttag: \"ui5-navigation-layout\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\tstyles: [\n\t\tNavigationLayoutCss,\n\t],\n\ttemplate: NavigationLayoutTemplate,\n})\nclass NavigationLayout extends UI5Element {\n\t/**\n\t * Specifies the navigation layout mode.\n\t * @default \"Auto\"\n\t * @public\n\t */\n\t@property()\n\tmode: `${NavigationLayoutMode}` = \"Auto\";\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tsideCollapsed : boolean = isPhone() || window.innerWidth < SCREEN_WIDTH_BREAKPOINT;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\thasSideNavigation = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tisPhone = isPhone();\n\n\t/**\n\t * Gets whether the side navigation is collapsed.\n\t * @public\n\t */\n\tisSideCollapsed() : boolean {\n\t\tthis.calcSideCollapsed();\n\t\treturn this.sideCollapsed;\n\t}\n\n\t/**\n\t * Defines the header.\n\t * @public\n\t */\n\t@slot()\n\theader!: Slot<HTMLElement>;\n\n\t/**\n\t * Defines the side content.\n\t * @public\n\t */\n\t@slot()\n\tsideContent!: Slot<SideNavigation>;\n\n\t/**\n\t * Defines the content.\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\tcontent!: DefaultSlot<HTMLElement>;\n\n\tonBeforeRendering() {\n\t\tthis.calcSideCollapsed();\n\n\t\tconst sideNavigation = this.sideContent[0];\n\t\tthis.hasSideNavigation = !!sideNavigation;\n\n\t\tif (sideNavigation) {\n\t\t\tsideNavigation.collapsed = this.isSideCollapsed();\n\t\t}\n\t}\n\n\tcalcSideCollapsed() {\n\t\tif (this.mode === NavigationLayoutMode.Auto) {\n\t\t\tthis.sideCollapsed = isPhone() || window.innerWidth < SCREEN_WIDTH_BREAKPOINT;\n\t\t} else {\n\t\t\tthis.sideCollapsed = this.mode === NavigationLayoutMode.Collapsed;\n\t\t}\n\t}\n}\n\nNavigationLayout.define();\n\nexport default NavigationLayout;\n"]}

package/dist/NavigationLayoutTemplate.d.ts

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

package/dist/NavigationLayoutTemplate.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+export default function NavigationLayoutTemplate() {
+    return (_jsxs("div", { class: "ui5-nl-root", children: [_jsx("header", { class: "ui5-nl-header", children: _jsx("slot", { name: "header" }) }), _jsxs("section", { class: "ui5-nl-section", children: [_jsx("aside", { class: "ui5-nl-aside", children: _jsx("slot", { name: "sideContent" }) }), _jsx("div", { class: "ui5-nl-content", children: _jsx("slot", {}) })] })] }));
+}
+//# sourceMappingURL=NavigationLayoutTemplate.js.map

package/dist/NavigationLayoutTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationLayoutTemplate.js","sourceRoot":"","sources":["../src/NavigationLayoutTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,wBAAwB;IAC/C,OAAO,CACN,eAAK,KAAK,EAAC,aAAa,aACvB,iBAAQ,KAAK,EAAC,eAAe,YAC5B,eAAM,IAAI,EAAC,QAAQ,GAAQ,GACnB,EACT,mBAAS,KAAK,EAAC,gBAAgB,aAC9B,gBAAO,KAAK,EAAC,cAAc,YAC1B,eAAM,IAAI,EAAC,aAAa,GAAQ,GACzB,EACR,cAAK,KAAK,EAAC,gBAAgB,YAC1B,gBAAa,GACR,IACG,IACL,CACN,CAAC;AACH,CAAC","sourcesContent":["import type NavigationLayout from \"./NavigationLayout.js\";\n\nexport default function NavigationLayoutTemplate(this: NavigationLayout) {\n\treturn (\n\t\t<div class=\"ui5-nl-root\">\n\t\t\t<header class=\"ui5-nl-header\">\n\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t</header>\n\t\t\t<section class=\"ui5-nl-section\">\n\t\t\t\t<aside class=\"ui5-nl-aside\">\n\t\t\t\t\t<slot name=\"sideContent\"></slot>\n\t\t\t\t</aside>\n\t\t\t\t<div class=\"ui5-nl-content\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</div>\n\t);\n}\n"]}