@ui5/webcomponents-fiori 0.0.0-e818f286e → 0.0.0-ebd9a4db3

package/dist/DynamicPageTitle.d.ts

@@ -0,0 +1,168 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import type Toolbar from "@ui5/webcomponents/dist/Toolbar.js";
+import type { ToolbarMinWidthChangeEventDetail } from "@ui5/webcomponents/dist/Toolbar.js";
+import type Title from "@ui5/webcomponents/dist/Title.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * Title of the `DynamicPage`.
+ *
+ * The `DynamicPageTitle` component is part of the `DynamicPage`
+ * family and is used to serve as title of the `DynamicPage`.
+ *
+ * ### Usage
+ *
+ * The `DynamicPageTitle` can hold any component and displays the most important
+ * information regarding the object that will always remain visible while scrolling.
+ *
+ * **Note:** The `actions` slot accepts any UI5 web component, but it's
+ * recommended to use `ui5-toolbar`.
+ *
+ * The user can switch between the expanded/collapsed states of the
+ * `DynamicPage` by clicking on the `DynamicPageTitle`
+ * or by using the expand/collapse visual indicators, positioned at the bottom of the
+ * `DynamicPageTitle` and the `DynamicPageHeader` inside `ui5-dynamic-page-header-actions`.
+ *
+ * ### Responsive Behavior
+ *
+ * The responsive behavior of the `DynamicPageTitle` depends on the behavior of the
+ * content that is displayed.
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @since 2.0.0
+ */
+declare class DynamicPageTitle extends UI5Element {
+    eventDetails: {
+        "toggle-title": void;
+    };
+    /**
+     * Defines if the title is snapped.
+     *
+     * @protected
+     * @default false
+     */
+    snapped: boolean;
+    /**
+     * Defines if the mobileNavigationActions are shown.
+     *
+     * @private
+     */
+    mobileNavigationActions: boolean;
+    /**
+     * Indicates if the elements is on focus
+     * @private
+     */
+    focused: boolean;
+    /**
+     * Defines the minimum width of the content area.
+     * @private
+     */
+    minContentWidth?: number;
+    /**
+     * Defines the minimum width of the actions area.
+     * @private
+     */
+    minActionsWidth?: number;
+    /**
+     * Indicates whether the title has snapped on mobile devices.
+     * @private
+     */
+    hasSnappedTitleOnMobile: boolean;
+    /**
+     * Defines the content of the Heading of the Dynamic Page.
+     *
+     * The font size of the title within the `heading` slot can be adjusted to the recommended values using the following CSS variables:
+     *
+     * **Expanded:** `var(--sapObjectHeader_Title_FontSize)`
+     *
+     * **Collapsed:** `var(--sapObjectHeader_Title_SnappedFontSize)`
+     *
+     * @public
+     */
+    heading: HTMLElement[];
+    /**
+     * Defines the heading that is shown only when the header is snapped.
+     *
+     * @public
+     */
+    snappedHeading: HTMLElement[];
+    /**
+     * Defines the content of the snapped title on mobile devices.
+     *
+     * This slot is displayed only when the `DynamicPageTitle` is in the snapped state on mobile devices.
+     * It should be used to provide a simplified, single-line title that takes up less space on smaller screens.
+     *
+     * **Note:**
+     * - The content set in this slot **overrides** all other content set in the `DynamicPageTitle` slots when displayed.
+     * - The slot is intended for a single `ui5-title` component.
+     *
+     * @public
+     * @since 2.3.0
+     */
+    snappedTitleOnMobile: Array<Title>;
+    /**
+     * Defines the bar with actions in the Dynamic page title.
+     *
+     * @public
+     */
+    actionsBar: HTMLElement[];
+    /**
+     * Defines the bar with navigation actions in the Dynamic page title.
+     *
+     * @public
+     */
+    navigationBar: Array<Toolbar>;
+    /**
+     * Defines the content of the Dynamic page title.
+     *
+     * @public
+     */
+    content: HTMLElement[];
+    /**
+     * Defines the content of the title that is shown only when the header is not snapped.
+     *
+     * @public
+     */
+    subheading: HTMLElement[];
+    /**
+     * Defines the content of the title that is shown only when the header is snapped.
+     *
+     * @public
+     */
+    snappedSubheading: HTMLElement[];
+    /**
+     * Defines the content of the breadcrumbs inside Dynamic Page Title.
+     *
+     * @public
+     */
+    breadcrumbs: HTMLElement[];
+    /**
+     * @private
+     */
+    interactive: boolean;
+    static i18nBundle: I18nBundle;
+    _handleResize: ResizeObserverCallback;
+    constructor();
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    onBeforeRendering(): void;
+    get hasContent(): boolean;
+    get headingSlotName(): "heading" | "snappedHeading";
+    get subheadingSlotName(): "subheading" | "snappedSubheading";
+    get _tabIndex(): 0 | undefined;
+    get _headerExpanded(): boolean;
+    get _ariaDescribedbyText(): string;
+    get _ariaLabelledBy(): string | undefined;
+    get _needsSeparator(): boolean;
+    prepareLayoutActions(): void;
+    handleResize(): void;
+    onMinContentWidthChange(e: CustomEvent<ToolbarMinWidthChangeEventDetail>): void;
+    onTitleClick(): void;
+    _onkeydown(e: KeyboardEvent): void;
+}
+export default DynamicPageTitle;

package/dist/DynamicPageTitle.js

@@ -0,0 +1,234 @@
+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 DynamicPageTitle_1;
+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.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
+import ToolbarItemOverflowBehavior from "@ui5/webcomponents/dist/types/ToolbarItemOverflowBehavior.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+// Template
+import DynamicPageTitleTemplate from "./DynamicPageTitleTemplate.js";
+// Styles
+import DynamicPageTitleCss from "./generated/themes/DynamicPageTitle.css.js";
+// Texts
+import { DYNAMIC_PAGE_ARIA_DESCR_TOGGLE_HEADER, } from "./generated/i18n/i18n-defaults.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * Title of the `DynamicPage`.
+ *
+ * The `DynamicPageTitle` component is part of the `DynamicPage`
+ * family and is used to serve as title of the `DynamicPage`.
+ *
+ * ### Usage
+ *
+ * The `DynamicPageTitle` can hold any component and displays the most important
+ * information regarding the object that will always remain visible while scrolling.
+ *
+ * **Note:** The `actions` slot accepts any UI5 web component, but it's
+ * recommended to use `ui5-toolbar`.
+ *
+ * The user can switch between the expanded/collapsed states of the
+ * `DynamicPage` by clicking on the `DynamicPageTitle`
+ * or by using the expand/collapse visual indicators, positioned at the bottom of the
+ * `DynamicPageTitle` and the `DynamicPageHeader` inside `ui5-dynamic-page-header-actions`.
+ *
+ * ### Responsive Behavior
+ *
+ * The responsive behavior of the `DynamicPageTitle` depends on the behavior of the
+ * content that is displayed.
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @since 2.0.0
+ */
+let DynamicPageTitle = DynamicPageTitle_1 = class DynamicPageTitle extends UI5Element {
+    constructor() {
+        super();
+        /**
+         * Defines if the title is snapped.
+         *
+         * @protected
+         * @default false
+         */
+        this.snapped = false;
+        /**
+         * Defines if the mobileNavigationActions are shown.
+         *
+         * @private
+         */
+        this.mobileNavigationActions = false;
+        /**
+         * Indicates if the elements is on focus
+         * @private
+         */
+        this.focused = false;
+        /**
+         * Indicates whether the title has snapped on mobile devices.
+         * @private
+         */
+        this.hasSnappedTitleOnMobile = false;
+        /**
+         * @private
+         */
+        this.interactive = false;
+        this._handleResize = this.handleResize.bind(this);
+    }
+    onEnterDOM() {
+        ResizeHandler.register(this, this._handleResize);
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(this, this._handleResize);
+    }
+    onBeforeRendering() {
+        this.prepareLayoutActions();
+    }
+    get hasContent() {
+        return !!this.content.length;
+    }
+    get headingSlotName() {
+        if (!this.snapped) {
+            return "heading";
+        }
+        return "snappedHeading";
+    }
+    get subheadingSlotName() {
+        return !this.snapped ? "subheading" : "snappedSubheading";
+    }
+    get _tabIndex() {
+        return this.interactive ? 0 : undefined;
+    }
+    get _headerExpanded() {
+        return !this.snapped;
+    }
+    get _ariaDescribedbyText() {
+        return DynamicPageTitle_1.i18nBundle.getText(DYNAMIC_PAGE_ARIA_DESCR_TOGGLE_HEADER);
+    }
+    get _ariaLabelledBy() {
+        const hasAnyHeading = this[this.headingSlotName].length;
+        if (hasAnyHeading) {
+            return `${this._id}-heading`;
+        }
+    }
+    get _needsSeparator() {
+        return (this.navigationBar.length > 0 && this.actionsBar.length > 0);
+    }
+    prepareLayoutActions() {
+        const navigationBar = this.querySelector("[ui5-toolbar][slot='navigationBar']"), isWideScreen = this.offsetWidth >= 1280;
+        if (!navigationBar) {
+            return;
+        }
+        navigationBar.items.forEach(action => {
+            action.overflowPriority = isWideScreen
+                ? ToolbarItemOverflowBehavior.NeverOverflow
+                : ToolbarItemOverflowBehavior.Default;
+        });
+    }
+    handleResize() {
+        this.mobileNavigationActions = this.offsetWidth < 1280;
+    }
+    onMinContentWidthChange(e) {
+        const slotName = e.target?.assignedSlot?.name;
+        if (!slotName || slotName === "content") {
+            this.minContentWidth = e.detail.minWidth;
+        }
+        else if (slotName === "actionsBar") {
+            this.minActionsWidth = e.detail.minWidth;
+        }
+    }
+    onTitleClick() {
+        this.fireDecoratorEvent("toggle-title");
+    }
+    _onkeydown(e) {
+        if (isEnter(e) || isSpace(e)) {
+            e.preventDefault();
+            this.fireDecoratorEvent("toggle-title");
+        }
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], DynamicPageTitle.prototype, "snapped", void 0);
+__decorate([
+    property({ type: Boolean })
+], DynamicPageTitle.prototype, "mobileNavigationActions", void 0);
+__decorate([
+    property({ type: Boolean })
+], DynamicPageTitle.prototype, "focused", void 0);
+__decorate([
+    property({ type: Number })
+], DynamicPageTitle.prototype, "minContentWidth", void 0);
+__decorate([
+    property({ type: Number })
+], DynamicPageTitle.prototype, "minActionsWidth", void 0);
+__decorate([
+    property({ type: Boolean })
+], DynamicPageTitle.prototype, "hasSnappedTitleOnMobile", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], DynamicPageTitle.prototype, "heading", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], DynamicPageTitle.prototype, "snappedHeading", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], DynamicPageTitle.prototype, "snappedTitleOnMobile", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], DynamicPageTitle.prototype, "actionsBar", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], DynamicPageTitle.prototype, "navigationBar", void 0);
+__decorate([
+    slot({ "default": true, type: HTMLElement })
+], DynamicPageTitle.prototype, "content", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], DynamicPageTitle.prototype, "subheading", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], DynamicPageTitle.prototype, "snappedSubheading", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], DynamicPageTitle.prototype, "breadcrumbs", void 0);
+__decorate([
+    property({ type: Boolean })
+], DynamicPageTitle.prototype, "interactive", void 0);
+__decorate([
+    i18n("@ui5/webcomponents-fiori")
+], DynamicPageTitle, "i18nBundle", void 0);
+DynamicPageTitle = DynamicPageTitle_1 = __decorate([
+    customElement({
+        tag: "ui5-dynamic-page-title",
+        fastNavigation: true,
+        renderer: jsxRenderer,
+        styles: DynamicPageTitleCss,
+        template: DynamicPageTitleTemplate,
+    })
+    /**
+     * Event is fired when the title is toggled.
+     * @private
+     */
+    ,
+    event("toggle-title", {
+        bubbles: true,
+    })
+], DynamicPageTitle);
+DynamicPageTitle.define();
+export default DynamicPageTitle;
+//# sourceMappingURL=DynamicPageTitle.js.map

package/dist/DynamicPageTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicPageTitle.js","sourceRoot":"","sources":["../src/DynamicPageTitle.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 event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type Toolbar from \"@ui5/webcomponents/dist/Toolbar.js\";\nimport type { ToolbarMinWidthChangeEventDetail } from \"@ui5/webcomponents/dist/Toolbar.js\";\nimport ToolbarItemOverflowBehavior from \"@ui5/webcomponents/dist/types/ToolbarItemOverflowBehavior.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport type Title from \"@ui5/webcomponents/dist/Title.js\";\n\n// Template\nimport DynamicPageTitleTemplate from \"./DynamicPageTitleTemplate.js\";\n\n// Styles\nimport DynamicPageTitleCss from \"./generated/themes/DynamicPageTitle.css.js\";\n\n// Texts\nimport {\n\tDYNAMIC_PAGE_ARIA_DESCR_TOGGLE_HEADER,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * Title of the `DynamicPage`.\n *\n * The `DynamicPageTitle` component is part of the `DynamicPage`\n * family and is used to serve as title of the `DynamicPage`.\n *\n * ### Usage\n *\n * The `DynamicPageTitle` can hold any component and displays the most important\n * information regarding the object that will always remain visible while scrolling.\n *\n * **Note:** The `actions` slot accepts any UI5 web component, but it's\n * recommended to use `ui5-toolbar`.\n *\n * The user can switch between the expanded/collapsed states of the\n * `DynamicPage` by clicking on the `DynamicPageTitle`\n * or by using the expand/collapse visual indicators, positioned at the bottom of the\n * `DynamicPageTitle` and the `DynamicPageHeader` inside `ui5-dynamic-page-header-actions`.\n *\n * ### Responsive Behavior\n *\n * The responsive behavior of the `DynamicPageTitle` depends on the behavior of the\n * content that is displayed.\n * @constructor\n * @extends UI5Element\n * @public\n * @since 2.0.0\n */\n@customElement({\n\ttag: \"ui5-dynamic-page-title\",\n\tfastNavigation: true,\n\trenderer: jsxRenderer,\n\tstyles: DynamicPageTitleCss,\n\ttemplate: DynamicPageTitleTemplate,\n})\n\n/**\n * Event is fired when the title is toggled.\n * @private\n */\n@event(\"toggle-title\", {\n\tbubbles: true,\n})\n\nclass DynamicPageTitle extends UI5Element {\n\teventDetails!: {\n\t\t\"toggle-title\": void;\n\t}\n\t/**\n\t * Defines if the title is snapped.\n\t *\n\t * @protected\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\tsnapped = false;\n\n\t/**\n\t * Defines if the mobileNavigationActions are shown.\n\t *\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tmobileNavigationActions = false;\n\n\t/**\n\t * Indicates if the elements is on focus\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfocused = false;\n\n\t/**\n\t * Defines the minimum width of the content area.\n\t * @private\n\t */\n\t@property({ type: Number })\n\tminContentWidth?: number;\n\n\t/**\n\t * Defines the minimum width of the actions area.\n\t * @private\n\t */\n\t@property({ type: Number })\n\tminActionsWidth?: number;\n\n\t/**\n\t * Indicates whether the title has snapped on mobile devices.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\thasSnappedTitleOnMobile = false;\n\n\t/**\n\t * Defines the content of the Heading of the Dynamic Page.\n\t *\n\t * The font size of the title within the `heading` slot can be adjusted to the recommended values using the following CSS variables:\n\t *\n\t * **Expanded:** `var(--sapObjectHeader_Title_FontSize)`\n\t *\n\t * **Collapsed:** `var(--sapObjectHeader_Title_SnappedFontSize)`\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\theading!: HTMLElement[];\n\n\t/**\n\t * Defines the heading that is shown only when the header is snapped.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tsnappedHeading!: HTMLElement[];\n\n\t/**\n\t * Defines the content of the snapped title on mobile devices.\n\t *\n\t * This slot is displayed only when the `DynamicPageTitle` is in the snapped state on mobile devices.\n\t * It should be used to provide a simplified, single-line title that takes up less space on smaller screens.\n\t *\n\t * **Note:**\n\t * - The content set in this slot **overrides** all other content set in the `DynamicPageTitle` slots when displayed.\n\t * - The slot is intended for a single `ui5-title` component.\n\t *\n\t * @public\n\t * @since 2.3.0\n\t */\n\t@slot({ type: HTMLElement })\n\tsnappedTitleOnMobile!: Array<Title>;\n\n\t/**\n\t * Defines the bar with actions in the Dynamic page title.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tactionsBar!: HTMLElement[];\n\n\t/**\n\t * Defines the bar with navigation actions in the Dynamic page title.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tnavigationBar!: Array<Toolbar>;\n\n\t/**\n\t * Defines the content of the Dynamic page title.\n\t *\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement })\n\tcontent!: HTMLElement[];\n\n\t/**\n\t * Defines the content of the title that is shown only when the header is not snapped.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tsubheading!: HTMLElement[];\n\n\t/**\n\t * Defines the content of the title that is shown only when the header is snapped.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tsnappedSubheading!: HTMLElement[];\n\n\t/**\n\t * Defines the content of the breadcrumbs inside Dynamic Page Title.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tbreadcrumbs!: HTMLElement[];\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tinteractive = false;\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\t_handleResize: ResizeObserverCallback;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._handleResize = this.handleResize.bind(this);\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._handleResize);\n\t\tif (isDesktop()) {\n\t\t\tthis.setAttribute(\"desktop\", \"\");\n\t\t}\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._handleResize);\n\t}\n\n\tonBeforeRendering() {\n\t\tthis.prepareLayoutActions();\n\t}\n\n\tget hasContent() {\n\t\treturn !!this.content.length;\n\t}\n\n\tget headingSlotName() {\n\t\tif (!this.snapped) {\n\t\t\treturn \"heading\";\n\t\t}\n\t\treturn \"snappedHeading\";\n\t}\n\n\tget subheadingSlotName() {\n\t\treturn !this.snapped ? \"subheading\" : \"snappedSubheading\";\n\t}\n\n\tget _tabIndex() {\n\t\treturn this.interactive ? 0 : undefined;\n\t}\n\n\tget _headerExpanded() {\n\t\treturn !this.snapped;\n\t}\n\n\tget _ariaDescribedbyText() {\n\t\treturn DynamicPageTitle.i18nBundle.getText(DYNAMIC_PAGE_ARIA_DESCR_TOGGLE_HEADER);\n\t}\n\n\tget _ariaLabelledBy() {\n\t\tconst hasAnyHeading = this[this.headingSlotName].length;\n\t\tif (hasAnyHeading) {\n\t\t\treturn `${this._id}-heading`;\n\t\t}\n\t}\n\n\tget _needsSeparator(): boolean {\n\t\treturn (this.navigationBar.length > 0 && this.actionsBar.length > 0);\n\t}\n\n\tprepareLayoutActions() {\n\t\tconst navigationBar = this.querySelector<Toolbar>(\"[ui5-toolbar][slot='navigationBar']\"),\n\t\t\tisWideScreen = this.offsetWidth >= 1280;\n\n\t\tif (!navigationBar) {\n\t\t\treturn;\n\t\t}\n\n\t\tnavigationBar.items.forEach(action => {\n\t\t\taction.overflowPriority = isWideScreen\n\t\t\t\t? ToolbarItemOverflowBehavior.NeverOverflow\n\t\t\t\t: ToolbarItemOverflowBehavior.Default;\n\t\t});\n\t}\n\n\thandleResize() {\n\t\tthis.mobileNavigationActions = this.offsetWidth < 1280;\n\t}\n\n\tonMinContentWidthChange(e: CustomEvent<ToolbarMinWidthChangeEventDetail>) {\n\t\tconst slotName = (<HTMLElement>e.target)?.assignedSlot?.name;\n\t\tif (!slotName || slotName === \"content\") {\n\t\t\tthis.minContentWidth = e.detail.minWidth;\n\t\t} else if (slotName === \"actionsBar\") {\n\t\t\tthis.minActionsWidth = e.detail.minWidth;\n\t\t}\n\t}\n\n\tonTitleClick() {\n\t\tthis.fireDecoratorEvent(\"toggle-title\");\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isEnter(e) || isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t\tthis.fireDecoratorEvent(\"toggle-title\");\n\t\t}\n\t}\n}\n\nDynamicPageTitle.define();\n\nexport default DynamicPageTitle;\n"]}

package/dist/DynamicPageTitleTemplate.d.ts

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

package/dist/DynamicPageTitleTemplate.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import slimArrowDownIcon from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+export default function DynamicPageTitleTemplate() {
+    return (_jsxs("div", { class: "ui5-dynamic-page-title-root", children: [_jsx("span", { class: "ui5-dynamic-page-title-focus-area", "data-sap-focus-ref": true, tabIndex: this._tabIndex, onKeyDown: this._onkeydown, onClick: this.onTitleClick, role: "button", "aria-expanded": this._headerExpanded, "aria-labelledby": this._ariaLabelledBy, "aria-describedby": `${this._id}-toggle-description` }), this.hasSnappedTitleOnMobile ?
+                _jsxs("div", { id: `${this._id}-heading`, class: "ui5-dynamic-page--snapped-title-on-mobile", children: [_jsx("slot", { name: "snappedTitleOnMobile" }), _jsx(Icon, { name: slimArrowDownIcon, mode: "Decorative" })] })
+                : _jsxs(_Fragment, { children: [_jsxs("div", { class: "ui5-dynamic-page-title--top-area", children: [_jsx("slot", { name: "breadcrumbs" }), this.mobileNavigationActions &&
+                                    _jsx("slot", { name: "navigationBar" })] }), _jsxs("div", { class: "ui5-dynamic-page-title--wrapper", "onui5-_min-content-width-change": this.onMinContentWidthChange, children: [_jsx("div", { id: `${this._id}-heading`, class: "ui5-dynamic-page-title--heading", children: _jsx("slot", { name: this.headingSlotName }) }), this.hasContent &&
+                                    _jsx("div", { class: "ui5-dynamic-page-title--content", style: {
+                                            "min-width": this.minContentWidth ? `${this.minContentWidth || 0}px` : undefined,
+                                        }, children: _jsx("slot", {}) }), _jsxs("div", { class: "ui5-dynamic-page-title--actions", style: {
+                                        "min-width": this.minActionsWidth ? `${this.minActionsWidth || 0}px` : undefined,
+                                    }, children: [_jsx("slot", { name: "actionsBar" }), !this.mobileNavigationActions && _jsxs(_Fragment, { children: [this._needsSeparator &&
+                                                    _jsx("div", { class: "ui5-dynamic-page-title--actions-separator" }), _jsx("slot", { name: "navigationBar" })] })] })] }), _jsx("div", { class: "ui5-dynamic-page-title--subheading", children: _jsx("slot", { name: this.subheadingSlotName }) })] }), _jsx("span", { id: `${this._id}-toggle-description`, class: "ui5-hidden-text", children: this._ariaDescribedbyText })] }));
+}
+//# sourceMappingURL=DynamicPageTitleTemplate.js.map

package/dist/DynamicPageTitleTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicPageTitleTemplate.js","sourceRoot":"","sources":["../src/DynamicPageTitleTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,iCAAiC,CAAC;AAEnD,OAAO,iBAAiB,MAAM,kDAAkD,CAAC;AAEjF,MAAM,CAAC,OAAO,UAAU,wBAAwB;IAC/C,OAAO,CACN,eAAK,KAAK,EAAC,6BAA6B,aACvC,eAAM,KAAK,EAAC,mCAAmC,8BAE9C,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,eAAe,qBAClB,IAAI,CAAC,eAAe,sBACnB,GAAG,IAAI,CAAC,GAAG,qBAAqB,GAC3C,EAEP,IAAI,CAAC,uBAAuB,CAAC,CAAC;gBAC9B,eAAK,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,UAAU,EAC5B,KAAK,EAAC,2CAA2C,aAElD,eAAM,IAAI,EAAC,sBAAsB,GAAQ,EACzC,KAAC,IAAI,IAAC,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAC,YAAY,GAAG,IAC9C;gBACN,CAAC,CAAC,8BACD,eAAK,KAAK,EAAC,kCAAkC,aAC5C,eAAM,IAAI,EAAC,aAAa,GAAQ,EAE/B,IAAI,CAAC,uBAAuB;oCAC7B,eAAM,IAAI,EAAC,eAAe,GAAQ,IAE7B,EACN,eAAK,KAAK,EAAC,iCAAiC,qCACV,IAAI,CAAC,uBAAuB,aAE7D,cAAK,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,UAAU,EAC7B,KAAK,EAAC,iCAAiC,YAEvC,eAAM,IAAI,EAAE,IAAI,CAAC,eAAe,GAAS,GACpC,EAEL,IAAI,CAAC,UAAU;oCAChB,cAAK,KAAK,EAAC,iCAAiC,EAC3C,KAAK,EAAE;4CACN,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;yCAChF,YAED,gBAAa,GACR,EAGN,eAAK,KAAK,EAAC,iCAAiC,EAC3C,KAAK,EAAE;wCACN,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;qCAChF,aAED,eAAM,IAAI,EAAC,YAAY,GAAQ,EAC9B,CAAC,IAAI,CAAC,uBAAuB,IAAI,8BAChC,IAAI,CAAC,eAAe;oDACrB,cAAK,KAAK,EAAC,2CAA2C,GAAO,EAE7D,eAAM,IAAI,EAAC,eAAe,GAAQ,IAChC,IACE,IACD,EACN,cAAK,KAAK,EAAC,oCAAoC,YAC9C,eAAM,IAAI,EAAE,IAAI,CAAC,kBAAkB,GAAS,GACvC,IACJ,EAEJ,eAAM,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,qBAAqB,EACzC,KAAK,EAAC,iBAAiB,YACtB,IAAI,CAAC,oBAAoB,GAAQ,IAC9B,CACN,CAAC;AACH,CAAC","sourcesContent":["import Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport type DynamicPageTitle from \"./DynamicPageTitle.js\";\nimport slimArrowDownIcon from \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\n\nexport default function DynamicPageTitleTemplate(this: DynamicPageTitle) {\n\treturn (\n\t\t<div class=\"ui5-dynamic-page-title-root\">\n\t\t\t<span class=\"ui5-dynamic-page-title-focus-area\"\n\t\t\t\tdata-sap-focus-ref\n\t\t\t\ttabIndex={this._tabIndex}\n\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\tonClick={this.onTitleClick}\n\t\t\t\trole=\"button\"\n\t\t\t\taria-expanded={this._headerExpanded}\n\t\t\t\taria-labelledby={this._ariaLabelledBy}\n\t\t\t\taria-describedby={`${this._id}-toggle-description`}\n\t\t\t></span>\n\n\t\t\t{this.hasSnappedTitleOnMobile ?\n\t\t\t\t<div id={`${this._id}-heading`}\n\t\t\t\t\t class=\"ui5-dynamic-page--snapped-title-on-mobile\"\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"snappedTitleOnMobile\"></slot>\n\t\t\t\t\t<Icon name={slimArrowDownIcon} mode=\"Decorative\" />\n\t\t\t\t</div>\n\t\t\t\t: <>\n\t\t\t\t\t<div class=\"ui5-dynamic-page-title--top-area\">\n\t\t\t\t\t\t<slot name=\"breadcrumbs\"></slot>\n\n\t\t\t\t\t\t{this.mobileNavigationActions &&\n\t\t\t\t\t\t<slot name=\"navigationBar\"></slot>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"ui5-dynamic-page-title--wrapper\"\n\t\t\t\t\t\tonui5-_min-content-width-change={this.onMinContentWidthChange}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div id={`${this._id}-heading`}\n\t\t\t\t\t\t class=\"ui5-dynamic-page-title--heading\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<slot name={this.headingSlotName}></slot>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t{this.hasContent &&\n\t\t\t\t\t\t<div class=\"ui5-dynamic-page-title--content\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\"min-width\": this.minContentWidth ? `${this.minContentWidth || 0}px` : undefined,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t<div class=\"ui5-dynamic-page-title--actions\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\"min-width\": this.minActionsWidth ? `${this.minActionsWidth || 0}px` : undefined,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<slot name=\"actionsBar\"></slot>\n\t\t\t\t\t\t\t{!this.mobileNavigationActions && <>\n\t\t\t\t\t\t\t\t{this._needsSeparator &&\n\t\t\t\t\t\t\t\t<div class=\"ui5-dynamic-page-title--actions-separator\"></div>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t<slot name=\"navigationBar\"></slot>\n\t\t\t\t\t\t\t</>}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"ui5-dynamic-page-title--subheading\">\n\t\t\t\t\t\t<slot name={this.subheadingSlotName}></slot>\n\t\t\t\t\t</div>\n\t\t\t\t</>}\n\n\t\t\t<span id={`${this._id}-toggle-description`}\n\t\t\t\tclass=\"ui5-hidden-text\"\n\t\t\t>{this._ariaDescribedbyText}</span>\n\t\t</div>\n\t);\n}\n"]}