@sapudex/web-components 0.111.0

package/config/dist/DatePicker.js

@@ -0,0 +1,175 @@
+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 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";
+import "@ui5/webcomponents/dist/Icon.js";
+import "@ui5/webcomponents-icons/dist/appointment-2.js";
+// Template
+import DatePickerTemplate from "./generated/templates/DatePickerTemplate.lit.js";
+// Styles
+import DatePickerCss from "./generated/themes/DatePicker.css";
+import UDExCalendar from "./Calendar.js";
+export var UDExDatePickerSelectionMode;
+(function (UDExDatePickerSelectionMode) {
+    UDExDatePickerSelectionMode["Single"] = "Single";
+    UDExDatePickerSelectionMode["Range"] = "Range";
+})(UDExDatePickerSelectionMode || (UDExDatePickerSelectionMode = {}));
+let UDExDatePicker = class UDExDatePicker extends UI5Element {
+    hideCalendar() {
+        this.isCalendarVisible = false;
+        this.isTextFieldActive = false;
+    }
+    showCalendar() {
+        this.isCalendarVisible = true;
+        this.isTextFieldActive = true;
+    }
+    handleCaledarChange(e) {
+        const { dates, timestamp, values } = e.detail;
+        if (this.selectionMode === UDExDatePickerSelectionMode.Single) {
+            const date = new Date(dates[0] * 1000);
+            const dateOptions = {
+                year: "numeric",
+                month: "short",
+                day: "2-digit",
+            };
+            this.value = date.toLocaleDateString("en-US", dateOptions);
+            this.selectedDates = `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;
+            this.hideCalendar();
+        }
+        if (this.selectionMode === UDExDatePickerSelectionMode.Range) {
+            if (dates.length < 2) {
+                return;
+            }
+            const startDate = new Date(dates[0] * 1000);
+            const endDate = new Date(dates[1] * 1000);
+            const dateOptions = {
+                year: "numeric",
+                month: "short",
+                day: "2-digit",
+            };
+            this.value = `${startDate.toLocaleDateString("en-US", dateOptions)} - ${endDate.toLocaleDateString("en-US", dateOptions)}`;
+            this.selectedDates = `
+        ${startDate.getDate()}/${startDate.getMonth() + 1}/${startDate.getFullYear()},
+        ${endDate.getDate()}/${endDate.getMonth() + 1}/${endDate.getFullYear()}`;
+            this.hideCalendar();
+        }
+        this.fireEvent("selection-change", {
+            timestamp,
+            selectedDates: [...dates],
+            selectedValues: [...values],
+        }, true);
+    }
+    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);
+        }
+    }
+    onEnterDOM() {
+        document.addEventListener("click", (e) => {
+            if (!this.contains(e.target)) {
+                this.hideCalendar();
+            }
+        });
+    }
+    onAfterRendering() {
+        if (this.disabled || this.readonly) {
+            this.hideCalendar();
+        }
+        if (this.isCalendarVisible) {
+            this.setSelectedDates();
+        }
+    }
+    setSelectedDates() {
+        const selectedDatesValues = this.selectedDates.split(",");
+        const calendarElement = this.shadowRoot?.querySelector("udex-calendar");
+        selectedDatesValues.forEach(selectedDateValue => {
+            const selectedDateElement = document.createElement("ui5-date");
+            selectedDateElement.setAttribute("value", selectedDateValue);
+            calendarElement?.append(selectedDateElement);
+        });
+    }
+};
+__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({ type: String, defaultValue: "" })
+], UDExDatePicker.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true, defaultValue: false })
+], UDExDatePicker.prototype, "isCalendarVisible", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true, defaultValue: false })
+], UDExDatePicker.prototype, "isTextFieldActive", void 0);
+__decorate([
+    property({ type: String, noAttribute: true, defaultValue: "" })
+], UDExDatePicker.prototype, "selectedDates", void 0);
+UDExDatePicker = __decorate([
+    customElement({
+        tag: "udex-date-picker",
+        renderer: litRender,
+        styles: DatePickerCss,
+        template: DatePickerTemplate,
+        dependencies: [UDExCalendar],
+    })
+    /**
+     * 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/config/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 { CalendarSelectedDatesChangeEventDetail } from \"@ui5/webcomponents/dist/Calendar.js\";\nimport \"@ui5/webcomponents/dist/Icon.js\";\nimport \"@ui5/webcomponents-icons/dist/appointment-2.js\";\n\n// Template\nimport DatePickerTemplate from \"./generated/templates/DatePickerTemplate.lit.js\";\n\n// Styles\nimport DatePickerCss from \"./generated/themes/DatePicker.css\";\nimport UDExCalendar from \"./Calendar.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@customElement({\n  tag: \"udex-date-picker\",\n  renderer: litRender,\n  styles: DatePickerCss,\n  template: DatePickerTemplate,\n  dependencies: [UDExCalendar],\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   * @type {UDExDatePickerSelectionMode}\n   * @name sap.ui.webc.udex.DatePicker.prototype.selectionMode\n   * @defaultvalue \"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   * @type {boolean}\n   * @name sap.ui.webc.udex.DatePicker.prototype.readonly\n   * @defaultvalue false\n   * @public\n   */\n  @property({ type: Boolean })\n    readonly!: boolean;\n\n  /**\n   * Defines whether the component is required.\n   *\n   * @type {boolean}\n   * @name sap.ui.webc.udex.DatePicker.prototype.required\n   * @defaultvalue 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   * @type {boolean}\n   * @name sap.ui.webc.udex.DatePicker.prototype.disabled\n   * @defaultvalue false\n   * @public\n   */\n  @property({ type: Boolean })\n    disabled!: boolean;\n\n  /**\n   * Defines supporting text under the input field.\n   *\n   * @type {string}\n   * @name sap.ui.webc.udex.DatePicker.prototype.supportingText\n   * @defaultvalue \"\"\n   * @public\n   */\n  @property({ type: String })\n    supportingText!: string;\n\n  /**\n   * Defines the value of the input.\n   *\n   * @type {string}\n   * @defaultvalue \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    value!: string;\n\n  /**\n   * Sets the accessible ARIA name of the component.\n   * @type {string}\n   * @name udex.components.DatePicker.prototype.accessibleName\n   * @defaultvalue \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    accessibleName!: string;\n\n  /**\n   * Defines label text for the input field.\n   * @type {string}\n   * @name udex.components.DatePicker.prototype.label\n   * @defaultvalue \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    label!: string;\n\n  /**\n   * Defines if the calendar is visible.\n   *\n   * @type {boolean}\n   * @defaultvalue false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true, defaultValue: false })\n    isCalendarVisible!: boolean;\n\n  /**\n   * Defines if the input is active.\n   *\n   * @type {boolean}\n   * @defaultvalue false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true, defaultValue: false })\n    isTextFieldActive!: boolean;\n\n  /**\n   * Defines selected dates values.\n   *\n   * @type {string}\n   * @defaultvalue \"\"\n   * @private\n   */\n  @property({ type: String, noAttribute: true, defaultValue: \"\" })\n    selectedDates!: string;\n\n  hideCalendar(): void {\n    this.isCalendarVisible = false;\n    this.isTextFieldActive = false;\n  }\n\n  showCalendar(): void {\n    this.isCalendarVisible = true;\n    this.isTextFieldActive = true;\n  }\n\n  handleCaledarChange(\n    e: CustomEvent<CalendarSelectedDatesChangeEventDetail>,\n  ): void {\n    const { dates, timestamp, values } = e.detail;\n\n    if (this.selectionMode === UDExDatePickerSelectionMode.Single) {\n      const date = new Date(dates[0] * 1000);\n      const dateOptions: Intl.DateTimeFormatOptions = {\n        year: \"numeric\",\n        month: \"short\",\n        day: \"2-digit\",\n      };\n\n      this.value = date.toLocaleDateString(\"en-US\", dateOptions);\n\n      this.selectedDates = `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;\n\n      this.hideCalendar();\n    }\n\n    if (this.selectionMode === UDExDatePickerSelectionMode.Range) {\n      if (dates.length < 2) {\n        return;\n      }\n\n      const startDate = new Date(dates[0] * 1000);\n      const endDate = new Date(dates[1] * 1000);\n      const dateOptions: Intl.DateTimeFormatOptions = {\n        year: \"numeric\",\n        month: \"short\",\n        day: \"2-digit\",\n      };\n\n      this.value = `${startDate.toLocaleDateString(\n        \"en-US\",\n        dateOptions,\n      )} - ${endDate.toLocaleDateString(\"en-US\", dateOptions)}`;\n\n      this.selectedDates = `\n        ${startDate.getDate()}/${startDate.getMonth() + 1}/${startDate.getFullYear()},\n        ${endDate.getDate()}/${endDate.getMonth() + 1}/${endDate.getFullYear()}`;\n\n      this.hideCalendar();\n    }\n\n    this.fireEvent(\n      \"selection-change\",\n      {\n        timestamp,\n        selectedDates: [...dates],\n        selectedValues: [...values],\n      },\n      true,\n    );\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  onEnterDOM(): void {\n    document.addEventListener(\"click\", (e: MouseEvent) => {\n      if (!this.contains(e.target as Node)) {\n        this.hideCalendar();\n      }\n    });\n  }\n\n  onAfterRendering(): void {\n    if (this.disabled || this.readonly) {\n      this.hideCalendar();\n    }\n\n    if (this.isCalendarVisible) {\n      this.setSelectedDates();\n    }\n  }\n\n  setSelectedDates(): void {\n    const selectedDatesValues = this.selectedDates.split(\",\");\n    const calendarElement = this.shadowRoot?.querySelector(\"udex-calendar\");\n\n    selectedDatesValues.forEach(selectedDateValue => {\n      const selectedDateElement = document.createElement(\"ui5-date\");\n\n      selectedDateElement.setAttribute(\n        \"value\",\n        selectedDateValue,\n      );\n\n      calendarElement?.append(selectedDateElement);\n    });\n  }\n}\n\nUDExDatePicker.define();\n\nexport default UDExDatePicker;\n"]}

package/config/dist/Divider.d.ts

@@ -0,0 +1,17 @@
+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
+ * @alias udex.components.UDExDivider
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname udex-divider
+ * @public
+ */
+declare class UDExDivider extends UI5Element {
+}
+export default UDExDivider;

package/config/dist/Divider.js

@@ -0,0 +1,39 @@
+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";
+// 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
+ * @alias udex.components.UDExDivider
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname udex-divider
+ * @public
+ */
+let UDExDivider = class UDExDivider extends UI5Element {
+};
+UDExDivider = __decorate([
+    customElement({
+        tag: "udex-divider",
+        renderer: litRender,
+        styles: DividerCss,
+        template: DividerTemplate,
+    })
+], UDExDivider);
+UDExDivider.define();
+export default UDExDivider;
+//# sourceMappingURL=Divider.js.map

package/config/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;AAE7E,WAAW;AACX,OAAO,eAAe,MAAM,8CAA8C,CAAC;AAE3E,SAAS;AACT,OAAO,UAAU,MAAM,gCAAgC,CAAC;AAExD;;;;;;;;;;;;GAYG;AAOH,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;CACnC,CAAA;AADK,WAAW;IANhB,aAAa,CAAC;QACb,GAAG,EAAE,cAAc;QACnB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,UAAU;QAClB,QAAQ,EAAE,eAAe;KAC1B,CAAC;GACI,WAAW,CAChB;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\";\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 * @alias udex.components.UDExDivider\n * @extends sap.ui.webc.base.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\nUDExDivider.define();\n\nexport default UDExDivider;\n"]}

package/config/dist/Dropdown.d.ts

@@ -0,0 +1,125 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import Popover from "@ui5/webcomponents/dist/Popover.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
+ * @alias sap.ui.webc.web-components.UDExDropdown
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname udex-dropdown
+ * @public
+ */
+declare class UDExDropdown extends UI5Element {
+    /**
+     * Allows control over the height.
+     * @type {string}
+     * @name sap.ui.webc.web-components.UDExDropdown.prototype.height
+     * @public
+     */
+    height?: string;
+    /**
+     * Determines on which side the component is placed at.
+     *
+     * @type {PlacementType}
+     * @name sap.ui.webc.web-components.UDExDropdown.prototype.placementType
+     * @defaultvalue "Bottom"
+     * @public
+     */
+    placementType: `${PlacementType}`;
+    /**
+     * Determines the horizontal alignment of the component.
+     *
+     * @type {HorizontalAlign}
+     * @name sap.ui.webc.web-components.UDExDropdown.prototype.horizontalAlign
+     * @defaultvalue "Left"
+     * @public
+     */
+    horizontalAlign: `${HorizontalAlign}`;
+    /**
+     * Defines the content of the Dropdown.
+     * @type {HTMLElement[]}
+     * @name sap.ui.webc.web-components.UDExDropdown.prototype.default
+     * @slot content
+     * @public
+     */
+    content: Array<HTMLElement>;
+    /**
+     * Defines the header HTML Element.
+     *
+     * @type {HTMLElement[]}
+     * @name sap.ui.webc.web-components.UDExDropdown.prototype.header
+     * @slot
+     * @public
+     */
+    header: Array<HTMLElement>;
+    /**
+     * Defines the footer HTML Element.
+     *
+     * @type {HTMLElement[]}
+     * @name sap.ui.webc.web-components.UDExDropdown.prototype.footer
+     * @slot
+     * @public
+     */
+    footer: Array<HTMLElement>;
+    /**
+     * Defines the trigger HTML Element.
+     *
+     * @type {HTMLElement[]}
+     * @name sap.ui.webc.web-components.UDExDropdown.prototype.trigger
+     * @slot
+     * @public
+     */
+    trigger: Array<HTMLElement>;
+    /**
+     * Indicates if the dropdown pane is open
+     * @public
+     * @type {boolean}
+     * @name sap.ui.web-components.UDExDropdown.prototype.open
+     * @defaultvalue false
+     */
+    open: boolean;
+    /**
+     * Allows control over the width.
+     * @type {string}
+     * @name sap.ui.web-components.UDExDropdown.prototype.width
+     * @public
+     */
+    width?: string;
+    /**
+     * Defines direction of the component.
+     *
+     * @type {string}
+     * @name sap.ui.webc.web-components.UDExDropdown.prototype.direction
+     * @private
+     */
+    _direction?: string;
+    onAfterRendering(): void;
+    onBeforeRendering(): void;
+    handleDirection(): void;
+    getDropdownPane(): Popover;
+    getTrigger(): HTMLElement;
+    onTriggerClick(): void;
+    onOpen(opener: HTMLElement): void;
+    onClose(): void;
+    get hasTriggerSlot(): boolean;
+    get hasHeaderSlot(): boolean;
+    get hasFooterSlot(): boolean;
+    afterDropdownClose(): void;
+    afterDropdownOpen(): void;
+    beforeDropdownOpen(): void;
+    beforeDropdownClose(): void;
+    get holderWeight(): string;
+}
+export default UDExDropdown;

package/config/dist/Dropdown.js

@@ -0,0 +1,201 @@
+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 browserScrollbarCSS from "@ui5/webcomponents/dist/generated/themes/BrowserScrollbar.css.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
+ * @alias sap.ui.webc.web-components.UDExDropdown
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname udex-dropdown
+ * @public
+ */
+let UDExDropdown = class UDExDropdown extends UI5Element {
+    onAfterRendering() {
+        this.handleDirection();
+    }
+    onBeforeRendering() {
+        if (this.horizontalAlign === HorizontalAlign.Stretch && this._direction === "rtl") {
+            this.horizontalAlign = HorizontalAlign.Right;
+        }
+    }
+    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");
+        const hasContentHeight = !!this?.height?.length;
+        if (!isOpenerDisabled) {
+            dropdown.showAt(opener);
+            this.fireEvent("click-trigger");
+        }
+        if (hasContentHeight) {
+            const content = dropdown.shadowRoot.querySelector("[part=content]");
+            content.style.height = this.height;
+        }
+    }
+    onOpen(opener) {
+        const dropdown = this.getDropdownPane();
+        dropdown.showAt(opener);
+    }
+    onClose() {
+        const dropdown = this.getDropdownPane();
+        dropdown.close(true);
+    }
+    get hasTriggerSlot() {
+        return !!this.trigger.length;
+    }
+    get hasHeaderSlot() {
+        return !!this.header.length;
+    }
+    get hasFooterSlot() {
+        return !!this.footer.length;
+    }
+    afterDropdownClose() {
+        this.open = false;
+        this.fireEvent("after-close");
+    }
+    afterDropdownOpen() {
+        this.open = true;
+        this.fireEvent("after-open");
+    }
+    beforeDropdownOpen() {
+        this.fireEvent("before-open");
+    }
+    beforeDropdownClose() {
+        this.fireEvent("before-close");
+    }
+    get holderWeight() {
+        return this.width ? this.width : "auto";
+    }
+};
+__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([
+    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: String })
+], UDExDropdown.prototype, "width", void 0);
+__decorate([
+    property({ type: String })
+], UDExDropdown.prototype, "_direction", void 0);
+UDExDropdown = __decorate([
+    customElement({
+        tag: "udex-dropdown",
+        renderer: litRender,
+        styles: [
+            DropdownCss,
+            browserScrollbarCSS,
+        ],
+        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

package/config/dist/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../src/Dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Popover from \"@ui5/webcomponents/dist/Popover.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport browserScrollbarCSS from \"@ui5/webcomponents/dist/generated/themes/BrowserScrollbar.css.js\";\nimport DropdownTemplate from \"./generated/templates/DropdownTemplate.lit.js\";\nimport { PlacementType, HorizontalAlign } from \"./types/Dropdown.js\";\n\n// Styles\nimport DropdownCss from \"./generated/themes/Dropdown.css\";\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-dropdown</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import @udex/web-components/dist/Dropdown.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.web-components.UDExDropdown\n * @extends sap.ui.webc.base.UI5Element\n * @tagname udex-dropdown\n * @public\n */\n@customElement({\n  tag: \"udex-dropdown\",\n  renderer: litRender,\n  styles: [\n    DropdownCss,\n    browserScrollbarCSS,\n  ],\n  template: DropdownTemplate,\n  dependencies: [Popover],\n})\n\n/**\n * Fired event when the user clicks the trigger.\n *\n * @event sap.ui.webc.web-components.UDExDropdown#clickTrigger\n * @public\n */\n@event(\"click-trigger\")\n\n/**\n * Fired before the dropdown is opened.\n *\n * @event sap.ui.webc.web-components.UDExDropdown#beforeOpen\n * @public\n */\n@event(\"before-open\")\n\n/**\n * Fired after the dropdown is opened.\n *\n * @event sap.ui.webc.web-components.UDExDropdown#afterOpen\n * @public\n */\n@event(\"after-open\")\n\n/**\n * Fired before the menu is closed.\n *\n * @event sap.ui.webc.web-components.UDExDropdown#beforeClose\n * @public\n */\n@event(\"before-close\")\n\n/**\n * Fired after the menu is closed.\n *\n * @event sap.ui.webc.web-components.UDExDropdown#afterClose\n * @public\n */\n@event(\"after-close\")\nclass UDExDropdown extends UI5Element {\n  /**\n   * Allows control over the height.\n   * @type {string}\n   * @name sap.ui.webc.web-components.UDExDropdown.prototype.height\n   * @public\n   */\n  @property({ type: String })\n    height?: string;\n\n  /**\n   * Determines on which side the component is placed at.\n   *\n   * @type {PlacementType}\n   * @name sap.ui.webc.web-components.UDExDropdown.prototype.placementType\n   * @defaultvalue \"Bottom\"\n   * @public\n   */\n  @property({ type: PlacementType, defaultValue: PlacementType.Bottom })\n    placementType!: `${PlacementType}`;\n\n  /**\n   * Determines the horizontal alignment of the component.\n   *\n   * @type {HorizontalAlign}\n   * @name sap.ui.webc.web-components.UDExDropdown.prototype.horizontalAlign\n   * @defaultvalue \"Left\"\n   * @public\n   */\n  @property({ type: HorizontalAlign, defaultValue: HorizontalAlign.Left })\n    horizontalAlign!: `${HorizontalAlign}`;\n\n  /**\n   * Defines the content of the Dropdown.\n   * @type {HTMLElement[]}\n   * @name sap.ui.webc.web-components.UDExDropdown.prototype.default\n   * @slot content\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true })\n    content!: Array<HTMLElement>;\n\n  /**\n   * Defines the header HTML Element.\n   *\n   * @type {HTMLElement[]}\n   * @name sap.ui.webc.web-components.UDExDropdown.prototype.header\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    header!: Array<HTMLElement>;\n\n  /**\n   * Defines the footer HTML Element.\n   *\n   * @type {HTMLElement[]}\n   * @name sap.ui.webc.web-components.UDExDropdown.prototype.footer\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    footer!: Array<HTMLElement>;\n\n  /**\n   * Defines the trigger HTML Element.\n   *\n   * @type {HTMLElement[]}\n   * @name sap.ui.webc.web-components.UDExDropdown.prototype.trigger\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    trigger!: Array<HTMLElement>;\n\n  /**\n   * Indicates if the dropdown pane is open\n   * @public\n   * @type {boolean}\n   * @name sap.ui.web-components.UDExDropdown.prototype.open\n   * @defaultvalue false\n   */\n  @property({ type: Boolean })\n    open!: boolean;\n\n  /**\n   * Allows control over the width.\n   * @type {string}\n   * @name sap.ui.web-components.UDExDropdown.prototype.width\n   * @public\n   */\n  @property({ type: String })\n    width?: string;\n\n  /**\n   * Defines direction of the component.\n   *\n   * @type {string}\n   * @name sap.ui.webc.web-components.UDExDropdown.prototype.direction\n   * @private\n   */\n  @property({ type: String })\n    _direction?: string;\n\n  onAfterRendering() {\n    this.handleDirection();\n  }\n\n  onBeforeRendering() {\n    if (this.horizontalAlign === HorizontalAlign.Stretch && this._direction === \"rtl\") {\n      this.horizontalAlign = HorizontalAlign.Right;\n    }\n  }\n\n  handleDirection() {\n    const filterMenu = this.shadowRoot?.querySelector(\".udex-dropdown\");\n    if (filterMenu) {\n      const directionStyles: string = window\n        .getComputedStyle(filterMenu)\n        .getPropertyValue(\"direction\");\n      if (!directionStyles) {\n        this._direction = \"ltr\";\n      } else {\n        this._direction = directionStyles;\n      }\n    }\n  }\n\n  getDropdownPane() {\n    return this.shadowRoot!.querySelector<Popover>(\"[ui5-popover]\")!;\n  }\n\n  getTrigger() {\n    return this.querySelector<HTMLElement>(\"[slot=trigger]\")!;\n  }\n\n  onTriggerClick() {\n    const dropdown = this.getDropdownPane();\n    const opener = this.getTrigger();\n    const isOpenerDisabled = opener.hasAttribute(\"disabled\");\n    const hasContentHeight = !!this?.height?.length;\n\n    if (!isOpenerDisabled) {\n      dropdown.showAt(opener);\n      this.fireEvent(\"click-trigger\");\n    }\n\n    if (hasContentHeight) {\n      const content = dropdown.shadowRoot!.querySelector(\"[part=content]\") as HTMLElement;\n      content.style.height = <string> this.height;\n    }\n  }\n\n  onOpen(opener: HTMLElement): void {\n    const dropdown = this.getDropdownPane();\n    dropdown.showAt(opener);\n  }\n\n  onClose():void {\n    const dropdown = this.getDropdownPane();\n    dropdown.close(true);\n  }\n\n  get hasTriggerSlot(): boolean {\n    return !!this.trigger.length;\n  }\n\n  get hasHeaderSlot(): boolean {\n    return !!this.header.length;\n  }\n\n  get hasFooterSlot(): boolean {\n    return !!this.footer.length;\n  }\n\n  afterDropdownClose() {\n    this.open = false;\n    this.fireEvent(\"after-close\");\n  }\n\n  afterDropdownOpen() {\n    this.open = true;\n    this.fireEvent(\"after-open\");\n  }\n\n  beforeDropdownOpen() {\n    this.fireEvent(\"before-open\");\n  }\n\n  beforeDropdownClose() {\n    this.fireEvent(\"before-close\");\n  }\n\n  get holderWeight() {\n    return this.width ? this.width : \"auto\";\n  }\n}\n\nUDExDropdown.define();\n\nexport default UDExDropdown;\n"]}

package/config/dist/DropdownGroupHeaderBase.d.ts

@@ -0,0 +1,33 @@
+import UDExDropdownListItemBase from "./DropdownListItemBase.js";
+/**
+ * @class
+ *
+ * A class to serve as a foundation
+ * for the <code>UDExDropdownListGroupHeader</code> and <code>UDExFilterMenuGroupHeader</code> classes.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.web-components.UDExDropdownGroupHeaderBase
+ * @extends sap.ui.webc.base.UDExDropdownListItemBase
+ * @public
+ */
+declare class UDExDropdownGroupHeaderBase extends UDExDropdownListItemBase {
+    handleSelectionGroupState(items: Array<UDExDropdownListItemBase>): void;
+    processGroupDeselectAll(items: Array<UDExDropdownListItemBase>): void;
+    toggleIndeterminateGroupState(items: Array<UDExDropdownListItemBase>): void;
+    processGroupSelectAll(items: Array<UDExDropdownListItemBase>): void;
+    handleHeaderState(items: Array<UDExDropdownListItemBase>): void;
+    activateHeaderIndeterminate(): void;
+    activateHeader(): void;
+    deactivateHeader(): void;
+    setAllItems(value: boolean): void;
+    isAllSelected(items: Array<UDExDropdownListItemBase>): boolean;
+    isAllDeselected(items: Array<UDExDropdownListItemBase>): boolean;
+    isEachEnabledOptionSelected(items: Array<UDExDropdownListItemBase>): boolean;
+    isAnyNotSelectedOptionDisabled(items: Array<UDExDropdownListItemBase>): boolean;
+    isAnySelectedOptionDisabled(items: Array<UDExDropdownListItemBase>): boolean;
+    isAnyEnabledOption(items: Array<UDExDropdownListItemBase>): boolean;
+    getItems(): Array<UDExDropdownListItemBase>;
+    get isGroup(): boolean;
+}
+export default UDExDropdownGroupHeaderBase;