@sapudex/web-components 0.224.0 → 2.0.0

package/dist/Wizard.d.ts

@@ -1,6 +1,31 @@
-import Wizard from "@ui5/webcomponents-fiori/dist/Wizard.js";
-import UDExWizardTab from "./WizardTab.js";
-import UDExWizardStep from "./WizardStep.js";
+import UI5Wizard from "@ui5/webcomponents-fiori/dist/Wizard.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import type UDExWizardTab from "./WizardTab.js";
+import type UDExWizardStep from "./WizardStep.js";
+import { UDExWindowSize } from "./types/common.js";
+type AccessibilityInformation = {
+    ariaSetsize: number;
+    ariaPosinset: number;
+    ariaLabel: string;
+};
+type StepInfo = {
+    icon?: string;
+    titleText?: string;
+    subtitleText?: string;
+    number: number;
+    selected: boolean;
+    disabled: boolean;
+    completed: boolean;
+    hideSeparator: boolean;
+    activeSeparator: boolean;
+    branchingSeparator: boolean;
+    pos: number;
+    accInfo: AccessibilityInformation;
+    refStepId: string;
+    styles: {
+        zIndex: number;
+    };
+};
 /**
  * @class
  *
@@ -16,11 +41,11 @@ import UDExWizardStep from "./WizardStep.js";
  *
  * @constructor
  * @author SAP SE
- * @extends Wizard
+ * @extends UI5Wizard
  * @tagname udex-wizard
  * @public
  */
-declare class UDExWizard extends Wizard {
+declare class UDExWizard extends UI5Wizard {
     steps: UDExWizardStep[];
     /**
      * Defines whether the component has unknown number of steps.
@@ -29,8 +54,24 @@ declare class UDExWizard extends Wizard {
      * @public
      */
     indeterminate: boolean;
+    /**
+     * Defines the current breakpoint.
+     *
+     * @default "XL"
+     * @private
+     */
+    _breakpoint: `${UDExWindowSize}`;
+    _handleResizeBound: ResizeObserverCallback;
     constructor();
+    _calcCurrentBreakpoint: () => void;
     onEnterDOM(): void;
+    onExitDOM(): void;
+    onAfterRendering(): void;
+    _adjustHeaderOverflow: () => void;
+    switchSelectionFromOldToNewStep: (selectedStep: UDExWizardStep, stepToSelect: UDExWizardStep, stepToSelectIndex: number) => void;
+    getLastEnabledStepIndex: () => number;
+    get stepsInfo(): StepInfo[];
+    private _handleResize;
     get slottedSteps(): UDExWizardStep[];
     get stepsInHeaderDOM(): UDExWizardTab[];
     get _steps(): UDExWizardStep[];

package/dist/Wizard.js

@@ -7,22 +7,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import Wizard from "@ui5/webcomponents-fiori/dist/Wizard.js";
+import UI5Wizard from "@ui5/webcomponents-fiori/dist/Wizard.js";
 import WizardContentLayout from "@ui5/webcomponents-fiori/dist/types/WizardContentLayout.js";
-import wizardCss from "@ui5/webcomponents-fiori/dist/generated/themes/Wizard.css.js";
-import UDExWizardTab from "./WizardTab.js";
-import UDExWizardStep from "./WizardStep.js";
-import WizardTemplate from "./generated/templates/WizardTemplate.lit.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import WizardTemplate from "./WizardTemplate.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 // Styles
 import WizardCss from "./generated/themes/Wizard.css.js";
+import { RESPONSIVE_BREAKPOINTS, UDExWindowSize } from "./types/common.js";
 const EXPANDED_STEP = "data-ui5-wizard-expanded-tab";
-const RESPONSIVE_BREAKPOINTS = {
-    "360": "S",
-    "640": "M",
-    "980": "L",
-    "1300": "XL",
-};
 /**
  * @class
  *
@@ -38,40 +31,42 @@ const RESPONSIVE_BREAKPOINTS = {
  *
  * @constructor
  * @author SAP SE
- * @extends Wizard
+ * @extends UI5Wizard
  * @tagname udex-wizard
  * @public
  */
-let UDExWizard = class UDExWizard extends Wizard {
+let UDExWizard = class UDExWizard extends UI5Wizard {
     constructor() {
         super();
-    }
-    onEnterDOM() {
-        this.contentLayout = WizardContentLayout.SingleStep;
+        /**
+         * Defines the current breakpoint.
+         *
+         * @default "XL"
+         * @private
+         */
+        this._breakpoint = UDExWindowSize.XL;
         this._calcCurrentBreakpoint = () => {
             const breakpointDimensions = Object.keys(RESPONSIVE_BREAKPOINTS).reverse();
-            const breakpoint = breakpointDimensions.find(size => Number(size) < this.width);
+            const breakpoint = breakpointDimensions.find(size => Number(size) < this.offsetWidth);
             this._breakpoint = breakpoint ? RESPONSIVE_BREAKPOINTS[breakpoint] : RESPONSIVE_BREAKPOINTS["360"];
         };
-        // overriding ui5-wizard behavior for small screens - tabs are not clickable, unless expanded
         this._adjustHeaderOverflow = () => {
             const tabs = this.stepsInHeaderDOM;
             tabs.forEach(step => {
                 step.setAttribute(EXPANDED_STEP, "true");
             });
         };
-        this.switchSelectionFromOldToNewStep = (selectedStep, stepToSelect, stepToSelectIndex, changeWithClick) => {
+        this.switchSelectionFromOldToNewStep = (selectedStep, stepToSelect, stepToSelectIndex) => {
             if (selectedStep && stepToSelect) {
-                // keep the selection if next step is disabled
                 if (!stepToSelect.disabled) {
                     selectedStep.selected = false;
                     selectedStep.completed = true;
                     stepToSelect.selected = true;
                 }
-                this.fireEvent("step-change", {
+                this.fireDecoratorEvent("step-change", {
                     step: stepToSelect,
                     previousStep: selectedStep,
-                    changeWithClick,
+                    withScroll: false,
                 });
                 this.selectedStepIndex = stepToSelectIndex;
             }
@@ -85,51 +80,63 @@ let UDExWizard = class UDExWizard extends Wizard {
             });
             return lastEnabledStepIndex;
         };
-        this.getStepsInfo = () => {
-            const lastEnabledStepIndex = this.getLastEnabledStepIndex();
-            const stepsCount = this.stepsCount;
-            const selectedStepIndex = this.getSelectedStepIndex();
-            let initialZIndex = this.steps.length + 10;
-            let accInfo;
-            this._adjustHeaderOverflow();
-            return this.steps.map((step, idx) => {
-                const pos = idx + 1;
-                const hideSeparator = idx === stepsCount - 1 && !this.indeterminate;
-                const stepStateText = step.disabled
-                    ? this.inactiveStepText
-                    : this.activeStepText;
-                const ariaLabel = (step.titleText
-                    ? `${pos} ${step.titleText} ${stepStateText}`
-                    : `${this.navStepDefaultHeading} ${pos} ${stepStateText}`).trim();
-                const isAfterCurrent = idx > selectedStepIndex;
-                accInfo = {
-                    ariaSetsize: stepsCount,
-                    ariaPosinset: pos,
-                    ariaLabel: this.getStepAriaLabelText(step, ariaLabel),
-                };
-                const stepInfo = {
-                    icon: step.icon,
-                    titleText: step.titleText,
-                    subtitleText: step.subtitleText,
-                    number: pos,
-                    selected: step.selected,
-                    disabled: !step.selected && !step.completed,
-                    completed: step.completed,
-                    hideSeparator,
-                    activeSeparator: idx < lastEnabledStepIndex,
-                    branchingSeparator: step.branching,
-                    pos,
-                    accInfo,
-                    refStepId: step._id,
-                    tabIndex: this.selectedStepIndex === idx ? "0" : "-1",
-                    breakpoint: this._breakpoint,
-                    styles: {
-                        zIndex: isAfterCurrent ? --initialZIndex : 1,
-                    },
-                };
-                return stepInfo;
-            });
-        };
+        this._handleResizeBound = this._handleResize.bind(this);
+    }
+    onEnterDOM() {
+        this.contentLayout = WizardContentLayout.SingleStep;
+        ResizeHandler.register(this, this._handleResizeBound);
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(this, this._handleResizeBound);
+    }
+    onAfterRendering() {
+        this._calcCurrentBreakpoint();
+    }
+    get stepsInfo() {
+        const lastEnabledStepIndex = this.getLastEnabledStepIndex();
+        const stepsCount = this.stepsCount;
+        const selectedStepIndex = this.getSelectedStepIndex();
+        let initialZIndex = this.steps.length + 10;
+        let accInfo;
+        this._adjustHeaderOverflow();
+        return this.steps.map((step, idx) => {
+            const pos = idx + 1;
+            const hideSeparator = idx === stepsCount - 1 && !this.indeterminate;
+            const stepStateText = step.disabled
+                ? this.inactiveStepText
+                : this.activeStepText;
+            const ariaLabel = (step.titleText
+                ? `${pos} ${step.titleText} ${stepStateText}`
+                : `${this.navStepDefaultHeading} ${pos} ${stepStateText}`).trim();
+            const isAfterCurrent = idx > selectedStepIndex;
+            accInfo = {
+                "ariaSetsize": stepsCount,
+                "ariaPosinset": pos,
+                "ariaLabel": this.getStepAriaLabelText(step, ariaLabel),
+            };
+            const stepInfo = {
+                icon: step.icon,
+                titleText: step.titleText,
+                subtitleText: step.subtitleText,
+                number: pos,
+                selected: step.selected,
+                disabled: !step.selected && !step.completed,
+                completed: step.completed,
+                hideSeparator,
+                activeSeparator: idx < lastEnabledStepIndex,
+                branchingSeparator: step.branching,
+                pos,
+                accInfo,
+                refStepId: step._id,
+                styles: {
+                    zIndex: isAfterCurrent ? --initialZIndex : 1,
+                },
+            };
+            return stepInfo;
+        });
+    }
+    _handleResize() {
+        this._calcCurrentBreakpoint();
     }
     get slottedSteps() {
         return this.getSlottedNodes("steps");
@@ -156,13 +163,15 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], UDExWizard.prototype, "indeterminate", void 0);
+__decorate([
+    property()
+], UDExWizard.prototype, "_breakpoint", void 0);
 UDExWizard = __decorate([
     customElement({
         tag: "udex-wizard",
-        renderer: litRender,
+        renderer: jsxRenderer,
         template: WizardTemplate,
-        styles: [wizardCss, WizardCss],
-        dependencies: [...Wizard.dependencies, UDExWizardTab, UDExWizardStep],
+        styles: [UI5Wizard.styles, WizardCss],
     })
 ], UDExWizard);
 UDExWizard.define();

package/dist/Wizard.js.map

@@ -1 +1 @@
-{"version":3,"file":"Wizard.js","sourceRoot":"","sources":["../src/Wizard.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Wizard from \"@ui5/webcomponents-fiori/dist/Wizard.js\";\nimport WizardContentLayout from \"@ui5/webcomponents-fiori/dist/types/WizardContentLayout.js\";\nimport wizardCss from \"@ui5/webcomponents-fiori/dist/generated/themes/Wizard.css.js\";\nimport UDExWizardTab from \"./WizardTab.js\";\nimport UDExWizardStep from \"./WizardStep.js\";\n\nimport WizardTemplate from \"./generated/templates/WizardTemplate.lit.js\";\n\n// Styles\nimport WizardCss from \"./generated/themes/Wizard.css.js\";\n\ntype ResponsiveBreakpoints = {\n  [key: string]: string\n}\n\nconst EXPANDED_STEP = \"data-ui5-wizard-expanded-tab\";\nconst RESPONSIVE_BREAKPOINTS: ResponsiveBreakpoints = {\n  \"360\": \"S\",\n  \"640\": \"M\",\n  \"980\": \"L\",\n  \"1300\": \"XL\",\n};\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-wizard</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Wizard.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends Wizard\n * @tagname udex-wizard\n * @public\n */\n@customElement({\n  tag: \"udex-wizard\",\n  renderer: litRender,\n  template: WizardTemplate,\n  styles: [wizardCss, WizardCss],\n  dependencies: [...Wizard.dependencies, UDExWizardTab, UDExWizardStep],\n})\n\nclass UDExWizard extends Wizard {\n  @slot({\n    \"default\": true,\n    type: HTMLElement,\n    individualSlots: true,\n    invalidateOnChildChange: true,\n  })\n    steps!: UDExWizardStep[];\n\n  /**\n   * Defines whether the component has unknown number of steps.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    indeterminate!: boolean;\n\n  constructor() {\n    super();\n  }\n\n  onEnterDOM() {\n    this.contentLayout = WizardContentLayout.SingleStep;\n\n    this._calcCurrentBreakpoint = () => {\n      const breakpointDimensions = Object.keys(RESPONSIVE_BREAKPOINTS).reverse();\n      const breakpoint = breakpointDimensions.find(size => Number(size) < this.width!);\n      this._breakpoint = breakpoint ? RESPONSIVE_BREAKPOINTS[breakpoint] : RESPONSIVE_BREAKPOINTS[\"360\"];\n    };\n\n    // overriding ui5-wizard behavior for small screens - tabs are not clickable, unless expanded\n    this._adjustHeaderOverflow = () => {\n      const tabs = this.stepsInHeaderDOM;\n      tabs.forEach(step => {\n        step.setAttribute(EXPANDED_STEP, \"true\");\n      });\n    };\n\n    this.switchSelectionFromOldToNewStep = (\n      selectedStep: UDExWizardStep,\n      stepToSelect: UDExWizardStep,\n      stepToSelectIndex,\n      changeWithClick,\n    ) => {\n      if (selectedStep && stepToSelect) {\n        // keep the selection if next step is disabled\n        if (!stepToSelect.disabled) {\n          selectedStep.selected = false;\n          selectedStep.completed = true;\n          stepToSelect.selected = true;\n        }\n        this.fireEvent(\"step-change\", {\n          step: stepToSelect,\n          previousStep: selectedStep,\n          changeWithClick,\n        });\n        this.selectedStepIndex = stepToSelectIndex;\n      }\n    };\n\n    this.getLastEnabledStepIndex = () => {\n      let lastEnabledStepIndex = 0;\n      this.slottedSteps.forEach((step, idx) => {\n        if (step.selected || step.completed) {\n          lastEnabledStepIndex = idx;\n        }\n      });\n      return lastEnabledStepIndex;\n    };\n\n    this.getStepsInfo = () => {\n      const lastEnabledStepIndex = this.getLastEnabledStepIndex();\n      const stepsCount = this.stepsCount;\n      const selectedStepIndex = this.getSelectedStepIndex();\n      let initialZIndex = this.steps.length + 10;\n      let accInfo;\n      this._adjustHeaderOverflow();\n      return this.steps.map((step, idx) => {\n        const pos = idx + 1;\n        const hideSeparator = idx === stepsCount - 1 && !this.indeterminate;\n        const stepStateText = step.disabled\n          ? this.inactiveStepText\n          : this.activeStepText;\n        const ariaLabel = (\n          step.titleText\n            ? `${pos} ${step.titleText} ${stepStateText}`\n            : `${this.navStepDefaultHeading} ${pos} ${stepStateText}`\n        ).trim();\n        const isAfterCurrent = idx > selectedStepIndex;\n        accInfo = {\n          ariaSetsize: stepsCount,\n          ariaPosinset: pos,\n          ariaLabel: this.getStepAriaLabelText(step, ariaLabel),\n        };\n        const stepInfo = {\n          icon: step.icon,\n          titleText: step.titleText,\n          subtitleText: step.subtitleText,\n          number: pos,\n          selected: step.selected,\n          disabled: !step.selected && !step.completed,\n          completed: step.completed,\n          hideSeparator,\n          activeSeparator: idx < lastEnabledStepIndex,\n          branchingSeparator: step.branching,\n          pos,\n          accInfo,\n          refStepId: step._id,\n          tabIndex: this.selectedStepIndex === idx ? \"0\" : \"-1\",\n          breakpoint: this._breakpoint,\n          styles: {\n            zIndex: isAfterCurrent ? --initialZIndex : 1,\n          },\n        };\n        return stepInfo;\n      });\n    };\n  }\n\n  get slottedSteps(): UDExWizardStep[] {\n    return this.getSlottedNodes(\"steps\");\n  }\n\n  get stepsInHeaderDOM(): UDExWizardTab[] {\n    return Array.from(this.shadowRoot!.querySelectorAll(\"[udex-wizard-tab]\"));\n  }\n\n  get _steps(): UDExWizardStep[] {\n    const stepsInfo = this.getStepsInfo();\n    return this.steps.map((step, idx) => {\n      step.stepContentAriaLabel = `${this.navStepDefaultHeading} ${stepsInfo[idx].number} ${stepsInfo[idx].titleText}`;\n      return step;\n    });\n  }\n}\n\nUDExWizard.define();\n\nexport default UDExWizard;\n"]}
+{"version":3,"file":"Wizard.js","sourceRoot":"","sources":["../src/Wizard.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport UI5Wizard from \"@ui5/webcomponents-fiori/dist/Wizard.js\";\nimport WizardContentLayout from \"@ui5/webcomponents-fiori/dist/types/WizardContentLayout.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport WizardTemplate from \"./WizardTemplate.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type UDExWizardTab from \"./WizardTab.js\";\nimport type UDExWizardStep from \"./WizardStep.js\";\n\n// Styles\nimport WizardCss from \"./generated/themes/Wizard.css.js\";\nimport { RESPONSIVE_BREAKPOINTS, UDExWindowSize } from \"./types/common.js\";\n\nconst EXPANDED_STEP = \"data-ui5-wizard-expanded-tab\";\n\ntype AccessibilityInformation = {\n  ariaSetsize: number,\n  ariaPosinset: number,\n  ariaLabel: string,\n}\n\ntype StepInfo = {\n  icon?: string,\n  titleText?: string,\n  subtitleText?: string,\n  number: number,\n  selected: boolean,\n  disabled: boolean,\n  completed: boolean,\n  hideSeparator: boolean,\n  activeSeparator: boolean,\n  branchingSeparator: boolean,\n  pos: number,\n  accInfo: AccessibilityInformation,\n  refStepId: string,\n  styles: {\n    zIndex: number\n  },\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-wizard</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Wizard.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Wizard\n * @tagname udex-wizard\n * @public\n */\n@customElement({\n  tag: \"udex-wizard\",\n  renderer: jsxRenderer,\n  template: WizardTemplate,\n  styles: [UI5Wizard.styles, WizardCss],\n})\n\nclass UDExWizard extends UI5Wizard {\n  @slot({\n    \"default\": true,\n    type: HTMLElement,\n    individualSlots: true,\n    invalidateOnChildChange: true,\n  })\n    steps!: UDExWizardStep[];\n\n  /**\n   * Defines whether the component has unknown number of steps.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    indeterminate!: boolean;\n\n  /**\n   * Defines the current breakpoint.\n   *\n   * @default \"XL\"\n   * @private\n   */\n  @property()\n    _breakpoint: `${UDExWindowSize}` = UDExWindowSize.XL;\n\n  _handleResizeBound: ResizeObserverCallback;\n  constructor() {\n    super();\n    this._handleResizeBound = this._handleResize.bind(this);\n  }\n\n  _calcCurrentBreakpoint = () => {\n    const breakpointDimensions = Object.keys(RESPONSIVE_BREAKPOINTS).reverse();\n    const breakpoint = breakpointDimensions.find(size => Number(size) < this.offsetWidth);\n    this._breakpoint = breakpoint ? RESPONSIVE_BREAKPOINTS[breakpoint] : RESPONSIVE_BREAKPOINTS[\"360\"];\n  };\n\n  onEnterDOM() {\n    this.contentLayout = WizardContentLayout.SingleStep;\n    ResizeHandler.register(this, this._handleResizeBound);\n  }\n\n  onExitDOM(): void {\n    ResizeHandler.deregister(this, this._handleResizeBound);\n  }\n\n  onAfterRendering(): void {\n    this._calcCurrentBreakpoint();\n  }\n\n  _adjustHeaderOverflow = () => {\n    const tabs = this.stepsInHeaderDOM;\n    tabs.forEach(step => {\n      step.setAttribute(EXPANDED_STEP, \"true\");\n    });\n  };\n\n  switchSelectionFromOldToNewStep = (\n    selectedStep: UDExWizardStep,\n    stepToSelect: UDExWizardStep,\n    stepToSelectIndex: number,\n  ) => {\n    if (selectedStep && stepToSelect) {\n      if (!stepToSelect.disabled) {\n        selectedStep.selected = false;\n        selectedStep.completed = true;\n        stepToSelect.selected = true;\n      }\n\n      this.fireDecoratorEvent(\"step-change\", {\n        step: stepToSelect,\n        previousStep: selectedStep,\n        withScroll: false,\n      });\n      this.selectedStepIndex = stepToSelectIndex;\n    }\n  };\n\n  getLastEnabledStepIndex = () => {\n    let lastEnabledStepIndex = 0;\n    this.slottedSteps.forEach((step, idx) => {\n      if (step.selected || step.completed) {\n        lastEnabledStepIndex = idx;\n      }\n    });\n    return lastEnabledStepIndex;\n  };\n\n  get stepsInfo(): StepInfo[] {\n    const lastEnabledStepIndex = this.getLastEnabledStepIndex();\n    const stepsCount = this.stepsCount;\n    const selectedStepIndex = this.getSelectedStepIndex();\n    let initialZIndex = this.steps.length + 10;\n    let accInfo;\n\n    this._adjustHeaderOverflow();\n    return this.steps.map((step, idx) => {\n      const pos = idx + 1;\n      const hideSeparator = idx === stepsCount - 1 && !this.indeterminate;\n      const stepStateText = step.disabled\n        ? this.inactiveStepText\n        : this.activeStepText;\n      const ariaLabel = (\n        step.titleText\n          ? `${pos} ${step.titleText} ${stepStateText}`\n          : `${this.navStepDefaultHeading} ${pos} ${stepStateText}`\n      ).trim();\n      const isAfterCurrent = idx > selectedStepIndex;\n      accInfo = {\n        \"ariaSetsize\": stepsCount,\n        \"ariaPosinset\": pos,\n        \"ariaLabel\": this.getStepAriaLabelText(step, ariaLabel),\n      };\n\n      const stepInfo: StepInfo = {\n        icon: step.icon,\n        titleText: step.titleText,\n        subtitleText: step.subtitleText,\n        number: pos,\n        selected: step.selected,\n        disabled: !step.selected && !step.completed,\n        completed: step.completed,\n        hideSeparator,\n        activeSeparator: idx < lastEnabledStepIndex,\n        branchingSeparator: step.branching,\n        pos,\n        accInfo,\n        refStepId: step._id,\n        styles: {\n          zIndex: isAfterCurrent ? --initialZIndex : 1,\n        },\n      };\n      return stepInfo;\n    });\n  }\n\n  private _handleResize() {\n    this._calcCurrentBreakpoint();\n  }\n\n  get slottedSteps(): UDExWizardStep[] {\n    return this.getSlottedNodes(\"steps\");\n  }\n\n  get stepsInHeaderDOM(): UDExWizardTab[] {\n    return Array.from(this.shadowRoot!.querySelectorAll<UDExWizardTab>(\"[udex-wizard-tab]\"));\n  }\n\n  get _steps(): UDExWizardStep[] {\n    const stepsInfo = this.getStepsInfo();\n    return this.steps.map((step, idx) => {\n      step.stepContentAriaLabel = `${this.navStepDefaultHeading} ${stepsInfo[idx].number} ${stepsInfo[idx].titleText}`;\n      return step;\n    });\n  }\n}\n\nUDExWizard.define();\n\nexport default UDExWizard;\n"]}

package/dist/WizardStep.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import WizardStep from "@ui5/webcomponents-fiori/dist/WizardStep.js";
 // Styles
 import wizardStepCss from "@ui5/webcomponents-fiori/dist/generated/themes/Wizard.css.js";
@@ -35,7 +35,7 @@ __decorate([
 UDExWizardStep = __decorate([
     customElement({
         tag: "udex-wizard-step",
-        renderer: litRender,
+        renderer: jsxRenderer,
         styles: wizardStepCss,
     })
 ], UDExWizardStep);

package/dist/WizardStep.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardStep.js","sourceRoot":"","sources":["../src/WizardStep.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,UAAU,MAAM,6CAA6C,CAAC;AAErE,SAAS;AACT,OAAO,aAAa,MAAM,8DAA8D,CAAC;AAEzF;;;;;;;;;;;;;;;;GAgBG;AAMH,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;CAStC,CAAA;AADG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACN;AARlB,cAAc;IALnB,aAAa,CAAC;QACb,GAAG,EAAE,kBAAkB;QACvB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,aAAa;KACtB,CAAC;GACI,cAAc,CASnB;AAED,cAAc,CAAC,MAAM,EAAE,CAAC;AAExB,eAAe,cAAc,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport WizardStep from \"@ui5/webcomponents-fiori/dist/WizardStep.js\";\n\n// Styles\nimport wizardStepCss from \"@ui5/webcomponents-fiori/dist/generated/themes/Wizard.css.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-wizard-step</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/WizardStep.js\";</code>\n *\n * @constructor\n * @extends WizardStep\n * @public\n */\n@customElement({\n  tag: \"udex-wizard-step\",\n  renderer: litRender,\n  styles: wizardStepCss,\n})\nclass UDExWizardStep extends WizardStep {\n  /**\n   * Defines if the Wizard step is completed.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    completed!: boolean;\n}\n\nUDExWizardStep.define();\n\nexport default UDExWizardStep;\n"]}
+{"version":3,"file":"WizardStep.js","sourceRoot":"","sources":["../src/WizardStep.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,UAAU,MAAM,6CAA6C,CAAC;AAErE,SAAS;AACT,OAAO,aAAa,MAAM,8DAA8D,CAAC;AAEzF;;;;;;;;;;;;;;;;GAgBG;AAMH,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;CAStC,CAAA;AADG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACN;AARlB,cAAc;IALnB,aAAa,CAAC;QACb,GAAG,EAAE,kBAAkB;QACvB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,aAAa;KACtB,CAAC;GACI,cAAc,CASnB;AAED,cAAc,CAAC,MAAM,EAAE,CAAC;AAExB,eAAe,cAAc,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport WizardStep from \"@ui5/webcomponents-fiori/dist/WizardStep.js\";\n\n// Styles\nimport wizardStepCss from \"@ui5/webcomponents-fiori/dist/generated/themes/Wizard.css.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-wizard-step</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/WizardStep.js\";</code>\n *\n * @constructor\n * @extends WizardStep\n * @public\n */\n@customElement({\n  tag: \"udex-wizard-step\",\n  renderer: jsxRenderer,\n  styles: wizardStepCss,\n})\nclass UDExWizardStep extends WizardStep {\n  /**\n   * Defines if the Wizard step is completed.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    completed!: boolean;\n}\n\nUDExWizardStep.define();\n\nexport default UDExWizardStep;\n"]}

package/dist/WizardTab.d.ts

@@ -1,10 +1,5 @@
 import UI5WizardTab from "@ui5/webcomponents-fiori/dist/WizardTab.js";
-export declare enum WindowSize {
-    S = "S",
-    M = "M",
-    L = "L",
-    XL = "XL"
-}
+import { UDExWindowSize } from "./types/common.js";
 /**
  * @class
  *
@@ -31,6 +26,13 @@ declare class UDExWizardTab extends UI5WizardTab {
      * @default "L"
      * @public
      */
-    breakpoint: `${WindowSize}`;
+    breakpoint: `${UDExWindowSize}`;
+    /**
+     * Determines if the step is completed.
+     *
+     * @default false
+     * @public
+     */
+    completed: boolean;
 }
 export default UDExWizardTab;

package/dist/WizardTab.js

@@ -6,18 +6,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import UI5WizardTab from "@ui5/webcomponents-fiori/dist/WizardTab.js";
 // Styles
 import wizardTabCss from "@ui5/webcomponents-fiori/dist/generated/themes/WizardTab.css.js";
 import WizardTabCss from "./generated/themes/WizardTab.css.js";
-export var WindowSize;
-(function (WindowSize) {
-    WindowSize["S"] = "S";
-    WindowSize["M"] = "M";
-    WindowSize["L"] = "L";
-    WindowSize["XL"] = "XL";
-})(WindowSize || (WindowSize = {}));
+import { UDExWindowSize } from "./types/common.js";
 /**
  * @class
  *
@@ -38,14 +32,34 @@ export var WindowSize;
  * @public
  */
 let UDExWizardTab = class UDExWizardTab extends UI5WizardTab {
+    constructor() {
+        super(...arguments);
+        /**
+         * Determines if the title and subtitle should be displayed, based on window size.
+         *
+         * @default "L"
+         * @public
+         */
+        this.breakpoint = UDExWindowSize.L;
+        /**
+         * Determines if the step is completed.
+         *
+         * @default false
+         * @public
+         */
+        this.completed = false;
+    }
 };
 __decorate([
-    property({ type: WindowSize, defaultValue: WindowSize.L })
+    property()
 ], UDExWizardTab.prototype, "breakpoint", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExWizardTab.prototype, "completed", void 0);
 UDExWizardTab = __decorate([
     customElement({
         tag: "udex-wizard-tab",
-        renderer: litRender,
+        renderer: jsxRenderer,
         styles: [wizardTabCss, WizardTabCss],
     })
 ], UDExWizardTab);

package/dist/WizardTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardTab.js","sourceRoot":"","sources":["../src/WizardTab.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,YAAY,MAAM,4CAA4C,CAAC;AAEtE,SAAS;AACT,OAAO,YAAY,MAAM,iEAAiE,CAAC;AAC3F,OAAO,YAAY,MAAM,qCAAqC,CAAC;AAE/D,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,qBAAO,CAAA;IACP,qBAAO,CAAA;IACP,qBAAO,CAAA;IACP,uBAAS,CAAA;AACX,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AAMH,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,YAAY;CASvC,CAAA;AADG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC;iDAC5B;AAR3B,aAAa;IALlB,aAAa,CAAC;QACb,GAAG,EAAE,iBAAiB;QACtB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC;KACrC,CAAC;GACI,aAAa,CASlB;AAED,aAAa,CAAC,MAAM,EAAE,CAAC;AAEvB,eAAe,aAAa,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport UI5WizardTab from \"@ui5/webcomponents-fiori/dist/WizardTab.js\";\n\n// Styles\nimport wizardTabCss from \"@ui5/webcomponents-fiori/dist/generated/themes/WizardTab.css.js\";\nimport WizardTabCss from \"./generated/themes/WizardTab.css.js\";\n\nexport enum WindowSize {\n  S = \"S\",\n  M = \"M\",\n  L = \"L\",\n  XL = \"XL\"\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-wizard</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Wizard.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5WizardTab\n * @tagname udex-wizard-tab\n * @public\n */\n@customElement({\n  tag: \"udex-wizard-tab\",\n  renderer: litRender,\n  styles: [wizardTabCss, WizardTabCss],\n})\nclass UDExWizardTab extends UI5WizardTab {\n  /**\n   * Determines if the title and subtitle should be displayed, based on window size.\n   *\n   * @default \"L\"\n   * @public\n   */\n  @property({ type: WindowSize, defaultValue: WindowSize.L })\n    breakpoint!: `${WindowSize}`;\n}\n\nUDExWizardTab.define();\n\nexport default UDExWizardTab;\n"]}
+{"version":3,"file":"WizardTab.js","sourceRoot":"","sources":["../src/WizardTab.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,YAAY,MAAM,4CAA4C,CAAC;AAEtE,SAAS;AACT,OAAO,YAAY,MAAM,iEAAiE,CAAC;AAC3F,OAAO,YAAY,MAAM,qCAAqC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD;;;;;;;;;;;;;;;;;;GAkBG;AAMH,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,YAAY;IAAxC;;QACE;;;;;WAKG;QAED,eAAU,GAAwB,cAAc,CAAC,CAAC,CAAC;QACrD;;;;;WAKG;QAED,cAAS,GAAY,KAAK,CAAC;IAC/B,CAAC;CAAA,CAAA;AATG;IADD,QAAQ,EAAE;iDAC0C;AAQnD;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDACC;AAhBzB,aAAa;IALlB,aAAa,CAAC;QACb,GAAG,EAAE,iBAAiB;QACtB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC;KACrC,CAAC;GACI,aAAa,CAiBlB;AAED,aAAa,CAAC,MAAM,EAAE,CAAC;AAEvB,eAAe,aAAa,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport UI5WizardTab from \"@ui5/webcomponents-fiori/dist/WizardTab.js\";\n\n// Styles\nimport wizardTabCss from \"@ui5/webcomponents-fiori/dist/generated/themes/WizardTab.css.js\";\nimport WizardTabCss from \"./generated/themes/WizardTab.css.js\";\nimport { UDExWindowSize } from \"./types/common.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-wizard</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Wizard.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5WizardTab\n * @tagname udex-wizard-tab\n * @public\n */\n@customElement({\n  tag: \"udex-wizard-tab\",\n  renderer: jsxRenderer,\n  styles: [wizardTabCss, WizardTabCss],\n})\nclass UDExWizardTab extends UI5WizardTab {\n  /**\n   * Determines if the title and subtitle should be displayed, based on window size.\n   *\n   * @default \"L\"\n   * @public\n   */\n  @property()\n    breakpoint: `${UDExWindowSize}` = UDExWindowSize.L;\n  /**\n   * Determines if the step is completed.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    completed: boolean = false;\n}\n\nUDExWizardTab.define();\n\nexport default UDExWizardTab;\n"]}

package/dist/WizardTemplate.d.ts

@@ -0,0 +1,2 @@
+import type UDExWizard from "./Wizard.js";
+export default function WizardTemplate(this: UDExWizard): import("@ui5/webcomponents-base").JSX.Element;

package/dist/WizardTemplate.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import UDExWizardTab from "./WizardTab.js";
+export default function WizardTemplate() {
+    return (_jsxs("div", { class: this.classes.root, "aria-label": this.ariaLabelText, role: "region", part: "ui5-wiz-root", children: [_jsx("nav", { class: "ui5-wiz-nav", part: "navigator", "aria-label": this.navAriaLabelText, tabindex: -1, children: _jsx("div", { class: "ui5-wiz-nav-list", role: "list", "aria-label": this.listAriaLabelText, "aria-describedby": "wiz-nav-descr", children: this.stepsInfo.map(headerStep => _jsx(UDExWizardTab, { completed: headerStep.completed, titleText: headerStep.titleText, subtitleText: headerStep.subtitleText, icon: headerStep.icon, number: String(headerStep.number), disabled: headerStep.disabled, selected: headerStep.selected, hideSeparator: headerStep.hideSeparator, activeSeparator: headerStep.activeSeparator, branchingSeparator: headerStep.branchingSeparator, _wizardTabAccInfo: headerStep.accInfo, breakpoint: this._breakpoint, "data-ui5-content-ref-id": headerStep.refStepId, "data-ui5-index": headerStep.pos, onSelectionChangeRequested: this.onSelectionChangeRequested, onFocused: this.onStepInHeaderFocused, onClick: this._onGroupedTabClick, style: headerStep.styles })) }) }), _jsx("span", { id: "wiz-nav-descr", class: "ui5-hidden-text", children: this.navAriaDescribedbyText }), _jsx("div", { id: `${this._id}-wiz-content`, class: "ui5-wiz-content", onScroll: this.onScroll, children: this._steps.map(step => _jsx("div", { class: {
+                        "ui5-wiz-content-item": true,
+                        "ui5-wiz-content-item-stretch": step.stretch,
+                        "ui5-wiz-content-item-selected": step.selected,
+                    }, hidden: step.disabled, part: "step-content", "aria-label": step.stepContentAriaLabel, role: "region", "data-ui5-content-item-ref-id": step._id, children: _jsx("div", { class: "ui5-wiz-content-item-wrapper", children: _jsx("slot", { name: step._individualSlot }) }) })) })] }));
+}
+//# sourceMappingURL=WizardTemplate.js.map

package/dist/WizardTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WizardTemplate.js","sourceRoot":"","sources":["../src/WizardTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,aAAa,MAAM,gBAAgB,CAAC;AAE3C,MAAM,CAAC,OAAO,UAAU,cAAc;IACpC,OAAO,CACL,eACE,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,gBACZ,IAAI,CAAC,aAAa,EAC9B,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,cAAc,aACnB,cAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,WAAW,gBAAa,IAAI,CAAC,gBAAgB,EAAE,QAAQ,EAAE,CAAC,CAAC,YACvF,cAAK,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,MAAM,gBAAa,IAAI,CAAC,iBAAiB,sBAAmB,eAAe,YAC3G,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAC/B,KAAC,aAAa,IACZ,SAAS,EAAE,UAAU,CAAC,SAAS,EAC/B,SAAS,EAAE,UAAU,CAAC,SAAS,EAC/B,YAAY,EAAE,UAAU,CAAC,YAAY,EACrC,IAAI,EAAE,UAAU,CAAC,IAAI,EACrB,MAAM,EAAE,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,EACjC,QAAQ,EAAE,UAAU,CAAC,QAAQ,EAC7B,QAAQ,EAAE,UAAU,CAAC,QAAQ,EAC7B,aAAa,EAAE,UAAU,CAAC,aAAa,EACvC,eAAe,EAAE,UAAU,CAAC,eAAe,EAC3C,kBAAkB,EAAE,UAAU,CAAC,kBAAkB,EACjD,iBAAiB,EAAE,UAAU,CAAC,OAAO,EACrC,UAAU,EAAE,IAAI,CAAC,WAAW,6BACH,UAAU,CAAC,SAAS,oBAC7B,UAAU,CAAC,GAAG,EAC9B,0BAA0B,EAAE,IAAI,CAAC,0BAA0B,EAC3D,SAAS,EAAE,IAAI,CAAC,qBAAqB,EACrC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,KAAK,EAAE,UAAU,CAAC,MAAM,GACV,CACjB,GACG,GACF,EAEN,eAAM,EAAE,EAAC,eAAe,EAAC,KAAK,EAAC,iBAAiB,YAAE,IAAI,CAAC,sBAAsB,GAAQ,EAErF,cAAK,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,cAAc,EAAE,KAAK,EAAC,iBAAiB,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,YAChF,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACtB,cACE,KAAK,EAAE;wBACL,sBAAsB,EAAE,IAAI;wBAC5B,8BAA8B,EAAE,IAAI,CAAC,OAAO;wBAC5C,+BAA+B,EAAE,IAAI,CAAC,QAAQ;qBAC/C,EACD,MAAM,EAAE,IAAI,CAAC,QAAQ,EACrB,IAAI,EAAC,cAAc,gBACP,IAAI,CAAC,oBAAoB,EACrC,IAAI,EAAC,QAAQ,kCACiB,IAAI,CAAC,GAAG,YACtC,cAAK,KAAK,EAAC,8BAA8B,YACvC,eAAM,IAAI,EAAE,IAAI,CAAC,eAAe,GAAS,GACrC,GACF,CACP,GACG,IACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type UDExWizard from \"./Wizard.js\";\nimport UDExWizardTab from \"./WizardTab.js\";\n\nexport default function WizardTemplate(this: UDExWizard) {\n  return (\n    <div\n      class={this.classes.root}\n      aria-label={this.ariaLabelText}\n      role=\"region\"\n      part=\"ui5-wiz-root\">\n      <nav class=\"ui5-wiz-nav\" part=\"navigator\" aria-label={this.navAriaLabelText} tabindex={-1}>\n        <div class=\"ui5-wiz-nav-list\" role=\"list\" aria-label={this.listAriaLabelText} aria-describedby=\"wiz-nav-descr\">\n          {this.stepsInfo.map(headerStep =>\n            <UDExWizardTab\n              completed={headerStep.completed}\n              titleText={headerStep.titleText}\n              subtitleText={headerStep.subtitleText}\n              icon={headerStep.icon}\n              number={String(headerStep.number)}\n              disabled={headerStep.disabled}\n              selected={headerStep.selected}\n              hideSeparator={headerStep.hideSeparator}\n              activeSeparator={headerStep.activeSeparator}\n              branchingSeparator={headerStep.branchingSeparator}\n              _wizardTabAccInfo={headerStep.accInfo}\n              breakpoint={this._breakpoint}\n              data-ui5-content-ref-id={headerStep.refStepId}\n              data-ui5-index={headerStep.pos}\n              onSelectionChangeRequested={this.onSelectionChangeRequested}\n              onFocused={this.onStepInHeaderFocused}\n              onClick={this._onGroupedTabClick}\n              style={headerStep.styles}>\n            </UDExWizardTab>\n          )}\n        </div>\n      </nav>\n\n      <span id=\"wiz-nav-descr\" class=\"ui5-hidden-text\">{this.navAriaDescribedbyText}</span>\n\n      <div id={`${this._id}-wiz-content`} class=\"ui5-wiz-content\" onScroll={this.onScroll}>\n        {this._steps.map(step =>\n          <div\n            class={{\n              \"ui5-wiz-content-item\": true,\n              \"ui5-wiz-content-item-stretch\": step.stretch,\n              \"ui5-wiz-content-item-selected\": step.selected,\n            }}\n            hidden={step.disabled}\n            part=\"step-content\"\n            aria-label={step.stepContentAriaLabel}\n            role=\"region\"\n            data-ui5-content-item-ref-id={step._id}>\n            <div class=\"ui5-wiz-content-item-wrapper\">\n              <slot name={step._individualSlot}></slot>\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/assets/InputSuggestions-pMcXiozG.js

@@ -0,0 +1,2 @@
+import{f as V,j as r,a as c,p as S,d as w,b as P,s as g,m as x,L as v,c as y,e as R,g as O,D as L,h as D,i as F,F as A,B as I,I as b,k as f,R as G,l as H,n as E,o as $,q as N,r as B}from"./bundle.esm-4ejJpC9l.js";const M=n=>n.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");function _(n,e,t,s){return n.replaceAll(new RegExp(M(e),`${s?"i":""}g`),t)}function z(n,e){if(!n||!e)return n;const t=l=>{const[a,d]=l.split("");for(;n.indexOf(l)>=0||e.indexOf(l)>=0;)l=`${a}${l}${d}`;return l},s=t("12"),i=t("34");let o=V(_(n,e,l=>`${s}${l}${i}`,!0));return[[s,"<b>"],[i,"</b>"]].forEach(([l,a])=>{o=_(o,l,a,!1)}),o}function q(n,e){const t=(n==null?void 0:n.listItemContent)||U;return r("li",{part:"native-li","data-sap-focus-ref":!0,tabindex:this._effectiveTabIndex,class:this.classes.main,draggable:this.movable,role:e==null?void 0:e.role,title:e==null?void 0:e.title,onFocusIn:this._onfocusin,onKeyUp:this._onkeyup,onKeyDown:this._onkeydown,onClick:this._onclick,children:t.call(this)})}function U(){return r("div",{part:"content",id:`${this._id}-content`,class:"ui5-li-content",children:r("div",{class:"ui5-li-text-wrapper",children:r("span",{part:"title",class:"ui5-li-title",children:r("slot",{})})})})}function K(){return[q.call(this,{listItemContent:W},{role:"option"})]}function W(){return r("div",{part:"content",id:"content",class:"ui5-li-content",children:c("div",{class:"ui5-li-text-wrapper",children:[r("span",{part:"title",className:"ui5-li-title",dangerouslySetInnerHTML:{__html:this.markupText}}),this.additionalText&&r("span",{part:"additional-text",class:"ui5-li-additional-text",children:this.additionalText})]})})}S("@ui5/webcomponents-theming","sap_horizon",async()=>w);S("@ui5/webcomponents","sap_horizon",async()=>P);const X=`:host([ui5-suggestion-item]){height:auto;min-height:var(--_ui5-v2-10-0_list_item_base_height)}:host([ui5-suggestion-item]) .ui5-li-root{min-height:var(--_ui5-v2-10-0_list_item_base_height)}:host([ui5-suggestion-item]) .ui5-li-content{padding-bottom:.875rem;padding-top:.875rem;box-sizing:border-box}
+`;var p=function(n,e,t,s){var i=arguments.length,o=i<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,t):s,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(n,e,t,s);else for(var a=n.length-1;a>=0;a--)(l=n[a])&&(o=(i<3?l(o):i>3?l(e,t,o):l(e,t))||o);return i>3&&o&&Object.defineProperty(e,t,o),o};let h=class extends v{constructor(){super(...arguments),this.markupText=""}onEnterDOM(){y()&&this.setAttribute("desktop","")}get _effectiveTabIndex(){return-1}};p([g()],h.prototype,"text",void 0);p([g()],h.prototype,"additionalText",void 0);p([g()],h.prototype,"markupText",void 0);h=p([x({tag:"ui5-suggestion-item",template:K,styles:[v.styles,X]})],h);h.define();function j(n){const e=(n==null?void 0:n.items)||J;return c("ul",{role:"group",class:"ui5-group-li-root",onDragEnter:this._ondragenter,onDragOver:this._ondragover,onDrop:this._ondrop,onDragLeave:this._ondragleave,children:[this.hasHeader&&r(O,{focused:this.focused,part:"header",accessibleRole:R.Group,children:this.hasFormattedHeader?r("slot",{name:"header"}):this.headerText}),e.call(this),r(L,{orientation:"Horizontal",ownerReference:this})]})}function J(){return r("slot",{})}var T=function(n,e,t,s){var i=arguments.length,o=i<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,t):s,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(n,e,t,s);else for(var a=n.length-1;a>=0;a--)(l=n[a])&&(o=(i<3?l(o):i>3?l(e,t,o):l(e,t))||o);return i>3&&o&&Object.defineProperty(e,t,o),o};let m=class extends F{};T([D({default:!0,invalidateOnChildChange:!0,type:HTMLElement})],m.prototype,"items",void 0);m=T([x({tag:"ui5-suggestion-item-group",template:j})],m);m.define();function Q(n){const e=(n==null?void 0:n.suggestionsList)||Y,t=n==null?void 0:n.valueStateMessage,s=n==null?void 0:n.valueStateMessageInputIcon;return c(G,{class:this.classes.popover,hideArrow:!0,preventFocusRestore:!0,preventInitialFocus:!0,placement:"Bottom",horizontalAlign:"Start",tabindex:-1,style:this.styles.suggestionsPopover,onOpen:this._afterOpenPicker,onClose:this._afterClosePicker,onScroll:this._scroll,open:this.open,opener:this,accessibleName:this._popupLabel,children:[this._isPhone&&c(A,{children:[c("div",{slot:"header",class:"ui5-responsive-popover-header",children:[c("div",{class:"row",children:[r("span",{children:this._headerTitleText}),r(I,{class:"ui5-responsive-popover-close-btn",icon:$,design:"Transparent",onClick:this._closePicker})]}),r("div",{class:"row",children:r("div",{class:"input-root-phone native-input-wrapper",children:r(b,{class:"ui5-input-inner-phone",type:this.inputType,value:this.value,showClearIcon:this.showClearIcon,placeholder:this.placeholder,onInput:this._handleInput,onChange:this._handleChange})})})]}),this.hasValueStateMessage&&c("div",{class:this.classes.popoverValueState,style:this.styles.suggestionPopoverHeader,children:[r(f,{class:"ui5-input-value-state-message-icon",name:s==null?void 0:s.call(this)}),this.open&&(t==null?void 0:t.call(this))]})]}),!this._isPhone&&this.hasValueStateMessage&&c("div",{slot:"header",class:{"ui5-responsive-popover-header":!0,"ui5-responsive-popover-header--focused":this._isValueStateFocused,...this.classes.popoverValueState},style:this.styles.suggestionPopoverHeader,children:[r(f,{class:"ui5-input-value-state-message-icon",name:s==null?void 0:s.call(this)}),this.open&&(t==null?void 0:t.call(this))]}),e.call(this),this._isPhone&&r("div",{slot:"footer",class:"ui5-responsive-popover-footer",children:r(I,{design:"Transparent",onClick:this._closePicker,children:"OK"})})]})}function Y(){return r(E,{accessibleRole:H.ListBox,separators:this.suggestionSeparators,selectionMode:"Single",onMouseDown:this.onItemMouseDown,onItemClick:this._handleSuggestionItemPress,onSelectionChange:this._handleSelectionChange,children:r("slot",{})})}class u{get template(){return Q}constructor(e,t,s,i){this.component=e,this.slotName=t,this.handleFocus=i,this.highlight=s,this.selectedItemIndex=-1}onUp(e,t){e.preventDefault();const s=!this.isOpened&&this._hasValueState&&t===-1?0:t;return this._handleItemNavigation(!1,s),!0}onDown(e,t){e.preventDefault();const s=!this.isOpened&&this._hasValueState&&t===-1?0:t;return this._handleItemNavigation(!0,s),!0}onSpace(e){return this._isItemOnTarget()?(e.preventDefault(),this.onItemSelected(this._selectedItem,!0),!0):!1}onEnter(e){return this._isGroupItem?(e.preventDefault(),!1):this._isItemOnTarget()?(this.onItemSelected(this._selectedItem,!0),!0):!1}onPageUp(e){e.preventDefault();const t=this.selectedItemIndex-10>-1;return this._hasValueState&&!t?(this._focusValueState(),!0):(this._moveItemSelection(this.selectedItemIndex,t?this.selectedItemIndex-=10:this.selectedItemIndex=0),!0)}onPageDown(e){e.preventDefault();const t=this._getItems(),s=t.length-1,i=this.selectedItemIndex+10<=s;return this._hasValueState&&!t?(this._focusValueState(),!0):(this._moveItemSelection(this.selectedItemIndex,i?this.selectedItemIndex+=10:this.selectedItemIndex=s),!0)}onHome(e){return e.preventDefault(),this._hasValueState?(this._focusValueState(),!0):(this._moveItemSelection(this.selectedItemIndex,this.selectedItemIndex=0),!0)}onEnd(e){e.preventDefault();const t=this._getItems().length-1;return this._hasValueState&&!t?(this._focusValueState(),!0):(this._moveItemSelection(this.selectedItemIndex,this.selectedItemIndex=t),!0)}onTab(){return this._isItemOnTarget()?(this.onItemSelected(this._selectedItem,!0),!0):!1}toggle(e,t){(e!==void 0?e:!this.isOpened())?this._getComponent().open=!0:this.close(t.preventFocusRestore)}get _selectedItem(){return this._getNonGroupItems().find(e=>e.selected)}_isScrollable(){const e=this._getScrollContainer();return e.offsetHeight<e.scrollHeight}close(e=!1){const t=this._getItems()&&this._getItems()[this.selectedItemIndex];this._getComponent().open=!1;const s=this._getPicker();s.preventFocusRestore=e,s.open=!1,t&&t.focused&&(t.focused=!1)}updateSelectedItemPosition(e){this.selectedItemIndex=e}onItemSelected(e,t){const s=e,i=this._getNonGroupItems();s&&(this.accInfo={isGroup:s.hasAttribute("ui5-suggestion-item-group"),currentPos:i.indexOf(s)+1,listSize:i.length,itemText:s.text||"",additionalText:s.additionalText},this._getComponent().onItemSelected(s,t),this._getComponent().open=!1)}onItemSelect(e){this._getComponent().onItemSelect(e)}onItemPress(e){let t;const s=e.type==="ui5-item-click";s&&!e.detail.item.selected||this._handledPress&&!s||(s&&e.detail.item.selected?(t=e.detail.item,this._handledPress=!0):t=e.detail.selectedItems[0],this.onItemSelected(t,!1))}_onClose(){this._handledPress=!1}_isItemOnTarget(){return this.isOpened()&&this.selectedItemIndex!==null&&this.selectedItemIndex!==-1&&!this._isGroupItem}get _isGroupItem(){const e=this._getItems();return!e||!e[this.selectedItemIndex]?!1:e[this.selectedItemIndex].hasAttribute("ui5-suggestion-item-group")}isOpened(){var e;return!!((e=this._getPicker())!=null&&e.open)}_handleItemNavigation(e,t){this.selectedItemIndex=t,this._getItems().length&&(e?this._selectNextItem():this._selectPreviousItem())}_selectNextItem(){const e=this._getItems().length,t=this.selectedItemIndex;if(this._hasValueState&&t===-1&&!this.component._isValueStateFocused){this._focusValueState();return}(t===-1&&!this._hasValueState||this.component._isValueStateFocused)&&(this._clearValueStateFocus(),this.selectedItemIndex=-1),!(t!==-1&&t+1>e-1)&&this._moveItemSelection(t,++this.selectedItemIndex)}_selectPreviousItem(){const e=this._getItems(),t=this.selectedItemIndex;if(this._hasValueState&&t===0&&!this.component._isValueStateFocused){this.component.hasSuggestionItemSelected=!1,this.component._isValueStateFocused=!0,this.selectedItemIndex=0,e[0].focused=!1,e[0].hasAttribute("ui5-suggestion-item")&&(e[0].selected=!1);return}if(this.component._isValueStateFocused){this.component.focused=!0,this.component._isValueStateFocused=!1,this.selectedItemIndex=0;return}if(!(t===-1||t===null)){if(t-1<0){(e[t].hasAttribute("ui5-suggestion-item")||e[t].hasAttribute("ui5-suggestion-item-custom"))&&(e[t].selected=!1),e[t].focused=!1,this.component.focused=!0,this.component.hasSuggestionItemSelected=!1,this.selectedItemIndex-=1;return}this._moveItemSelection(t,--this.selectedItemIndex)}}_moveItemSelection(e,t){const s=this._getItems(),i=s[t],o=s[e],l=this._getNonGroupItems(),a=i.hasAttribute("ui5-suggestion-item-group");if(!i)return;this.component.focused=!1,this._clearValueStateFocus();const d=this._getItems()[this.selectedItemIndex];if(this.accInfo={isGroup:a,currentPos:s.indexOf(i)+1,itemText:(a?d.headerText:d.text)||""},(i.hasAttribute("ui5-suggestion-item")||i.hasAttribute("ui5-suggestion-item-custom"))&&(this.accInfo.additionalText=i.additionalText||"",this.accInfo.currentPos=l.indexOf(i)+1,this.accInfo.listSize=l.length),o&&(o.focused=!1),(o!=null&&o.hasAttribute("ui5-suggestion-item")||o!=null&&o.hasAttribute("ui5-suggestion-item-custom"))&&(o.selected=!1),i&&(i.focused=!0,a||(i.selected=!0),this.handleFocus&&i.focus()),this.component.hasSuggestionItemSelected=!0,this.onItemSelect(i),!this._isItemIntoView(i)){const C=this._isGroupItem?i.shadowRoot.querySelector("[ui5-li-group-header]"):i;this._scrollItemIntoView(C)}}_deselectItems(){this._getItems().forEach(t=>{t.hasAttribute("ui5-suggestion-item")&&(t.selected=!1),t.focused=!1})}_clearItemFocus(){const e=this._getItems().find(t=>t.focused);e&&(e.focused=!1)}_isItemIntoView(e){const t=e.getDomRef().getBoundingClientRect(),s=this._getComponent().getDomRef().getBoundingClientRect(),i=window.innerHeight||document.documentElement.clientHeight;let o=0;return this._hasValueState&&(o=this._getPicker().querySelector("[slot=header]").getBoundingClientRect().height),t.top+u.SCROLL_STEP<=i&&t.top>=s.top+o}_scrollItemIntoView(e){e.scrollIntoView({behavior:"auto",block:"nearest",inline:"nearest"})}_getScrollContainer(){return this._scrollContainer||(this._scrollContainer=this._getPicker().shadowRoot.querySelector(".ui5-popup-content")),this._scrollContainer}_getItems(){return this._getComponent().getSlottedNodes("suggestionItems").flatMap(t=>t.hasAttribute("ui5-suggestion-item-group")?[t,...t.items]:[t])}_getNonGroupItems(){return this._getItems().filter(e=>!e.hasAttribute("ui5-suggestion-item-group"))}_getComponent(){return this.component}_getList(){return this._getPicker().querySelector("[ui5-list]")}_getListWidth(){var e;return(e=this._getList())==null?void 0:e.offsetWidth}_getPicker(){return this._getComponent().shadowRoot.querySelector("[ui5-responsive-popover]")}get itemSelectionAnnounce(){if(!this.accInfo)return"";if(this.accInfo.isGroup)return`${u.i18nBundle.getText(N)} ${this.accInfo.itemText}`;const e=u.i18nBundle.getText(B,this.accInfo.currentPos||0,this.accInfo.listSize||0);return`${this.accInfo.additionalText} ${e}`}hightlightInput(e,t){return z(e,t)}get _hasValueState(){return this.component.hasValueStateMessage}_focusValueState(){this.component._isValueStateFocused=!0,this.component.focused=!1,this.component.hasSuggestionItemSelected=!1,this.selectedItemIndex=0,this.component.value=this.component.typedInValue,this._deselectItems()}_clearValueStateFocus(){this.component._isValueStateFocused=!1}_clearSelectedSuggestionAndaccInfo(){this.accInfo=void 0,this.selectedItemIndex=0}}u.SCROLL_STEP=60;b.SuggestionsClass=u;export{u as default};

package/dist/assets/ListItemStandardExpandableTextTemplate-BoB9C9hl.js

@@ -0,0 +1,3 @@
+import{j as o,a as _,F as y,p as m,d as b,b as E,s as x,h as C,t as P,m as O,u as w,v as B,w as I,x as A,E as R,y as L,z as S,R as M,B as N,A as F,C as z,G as D,H as X,J as j,K as $}from"./bundle.esm-4ejJpC9l.js";var v;(function(t){t.InPlace="InPlace",t.Popover="Popover"})(v||(v={}));const k=v;var T;(function(t){t.Off="Off",t.On="On"})(T||(T={}));const H=T;function W(){return o(y,{children:o("span",{children:this._renderEmptyIndicator?_(y,{children:[o("span",{className:"empty-indicator","aria-hidden":"true",children:this._emptyIndicatorSymbol}),o("span",{className:"empty-indicator-aria-label",children:this._emptyIndicatorAriaLabel})]}):o("slot",{})})})}m("@ui5/webcomponents-theming","sap_horizon",async()=>b);m("@ui5/webcomponents","sap_horizon",async()=>E);const Y=`:host{max-width:100%;font-size:var(--sapFontSize);font-family:var(--sapFontFamily);color:var(--sapTextColor);line-height:normal;cursor:text;overflow:hidden}:host([max-lines="1"]){display:inline-block;text-overflow:ellipsis;white-space:nowrap}:host(:not([max-lines="1"])){display:-webkit-box;-webkit-line-clamp:var(--_ui5-v2-10-0_text_max_lines);line-clamp:var(--_ui5-v2-10-0_text_max_lines);-webkit-box-orient:vertical;white-space:normal;word-wrap:break-word}.empty-indicator-aria-label{position:absolute!important;clip:rect(1px,1px,1px,1px);user-select:none;left:0;top:0;font-size:0}
+`;var h=function(t,e,n,s){var a=arguments.length,i=a<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,n):s,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(t,e,n,s);else for(var d=t.length-1;d>=0;d--)(l=t[d])&&(i=(a<3?l(i):a>3?l(e,n,i):l(e,n))||i);return a>3&&i&&Object.defineProperty(e,n,i),i},f;let p=f=class extends B{constructor(){super(...arguments),this.maxLines=1/0,this.emptyIndicatorMode="Off"}onBeforeRendering(){this.style.setProperty(I("--_ui5_text_max_lines"),`${this.maxLines}`)}get hasText(){return A(this.text)}get _renderEmptyIndicator(){return!this.hasText&&this.emptyIndicatorMode===H.On}get _emptyIndicatorAriaLabel(){return f.i18nBundle.getText(R)}get _emptyIndicatorSymbol(){return f.i18nBundle.getText(L)}};h([x({type:Number})],p.prototype,"maxLines",void 0);h([x()],p.prototype,"emptyIndicatorMode",void 0);h([C({type:Node,default:!0})],p.prototype,"text",void 0);h([P("@ui5/webcomponents")],p,"i18nBundle",void 0);p=f=h([O({tag:"ui5-text",renderer:w,template:W,styles:Y})],p);p.define();const g=p;function q(){return _("div",{children:[o(g,{class:"ui5-exp-text-text",emptyIndicatorMode:this.emptyIndicatorMode,children:this._displayedText}),this._maxCharactersExceeded&&_(y,{children:[o("span",{class:"ui5-exp-text-ellipsis",children:this._ellipsisText}),o(S,{id:"toggle",class:"ui5-exp-text-toggle",accessibleRole:"Button",accessibleName:this._accessibleNameForToggle,accessibilityAttributes:this._accessibilityAttributesForToggle,onClick:this._handleToggleClick,children:this._textForToggle}),this._usePopover&&_(M,{open:this._expanded,opener:"toggle",accessibleNameRef:"popover-text",contentOnlyOnDesktop:!0,_hideHeader:!0,class:"ui5-exp-text-popover",onClose:this._handlePopoverClose,children:[o(g,{id:"popover-text",children:this.text}),o("div",{slot:"footer",class:"ui5-exp-text-footer",children:o(N,{design:"Transparent",onClick:this._handleCloseButtonClick,children:this._closeButtonText})})]})]})]})}m("@ui5/webcomponents-theming","sap_horizon",async()=>b);m("@ui5/webcomponents","sap_horizon",async()=>E);const V=`:host{display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapTextColor)}:host([hidden]){display:none}.ui5-exp-text-text{display:inline}.ui5-exp-text-text,.ui5-exp-text-toggle{font-family:inherit;font-size:inherit}.ui5-exp-text-text,.ui5-exp-text-ellipsis{color:inherit}.ui5-exp-text-popover::part(content){padding-inline:1rem}.ui5-exp-text-footer{width:100%;display:flex;align-items:center;justify-content:flex-end}
+`;var u=function(t,e,n,s){var a=arguments.length,i=a<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,n):s,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(t,e,n,s);else for(var d=t.length-1;d>=0;d--)(l=t[d])&&(i=(a<3?l(i):a>3?l(e,n,i):l(e,n))||i);return a>3&&i&&Object.defineProperty(e,n,i),i},c;let r=c=class extends B{constructor(){super(...arguments),this.maxCharacters=100,this.overflowMode="InPlace",this.emptyIndicatorMode="Off",this._expanded=!1}getFocusDomRef(){var e,n;return this._usePopover?(e=this.shadowRoot)==null?void 0:e.querySelector("[ui5-responsive-popover]"):(n=this.shadowRoot)==null?void 0:n.querySelector("[ui5-link]")}get _displayedText(){var e;return this._expanded&&!this._usePopover?this.text:(e=this.text)==null?void 0:e.substring(0,this.maxCharacters)}get _maxCharactersExceeded(){var e;return(((e=this.text)==null?void 0:e.length)||0)>this.maxCharacters}get _usePopover(){return this.overflowMode===k.Popover}get _ellipsisText(){return this._expanded&&!this._usePopover?" ":"... "}get _textForToggle(){return this._expanded?c.i18nBundle.getText(F):c.i18nBundle.getText(z)}get _closeButtonText(){return c.i18nBundle.getText(D)}get _accessibilityAttributesForToggle(){return this._usePopover?{expanded:this._expanded,hasPopup:"dialog"}:{expanded:this._expanded}}get _accessibleNameForToggle(){if(this._usePopover)return this._expanded?c.i18nBundle.getText(X):c.i18nBundle.getText(j)}_handlePopoverClose(){$()||(this._expanded=!1)}_handleToggleClick(){this._expanded=!this._expanded}_handleCloseButtonClick(e){this._expanded=!1,e.stopPropagation()}};u([x()],r.prototype,"text",void 0);u([x({type:Number})],r.prototype,"maxCharacters",void 0);u([x()],r.prototype,"overflowMode",void 0);u([x()],r.prototype,"emptyIndicatorMode",void 0);u([x({type:Boolean})],r.prototype,"_expanded",void 0);u([P("@ui5/webcomponents")],r,"i18nBundle",void 0);r=c=u([O({tag:"ui5-expandable-text",renderer:w,styles:V,template:q})],r);r.define();function Q(t){const{className:e,text:n,maxCharacters:s,part:a}=t;return o(r,{part:a,class:e,text:n,maxCharacters:s})}export{Q as default};