udp-stencil-component-library 25.18.1-beta.8 → 25.18.1-beta.9

package/dist/cjs/udp-icon.cjs.entry.js

@@ -0,0 +1,151 @@
+'use strict';
+
+var index = require('./index-DrMNAZCL.js');
+var iconUtils = require('./iconUtils-2mh73T__.js');
+require('./iconMapping-BV2-Gk9Y.js');
+require('@carbon/icons/es/add/16');
+require('@carbon/icons/es/add/32');
+require('@carbon/icons/es/add--alt/16');
+require('@carbon/icons/es/add--filled/16');
+require('@carbon/icons/es/arrows--horizontal/16');
+require('@carbon/icons/es/attachment/16');
+require('@carbon/icons/es/batch-job/16');
+require('@carbon/icons/es/box/16');
+require('@carbon/icons/es/close/16');
+require('@carbon/icons/es/close/24');
+require('@carbon/icons/es/close/32');
+require('@carbon/icons/es/close--filled/16');
+require('@carbon/icons/es/close--outline/16');
+require('@carbon/icons/es/checkmark/16');
+require('@carbon/icons/es/checkmark/24');
+require('@carbon/icons/es/checkmark/32');
+require('@carbon/icons/es/chevron--left/16');
+require('@carbon/icons/es/chevron--right/16');
+require('@carbon/icons/es/chevron--down/16');
+require('@carbon/icons/es/data-enrichment/16');
+require('@carbon/icons/es/document/16');
+require('@carbon/icons/es/document--add/16');
+require('@carbon/icons/es/document--attachment/16');
+require('@carbon/icons/es/document--pdf/16');
+require('@carbon/icons/es/draggable/16');
+require('@carbon/icons/es/edit/16');
+require('@carbon/icons/es/export/16');
+require('@carbon/icons/es/flag/16');
+require('@carbon/icons/es/information/16');
+require('@carbon/icons/es/information/32');
+require('@carbon/icons/es/link/16');
+require('@carbon/icons/es/overflow-menu--vertical/16');
+require('@carbon/icons/es/overflow-menu--vertical/32');
+require('@carbon/icons/es/return/16');
+require('@carbon/icons/es/save/16');
+require('@carbon/icons/es/settings/16');
+require('@carbon/icons/es/subtract/16');
+require('@carbon/icons/es/subtract--alt/16');
+require('@carbon/icons/es/subtract--filled/16');
+require('@carbon/icons/es/trash-can/16');
+require('@carbon/icons/es/user/16');
+require('@carbon/icons/es/view/16');
+require('@carbon/icons/es/warning/16');
+require('@carbon/icons/es/warning/32');
+require('@carbon/icons/es/warning--alt/16');
+require('@carbon/icons/es/warning--alt/32');
+require('@carbon/icons/es/product/16');
+require('@carbon/icons/es/workspace/16');
+require('@carbon/icons/es/arrow--up/16');
+require('@carbon/icons/es/arrow--down/16');
+require('@carbon/icons/es/arrow--right/16');
+require('@carbon/icons/es/arrow--left/16');
+require('@carbon/icons/es/copy/16');
+require('@carbon/icons/es/star/16');
+require('@carbon/icons/es/data-table/16');
+require('@carbon/icons/es/fit-to-width/16');
+require('@carbon/icons/es/search--advanced/16');
+require('@carbon/icons/es/reset/16');
+require('@carbon/icons/es/column/16');
+require('@carbon/icons/es/column--delete/16');
+require('@carbon/icons/es/watson-health/rotate--360/16');
+require('@carbon/icons/es/filter/16');
+require('@carbon/icons/es/app-connectivity/16');
+require('@carbon/icons/es/text--font/16');
+require('@carbon/icons/es/text--long-paragraph/16');
+require('@carbon/icons/es/character--whole-number/16');
+require('@carbon/icons/es/checkbox--checked/16');
+require('@carbon/icons/es/radio-button--checked/16');
+require('@carbon/icons/es/event--schedule/16');
+require('@carbon/icons/es/view--off/16');
+require('@carbon/icons/es/time/16');
+require('@carbon/icons/es/calendar/16');
+require('@carbon/icons/es/list--checked/16');
+require('@carbon/icons/es/list--bulleted/16');
+require('@carbon/icons/es/cloud--upload/16');
+require('@carbon/icons/es/locked/16');
+require('@carbon/icons/es/pause/16');
+require('@carbon/icons/es/unlocked/16');
+require('@carbon/icons/es/send/16');
+require('@carbon/icons/es/email/16');
+require('@carbon/icons/es/checkmark--outline/16');
+require('@carbon/icons/es/migrate--alt/16');
+require('@carbon/icons/es/checkbox--checked--filled/16');
+require('@carbon/icons/es/checkbox/16');
+
+const udpIconCss = ".icon-container{height:100%;display:flex;align-items:center;color:inherit}";
+
+const UdpIcon = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.iconType = 'carbon';
+        /**
+         * @deprecated Use color prop instead
+         */
+        this.darkIcon = true;
+    }
+    render() {
+        var _a, _b;
+        const iconData = iconUtils.getIconFromName(this.iconName, this.iconType);
+        if (!iconData) {
+            return null;
+        }
+        let iconColor;
+        if (this.color) {
+            switch (this.color) {
+                case 'primary':
+                    iconColor = 'var(--primary-color)';
+                    break;
+                case 'secondary':
+                    iconColor = 'var(--secondary-color)';
+                    break;
+                case 'error':
+                    iconColor = 'var(--error-color-main)';
+                    break;
+                case 'info':
+                    iconColor = 'var(--info-color-main)';
+                    break;
+                case 'success':
+                    iconColor = 'var(--success-color-main)';
+                    break;
+                case 'inherit':
+                    iconColor = 'currentColor';
+                    break;
+                default:
+                    iconColor = this.color;
+            }
+        }
+        else {
+            iconColor = this.darkIcon ? 'black' : 'white';
+        }
+        return (index.h("div", { class: "icon-container" }, index.h("svg", Object.assign({}, ((_a = iconData === null || iconData === void 0 ? void 0 : iconData.attrs) !== null && _a !== void 0 ? _a : {}), { fill: iconColor }), (_b = iconData === null || iconData === void 0 ? void 0 : iconData.content) === null || _b === void 0 ? void 0 : _b.map((item, index$1) => {
+            var _a, _b;
+            if ((item === null || item === void 0 ? void 0 : item.elem) === 'path') {
+                return index.h("path", Object.assign({}, ((_a = item === null || item === void 0 ? void 0 : item.attrs) !== null && _a !== void 0 ? _a : {}), { key: index$1 }));
+            }
+            else if ((item === null || item === void 0 ? void 0 : item.elem) === 'circle') {
+                return index.h("circle", Object.assign({}, ((_b = item === null || item === void 0 ? void 0 : item.attrs) !== null && _b !== void 0 ? _b : {}), { key: index$1 }));
+            }
+            return null;
+        }))));
+    }
+};
+UdpIcon.style = udpIconCss;
+
+exports.udp_icon = UdpIcon;
+//# sourceMappingURL=udp-icon.entry.cjs.js.map

package/dist/cjs/udp-icon.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"udp-icon.entry.cjs.js","sources":["src/components/my-component/UI/data-display/icons/udp-icon.css?tag=udp-icon&encapsulation=shadow","src/components/my-component/UI/data-display/icons/udp-icon.tsx"],"sourcesContent":[".icon-container{\n    height: 100%;\n    display: flex;\n    align-items: center;\n    color: inherit;\n}","import { Component, h, Prop } from '@stencil/core';\nimport { getIconFromName } from './iconUtils';\n\n@Component({\n  tag: 'udp-icon',\n  styleUrl: 'udp-icon.css',\n  shadow: true,\n})\nexport class UdpIcon {\n  @Prop() iconName: string;\n  @Prop() iconType: string = 'carbon';\n  /**\n   * @deprecated Use color prop instead\n   */\n  @Prop() darkIcon: boolean = true;\n  @Prop() color: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'inherit' | string;\n\n  render() {\n    const iconData = getIconFromName(this.iconName, this.iconType);\n    if (!iconData){\n      return null;\n    }\n    \n    let iconColor: string;\n\n    if (this.color) {\n      switch (this.color) {\n        case 'primary':\n          iconColor = 'var(--primary-color)';\n          break;\n        case 'secondary':\n          iconColor = 'var(--secondary-color)';\n          break;\n        case 'error':\n          iconColor = 'var(--error-color-main)';\n          break;\n        case 'info':\n          iconColor = 'var(--info-color-main)';\n          break;\n        case 'success':\n          iconColor = 'var(--success-color-main)';\n          break;\n        case 'inherit':\n          iconColor = 'currentColor';\n          break;\n        default:\n          iconColor = this.color;\n      }\n    } else {\n      iconColor = this.darkIcon ? 'black' : 'white';\n    }\n\n    return (\n      <div class=\"icon-container\">\n        <svg {...(iconData?.attrs ?? {})} fill={iconColor}>\n          {iconData?.content?.map((item, index) => {\n            if (item?.elem === 'path') {\n              return <path {...(item?.attrs ?? {})} key={index} />;\n            } else if (item?.elem === 'circle') {\n              return <circle {...(item?.attrs ?? {})} key={index} />;\n            }\n            return null;\n          })}\n        </svg>\n      </div>\n    );\n  }\n}\n"],"names":["getIconFromName","h","index"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,UAAU,GAAG,4EAA4E;;MCQlF,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOU,QAAA,IAAQ,CAAA,QAAA,GAAW,QAAQ;AACnC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,IAAI;AAqDjC;IAlDC,MAAM,GAAA;;AACJ,QAAA,MAAM,QAAQ,GAAGA,yBAAe,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC;QAC9D,IAAI,CAAC,QAAQ,EAAC;AACZ,YAAA,OAAO,IAAI;;AAGb,QAAA,IAAI,SAAiB;AAErB,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;AACd,YAAA,QAAQ,IAAI,CAAC,KAAK;AAChB,gBAAA,KAAK,SAAS;oBACZ,SAAS,GAAG,sBAAsB;oBAClC;AACF,gBAAA,KAAK,WAAW;oBACd,SAAS,GAAG,wBAAwB;oBACpC;AACF,gBAAA,KAAK,OAAO;oBACV,SAAS,GAAG,yBAAyB;oBACrC;AACF,gBAAA,KAAK,MAAM;oBACT,SAAS,GAAG,wBAAwB;oBACpC;AACF,gBAAA,KAAK,SAAS;oBACZ,SAAS,GAAG,2BAA2B;oBACvC;AACF,gBAAA,KAAK,SAAS;oBACZ,SAAS,GAAG,cAAc;oBAC1B;AACF,gBAAA;AACE,oBAAA,SAAS,GAAG,IAAI,CAAC,KAAK;;;aAErB;AACL,YAAA,SAAS,GAAG,IAAI,CAAC,QAAQ,GAAG,OAAO,GAAG,OAAO;;QAG/C,QACEC,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACzBA,OAAA,CAAA,KAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAU,CAAA,EAAA,GAAA,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAR,MAAA,GAAA,MAAA,GAAA,QAAQ,CAAE,KAAK,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,EAAE,GAAC,EAAE,IAAI,EAAE,SAAS,EAC9C,CAAA,EAAA,CAAA,EAAA,GAAA,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,MAAA,GAAA,MAAA,GAAR,QAAQ,CAAE,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,GAAG,CAAC,CAAC,IAAI,EAAEC,OAAK,KAAI;;YACtC,IAAI,CAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,IAAI,MAAK,MAAM,EAAE;gBACzB,OAAOD,mCAAW,CAAA,EAAA,GAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,uBAAJ,IAAI,CAAE,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,EAAE,GAAC,EAAE,GAAG,EAAEC,OAAK,IAAI;;iBAC/C,IAAI,CAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,IAAI,MAAK,QAAQ,EAAE;gBAClC,OAAOD,qCAAa,CAAA,EAAA,GAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,uBAAJ,IAAI,CAAE,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,EAAE,GAAC,EAAE,GAAG,EAAEC,OAAK,IAAI;;AAExD,YAAA,OAAO,IAAI;AACb,SAAC,CAAC,CACE,CACF;;;;;;;"}

package/dist/cjs/udp-list-renderer.udp-pagination.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"udp-list-renderer.udp-pagination.entry.cjs.js","sources":["src/components/my-component/UI/data-display/list-renderer/udp-list-renderer.css?tag=udp-list-renderer&encapsulation=shadow","src/components/my-component/UI/data-display/list-renderer/udp-list-renderer.tsx","src/components/my-component/UI/navigation/pagination/udp-pagination.css?tag=udp-pagination&encapsulation=shadow","src/components/my-component/UI/navigation/pagination/udp-pagination.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.udp-list-renderer-container {\n  display: flex;\n  flex-direction: column;\n}\n\n.item-list-container   {\n  display: flex;\n  flex-direction: column;\n}\n\n/* Spacing variants */\n.item-list-container.spacing-xs {\n  gap: var(--spacing-02);\n}\n\n.item-list-container.spacing-sm {\n  gap: var(--spacing-03);\n}\n\n.item-list-container.spacing-md {\n  gap: var(--spacing-04);\n}\n\n.item-list-container.spacing-lg {\n  gap: var(--spacing-06);\n}\n\n.item-list-container.spacing-condensed {\n  gap: var(--spacing-01);\n}\n\n.loading-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: var(--spacing-07); /* 2rem */\n  min-height: 100px; /* Adjust as needed, or use a spacing variable if appropriate */\n} ","import { Component, Prop, h, State, Watch, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'udp-list-renderer',\n  styleUrl: 'udp-list-renderer.css',\n  shadow: true,\n})\nexport class UdpItemList {\n  /**\n   * The tag name of the component to render for each item in the list.\n   * For example, 'my-item-component'.\n   */\n  @Prop() itemComponent: string;\n\n  /**\n   * Array of objects to be rendered in the list.\n   */\n  @Prop() data: any[] = [];\n\n  /**\n   * Object mapping source data fields to prop names for the item component.\n   * Example: {元のフィールド: '新しいフィールド'}\n   * This will pass props to ItemComponent as: <ItemComponent newField={sourceData.originalField} />\n   */\n  @Prop() componentDataMap: { [key: string]: string };\n\n  /**\n   * Whether to enable pagination.\n   */\n  @Prop() pagination: boolean = false;\n\n  /**\n   * Number of items to display per page.\n   */\n  @Prop() itemsPerPage: number = 10;\n\n  /**\n   * Whether pagination is handled server-side.\n   */\n  @Prop() isServerSide: boolean = false;\n\n  /**\n   * Total number of items (required for server-side pagination).\n   */\n  @Prop() totalItems: number = 0;\n\n  /**\n   * Callback function for page changes. Required when isServerSide is true.\n   * Emits the new page number.\n   */\n  @Event() pageChange: EventEmitter<number>;\n\n  /**\n   * Current page number (used for server-side pagination or can be controlled externally).\n   * Defaults to 1.\n   */\n  @Prop({ mutable: true, reflect: true }) currentPage: number = 1;\n\n  /**\n   * Whether the list is in a loading state.\n   */\n  @Prop() isLoading: boolean = false;\n\n  /**\n   * Defines the spacing between items.\n   * Options: 'xs', 'sm', 'md', 'lg', 'condensed'\n   * Default: 'sm'\n   */\n  @Prop({ reflect: true }) spacing: 'xs' | 'sm' | 'md' | 'lg' | 'condensed' = 'md';\n\n  @State() internalCurrentPage: number = 1;\n\n  @Watch('currentPage')\n  currentPageChanged(newValue: number) {\n    if (newValue !== this.internalCurrentPage) {\n      this.internalCurrentPage = newValue;\n    }\n  }\n\n  componentWillLoad() {\n    this.internalCurrentPage = this.currentPage;\n  }\n\n  private getPaginatedData() {\n    if (!this.pagination || this.isServerSide) {\n      return this.data;\n    }\n    const startIndex = (this.internalCurrentPage - 1) * this.itemsPerPage;\n    const endIndex = startIndex + this.itemsPerPage;\n    return this.data.slice(startIndex, endIndex);\n  }\n\n  private getTotalPages(): number {\n    if (!this.pagination) return 1;\n    if (this.isServerSide) {\n      if (this.totalItems === 0 || this.itemsPerPage === 0) return 1;\n      return Math.ceil(this.totalItems / this.itemsPerPage);\n    }\n    if (this.data.length === 0 || this.itemsPerPage === 0) return 1;\n    return Math.ceil(this.data.length / this.itemsPerPage);\n  }\n\n  private handlePageChange(newPage: number) {\n    if (this.isLoading) return;\n    if (newPage >= 1 && newPage <= this.getTotalPages()) {\n      if (this.isServerSide) {\n        this.pageChange.emit(newPage);\n      } else {\n        this.internalCurrentPage = newPage;\n        this.currentPage = newPage;\n        this.pageChange.emit(newPage);\n      }\n    }\n  }\n\n  private renderItems() {\n    if (!this.itemComponent) {\n      console.warn('[udp-item-list] itemComponent prop is required.');\n      return <p>Error: itemComponent prop is not defined.</p>;\n    }\n    if (!this.componentDataMap) {\n      console.warn('[udp-item-list] componentDataMap prop is required.');\n      return <p>Error: componentDataMap prop is not defined.</p>;\n    }\n\n    const itemsToRender = this.getPaginatedData();\n\n    if (!itemsToRender || itemsToRender.length === 0) {\n      return <p>No items to display.</p>;\n    }\n\n    return itemsToRender.map(item => {\n      const props = {};\n      for (const sourceKey in this.componentDataMap) {\n        if (item.hasOwnProperty(sourceKey)) {\n          const targetKey = this.componentDataMap[sourceKey];\n          props[targetKey] = item[sourceKey];\n        }\n      }\n      const ItemCmp = this.itemComponent;\n      return <ItemCmp {...props} />;\n    });\n  }\n\n  render() {\n    if (this.isLoading && (!this.data || this.data.length === 0)) {\n      return (\n        <div class=\"loading-container\">\n          <p>Loading...</p>\n        </div>\n      );\n    }\n\n    const containerClasses = {\n      'item-list-container': true,\n      [`spacing-${this.spacing}`]: true,\n    };\n\n    return (\n      <host>\n        <div class={containerClasses}>{this.renderItems()}</div>\n        {this.pagination && this.getTotalPages() > 1 && (\n          <udp-pagination\n            currentPage={this.internalCurrentPage}\n            totalPages={this.getTotalPages()}\n            isLoading={this.isLoading}\n            onPageChange={event => this.handlePageChange(event.detail)}\n          ></udp-pagination>\n        )}\n      </host>\n    );\n  }\n}\n",":host {\n  display: block;\n  font-family: var(--font-family);\n}\n\n.pagination-controls {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: var(--spacing-03); /* 0.5rem */\n  gap: var(--spacing-02); /* 0.25rem, replaces margin on individual buttons */\n}\n\n/* Styles for udp-button are handled by the component itself. \n   We might only need to ensure proper alignment or specific overrides if necessary.\n   The udp-button already has variants for 'active', 'disabled' etc. */\n\n.pagination-controls span.ellipsis {\n  /* background-color: transparent; -- Already default for span */\n  /* border: none; -- Already default for span */\n  color: var(--text-secondary); /* Using a global variable for text color */\n  padding: var(--spacing-02) var(--spacing-01); /* Adjust padding using variables */\n  display: inline-flex; /* To align with buttons */\n  align-items: center; /* To align with buttons */\n  justify-content: center; /* To align with buttons */\n  min-width: 36px; /* Approximate width of a small icon button, adjust as needed */\n  min-height: 36px; /* Approximate height of a small icon button, adjust as needed */\n}\n\n/* Remove specific button styling for .prev-button, .next-button, etc. as udp-button handles it */\n/* .prev-button,\n.next-button,\n.first-page,\n.last-page {\n  Additional specific styles if needed\n} */ ","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'udp-pagination',\n  styleUrl: './udp-pagination.css',\n  shadow: true,\n})\nexport class UdpPagination {\n  /**\n   * The currently active page number.\n   */\n  @Prop() currentPage: number = 1;\n\n  /**\n   * The total number of pages available.\n   */\n  @Prop() totalPages: number = 1;\n\n  /**\n   * Optional: Whether the component consuming pagination is in a loading state.\n   * If true, pagination controls will be disabled.\n   */\n  @Prop() isLoading: boolean = false;\n\n  /**\n   * Emitted when the page is changed by the user.\n   * The event detail will contain the new page number.\n   */\n  @Event() pageChange: EventEmitter<number>;\n\n  private navigateToPage(page: number) {\n    if (this.isLoading || page < 1 || page > this.totalPages || page === this.currentPage) {\n      return;\n    }\n    this.pageChange.emit(page);\n  }\n\n  // Basic page number generation. Could be made more sophisticated (e.g., with ellipses for many pages)\n  private renderPageNumbers() {\n    const pageNumbers = [];\n    const maxPagesToShow = 5; // Max number of page buttons to show directly\n    const halfMaxPages = Math.floor(maxPagesToShow / 2);\n\n    let startPage = Math.max(1, this.currentPage - halfMaxPages);\n    let endPage = Math.min(this.totalPages, this.currentPage + halfMaxPages);\n\n    if (this.currentPage - halfMaxPages < 1) {\n      endPage = Math.min(this.totalPages, maxPagesToShow);\n    }\n\n    if (this.currentPage + halfMaxPages > this.totalPages) {\n      startPage = Math.max(1, this.totalPages - maxPagesToShow + 1);\n    }\n\n    if (this.totalPages <= maxPagesToShow) {\n      startPage = 1;\n      endPage = this.totalPages;\n    }\n\n    // Always show first page if not in range\n    if (startPage > 1) {\n      pageNumbers.push(\n        <udp-button onClick={() => this.navigateToPage(1)} disabled={this.isLoading} variant=\"outlined\" ariaLabel=\"Go to first page\">\n          1\n        </udp-button>,\n      );\n      if (startPage > 2) {\n        pageNumbers.push(<span class=\"ellipsis\">...</span>);\n      }\n    }\n\n    for (let i = startPage; i <= endPage; i++) {\n      pageNumbers.push(\n        <udp-button\n          onClick={() => this.navigateToPage(i)}\n          disabled={this.isLoading}\n          variant={i === this.currentPage ? 'contained' : 'outlined'}\n          color={i === this.currentPage ? 'primary' : 'inherit'}\n          ariaLabel={`Go to page ${i}`}\n          aria-current={i === this.currentPage ? 'page' : undefined}\n        >\n          {i}\n        </udp-button>,\n      );\n    }\n\n    // Always show last page if not in range\n    if (endPage < this.totalPages) {\n      if (endPage < this.totalPages - 1) {\n        pageNumbers.push(<span class=\"ellipsis\">...</span>);\n      }\n      pageNumbers.push(\n        <udp-button onClick={() => this.navigateToPage(this.totalPages)} disabled={this.isLoading} variant=\"outlined\" ariaLabel=\"Go to last page\">\n          {this.totalPages}\n        </udp-button>,\n      );\n    }\n\n    return pageNumbers;\n  }\n\n  render() {\n    if (this.totalPages <= 1) {\n      return null; // Don't render pagination if there's only one page or less\n    }\n\n    return (\n      <div class=\"pagination-controls\">\n        <udp-button onClick={() => this.navigateToPage(this.currentPage - 1)} disabled={this.isLoading || this.currentPage <= 1} variant=\"text\" ariaLabel=\"Go to previous page\">\n          Previous\n        </udp-button>\n\n        {this.renderPageNumbers()}\n\n        <udp-button\n          onClick={() => this.navigateToPage(this.currentPage + 1)}\n          disabled={this.isLoading || this.currentPage >= this.totalPages}\n          variant=\"text\"\n          ariaLabel=\"Go to next page\"\n        >\n          Next\n        </udp-button>\n      </div>\n    );\n  }\n}\n"],"names":["h"],"mappings":"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"}

package/dist/cjs/udp-list-renderer_2.cjs.entry.js

@@ -0,0 +1,204 @@
+'use strict';
+
+var index = require('./index-DrMNAZCL.js');
+
+const udpListRendererCss = ":host{display:block}.udp-list-renderer-container{display:flex;flex-direction:column}.item-list-container{display:flex;flex-direction:column}.item-list-container.spacing-xs{gap:var(--spacing-02)}.item-list-container.spacing-sm{gap:var(--spacing-03)}.item-list-container.spacing-md{gap:var(--spacing-04)}.item-list-container.spacing-lg{gap:var(--spacing-06)}.item-list-container.spacing-condensed{gap:var(--spacing-01)}.loading-container{display:flex;justify-content:center;align-items:center;padding:var(--spacing-07);min-height:100px;}";
+
+const UdpItemList = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pageChange = index.createEvent(this, "pageChange");
+        /**
+         * Array of objects to be rendered in the list.
+         */
+        this.data = [];
+        /**
+         * Whether to enable pagination.
+         */
+        this.pagination = false;
+        /**
+         * Number of items to display per page.
+         */
+        this.itemsPerPage = 10;
+        /**
+         * Whether pagination is handled server-side.
+         */
+        this.isServerSide = false;
+        /**
+         * Total number of items (required for server-side pagination).
+         */
+        this.totalItems = 0;
+        /**
+         * Current page number (used for server-side pagination or can be controlled externally).
+         * Defaults to 1.
+         */
+        this.currentPage = 1;
+        /**
+         * Whether the list is in a loading state.
+         */
+        this.isLoading = false;
+        /**
+         * Defines the spacing between items.
+         * Options: 'xs', 'sm', 'md', 'lg', 'condensed'
+         * Default: 'sm'
+         */
+        this.spacing = 'md';
+        this.internalCurrentPage = 1;
+    }
+    currentPageChanged(newValue) {
+        if (newValue !== this.internalCurrentPage) {
+            this.internalCurrentPage = newValue;
+        }
+    }
+    componentWillLoad() {
+        this.internalCurrentPage = this.currentPage;
+    }
+    getPaginatedData() {
+        if (!this.pagination || this.isServerSide) {
+            return this.data;
+        }
+        const startIndex = (this.internalCurrentPage - 1) * this.itemsPerPage;
+        const endIndex = startIndex + this.itemsPerPage;
+        return this.data.slice(startIndex, endIndex);
+    }
+    getTotalPages() {
+        if (!this.pagination)
+            return 1;
+        if (this.isServerSide) {
+            if (this.totalItems === 0 || this.itemsPerPage === 0)
+                return 1;
+            return Math.ceil(this.totalItems / this.itemsPerPage);
+        }
+        if (this.data.length === 0 || this.itemsPerPage === 0)
+            return 1;
+        return Math.ceil(this.data.length / this.itemsPerPage);
+    }
+    handlePageChange(newPage) {
+        if (this.isLoading)
+            return;
+        if (newPage >= 1 && newPage <= this.getTotalPages()) {
+            if (this.isServerSide) {
+                this.pageChange.emit(newPage);
+            }
+            else {
+                this.internalCurrentPage = newPage;
+                this.currentPage = newPage;
+                this.pageChange.emit(newPage);
+            }
+        }
+    }
+    renderItems() {
+        if (!this.itemComponent) {
+            console.warn('[udp-item-list] itemComponent prop is required.');
+            return index.h("p", null, "Error: itemComponent prop is not defined.");
+        }
+        if (!this.componentDataMap) {
+            console.warn('[udp-item-list] componentDataMap prop is required.');
+            return index.h("p", null, "Error: componentDataMap prop is not defined.");
+        }
+        const itemsToRender = this.getPaginatedData();
+        if (!itemsToRender || itemsToRender.length === 0) {
+            return index.h("p", null, "No items to display.");
+        }
+        return itemsToRender.map(item => {
+            const props = {};
+            for (const sourceKey in this.componentDataMap) {
+                if (item.hasOwnProperty(sourceKey)) {
+                    const targetKey = this.componentDataMap[sourceKey];
+                    props[targetKey] = item[sourceKey];
+                }
+            }
+            const ItemCmp = this.itemComponent;
+            return index.h(ItemCmp, Object.assign({}, props));
+        });
+    }
+    render() {
+        if (this.isLoading && (!this.data || this.data.length === 0)) {
+            return (index.h("div", { class: "loading-container" }, index.h("p", null, "Loading...")));
+        }
+        const containerClasses = {
+            'item-list-container': true,
+            [`spacing-${this.spacing}`]: true,
+        };
+        return (index.h("host", null, index.h("div", { class: containerClasses }, this.renderItems()), this.pagination && this.getTotalPages() > 1 && (index.h("udp-pagination", { currentPage: this.internalCurrentPage, totalPages: this.getTotalPages(), isLoading: this.isLoading, onPageChange: event => this.handlePageChange(event.detail) }))));
+    }
+    static get watchers() { return {
+        "currentPage": ["currentPageChanged"]
+    }; }
+};
+UdpItemList.style = udpListRendererCss;
+
+const udpPaginationCss = ":host{display:block;font-family:var(--font-family)}.pagination-controls{display:flex;justify-content:center;align-items:center;padding:var(--spacing-03);gap:var(--spacing-02);}.pagination-controls span.ellipsis{color:var(--text-secondary);padding:var(--spacing-02) var(--spacing-01);display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;}";
+
+const UdpPagination = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pageChange = index.createEvent(this, "pageChange");
+        /**
+         * The currently active page number.
+         */
+        this.currentPage = 1;
+        /**
+         * The total number of pages available.
+         */
+        this.totalPages = 1;
+        /**
+         * Optional: Whether the component consuming pagination is in a loading state.
+         * If true, pagination controls will be disabled.
+         */
+        this.isLoading = false;
+    }
+    navigateToPage(page) {
+        if (this.isLoading || page < 1 || page > this.totalPages || page === this.currentPage) {
+            return;
+        }
+        this.pageChange.emit(page);
+    }
+    // Basic page number generation. Could be made more sophisticated (e.g., with ellipses for many pages)
+    renderPageNumbers() {
+        const pageNumbers = [];
+        const maxPagesToShow = 5; // Max number of page buttons to show directly
+        const halfMaxPages = Math.floor(maxPagesToShow / 2);
+        let startPage = Math.max(1, this.currentPage - halfMaxPages);
+        let endPage = Math.min(this.totalPages, this.currentPage + halfMaxPages);
+        if (this.currentPage - halfMaxPages < 1) {
+            endPage = Math.min(this.totalPages, maxPagesToShow);
+        }
+        if (this.currentPage + halfMaxPages > this.totalPages) {
+            startPage = Math.max(1, this.totalPages - maxPagesToShow + 1);
+        }
+        if (this.totalPages <= maxPagesToShow) {
+            startPage = 1;
+            endPage = this.totalPages;
+        }
+        // Always show first page if not in range
+        if (startPage > 1) {
+            pageNumbers.push(index.h("udp-button", { onClick: () => this.navigateToPage(1), disabled: this.isLoading, variant: "outlined", ariaLabel: "Go to first page" }, "1"));
+            if (startPage > 2) {
+                pageNumbers.push(index.h("span", { class: "ellipsis" }, "..."));
+            }
+        }
+        for (let i = startPage; i <= endPage; i++) {
+            pageNumbers.push(index.h("udp-button", { onClick: () => this.navigateToPage(i), disabled: this.isLoading, variant: i === this.currentPage ? 'contained' : 'outlined', color: i === this.currentPage ? 'primary' : 'inherit', ariaLabel: `Go to page ${i}`, "aria-current": i === this.currentPage ? 'page' : undefined }, i));
+        }
+        // Always show last page if not in range
+        if (endPage < this.totalPages) {
+            if (endPage < this.totalPages - 1) {
+                pageNumbers.push(index.h("span", { class: "ellipsis" }, "..."));
+            }
+            pageNumbers.push(index.h("udp-button", { onClick: () => this.navigateToPage(this.totalPages), disabled: this.isLoading, variant: "outlined", ariaLabel: "Go to last page" }, this.totalPages));
+        }
+        return pageNumbers;
+    }
+    render() {
+        if (this.totalPages <= 1) {
+            return null; // Don't render pagination if there's only one page or less
+        }
+        return (index.h("div", { class: "pagination-controls" }, index.h("udp-button", { onClick: () => this.navigateToPage(this.currentPage - 1), disabled: this.isLoading || this.currentPage <= 1, variant: "text", ariaLabel: "Go to previous page" }, "Previous"), this.renderPageNumbers(), index.h("udp-button", { onClick: () => this.navigateToPage(this.currentPage + 1), disabled: this.isLoading || this.currentPage >= this.totalPages, variant: "text", ariaLabel: "Go to next page" }, "Next")));
+    }
+};
+UdpPagination.style = udpPaginationCss;
+
+exports.udp_list_renderer = UdpItemList;
+exports.udp_pagination = UdpPagination;
+//# sourceMappingURL=udp-list-renderer.udp-pagination.entry.cjs.js.map

package/dist/cjs/udp-map.cjs.entry.js

@@ -95,11 +95,11 @@ const UdpMap = class {
     }
     //////////////////////////////////////////////////////////RENDER/////////////////////////////////////////////////////
     render() {
-        return (index.h("map-component", { key: 'dbea383c45161505aff8965d3bfbd925ccce570b', handleSetMapComponent: this.handleSetMapComponent, data: this.data, isGeoJsonFormat: this.isGeoJsonFormat, geoJsonMappingConfig: this.geoJsonMappingConfig, enableZoom: this.enableZoom, mapZoom: this.mapZoom, mapCenter: this.mapCenter, mapHeight: this.mapHeight, crs: this.crs, mapProjection: this.mapProjection, mapDataProjection: this.mapDataProjection, getFilteredMapData: this.getFilteredMapData, getFeatureStyles: this.getFeatureStyles, getSelectedFeatureStyles: this.getSelectedFeatureStyles, filterPanel: this.filterPanel, filterPanelCallback: this.filterPanelCallback, enableTileSelection: this.enableTileSelection, tileLayersOptions: this.tileLayersOptions, defaultTileOptionName: this.defaultTileOptionName, layerOptions: this.layerOptions, initialSelectedLayers: this.initialSelectedLayers, bulkSelectedFeaturesActionPanel: this.bulkSelectedFeaturesActionPanel, handleSetSelectedFeaturesOnBulkSelect: this.handleSetSelectedFeaturesOnBulkSelect, handleSetSelectedFeatureOnSelect: this.handleSetSelectedFeatureOnSelect, filterLayersByRole: this.filterLayersByRole, layerKeys: this.layerKeys, layerKeySeparator: this.layerKeySeparator, user: this.user, layerRoles: this.layerRoles, filteredLayerOptionsByRole: this.filteredLayerOptionsByRole, handleSetFilteredLayerOptionsByRole: this.handleSetFilteredLayerOptionsByRole, readOnlyMap: this.readOnlyMap, enableViewFeature: this.enableViewFeature, handleViewFeature: this.handleViewFeature, bulkSelectionActive: this.bulkSelectionActive, splitActive: this.splitActive, enableDragBox: this.enableDragBox, selectFeatureInteraction: this.selectFeatureInteraction, handleSetSelectedFeatureProperties: this.handleSetSelectedFeatureProperties, selectedFeatureCoordinates: this.selectedFeatureCoordinates, selectedFeatureProperties: this.selectedFeatureProperties, enableAddNewFeature: this.enableAddNewFeature, handleGetZoomExtent: this.handleGetZoomExtent, selectedLayers: this.selectedLayers, handleSetSelectedLayers: val => {
+        return (index.h("map-component", { key: 'b5c8898180bce21de249f7d80b471d0b93e60af7', handleSetMapComponent: this.handleSetMapComponent, data: this.data, isGeoJsonFormat: this.isGeoJsonFormat, geoJsonMappingConfig: this.geoJsonMappingConfig, enableZoom: this.enableZoom, mapZoom: this.mapZoom, mapCenter: this.mapCenter, mapHeight: this.mapHeight, crs: this.crs, mapProjection: this.mapProjection, mapDataProjection: this.mapDataProjection, getFilteredMapData: this.getFilteredMapData, getFeatureStyles: this.getFeatureStyles, getSelectedFeatureStyles: this.getSelectedFeatureStyles, filterPanel: this.filterPanel, filterPanelCallback: this.filterPanelCallback, enableTileSelection: this.enableTileSelection, tileLayersOptions: this.tileLayersOptions, defaultTileOptionName: this.defaultTileOptionName, layerOptions: this.layerOptions, initialSelectedLayers: this.initialSelectedLayers, bulkSelectedFeaturesActionPanel: this.bulkSelectedFeaturesActionPanel, handleSetSelectedFeaturesOnBulkSelect: this.handleSetSelectedFeaturesOnBulkSelect, handleSetSelectedFeatureOnSelect: this.handleSetSelectedFeatureOnSelect, filterLayersByRole: this.filterLayersByRole, layerKeys: this.layerKeys, layerKeySeparator: this.layerKeySeparator, user: this.user, layerRoles: this.layerRoles, filteredLayerOptionsByRole: this.filteredLayerOptionsByRole, handleSetFilteredLayerOptionsByRole: this.handleSetFilteredLayerOptionsByRole, readOnlyMap: this.readOnlyMap, enableViewFeature: this.enableViewFeature, handleViewFeature: this.handleViewFeature, bulkSelectionActive: this.bulkSelectionActive, splitActive: this.splitActive, enableDragBox: this.enableDragBox, selectFeatureInteraction: this.selectFeatureInteraction, handleSetSelectedFeatureProperties: this.handleSetSelectedFeatureProperties, selectedFeatureCoordinates: this.selectedFeatureCoordinates, selectedFeatureProperties: this.selectedFeatureProperties, enableAddNewFeature: this.enableAddNewFeature, handleGetZoomExtent: this.handleGetZoomExtent, selectedLayers: this.selectedLayers, handleSetSelectedLayers: val => {
                 this.updateSelectedLayers(val);
-            }, readOnlyLayers: this.readOnlyLayers, additionalOnclosePopover: this.additionalOnclosePopover, popoverPrimaryActions: this.popoverPrimaryActions, popoverMoreIconButtonActions: this.popoverMoreIconButtonActions, getMessagePopover: this.getMessagePopover, getMessageIconPopover: this.getMessageIconPopover, hideMessageIconPopover: this.hideMessageIconPopover, popoverCardConfig: this.cardConfig, popoverWidth: this.popoverWidth, handleGetAdditionalFeaturePropertiesOnSelect: this.handleGetAdditionalFeaturePropertiesOnSelect, minZoom: this.minZoom, maxZoom: this.maxZoom }, this.enableToolbar && (index.h("udp-map-toolbar", { key: 'd62be8bc2f358155b349688ac9ddd27c4ee95594', map: this.map, mapTitle: this.mapTitle, mapProjection: this.mapProjection, getFeatureStyles: this.getFeatureStyles, getSelectedFeatureStyles: this.getSelectedFeatureStyles, filterPanel: this.filterPanel, enableTileSelection: this.enableTileSelection, tileLayersOptions: this.tileLayersOptions, defaultTileOptionName: this.defaultTileOptionName, layerOptions: this.layerOptions, bulkSelectedFeaturesActionPanel: this.bulkSelectedFeaturesActionPanel, handleSetSelectedFeaturesOnBulkSelect: this.handleSetSelectedFeaturesOnBulkSelect, handleRefresh: this.handleRefresh, refreshButtonTooltip: this.refreshButtonTooltip, readOnlyMap: this.readOnlyMap, enableAdd: this.enableAdd, handleAddNewFeatures: this.handleAddNewFeatures, addMultipleFeatures: this.addMultipleFeatures, enableSplitFeature: this.enableSplitFeature, handleSplitFeature: this.handleSplitFeature, handleSetSelectedFeatureProperties: this.handleSetSelectedFeatureProperties, filteredLayerOptionsByRole: this.filteredLayerOptionsByRole, handleSetBulkSelectionActive: this.handleSetBulkSelectionActive, enableDragBox: this.enableDragBox, handleSetEnableDragBox: this.handleSetEnableDragBox, splitActive: this.splitActive, handleSetSplitActive: this.handleSetSplitActive, selectFeatureInteraction: this.selectFeatureInteraction, enableAddNewFeature: this.enableAddNewFeature, handleEnableAddNewFeature: this.handleEnableAddNewFeature, handleSelectLayersCallback: this.handleSelectLayersCallback, selectedLayers: this.selectedLayers, handleSetSelectedLayers: val => {
+            }, readOnlyLayers: this.readOnlyLayers, additionalOnclosePopover: this.additionalOnclosePopover, popoverPrimaryActions: this.popoverPrimaryActions, popoverMoreIconButtonActions: this.popoverMoreIconButtonActions, getMessagePopover: this.getMessagePopover, getMessageIconPopover: this.getMessageIconPopover, hideMessageIconPopover: this.hideMessageIconPopover, popoverCardConfig: this.cardConfig, popoverWidth: this.popoverWidth, handleGetAdditionalFeaturePropertiesOnSelect: this.handleGetAdditionalFeaturePropertiesOnSelect, minZoom: this.minZoom, maxZoom: this.maxZoom }, this.enableToolbar && (index.h("udp-map-toolbar", { key: 'ec72126eedd1bd3a2ed8c800c121c71d46f30b6f', map: this.map, mapTitle: this.mapTitle, mapProjection: this.mapProjection, getFeatureStyles: this.getFeatureStyles, getSelectedFeatureStyles: this.getSelectedFeatureStyles, filterPanel: this.filterPanel, enableTileSelection: this.enableTileSelection, tileLayersOptions: this.tileLayersOptions, defaultTileOptionName: this.defaultTileOptionName, layerOptions: this.layerOptions, bulkSelectedFeaturesActionPanel: this.bulkSelectedFeaturesActionPanel, handleSetSelectedFeaturesOnBulkSelect: this.handleSetSelectedFeaturesOnBulkSelect, handleRefresh: this.handleRefresh, refreshButtonTooltip: this.refreshButtonTooltip, readOnlyMap: this.readOnlyMap, enableAdd: this.enableAdd, handleAddNewFeatures: this.handleAddNewFeatures, addMultipleFeatures: this.addMultipleFeatures, enableSplitFeature: this.enableSplitFeature, handleSplitFeature: this.handleSplitFeature, handleSetSelectedFeatureProperties: this.handleSetSelectedFeatureProperties, filteredLayerOptionsByRole: this.filteredLayerOptionsByRole, handleSetBulkSelectionActive: this.handleSetBulkSelectionActive, enableDragBox: this.enableDragBox, handleSetEnableDragBox: this.handleSetEnableDragBox, splitActive: this.splitActive, handleSetSplitActive: this.handleSetSplitActive, selectFeatureInteraction: this.selectFeatureInteraction, enableAddNewFeature: this.enableAddNewFeature, handleEnableAddNewFeature: this.handleEnableAddNewFeature, handleSelectLayersCallback: this.handleSelectLayersCallback, selectedLayers: this.selectedLayers, handleSetSelectedLayers: val => {
                 this.updateSelectedLayers(val);
-            }, addFeaturePanelConfig: this.addFeaturePanelConfig })), index.h("slot", { key: 'f2753f5f595726febc44235dbc1e728c1763da64' })));
+            }, addFeaturePanelConfig: this.addFeaturePanelConfig })), index.h("slot", { key: '95151f91ba7d6d9483a94b050694a45fccbd9e8c' })));
     }
     static get watchers() { return {
         "enableDragBox": ["watchDragBoxandSelectedFeatureInteraction"],

package/dist/cjs/udp-menu-item.cjs.entry.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var index = require('./index-DrMNAZCL.js');
+
+const udpMenuItemCss = ".menu-item-root{display:flex;width:100%;padding:8px 16px;gap:8px;align-items:center;background:none;border:none;font-family:inherit;text-align:left;cursor:pointer;transition:background-color 0.15s ease-in-out}.menu-item-root:hover:not(:disabled){background-color:rgba(0, 0, 0, 0.08)}.menu-item-label{font-size:14px}.menu-item-root:disabled{cursor:not-allowed;opacity:0.4}.menu-icon{height:100%}";
+
+const UdpMenuItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.itemClick = index.createEvent(this, "itemClick");
+        this.disabled = false; // reflect: true helps with CSS styling
+        this.handleItemClick = (e) => {
+            // if (this.disabled) {
+            //   e.stopPropagation();
+            //   return;
+            // }
+            this.itemClick.emit(e);
+        };
+    }
+    render() {
+        return (index.h("button", { key: 'dc3f3366bf93d6dabda01cb1ee67e80345c99a55', class: "menu-item-root", onClick: this.handleItemClick, disabled: this.disabled, role: "menuitem" }, this.iconName && index.h("udp-icon", { key: 'dd6e4549f441f4b94d18d91e8e760e9411069fd3', iconName: this.iconName, class: "menu-icon" }), index.h("span", { key: '76f1a1a63078c2936e05571b0ea57ccc3924c00d', class: "menu-item-label" }, index.h("unity-typography", { key: 'b419c1ae15058a168659f47c6ac4e65cc5e81b1b', variant: 'body1' }, this.label))));
+    }
+};
+UdpMenuItem.style = udpMenuItemCss;
+
+exports.udp_menu_item = UdpMenuItem;
+//# sourceMappingURL=udp-menu-item.entry.cjs.js.map

package/dist/cjs/udp-menu-item.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"udp-menu-item.entry.cjs.js","sources":["src/components/my-component/UI/menu/menu-item/udp-menu-item.css?tag=udp-menu-item&encapsulation=shadow","src/components/my-component/UI/menu/menu-item/udp-menu-item.tsx"],"sourcesContent":["/* Reset default button styles and apply menu-item look */\n.menu-item-root {\n  display: flex;\n  width: 100%;\n  padding: 8px 16px;\n  gap: 8px;\n  align-items: center;\n\n  /* Reset button defaults */\n  background: none;\n  border: none;\n  font-family: inherit;\n  text-align: left;\n\n  cursor: pointer;\n  transition: background-color 0.15s ease-in-out;\n}\n\n.menu-item-root:hover:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.08);\n}\n\n.menu-item-label {\n  font-size: 14px;\n}\n\n/* The native :disabled pseudo-class is now used */\n.menu-item-root:disabled {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n\n.menu-icon {\n  height: 100%;\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'udp-menu-item',\n  styleUrl: 'udp-menu-item.css',\n  shadow: true,\n})\nexport class UdpMenuItem {\n  @Prop() label: string;\n  @Prop() iconName: string;\n  @Prop({ reflect: true }) disabled: boolean = false; // reflect: true helps with CSS styling\n\n  /**\n   * @deprecated Use itemClick event\n   */\n  @Prop() handleOnClick: (e: Event) => void;\n\n  /** Emits when the item is clicked. */\n  @Event() itemClick: EventEmitter<MouseEvent>;\n\n  private handleItemClick = (e: MouseEvent) => {\n    // if (this.disabled) {\n    //   e.stopPropagation();\n    //   return;\n    // }\n    this.itemClick.emit(e);\n  };\n\n  render() {\n    return (\n      <button\n        class=\"menu-item-root\"\n        onClick={this.handleItemClick}\n        disabled={this.disabled}\n        role=\"menuitem\"\n      >\n        {this.iconName && <udp-icon iconName={this.iconName} class=\"menu-icon\" />}\n        <span class=\"menu-item-label\">\n          <unity-typography variant='body1'>{this.label}</unity-typography>\n        </span>\n      </button>\n    );\n  }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,cAAc,GAAG,4YAA4Y;;MCOtZ,WAAW,GAAA,MAAA;AALxB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQ2B,QAAA,IAAA,CAAA,QAAQ,GAAY,KAAK,CAAC;AAU3C,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,CAAa,KAAI;;;;;AAK1C,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;AACxB,SAAC;AAiBF;IAfC,MAAM,GAAA;AACJ,QAAA,QACEA,qEACE,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EAAA,EAEd,IAAI,CAAC,QAAQ,IAAIA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,WAAW,EAAG,CAAA,EACzEA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC3BA,OAAkB,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,OAAO,EAAE,EAAA,IAAI,CAAC,KAAK,CAAoB,CAC5D,CACA;;;;;;;"}

package/dist/cjs/udp-page.cjs.entry.js

@@ -22,7 +22,7 @@ const UdpPage = class {
             padding: this.padding,
             margin: '0 auto', // Centers the content if max-width is set
         };
-        return (index.h("div", { key: '9a506250a5ee7200c405e7f3fe0a018dda294ab4', style: style }, index.h("slot", { key: 'eea699d0fed23736cfe071b86ac1449a52f51b0f' }), " "));
+        return (index.h("div", { key: '9d70877a7fbe290ad177084f25f3058bf74a8390', style: style }, index.h("slot", { key: '8318769588558d8b958c56a88452d1ea042f97ff' }), " "));
     }
 };
 UdpPage.style = udpPageCss;

package/dist/cjs/udp-pop-over.cjs.entry.js

@@ -0,0 +1,132 @@
+'use strict';
+
+var index = require('./index-DrMNAZCL.js');
+var core = require('@popperjs/core');
+
+const udpPopOverCss = ":host{display:block;position:fixed;z-index:9999;pointer-events:none;opacity:0;transform:scale(0.95);transition:opacity 0.2s ease-out}:host(.is-visible){pointer-events:auto;opacity:1;transform:scale(1)}.popover{background-color:white;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);border:1px solid #e0e0e0}";
+
+const UdpPopOver = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.isOpen = false;
+        this.popoverPlacement = 'bottom-start';
+        this.appendToBody = true;
+        this.overflow = 'auto';
+        this.handleTransitionEnd = () => {
+            // FIX: Only remove from body if it's truly closed and still there.
+            if (!this.isOpen) {
+                if (this.appendToBody && this.hostEl.parentElement === document.body) {
+                    document.body.removeChild(this.hostEl);
+                }
+                else if (this.container && this.hostEl.parentElement === this.container) {
+                    this.container.removeChild(this.hostEl);
+                }
+            }
+            this.destroyPopper();
+        };
+        this.handleKeyDown = (event) => {
+            var _a;
+            if (event.key === 'Escape') {
+                (_a = this.handleOnClose) === null || _a === void 0 ? void 0 : _a.call(this, event);
+            }
+        };
+        this.handleClickOutside = (event) => {
+            var _a;
+            const path = event.composedPath();
+            const anchorEl = this.getAnchorElement();
+            if (path.includes(this.hostEl) || (anchorEl && path.includes(anchorEl))) {
+                return;
+            }
+            (_a = this.handleOnClose) === null || _a === void 0 ? void 0 : _a.call(this, event);
+        };
+    }
+    disconnectedCallback() {
+        this.removeListeners();
+        this.destroyPopper();
+    }
+    handleOpenChange(newValue) {
+        newValue ? this.present() : this.dismiss();
+    }
+    present() {
+        const containerEl = this.getContainer();
+        if (containerEl) {
+            containerEl.appendChild(this.hostEl);
+        }
+        this.addListeners();
+        requestAnimationFrame(() => {
+            this.setupPopper();
+            this.hostEl.classList.add('is-visible');
+        });
+    }
+    dismiss() {
+        this.removeListeners();
+        this.hostEl.classList.remove('is-visible');
+        this.hostEl.addEventListener('transitionend', this.handleTransitionEnd, { once: true });
+    }
+    addListeners() {
+        document.addEventListener('keydown', this.handleKeyDown);
+        setTimeout(() => {
+            if (this.isOpen) {
+                document.addEventListener('click', this.handleClickOutside);
+            }
+        }, 0);
+    }
+    removeListeners() {
+        document.removeEventListener('keydown', this.handleKeyDown);
+        document.removeEventListener('click', this.handleClickOutside);
+    }
+    getAnchorElement() {
+        return typeof this.anchorElement === 'string' ? document.getElementById(this.anchorElement) : this.anchorElement;
+    }
+    getContainer() {
+        if (this.container)
+            return this.container;
+        if (this.appendToBody) {
+            return document.body;
+        }
+        return null;
+    }
+    setupPopper() {
+        const anchorEl = this.getAnchorElement();
+        if (!anchorEl) {
+            console.error('UdpPopover: Anchor element could not be found.');
+            return;
+        }
+        // Ensure we don't create multiple instances
+        if (this.popperInstance) {
+            this.popperInstance.destroy();
+        }
+        this.popperInstance = core.createPopper(anchorEl, this.hostEl, {
+            strategy: 'fixed',
+            placement: this.popoverPlacement,
+            modifiers: [{ name: 'offset', options: { offset: [0, 8] } }, { name: 'preventOverflow', options: { padding: 8 } }, { name: 'flip' }],
+        });
+    }
+    destroyPopper() {
+        if (this.popperInstance) {
+            this.popperInstance.destroy();
+            this.popperInstance = null;
+        }
+    }
+    componentWillLoad() {
+        if (this.isOpen) {
+            this.present();
+        }
+    }
+    render() {
+        const style = {
+            width: this.popoverWidth,
+            maxHeight: this.popoverMaxHeight,
+            overflow: this.overflow
+        };
+        return (index.h(index.Host, { key: '4459a8369eaff06485b83076205de4a2b71b8174' }, index.h("div", { key: '7fbd552e4a485fc2c913202d3c1baa5c68f1a64f', class: "popover", style: style }, index.h("slot", { key: 'a207f724e5941865b0221b28e42883b69e427d25' }))));
+    }
+    get hostEl() { return index.getElement(this); }
+    static get watchers() { return {
+        "isOpen": ["handleOpenChange"]
+    }; }
+};
+UdpPopOver.style = udpPopOverCss;
+
+exports.udp_pop_over = UdpPopOver;
+//# sourceMappingURL=udp-pop-over.entry.cjs.js.map