udp-stencil-component-library 25.18.2-beta.5 → 25.18.2-beta.7

package/dist/esm/numeric-field_5.entry.js

@@ -122,7 +122,7 @@ const NumericField = class {
             'bx--text-input--error': isError,
             'text-field--disabled': this.disabled,
         };
-        return (h(Host, { key: 'efe222e4acc6be9cbb2741e757673f6958e895da', class: {
+        return (h(Host, { key: '5b66f1827ef29b0229c3ae9dddc41f0450ff1bc8', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
@@ -131,9 +131,9 @@ const NumericField = class {
                 'udp-input--readonly': this.readonly,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: '66feb024a13e9c2fb95a386d0e025b15a9fcebb5', class: "bx--form-item" }, h("unity-typography", { key: '65469753637179be15c383bf8f6f819d9b5fdb10', variant: "caption-text" }, h("label", { key: 'cf0f7ddd918efde5aacba18537536bb2dd101e98', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), this.hidden ? (h("input", { id: this.id, type: "hidden", value: this.internalValue, name: this.name })) : (h("input", { id: this.id, name: this.name, type: "number", class: Object.assign({}, inputClass), placeholder: this.placeholder, value: this.internalValue, required: this.required, disabled: this.disabled, readOnly: this.readonly, onFocus: this.onFocus, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, inputMode: this.inputMode, min: this.min, max: this.max, step: this.step,
+            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: '0f3813d731bfddf9c4bd1e92d1353dcdba8ca8db', class: "bx--form-item" }, h("unity-typography", { key: '8f4efdc44e69a5abbba47c09f6ed2219e8a1f967', variant: "caption-text" }, h("label", { key: '80e97e98b7270dc8c0bc14be4a2c0ec509fdb0fd', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), this.hidden ? (h("input", { id: this.id, type: "hidden", value: this.internalValue, name: this.name })) : (h("input", { id: this.id, name: this.name, type: "number", class: Object.assign({}, inputClass), placeholder: this.placeholder, value: this.internalValue, required: this.required, disabled: this.disabled, readOnly: this.readonly, onFocus: this.onFocus, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, inputMode: this.inputMode, min: this.min, max: this.max, step: this.step,
             //@ts-ignore
-            udprecordid: 'udpRecord-number-field-' + this.id })), isError && (h("div", { key: '679fa05b23a7d3a41fb18f3a77859331f6460011', class: "error-message" }, h("unity-typography", { key: 'ea5f43b1356863a2dfe7b76918ddad8d646030a3', variant: "caption-text", color: "error" }, this.errorMessage))))));
+            udprecordid: 'udpRecord-number-field-' + this.id })), isError && (h("div", { key: 'fa3c05e26d05edd9effcc140767d443d781b909a', class: "error-message" }, h("unity-typography", { key: '60ee4505e360a162e85097a15859fc2e65969bc0', variant: "caption-text", color: "error" }, this.errorMessage))))));
     }
     static get watchers() { return {
         "error": ["updateError"],
@@ -352,7 +352,7 @@ const TextArea = class {
     }
     render() {
         const { disabled, id, internalValue, label, placeholder, required, readonly, errorMessage, fullWidth, internalRows } = this;
-        return (h(Host, { key: '8030ffc085d6b53b0ae1a35f81d4da4c9e155c0e', class: {
+        return (h(Host, { key: 'ca17436a4c7b653937f145bb5ad1d6b72d4288f1', class: {
                 'udp-input': true,
                 'udp-input--error': !!errorMessage,
                 'udp-input--disabled': disabled,
@@ -361,11 +361,11 @@ const TextArea = class {
                 'udp-input--required': required,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            } }, h("div", { key: '21806e67cd632ef1c0d141d57c356eaaeb68f098', class: "bx--form-item" }, h("unity-typography", { key: '4094220f657f8cd5fcee94cf60a7d7cd62108ca9', variant: "caption-text" }, h("label", { key: 'fcda510639bd39ad292d9fb4721acac7cc35e456', htmlFor: id, class: "bx--label" }, label, required ? '*' : '')), h("textarea", { key: 'd53d49eed9d2e7a7b342a59ee71215eab199206b', ref: el => (this.textareaEl = el), id: id, class: {
+            } }, h("div", { key: 'a60d4d2d0be6e9185b69f1817e8b12b0fe6d00a3', class: "bx--form-item" }, h("unity-typography", { key: '3d98ead9011fe5591f2e375896dd49ec702fbafc', variant: "caption-text" }, h("label", { key: '6fe1af1670c3c9eca732b6c6a1acf561a18e970e', htmlFor: id, class: "bx--label" }, label, required ? '*' : '')), h("textarea", { key: 'a3993402edfc75d4bb6a7656bac2f4fffef0f154', ref: el => (this.textareaEl = el), id: id, class: {
                 'bx--text-input': true,
                 'bx--text-input--error': !!errorMessage,
                 'text-area--disabled': disabled,
-            }, placeholder: placeholder, value: internalValue, required: required, disabled: disabled, readonly: readonly, maxLength: this.maxCharacter, rows: internalRows, onInput: this.onInput, onChange: this.onChange }, internalValue), errorMessage && (h("div", { key: 'faf6cd4d6bb621416dc36b660581b9a6dc94c057', class: "error-message" }, h("unity-typography", { key: '8433e5d11d1b43358baa1d2a961c4bfa3d7c95a7', variant: "caption-text", color: "error" }, errorMessage))))));
+            }, placeholder: placeholder, value: internalValue, required: required, disabled: disabled, readonly: readonly, maxLength: this.maxCharacter, rows: internalRows, onInput: this.onInput, onChange: this.onChange }, internalValue), errorMessage && (h("div", { key: '0d3e3a857df2cf8eac691db282cf42a97d25fe61', class: "error-message" }, h("unity-typography", { key: '1473a99c0176bc969a782e87f8a19e393b66ddfa', variant: "caption-text", color: "error" }, errorMessage))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -500,7 +500,7 @@ const UdpDateSelector = class {
             classNames.push('bx--text-input--full-width');
         }
         const inputClass = classNames.join(' ');
-        return (h(Host, { key: '6508c42efac96e7db1d320ec4faed15fd849540c', class: {
+        return (h(Host, { key: '059b2399e917f7ebb88d764e25c79853e4e3f01f', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
@@ -509,9 +509,9 @@ const UdpDateSelector = class {
                 'udp-input--required': this.required,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: 'ecd12c48810b985d702ce70ab89e0670f387c257', class: "bx--form-item" }, h("unity-typography", { key: '51a542e4f6c238965fc82312a10beb21386d4ead', variant: "caption-text" }, h("label", { key: 'af6d330c10eb905ee01e53e50d43038d10a0714f', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), h("input", { key: '183af2eb4d561a24098dee7c8eebb2b3436606d2', type: "date", id: this.id, name: this.name, class: inputClass, value: this.internalValue, min: this.min ? this.formatDateForHtml(this.min) : null, max: this.max ? this.formatDateForHtml(this.max) : null, onInput: this.handleDateChange, onChange: this.handleDateChange, onBlur: this.handleBlur, onFocus: this.handleFocus, disabled: this.disabled, readonly: this.readonly, required: this.required,
+            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: 'd32d5ca325b9eec57923dee615fccac31e2a2d3d', class: "bx--form-item" }, h("unity-typography", { key: 'bd4d8d5a65f6db822172d726acf4f901aa173d6b', variant: "caption-text" }, h("label", { key: '980e5f485074b96e7d5893d99cf96cf58181177f', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), h("input", { key: '099b7ff32e63380fca4d46c9ab2c42727d11c250', type: "date", id: this.id, name: this.name, class: inputClass, value: this.internalValue, min: this.min ? this.formatDateForHtml(this.min) : null, max: this.max ? this.formatDateForHtml(this.max) : null, onInput: this.handleDateChange, onChange: this.handleDateChange, onBlur: this.handleBlur, onFocus: this.handleFocus, disabled: this.disabled, readonly: this.readonly, required: this.required,
             //@ts-ignore
-            udprecordid: 'udpRecord-udp-date-selector-' + this.id }), h("unity-typography", { key: '3233342e07981927427787adbc0dc0cad28d302c', class: "error-message", variant: "caption-text", color: "error" }, this.errorMessage))));
+            udprecordid: 'udpRecord-udp-date-selector-' + this.id }), h("unity-typography", { key: '48bdb76b087160ee1904f708b9908c1b625b7995', class: "error-message", variant: "caption-text", color: "error" }, this.errorMessage))));
     }
     static get watchers() { return {
         "error": ["updateError"],
@@ -674,7 +674,7 @@ const UdpDateTimeSelector = class {
             classNames.push('bx--text-input--full-width');
         }
         const inputClass = classNames.join(' ');
-        return (h(Host, { key: '510b2b323027de453c53f54c4f2e07852e704559', class: {
+        return (h(Host, { key: '0eddaf6bead525751f2cbbfbdc6f1e8c9ee2ad60', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
@@ -683,9 +683,9 @@ const UdpDateTimeSelector = class {
                 'udp-input--required': this.required,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: 'fc3b80d9a0613e7c85831183c7e73ee0ea6f5fa8', class: "bx--form-item" }, h("unity-typography", { key: '96d28577fb180ffbd021ff475028c93cd1c10262', variant: "caption-text" }, h("label", { key: '3f7eb4054fd21b7b684e6d0012fe249c5b164b3a', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), h("input", { key: 'e8d1d3f9228b9a49bb3a2a5cd860660d2ed1f6c4', type: "datetime-local", id: this.id, name: this.name, class: inputClass, value: this.internalValue, min: this.min ? this.formatDateForHtml(this.min) : null, max: this.max ? this.formatDateForHtml(this.max) : null, onInput: this.handleDateChange, onBlur: this.handleBlur, onFocus: this.handleFocus, disabled: this.disabled, readonly: this.readonly, required: this.required,
+            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: '6e19a9481e654fde525031375c99013dc48c9a98', class: "bx--form-item" }, h("unity-typography", { key: 'f6c2b1855a412810762d485ec33adffa116f5a9a', variant: "caption-text" }, h("label", { key: 'c2660d82ad87c0cecc1cd46cefcb4f5ad37e28f7', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), h("input", { key: 'c6f0a8d49ae387a193bb47d4de1748d8fe1d41a7', type: "datetime-local", id: this.id, name: this.name, class: inputClass, value: this.internalValue, min: this.min ? this.formatDateForHtml(this.min) : null, max: this.max ? this.formatDateForHtml(this.max) : null, onInput: this.handleDateChange, onBlur: this.handleBlur, onFocus: this.handleFocus, disabled: this.disabled, readonly: this.readonly, required: this.required,
             //@ts-ignore
-            udprecordid: 'udpRecord-udp-datetime-selector-' + this.id }), h("unity-typography", { key: '6a3b75c91e17283f5e36a782735d5b09eb927aee', class: "error-message", variant: "caption-text", color: "error" }, this.errorMessage))));
+            udprecordid: 'udpRecord-udp-datetime-selector-' + this.id }), h("unity-typography", { key: 'ebefdc4a695d374c63dd6e62ba1602bf7389e9c2', class: "error-message", variant: "caption-text", color: "error" }, this.errorMessage))));
     }
     static get watchers() { return {
         "error": ["updateError"],
@@ -919,7 +919,7 @@ const UdpTimeSelector = class {
             classNames.push('bx--text-input--full-width');
         }
         const inputClass = classNames.join(' ');
-        return (h(Host, { key: 'd2249c774eaa3b6e0e9423581083d59b1bfc4336', class: {
+        return (h(Host, { key: 'b926488bd2c3d8bc4223cf3583dcb88ecdd39395', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
@@ -928,9 +928,9 @@ const UdpTimeSelector = class {
                 'udp-input--required': this.required,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: 'fe18b74861a9f5d1739317bbd357cce48ac81176', class: "bx--form-item" }, h("unity-typography", { key: '5afab9726865da75b9b4f228ecd0ad553825a40a', variant: "caption-text" }, h("label", { key: '46ff7f80e88357c25d86ac11a8835733bf19853e', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), h("input", { key: 'e74de46ca5f386f91320f16af6f5b5fa9d61a9cf', type: "time", id: this.id, name: this.name, class: inputClass, value: this.internalValue, min: this.min, max: this.max, onInput: this.handleTimeInput, onChange: this.handleTimeChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onInvalid: this.handleInvalid, disabled: this.disabled, readonly: this.readonly, required: this.required,
+            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: 'ba157e23a87f0a3cdf29b4f0e6dc4c3182d9dfee', class: "bx--form-item" }, h("unity-typography", { key: '92bbe45ec95441bc92699cdc4b08d7bd3599d645', variant: "caption-text" }, h("label", { key: 'ff966556d6d5d6cd7bf501d527bc78e4c4e631eb', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), h("input", { key: 'ea13d4b4853f7338ce576aaba30b74d834ab77ca', type: "time", id: this.id, name: this.name, class: inputClass, value: this.internalValue, min: this.min, max: this.max, onInput: this.handleTimeInput, onChange: this.handleTimeChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onInvalid: this.handleInvalid, disabled: this.disabled, readonly: this.readonly, required: this.required,
             //@ts-ignore
-            udprecordid: 'udpRecord-udp-time-selector-' + this.id }), h("unity-typography", { key: 'd1ec82959fd633a6a297a1cd3523432454afec52', class: "error-message", variant: "caption-text", color: "error" }, this.errorMessage))));
+            udprecordid: 'udpRecord-udp-time-selector-' + this.id }), h("unity-typography", { key: 'b3124e90f0b568f668c4a49afa4b1d4afe70bccc', class: "error-message", variant: "caption-text", color: "error" }, this.errorMessage))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/primary-action-header.udp-tabs.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"primary-action-header.udp-tabs.entry.js","sources":["src/components/data-display/primary-action-header/primary-action-header.css?tag=primary-action-header&encapsulation=shadow","src/components/data-display/primary-action-header/primary-action-header.tsx","src/components/tabs/tab/tabs/udp-tabs.css?tag=udp-tabs&encapsulation=shadow","src/components/tabs/tab/tabs/udp-tabs.tsx"],"sourcesContent":["/* grid-primary-bar.css */\n:host {\n  display: block;\n  font-family: var(--font-family-base, sans-serif); \n  background-color: var(--primary-action-header-background, #ffffff);\n  color: var(--primary-action-header-text-color, rgba(0, 0, 0, 0.87));\n  box-shadow: var(--primary-action-header-shadow, 0px 2px 4px -1px rgba(0,0,0,0.2));\n  height: var(--primary-action-header-height, 48px);\n  padding: var(--primary-action-header-padding, 0 var(--spacing-04));\n  box-sizing: border-box;\n}\n\n.header-bar {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n\n.title-section {\n  flex-shrink: 0;\n  margin-right: var(--spacing-md, 16px);\n}\n\n/* Tabs are not fully supported yet - this is leftover from work Greg did with Mindscope */\n.tabs {\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n  align-items: stretch;\n  min-width: 0;\n}\n\n.tabs udp-tabs {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n}\n\n.tabs udp-tabs::part(tab-list) {\n  /* This rule targets the 'tab-list' part within the udp-tabs component's shadow DOM. */\n  /* It's a placeholder for any specific styling needed for the tab list container itself. */\n  /* For example: display: flex; align-items: stretch; height: 100%; */\n}\n\n.tabs udp-tabs button {\n  padding: 0 16px;\n  margin: 0 var(--spacing-xxs, 4px);\n  height: 100%;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  font-size: var(--font-size-sm, 0.875rem);\n  color: var(--text-color-secondary, rgba(0, 0, 0, 0.6));\n  text-transform: uppercase;\n  font-weight: var(--font-weight-medium, 500);\n  border-bottom: 2px solid transparent;\n  transition: color 0.3s ease, border-bottom-color 0.3s ease;\n}\n\n.tabs udp-tabs button:hover {\n  color: var(--primary-color-hover, var(--primary-color, #1976d2));\n}\n\n.tabs udp-tabs button.active {\n  color: var(--primary-color, #1976d2);\n  border-bottom: 2px solid var(--primary-color, #1976d2);\n}\n\n.button-section {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  gap: var(--spacing-sm, 8px);\n}\n\n.button-section stencil-icon-button {\n  color: var(--primary-action-header-icon-color, var(--text-color-primary, rgba(0, 0, 0, 0.54)));\n}\n\n.button-section stencil-icon-button:hover {\n  background-color: rgba(0,0,0,0.04);\n}\n\n\n.button-section custom-button {\n  /* Styles for the primary action button */\n  /* You might want to use your design system's button styles here */\n  /* Example: margin-left: var(--spacing-sm, 8px); */\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport iconMapping from '../icons/iconMapping';\n\n@Component({\n  tag: 'primary-action-header',\n  styleUrl: 'primary-action-header.css',\n  shadow: true,\n})\nexport class PrimaryActionHeader {\n  @Prop() title: string;\n  @Prop() hiddenActionButtons: string[] = [];\n  @Prop() hiddenLabels: string[] = [];\n  @Prop() actionButtons: any[] = [];\n  @Prop() defaultActionButtons: any[] = [];\n  @Prop() customSaveViewClick?: (event?: MouseEvent) => void;\n  @Prop() customSizeToFitClick?: (event?: MouseEvent) => void;\n  @Prop() customExportClick?: (event?: MouseEvent) => void;\n  @Prop() primaryActionClick?: (event?: MouseEvent) => void;\n  @Prop() customColumnViewClick?: (event?: MouseEvent) => void;\n  @Prop() customFitColumnClick?: (event?: MouseEvent) => void;\n  @Prop() customFilterViewClick?: (event?: MouseEvent) => void;\n  @Prop() customClearClick?: (event?: MouseEvent) => void;\n  @Prop() customExpandClick?: (event?: MouseEvent) => void;\n  @Prop() customShowViewClick?: (event?: MouseEvent) => void;\n  @Prop() activeTabIndex: number;\n  @Prop() selectTab: (index: number) => void;\n  @Prop() tabs: boolean = true;\n  @Prop() actionButtonLabel: string = '';\n  //   @State() activeTabIndex: number = 0;\n\n  getIconComponent(icon: string | Function, customIcon: Function) {\n    if (customIcon) {\n      return customIcon;\n    }\n\n    if (typeof icon === 'string') {\n      return iconMapping[icon];\n    }\n\n    return icon;\n  }\n\n  renderIcon(ActualIcon: any) {\n    if (ActualIcon && ActualIcon.elem === 'svg') {\n      return (\n        <svg {...ActualIcon.attrs}>\n          {ActualIcon.content.map((content: any, index: number) => {\n            return <path key={index} {...content.attrs} />;\n          })}\n        </svg>\n      );\n    }\n    return null;\n  }\n\n  //   selectTab(index: number) {\n  //     this.activeTabIndex = index;\n  //   }\n\n  render() {\n    console.log('active tab', this.activeTabIndex);\n\n    return (\n      <div class=\"header-bar\">\n        <div class=\"title-section\">\n          <unity-typography variant=\"h4\">{this.title}</unity-typography>\n        </div>\n\n        {/* IMPORTANT: NEED TO ADD A TABS COMPONENT SUPPORT - This is from work Greg did for mindscope demo */}\n        {this.tabs && (\n          <div class=\"tabs\">\n            <udp-tabs>\n              <button class={this.activeTabIndex === 0 ? 'active' : ''} slot=\"tab-title\" onClick={() => this.selectTab(0)}>\n                Demo Grid\n              </button>\n              <button class={this.activeTabIndex === 1 ? 'active' : ''} slot=\"tab-title\" onClick={() => this.selectTab(1)}>\n                Other Content\n              </button>\n            </udp-tabs>\n          </div>\n        )}\n\n        <div class=\"button-section\">\n          {this.defaultActionButtons.map(btn => {\n            // Determine the actual icon to use\n            const ActualIcon = this.getIconComponent(btn.icon, btn.customIcon);\n\n            const clickHandler = (event?: MouseEvent) => {\n              if (btn.clickHandler) {\n                btn.clickHandler(event);\n              } else {\n                console.log(`${btn.label} Clicked but no custom handler defined`);\n              }\n            };\n\n            if (!this.hiddenActionButtons.includes(btn.label) && btn.visible) {\n              return (\n                <stencil-icon-button secondary={btn.secondary} onClick={clickHandler} tooltip={btn.tooltip}>\n                  {/* Render icon directly */}\n                  {this.renderIcon(ActualIcon)}\n\n                  {/* Show label if it's not hidden and should be shown */}\n                  {!this.hiddenLabels.includes(btn.label) && btn.showLabel && <span>{btn.label}</span>}\n                </stencil-icon-button>\n              );\n            }\n            return null;\n          })}\n          {!this.actionButtonLabel && <div class=\"right-margin\" />}\n\n          {this.actionButtonLabel && (\n            <udp-button variant=\"contained\" color=\"secondary\" onClick={event => this.primaryActionClick(event)}>\n              {this.actionButtonLabel}\n            </udp-button>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n",".tab-container {\n  display: flex;\n  flex-direction: column;\n}\n\n.tab-header {\n  background-color: #ffffff;\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.tab-scroll-container {\n  display: flex;\n  position: relative;\n  overflow-x: auto;\n  overflow-y: hidden;\n  flex: 1;\n  min-width: 0;\n}\n\n.tab-scroll-container::-webkit-scrollbar {\n  height: 4px;\n}\n.tab-scroll-container::-webkit-scrollbar-track {\n  background: transparent;\n}\n.tab-scroll-container::-webkit-scrollbar-thumb {\n  background-color: rgba(0, 0, 0, 0.2);\n  border-radius: 4px;\n}\n.tab-scroll-container::-webkit-scrollbar-thumb:hover {\n  background-color: rgba(0, 0, 0, 0.3);\n}\n\n.tab-header::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 1px;\n  background-color: var(--divider-color, #e0e0e0);\n}\n\n/* This is the base style for tab buttons */\n.tab-header button {\n  padding: 16px;\n  font-size: 14px;\n  text-align: center;\n  border: none;\n  background: none;\n  cursor: pointer;\n  outline: none;\n  transition: all 0.22s ease;\n  color: #555555;;\n  font-weight: 600;\n  opacity: 0.9;\n  white-space: nowrap;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n\n.tab-header.fill .tab-scroll-container {\n  width: 100%;\n}\n.tab-header.fill .tab-scroll-container button {\n  flex-grow: 1;\n}\n\n.tab-header button.active {\n  color: var(--secondary-color, #344861);\n  opacity: 1.0;\n}\n\n.tab-header button.scroll-arrow {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 40px;\n  padding: 0;\n\n  background: #ffffff;\n  cursor: pointer;\n  font-size: 16px;\n  font-weight: bold;\n  color: #757575;\n  z-index: 2;\n  transition: color 0.2s ease;\n\n  flex-shrink: 0;\n  opacity: 1;\n  gap: 0;\n}\n\n.tab-header button.scroll-arrow:hover {\n  color: #000;\n}\n\n.tab-header button.scroll-arrow.left {\n  left: 0;\n}\n\n.tab-header button.scroll-arrow.right {\n  right: 0;\n\n}\n\n.scroll-fade {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 30px;\n  z-index: 1;\n  pointer-events: none;\n}\n\n.scroll-fade.left {\n  left: 40px;\n  background: linear-gradient(\n    to right,\n    #ffffff,\n    rgba(255, 255, 255, 0)\n  );\n}\n\n.scroll-fade.right {\n  right: 40px;\n  background: linear-gradient(\n    to left,\n    #ffffff,\n    rgba(255, 255, 255, 0)\n  );\n}\n\n.tab-header button udp-icon {\n  font-size: 1.2em;\n  line-height: 1;\n}\n\n.tab-header button.icon-start {\n  flex-direction: row;\n}\n.tab-header button.icon-end {\n  flex-direction: row-reverse;\n}\n.tab-header button.icon-top {\n  flex-direction: column;\n  gap: 4px;\n}\n.tab-header button.icon-bottom {\n  flex-direction: column-reverse;\n  gap: 4px;\n}\n\n.slider {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  height: 2px;\n  background-color: var(--secondary-color, #344861);\n\n  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),\n    width 0.22s cubic-bezier(0.4, 0, 0.2, 1);\n  z-index: 1;\n}\n\n.tab-header button.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.tab-header button.disabled.active {\n  color: #757575;\n  opacity: 0.5;\n}\n","import { Component, h, State, Element, Watch, Listen, Prop, Event, EventEmitter } from '@stencil/core';\n\ninterface TabDetail {\n  label: string;\n  icon?: string;\n  iconPlacement?: 'start' | 'end' | 'top' | 'bottom';\n  hidden?: boolean;\n  disabled?: boolean;\n}\n\n@Component({\n  tag: 'udp-tabs',\n  styleUrl: 'udp-tabs.css',\n  shadow: true,\n})\nexport class UdpTabs {\n  @Element() el: HTMLElement;\n\n  /**\n   * Specifies the layout variant of the tab header.\n   *\n   * - `'standard'`: Tabs will be sized based on their content.\n   * - `'fill'`: Tabs will stretch to fill the available horizontal space.\n   */\n  @Prop() variant: 'fill' | 'standard' = 'fill';\n\n  /**\n   * (Controlled) The index of the currently active tab.\n   * If this prop is provided, the component will be in \"controlled\" mode.\n   * The parent must listen for `udpTabChange` to update this value.\n   */\n  @Prop() value?: number;\n\n  /**\n   * (Optional) An array of tab configuration objects.\n   * If provided, this will be used to render tabs instead of slotted `<udp-tab>` components.\n   * This mode is typically used with controlled tabs.\n   */\n  @Prop() tabs: TabDetail[] = [];\n\n  /**\n   * (Controlled) Emits the index of the tab that was clicked.\n   * This is only emitted in \"controlled\" mode (when `value` is provided).\n   */\n  @Event() udpTabChange: EventEmitter<number>;\n\n  @State() internalActiveTab: number = 0; // For uncontrolled mode\n  @State() tabDetails: TabDetail[] = []; // Unified details from prop or slot\n  @State() sliderStyle: { width: string; transform: string } = {\n    width: '0',\n    transform: 'translateX(0)',\n  };\n  @State() showScrollLeft: boolean = false;\n  @State() showScrollRight: boolean = false;\n\n  private slottedTabs: HTMLUdpTabElement[] = []; // Renamed from `tabs`\n  private buttonRefs: HTMLButtonElement[] = [];\n  private scrollContainerRef?: HTMLDivElement;\n\n  /**\n   * Returns true if the component is in controlled mode.\n   */\n  private get isControlled(): boolean {\n    return this.value != null;\n  }\n\n  /**\n   * Returns true if tabs are being provided by the `tabs` prop.\n   */\n  private get useTabsProp(): boolean {\n    return this.tabs && this.tabs.length > 0;\n  }\n\n  /**\n   * Returns the currently active tab index,\n   * respecting controlled or uncontrolled mode.\n   */\n  private get activeTab(): number {\n    return this.isControlled ? this.value : this.internalActiveTab;\n  }\n\n  @Listen('slotchange')\n  handleSlotChange() {\n    // If we're using the tabs prop, slot changes are irrelevant\n    if (this.useTabsProp) return;\n    this.initializeTabs();\n  }\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\n    requestAnimationFrame(() => {\n      this.updateSliderPosition();\n      this.checkScroll();\n    });\n  }\n\n  componentDidLoad() {\n    this.initializeTabs();\n  }\n\n  /**\n   * Watcher for uncontrolled state changes.\n   */\n  @Watch('internalActiveTab')\n  onActiveTabChange(newValue: number) {\n    this.updateActiveTabs();\n    this.updateSliderPosition();\n    this.scrollTabIntoView(newValue);\n  }\n\n  /**\n   * Watcher for controlled state changes.\n   */\n  @Watch('value')\n  onValueChange(newValue: number) {\n    this.updateActiveTabs();\n    this.updateSliderPosition();\n    this.scrollTabIntoView(newValue);\n  }\n\n  /**\n   * Watcher for tabs prop changes.\n   */\n  @Watch('tabs')\n  onTabsPropChange() {\n    this.initializeTabs();\n  }\n\n  @Watch('variant')\n  onVariantChange() {\n    requestAnimationFrame(() => {\n      this.updateSliderPosition();\n      this.checkScroll();\n    });\n  }\n\n  private initializeTabs() {\n    this.buttonRefs = [];\n\n    if (this.useTabsProp) {\n      // --- Prop-based ---\n      this.tabDetails = this.tabs.map(t => ({ ...t })); // Use data from prop\n      this.slottedTabs = []; // Ensure we're not tracking slotted tabs\n    } else {\n      // --- Slot-based ---\n      this.slottedTabs = Array.from(this.el.children).filter(\n        (child): child is HTMLUdpTabElement => child.tagName.toLowerCase() === 'udp-tab',\n      );\n\n      this.tabDetails = this.slottedTabs.map(tab => ({\n        label: tab.label,\n        icon: tab.icon,\n        iconPlacement: tab.iconPlacement,\n        hidden: tab.hidden,\n        disabled: tab.disabled,\n      }));\n    }\n\n    // --- Common Logic ---\n    // In uncontrolled mode, check if the default active tab is invalid.\n    if (!this.isControlled) {\n      if (this.tabDetails[this.internalActiveTab]?.hidden || this.tabDetails[this.internalActiveTab]?.disabled) {\n        const firstValidIndex = this.tabDetails.findIndex(tab => !tab.hidden && !tab.disabled);\n        this.internalActiveTab = firstValidIndex > -1 ? firstValidIndex : 0;\n      }\n    }\n\n    this.updateActiveTabs();\n\n    requestAnimationFrame(() => {\n      this.updateSliderPosition();\n      this.checkScroll();\n    });\n  }\n\n  private updateActiveTabs() {\n    // Only update slotted tabs if we're in slot mode\n    if (!this.useTabsProp) {\n      const currentActiveTab = this.activeTab;\n      this.slottedTabs.forEach((tab, index) => {\n        tab.active = index === currentActiveTab;\n      });\n    }\n    // If in prop mode, the <button> 'active' class is handled by render()\n  }\n\n  private updateSliderPosition() {\n    const activeButton = this.buttonRefs[this.activeTab]; // Use getter\n    if (!activeButton) {\n      this.sliderStyle = { width: '0px', transform: 'translateX(0px)' };\n      return;\n    }\n\n    this.sliderStyle = {\n      width: `${activeButton.offsetWidth}px`,\n      transform: `translateX(${activeButton.offsetLeft}px)`,\n    };\n  }\n\n  private checkScroll() {\n    if (!this.scrollContainerRef) return;\n    const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainerRef;\n    const isOverflowing = scrollWidth > clientWidth;\n    this.showScrollLeft = isOverflowing && scrollLeft > 1;\n    this.showScrollRight = isOverflowing && scrollLeft < scrollWidth - clientWidth - 1;\n  }\n\n  private tabClicked(tabIndex: number) {\n    if (this.tabDetails[tabIndex]?.disabled) {\n      return;\n    }\n\n    if (this.isControlled) {\n      // In controlled mode, emit the event for the parent to handle.\n      // The `onValueChange` watcher will handle UI updates when the prop changes.\n      this.udpTabChange.emit(tabIndex);\n    } else {\n      // In uncontrolled mode, update state directly.\n      // The `onActiveTabChange` watcher will handle UI updates.\n      this.internalActiveTab = tabIndex;\n    }\n  }\n\n  private scrollTabIntoView(tabIndex: number) {\n    const tabButton = this.buttonRefs[tabIndex];\n    const container = this.scrollContainerRef;\n\n    if (!tabButton || !container) return;\n\n    const { scrollLeft, clientWidth } = container;\n    const tabLeft = tabButton.offsetLeft;\n    const tabRight = tabLeft + tabButton.offsetWidth;\n\n    const safeZonePadding = 70;\n    const safeZoneLeft = scrollLeft + safeZonePadding;\n    const safeZoneRight = scrollLeft + clientWidth - safeZonePadding;\n\n    if (tabLeft < safeZoneLeft) {\n      container.scrollTo({\n        left: tabLeft - safeZonePadding,\n        behavior: 'smooth',\n      });\n    } else if (tabRight > safeZoneRight) {\n      container.scrollTo({\n        left: tabRight - clientWidth + safeZonePadding,\n        behavior: 'smooth',\n      });\n    }\n  }\n\n  private scrollToStart() {\n    if (!this.scrollContainerRef) return;\n    this.scrollContainerRef.scrollTo({ left: 0, behavior: 'smooth' });\n  }\n\n  private scrollToEnd() {\n    if (!this.scrollContainerRef) return;\n    const container = this.scrollContainerRef;\n    const { scrollWidth, clientWidth } = container;\n    const maxScrollLeft = scrollWidth - clientWidth;\n    container.scrollTo({ left: maxScrollLeft, behavior: 'smooth' });\n  }\n\n  render() {\n    const currentActiveTab = this.activeTab; // Use getter\n\n    return (\n      <div class=\"tab-container\">\n        <div class={`tab-header ${this.variant}`}>\n          {this.showScrollLeft && (\n            <button\n              class=\"scroll-arrow left\"\n              onClick={() => this.scrollToStart()}\n              aria-label=\"Scroll to first tab\"\n            >\n              <udp-icon iconName=\"chevronLeft16\" color=\"inherit\" />\n            </button>\n          )}\n\n          {this.showScrollLeft && <div class=\"scroll-fade left\"></div>}\n\n          <div\n            class=\"tab-scroll-container\"\n            ref={el => (this.scrollContainerRef = el)}\n            onScroll={() => this.checkScroll()}\n          >\n            {this.tabDetails.map((tab, index) => {\n              if (tab.hidden) {\n                return null;\n              }\n\n              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n              const iconEl = tab.icon ? <udp-icon iconName={tab.icon} color={'inherit'} /> : null;\n              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n              const labelEl = <span>{tab.label}</span>;\n\n              return (\n                <button\n                  class={{\n                    'active': index === currentActiveTab,\n                    'has-icon': !!tab.icon,\n                    [`icon-${tab.iconPlacement}`]: !!tab.icon,\n                    'disabled': tab.disabled,\n                  }}\n                  disabled={tab.disabled}\n                  onClick={() => this.tabClicked(index)}\n                  role=\"tab\"\n                  aria-selected={index === currentActiveTab ? 'true' : 'false'}\n                  aria-disabled={tab.disabled ? 'true' : 'false'}\n                  ref={el => (this.buttonRefs[index] = el)}\n                >\n                  {iconEl}\n                  {labelEl}\n                </button>\n              );\n            })}\n\n            <div class=\"slider\" style={this.sliderStyle}></div>\n          </div>\n\n          {this.showScrollRight && <div class=\"scroll-fade right\"></div>}\n\n          {this.showScrollRight && (\n            <button\n              class=\"scroll-arrow right\"\n              onClick={() => this.scrollToEnd()}\n              aria-label=\"Scroll to last tab\"\n            >\n              <udp-icon iconName=\"chevronRight16\" color=\"inherit\" />\n            </button>\n          )}\n        </div>\n\n        {!this.isControlled && !this.useTabsProp && (\n          <div>\n            <slot></slot>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/{primary-action-header_3.entry.js → primary-action-header_2.entry.js}

@@ -1,6 +1,5 @@
 import { r as registerInstance, h, c as createEvent, a as getElement } from './index-CaZq3YdB.js';
 import { i as iconMapping } from './iconMapping-CPerGeNF.js';
-import Close24 from '@carbon/icons/es/close/24';
 import '@carbon/icons/es/add/16';
 import '@carbon/icons/es/add/32';
 import '@carbon/icons/es/add--alt/16';
@@ -10,6 +9,7 @@ import '@carbon/icons/es/attachment/16';
 import '@carbon/icons/es/batch-job/16';
 import '@carbon/icons/es/box/16';
 import '@carbon/icons/es/close/16';
+import '@carbon/icons/es/close/24';
 import '@carbon/icons/es/close/32';
 import '@carbon/icons/es/close--filled/16';
 import '@carbon/icons/es/close--outline/16';
@@ -146,263 +146,6 @@ const PrimaryActionHeader = class {
 };
 PrimaryActionHeader.style = primaryActionHeaderCss;
 
-const udpSideSheetCss = ":host{position:fixed;top:0;left:0;width:0;height:0;overflow:hidden;transform:translate(0);z-index:9999;visibility:hidden;transition:visibility 0s 0.2s, width 0s 0.2s, height 0s 0.2s}:host(.is-visible){width:100vw;height:100vh;overflow:visible;visibility:visible;transition-delay:0s}.backdrop{background:rgba(0, 0, 0, 0.5);width:100%;height:100%;position:fixed;top:0;left:0;opacity:0;transition:opacity 0.2s ease-in-out}:host(.is-visible) .backdrop{opacity:1}.sheet{background:white;height:100vh;position:fixed;top:0;display:flex;flex-direction:column;box-shadow:0 0 4px rgba(0, 0, 0, 0.3);transition:transform 0.2s ease-in-out;width:100%}.sheet.right{right:0;transform:translateX(100%)}.sheet.left{left:0;transform:translateX(-100%)}:host(.is-visible) .sheet{transform:translateX(0)}.sheet.sm{max-width:360px}.sheet.md{max-width:600px}.sheet.lg{max-width:960px}.sheet.full{max-width:100%}.sheet.custom-width{}.title-container{display:flex;justify-content:space-between;align-items:center;flex-shrink:0;box-shadow:var(--elevation-01, 0 4px 8px rgba(0, 0, 0, 0.1));gap:var(--spacing-02)}.title-text{flex-grow:1;text-align:left;}.close-button{flex-shrink:0}.header-action-button{flex-shrink:0;display:flex;align-items:center;gap:var(--spacing-02, 4px);padding:var(--spacing-03, 8px) var(--spacing-03, 8px) var(--spacing-03, 8px) 0}.content{overflow-y:auto;flex-grow:1;background-color:var(--gray-01)}.content.padding{padding:var(--spacing-05, 24px)}.footer{padding:var(--spacing-03, 8px);box-shadow:var(--elevation-01, 0 4px 8px rgba(0, 0, 0, 0.1));display:flex;justify-content:flex-end;flex-shrink:0;width:100%;gap:var(--spacing-02, 4px);align-items:center}.footer.secondary-button-overflow{flex-direction:row-reverse}.footer-secondary-buttons-container{flex-grow:2;width:100%}.footer-secondary-buttons{display:flex;justify-content:flex-end;gap:var(--spacing-02, 4px);align-items:center}.footer-secondary-buttons.secondary-button-overflow{flex-grow:1}.loader-container{height:4px;width:100%;background-color:var(--gray-01)}.loader-container udp-linear-loader{visibility:hidden;opacity:0;transition:none}.loader-container udp-linear-loader.is-loading{visibility:visible;opacity:1;}";
-
-const UdpSideSheet = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.udpSideSheetClose = createEvent(this, "udpSideSheetClose");
-        this.udpPrimaryButtonClick = createEvent(this, "udpPrimaryButtonClick");
-        this.udpHeaderActionButtonClick = createEvent(this, "udpHeaderActionButtonClick");
-        /** When true, the side sheet is open and visible */
-        this.open = false;
-        /** Position of the sheet on the screen */
-        this.position = 'right';
-        /** Width preset or a numeric pixel width */
-        this.width = 'md';
-        /** Controls whether default inner padding is applied */
-        this.padding = true;
-        /** When true, shows a top loader */
-        this.loading = false;
-        /** Whether the header action button is disabled */
-        this.headerActionButtonDisabled = false;
-        /** Whether the primary footer button is disabled */
-        this.primaryButtonDisabled = false;
-        /** Whether the footer should show the overflow "More" button */
-        this.showOverflowButton = false;
-        /** Whether the overflow popover is open */
-        this.openOverflowMenu = false;
-        this.visibleSecondaryButtons = [];
-        this.overflowSecondaryButtons = [];
-        /** Saved original document.body.overflow value to restore on close */
-        this.originalBodyOverflow = '';
-        /** Saved original document.body.paddingRight value to restore on close */
-        this.originalBodyPaddingRight = '';
-        /**
-         * Transition end handler used to remove the host element from body after close.
-         *
-         * @private
-         */
-        this.handleTransitionEnd = () => {
-            if (!this.open && this.hostEl.parentElement === document.body) {
-                document.body.removeChild(this.hostEl);
-            }
-        };
-        /**
-         * Close the side sheet and emit close event.
-         *
-         * @private
-         */
-        this.onClose = () => {
-            this.open = false;
-            this.udpSideSheetClose.emit();
-        };
-        /**
-         * Backdrop click handler. Only closes when clicking the backdrop itself.
-         *
-         * @param e - MouseEvent from the backdrop click
-         * @private
-         */
-        this.onCloseBackdrop = (e) => {
-            if (e.target === e.currentTarget) {
-                this.onClose();
-            }
-        };
-        /**
-         * Emit primary footer button click event.
-         *
-         * @private
-         */
-        this.onPrimaryButtonClick = () => {
-            this.udpPrimaryButtonClick.emit();
-        };
-        /**
-         * Emit header action button click event.
-         *
-         * @private
-         */
-        this.onHeaderActionButtonClick = () => {
-            this.udpHeaderActionButtonClick.emit();
-        };
-        /**
-         * Open overflow menu anchored to the clicked element.
-         *
-         * @param event - MouseEvent from the "More" button click
-         * @private
-         */
-        this.onMoreActionButtonClick = (event) => {
-            this.overflowMenuAnchor = event.currentTarget;
-            this.openOverflowMenu = true;
-        };
-        /**
-         * Close the overflow popover.
-         *
-         * @param e - optional KeyboardEvent or MouseEvent (unused)
-         * @private
-         */
-        this.handleCloseOverflowMenu = () => {
-            this.openOverflowMenu = false;
-        };
-    }
-    /**
-     * Watcher for `open` prop. Handles portal append/removal and body scroll lock.
-     *
-     * @param newValue - new value of the `open` prop
-     * @param oldValue - previous value of the `open` prop
-     */
-    handleOpenChange(newValue, oldValue) {
-        if (newValue === oldValue) {
-            return;
-        }
-        if (newValue) {
-            // Calculate scrollbar width before hiding it
-            const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-            // Save original values
-            this.originalBodyOverflow = document.body.style.overflow;
-            this.originalBodyPaddingRight = document.body.style.paddingRight;
-            document.body.appendChild(this.hostEl);
-            // Add padding to compensate for scrollbar
-            if (scrollbarWidth > 0) {
-                const currentPadding = parseInt(window.getComputedStyle(document.body).paddingRight) || 0;
-                document.body.style.paddingRight = `${currentPadding + scrollbarWidth}px`;
-            }
-            document.body.style.overflow = 'hidden';
-            requestAnimationFrame(() => {
-                this.hostEl.classList.add('is-visible');
-                // Check overflow after the side sheet is visible
-                setTimeout(() => this.checkOverflow(), 50);
-            });
-        }
-        else {
-            this.hostEl.classList.remove('is-visible');
-            document.body.style.overflow = this.originalBodyOverflow;
-            document.body.style.paddingRight = this.originalBodyPaddingRight;
-            this.hostEl.addEventListener('transitionend', this.handleTransitionEnd, { once: true });
-        }
-    }
-    /**
-     * Watcher for footer secondary buttons changes. Triggers overflow recalculation.
-     */
-    handleSecondaryButtonsChange() {
-        // Recheck overflow when buttons change
-        setTimeout(() => this.checkOverflow(), 50);
-    }
-    /**
-     * Measures footer buttons in an offscreen container and sets `showOverflowButton`.
-     * Safely returns early if required refs are unavailable.
-     */
-    checkOverflow() {
-        if (!this.footerRef || !this.measurementContainerRef) {
-            return;
-        }
-        if (!this.footerSecondaryButtons || this.footerSecondaryButtons.length === 0) {
-            this.showOverflowButton = false;
-            return;
-        }
-        // Get the footer container width (minus padding)
-        const footerWidth = this.footerRef.offsetWidth;
-        const footerStyle = window.getComputedStyle(this.footerRef);
-        const footerPaddingLeft = parseFloat(footerStyle.paddingLeft);
-        const footerPaddingRight = parseFloat(footerStyle.paddingRight);
-        const availableWidth = footerWidth - footerPaddingLeft - footerPaddingRight;
-        // Measure all buttons in the hidden measurement container
-        const measurementButtons = this.measurementContainerRef.querySelectorAll('udp-button');
-        let totalWidth = 0;
-        measurementButtons.forEach((button, index) => {
-            const buttonWidth = button && button instanceof HTMLElement ? button.offsetWidth : 0;
-            totalWidth += buttonWidth;
-            // Add gap spacing between buttons (except for the last one)
-            if (index < measurementButtons.length - 1) {
-                const containerStyle = window.getComputedStyle(this.measurementContainerRef);
-                const gap = parseFloat(containerStyle.gap) || 4; // Default gap from CSS
-                totalWidth += gap;
-            }
-        });
-        // Add a small buffer to prevent edge cases
-        const buffer = 10;
-        const isOverflowing = totalWidth + buffer > availableWidth;
-        this.showOverflowButton = isOverflowing;
-    }
-    /**
-     * Lifecycle: componentDidLoad. Sets up ResizeObserver and initial overflow check.
-     *
-     * @private
-     */
-    componentDidLoad() {
-        {
-            // Set up ResizeObserver to watch for footer size changes
-            this.resizeObserver = new ResizeObserver(() => {
-                this.checkOverflow();
-            });
-            // Initial check after a small delay to ensure DOM is ready
-            requestAnimationFrame(() => {
-                setTimeout(() => {
-                    if (this.footerRef) {
-                        this.resizeObserver.observe(this.footerRef);
-                    }
-                    this.checkOverflow();
-                }, 100);
-            });
-        }
-    }
-    /**
-     * Lifecycle: disconnectedCallback. Restores body styles and disconnects observers.
-     *
-     * @private
-     */
-    disconnectedCallback() {
-        if (document.body.style.overflow === 'hidden') {
-            document.body.style.overflow = this.originalBodyOverflow;
-            document.body.style.paddingRight = this.originalBodyPaddingRight;
-        }
-        // Clean up ResizeObserver
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-        }
-    }
-    /**
-     * Render the component UI.
-     *
-     * @returns JSX element tree
-     * @private
-     */
-    render() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        const widthClass = typeof this.width === 'number' ? 'custom-width' : this.width;
-        const sideSheetStyle = typeof this.width === 'number' ? { maxWidth: `${this.width}px` } : {};
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        const headerStartIcon = Boolean(this.headerActionButtonIcon) ? (h("udp-icon", { iconName: this.headerActionButtonIcon, color: "inherit" })) : undefined;
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        const overflowIcon = h("udp-icon", { key: '6da1f10cce0b9e2b2f597df9249ef45128445801', iconName: "overflowMenuVertical", color: "inherit" });
-        return (h("div", { key: '20237474eebbd73253c97b28229607d10ac91e2f', class: "backdrop", onClick: this.onCloseBackdrop }, h("div", { key: '5b09a3b7e0905a7eef6875499eb863daedcb8969', class: { sheet: true, [this.position]: true, [widthClass]: true }, style: sideSheetStyle }, h("div", { key: '99c0fa14ced2b4397b066f9348984cf85c5e6325', class: "title-container" }, h("div", { key: 'a47a3669b74bfc3e7235ab4487fcae6b24675b26', class: "close-button" }, h("stencil-icon-button", { key: '46a52c8e2f4ac95b4ef668e05905fdde9f8d0ee4',
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            icon: Close24, onClick: this.onClose, secondary: true })), h("div", { key: '267ede825a8d9fab576c7bb0eeac782b8195372c', class: "title-text" }, h("unity-typography", { key: 'b3001278f39e3311e2b736dd47d91ecb04601981', variant: "h6" }, this.title)), (this.headerActionButtonLabel || ((_a = this.headerSecondaryButtons) === null || _a === void 0 ? void 0 : _a.length) > 0) && (h("div", { key: '5751cfe92eb7b01c836085d50429f19234844b31', class: "header-action-button" }, (_b = this.headerSecondaryButtons) === null || _b === void 0 ? void 0 :
-            _b.map((item) => (h("udp-button", { variant: "outlined", disabled: item.disabled, onClick: item.onClick, endIcon: item.icon }, item.label))), this.headerActionButtonLabel && (h("udp-button", { key: 'a8f34ed12616418ee42cb5eec10e92add96598a6', disabled: this.headerActionButtonDisabled, onClick: this.onHeaderActionButtonClick,
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            startIcon: headerStartIcon, variant: "contained" }, this.headerActionButtonLabel))))), h("div", { key: '94364ba51f35c7a46fddb17792c7905dfd6ebc45', class: "loader-container" }, h("udp-linear-loader", { key: 'e12b1130a11b4a9de87aa8da219f538354508e9f', class: { 'is-loading': this.loading }, color: "primary" })), h("div", { key: 'eb842f58defdcd74ef6a28815f11f21c68c8c2ee', class: { content: true, padding: this.padding } }, h("slot", { key: 'd7731b049a94fb19d38c045ea76c2bf78062ec1b' })), (this.primaryButtonLabel || ((_c = this.footerSecondaryButtons) === null || _c === void 0 ? void 0 : _c.length) > 0) && (h("div", { key: '0991510d62b3fefd3027f15b96e46d44a8ac66e1' }, h("div", { key: '148a2ebb2385c9e04c5957fff1d9be90a57d441c', class: "loader-container" }), h("div", { key: 'ffe55575f51be1c9136cc1bdf8eb3a43e14b01da', class: {
-                footer: true,
-            }, ref: el => (this.footerRef = el) }, !this.showOverflowButton && ((_d = this.footerSecondaryButtons) === null || _d === void 0 ? void 0 : _d.length) > 0 && (h("div", { key: '47b70ed64e9246d63819afcdb93d40eb6559a9a8', class: "footer-secondary-buttons-container" }, h("div", { key: 'ef8f34e7c4c01c4a9f689a1cffe648837663a46c', class: "footer-secondary-buttons" }, (_e = this.footerSecondaryButtons) === null || _e === void 0 ? void 0 : _e.map((item) => (h("udp-button", { variant: "outlined", disabled: item.disabled, onClick: item.onClick, endIcon: item.icon }, item.label)))))), this.showOverflowButton && (h("udp-button", { key: 'aa388701ba4d91be157b3ee4ad434d50b8d03efe', variant: "outlined", onClick: this.onMoreActionButtonClick, color: "secondary",
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            endIcon: overflowIcon }, "More")), this.primaryButtonLabel && (h("udp-button", { key: 'cb644736d0d39dcd89cd2fe2d721810781a581d2', variant: "contained", disabled: this.primaryButtonDisabled, onClick: this.onPrimaryButtonClick, endIcon: this.primaryButtonIcon }, this.primaryButtonLabel)), this.showOverflowButton && (h("udp-pop-over", { key: '7de1a458880803c3a3b912aaa567c9df82748531', anchorElement: this.overflowMenuAnchor, isOpen: this.openOverflowMenu, popoverWidth: '200px', popoverMaxHeight: '300px', handleOnClose: this.handleCloseOverflowMenu }, h("div", { key: 'dc0dc7b56615ede816650bf970e6059b8ea30c2d', class: "menu" }, (_f = this.footerSecondaryButtons) === null || _f === void 0 ? void 0 : _f.map(item => (h("udp-menu-item", { label: item === null || item === void 0 ? void 0 : item.label, iconName: item === null || item === void 0 ? void 0 : item.icon, onItemClick: () => {
-                item === null || item === void 0 ? void 0 : item.onClick();
-                this.handleCloseOverflowMenu();
-            }, disabled: item === null || item === void 0 ? void 0 : item.disabled })))))), h("div", { key: 'a7aecadc65eb2fb3a106c19f6101e4c6c158c960', ref: el => (this.measurementContainerRef = el), style: {
-                position: 'absolute',
-                visibility: 'hidden',
-                pointerEvents: 'none',
-                display: 'flex',
-                gap: 'var(--spacing-02, 4px)',
-            }, "aria-hidden": "true" }, (_g = this.footerSecondaryButtons) === null || _g === void 0 ? void 0 :
-            _g.map((item) => (h("udp-button", { variant: "text", size: "medium", disabled: item.disabled, endIcon: item.icon }, item.label))), this.primaryButtonLabel && (h("udp-button", { key: '64be9bf39748c7c301d4f4d264fae98ed0e40302', variant: "contained", size: "medium", disabled: this.primaryButtonDisabled, endIcon: this.primaryButtonIcon }, this.primaryButtonLabel)))))))));
-    }
-    get hostEl() { return getElement(this); }
-    static get watchers() { return {
-        "open": ["handleOpenChange"],
-        "footerSecondaryButtons": ["handleSecondaryButtonsChange"]
-    }; }
-};
-UdpSideSheet.style = udpSideSheetCss;
-
 const udpTabsCss = ".tab-container{display:flex;flex-direction:column}.tab-header{background-color:#ffffff;position:relative;display:flex;align-items:center}.tab-scroll-container{display:flex;position:relative;overflow-x:auto;overflow-y:hidden;flex:1;min-width:0}.tab-scroll-container::-webkit-scrollbar{height:4px}.tab-scroll-container::-webkit-scrollbar-track{background:transparent}.tab-scroll-container::-webkit-scrollbar-thumb{background-color:rgba(0, 0, 0, 0.2);border-radius:4px}.tab-scroll-container::-webkit-scrollbar-thumb:hover{background-color:rgba(0, 0, 0, 0.3)}.tab-header::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background-color:var(--divider-color, #e0e0e0)}.tab-header button{padding:16px;font-size:14px;text-align:center;border:none;background:none;cursor:pointer;outline:none;transition:all 0.22s ease;color:#555555;font-weight:600;opacity:0.9;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:8px}.tab-header.fill .tab-scroll-container{width:100%}.tab-header.fill .tab-scroll-container button{flex-grow:1}.tab-header button.active{color:var(--secondary-color, #344861);opacity:1.0}.tab-header button.scroll-arrow{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;width:40px;padding:0;background:#ffffff;cursor:pointer;font-size:16px;font-weight:bold;color:#757575;z-index:2;transition:color 0.2s ease;flex-shrink:0;opacity:1;gap:0}.tab-header button.scroll-arrow:hover{color:#000}.tab-header button.scroll-arrow.left{left:0}.tab-header button.scroll-arrow.right{right:0}.scroll-fade{position:absolute;top:0;bottom:0;width:30px;z-index:1;pointer-events:none}.scroll-fade.left{left:40px;background:linear-gradient(\n    to right,\n    #ffffff,\n    rgba(255, 255, 255, 0)\n  )}.scroll-fade.right{right:40px;background:linear-gradient(\n    to left,\n    #ffffff,\n    rgba(255, 255, 255, 0)\n  )}.tab-header button udp-icon{font-size:1.2em;line-height:1}.tab-header button.icon-start{flex-direction:row}.tab-header button.icon-end{flex-direction:row-reverse}.tab-header button.icon-top{flex-direction:column;gap:4px}.tab-header button.icon-bottom{flex-direction:column-reverse;gap:4px}.slider{position:absolute;bottom:0;left:0;height:2px;background-color:var(--secondary-color, #344861);transition:transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),\n    width 0.22s cubic-bezier(0.4, 0, 0.2, 1);z-index:1}.tab-header button.disabled{opacity:0.5;cursor:not-allowed}.tab-header button.disabled.active{color:#757575;opacity:0.5}";
 
 const UdpTabs = class {
@@ -612,7 +355,7 @@ const UdpTabs = class {
     }
     render() {
         const currentActiveTab = this.activeTab; // Use getter
-        return (h("div", { key: '5300dbcdc9fff54d87fe64e3bbcc3b6a1f04c331', class: "tab-container" }, h("div", { key: '83041e378183364889aa8d14114c9315ead1028c', class: `tab-header ${this.variant}` }, this.showScrollLeft && (h("button", { key: '87d95478e27c13440e15e3d6b8cf4047d3e97e53', class: "scroll-arrow left", onClick: () => this.scrollToStart(), "aria-label": "Scroll to first tab" }, h("udp-icon", { key: 'a81987c97a0459533f17b68103788af401f06378', iconName: "chevronLeft16", color: "inherit" }))), this.showScrollLeft && h("div", { key: 'a52b3b7fba6022c4864f0cb89d24e34ade18a969', class: "scroll-fade left" }), h("div", { key: '0dc7ce8d4269539cfcd011736df876e6a64feebe', class: "tab-scroll-container", ref: el => (this.scrollContainerRef = el), onScroll: () => this.checkScroll() }, this.tabDetails.map((tab, index) => {
+        return (h("div", { key: '39658d24754621f8b22e718d126894451a4919d8', class: "tab-container" }, h("div", { key: '49afc82bdbfafb7292c450bdd76c3e6fd5b9e9aa', class: `tab-header ${this.variant}` }, this.showScrollLeft && (h("button", { key: 'ade7254e3b26254f12e3aedfc6e6656904b188e6', class: "scroll-arrow left", onClick: () => this.scrollToStart(), "aria-label": "Scroll to first tab" }, h("udp-icon", { key: '095dcdf5234ef669ea45bc28d0fb9f025eba5326', iconName: "chevronLeft16", color: "inherit" }))), this.showScrollLeft && h("div", { key: '79c3ebfd7e482c60596fe92d42757d93dfb4e2b6', class: "scroll-fade left" }), h("div", { key: '7bac2bd5f30bb120284814b05ea4da8150c4cc40', class: "tab-scroll-container", ref: el => (this.scrollContainerRef = el), onScroll: () => this.checkScroll() }, this.tabDetails.map((tab, index) => {
             if (tab.hidden) {
                 return null;
             }
@@ -626,7 +369,7 @@ const UdpTabs = class {
                     [`icon-${tab.iconPlacement}`]: !!tab.icon,
                     'disabled': tab.disabled,
                 }, disabled: tab.disabled, onClick: () => this.tabClicked(index), role: "tab", "aria-selected": index === currentActiveTab ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', ref: el => (this.buttonRefs[index] = el) }, iconEl, labelEl));
-        }), h("div", { key: '0892dff1735729462a927e9f7d0127b402a43918', class: "slider", style: this.sliderStyle })), this.showScrollRight && h("div", { key: 'edf6fc21360de9fd919e4d71aefec6e3c7ed9fdd', class: "scroll-fade right" }), this.showScrollRight && (h("button", { key: '88adff5cab4b8baff5a1e4c6ed5f2fe44064f05e', class: "scroll-arrow right", onClick: () => this.scrollToEnd(), "aria-label": "Scroll to last tab" }, h("udp-icon", { key: '7704e98608f492cb4f599b706b302e003d84bb46', iconName: "chevronRight16", color: "inherit" })))), !this.isControlled && !this.useTabsProp && (h("div", { key: 'fd61baeb3e79a387c1367813fbaa99f496ae4d62' }, h("slot", { key: '872c0a2ead48abea1c946b7389c307a53d560705' })))));
+        }), h("div", { key: 'f2c322a5bc7fe5c5e0aaace452727ddb287a17da', class: "slider", style: this.sliderStyle })), this.showScrollRight && h("div", { key: '08399f60df57432e46b7365c0d5f653f512edc46', class: "scroll-fade right" }), this.showScrollRight && (h("button", { key: '9be19443a7c996472714beb53d9e3534b000c62e', class: "scroll-arrow right", onClick: () => this.scrollToEnd(), "aria-label": "Scroll to last tab" }, h("udp-icon", { key: 'e4c5baf6a8e0ae67adb82c0b8be48ca277b25ce4', iconName: "chevronRight16", color: "inherit" })))), !this.isControlled && !this.useTabsProp && (h("div", { key: '4b33abce9f558a0d0fb22533d81f11fc1dc18849' }, h("slot", { key: '1ebca6515b93f563f063c5832e31e2d17a8dbcd8' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -638,5 +381,5 @@ const UdpTabs = class {
 };
 UdpTabs.style = udpTabsCss;
 
-export { PrimaryActionHeader as primary_action_header, UdpSideSheet as udp_side_sheet, UdpTabs as udp_tabs };
-//# sourceMappingURL=primary-action-header.udp-side-sheet.udp-tabs.entry.js.map
+export { PrimaryActionHeader as primary_action_header, UdpTabs as udp_tabs };
+//# sourceMappingURL=primary-action-header.udp-tabs.entry.js.map

package/dist/esm/resource-timeline-calendar.entry.js

@@ -190,7 +190,7 @@ const ResourceTimelineCalendar = class {
     }
     render() {
         const todayString = new Date().toLocaleDateString('en-US');
-        return (h("div", { key: '05cf3842abc0b52ab72f03c1019d53ec40bda0b7', class: "resource-timeline-calendar" }, h("resource-timeline-primary-bar", { key: 'c35441fa99b9e1f82aa55b95eebe2421c16e6a31', gridBarTitle: this.gridBarTitle, subTitle: this.subTitle, primaryAction: this.primaryAction, secondaryAction: this.secondaryAction, clickBackward: this.handleClickBackward, clickForward: this.handleClickForward, clickToday: this.handleClickToday, subtitleStatus: this.subtitleStatus, subtitleStatusMappingClasses: this.subtitleStatusMappingClasses, disableHeaderActions: this.disableHeaderActions, showLockedIcon: this.showLockedIcon, expandAll: this.expandGroups, collapseAll: this.collapseGroups }), h("client-side-grid", { key: '3ac6eaf3866a0a156f21486d50848503e730339a', rowData: this.filledRowData, columnDefs: this.formattedColumnDefs, gridOptions: Object.assign(Object.assign({}, this.additionalGridOptions), { components: {
+        return (h("div", { key: 'cd451db6f5b3adf145b163e6bd1e9ecb51a176c1', class: "resource-timeline-calendar" }, h("resource-timeline-primary-bar", { key: 'dd1dd4ec783533d87787e3511baea1c9075a9847', gridBarTitle: this.gridBarTitle, subTitle: this.subTitle, primaryAction: this.primaryAction, secondaryAction: this.secondaryAction, clickBackward: this.handleClickBackward, clickForward: this.handleClickForward, clickToday: this.handleClickToday, subtitleStatus: this.subtitleStatus, subtitleStatusMappingClasses: this.subtitleStatusMappingClasses, disableHeaderActions: this.disableHeaderActions, showLockedIcon: this.showLockedIcon, expandAll: this.expandGroups, collapseAll: this.collapseGroups }), h("client-side-grid", { key: 'c7f5f5d2896aa1ff6cfaffdecfc5ae2c6eaed1f2', rowData: this.filledRowData, columnDefs: this.formattedColumnDefs, gridOptions: Object.assign(Object.assign({}, this.additionalGridOptions), { components: {
                     agGridSubtitleCellRenderer: AgGridSubtitleCellRenderer,
                     resourceTimelineCalendarHeader: ResourceTimelineColumnHeader,
                 }, processPivotResultColDef: colDef => {

package/dist/esm/search-method-grid.entry.js

@@ -283,6 +283,7 @@ const createSearchMethodDataSource = (options) => {
                     let finalRowData = response.pageList;
                     const columnDefs = params.api.getColumnDefs();
                     finalRowData = await processLookupsInData(response.pageList, columnDefs);
+                    params.api.setGridOption('context', Object.assign(Object.assign({}, params.api.getGridOption('context')), { rowCount: parseInt(response.total) }));
                     params.success({
                         rowData: finalRowData,
                         rowCount: parseInt(response.total),
@@ -377,7 +378,7 @@ const SearchMethodGrid = class {
         }
     }
     render() {
-        return (h("server-side-grid", { key: '560c6fe37f5d5e67988aad290caaa1a68862585d', onGridReady: e => this.handleGridReady(e), dataSource: this.dataSource, gridFunctions: this.gridFunctions, columnDefs: this.columnDefs, gridOptions: this.gridOptions, gridHeaderConfig: this.gridHeaderConfig, gridId: this.gridId, entityName: this.entityName, gridHeight: this.gridHeight, gridApiCallback: this.gridApiCallback }));
+        return (h("server-side-grid", { key: '01d53dbfb1d9d8b959cb2c9ac3e75c229fff23f6', onGridReady: e => this.handleGridReady(e), dataSource: this.dataSource, gridFunctions: this.gridFunctions, columnDefs: this.columnDefs, gridOptions: this.gridOptions, gridHeaderConfig: this.gridHeaderConfig, gridId: this.gridId, entityName: this.entityName, gridHeight: this.gridHeight, gridApiCallback: this.gridApiCallback }));
     }
     static get watchers() { return {
         "searchMethodConfig": ["handleSearchMethodUpdate"]