@sapudex/web-components 0.111.0

package/dist/DatePicker.js

@@ -0,0 +1,222 @@
+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 UDExDatePicker_1;
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+// eslint-disable-next-line
+import Calendar from "@ui5/webcomponents/dist/Calendar.js";
+import CalendarDate from "@ui5/webcomponents/dist/CalendarDate.js";
+import "@ui5/webcomponents/dist/Icon.js";
+import "@ui5/webcomponents-icons/dist/appointment-2.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { CALENDAR_ICON } from "./generated/i18n/i18n-defaults.js";
+// Template
+import DatePickerTemplate from "./generated/templates/DatePickerTemplate.lit.js";
+import DatePickerPopover from "./generated/templates/DatePickerPopoverTemplate.lit.js";
+// Styles
+import DatePickerCss from "./generated/themes/DatePicker.css";
+import UDExTextField from "./TextField.js";
+import UDExDropdown from "./Dropdown.js";
+import DatePickerPopoverCss from "./generated/themes/DatePickerPopover.css.js";
+import UDExStatusMessage from "./StatusMessage.js";
+import ValueState from "./types/common.js";
+export var UDExDatePickerSelectionMode;
+(function (UDExDatePickerSelectionMode) {
+    UDExDatePickerSelectionMode["Single"] = "Single";
+    UDExDatePickerSelectionMode["Range"] = "Range";
+})(UDExDatePickerSelectionMode || (UDExDatePickerSelectionMode = {}));
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-date-picker</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/DatePicker.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @extends UI5Element
+ * @tagname udex-date-picker
+ * @public
+ */
+let UDExDatePicker = UDExDatePicker_1 = class UDExDatePicker extends UI5Element {
+    static async onDefine() {
+        UDExDatePicker_1.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    }
+    async _getCalendar() {
+        const staticAreaItem = await this.getStaticAreaItemDomRef();
+        return staticAreaItem.querySelector("#ui5-calendar");
+    }
+    async _getResponsePopover() {
+        const staticAreaItem = await this.getStaticAreaItemDomRef();
+        return staticAreaItem.querySelector(`#udex-${this.__id}-calendar__popover`);
+    }
+    /**
+     * Getter for the interactive element that opens the overflow
+     * @private
+     */
+    get _dropdownTrigger() {
+        return this.shadowRoot.querySelector(".udex-date-picker__trigger");
+    }
+    _afterDropdownClose() {
+        this._dropdownTrigger.active = false;
+        this._dropdownTrigger.shadowRoot?.querySelector("input")?.focus();
+    }
+    _afterDropdownOpen() {
+        this._dropdownTrigger.active = true;
+    }
+    _closeRespPopover() {
+        this.responsivePopover && this.responsivePopover.onClose();
+    }
+    async _openRespPopover() {
+        this._dropdownTrigger.active = true;
+        this.responsivePopover = await this._getResponsePopover();
+        this.responsivePopover?.onOpen(this._dropdownTrigger);
+    }
+    hideCalendar() {
+        this._closeRespPopover();
+    }
+    showCalendar() {
+        this._openRespPopover();
+    }
+    handleCalendarChange(e) {
+        const { dates, timestamp, values } = e.detail;
+        const formattedValues = values;
+        if (this.selectionMode === UDExDatePickerSelectionMode.Single) {
+            this.value = formattedValues[0];
+            this.selectedDates = formattedValues[0];
+        }
+        if (this.selectionMode === UDExDatePickerSelectionMode.Range) {
+            if (dates.length < 2) {
+                return;
+            }
+            this.value = `${formattedValues[0]} - ${formattedValues[1]}`;
+            this.selectedDates = `${formattedValues[0]}, ${formattedValues[1]}`;
+        }
+        this.fireEvent("selection-change", {
+            timestamp,
+            selectedDates: [...dates],
+            selectedValues: formattedValues,
+        }, true);
+        this.hideCalendar();
+    }
+    handleInputClick(e) {
+        e.preventDefault();
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        this.showCalendar();
+    }
+    handleInputMouseDown(e) {
+        e.preventDefault();
+    }
+    handleInputKeyDown(e) {
+        if (e.key === "Enter") {
+            this.handleInputClick(e);
+        }
+    }
+    /**
+     * Used to provide selectedDates to the calendar based on the component's state
+     * Override in derivatives to provide different rules for setting the calendar's selected dates
+     * @protected
+     */
+    get _calendarSelectedDates() {
+        if (this.value) {
+            return this.value.split(" - ");
+        }
+        return [];
+    }
+    get accessibleIconName() {
+        return UDExDatePicker_1.i18nBundle.getText(CALENDAR_ICON);
+    }
+};
+__decorate([
+    property({ type: UDExDatePickerSelectionMode, defaultValue: "Single" })
+], UDExDatePicker.prototype, "selectionMode", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExDatePicker.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExDatePicker.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExDatePicker.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], UDExDatePicker.prototype, "supportingText", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExDatePicker.prototype, "value", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExDatePicker.prototype, "accessibleName", void 0);
+__decorate([
+    property({ defaultValue: "" })
+], UDExDatePicker.prototype, "accessibleNameRef", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExDatePicker.prototype, "label", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExDatePicker.prototype, "minDate", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExDatePicker.prototype, "maxDate", void 0);
+__decorate([
+    property({ type: String, noAttribute: true, defaultValue: "" })
+], UDExDatePicker.prototype, "selectedDates", void 0);
+__decorate([
+    property({ type: ValueState, defaultValue: "Standard" })
+], UDExDatePicker.prototype, "valueState", void 0);
+__decorate([
+    property({ type: String, defaultValue: "MMM dd, yyyy" })
+], UDExDatePicker.prototype, "formatPattern", void 0);
+UDExDatePicker = UDExDatePicker_1 = __decorate([
+    customElement({
+        tag: "udex-date-picker",
+        renderer: litRender,
+        styles: DatePickerCss,
+        template: DatePickerTemplate,
+        staticAreaTemplate: DatePickerPopover,
+        staticAreaStyles: [DatePickerPopoverCss],
+        dependencies: [CalendarDate, Calendar, UDExTextField, UDExDropdown, UDExStatusMessage],
+    })
+    /**
+     * Fired when the selected dates change.
+     *
+     * @allowPreventDefault
+     * @param {Array<string>} selectedValues The selected dates
+     * @param {Array<number>} selectedDates The selected dates as UTC timestamps
+     * @public
+     */
+    ,
+    event("selection-change", {
+        detail: {
+            /**
+             * @public
+             */
+            selectedDates: { type: Array },
+            /**
+             * @public
+             */
+            selectedValues: { type: Array },
+            timestamp: { type: Number },
+        },
+    })
+], UDExDatePicker);
+UDExDatePicker.define();
+export default UDExDatePicker;
+//# sourceMappingURL=DatePicker.js.map

package/dist/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../src/DatePicker.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\n// eslint-disable-next-line\nimport Calendar, { CalendarSelectedDatesChangeEventDetail } from \"@ui5/webcomponents/dist/Calendar.js\";\nimport CalendarDate from \"@ui5/webcomponents/dist/CalendarDate.js\";\nimport \"@ui5/webcomponents/dist/Icon.js\";\nimport \"@ui5/webcomponents-icons/dist/appointment-2.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { CALENDAR_ICON } from \"./generated/i18n/i18n-defaults.js\";\n\n// Template\nimport DatePickerTemplate from \"./generated/templates/DatePickerTemplate.lit.js\";\nimport DatePickerPopover from \"./generated/templates/DatePickerPopoverTemplate.lit.js\";\n\n// Styles\nimport DatePickerCss from \"./generated/themes/DatePicker.css\";\nimport UDExTextField from \"./TextField.js\";\nimport UDExDropdown from \"./Dropdown.js\";\nimport DatePickerPopoverCss from \"./generated/themes/DatePickerPopover.css.js\";\nimport UDExStatusMessage from \"./StatusMessage.js\";\nimport ValueState from \"./types/common.js\";\n\nexport enum UDExDatePickerSelectionMode {\n  Single = \"Single\",\n  Range = \"Range\",\n}\n\nexport type DatePickerSelectionChangeEventDetail = {\n  selectedValues: Array<string>;\n  selectedDates: Array<number>;\n  timestamp: number | undefined;\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-date-picker</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@udex/web-components/dist/DatePicker.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-date-picker\n * @public\n */\n@customElement({\n  tag: \"udex-date-picker\",\n  renderer: litRender,\n  styles: DatePickerCss,\n  template: DatePickerTemplate,\n  staticAreaTemplate: DatePickerPopover,\n  staticAreaStyles: [DatePickerPopoverCss],\n  dependencies: [CalendarDate, Calendar, UDExTextField, UDExDropdown, UDExStatusMessage],\n})\n/**\n * Fired when the selected dates change.\n *\n * @allowPreventDefault\n * @param {Array<string>} selectedValues The selected dates\n * @param {Array<number>} selectedDates The selected dates as UTC timestamps\n * @public\n */\n@event<DatePickerSelectionChangeEventDetail>(\"selection-change\", {\n  detail: {\n    /**\n     * @public\n     */\n    selectedDates: { type: Array },\n    /**\n     * @public\n     */\n    selectedValues: { type: Array },\n\n    timestamp: { type: Number },\n  },\n})\nclass UDExDatePicker extends UI5Element {\n  /**\n   * Defines selection mode of the calendar component.\n   *\n   * @default \"Single\"\n   * @public\n   */\n  @property({ type: UDExDatePickerSelectionMode, defaultValue: \"Single\" })\n    selectionMode?: `${UDExDatePickerSelectionMode}`;\n\n  /**\n   * Defines whether the component is read-only.\n   * <br><br>\n   * <b>Note:</b> A read-only component is not editable,\n   * but still provides visual feedback upon user interaction.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    readonly!: boolean;\n\n  /**\n   * Defines whether the component is required.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    required!: boolean;\n\n  /**\n   * Defines whether the component is in disabled state.\n   * <br><br>\n   * <b>Note:</b> A disabled component is completely noninteractive.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    disabled!: boolean;\n\n  /**\n   * Defines supporting text under the input field.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    supportingText!: string;\n\n  /**\n   * Defines the value of the input.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    value!: string;\n\n  /**\n   * Sets the accessible ARIA name of the component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    accessibleName!: string;\n\n  /**\n   * Receives id (or many ids) of the elements that label the component.\n   * @default \"\"\n   * @public\n   */\n  @property({ defaultValue: \"\" })\n    accessibleNameRef!: string;\n\n  /**\n   * Defines label text for the input field.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    label!: string;\n\n  /**\n   * Determines the minimum date available for selection.\n   * <br/><br/>\n   * <b>Note:</b> The minDate value must be provided in the ISO date format (YYYY-MM-dd).\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    minDate!: string;\n\n  /**\n   * Determines the maximum date available for selection.\n   * <br/><br/>\n   * <b>Note:</b> The maxDate value must be provided in the ISO date format (YYYY-MM-dd).\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    maxDate!: string;\n\n  /**\n   * Defines selected dates values.\n   *\n   * @default \"\"\n   * @private\n   */\n  @property({ type: String, noAttribute: true, defaultValue: \"\" })\n    selectedDates!: string;\n\n  /**\n   * Defines the value state of the component.\n   *\n   * @default \"Standard\"\n   * @public\n   */\n  @property({ type: ValueState, defaultValue: \"Standard\" })\n    valueState!: \"Standard\" | \"Warning\" | \"Error\" | \"Success\";\n\n  /**\n   * Defines the date format pattern (e.g., \\\"MMM dd, yyyy\\\" or \\\"MM/dd/yyyy\\\").\n   * @default \"MMM dd, yyyy\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"MMM dd, yyyy\" })\n    formatPattern!: string;\n\n  responsivePopover?: UDExDropdown;\n\n  static i18nBundle: I18nBundle;\n\n  static async onDefine() {\n    UDExDatePicker.i18nBundle = await getI18nBundle(\"sap-ui-webcomponents-bundle\");\n  }\n\n  async _getCalendar() {\n    const staticAreaItem = await this.getStaticAreaItemDomRef();\n    return staticAreaItem!.querySelector<Calendar>(\"#ui5-calendar\")!;\n  }\n\n  async _getResponsePopover() {\n    const staticAreaItem = await this.getStaticAreaItemDomRef();\n    return staticAreaItem!.querySelector<UDExDropdown>(`#udex-${this.__id!}-calendar__popover`)!;\n  }\n\n  /**\n   * Getter for the interactive element that opens the overflow\n   * @private\n   */\n  get _dropdownTrigger() {\n    return this.shadowRoot!.querySelector<UDExTextField>(\".udex-date-picker__trigger\")!;\n  }\n\n  _afterDropdownClose() {\n    this._dropdownTrigger.active = false;\n    this._dropdownTrigger.shadowRoot?.querySelector(\"input\")?.focus();\n  }\n\n  _afterDropdownOpen() {\n    this._dropdownTrigger.active = true;\n  }\n\n  _closeRespPopover() {\n    this.responsivePopover && this.responsivePopover.onClose();\n  }\n\n  async _openRespPopover() {\n    this._dropdownTrigger.active = true;\n    this.responsivePopover = await this._getResponsePopover();\n    this.responsivePopover?.onOpen(this._dropdownTrigger);\n  }\n\n  hideCalendar(): void {\n    this._closeRespPopover();\n  }\n\n  showCalendar(): void {\n    this._openRespPopover();\n  }\n\n  handleCalendarChange(e: CustomEvent<CalendarSelectedDatesChangeEventDetail>): void {\n    const { dates, timestamp, values } = e.detail;\n\n    const formattedValues = values;\n\n    if (this.selectionMode === UDExDatePickerSelectionMode.Single) {\n      this.value = formattedValues[0];\n      this.selectedDates = formattedValues[0];\n    }\n\n    if (this.selectionMode === UDExDatePickerSelectionMode.Range) {\n      if (dates.length < 2) {\n        return;\n      }\n\n      this.value = `${formattedValues[0]} - ${formattedValues[1]}`;\n      this.selectedDates = `${formattedValues[0]}, ${formattedValues[1]}`;\n    }\n\n    this.fireEvent(\n      \"selection-change\",\n      {\n        timestamp,\n        selectedDates: [...dates],\n        selectedValues: formattedValues,\n      },\n      true,\n    );\n\n    this.hideCalendar();\n  }\n\n  handleInputClick(e: MouseEvent | KeyboardEvent): void {\n    e.preventDefault();\n\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    this.showCalendar();\n  }\n\n  handleInputMouseDown(e: MouseEvent): void {\n    e.preventDefault();\n  }\n\n  handleInputKeyDown(e: KeyboardEvent): void {\n    if (e.key === \"Enter\") {\n      this.handleInputClick(e);\n    }\n  }\n\n  /**\n   * Used to provide selectedDates to the calendar based on the component's state\n   * Override in derivatives to provide different rules for setting the calendar's selected dates\n   * @protected\n   */\n  get _calendarSelectedDates(): Array<string> {\n    if (this.value) {\n      return this.value.split(\" - \");\n    }\n\n    return [];\n  }\n\n  get accessibleIconName() {\n    return UDExDatePicker.i18nBundle.getText(CALENDAR_ICON);\n  }\n}\n\nUDExDatePicker.define();\n\nexport default UDExDatePicker;\n"]}

package/dist/Divider.d.ts

@@ -0,0 +1,24 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>udex-divider</code> component is a divider component used to separate content in a page.
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-divider
+ * @public
+ */
+declare class UDExDivider extends UI5Element {
+    /**
+     * Defines the ARIA role of the component.
+     *
+     * @default "separator"
+     * @public
+     */
+    accessibleRole: string;
+    get effectiveAccRole(): string;
+}
+export default UDExDivider;

package/dist/Divider.js

@@ -0,0 +1,45 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+// Template
+import DividerTemplate from "./generated/templates/DividerTemplate.lit.js";
+// Styles
+import DividerCss from "./generated/themes/Divider.css";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>udex-divider</code> component is a divider component used to separate content in a page.
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-divider
+ * @public
+ */
+let UDExDivider = class UDExDivider extends UI5Element {
+    get effectiveAccRole() {
+        return this.accessibleRole.toLowerCase();
+    }
+};
+__decorate([
+    property({ type: String, defaultValue: "separator" })
+], UDExDivider.prototype, "accessibleRole", void 0);
+UDExDivider = __decorate([
+    customElement({
+        tag: "udex-divider",
+        renderer: litRender,
+        styles: DividerCss,
+        template: DividerTemplate,
+    })
+], UDExDivider);
+UDExDivider.define();
+export default UDExDivider;
+//# sourceMappingURL=Divider.js.map

package/dist/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../src/Divider.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAE3E,WAAW;AACX,OAAO,eAAe,MAAM,8CAA8C,CAAC;AAE3E,SAAS;AACT,OAAO,UAAU,MAAM,gCAAgC,CAAC;AAExD;;;;;;;;;;;GAWG;AAOH,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAUlC,IAAI,gBAAgB;QAClB,OAAO,IAAI,CAAC,cAAc,CAAC,WAAW,EAAE,CAAC;IAC3C,CAAC;CACF,CAAA;AALG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC;mDAC5B;AARtB,WAAW;IANhB,aAAa,CAAC;QACb,GAAG,EAAE,cAAc;QACnB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,UAAU;QAClB,QAAQ,EAAE,eAAe;KAC1B,CAAC;GACI,WAAW,CAahB;AAED,WAAW,CAAC,MAAM,EAAE,CAAC;AAErB,eAAe,WAAW,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\n\n// Template\nimport DividerTemplate from \"./generated/templates/DividerTemplate.lit.js\";\n\n// Styles\nimport DividerCss from \"./generated/themes/Divider.css\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * The <code>udex-divider</code> component is a divider component used to separate content in a page.\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-divider\n * @public\n */\n@customElement({\n  tag: \"udex-divider\",\n  renderer: litRender,\n  styles: DividerCss,\n  template: DividerTemplate,\n})\nclass UDExDivider extends UI5Element {\n  /**\n   * Defines the ARIA role of the component.\n   *\n   * @default \"separator\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"separator\" })\n    accessibleRole!: string;\n\n  get effectiveAccRole() {\n    return this.accessibleRole.toLowerCase();\n  }\n}\n\nUDExDivider.define();\n\nexport default UDExDivider;\n"]}

package/dist/Dropdown.d.ts

@@ -0,0 +1,122 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import Popover from "@ui5/webcomponents/dist/Popover.js";
+import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
+import { PlacementType, HorizontalAlign } from "./types/Dropdown.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-dropdown</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @udex/web-components/dist/Dropdown.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @extends UI5Element
+ * @tagname udex-dropdown
+ * @public
+ */
+declare class UDExDropdown extends UI5Element {
+    /**
+     * Allows control over the height.
+     *
+     * @public
+     */
+    height?: string;
+    /**
+     * Determines on which side the component is placed at.
+     *
+     * @default "Bottom"
+     * @public
+     */
+    placementType: `${PlacementType}`;
+    /**
+     * Determines the horizontal alignment of the component.
+     *
+     * @default "Left"
+     * @public
+     */
+    horizontalAlign: `${HorizontalAlign}`;
+    /**
+     * Defines the accessible ARIA name of the component.
+     *
+     * @default ""
+     * @public
+     */
+    accessibleName: string;
+    /**
+     * Allows setting a custom role.
+     * @default "Dialog"
+     * @public
+     */
+    accessibleRole: `${PopupAccessibleRole}`;
+    /**
+     * Defines the content of the Dropdown.
+     *
+     * @slot content
+     * @public
+     */
+    content: Array<HTMLElement>;
+    /**
+     * Defines the header HTML Element.
+     *
+     * @slot
+     * @public
+     */
+    header: Array<HTMLElement>;
+    /**
+     * Defines the footer HTML Element.
+     *
+     * @slot
+     * @public
+     */
+    footer: Array<HTMLElement>;
+    /**
+     * Defines the trigger HTML Element.
+     *
+     * @slot
+     * @public
+     */
+    trigger: Array<HTMLElement>;
+    /**
+     * Indicates if the dropdown pane is open
+     *
+     * @public
+     * @default false
+     */
+    open: boolean;
+    /**
+     * Determines if there is no enough space, the component can be placed
+     * over the target.
+     * @default false
+     * @public
+     */
+    disableTargetOverlap?: boolean;
+    /**
+     * Defines direction of the component.
+     *
+     * @private
+     */
+    _direction?: string;
+    onAfterRendering(): void;
+    handleDirection(): void;
+    getDropdownPane(): Popover;
+    getTrigger(): HTMLElement;
+    onTriggerClick(): void;
+    onOpen(opener: HTMLElement): void;
+    onClose(): void;
+    afterDropdownClose(): void;
+    afterDropdownOpen(): void;
+    beforeDropdownOpen(): void;
+    beforeDropdownClose(): void;
+    get hasTriggerSlot(): boolean;
+    get hasHeaderSlot(): boolean;
+    get hasFooterSlot(): boolean;
+    get disableAllowTargetOverlap(): boolean;
+}
+export default UDExDropdown;

package/dist/Dropdown.js

@@ -0,0 +1,203 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import Popover from "@ui5/webcomponents/dist/Popover.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
+import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
+import DropdownTemplate from "./generated/templates/DropdownTemplate.lit.js";
+import { PlacementType, HorizontalAlign } from "./types/Dropdown.js";
+// Styles
+import DropdownCss from "./generated/themes/Dropdown.css";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-dropdown</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @udex/web-components/dist/Dropdown.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @extends UI5Element
+ * @tagname udex-dropdown
+ * @public
+ */
+let UDExDropdown = class UDExDropdown extends UI5Element {
+    onAfterRendering() {
+        this.handleDirection();
+    }
+    handleDirection() {
+        const filterMenu = this.shadowRoot?.querySelector(".udex-dropdown");
+        if (filterMenu) {
+            const directionStyles = window
+                .getComputedStyle(filterMenu)
+                .getPropertyValue("direction");
+            if (!directionStyles) {
+                this._direction = "ltr";
+            }
+            else {
+                this._direction = directionStyles;
+            }
+        }
+    }
+    getDropdownPane() {
+        return this.shadowRoot.querySelector("[ui5-popover]");
+    }
+    getTrigger() {
+        return this.querySelector("[slot=trigger]");
+    }
+    onTriggerClick() {
+        const dropdown = this.getDropdownPane();
+        const opener = this.getTrigger();
+        const isOpenerDisabled = opener.hasAttribute("disabled");
+        if (!isOpenerDisabled) {
+            dropdown.showAt(opener);
+            this.fireEvent("click-trigger");
+        }
+    }
+    onOpen(opener) {
+        const dropdown = this.getDropdownPane();
+        dropdown.showAt(opener);
+    }
+    onClose() {
+        const dropdown = this.getDropdownPane();
+        dropdown.close(true);
+    }
+    afterDropdownClose() {
+        this.open = false;
+        this.fireEvent("after-close");
+    }
+    afterDropdownOpen() {
+        this.open = true;
+        this.fireEvent("after-open");
+    }
+    beforeDropdownOpen() {
+        const dropdown = this.getDropdownPane();
+        const hasContentHeight = !!this?.height?.length;
+        if (hasContentHeight) {
+            const content = dropdown.shadowRoot.querySelector("[part=content]");
+            content.style.maxHeight = this.height;
+        }
+        this.fireEvent("before-open");
+    }
+    beforeDropdownClose() {
+        this.fireEvent("before-close");
+    }
+    get hasTriggerSlot() {
+        return !!this.trigger.length;
+    }
+    get hasHeaderSlot() {
+        return !!this.header.length;
+    }
+    get hasFooterSlot() {
+        return !!this.footer.length;
+    }
+    get disableAllowTargetOverlap() {
+        return this.disableTargetOverlap?.toString() !== "true";
+    }
+};
+__decorate([
+    property({ type: String })
+], UDExDropdown.prototype, "height", void 0);
+__decorate([
+    property({ type: PlacementType, defaultValue: PlacementType.Bottom })
+], UDExDropdown.prototype, "placementType", void 0);
+__decorate([
+    property({ type: HorizontalAlign, defaultValue: HorizontalAlign.Left })
+], UDExDropdown.prototype, "horizontalAlign", void 0);
+__decorate([
+    property()
+], UDExDropdown.prototype, "accessibleName", void 0);
+__decorate([
+    property({ type: PopupAccessibleRole, defaultValue: PopupAccessibleRole.Dialog })
+], UDExDropdown.prototype, "accessibleRole", void 0);
+__decorate([
+    slot({ type: HTMLElement, "default": true })
+], UDExDropdown.prototype, "content", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], UDExDropdown.prototype, "header", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], UDExDropdown.prototype, "footer", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], UDExDropdown.prototype, "trigger", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExDropdown.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExDropdown.prototype, "disableTargetOverlap", void 0);
+__decorate([
+    property({ type: String })
+], UDExDropdown.prototype, "_direction", void 0);
+UDExDropdown = __decorate([
+    customElement({
+        tag: "udex-dropdown",
+        renderer: litRender,
+        styles: [
+            DropdownCss,
+            getEffectiveScrollbarStyle(),
+        ],
+        template: DropdownTemplate,
+        dependencies: [Popover],
+    })
+    /**
+     * Fired event when the user clicks the trigger.
+     *
+     * @event sap.ui.webc.web-components.UDExDropdown#clickTrigger
+     * @public
+     */
+    ,
+    event("click-trigger")
+    /**
+     * Fired before the dropdown is opened.
+     *
+     * @event sap.ui.webc.web-components.UDExDropdown#beforeOpen
+     * @public
+     */
+    ,
+    event("before-open")
+    /**
+     * Fired after the dropdown is opened.
+     *
+     * @event sap.ui.webc.web-components.UDExDropdown#afterOpen
+     * @public
+     */
+    ,
+    event("after-open")
+    /**
+     * Fired before the menu is closed.
+     *
+     * @event sap.ui.webc.web-components.UDExDropdown#beforeClose
+     * @public
+     */
+    ,
+    event("before-close")
+    /**
+     * Fired after the menu is closed.
+     *
+     * @event sap.ui.webc.web-components.UDExDropdown#afterClose
+     * @public
+     */
+    ,
+    event("after-close")
+], UDExDropdown);
+UDExDropdown.define();
+export default UDExDropdown;
+//# sourceMappingURL=Dropdown.js.map