@pine-ds/core 3.26.4 → 3.28.0

package/components/pds-textarea.js

@@ -1,376 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { i as isSpecTest, b as isRequired, e as exposeTypeProperty, a as assignDescription, m as messageId } from './form.js';
-import { d as debounceEvent } from './utils.js';
-import { i as inheritAriaAttributes, a as inheritAttributes } from './attributes.js';
-import { h as danger } from './index2.js';
-import { d as defineCustomElement$2 } from './pds-icon2.js';
-
-const labelCss = ":host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}";
-
-const pdsInputTokensCss = ":host{--pine-input-color-background-danger:var(--pine-color-red-050)}";
-
-const pdsTextareaCss = ":host{display:inline-block;width:100%}:host([aria-readonly=true]) textarea{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([aria-readonly=true])) .pds-textarea__field:not(.is-invalid){background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-accent);color:var(--pine-color-text-accent)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([aria-readonly=true])) .pds-textarea__field:not(.is-invalid):hover{border-color:var(--pine-color-accent-hover)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([aria-readonly=true])) .pds-textarea__field:not(.is-invalid):focus-visible{outline-color:var(--pine-color-focus-ring)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([aria-readonly=true])) .pds-textarea__field:not(.is-invalid)~.pds-textarea__character-counter{background:color-mix(in srgb, var(--pine-color-accent-disabled) 80%, transparent);color:var(--pine-color-text-accent)}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.pds-textarea__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.pds-textarea__action{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}label{display:block;-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-textarea__label-wrapper label{-webkit-margin-after:0;margin-block-end:0}.pds-textarea__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-textarea__error-message{color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-textarea__error-message pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-textarea__field-wrapper{display:inline-block;position:relative;width:100%}.pds-textarea__field{background-color:var(--pine-color-background-container);border:var(--pine-border);border-radius:calc(var(--pine-dimension-xs) * 1.25);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-height:calc(var(--pine-dimension-xl) * 2);min-width:calc(var(--pine-dimension-xl) * 2);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);resize:both;width:100%}:host([max-length]) .pds-textarea__field{padding-bottom:calc(var(--pine-dimension-xs) + var(--pine-dimension-md))}.pds-textarea__field:hover:not(:disabled,.is-invalid){border:var(--pine-border-hover)}.pds-textarea__field:disabled{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-textarea__field:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-textarea__field::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field.is-invalid{background-color:var(--pine-input-color-background-danger);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) .pds-textarea__field.is-invalid{background-color:var(--pine-color-red-950)}.pds-textarea__field.is-invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-textarea__character-counter{background:color-mix(in srgb, var(--pine-color-background-container) 80%, transparent);border-radius:calc(var(--pine-dimension-2xs) * 0.5);color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm-medium);padding:calc(var(--pine-dimension-2xs) * 0.5) var(--pine-dimension-2xs);pointer-events:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;z-index:var(--pine-z-index)}:host([aria-disabled=true]) .pds-textarea__character-counter{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-disabled)}:host([aria-readonly=true]) .pds-textarea__character-counter{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}.pds-textarea__field.is-invalid~.pds-textarea__character-counter{background-color:var(--pine-input-color-background-danger)}:host-context([data-theme=dark]) .pds-textarea__field.is-invalid~.pds-textarea__character-counter{background-color:var(--pine-color-red-950)}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}";
-
-const PdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class PdsTextarea extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.pdsBlur = createEvent(this, "pdsBlur", 7);
-        this.pdsFocus = createEvent(this, "pdsFocus", 7);
-        this.pdsInput = createEvent(this, "pdsInput", 7);
-        this.pdsTextareaChange = createEvent(this, "pdsTextareaChange", 7);
-        this.pdsKeyDown = createEvent(this, "pdsKeyDown", 7);
-        this.inheritedAttributes = {};
-        this._type = 'textarea';
-        /**
-         * Determines whether or not the textarea is disabled.
-         * @defaultValue false
-         */
-        this.disabled = false;
-        /**
-         * Determines whether or not the textarea is invalid or throws an error.
-         * @defaultValue false
-         */
-        this.invalid = false; // eslint-disable-line @stencil-community/strict-mutable
-        /**
-         * Specifies the name. Submitted with the form name/value pair. This value will mirror the componentId.
-         */
-        this.name = this.componentId;
-        /**
-         * Determines whether or not the textarea is readonly.
-         * @defaultValue false
-         */
-        this.readonly = false;
-        /**
-         * Determines whether or not the textarea is required.
-         * @defaultValue false
-         */
-        this.required = false;
-        /**
-         * The value of the textarea.
-         */
-        this.value = '';
-        this.hasFocus = false;
-        /**
-         * If true, the textarea has action content in the label area
-         */
-        this.hasAction = false;
-        this.onBlur = (ev) => {
-            this.hasFocus = false;
-            if (this.focusedValue !== this.value) {
-                this.emitValueChange(ev);
-            }
-            this.pdsBlur.emit(ev);
-        };
-        this.onFocus = (ev) => {
-            this.hasFocus = true;
-            this.focusedValue = this.value;
-            this.pdsFocus.emit(ev);
-        };
-        this.onInput = (ev) => {
-            const input = ev.target;
-            if (input) {
-                // Handle maxLength validation
-                if (this.maxLength && input.value.length > this.maxLength) {
-                    // Prevent input beyond maxLength
-                    input.value = input.value.substring(0, this.maxLength);
-                }
-                this.value = input.value || '';
-            }
-            this.emitInputChange(ev);
-            // Update counter position when content changes
-            if (this.maxLength && typeof ResizeObserver !== 'undefined') {
-                // Use requestAnimationFrame to ensure DOM is updated
-                requestAnimationFrame(() => {
-                    this.updateCharacterCounterPosition();
-                });
-            }
-        };
-        this.onTextareaChange = (ev) => {
-            this.emitValueChange(ev);
-        };
-        this.onKeyDown = (ev) => {
-            this.pdsKeyDown.emit(ev);
-        };
-    }
-    /**
-     * Sets focus on the native `textarea` in the `pds-textarea`. Use this method instead of the global
-     * `textarea.focus()`.
-     */
-    async setFocus() {
-        if (this.nativeTextarea) {
-            this.nativeTextarea.focus();
-        }
-    }
-    debounceChanged() {
-        const { pdsInput, debounce, originalPdsInput } = this;
-        this.pdsInput = debounce === undefined ? originalPdsInput !== null && originalPdsInput !== void 0 ? originalPdsInput : pdsInput : debounceEvent(pdsInput, debounce);
-    }
-    /**
-     * Update the native input element when the value changes
-     */
-    valueChanged() {
-        const nativeTextarea = this.nativeTextarea;
-        const value = this.getValue();
-        if (nativeTextarea && nativeTextarea.value !== value) {
-            nativeTextarea.value = value;
-        }
-        // Update form value for Form Associated Custom Elements API
-        this.updateFormValue();
-        // Update character counter position in case content changes affect sizing
-        if (this.maxLength && typeof ResizeObserver !== 'undefined') {
-            this.updateCharacterCounterPosition();
-        }
-    }
-    maxLengthChanged() {
-        // Setup or teardown ResizeObserver based on maxLength
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-        }
-        if (this.maxLength && this.nativeTextarea) {
-            this.setupResizeObserver();
-        }
-        // Update ElementInternals validity when maxLength changes
-        if (!isSpecTest() && this.internals && this.internals.setValidity && this.nativeTextarea) {
-            const isTooLong = this.nativeTextarea.value.length > (this.maxLength || 0);
-            this.internals.setValidity({ tooLong: isTooLong }, isTooLong ? 'Value exceeds maxLength' : '', this.nativeTextarea);
-        }
-    }
-    /**
-     * Emits an `pdsInput` event.
-     */
-    emitInputChange(event) {
-        const { value } = this;
-        this.pdsInput.emit({ value, event });
-    }
-    /**
-     * Emits an `pdsTextareaChange` event.
-     */
-    emitValueChange(event) {
-        const textarea = event.target;
-        isRequired(textarea, this);
-        const { value } = textarea;
-        // Checks for both null and undefined values
-        const newValue = value == null ? value : value.toString();
-        this.focusedValue = newValue;
-        this.pdsTextareaChange.emit({ value: newValue, event });
-    }
-    getValue() {
-        return this.value || '';
-    }
-    textareaClassNames() {
-        const classNames = ['pds-textarea__field'];
-        if (this.invalid && this.invalid === true) {
-            classNames.push('is-invalid');
-        }
-        return classNames.join('  ');
-    }
-    connectedCallback() {
-        this.debounceChanged();
-        // Initialize ElementInternals for form association (only once per element instance)
-        if (this.el.attachInternals && !this.internals) {
-            this.internals = this.el.attachInternals();
-        }
-    }
-    disconnectedCallback() {
-        // Clean up ResizeObserver
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-        }
-    }
-    componentWillLoad() {
-        this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el));
-        this.hasAction = this.el.querySelector('[slot="action"]') !== null;
-    }
-    componentDidLoad() {
-        this.originalPdsInput = this.pdsInput;
-        // Set initial form value
-        this.updateFormValue();
-        // Setup ResizeObserver for character counter positioning
-        this.setupResizeObserver();
-        // Expose type property on the element instance to match native form element behavior
-        exposeTypeProperty(this.el, () => this._type);
-    }
-    /**
-     * Sets up ResizeObserver to track textarea resize for character counter positioning
-     */
-    setupResizeObserver() {
-        if (!this.maxLength || !this.nativeTextarea)
-            return;
-        // ResizeObserver may not be available in test environments
-        if (typeof ResizeObserver !== 'undefined') {
-            this.resizeObserver = new ResizeObserver(() => {
-                // Use requestAnimationFrame to ensure DOM updates are complete
-                requestAnimationFrame(() => {
-                    this.updateCharacterCounterPosition();
-                });
-            });
-            this.resizeObserver.observe(this.nativeTextarea);
-            // Initial positioning with a small delay to ensure counter is rendered
-            requestAnimationFrame(() => {
-                this.updateCharacterCounterPosition();
-            });
-        }
-    }
-    /**
-     * Updates character counter position to stay within textarea boundaries during resize
-     */
-    updateCharacterCounterPosition() {
-        if (!this.characterCounter || !this.nativeTextarea)
-            return;
-        // Skip positioning in test environments where ResizeObserver isn't available
-        if (typeof ResizeObserver === 'undefined')
-            return;
-        // Ensure the character counter has been rendered and has dimensions
-        if (this.characterCounter.offsetWidth === 0 || this.characterCounter.offsetHeight === 0) {
-            // Counter not ready or component hidden - return and let resize/input observers handle positioning later
-            return;
-        }
-        // Position based on textarea's actual dimensions (which change during manual resize)
-        const textareaWidth = this.nativeTextarea.offsetWidth;
-        const textareaHeight = this.nativeTextarea.offsetHeight;
-        const counterWidth = this.characterCounter.offsetWidth;
-        const counterHeight = this.characterCounter.offsetHeight;
-        // Calculate position within textarea boundaries with padding from edges
-        const rightPosition = textareaWidth - counterWidth - 8;
-        const bottomPosition = textareaHeight - counterHeight - 8;
-        // Ensure counter stays within textarea boundaries even when resized very small
-        const finalLeft = Math.max(8, Math.min(rightPosition, textareaWidth - counterWidth - 8));
-        const finalTop = Math.max(8, Math.min(bottomPosition, textareaHeight - counterHeight - 8));
-        // Apply absolute positioning within the field wrapper
-        this.characterCounter.style.position = 'absolute';
-        this.characterCounter.style.left = `${finalLeft}px`;
-        this.characterCounter.style.top = `${finalTop}px`;
-        this.characterCounter.style.right = 'auto';
-        this.characterCounter.style.bottom = 'auto';
-    }
-    /**
-     * Renders the character counter when maxLength is set
-     */
-    renderCharacterCounter() {
-        if (!this.maxLength) {
-            return null;
-        }
-        const currentLength = this.getValue().length;
-        return (h("div", { class: "pds-textarea__character-counter", ref: (el) => this.characterCounter = el, role: "status", "aria-live": "polite", "aria-label": `${currentLength} of ${this.maxLength} characters` }, currentLength, " / ", this.maxLength));
-    }
-    renderAction() {
-        const hasAction = this.el.querySelector('[slot="action"]') !== null;
-        if (hasAction) {
-            return (h("div", { class: "pds-textarea__action", part: "action" }, h("slot", { name: "action" })));
-        }
-        return null;
-    }
-    /**
-     * Updates the form value using ElementInternals API
-     */
-    updateFormValue() {
-        if (isSpecTest())
-            return;
-        if (this.internals && this.internals.setFormValue) {
-            const value = this.getValue();
-            this.internals.setFormValue(value || null);
-            // Set validity based on native textarea validation
-            if (this.nativeTextarea && this.internals && this.internals.setValidity) {
-                this.internals.setValidity(this.nativeTextarea.validity, this.nativeTextarea.validationMessage, this.nativeTextarea);
-            }
-        }
-    }
-    /**
-     * Form Associated Custom Elements API: Called when the form is reset
-     */
-    formResetCallback() {
-        this.value = '';
-        this.updateFormValue();
-    }
-    /**
-     * Form Associated Custom Elements API: Called when the form is disabled
-     */
-    formDisabledCallback(disabled) {
-        this.disabled = disabled;
-    }
-    /**
-     * Form Associated Custom Elements API: Called to restore form state
-     */
-    formStateRestoreCallback(state) {
-        if (typeof state === 'string') {
-            this.value = state;
-        }
-        else if (state instanceof FormData && this.name) {
-            // Extract value from FormData using the textarea's name
-            const value = state.get(this.name);
-            if (typeof value === 'string') {
-                this.value = value;
-            }
-        }
-    }
-    render() {
-        const value = this.getValue();
-        return (h(Host, { key: '09726ef6454fe84a5c8d0ea25c6e8a7a6da128f9', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '6244104f11d26b25a908fbaf13a815988a3c33d9', class: "pds-textarea" }, this.label &&
-            h("div", { key: '5dd7f6caedd7ebf5ecaacf8d111ec5e2426e84ae', class: "pds-textarea__label-wrapper" }, h("label", { key: 'd19f62cd28612423abf0d5696ff1cd88f39d32fe', htmlFor: this.componentId }, h("span", { key: '37f4e9e34ae3205bafa5f1bc8574a98d3a90060d', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: '4c3c8fadc5596630485ee1775f5d87d77c11d95b', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: 'a60be5f3d362cb9bcd2ecf5af16ffc467fc8322a', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
-            h("p", { key: 'ae03337ef85ac2a3995e967fe671e0ad2c352710', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            h("p", { key: 'a2bda9a477e7d2b81862833da43158a626d8cc6f', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '5ac785e8012aeb49dd0b1c5823233671531b0a7a', icon: danger, size: "small" }), this.errorMessage))));
-    }
-    static get formAssociated() { return true; }
-    get el() { return this; }
-    static get watchers() { return {
-        "debounce": ["debounceChanged"],
-        "value": ["valueChanged"],
-        "maxLength": ["maxLengthChanged"]
-    }; }
-    static get style() { return labelCss + (pdsInputTokensCss + pdsTextareaCss); }
-}, [321, "pds-textarea", {
-        "autocomplete": [1],
-        "componentId": [1, "component-id"],
-        "disabled": [4],
-        "debounce": [2],
-        "errorMessage": [1, "error-message"],
-        "helperMessage": [1, "helper-message"],
-        "invalid": [1028],
-        "label": [1],
-        "hideLabel": [4, "hide-label"],
-        "name": [1],
-        "placeholder": [1],
-        "readonly": [4],
-        "required": [4],
-        "rows": [2],
-        "maxLength": [514, "max-length"],
-        "highlight": [516],
-        "value": [1025],
-        "hasFocus": [32],
-        "hasAction": [32],
-        "setFocus": [64]
-    }, undefined, {
-        "debounce": ["debounceChanged"],
-        "value": ["valueChanged"],
-        "maxLength": ["maxLengthChanged"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-textarea", "pds-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-textarea":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsTextarea$1);
-            }
-            break;
-        case "pds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PdsTextarea = PdsTextarea$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PdsTextarea, defineCustomElement };
-//# sourceMappingURL=pds-textarea.js.map
-
-//# sourceMappingURL=pds-textarea.js.map
+import{proxyCustomElement as e,HTMLElement as t,createEvent as i,h as a,Host as r,transformTag as s}from"@stencil/core/internal/client";import{i as o,b as n,e as l,a as d,m as c}from"./form.js";import{d as h}from"./utils.js";import{i as p,a as b}from"./attributes.js";import{h as u}from"./index2.js";import{f as m}from"./i18n-format.js";import{d as x}from"./pds-icon2.js";const v=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.pdsBlur=i(this,"pdsBlur",7),this.pdsFocus=i(this,"pdsFocus",7),this.pdsInput=i(this,"pdsInput",7),this.pdsTextareaChange=i(this,"pdsTextareaChange",7),this.pdsKeyDown=i(this,"pdsKeyDown",7),this.inheritedAttributes={},this._type="textarea",this.disabled=!1,this.invalid=!1,this.name=this.componentId,this.readonly=!1,this.required=!1,this.value="",this.hasFocus=!1,this.hasAction=!1,this.characterCountLabel="{current} of {max} characters",this.onBlur=e=>{this.hasFocus=!1,this.focusedValue!==this.value&&this.emitValueChange(e),this.pdsBlur.emit(e)},this.onFocus=e=>{this.hasFocus=!0,this.focusedValue=this.value,this.pdsFocus.emit(e)},this.onInput=e=>{const t=e.target;t&&(this.maxLength&&t.value.length>this.maxLength&&(t.value=t.value.substring(0,this.maxLength)),this.value=t.value||""),this.emitInputChange(e),this.maxLength&&"undefined"!=typeof ResizeObserver&&requestAnimationFrame((()=>{this.updateCharacterCounterPosition()}))},this.onTextareaChange=e=>{this.emitValueChange(e)},this.onKeyDown=e=>{this.pdsKeyDown.emit(e)}}async setFocus(){this.nativeTextarea&&this.nativeTextarea.focus()}debounceChanged(){const{pdsInput:e,debounce:t,originalPdsInput:i}=this;this.pdsInput=void 0===t?null!=i?i:e:h(e,t)}valueChanged(){const e=this.nativeTextarea,t=this.getValue();e&&e.value!==t&&(e.value=t),this.updateFormValue(),this.maxLength&&"undefined"!=typeof ResizeObserver&&this.updateCharacterCounterPosition()}maxLengthChanged(){if(this.resizeObserver&&this.resizeObserver.disconnect(),this.maxLength&&this.nativeTextarea&&this.setupResizeObserver(),!o()&&this.internals&&this.internals.setValidity&&this.nativeTextarea){const e=this.nativeTextarea.value.length>(this.maxLength||0);this.internals.setValidity({tooLong:e},e?"Value exceeds maxLength":"",this.nativeTextarea)}}emitInputChange(e){const{value:t}=this;this.pdsInput.emit({value:t,event:e})}emitValueChange(e){const t=e.target;n(t,this);const{value:i}=t,a=null==i?i:""+i;this.focusedValue=a,this.pdsTextareaChange.emit({value:a,event:e})}getValue(){return this.value||""}textareaClassNames(){const e=["pds-textarea__field"];return this.invalid&&!0===this.invalid&&e.push("is-invalid"),e.join("  ")}connectedCallback(){this.debounceChanged(),this.el.attachInternals&&!this.internals&&(this.internals=this.el.attachInternals())}disconnectedCallback(){this.resizeObserver&&this.resizeObserver.disconnect()}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},p(this.el)),b(this.el)),this.hasAction=null!==this.el.querySelector('[slot="action"]')}componentDidLoad(){this.originalPdsInput=this.pdsInput,this.updateFormValue(),this.setupResizeObserver(),l(this.el,(()=>this._type))}setupResizeObserver(){this.maxLength&&this.nativeTextarea&&"undefined"!=typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver((()=>{requestAnimationFrame((()=>{this.updateCharacterCounterPosition()}))})),this.resizeObserver.observe(this.nativeTextarea),requestAnimationFrame((()=>{this.updateCharacterCounterPosition()})))}updateCharacterCounterPosition(){if(!this.characterCounter||!this.nativeTextarea)return;if("undefined"==typeof ResizeObserver)return;if(0===this.characterCounter.offsetWidth||0===this.characterCounter.offsetHeight)return;const e=this.nativeTextarea.offsetWidth,t=this.nativeTextarea.offsetHeight,i=this.characterCounter.offsetWidth,a=this.characterCounter.offsetHeight,r=t-a-8,s=Math.max(8,Math.min(e-i-8,e-i-8)),o=Math.max(8,Math.min(r,t-a-8));this.characterCounter.style.position="absolute",this.characterCounter.style.left=s+"px",this.characterCounter.style.top=o+"px",this.characterCounter.style.right="auto",this.characterCounter.style.bottom="auto"}renderCharacterCounter(){if(!this.maxLength)return null;const e=this.getValue().length;return a("div",{class:"pds-textarea__character-counter",ref:e=>this.characterCounter=e,role:"status","aria-live":"polite","aria-label":m(this.characterCountLabel,{current:e,max:this.maxLength})},e," / ",this.maxLength)}renderAction(){return null!==this.el.querySelector('[slot="action"]')?a("div",{class:"pds-textarea__action",part:"action"},a("slot",{name:"action"})):null}updateFormValue(){if(!o()&&this.internals&&this.internals.setFormValue){const e=this.getValue();this.internals.setFormValue(e||null),this.nativeTextarea&&this.internals&&this.internals.setValidity&&this.internals.setValidity(this.nativeTextarea.validity,this.nativeTextarea.validationMessage,this.nativeTextarea)}}formResetCallback(){this.value="",this.updateFormValue()}formDisabledCallback(e){this.disabled=e}formStateRestoreCallback(e){if("string"==typeof e)this.value=e;else if(e instanceof FormData&&this.name){const t=e.get(this.name);"string"==typeof t&&(this.value=t)}}render(){const e=this.getValue();return a(r,{key:"838d12ba686fb041996c44522d3fd30e1b56c610","aria-disabled":this.disabled?"true":null,"aria-readonly":this.readonly?"true":null,"has-action":this.hasAction&&!this.hideLabel?"true":null},a("div",{key:"bd3eef138a5c8f2cd4e48c007561bb1b12f4e575",class:"pds-textarea"},this.label&&a("div",{key:"f83f23b17cd157d48bb5c0c5067ca5f611d73529",class:"pds-textarea__label-wrapper"},a("label",{key:"896b7b495ad6f7deb8d4738e623f0676f0a98c1f",htmlFor:this.componentId},a("span",{key:"02b06db969467f6c4e83e0f713bee0be76f8dfff",class:this.hideLabel?"visually-hidden":""},this.label)),!this.hideLabel&&this.renderAction()),a("div",{key:"15c5964576e73db36cee4a9ca868c28571250a27",class:"pds-textarea__field-wrapper"},a("textarea",Object.assign({key:"74713a5d438fc01103ca99f0c77abd84b7d2d16a",ref:e=>this.nativeTextarea=e,"aria-describedby":d(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":void 0,autocomplete:this.autocomplete,class:this.textareaClassNames(),disabled:this.disabled,id:this.componentId,maxlength:this.maxLength,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,rows:this.rows,onBlur:this.onBlur,onChange:this.onTextareaChange,onFocus:this.onFocus,onInput:this.onInput,onKeyDown:this.onKeyDown},this.inheritedAttributes),e),this.renderCharacterCounter()),this.helperMessage&&a("p",{key:"e42f174f4153363ce745db264fd3a9ee46178a03",class:"pds-textarea__helper-message",id:c(this.componentId,"helper")},this.helperMessage),this.invalid&&a("p",{key:"44189515611ff9fa51d2815a7066626b6ba5df2c","aria-live":"assertive",class:"pds-textarea__error-message",id:c(this.componentId,"error")},a("pds-icon",{key:"64d275da09cdf1c2cc27d4c0a780dd414c265534",icon:u,size:"small"}),this.errorMessage)))}static get formAssociated(){return!0}get el(){return this}static get watchers(){return{debounce:[{debounceChanged:0}],value:[{valueChanged:0}],maxLength:[{maxLengthChanged:0}]}}static get style(){return":host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}:host{--pine-input-color-background-danger:var(--pine-color-red-050)}:host{display:inline-block;width:100%}:host([aria-readonly=true]) textarea{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([aria-readonly=true])) .pds-textarea__field:not(.is-invalid){background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-accent);color:var(--pine-color-text-accent)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([aria-readonly=true])) .pds-textarea__field:not(.is-invalid):hover{border-color:var(--pine-color-accent-hover)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([aria-readonly=true])) .pds-textarea__field:not(.is-invalid):focus-visible{outline-color:var(--pine-color-focus-ring)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([aria-readonly=true])) .pds-textarea__field:not(.is-invalid)~.pds-textarea__character-counter{background:color-mix(in srgb, var(--pine-color-accent-disabled) 80%, transparent);color:var(--pine-color-text-accent)}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.pds-textarea__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.pds-textarea__action{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}label{display:block;-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-textarea__label-wrapper label{-webkit-margin-after:0;margin-block-end:0}.pds-textarea__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-textarea__error-message{color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-textarea__error-message pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-textarea__field-wrapper{display:inline-block;position:relative;width:100%}.pds-textarea__field{background-color:var(--pine-color-background-container);border:var(--pine-border);border-radius:calc(var(--pine-dimension-xs) * 1.25);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-height:calc(var(--pine-dimension-xl) * 2);min-width:calc(var(--pine-dimension-xl) * 2);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);resize:both;width:100%}:host([max-length]) .pds-textarea__field{padding-bottom:calc(var(--pine-dimension-xs) + var(--pine-dimension-md))}.pds-textarea__field:hover:not(:disabled,.is-invalid){border:var(--pine-border-hover)}.pds-textarea__field:disabled{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-textarea__field:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-textarea__field::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field.is-invalid{background-color:var(--pine-input-color-background-danger);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) .pds-textarea__field.is-invalid{background-color:var(--pine-color-red-950)}.pds-textarea__field.is-invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-textarea__character-counter{background:color-mix(in srgb, var(--pine-color-background-container) 80%, transparent);border-radius:calc(var(--pine-dimension-2xs) * 0.5);color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm-medium);padding:calc(var(--pine-dimension-2xs) * 0.5) var(--pine-dimension-2xs);pointer-events:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;z-index:var(--pine-z-index)}:host([aria-disabled=true]) .pds-textarea__character-counter{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-disabled)}:host([aria-readonly=true]) .pds-textarea__character-counter{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}.pds-textarea__field.is-invalid~.pds-textarea__character-counter{background-color:var(--pine-input-color-background-danger)}:host-context([data-theme=dark]) .pds-textarea__field.is-invalid~.pds-textarea__character-counter{background-color:var(--pine-color-red-950)}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}"}},[321,"pds-textarea",{autocomplete:[1],componentId:[1,"component-id"],disabled:[4],debounce:[2],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[1028],label:[1],hideLabel:[4,"hide-label"],name:[1],placeholder:[1],readonly:[4],required:[4],rows:[2],maxLength:[514,"max-length"],highlight:[516],value:[1025],characterCountLabel:[1,"character-count-label"],hasFocus:[32],hasAction:[32],setFocus:[64]},void 0,{debounce:[{debounceChanged:0}],value:[{valueChanged:0}],maxLength:[{maxLengthChanged:0}]}]),f=v,g=function(){"undefined"!=typeof customElements&&["pds-textarea","pds-icon"].forEach((e=>{switch(e){case"pds-textarea":customElements.get(s(e))||customElements.define(s(e),v);break;case"pds-icon":customElements.get(s(e))||x()}}))};export{f as PdsTextarea,g as defineCustomElement}

package/components/pds-toast.js

@@ -1,175 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './pds-icon2.js';
-
-const pdsToastCss = ":host{--animation-duration:var(--pine-motion-duration-slow);--animation-timing:var(--pine-motion-easing-in-out);--padding-inline:var(--pine-dimension-md);--padding-inline-desktop:var(--pine-dimension-2xl);--sizing-height-default:68px;--sizing-min-width:calc(var(--sizing-total-width) - (var(--padding-inline) * 2));--sizing-min-width-desktop:calc(var(--sizing-total-width) - (var(--padding-inline-desktop) * 2));--sizing-total-width:350px;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;font:var(--pine-typography-body-medium)}.pds-toast{-ms-flex-align:center;align-items:center;-webkit-animation:pds-toast-animate-in var(--animation-duration) var(--animation-timing);animation:pds-toast-animate-in var(--animation-duration) var(--animation-timing);background-color:var(--pine-color-primary);border-radius:var(--pine-dimension-xs);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);color:var(--pine-color-text-primary);display:-ms-flexbox;display:flex;height:var(--sizing-height-default);-ms-flex-pack:start;justify-content:flex-start;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);max-width:90vw;min-width:var(--sizing-min-width);padding:0 var(--padding-inline);position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media screen and (max-width: 767px){.pds-toast{height:36px;max-width:calc(100vw - var(--pine-dimension-2xs) * 2);min-width:auto;padding-inline:var(--pine-dimension-2xs)}}.pds-toast--danger{background-color:var(--pine-color-danger)}.pds-toast--loading .pds-toast__loader{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm);position:relative}.pds-toast--loading .pds-toast__loader-spinner{-webkit-animation:pds-toast-rotate 2s linear infinite;animation:pds-toast-rotate 2s linear infinite;height:20px;width:20px}.pds-toast--loading .pds-toast__loader-path{-webkit-animation:pds-toast-dash 1.5s ease-in-out infinite;animation:pds-toast-dash 1.5s ease-in-out infinite;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round}.pds-toast__icon{color:var(--pine-color-text-primary);display:-ms-inline-flexbox;display:inline-flex;-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm)}.pds-toast__message{font:var(--pine-typography-body-sm-medium);-webkit-margin-end:auto;margin-inline-end:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-toast__message ::slotted(a){color:var(--pine-color-text-primary);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs);opacity:0.7;text-decoration:underline}.pds-toast__message ::slotted(a):hover,.pds-toast__message ::slotted(a):focus-visible{opacity:1}.pds-toast__message ::slotted(a):focus-visible{outline:2px solid var(--pine-color-text-primary);outline-offset:2px}.pds-toast__button{-ms-flex-align:center;align-items:center;background:none;border:0;border-radius:var(--pine-border-radius-full);color:inherit;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);opacity:0.7;padding:0;white-space:nowrap}.pds-toast__button:hover,.pds-toast__button:focus{opacity:1}.pds-toast__button:focus{outline:var(--pine-outline-focus);outline-offset:var(--pine-dimension-2xs)}@-webkit-keyframes pds-toast-animate-in{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes pds-toast-animate-in{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes pds-toast-animate-out{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes pds-toast-animate-out{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@-webkit-keyframes pds-toast-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes pds-toast-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes pds-toast-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}@keyframes pds-toast-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}:host([hidden]) .pds-toast,.pds-toast--animating-out{-webkit-animation:pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;animation:pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;pointer-events:none;}";
-
-/** Fallback when computed `--animation-duration` is unavailable (matches `--pine-motion-duration-slow`). */
-const TOAST_DISMISS_ANIMATION_MS = 300;
-const PdsToast$1 = /*@__PURE__*/ proxyCustomElement(class PdsToast extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.pdsToastDismissed = createEvent(this, "pdsToastDismissed", 7);
-        /**
-         * Whether the toast can be dismissed manually via the close button.
-         * Note: This only controls manual dismissal. Auto-dismissal via duration still applies.
-         * @default true
-         */
-        this.dismissible = true;
-        /**
-         * The duration in milliseconds to show the toast before auto-dismissing.
-         * Set to 0 to disable auto-dismiss.
-         * @default 4500
-         */
-        this.duration = 4500;
-        /**
-         * The type of toast to display.
-         * - default: Grey background (default)
-         * - danger: Red background
-         * - loading: With spinner animation
-         * @default 'default'
-         */
-        this.type = 'default';
-        /**
-         * Whether the toast is currently visible.
-         */
-        this.isVisible = true;
-        /**
-         * Whether the toast is animating out.
-         */
-        this.isAnimatingOut = false;
-    }
-    componentDidLoad() {
-        if (this.duration > 0) {
-            this.startDismissTimer();
-        }
-    }
-    disconnectedCallback() {
-        this.cleanup();
-    }
-    handleDurationChange(newDuration) {
-        if (this.dismissTimer) {
-            window.clearTimeout(this.dismissTimer);
-            this.dismissTimer = undefined;
-        }
-        if (newDuration > 0) {
-            this.startDismissTimer();
-        }
-    }
-    async dismiss() {
-        // Start the animation out
-        this.isAnimatingOut = true;
-        await this.waitForDismissAnimation();
-        this.isVisible = false;
-        this.cleanup();
-        this.pdsToastDismissed.emit({ componentId: this.componentId });
-    }
-    // Private methods
-    waitForDismissAnimation() {
-        const durationMs = this.getDismissAnimationDurationMs();
-        if (durationMs <= 0) {
-            return Promise.resolve();
-        }
-        return new Promise((resolve) => window.setTimeout(resolve, durationMs));
-    }
-    getDismissAnimationDurationMs() {
-        if (typeof window === 'undefined') {
-            return TOAST_DISMISS_ANIMATION_MS;
-        }
-        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
-            return 0;
-        }
-        const fromCss = this.parseCssDurationToMs(getComputedStyle(this.el).getPropertyValue('--animation-duration').trim());
-        return fromCss !== null && fromCss !== void 0 ? fromCss : TOAST_DISMISS_ANIMATION_MS;
-    }
-    parseCssDurationToMs(value) {
-        if (!value) {
-            return undefined;
-        }
-        if (value === '0' || value === '0ms' || value === '0s') {
-            return 0;
-        }
-        if (value.endsWith('ms')) {
-            const ms = Number.parseFloat(value);
-            return Number.isFinite(ms) ? ms : undefined;
-        }
-        if (value.endsWith('s')) {
-            const seconds = Number.parseFloat(value);
-            return Number.isFinite(seconds) ? seconds * 1000 : undefined;
-        }
-        return undefined;
-    }
-    cleanup() {
-        if (this.dismissTimer) {
-            window.clearTimeout(this.dismissTimer);
-            this.dismissTimer = undefined;
-        }
-    }
-    startDismissTimer() {
-        this.dismissTimer = window.setTimeout(() => {
-            this.dismiss();
-        }, this.duration);
-    }
-    renderIcon() {
-        // Loading type takes priority
-        if (this.type === 'loading') {
-            return (h("div", { class: "pds-toast__loader" }, h("svg", { class: "pds-toast__loader-spinner", viewBox: "25 25 50 50", "aria-hidden": "true" }, h("circle", { class: "pds-toast__loader-path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "4", "stroke-linecap": "round" }))));
-        }
-        // Return icon if provided, otherwise undefined (which renders as nothing)
-        return this.icon && h("pds-icon", { name: this.icon, class: "pds-toast__icon" });
-    }
-    render() {
-        return (h(Host, { key: '7768cbf398d4592b774734abdf5e9f1f4d4fb7e8', hidden: !this.isVisible }, h("div", { key: 'c17b00c76bd42d1040b8ef08a354e10346a79aa4', class: {
-                'pds-toast': true,
-                [`pds-toast--${this.type}`]: this.type !== 'default',
-                'pds-toast--animating-out': this.isAnimatingOut
-            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), h("span", { key: 'cb7066fd49ae8674d5de80ecde21e63eecbcdf29', class: "pds-toast__message" }, h("slot", { key: '5c08d8b5cc54e02bed2906c2d52b894301fdca5d' })), this.dismissible && (h("button", { key: '4edd83a8521f76a2abddfe64caaac932962745ff', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
-                this.dismiss();
-            }, "aria-label": "Dismiss message" }, h("pds-icon", { key: 'c5cf65f889bfcd85e3fdab437539e7ee3f6e0465', name: "remove" }))))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "duration": ["handleDurationChange"]
-    }; }
-    static get style() { return pdsToastCss; }
-}, [257, "pds-toast", {
-        "componentId": [1, "component-id"],
-        "dismissible": [4],
-        "duration": [2],
-        "icon": [1],
-        "type": [1],
-        "isVisible": [32],
-        "isAnimatingOut": [32],
-        "dismiss": [64]
-    }, undefined, {
-        "duration": ["handleDurationChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-toast", "pds-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-toast":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsToast$1);
-            }
-            break;
-        case "pds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PdsToast = PdsToast$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PdsToast, defineCustomElement };
-//# sourceMappingURL=pds-toast.js.map
-
-//# sourceMappingURL=pds-toast.js.map
+import{proxyCustomElement as t,HTMLElement as i,createEvent as a,h as s,Host as e,transformTag as n}from"@stencil/core/internal/client";import{d as o}from"./pds-icon2.js";const r=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.pdsToastDismissed=a(this,"pdsToastDismissed",7),this.dismissible=!0,this.duration=4500,this.type="default",this.dismissLabel="Dismiss message",this.isVisible=!0,this.isAnimatingOut=!1}componentDidLoad(){this.duration>0&&this.startDismissTimer()}disconnectedCallback(){this.cleanup()}handleDurationChange(t){this.dismissTimer&&(window.clearTimeout(this.dismissTimer),this.dismissTimer=void 0),t>0&&this.startDismissTimer()}async dismiss(){this.isAnimatingOut=!0,await this.waitForDismissAnimation(),this.isVisible=!1,this.cleanup(),this.pdsToastDismissed.emit({componentId:this.componentId})}waitForDismissAnimation(){const t=this.getDismissAnimationDurationMs();return t<=0?Promise.resolve():new Promise((i=>window.setTimeout(i,t)))}getDismissAnimationDurationMs(){if("undefined"==typeof window)return 300;if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return 0;const t=this.parseCssDurationToMs(getComputedStyle(this.el).getPropertyValue("--animation-duration").trim());return null!=t?t:300}parseCssDurationToMs(t){if(t){if("0"===t||"0ms"===t||"0s"===t)return 0;if(t.endsWith("ms")){const i=Number.parseFloat(t);return Number.isFinite(i)?i:void 0}if(t.endsWith("s")){const i=Number.parseFloat(t);return Number.isFinite(i)?1e3*i:void 0}}}cleanup(){this.dismissTimer&&(window.clearTimeout(this.dismissTimer),this.dismissTimer=void 0)}startDismissTimer(){this.dismissTimer=window.setTimeout((()=>{this.dismiss()}),this.duration)}renderIcon(){return"loading"===this.type?s("div",{class:"pds-toast__loader"},s("svg",{class:"pds-toast__loader-spinner",viewBox:"25 25 50 50","aria-hidden":"true"},s("circle",{class:"pds-toast__loader-path",cx:"50",cy:"50",r:"20",fill:"none",stroke:"currentColor","stroke-width":"4","stroke-linecap":"round"}))):this.icon&&s("pds-icon",{name:this.icon,class:"pds-toast__icon"})}render(){return s(e,{key:"a1ec97158a6665aa25b58b1954b4b5c622590615",hidden:!this.isVisible},s("div",{key:"d9b01164364c76512852a260cede50000b73a563",class:{"pds-toast":!0,["pds-toast--"+this.type]:"default"!==this.type,"pds-toast--animating-out":this.isAnimatingOut},role:"alert","aria-live":"polite"},this.renderIcon(),s("span",{key:"1f581c7c29ea3fc795dfca061d3575c5a9895b3c",class:"pds-toast__message"},s("slot",{key:"645b31eae3be23de63ab2562234caf0be2510645"})),this.dismissible&&s("button",{key:"44a62b304468c0fca0b8d490ad9c8b5932176ac9",type:"button",part:"dismiss",class:"pds-toast__button",onClick:()=>{this.dismiss()},"aria-label":this.dismissLabel},s("pds-icon",{key:"fde63f279f696d9f02875cc1beee3542c97f0c7e",name:"remove"}))))}get el(){return this}static get watchers(){return{duration:[{handleDurationChange:0}]}}static get style(){return":host{--animation-duration:var(--pine-motion-duration-slow);--animation-timing:var(--pine-motion-easing-in-out);--padding-inline:var(--pine-dimension-md);--padding-inline-desktop:var(--pine-dimension-2xl);--sizing-height-default:68px;--sizing-min-width:calc(var(--sizing-total-width) - (var(--padding-inline) * 2));--sizing-min-width-desktop:calc(var(--sizing-total-width) - (var(--padding-inline-desktop) * 2));--sizing-total-width:350px;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;font:var(--pine-typography-body-medium)}.pds-toast{-ms-flex-align:center;align-items:center;-webkit-animation:pds-toast-animate-in var(--animation-duration) var(--animation-timing);animation:pds-toast-animate-in var(--animation-duration) var(--animation-timing);background-color:var(--pine-color-primary);border-radius:var(--pine-dimension-xs);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);color:var(--pine-color-text-primary);display:-ms-flexbox;display:flex;height:var(--sizing-height-default);-ms-flex-pack:start;justify-content:flex-start;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);max-width:90vw;min-width:var(--sizing-min-width);padding:0 var(--padding-inline);position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media screen and (max-width: 767px){.pds-toast{height:36px;max-width:calc(100vw - var(--pine-dimension-2xs) * 2);min-width:auto;padding-inline:var(--pine-dimension-2xs)}}.pds-toast--danger{background-color:var(--pine-color-danger)}.pds-toast--loading .pds-toast__loader{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm);position:relative}.pds-toast--loading .pds-toast__loader-spinner{-webkit-animation:pds-toast-rotate 2s linear infinite;animation:pds-toast-rotate 2s linear infinite;height:20px;width:20px}.pds-toast--loading .pds-toast__loader-path{-webkit-animation:pds-toast-dash 1.5s ease-in-out infinite;animation:pds-toast-dash 1.5s ease-in-out infinite;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round}.pds-toast__icon{color:var(--pine-color-text-primary);display:-ms-inline-flexbox;display:inline-flex;-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm)}.pds-toast__message{font:var(--pine-typography-body-sm-medium);-webkit-margin-end:auto;margin-inline-end:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-toast__message ::slotted(a){color:var(--pine-color-text-primary);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs);opacity:0.7;text-decoration:underline}.pds-toast__message ::slotted(a):hover,.pds-toast__message ::slotted(a):focus-visible{opacity:1}.pds-toast__message ::slotted(a):focus-visible{outline:2px solid var(--pine-color-text-primary);outline-offset:2px}.pds-toast__button{-ms-flex-align:center;align-items:center;background:none;border:0;border-radius:var(--pine-border-radius-full);color:inherit;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);opacity:0.7;padding:0;white-space:nowrap}.pds-toast__button:hover,.pds-toast__button:focus{opacity:1}.pds-toast__button:focus{outline:var(--pine-outline-focus);outline-offset:var(--pine-dimension-2xs)}@-webkit-keyframes pds-toast-animate-in{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes pds-toast-animate-in{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes pds-toast-animate-out{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes pds-toast-animate-out{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@-webkit-keyframes pds-toast-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes pds-toast-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes pds-toast-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}@keyframes pds-toast-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}:host([hidden]) .pds-toast,.pds-toast--animating-out{-webkit-animation:pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;animation:pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;pointer-events:none;}"}},[257,"pds-toast",{componentId:[1,"component-id"],dismissible:[4],duration:[2],icon:[1],type:[1],dismissLabel:[1,"dismiss-label"],isVisible:[32],isAnimatingOut:[32],dismiss:[64]},void 0,{duration:[{handleDurationChange:0}]}]),d=r,m=function(){"undefined"!=typeof customElements&&["pds-toast","pds-icon"].forEach((t=>{switch(t){case"pds-toast":customElements.get(n(t))||customElements.define(n(t),r);break;case"pds-icon":customElements.get(n(t))||o()}}))};export{d as PdsToast,m as defineCustomElement}