@pine-ds/core 3.0.0-mercury.0 → 3.0.1

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

@@ -1,92 +1,93 @@
 :host {
-  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);
-  --box-shadow-focus-error: 0 0 0 2px var(--pine-color-red-200);
-  --color-text-default: var(--pine-color-charcoal-500);
-  --color-background-disabled: var(--pine-color-grey-100);
-  --color-border-default: var(--pine-color-grey-400);
-  --color-border-error: var(--pine-color-red-300);
-  --color-border-hover: var(--pine-color-grey-500);
-  --color-disabled-text: var(--pine-color-grey-500);
-  --color-placeholder-text: var(--pine-color-charcoal-200);
-  --font-size-helper-message: var(--pine-font-size-100);
-  --font-size-input-field: var(--pine-font-size-100);
-  --font-size-label: var(--pine-font-size-100);
-  --font-weight-helper-message: var(--pine-font-weight-normal);
-  --font-weight-input-field: var(--pine-font-weight-normal);
-  --font-weight-label: var(--pine-font-weight-medium);
-  --line-height-label: var(--pine-line-height-150);
-  --line-height-helper-message: var(--pine-line-height-125);
-  --line-height-input-field: var(--pine-line-height-150);
-  --spacing-field-padding-block: var(--pine-spacing-100);
-  --spacing-input-field-padding-inline: var(--pine-spacing-200);
-  --spacing-label-margin-block-end: var(--pine-spacing-100);
-  --spacing-margin-top-helper-message: var(--pine-spacing-100);
   display: inline;
 }
 
+:host([aria-readonly=true]) input {
+  background-color: var(--pine-color-background-container-disabled);
+  color: var(--pine-color-text-readonly);
+}
+
 .pds-input {
   display: flex;
   flex-direction: column;
 }
 
-label {
-  font-size: var(--font-size-label);
-  font-weight: var(--font-weight-label);
-  line-height: var(--line-height-label);
-  margin-block-end: var(--spacing-label-margin-block-end);
+.pds-input__label {
+  margin-block-end: var(--pine-dimension-2xs);
 }
 
-input {
-  border: 1px solid var(--color-border-default);
-  border-radius: 10px;
-  font-size: var(--font-size-input-field);
-  font-weight: var(--font-weight-input-field);
-  line-height: var(--line-height-input-field);
-  padding: var(--spacing-field-padding-block) var(--spacing-input-field-padding-inline);
+.pds-input__field {
+  background: var(--pine-color-background-container);
+  border: 1px solid var(--pine-color-border);
+  border-radius: var(--pine-dimension-125);
+  color: var(--pine-color-text-active);
+  font: var(--pine-typography-body);
+  letter-spacing: var(--pine-letter-spacing);
+  padding: var(--pine-dimension-xs) var(--pine-dimension-sm);
   /* stylelint-disable */
   /* stylelint-enable */
 }
-input:disabled {
-  background-color: var(--color-background-disabled);
-  color: var(--color-disabled-text);
+.pds-input__field:hover:not(:disabled, .is-invalid) {
+  border: var(--pine-border-hover);
+}
+.pds-input__field:disabled {
+  background-color: var(--pine-color-background-container-disabled);
+  border-color: var(--pine-color-border-disabled);
+  color: var(--pine-color-text-disabled);
   cursor: not-allowed;
+  /* stylelint-disable */
+  /* stylelint-enable */
 }
-input:hover {
-  border-color: var(--color-border-hover);
+.pds-input__field:disabled::-webkit-input-placeholder {
+  color: var(--pine-color-text-placeholder-disabled);
 }
-input:focus-visible {
-  box-shadow: var(--box-shadow-focus);
-  outline: none;
+.pds-input__field:disabled::-moz-placeholder {
+  color: var(--pine-color-text-placeholder-disabled);
 }
-input::-webkit-input-placeholder {
-  color: var(--color-placeholder-text);
+.pds-input__field:disabled::-moz-placeholder {
+  color: var(--pine-color-text-placeholder-disabled);
 }
-input::-moz-placeholder {
-  color: var(--color-placeholder-text);
+.pds-input__field:disabled:-ms-input-placeholder {
+  color: var(--pine-color-text-placeholder-disabled);
 }
-input::-moz-placeholder {
-  color: var(--color-placeholder-text);
+.pds-input__field:hover {
+  border-color: var(--pine-color-border-hover);
 }
-input:-ms-input-placeholder {
-  color: var(--color-placeholder-text);
+.pds-input__field:focus-visible {
+  border-color: var(--pine-color-border-active);
+  outline: var(--pine-outline-focus);
+  outline-offset: var(--pine-border-width);
 }
-input:has(~ .pds-input__error-message) {
-  border-color: var(--color-border-error);
+.pds-input__field::-webkit-input-placeholder {
+  color: var(--pine-color-text-placeholder);
 }
-input:has(~ .pds-input__error-message):focus-visible {
-  box-shadow: var(--box-shadow-focus-error);
-  outline: none;
+.pds-input__field::-moz-placeholder {
+  color: var(--pine-color-text-placeholder);
+}
+.pds-input__field::-moz-placeholder {
+  color: var(--pine-color-text-placeholder);
+}
+.pds-input__field:-ms-input-placeholder {
+  color: var(--pine-color-text-placeholder);
+}
+.pds-input__field.is-invalid {
+  background-color: var(--pine-input-color-background-danger);
+  border-color: var(--pine-color-border-danger);
+}
+.pds-input__field.is-invalid:focus-visible {
+  outline-color: var(--pine-color-focus-ring-danger);
 }
 
 .pds-input__error-message,
 .pds-input__helper-message {
-  font-size: var(--font-size-helper-message);
-  font-weight: var(--font-weight-helper-message);
-  line-height: var(--line-height-helper-message);
+  font: var(--pine-typography-body-sm-medium);
   margin-block-end: 0;
-  margin-block-start: var(--spacing-margin-top-helper-message);
+  margin-block-start: var(--pine-dimension-2xs);
 }
 
 .pds-input__error-message {
-  color: var(--color-error);
+  align-items: center;
+  color: var(--pine-color-text-message-danger);
+  display: flex;
+  gap: var(--pine-dimension-2xs);
 }

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

@@ -1,47 +1,157 @@
 import { h, Host } from "@stencil/core";
 import { assignDescription, messageId } from "../../utils/form";
-import { PdsLabel } from "../_internal/pds-label/pds-label";
+import { danger } from "@pine-ds/icons/icons";
+import { debounceEvent } from "../../utils/utils";
+import { inheritAriaAttributes } from "../../utils/attributes";
 export class PdsInput {
     constructor() {
+        this.inheritedAttributes = {};
+        this.isComposing = false;
+        /**
+         * Determines the type of control that will be displayed
+         * `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`, `'url'`
+         * @defaultValue "text"
+         */
+        this.type = 'text';
+        /**
+         * The value of the input.
+         */
+        this.value = '';
+        /**
+         * Determines if the input has focus.
+         */
+        this.hasFocus = false;
         this.onInputEvent = (ev) => {
             const input = ev.target;
             if (input) {
                 this.value = input.value || '';
             }
-            this.pdsInput.emit(ev);
+            this.emitInputChange(ev);
         };
-        this.componentId = undefined;
-        this.disabled = undefined;
-        this.errorMessage = undefined;
-        this.helperMessage = undefined;
-        this.invalid = undefined;
-        this.label = undefined;
-        this.name = undefined;
-        this.placeholder = undefined;
-        this.readonly = undefined;
-        this.required = undefined;
-        this.type = 'text';
-        this.value = undefined;
+        this.onChangeEvent = (ev) => {
+            this.emitValueChange(ev);
+        };
+        this.onBlurEvent = (ev) => {
+            this.hasFocus = false;
+            if (this.focusedValue !== this.value) {
+                /**
+                 * Emits the `pdsChange` event when the input value
+                 * is different than the value when the input was focused.
+                 */
+                this.emitValueChange(ev);
+            }
+            this.pdsBlur.emit(ev);
+        };
+        this.onFocusEvent = (ev) => {
+            this.hasFocus = true;
+            this.focusedValue = this.value;
+            this.pdsFocus.emit(ev);
+        };
+        this.onCompositionStart = () => {
+            this.isComposing = true;
+        };
+        this.onCompositionEnd = () => {
+            this.isComposing = false;
+        };
+    }
+    /**
+     * Sets focus on the native `input` in the `pds-input`. Use this method instead of the global
+     * `input.focus()`.
+     */
+    async setFocus() {
+        if (this.nativeInput) {
+            this.nativeInput.focus();
+        }
+    }
+    debounceChanged() {
+        const { pdsInput, debounce, originalPdsInput } = this;
+        /**
+         * If debounce is undefined, we have to manually revert the pdsInput emitter in case
+         * debounce used to be set to a number. Otherwise, the event would stay debounced.
+         */
+        this.pdsInput = debounce === undefined ? originalPdsInput !== null && originalPdsInput !== void 0 ? originalPdsInput : pdsInput : debounceEvent(pdsInput, debounce);
+    }
+    valueChanged() {
+        const nativeInput = this.nativeInput;
+        const value = this.getValue();
+        if (nativeInput && nativeInput.value !== value && !this.isComposing) {
+            nativeInput.value = value;
+        }
+    }
+    getValue() {
+        return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();
+    }
+    /**
+     * Emits a pdsChange event
+     */
+    emitValueChange(event) {
+        const { value } = this;
+        const newValue = value == null ? value : value.toString();
+        this.focusedValue = newValue;
+        this.pdsChange.emit({ value: newValue, event });
+    }
+    /**
+     *
+     * Emits a `pdsInput` event
+     */
+    emitInputChange(event) {
+        const { value } = this;
+        // Checks for both null and undefined values
+        const newValue = value == null ? value : value.toString();
+        this.pdsInput.emit({ value: newValue, event });
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
+    }
+    componentDidLoad() {
+        this.debounceChanged();
+    }
+    inputClassNames() {
+        const classNames = ['pds-input__field'];
+        if (this.invalid && this.invalid === true) {
+            classNames.push('is-invalid');
+        }
+        return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: 'd11ef85231a61d59752e289cb0832eb971115a84', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '722e05d546051d094ee4d870eaaefea24d241032', class: "pds-input" }, h(PdsLabel, { key: 'a7ff96341748d12c1b9d56dfeb2fc5a9f1cfc2b7', htmlFor: this.componentId, text: this.label }), h("input", { key: '89d5b9cfa436ca98c58da38455c6e08abce6937c', class: "pds-input__field", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInputEvent }), this.helperMessage &&
-            h("p", { key: '4fe86e4f98f16c25009b9011cf02e7a71c9050ef', class: "pds-input__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("p", { key: '50c1d4b6603868f5494c599298b23814df26782b', class: "pds-input__error-message", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage))));
+        return (h(Host, { key: '6e4e04c4db43e707c0681e878c1b1f73deee86ae', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null }, h("div", { key: '6610ccb16fb657e6d97aca89b21ff2e2bc0e3fe1', class: "pds-input" }, this.label &&
+            h("label", { key: 'd85cdc84dcd35abcd592e6374e1e3d080f97ab8c', class: "pds-input__label", htmlFor: this.componentId }, this.label), h("input", Object.assign({ key: 'de33a9a5ca6901c9c745fcef9475557cfec1cf91', class: this.inputClassNames(), ref: (input) => this.nativeInput = input, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.helperMessage &&
+            h("p", { key: '0721204043319effd9ce7ee3fd42a81570ffbdcc', class: "pds-input__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("p", { key: '68e71598657e55cb3ca4ad25a23b673bafe1eefb', class: "pds-input__error-message", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '9d3969d79ecd3ab4bd2a83ff775409b00f8eb3c9', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-input"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["pds-input.scss"]
+            "$": ["pds-input.tokens.scss", "../../global/styles/utils/label.scss", "pds-input.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["pds-input.css"]
+            "$": ["pds-input.tokens.css", "../../global/styles/utils/label.css", "pds-input.css"]
         };
     }
     static get properties() {
         return {
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies if and how the browser provides `autocomplete` assistance for the field."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "autocomplete",
+                "reflect": false
+            },
             "componentId": {
                 "type": "string",
                 "mutable": false,
@@ -56,9 +166,30 @@ export class PdsInput {
                     "tags": [],
                     "text": "A unique identifier used for the underlying component `id` attribute."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "component-id",
                 "reflect": false
             },
+            "debounce": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the number of milliseconds to wait before updating the value."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "debounce",
+                "reflect": false
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -71,8 +202,10 @@ export class PdsInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Indicates whether or not the input field is disabled."
+                    "text": "Determines whether or not the input field is disabled."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false
             },
@@ -90,6 +223,8 @@ export class PdsInput {
                     "tags": [],
                     "text": "Specifies the error message and provides an error-themed treatment to the field."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "error-message",
                 "reflect": false
             },
@@ -107,6 +242,8 @@ export class PdsInput {
                     "tags": [],
                     "text": "Displays a message or hint below the input field."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "helper-message",
                 "reflect": false
             },
@@ -122,8 +259,10 @@ export class PdsInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Indicates whether or not the input field is invalid or throws an error."
+                    "text": "Determines whether or not the input field is invalid or throws an error."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "invalid",
                 "reflect": false
             },
@@ -141,6 +280,8 @@ export class PdsInput {
                     "tags": [],
                     "text": "Text to be displayed as the input label."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false
             },
@@ -158,6 +299,8 @@ export class PdsInput {
                     "tags": [],
                     "text": "Specifies the name. Submitted with the form name/value pair."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false
             },
@@ -175,6 +318,8 @@ export class PdsInput {
                     "tags": [],
                     "text": "Specifies a short hint that describes the expected value of the input field."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "placeholder",
                 "reflect": false
             },
@@ -190,8 +335,10 @@ export class PdsInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Indicates whether or not the input field is readonly."
+                    "text": "Determines whether or not the input field is readonly."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "readonly",
                 "reflect": false
             },
@@ -207,8 +354,10 @@ export class PdsInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Indicates whether or not the input field is required."
+                    "text": "Determines whether or not the input field is required."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "required",
                 "reflect": false
             },
@@ -227,18 +376,20 @@ export class PdsInput {
                             "name": "defaultValue",
                             "text": "\"text\""
                         }],
-                    "text": "Determines the type of control that will be displayed\n`'email'`, `'number'`, `'password'`, `'tel'`, `'text'`"
+                    "text": "Determines the type of control that will be displayed\n`'email'`, `'number'`, `'password'`, `'tel'`, `'text'`, `'url'`"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "type",
                 "reflect": false,
                 "defaultValue": "'text'"
             },
             "value": {
-                "type": "string",
+                "type": "any",
                 "mutable": true,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | number | null",
+                    "resolved": "number | string",
                     "references": {}
                 },
                 "required": false,
@@ -247,13 +398,82 @@ export class PdsInput {
                     "tags": [],
                     "text": "The value of the input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "''"
             }
         };
     }
+    static get states() {
+        return {
+            "hasFocus": {}
+        };
+    }
     static get events() {
         return [{
+                "method": "pdsBlur",
+                "name": "pdsBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input loses focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "pdsChange",
+                "name": "pdsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\nEmitted when the value has changed.\n\nThis event will not emit when programmatically setting the `value` property."
+                },
+                "complexType": {
+                    "original": "InputChangeEventDetail",
+                    "resolved": "InputChangeEventDetail",
+                    "references": {
+                        "InputChangeEventDetail": {
+                            "location": "import",
+                            "path": "./input-interface",
+                            "id": "src/components/pds-input/input-interface.ts::InputChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "pdsFocus",
+                "name": "pdsFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input has focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
                 "method": "pdsInput",
                 "name": "pdsInput",
                 "bubbles": true,
@@ -261,19 +481,51 @@ export class PdsInput {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when a keyboard input occurred."
+                    "text": "Emitted when a keyboard input occurs."
                 },
                 "complexType": {
-                    "original": "InputEvent",
-                    "resolved": "InputEvent",
+                    "original": "InputInputEventDetail",
+                    "resolved": "InputInputEventDetail",
                     "references": {
-                        "InputEvent": {
-                            "location": "global",
-                            "id": "global::InputEvent"
+                        "InputInputEventDetail": {
+                            "location": "import",
+                            "path": "./input-interface",
+                            "id": "src/components/pds-input/input-interface.ts::InputInputEventDetail"
                         }
                     }
                 }
             }];
     }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the native `input` in the `pds-input`. Use this method instead of the global\n`input.focus()`.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "debounce",
+                "methodName": "debounceChanged"
+            }, {
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
 }
 //# sourceMappingURL=pds-input.js.map