@pine-ds/core 3.26.4 → 3.28.0

package/components/pds-loader2.js

@@ -1,79 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const pdsLoaderCss = ":host{--loader-color:var(--pine-color-primary);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-xs)}:host(.pds-loader--hidden),.pds-loader--hidden{border-width:0;clip:rect(0, 0, 0, 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-loader--spinner svg{--number-spinner-timing:2s;--number-spinner-path-timing:1.5s;-webkit-animation:rotate var(--number-spinner-timing) linear infinite;animation:rotate var(--number-spinner-timing) linear infinite;color:var(--loader-color)}.pds-loader__spinner-path{stroke-width:8px}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.pds-loader--typing{--number-typing-timing:1s;--opacity-typing-dot-default:0.4;--opacity-typing-dot-active:1;-ms-flex-align:center;align-items:center;background-color:var(--pine-color-background-muted);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-2xs);margin-block:var(--pine-dimension-none);margin-inline:auto;padding-block:15px;padding-inline:20px;position:relative}.pds-loader--typing span{background-color:var(--pine-color-border-hover);block-size:6px;border-radius:var(--pine-border-radius-full);inline-size:6px;opacity:var(--opacity-typing-dot-default)}.pds-loader--typing span:nth-of-type(1){-webkit-animation:var(--number-typing-timing) typing infinite 0.3333s;animation:var(--number-typing-timing) typing infinite 0.3333s}.pds-loader--typing span:nth-of-type(2){-webkit-animation:var(--number-typing-timing) typing infinite 0.6666s;animation:var(--number-typing-timing) typing infinite 0.6666s}.pds-loader--typing span:nth-of-type(3){-webkit-animation:var(--number-typing-timing) typing infinite 0.9999s;animation:var(--number-typing-timing) typing infinite 0.9999s}@-webkit-keyframes typing{50%{opacity:var(--opacity-typing-dot-active);-webkit-transform:scale(1.25);transform:scale(1.25)}}@keyframes typing{50%{opacity:var(--opacity-typing-dot-active);-webkit-transform:scale(1.25);transform:scale(1.25)}}.pds-loader__label{--typography-label-default:var(--pine-font-weight-medium) var(--pine-font-size-body-md)/var(--pine-line-height-body) var(--pine-font-family-body);font:var(--typography-label-default)}";
-
-const PdsLoader = /*@__PURE__*/ proxyCustomElement(class PdsLoader extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /**
-         * If false, the loader will be hidden.
-         */
-        this.isLoading = true;
-        /**
-         * Determines whether the loader should display a label.
-         */
-        this.showLabel = false;
-        /**
-         * Sets the size of the spinner loader. Value can be preset or custom.
-         */
-        this.size = 'md';
-        /**
-         * Determines the type of loader.
-         */
-        this.variant = 'spinner';
-        this.getSvgStyle = () => {
-            if (this.size !== undefined) {
-                return {
-                    height: this.loaderSize(),
-                    width: this.loaderSize(),
-                };
-            }
-        };
-    }
-    loaderSize() {
-        const sizes = {
-            xs: '24px',
-            sm: '32px',
-            md: '48px',
-            lg: '64px',
-            xl: '80px',
-        };
-        if (sizes[this.size]) {
-            return sizes[this.size];
-        }
-        else {
-            return this.size;
-        }
-    }
-    render() {
-        return (h(Host, { key: 'fc312fc9ebf973506190e693cd251f25e37f3d0a', class: `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`, "aria-hidden": !this.isLoading, "aria-busy": this.isLoading, "aria-live": "polite" }, this.variant === 'spinner' && (h("div", { key: 'c9eab32510368d1fd6db7669b3db640c229911f2', class: "pds-loader--spinner" }, h("svg", { key: '359d9f171378064c6121e583efe09eace3377e44', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, h("defs", { key: '263409d92ab95fa34df4e879934e04e6a587f23b' }, h("linearGradient", { key: 'e9b32747efcb60bbebd8734fdd2c2d5a400974c1', id: "spinner-secondHalf" }, h("stop", { key: 'db61c891cf635b72e36a152b944b6c9ce3569be3', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: 'fb964af08941ad174ecaf0c329d79e25fff45a9c', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '89d815d1f076ffe82d189d51fce14fb48ecb0926', id: "spinner-firstHalf" }, h("stop", { key: '43b753f80ab136d38635a6ab921899fc8fd3a6b2', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: '7ce201ac86ae5cd291f8fba22f1e6517d53af025', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: 'ea7e594df07f7d634fa2142785f0791b21a71d41', class: "pds-loader__spinner-path" }, h("path", { key: '8ac8cead5078716ca9169150be8c0c64ecedc854', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: 'c4ed3d7f386ac59dcb540b369f52925b216ea950', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: 'ecc2e2b7240c23e35af8b9aa049ac45dff43ac9f', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '8cb7180432a6cca86c7fcc2af3f1e05afb751a9d', class: "pds-loader--typing" }, h("span", { key: 'c09247cbcf86fef899f206bee1458a1388cbdd39' }), h("span", { key: '07bdfe8ab1971fa20544022412e2141721111506' }), h("span", { key: '9444f7ed6a13475694e1eda50b891ff63fb91297' }))), h("div", { key: '3b717ff6b9f38f9710ca0556ebbc66bd86b7e1b6', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: 'ab65224fab189a30d0cf18caf086c621cbd78eaa', name: "label" }, "Loading..."))));
-    }
-    static get style() { return pdsLoaderCss; }
-}, [257, "pds-loader", {
-        "isLoading": [4, "is-loading"],
-        "showLabel": [4, "show-label"],
-        "size": [513],
-        "variant": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-loader"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-loader":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsLoader);
-            }
-            break;
-    } });
-}
-
-export { PdsLoader as P, defineCustomElement as d };
-//# sourceMappingURL=pds-loader2.js.map
-
-//# sourceMappingURL=pds-loader2.js.map
+import{proxyCustomElement as e,HTMLElement as i,h as a,Host as n,transformTag as t}from"@stencil/core/internal/client";const r=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.isLoading=!0,this.showLabel=!1,this.size="md",this.variant="spinner",this.getSvgStyle=()=>{if(void 0!==this.size)return{height:this.loaderSize(),width:this.loaderSize()}}}loaderSize(){const e={xs:"24px",sm:"32px",md:"48px",lg:"64px",xl:"80px"};return e[this.size]?e[this.size]:this.size}render(){return a(n,{key:"fc312fc9ebf973506190e693cd251f25e37f3d0a",class:"pds-loader "+(this.isLoading?"":"pds-loader--hidden"),"aria-hidden":!this.isLoading,"aria-busy":this.isLoading,"aria-live":"polite"},"spinner"===this.variant&&a("div",{key:"c9eab32510368d1fd6db7669b3db640c229911f2",class:"pds-loader--spinner"},a("svg",{key:"359d9f171378064c6121e583efe09eace3377e44",style:this.getSvgStyle(),viewBox:"0 0 200 200",fill:"none",part:"loader-svg"},a("defs",{key:"263409d92ab95fa34df4e879934e04e6a587f23b"},a("linearGradient",{key:"e9b32747efcb60bbebd8734fdd2c2d5a400974c1",id:"spinner-secondHalf"},a("stop",{key:"db61c891cf635b72e36a152b944b6c9ce3569be3",offset:"0%","stop-opacity":"0","stop-color":"currentColor"}),a("stop",{key:"fb964af08941ad174ecaf0c329d79e25fff45a9c",offset:"100%","stop-opacity":"0.5","stop-color":"currentColor"})),a("linearGradient",{key:"89d815d1f076ffe82d189d51fce14fb48ecb0926",id:"spinner-firstHalf"},a("stop",{key:"43b753f80ab136d38635a6ab921899fc8fd3a6b2",offset:"0%","stop-opacity":"1","stop-color":"currentColor"}),a("stop",{key:"7ce201ac86ae5cd291f8fba22f1e6517d53af025",offset:"100%","stop-opacity":"0.5","stop-color":"currentColor"}))),a("g",{key:"ea7e594df07f7d634fa2142785f0791b21a71d41",class:"pds-loader__spinner-path"},a("path",{key:"8ac8cead5078716ca9169150be8c0c64ecedc854",stroke:"url(#spinner-secondHalf)",d:"M 4 100 A 96 96 0 0 1 196 100"}),a("path",{key:"c4ed3d7f386ac59dcb540b369f52925b216ea950",stroke:"url(#spinner-firstHalf)",d:"M 196 100 A 96 96 0 0 1 4 100"}),a("path",{key:"ecc2e2b7240c23e35af8b9aa049ac45dff43ac9f",stroke:"currentColor","stroke-linecap":"round",d:"M 4 100 A 96 96 0 0 1 4 98"})))),"typing"===this.variant&&a("div",{key:"8cb7180432a6cca86c7fcc2af3f1e05afb751a9d",class:"pds-loader--typing"},a("span",{key:"c09247cbcf86fef899f206bee1458a1388cbdd39"}),a("span",{key:"07bdfe8ab1971fa20544022412e2141721111506"}),a("span",{key:"9444f7ed6a13475694e1eda50b891ff63fb91297"})),a("div",{key:"3b717ff6b9f38f9710ca0556ebbc66bd86b7e1b6",class:"pds-loader__label "+(this.showLabel?"":"pds-loader--hidden")},a("slot",{key:"ab65224fab189a30d0cf18caf086c621cbd78eaa",name:"label"},"Loading...")))}static get style(){return":host{--loader-color:var(--pine-color-primary);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-xs)}:host(.pds-loader--hidden),.pds-loader--hidden{border-width:0;clip:rect(0, 0, 0, 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-loader--spinner svg{--number-spinner-timing:2s;--number-spinner-path-timing:1.5s;-webkit-animation:rotate var(--number-spinner-timing) linear infinite;animation:rotate var(--number-spinner-timing) linear infinite;color:var(--loader-color)}.pds-loader__spinner-path{stroke-width:8px}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.pds-loader--typing{--number-typing-timing:1s;--opacity-typing-dot-default:0.4;--opacity-typing-dot-active:1;-ms-flex-align:center;align-items:center;background-color:var(--pine-color-background-muted);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-2xs);margin-block:var(--pine-dimension-none);margin-inline:auto;padding-block:15px;padding-inline:20px;position:relative}.pds-loader--typing span{background-color:var(--pine-color-border-hover);block-size:6px;border-radius:var(--pine-border-radius-full);inline-size:6px;opacity:var(--opacity-typing-dot-default)}.pds-loader--typing span:nth-of-type(1){-webkit-animation:var(--number-typing-timing) typing infinite 0.3333s;animation:var(--number-typing-timing) typing infinite 0.3333s}.pds-loader--typing span:nth-of-type(2){-webkit-animation:var(--number-typing-timing) typing infinite 0.6666s;animation:var(--number-typing-timing) typing infinite 0.6666s}.pds-loader--typing span:nth-of-type(3){-webkit-animation:var(--number-typing-timing) typing infinite 0.9999s;animation:var(--number-typing-timing) typing infinite 0.9999s}@-webkit-keyframes typing{50%{opacity:var(--opacity-typing-dot-active);-webkit-transform:scale(1.25);transform:scale(1.25)}}@keyframes typing{50%{opacity:var(--opacity-typing-dot-active);-webkit-transform:scale(1.25);transform:scale(1.25)}}.pds-loader__label{--typography-label-default:var(--pine-font-weight-medium) var(--pine-font-size-body-md)/var(--pine-line-height-body) var(--pine-font-family-body);font:var(--typography-label-default)}"}},[257,"pds-loader",{isLoading:[4,"is-loading"],showLabel:[4,"show-label"],size:[513],variant:[1]}]);function o(){"undefined"!=typeof customElements&&["pds-loader"].forEach((e=>{"pds-loader"===e&&(customElements.get(t(e))||customElements.define(t(e),r))}))}export{r as P,o as d}

package/components/pds-modal-content.js

@@ -1,214 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const pdsModalContentCss = "pds-modal-content{display:block;-ms-flex:1 1 auto;flex:1 1 auto;width:100%}pds-modal-content:has(.pds-modal-content.pds-modal-content--border-none){border:0}pds-modal-content:has(.pds-modal-content.pds-modal-content--border-both){-webkit-border-after:1px solid var(--pine-color-border-subtle);border-block-end:1px solid var(--pine-color-border-subtle);-webkit-border-before:1px solid var(--pine-color-border-subtle);border-block-start:1px solid var(--pine-color-border-subtle)}pds-modal-content:has(.pds-modal-content.pds-modal-content--border-top){-webkit-border-before:1px solid var(--pine-color-border-subtle);border-block-start:1px solid var(--pine-color-border-subtle)}pds-modal-content:has(.pds-modal-content.pds-modal-content--border-bottom){-webkit-border-after:1px solid var(--pine-color-border-subtle);border-block-end:1px solid var(--pine-color-border-subtle)}.pds-modal-content{display:block;-ms-flex:1 1 auto;flex:1 1 auto;min-height:0;width:100%}";
-
-const PdsModalContent$1 = /*@__PURE__*/ proxyCustomElement(class PdsModalContent extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        /**
-         * The border style for the content area. When not explicitly set, automatically determined based on scroll state.
-         * @default 'none'
-         */
-        this.border = 'none';
-        this.contentMaxHeight = 'none';
-        /**
-         * Tracks whether the border prop was explicitly set by the user
-         */
-        this.userSetBorder = false;
-    }
-    componentWillLoad() {
-        // Check if border was explicitly set via attribute or property
-        const borderAttr = this.el.getAttribute('border');
-        const hasBorderAttribute = borderAttr !== null;
-        // If border attribute exists or border prop is not the default, user set it
-        this.userSetBorder = hasBorderAttribute || this.border !== 'none';
-    }
-    componentDidLoad() {
-        this.calculateMaxHeight();
-        // Set up resize listener
-        window.addEventListener('resize', this.handleResize.bind(this));
-        // Only set up scroll listener for border updates if borders are managed automatically
-        if (!this.userSetBorder) {
-            setTimeout(() => {
-                // The scroll happens on the component element itself (this.el), not the inner div
-                this.el.addEventListener('scroll', this.handleScroll.bind(this));
-                // Initial border update after everything is set up
-                setTimeout(() => this.updateBorders(), 100);
-            }, 100);
-        }
-    }
-    disconnectedCallback() {
-        window.removeEventListener('resize', this.handleResize.bind(this));
-        // Clean up scroll listener only if it was set up
-        if (!this.userSetBorder) {
-            this.el.removeEventListener('scroll', this.handleScroll.bind(this));
-        }
-        if (this.mutationObserver) {
-            this.mutationObserver.disconnect();
-        }
-    }
-    /**
-     * Handle scroll events
-     */
-    handleScroll() {
-        this.updateBorders();
-    }
-    /**
-     * Handle resize events
-     */
-    handleResize() {
-        this.calculateMaxHeight();
-        // Update borders after resize as content scrollability might change
-        setTimeout(() => this.updateBorders(), 50);
-    }
-    /**
-     * Updates border visibility based on scroll state (only if not user-defined)
-     */
-    updateBorders() {
-        // If user explicitly set a border value, don't override it
-        if (this.userSetBorder) {
-            return;
-        }
-        // Find the modal element (parent of this component)
-        const modalElement = this.el.closest('pds-modal');
-        if (!modalElement)
-            return;
-        // Only apply border logic if modal is scrollable
-        const isModalScrollable = modalElement.scrollable !== false;
-        if (!isModalScrollable) {
-            this.border = 'none';
-            return;
-        }
-        // The scrollable element is the component itself (this.el), not the inner div
-        const scrollableElement = this.el;
-        // Check if content is actually scrollable
-        const isContentScrollable = scrollableElement.scrollHeight > scrollableElement.clientHeight;
-        if (!isContentScrollable) {
-            this.border = 'none';
-            return;
-        }
-        // Determine border position based on scroll position
-        const { scrollTop, scrollHeight, clientHeight } = scrollableElement;
-        const scrollBottom = scrollTop + clientHeight;
-        // More generous tolerance for scroll detection (3px instead of 1px)
-        const tolerance = 3;
-        const isAtTop = scrollTop <= tolerance;
-        const isAtBottom = scrollBottom >= scrollHeight - tolerance;
-        if (isAtTop && isAtBottom) {
-            // Content fits exactly, no borders needed
-            this.border = 'none';
-        }
-        else if (isAtTop && !isAtBottom) {
-            // At top, show bottom border only
-            this.border = 'bottom';
-        }
-        else if (!isAtTop && isAtBottom) {
-            // At bottom, show top border only
-            this.border = 'top';
-        }
-        else {
-            // In middle, show both borders
-            this.border = 'both';
-        }
-    }
-    /**
-     * Calculates the max-height based on header and footer heights
-     */
-    calculateMaxHeight() {
-        // Find the modal element (parent of this component)
-        const modalElement = this.el.closest('pds-modal');
-        if (!modalElement)
-            return;
-        // Check if the parent modal is scrollable
-        const isScrollable = modalElement.scrollable !== false;
-        setTimeout(() => {
-            // If modal is not scrollable, don't apply max-height constraints
-            if (!isScrollable) {
-                this.contentMaxHeight = 'none';
-                const contentElement = this.el.querySelector('.pds-modal-content');
-                if (contentElement) {
-                    contentElement.style.maxHeight = 'none';
-                }
-                return;
-            }
-            // Find header and footer elements
-            const headerElement = modalElement.querySelector('pds-modal-header');
-            const footerElement = modalElement.querySelector('pds-modal-footer');
-            // Get header and footer heights
-            const headerHeight = headerElement ? headerElement.offsetHeight : 0;
-            const footerHeight = footerElement ? footerElement.offsetHeight : 0;
-            // Set the max-height as a calculation
-            if (headerHeight > 0 || footerHeight > 0) {
-                // Calculate the available height by subtracting:
-                // 1. Header and footer heights
-                // 2. Modal padding (48px)
-                // 3. Additional space for modal positioning (6vh)
-                // 4. Extra adjustment for perfect fit (50px)
-                const viewportAdjustment = Math.round(window.innerHeight * 0.06); // 6vh approximation
-                const totalReduction = headerHeight + footerHeight + 48 + viewportAdjustment + 50;
-                // Set the content max height
-                this.contentMaxHeight = `calc(100vh - ${totalReduction}px)`;
-                // Apply the style directly to ensure it takes effect
-                const contentElement = this.el.querySelector('.pds-modal-content');
-                if (contentElement) {
-                    contentElement.style.maxHeight = this.contentMaxHeight;
-                }
-            }
-            else {
-                this.contentMaxHeight = 'none'; // Default fallback
-            }
-            // Update borders after height calculations with longer delay
-            setTimeout(() => this.updateBorders(), 150);
-        }, 100); // Delay to ensure DOM is fully rendered
-        // Set up mutation observer if not already done
-        if (!this.mutationObserver && modalElement) {
-            this.mutationObserver = new MutationObserver(() => {
-                this.calculateMaxHeight();
-            });
-            // Observe changes to the modal's children
-            this.mutationObserver.observe(modalElement, {
-                childList: true,
-                subtree: true,
-                attributes: true,
-                attributeFilter: ['style', 'class']
-            });
-        }
-    }
-    render() {
-        // Only apply max-height style if it's not 'none'
-        const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
-        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: '1c9e55ecd1ad353699e5a4590ee04c9005719f6d' }))));
-    }
-    get el() { return this; }
-    static get style() { return pdsModalContentCss; }
-}, [260, "pds-modal-content", {
-        "border": [1537],
-        "contentMaxHeight": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-modal-content"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-modal-content":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsModalContent$1);
-            }
-            break;
-    } });
-}
-
-const PdsModalContent = PdsModalContent$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PdsModalContent, defineCustomElement };
-//# sourceMappingURL=pds-modal-content.js.map
-
-//# sourceMappingURL=pds-modal-content.js.map
+import{proxyCustomElement as t,HTMLElement as e,h as o,Host as s,transformTag as n}from"@stencil/core/internal/client";const d=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.border="none",this.contentMaxHeight="none",this.userSetBorder=!1}componentWillLoad(){const t=this.el.getAttribute("border");this.userSetBorder=null!==t||"none"!==this.border}componentDidLoad(){this.calculateMaxHeight(),window.addEventListener("resize",this.handleResize.bind(this)),this.userSetBorder||setTimeout((()=>{this.el.addEventListener("scroll",this.handleScroll.bind(this)),setTimeout((()=>this.updateBorders()),100)}),100)}disconnectedCallback(){window.removeEventListener("resize",this.handleResize.bind(this)),this.userSetBorder||this.el.removeEventListener("scroll",this.handleScroll.bind(this)),this.mutationObserver&&this.mutationObserver.disconnect()}handleScroll(){this.updateBorders()}handleResize(){this.calculateMaxHeight(),setTimeout((()=>this.updateBorders()),50)}updateBorders(){if(this.userSetBorder)return;const t=this.el.closest("pds-modal");if(!t)return;if(!1===t.scrollable)return void(this.border="none");const e=this.el;if(!(e.scrollHeight>e.clientHeight))return void(this.border="none");const{scrollTop:o,scrollHeight:s,clientHeight:n}=e,d=o<=3,i=o+n>=s-3;this.border=d&&i?"none":d&&!i?"bottom":!d&&i?"top":"both"}calculateMaxHeight(){const t=this.el.closest("pds-modal");if(!t)return;const e=!1!==t.scrollable;setTimeout((()=>{if(!e){this.contentMaxHeight="none";const t=this.el.querySelector(".pds-modal-content");return void(t&&(t.style.maxHeight="none"))}const o=t.querySelector("pds-modal-header"),s=t.querySelector("pds-modal-footer"),n=o?o.offsetHeight:0,d=s?s.offsetHeight:0;if(n>0||d>0){const t=Math.round(.06*window.innerHeight);this.contentMaxHeight=`calc(100vh - ${n+d+48+t+50}px)`;const e=this.el.querySelector(".pds-modal-content");e&&(e.style.maxHeight=this.contentMaxHeight)}else this.contentMaxHeight="none";setTimeout((()=>this.updateBorders()),150)}),100),!this.mutationObserver&&t&&(this.mutationObserver=new MutationObserver((()=>{this.calculateMaxHeight()})),this.mutationObserver.observe(t,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["style","class"]}))}render(){const t="none"!==this.contentMaxHeight?{maxHeight:this.contentMaxHeight}:{};return o(s,{key:"fae42c1fc151e4855cd2c731802c15851473be79"},o("div",{key:"feb61d6a7227d8113b931df6280358cd9b4fe583",class:{"pds-modal-content":!0,["pds-modal-content--border-"+this.border]:!0},style:t,tabindex:"-1"},o("slot",{key:"1c9e55ecd1ad353699e5a4590ee04c9005719f6d"})))}get el(){return this}static get style(){return"pds-modal-content{display:block;-ms-flex:1 1 auto;flex:1 1 auto;width:100%}pds-modal-content:has(.pds-modal-content.pds-modal-content--border-none){border:0}pds-modal-content:has(.pds-modal-content.pds-modal-content--border-both){-webkit-border-after:1px solid var(--pine-color-border-subtle);border-block-end:1px solid var(--pine-color-border-subtle);-webkit-border-before:1px solid var(--pine-color-border-subtle);border-block-start:1px solid var(--pine-color-border-subtle)}pds-modal-content:has(.pds-modal-content.pds-modal-content--border-top){-webkit-border-before:1px solid var(--pine-color-border-subtle);border-block-start:1px solid var(--pine-color-border-subtle)}pds-modal-content:has(.pds-modal-content.pds-modal-content--border-bottom){-webkit-border-after:1px solid var(--pine-color-border-subtle);border-block-end:1px solid var(--pine-color-border-subtle)}.pds-modal-content{display:block;-ms-flex:1 1 auto;flex:1 1 auto;min-height:0;width:100%}"}},[260,"pds-modal-content",{border:[1537],contentMaxHeight:[32]}]),i=d,r=function(){"undefined"!=typeof customElements&&["pds-modal-content"].forEach((t=>{"pds-modal-content"===t&&(customElements.get(n(t))||customElements.define(n(t),d))}))};export{i as PdsModalContent,r as defineCustomElement}

package/components/pds-modal-footer.js

@@ -1,37 +1 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-
-const pdsModalFooterCss = "pds-modal-footer{display:block;width:100%}.pds-modal__footer{width:100%}";
-
-const PdsModalFooter$1 = /*@__PURE__*/ proxyCustomElement(class PdsModalFooter extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    render() {
-        return (h("footer", { key: '0fa58ce225ce31a1f40d6ce1d3276e716b36de8d', class: "pds-modal__footer" }, h("slot", { key: 'df0bbdb56c711c7eb34db7181f940de11d4449ef' })));
-    }
-    static get style() { return pdsModalFooterCss; }
-}, [260, "pds-modal-footer"]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-modal-footer"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-modal-footer":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsModalFooter$1);
-            }
-            break;
-    } });
-}
-
-const PdsModalFooter = PdsModalFooter$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PdsModalFooter, defineCustomElement };
-//# sourceMappingURL=pds-modal-footer.js.map
-
-//# sourceMappingURL=pds-modal-footer.js.map
+import{proxyCustomElement as e,HTMLElement as o,h as t,transformTag as d}from"@stencil/core/internal/client";const s=e(class extends o{constructor(e){super(),!1!==e&&this.__registerHost()}render(){return t("footer",{key:"0fa58ce225ce31a1f40d6ce1d3276e716b36de8d",class:"pds-modal__footer"},t("slot",{key:"df0bbdb56c711c7eb34db7181f940de11d4449ef"}))}static get style(){return"pds-modal-footer{display:block;width:100%}.pds-modal__footer{width:100%}"}},[260,"pds-modal-footer"]),r=s,c=function(){"undefined"!=typeof customElements&&["pds-modal-footer"].forEach((e=>{"pds-modal-footer"===e&&(customElements.get(d(e))||customElements.define(d(e),s))}))};export{r as PdsModalFooter,c as defineCustomElement}

package/components/pds-modal-header.js

@@ -1,37 +1 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-
-const pdsModalHeaderCss = "pds-modal-header{display:block;width:100%}.pds-modal__header{width:100%}";
-
-const PdsModalHeader$1 = /*@__PURE__*/ proxyCustomElement(class PdsModalHeader extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    render() {
-        return (h("header", { key: '1a471bd6dfa2b654f5a6ebdf8fb5baef728324b3', class: "pds-modal__header" }, h("slot", { key: '946a365ab3c2ca627d618188890d385c054b4c16' })));
-    }
-    static get style() { return pdsModalHeaderCss; }
-}, [260, "pds-modal-header"]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-modal-header"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-modal-header":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsModalHeader$1);
-            }
-            break;
-    } });
-}
-
-const PdsModalHeader = PdsModalHeader$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PdsModalHeader, defineCustomElement };
-//# sourceMappingURL=pds-modal-header.js.map
-
-//# sourceMappingURL=pds-modal-header.js.map
+import{proxyCustomElement as e,HTMLElement as d,h as t,transformTag as s}from"@stencil/core/internal/client";const a=e(class extends d{constructor(e){super(),!1!==e&&this.__registerHost()}render(){return t("header",{key:"1a471bd6dfa2b654f5a6ebdf8fb5baef728324b3",class:"pds-modal__header"},t("slot",{key:"946a365ab3c2ca627d618188890d385c054b4c16"}))}static get style(){return"pds-modal-header{display:block;width:100%}.pds-modal__header{width:100%}"}},[260,"pds-modal-header"]),r=a,o=function(){"undefined"!=typeof customElements&&["pds-modal-header"].forEach((e=>{"pds-modal-header"===e&&(customElements.get(s(e))||customElements.define(s(e),a))}))};export{r as PdsModalHeader,o as defineCustomElement}