@pine-ds/core 3.12.0 → 3.12.1

package/components/pds-modal-content.js

@@ -34,7 +34,6 @@ const PdsModalContent$1 = /*@__PURE__*/ proxyCustomElement(class PdsModalContent
         if (!this.userSetBorder) {
             setTimeout(() => {
                 // The scroll happens on the component element itself (this.el), not the inner div
-                console.log('Setting up scroll listener on component element:', this.el);
                 this.el.addEventListener('scroll', this.handleScroll.bind(this));
                 // Initial border update after everything is set up
                 setTimeout(() => this.updateBorders(), 100);
@@ -55,7 +54,6 @@ const PdsModalContent$1 = /*@__PURE__*/ proxyCustomElement(class PdsModalContent
      * Handle scroll events
      */
     handleScroll() {
-        console.log('Scroll event fired!');
         this.updateBorders();
     }
     /**
@@ -99,35 +97,21 @@ const PdsModalContent$1 = /*@__PURE__*/ proxyCustomElement(class PdsModalContent
         const tolerance = 3;
         const isAtTop = scrollTop <= tolerance;
         const isAtBottom = scrollBottom >= scrollHeight - tolerance;
-        // Debug logging (can be removed later)
-        console.log('Border Debug:', {
-            scrollTop,
-            scrollHeight,
-            clientHeight,
-            scrollBottom,
-            isAtTop,
-            isAtBottom,
-            currentBorder: this.border
-        });
         if (isAtTop && isAtBottom) {
             // Content fits exactly, no borders needed
             this.border = 'none';
-            console.log('Content fits exactly, no borders needed');
         }
         else if (isAtTop && !isAtBottom) {
             // At top, show bottom border only
             this.border = 'bottom';
-            console.log('At top, show bottom border only');
         }
         else if (!isAtTop && isAtBottom) {
             // At bottom, show top border only
             this.border = 'top';
-            console.log('At bottom, show top border only');
         }
         else {
             // In middle, show both borders
             this.border = 'both';
-            console.log('In middle, show both borders');
         }
     }
     /**
@@ -196,15 +180,15 @@ const PdsModalContent$1 = /*@__PURE__*/ proxyCustomElement(class PdsModalContent
     render() {
         // Only apply max-height style if it's not 'none'
         const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
-        return (h(Host, { key: '11f1dba4ecce4a2dbf5afcd484a545a68559b0dd' }, h("div", { key: '09af48c8b62dbd0f0b418e9b15175fd9f4409636', class: {
+        return (h(Host, { key: 'fae42c1fc151e4855cd2c731802c15851473be79' }, h("div", { key: 'feb61d6a7227d8113b931df6280358cd9b4fe583', class: {
                 'pds-modal-content': true,
                 [`pds-modal-content--border-${this.border}`]: true
-            }, style: styleObj, tabindex: "-1" }, h("slot", { key: 'd738f5346e407ca6a5d92ff81d10387f7edc03bf' }))));
+            }, style: styleObj, tabindex: "-1" }, h("slot", { key: '1c9e55ecd1ad353699e5a4590ee04c9005719f6d' }))));
     }
     get el() { return this; }
     static get style() { return pdsModalContentCss; }
 }, [260, "pds-modal-content", {
-        "border": [513],
+        "border": [1537],
         "contentMaxHeight": [32]
     }]);
 function defineCustomElement$1() {

package/components/pds-modal-content.js.map

@@ -1 +1 @@
-{"file":"pds-modal-content.js","mappings":"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","names":["PdsModalContent","__stencil_proxyCustomElement"],"sources":["src/components/pds-modal/pds-modal-content/pds-modal-content.scss?tag=pds-modal-content","src/components/pds-modal/pds-modal-content/pds-modal-content.tsx"],"sourcesContent":["pds-modal-content {\n  display: block;\n  flex: 1 1 auto;\n  width: 100%;\n\n  &:has(.pds-modal-content.pds-modal-content--border-none) {\n    border: 0;\n  }\n\n  &:has(.pds-modal-content.pds-modal-content--border-both) {\n    border-block-end: 1px solid var(--pine-color-border-subtle);\n    border-block-start: 1px solid var(--pine-color-border-subtle);\n  }\n\n  &:has(.pds-modal-content.pds-modal-content--border-top) {\n    border-block-start: 1px solid var(--pine-color-border-subtle);\n  }\n\n  &:has(.pds-modal-content.pds-modal-content--border-bottom) {\n    border-block-end: 1px solid var(--pine-color-border-subtle);\n  }\n}\n\n.pds-modal-content {\n  display: block;\n  flex: 1 1 auto;\n  // Max height is set via inline styles based on header and footer heights\n  min-height: 0;\n  width: 100%;\n\n}\n","import { Component, h, Host, Prop, Element, State } from '@stencil/core';\n\n@Component({\n  tag: 'pds-modal-content',\n  styleUrl: 'pds-modal-content.scss',\n})\nexport class PdsModalContent {\n\n  @Element() el: HTMLPdsModalContentElement;\n\n  /**\n   * The border style for the content area. When not explicitly set, automatically determined based on scroll state.\n   * @default 'none'\n   */\n  @Prop({ reflect: true }) border: 'none' | 'both' | 'top' | 'bottom' = 'none';\n\n  @State() contentMaxHeight: string = 'none';\n\n  /**\n   * Tracks whether the border prop was explicitly set by the user\n   */\n  private userSetBorder = false;\n\n  componentWillLoad() {\n    // Check if border was explicitly set via attribute or property\n    const borderAttr = this.el.getAttribute('border');\n    const hasBorderAttribute = borderAttr !== null;\n\n    // If border attribute exists or border prop is not the default, user set it\n    this.userSetBorder = hasBorderAttribute || this.border !== 'none';\n  }\n\n  componentDidLoad() {\n    this.calculateMaxHeight();\n\n    // Set up resize listener\n    window.addEventListener('resize', this.handleResize.bind(this));\n\n    // Only set up scroll listener for border updates if borders are managed automatically\n    if (!this.userSetBorder) {\n      setTimeout(() => {\n        // The scroll happens on the component element itself (this.el), not the inner div\n        console.log('Setting up scroll listener on component element:', this.el);\n        this.el.addEventListener('scroll', this.handleScroll.bind(this));\n        // Initial border update after everything is set up\n        setTimeout(() => this.updateBorders(), 100);\n      }, 100);\n    }\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.handleResize.bind(this));\n\n    // Clean up scroll listener only if it was set up\n    if (!this.userSetBorder) {\n      this.el.removeEventListener('scroll', this.handleScroll.bind(this));\n    }\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  /**\n   * Handle scroll events\n   */\n  private handleScroll() {\n    console.log('Scroll event fired!');\n    this.updateBorders();\n  }\n\n  /**\n   * Handle resize events\n   */\n  private handleResize() {\n    this.calculateMaxHeight();\n    // Update borders after resize as content scrollability might change\n    setTimeout(() => this.updateBorders(), 50);\n  }\n\n  /**\n   * Calculates the max-height based on header and footer heights\n   */\n  private mutationObserver: MutationObserver;\n\n  /**\n   * Updates border visibility based on scroll state (only if not user-defined)\n   */\n  private updateBorders() {\n    // If user explicitly set a border value, don't override it\n    if (this.userSetBorder) {\n      return;\n    }\n\n    // Find the modal element (parent of this component)\n    const modalElement = this.el.closest('pds-modal');\n    if (!modalElement) return;\n\n    // Only apply border logic if modal is scrollable\n    const isModalScrollable = modalElement.scrollable !== false;\n    if (!isModalScrollable) {\n      this.border = 'none';\n      return;\n    }\n\n    // The scrollable element is the component itself (this.el), not the inner div\n    const scrollableElement = this.el;\n\n    // Check if content is actually scrollable\n    const isContentScrollable = scrollableElement.scrollHeight > scrollableElement.clientHeight;\n\n    if (!isContentScrollable) {\n      this.border = 'none';\n      return;\n    }\n\n    // Determine border position based on scroll position\n    const { scrollTop, scrollHeight, clientHeight } = scrollableElement;\n    const scrollBottom = scrollTop + clientHeight;\n\n    // More generous tolerance for scroll detection (3px instead of 1px)\n    const tolerance = 3;\n    const isAtTop = scrollTop <= tolerance;\n    const isAtBottom = scrollBottom >= scrollHeight - tolerance;\n\n    // Debug logging (can be removed later)\n    console.log('Border Debug:', {\n      scrollTop,\n      scrollHeight,\n      clientHeight,\n      scrollBottom,\n      isAtTop,\n      isAtBottom,\n      currentBorder: this.border\n    });\n\n    if (isAtTop && isAtBottom) {\n      // Content fits exactly, no borders needed\n      this.border = 'none';\n      console.log('Content fits exactly, no borders needed');\n    } else if (isAtTop && !isAtBottom) {\n      // At top, show bottom border only\n      this.border = 'bottom';\n      console.log('At top, show bottom border only');\n    } else if (!isAtTop && isAtBottom) {\n      // At bottom, show top border only\n      this.border = 'top';\n      console.log('At bottom, show top border only');\n    } else {\n      // In middle, show both borders\n      this.border = 'both';\n      console.log('In middle, show both borders');\n    }\n  }\n\n  /**\n   * Calculates the max-height based on header and footer heights\n   */\n  private calculateMaxHeight() {\n    // Find the modal element (parent of this component)\n    const modalElement = this.el.closest('pds-modal');\n    if (!modalElement) return;\n\n    // Check if the parent modal is scrollable\n    const isScrollable = modalElement.scrollable !== false;\n\n    setTimeout(() => {\n      // If modal is not scrollable, don't apply max-height constraints\n      if (!isScrollable) {\n        this.contentMaxHeight = 'none';\n        const contentElement = this.el.querySelector('.pds-modal-content') as HTMLElement;\n        if (contentElement) {\n          contentElement.style.maxHeight = 'none';\n        }\n        return;\n      }\n\n      // Find header and footer elements\n      const headerElement = modalElement.querySelector('pds-modal-header');\n      const footerElement = modalElement.querySelector('pds-modal-footer');\n\n      // Get header and footer heights\n      const headerHeight = headerElement ? headerElement.offsetHeight : 0;\n      const footerHeight = footerElement ? footerElement.offsetHeight : 0;\n\n      // Set the max-height as a calculation\n      if (headerHeight > 0 || footerHeight > 0) {\n        // Calculate the available height by subtracting:\n        // 1. Header and footer heights\n        // 2. Modal padding (48px)\n        // 3. Additional space for modal positioning (6vh)\n        // 4. Extra adjustment for perfect fit (50px)\n        const viewportAdjustment = Math.round(window.innerHeight * 0.06); // 6vh approximation\n        const totalReduction = headerHeight + footerHeight + 48 + viewportAdjustment + 50;\n\n        // Set the content max height\n        this.contentMaxHeight = `calc(100vh - ${totalReduction}px)`;\n\n        // Apply the style directly to ensure it takes effect\n        const contentElement = this.el.querySelector('.pds-modal-content') as HTMLElement;\n        if (contentElement) {\n          contentElement.style.maxHeight = this.contentMaxHeight;\n        }\n      } else {\n        this.contentMaxHeight = 'none'; // Default fallback\n      }\n\n      // Update borders after height calculations with longer delay\n      setTimeout(() => this.updateBorders(), 150);\n    }, 100); // Delay to ensure DOM is fully rendered\n\n    // Set up mutation observer if not already done\n    if (!this.mutationObserver && modalElement) {\n      this.mutationObserver = new MutationObserver(() => {\n        this.calculateMaxHeight();\n      });\n\n      // Observe changes to the modal's children\n      this.mutationObserver.observe(modalElement, {\n        childList: true,\n        subtree: true,\n        attributes: true,\n        attributeFilter: ['style', 'class']\n      });\n    }\n  }\n  render() {\n    // Only apply max-height style if it's not 'none'\n    const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};\n\n    return (\n      <Host>\n        <div\n          class={{\n            'pds-modal-content': true,\n            [`pds-modal-content--border-${this.border}`]: true\n          }}\n          style={styleObj}\n          tabindex=\"-1\"\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-modal-content.js","mappings":"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","names":["PdsModalContent","__stencil_proxyCustomElement"],"sources":["src/components/pds-modal/pds-modal-content/pds-modal-content.scss?tag=pds-modal-content","src/components/pds-modal/pds-modal-content/pds-modal-content.tsx"],"sourcesContent":["pds-modal-content {\n  display: block;\n  flex: 1 1 auto;\n  width: 100%;\n\n  &:has(.pds-modal-content.pds-modal-content--border-none) {\n    border: 0;\n  }\n\n  &:has(.pds-modal-content.pds-modal-content--border-both) {\n    border-block-end: 1px solid var(--pine-color-border-subtle);\n    border-block-start: 1px solid var(--pine-color-border-subtle);\n  }\n\n  &:has(.pds-modal-content.pds-modal-content--border-top) {\n    border-block-start: 1px solid var(--pine-color-border-subtle);\n  }\n\n  &:has(.pds-modal-content.pds-modal-content--border-bottom) {\n    border-block-end: 1px solid var(--pine-color-border-subtle);\n  }\n}\n\n.pds-modal-content {\n  display: block;\n  flex: 1 1 auto;\n  // Max height is set via inline styles based on header and footer heights\n  min-height: 0;\n  width: 100%;\n\n}\n","import { Component, h, Host, Prop, Element, State } from '@stencil/core';\n\n@Component({\n  tag: 'pds-modal-content',\n  styleUrl: 'pds-modal-content.scss',\n})\nexport class PdsModalContent {\n\n  @Element() el: HTMLPdsModalContentElement;\n\n  /**\n   * The border style for the content area. When not explicitly set, automatically determined based on scroll state.\n   * @default 'none'\n   */\n  @Prop({ reflect: true, mutable: true }) border: 'none' | 'both' | 'top' | 'bottom' = 'none';\n\n  @State() contentMaxHeight: string = 'none';\n\n  /**\n   * Tracks whether the border prop was explicitly set by the user\n   */\n  private userSetBorder = false;\n\n  componentWillLoad() {\n    // Check if border was explicitly set via attribute or property\n    const borderAttr = this.el.getAttribute('border');\n    const hasBorderAttribute = borderAttr !== null;\n\n    // If border attribute exists or border prop is not the default, user set it\n    this.userSetBorder = hasBorderAttribute || this.border !== 'none';\n  }\n\n  componentDidLoad() {\n    this.calculateMaxHeight();\n\n    // Set up resize listener\n    window.addEventListener('resize', this.handleResize.bind(this));\n\n    // Only set up scroll listener for border updates if borders are managed automatically\n    if (!this.userSetBorder) {\n      setTimeout(() => {\n        // The scroll happens on the component element itself (this.el), not the inner div\n        this.el.addEventListener('scroll', this.handleScroll.bind(this));\n        // Initial border update after everything is set up\n        setTimeout(() => this.updateBorders(), 100);\n      }, 100);\n    }\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.handleResize.bind(this));\n\n    // Clean up scroll listener only if it was set up\n    if (!this.userSetBorder) {\n      this.el.removeEventListener('scroll', this.handleScroll.bind(this));\n    }\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  /**\n   * Handle scroll events\n   */\n  private handleScroll() {\n    this.updateBorders();\n  }\n\n  /**\n   * Handle resize events\n   */\n  private handleResize() {\n    this.calculateMaxHeight();\n    // Update borders after resize as content scrollability might change\n    setTimeout(() => this.updateBorders(), 50);\n  }\n\n  /**\n   * Calculates the max-height based on header and footer heights\n   */\n  private mutationObserver: MutationObserver;\n\n  /**\n   * Updates border visibility based on scroll state (only if not user-defined)\n   */\n  private updateBorders() {\n    // If user explicitly set a border value, don't override it\n    if (this.userSetBorder) {\n      return;\n    }\n\n    // Find the modal element (parent of this component)\n    const modalElement = this.el.closest('pds-modal');\n    if (!modalElement) return;\n\n    // Only apply border logic if modal is scrollable\n    const isModalScrollable = modalElement.scrollable !== false;\n    if (!isModalScrollable) {\n      this.border = 'none';\n      return;\n    }\n\n    // The scrollable element is the component itself (this.el), not the inner div\n    const scrollableElement = this.el;\n\n    // Check if content is actually scrollable\n    const isContentScrollable = scrollableElement.scrollHeight > scrollableElement.clientHeight;\n\n    if (!isContentScrollable) {\n      this.border = 'none';\n      return;\n    }\n\n    // Determine border position based on scroll position\n    const { scrollTop, scrollHeight, clientHeight } = scrollableElement;\n    const scrollBottom = scrollTop + clientHeight;\n\n    // More generous tolerance for scroll detection (3px instead of 1px)\n    const tolerance = 3;\n    const isAtTop = scrollTop <= tolerance;\n    const isAtBottom = scrollBottom >= scrollHeight - tolerance;\n\n    if (isAtTop && isAtBottom) {\n      // Content fits exactly, no borders needed\n      this.border = 'none';\n    } else if (isAtTop && !isAtBottom) {\n      // At top, show bottom border only\n      this.border = 'bottom';\n    } else if (!isAtTop && isAtBottom) {\n      // At bottom, show top border only\n      this.border = 'top';\n    } else {\n      // In middle, show both borders\n      this.border = 'both';\n    }\n  }\n\n  /**\n   * Calculates the max-height based on header and footer heights\n   */\n  private calculateMaxHeight() {\n    // Find the modal element (parent of this component)\n    const modalElement = this.el.closest('pds-modal');\n    if (!modalElement) return;\n\n    // Check if the parent modal is scrollable\n    const isScrollable = modalElement.scrollable !== false;\n\n    setTimeout(() => {\n      // If modal is not scrollable, don't apply max-height constraints\n      if (!isScrollable) {\n        this.contentMaxHeight = 'none';\n        const contentElement = this.el.querySelector('.pds-modal-content') as HTMLElement;\n        if (contentElement) {\n          contentElement.style.maxHeight = 'none';\n        }\n        return;\n      }\n\n      // Find header and footer elements\n      const headerElement = modalElement.querySelector('pds-modal-header');\n      const footerElement = modalElement.querySelector('pds-modal-footer');\n\n      // Get header and footer heights\n      const headerHeight = headerElement ? headerElement.offsetHeight : 0;\n      const footerHeight = footerElement ? footerElement.offsetHeight : 0;\n\n      // Set the max-height as a calculation\n      if (headerHeight > 0 || footerHeight > 0) {\n        // Calculate the available height by subtracting:\n        // 1. Header and footer heights\n        // 2. Modal padding (48px)\n        // 3. Additional space for modal positioning (6vh)\n        // 4. Extra adjustment for perfect fit (50px)\n        const viewportAdjustment = Math.round(window.innerHeight * 0.06); // 6vh approximation\n        const totalReduction = headerHeight + footerHeight + 48 + viewportAdjustment + 50;\n\n        // Set the content max height\n        this.contentMaxHeight = `calc(100vh - ${totalReduction}px)`;\n\n        // Apply the style directly to ensure it takes effect\n        const contentElement = this.el.querySelector('.pds-modal-content') as HTMLElement;\n        if (contentElement) {\n          contentElement.style.maxHeight = this.contentMaxHeight;\n        }\n      } else {\n        this.contentMaxHeight = 'none'; // Default fallback\n      }\n\n      // Update borders after height calculations with longer delay\n      setTimeout(() => this.updateBorders(), 150);\n    }, 100); // Delay to ensure DOM is fully rendered\n\n    // Set up mutation observer if not already done\n    if (!this.mutationObserver && modalElement) {\n      this.mutationObserver = new MutationObserver(() => {\n        this.calculateMaxHeight();\n      });\n\n      // Observe changes to the modal's children\n      this.mutationObserver.observe(modalElement, {\n        childList: true,\n        subtree: true,\n        attributes: true,\n        attributeFilter: ['style', 'class']\n      });\n    }\n  }\n  render() {\n    // Only apply max-height style if it's not 'none'\n    const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};\n\n    return (\n      <Host>\n        <div\n          class={{\n            'pds-modal-content': true,\n            [`pds-modal-content--border-${this.border}`]: true\n          }}\n          style={styleObj}\n          tabindex=\"-1\"\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/{index-BIrlTMGo.js → index-CMeuo765.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-/* pds-icons v9.11.0, ES Modules */
+/* pds-icons v9.12.0, ES Modules */
 
 const addCircle = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12m11-5a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3H8a1 1 0 1 1 0-2h3V8a1 1 0 0 1 1-1'/></svg>";
 const caretDown = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M5.293 8.293a1 1 0 0 1 1.414 0L12 13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414'/></svg>";
@@ -29,6 +29,6 @@ exports.remove = remove;
 exports.trash = trash;
 exports.upSmall = upSmall;
 exports.userFilled = userFilled;
-//# sourceMappingURL=index-BIrlTMGo.js.map
+//# sourceMappingURL=index-CMeuo765.js.map
 
-//# sourceMappingURL=index-BIrlTMGo.js.map
+//# sourceMappingURL=index-CMeuo765.js.map