@pine-ds/core 3.9.0 → 3.11.0

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

@@ -1 +1 @@
-{"version":3,"file":"pds-modal-content.js","sourceRoot":"","sources":["../../../../src/components/pds-modal/pds-modal-content/pds-modal-content.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Prop, Element, State } from '@stencil/core';\n\ndeclare global {\n  interface HTMLPdsModalContentElement extends HTMLElement {\n    border: 'none' | 'both';\n  }\n}\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}"]}
+{"version":3,"file":"pds-modal-content.js","sourceRoot":"","sources":["../../../../src/components/pds-modal/pds-modal-content/pds-modal-content.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/pds-modal/pds-modal.js

@@ -273,8 +273,8 @@ export class PdsModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "backdrop-dismiss",
                 "reflect": false,
+                "attribute": "backdrop-dismiss",
                 "defaultValue": "true"
             },
             "componentId": {
@@ -293,8 +293,8 @@ export class PdsModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component-id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component-id"
             },
             "open": {
                 "type": "boolean",
@@ -315,8 +315,8 @@ export class PdsModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": false,
+                "attribute": "open",
                 "defaultValue": "false"
             },
             "size": {
@@ -338,8 +338,8 @@ export class PdsModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'md'"
             },
             "scrollable": {
@@ -361,8 +361,8 @@ export class PdsModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "scrollable",
                 "reflect": false,
+                "attribute": "scrollable",
                 "defaultValue": "true"
             }
         };

package/dist/collection/components/pds-modal/test/mock-pds-modal.js

@@ -104,8 +104,8 @@ export class MockPdsModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component-id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component-id"
             },
             "size": {
                 "type": "string",
@@ -123,8 +123,8 @@ export class MockPdsModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'md'"
             },
             "scrollable": {
@@ -146,8 +146,8 @@ export class MockPdsModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "scrollable",
                 "reflect": false,
+                "attribute": "scrollable",
                 "defaultValue": "true"
             },
             "backdropDismiss": {
@@ -166,8 +166,8 @@ export class MockPdsModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "backdrop-dismiss",
                 "reflect": false,
+                "attribute": "backdrop-dismiss",
                 "defaultValue": "true"
             },
             "open": {
@@ -186,8 +186,8 @@ export class MockPdsModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": false,
+                "attribute": "open",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/pds-popover/pds-popover.css

@@ -2,36 +2,9 @@
   --sizing-max-width-default: 352px;
   display: inline-block;
 }
-:host [popover] {
-  background-color: var(--pine-color-background-container);
-  border: var(--pine-border);
-  border-radius: var(--pine-dimension-125);
-  box-shadow: var(--pine-box-shadow-200);
-  margin: var(--pine-dimension-none);
-  max-width: var(--sizing-max-width-default);
-  padding: var(--pine-dimension-md);
-  position: fixed;
-}
-:host [popover]:popover-open:not(.pds-popover--positioned) {
-  visibility: hidden;
-}
-:host button {
-  align-items: center;
-  background-color: var(--pine-color-secondary);
-  border: var(--pine-border);
-  border-radius: var(--pine-border-radius-full);
-  color: var(--pine-color-text-secondary);
-  display: flex;
-  font: var(--pine-typography-body-medium);
-  font-family: var(--pine-font-family-heading);
-  letter-spacing: var(--pine-letter-spacing);
-  min-height: 40px;
-  padding: var(--pine-dimension-xs) var(--pine-dimension-sm);
-}
-:host button:focus-visible {
-  outline: var(--pine-outline-focus);
-  outline-offset: var(--pine-border-width);
+:host .pds-popover__trigger-wrapper {
+  display: inline-block;
 }
-:host button:hover {
-  background-color: var(--pine-color-secondary-hover);
+:host .pds-popover__content-slot-wrapper {
+  display: none;
 }