eds-textfield - npm Package Compare versions

Comparing version 1.1.2 to 1.1.4

dist/cjs/eds-textfield.cjs.entry.js

@@ -5,5 +5,5 @@ 'use strict';
 
-const index = require('./index-c710c201.js');
+const index = require('./index-d26e964e.js');
 
-const edsTextfieldCss = ":host,:root{--primary-main:rgb(0, 112, 121);--primary-main-light:rgb(222, 237, 238);--primary-hover:rgb(0, 79, 85);--primary-color:rgb(255, 255, 255);--secondary-main:rgb(36, 55, 70);--secondary-main-light:rgb(213, 234, 244);--secondary-hover:rgb(23, 36, 47);--secondary-color:rgb(255, 255, 255);--danger-main:rgb(235, 0, 0);--danger-main-light:rgb(255, 193, 193);--danger-hover:rgb(179, 13, 47);--danger-color:rgb(255, 255, 255);--disabled-main:rgb(234, 234, 234);--disabled-main-light:transparent;--disabled-hover:rgb(234, 234, 234);--disabled-color:rgb(255, 255, 255);--font-family:equinor, sans-serif;--warning-main:rgb(255, 146, 0);--success-main:rgb(75, 183, 72);--pink-main:pink}p{margin:0}.main{min-width:100px;width:100%}.input-wrapper{position:relative}.label{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;position:relative;margin-left:8px;margin-right:8px;margin:0;color:black;font-family:var(--font-family);font-size:0.75rem;font-weight:500;line-height:1.333em;text-align:left;color:#6f6f6f}.input{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f7f7f7;padding-left:8px;padding-right:8px;padding-top:6px;padding-bottom:6px;margin:0;color:black;font-family:var(--font-family);font-size:1rem;font-weight:400;line-height:1.5em;-webkit-letter-spacing:0.025em;-moz-letter-spacing:0.025em;-ms-letter-spacing:0.025em;letter-spacing:0.025em;text-align:left;color:#3d3d3d;border-bottom:1px solid #6f6f6f;outline:1px solid transparent}.input:disabled{cursor:not-allowed;border-bottom:1px solid transparent !important;outline:none !important}.error .input{outline:1px solid var(--danger-main);border-bottom:1px solid transparent}.warning .input{outline:1px solid #ff9200;border-bottom:1px solid transparent}.success .input{outline:1px solid #4bb748;border-bottom:1px solid transparent}.input.focus{outline-offset:0;border-bottom:1px solid transparent;outline:2px solid #007079}.error .input.focus{outline-offset:0;border-bottom:1px solid transparent;outline:2px solid #b30d2f}.warning .input.focus{outline-offset:0;border-bottom:1px solid transparent;outline:2px solid #ad6200}.success .input.focus{outline-offset:0;border-bottom:1px solid transparent;outline:2px solid #358132}.helper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;margin-left:8px;margin-top:8px}.error .helper .svg{width:16px;height:16px;fill:var(--danger-main);margin-right:8px}.error .helper.focus .svg{fill:#b30d2f}.warning .helper .svg{width:16px;height:16px;fill:#ff9200;margin-right:8px}.warning .helper.focus .svg{fill:#ad6200}.success .helper .svg{width:16px;height:16px;fill:#4bb748;margin-right:8px}.success .helper.focus .svg{fill:#358132}.helper-text{margin:0;margin:0;color:black;font-family:var(--font-family);font-size:0.75rem;font-weight:500;line-height:1.333em;-webkit-letter-spacing:0.013em;-moz-letter-spacing:0.013em;-ms-letter-spacing:0.013em;letter-spacing:0.013em;text-align:left;color:#6f6f6f}.helper-text.disabled{color:#bebebe !important}.error .helper .helper-text{color:var(--danger-main)}.error .helper.focus .helper-text{color:#b30d2f}.warning .helper .helper-text{color:#ff9200}.warning .helper.focus .helper-text{color:#ad6200}.success .helper .helper-text{color:#4bb748}.success .helper.focus .helper-text{color:#358132}";
+const edsTextfieldCss = ":host,:root{--primary-main:rgb(0, 112, 121);--primary-main-light:rgb(222, 237, 238);--primary-hover:rgb(0, 79, 85);--primary-color:rgb(255, 255, 255);--secondary-main:rgb(36, 55, 70);--secondary-main-light:rgb(213, 234, 244);--secondary-hover:rgb(23, 36, 47);--secondary-color:rgb(255, 255, 255);--danger-main:rgb(235, 0, 0);--danger-main-light:rgb(255, 193, 193);--danger-hover:rgb(179, 13, 47);--danger-color:rgb(255, 255, 255);--disabled-main:rgb(234, 234, 234);--disabled-main-light:transparent;--disabled-hover:rgb(234, 234, 234);--disabled-color:rgb(255, 255, 255);--font-family:equinor, sans-serif;--warning-main:rgb(255, 146, 0);--success-main:rgb(75, 183, 72);--pink-main:pink}p{margin:0}.input-wrapper{position:relative}.textfield{min-width:100px;width:100%}.textfield label{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;position:relative;margin-left:8px;margin-right:8px;margin:0;color:black;font-family:var(--font-family);font-size:0.75rem;font-weight:500;line-height:1.333em;text-align:left;color:#6f6f6f}.textfield input{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f7f7f7;padding-left:8px;padding-right:8px;padding-top:6px;padding-bottom:6px;margin:0;color:black;font-family:var(--font-family);font-size:1rem;font-weight:400;line-height:1.5em;-webkit-letter-spacing:0.025em;-moz-letter-spacing:0.025em;-ms-letter-spacing:0.025em;letter-spacing:0.025em;text-align:left;color:#3d3d3d;border-bottom:1px solid #6f6f6f;outline:1px solid transparent}.textfield input:disabled{cursor:not-allowed;border-bottom:1px solid transparent !important;outline:none !important}.textfield input.focus{outline-offset:0;border-bottom:1px solid transparent;outline:2px solid #007079}.textfield.error input{outline:1px solid var(--danger-main);border-bottom:1px solid transparent}.textfield.warning input{outline:1px solid #ff9200;border-bottom:1px solid transparent}.textfield.success input{outline:1px solid #4bb748;border-bottom:1px solid transparent}.error .input.focus{outline-offset:0;border-bottom:1px solid transparent;outline:2px solid #b30d2f}.warning .input.focus{outline-offset:0;border-bottom:1px solid transparent;outline:2px solid #ad6200}.success .input.focus{outline-offset:0;border-bottom:1px solid transparent;outline:2px solid #358132}.helper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;margin-left:8px;margin-top:8px}.error .helper .svg{width:16px;height:16px;fill:var(--danger-main);margin-right:8px}.error .helper.focus .svg{fill:#b30d2f}.warning .helper .svg{width:16px;height:16px;fill:#ff9200;margin-right:8px}.warning .helper.focus .svg{fill:#ad6200}.success .helper .svg{width:16px;height:16px;fill:#4bb748;margin-right:8px}.success .helper.focus .svg{fill:#358132}.helper-text{margin:0;margin:0;color:black;font-family:var(--font-family);font-size:0.75rem;font-weight:500;line-height:1.333em;-webkit-letter-spacing:0.013em;-moz-letter-spacing:0.013em;-ms-letter-spacing:0.013em;letter-spacing:0.013em;text-align:left;color:#6f6f6f}.helper-text.disabled{color:#bebebe !important}.error .helper .helper-text{color:var(--danger-main)}.error .helper.focus .helper-text{color:#b30d2f}.warning .helper .helper-text{color:#ff9200}.warning .helper.focus .helper-text{color:#ad6200}.success .helper .helper-text{color:#4bb748}.success .helper.focus .helper-text{color:#358132}";
 
@@ -13,2 +13,3 @@ const TextField = class {
         index.registerInstance(this, hostRef);
+        this.valueChange = index.createEvent(this, "valueChange", 7);
         this.label = "";
@@ -24,5 +25,20 @@ this.meta = "";
     }
+    valueChanged() {
+        const inputEl = this.el.querySelector("input");
+        if (inputEl.value !== this.value) {
+            inputEl.value = this.value;
+        }
+    }
+    inputChanged(ev) {
+        let val = ev.target && ev.target.value;
+        this.value = val;
+        this.valueChange.emit(this.value);
+    }
     render() {
-        return (index.h(index.Host, null, index.h("div", { class: `main ${this.variant}` }, index.h("label", { class: "label" }, index.h("p", null, this.label), index.h("p", null, this.meta)), index.h("div", { class: "input-wrapper" }, this.multiline ? (index.h("textarea", { class: this.focus ? "input focus" : "input", placeholder: this.placeholder, disabled: this.disabled, onFocus: () => (this.focus = true), onBlur: () => (this.focus = false) })) : (index.h("input", { class: this.focus ? "input focus" : "input", placeholder: this.placeholder, disabled: this.disabled, type: this.type, onFocus: () => (this.focus = true), onBlur: () => (this.focus = false) }))), index.h("div", { class: this.focus ? "helper focus" : "helper" }, this.helpericon && index.h("div", { class: "svg", innerHTML: this.helpericon }), index.h("p", { class: `helper-text${this.disabled ? " disabled" : ""}` }, this.helpertext)))));
+        return (index.h(index.Host, null, index.h("div", { class: `textfield ${this.variant}` }, index.h("label", null, index.h("p", null, this.label), index.h("p", null, this.meta)), index.h("div", { class: "input-wrapper" }, this.multiline ? (index.h("textarea", { class: this.focus ? "focus" : "", placeholder: this.placeholder, disabled: this.disabled, onFocus: () => (this.focus = true), onBlur: () => (this.focus = false), onInput: this.inputChanged.bind(this) })) : (index.h("input", { class: this.focus ? "focus" : "", placeholder: this.placeholder, disabled: this.disabled, type: this.type, onFocus: () => (this.focus = true), onBlur: () => (this.focus = false), value: this.value, onInput: this.inputChanged.bind(this) }))), index.h("div", { class: this.focus ? "helper focus" : "helper" }, this.helpericon && index.h("div", { class: "svg", innerHTML: this.helpericon }), index.h("p", { class: `helper-text${this.disabled ? " disabled" : ""}` }, this.helpertext)))));
     }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["valueChanged"]
+    }; }
 };
@@ -29,0 +45,0 @@ TextField.style = edsTextfieldCss;

dist/cjs/eds-textfield.cjs.js

 'use strict';
 
-const index = require('./index-c710c201.js');
-const patch = require('./patch-18b56d36.js');
+const index = require('./index-d26e964e.js');
+const patch = require('./patch-bd301933.js');
 
 patch.patchBrowser().then(options => {
-  return index.bootstrapLazy([["eds-textfield.cjs",[[1,"eds-textfield",{"label":[1],"meta":[1],"placeholder":[1],"helpertext":[1],"variant":[1],"type":[1],"multiline":[4],"disabled":[516],"helpericon":[1],"focus":[32]}]]]], options);
+  return index.bootstrapLazy([["eds-textfield.cjs",[[0,"eds-textfield",{"label":[1],"meta":[1],"placeholder":[1],"helpertext":[1],"variant":[1],"type":[1],"multiline":[4],"disabled":[516],"helpericon":[1],"value":[1025],"focus":[32]}]]]], options);
 });

dist/cjs/loader.cjs.js

@@ -5,4 +5,4 @@ 'use strict';
 
-const index = require('./index-c710c201.js');
-const patch = require('./patch-18b56d36.js');
+const index = require('./index-d26e964e.js');
+const patch = require('./patch-bd301933.js');
 
@@ -12,3 +12,3 @@ const defineCustomElements = (win, options) => {
   return patch.patchEsm().then(() => {
-  return index.bootstrapLazy([["eds-textfield.cjs",[[1,"eds-textfield",{"label":[1],"meta":[1],"placeholder":[1],"helpertext":[1],"variant":[1],"type":[1],"multiline":[4],"disabled":[516],"helpericon":[1],"focus":[32]}]]]], options);
+  return index.bootstrapLazy([["eds-textfield.cjs",[[0,"eds-textfield",{"label":[1],"meta":[1],"placeholder":[1],"helpertext":[1],"variant":[1],"type":[1],"multiline":[4],"disabled":[516],"helpericon":[1],"value":[1025],"focus":[32]}]]]], options);
   });
@@ -15,0 +15,0 @@ };

dist/collection/components/eds-textfield/eds-textfield.js

@@ -1,2 +0,2 @@
-import { Component, State, Prop, Host, h } from "@stencil/core";
+import { Component, State, Prop, h, Event, Watch, Element, Host, } from "@stencil/core";
 export class TextField {
@@ -14,9 +14,20 @@ constructor() {
     }
+    valueChanged() {
+        const inputEl = this.el.querySelector("input");
+        if (inputEl.value !== this.value) {
+            inputEl.value = this.value;
+        }
+    }
+    inputChanged(ev) {
+        let val = ev.target && ev.target.value;
+        this.value = val;
+        this.valueChange.emit(this.value);
+    }
     render() {
         return (h(Host, null,
-            h("div", { class: `main ${this.variant}` },
-                h("label", { class: "label" },
+            h("div", { class: `textfield ${this.variant}` },
+                h("label", null,
                     h("p", null, this.label),
                     h("p", null, this.meta)),
-                h("div", { class: "input-wrapper" }, this.multiline ? (h("textarea", { class: this.focus ? "input focus" : "input", placeholder: this.placeholder, disabled: this.disabled, onFocus: () => (this.focus = true), onBlur: () => (this.focus = false) })) : (h("input", { class: this.focus ? "input focus" : "input", placeholder: this.placeholder, disabled: this.disabled, type: this.type, onFocus: () => (this.focus = true), onBlur: () => (this.focus = false) }))),
+                h("div", { class: "input-wrapper" }, this.multiline ? (h("textarea", { class: this.focus ? "focus" : "", placeholder: this.placeholder, disabled: this.disabled, onFocus: () => (this.focus = true), onBlur: () => (this.focus = false), onInput: this.inputChanged.bind(this) })) : (h("input", { class: this.focus ? "focus" : "", placeholder: this.placeholder, disabled: this.disabled, type: this.type, onFocus: () => (this.focus = true), onBlur: () => (this.focus = false), value: this.value, onInput: this.inputChanged.bind(this) }))),
                 h("div", { class: this.focus ? "helper focus" : "helper" },
@@ -27,3 +38,2 @@ this.helpericon && h("div", { class: "svg", innerHTML: this.helpericon }),
     static get is() { return "eds-textfield"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() { return {
@@ -197,2 +207,19 @@ "$": ["eds-textfield.scss"]
             "defaultValue": "undefined"
+        },
+        "value": {
+            "type": "string",
+            "mutable": true,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": "Event value"
+            },
+            "attribute": "value",
+            "reflect": false
         }
@@ -203,2 +230,23 @@ }; }
     }; }
+    static get events() { return [{
+            "method": "valueChange",
+            "name": "valueChange",
+            "bubbles": true,
+            "cancelable": true,
+            "composed": true,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "complexType": {
+                "original": "any",
+                "resolved": "any",
+                "references": {}
+            }
+        }]; }
+    static get elementRef() { return "el"; }
+    static get watchers() { return [{
+            "propName": "value",
+            "methodName": "valueChanged"
+        }]; }
 }

dist/eds-textfield/eds-textfield.esm.js

@@ -1,1 +0,1 @@
-import{b as e}from"./p-3157adca.js";import{p as a}from"./p-3e0c0458.js";a().then(a=>e([["p-40d03e67",[[1,"eds-textfield",{label:[1],meta:[1],placeholder:[1],helpertext:[1],variant:[1],type:[1],multiline:[4],disabled:[516],helpericon:[1],focus:[32]}]]]],a));
+import{b as e}from"./p-e985a6cd.js";import{p as a}from"./p-4e029de5.js";a().then(a=>e([["p-dc8fad3d",[[0,"eds-textfield",{label:[1],meta:[1],placeholder:[1],helpertext:[1],variant:[1],type:[1],multiline:[4],disabled:[516],helpericon:[1],value:[1025],focus:[32]}]]]],a));

dist/esm-es5/eds-textfield.entry.js

@@ -1,6 +0,7 @@
-import { r as registerInstance, h, H as Host } from './index-72ebb638.js';
-var edsTextfieldCss = ":host,:root{--primary-main:rgb(0, 112, 121);--primary-main-light:rgb(222, 237, 238);--primary-hover:rgb(0, 79, 85);--primary-color:rgb(255, 255, 255);--secondary-main:rgb(36, 55, 70);--secondary-main-light:rgb(213, 234, 244);--secondary-hover:rgb(23, 36, 47);--secondary-color:rgb(255, 255, 255);--danger-main:rgb(235, 0, 0);--danger-main-light:rgb(255, 193, 193);--danger-hover:rgb(179, 13, 47);--danger-color:rgb(255, 255, 255);--disabled-main:rgb(234, 234, 234);--disabled-main-light:transparent;--disabled-hover:rgb(234, 234, 234);--disabled-color:rgb(255, 255, 255);--font-family:equinor, sans-serif;--warning-main:rgb(255, 146, 0);--success-main:rgb(75, 183, 72);--pink-main:pink}p{margin:0}.main{min-width:100px;width:100%}.input-wrapper{position:relative}.label{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;position:relative;margin-left:8px;margin-right:8px;margin:0;color:black;font-family:var(--font-family);font-size:0.75rem;font-weight:500;line-height:1.333em;text-align:left;color:#6f6f6f}.input{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f7f7f7;padding-left:8px;padding-right:8px;padding-top:6px;padding-bottom:6px;margin:0;color:black;font-family:var(--font-family);font-size:1rem;font-weight:400;line-height:1.5em;-webkit-letter-spacing:0.025em;-moz-letter-spacing:0.025em;-ms-letter-spacing:0.025em;letter-spacing:0.025em;text-align:left;color:#3d3d3d;border-bottom:1px solid #6f6f6f;outline:1px solid transparent}.input:disabled{cursor:not-allowed;border-bottom:1px solid transparent !important;outline:none !important}.error .input{outline:1px solid var(--danger-main);border-bottom:1px solid transparent}.warning .input{outline:1px solid #ff9200;border-bottom:1px solid transparent}.success .input{outline:1px solid #4bb748;border-bottom:1px solid transparent}.input.focus{outline-offset:0;border-bottom:1px solid transparent;outline:2px solid #007079}.error .input.focus{outline-offset:0;border-bottom:1px solid transparent;outline:2px solid #b30d2f}.warning .input.focus{outline-offset:0;border-bottom:1px solid transparent;outline:2px solid #ad6200}.success .input.focus{outline-offset:0;border-bottom:1px solid transparent;outline:2px solid #358132}.helper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;margin-left:8px;margin-top:8px}.error .helper .svg{width:16px;height:16px;fill:var(--danger-main);margin-right:8px}.error .helper.focus .svg{fill:#b30d2f}.warning .helper .svg{width:16px;height:16px;fill:#ff9200;margin-right:8px}.warning .helper.focus .svg{fill:#ad6200}.success .helper .svg{width:16px;height:16px;fill:#4bb748;margin-right:8px}.success .helper.focus .svg{fill:#358132}.helper-text{margin:0;margin:0;color:black;font-family:var(--font-family);font-size:0.75rem;font-weight:500;line-height:1.333em;-webkit-letter-spacing:0.013em;-moz-letter-spacing:0.013em;-ms-letter-spacing:0.013em;letter-spacing:0.013em;text-align:left;color:#6f6f6f}.helper-text.disabled{color:#bebebe !important}.error .helper .helper-text{color:var(--danger-main)}.error .helper.focus .helper-text{color:#b30d2f}.warning .helper .helper-text{color:#ff9200}.warning .helper.focus .helper-text{color:#ad6200}.success .helper .helper-text{color:#4bb748}.success .helper.focus .helper-text{color:#358132}";
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-03244189.js';
+var edsTextfieldCss = ":host,:root{--primary-main:rgb(0, 112, 121);--primary-main-light:rgb(222, 237, 238);--primary-hover:rgb(0, 79, 85);--primary-color:rgb(255, 255, 255);--secondary-main:rgb(36, 55, 70);--secondary-main-light:rgb(213, 234, 244);--secondary-hover:rgb(23, 36, 47);--secondary-color:rgb(255, 255, 255);--danger-main:rgb(235, 0, 0);--danger-main-light:rgb(255, 193, 193);--danger-hover:rgb(179, 13, 47);--danger-color:rgb(255, 255, 255);--disabled-main:rgb(234, 234, 234);--disabled-main-light:transparent;--disabled-hover:rgb(234, 234, 234);--disabled-color:rgb(255, 255, 255);--font-family:equinor, sans-serif;--warning-main:rgb(255, 146, 0);--success-main:rgb(75, 183, 72);--pink-main:pink}p{margin:0}.input-wrapper{position:relative}.textfield{min-width:100px;width:100%}.textfield label{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;position:relative;margin-left:8px;margin-right:8px;margin:0;color:black;font-family:var(--font-family);font-size:0.75rem;font-weight:500;line-height:1.333em;text-align:left;color:#6f6f6f}.textfield input{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f7f7f7;padding-left:8px;padding-right:8px;padding-top:6px;padding-bottom:6px;margin:0;color:black;font-family:var(--font-family);font-size:1rem;font-weight:400;line-height:1.5em;-webkit-letter-spacing:0.025em;-moz-letter-spacing:0.025em;-ms-letter-spacing:0.025em;letter-spacing:0.025em;text-align:left;color:#3d3d3d;border-bottom:1px solid #6f6f6f;outline:1px solid transparent}.textfield input:disabled{cursor:not-allowed;border-bottom:1px solid transparent !important;outline:none !important}.textfield input.focus{outline-offset:0;border-bottom:1px solid transparent;outline:2px solid #007079}.textfield.error input{outline:1px solid var(--danger-main);border-bottom:1px solid transparent}.textfield.warning input{outline:1px solid #ff9200;border-bottom:1px solid transparent}.textfield.success input{outline:1px solid #4bb748;border-bottom:1px solid transparent}.error .input.focus{outline-offset:0;border-bottom:1px solid transparent;outline:2px solid #b30d2f}.warning .input.focus{outline-offset:0;border-bottom:1px solid transparent;outline:2px solid #ad6200}.success .input.focus{outline-offset:0;border-bottom:1px solid transparent;outline:2px solid #358132}.helper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;margin-left:8px;margin-top:8px}.error .helper .svg{width:16px;height:16px;fill:var(--danger-main);margin-right:8px}.error .helper.focus .svg{fill:#b30d2f}.warning .helper .svg{width:16px;height:16px;fill:#ff9200;margin-right:8px}.warning .helper.focus .svg{fill:#ad6200}.success .helper .svg{width:16px;height:16px;fill:#4bb748;margin-right:8px}.success .helper.focus .svg{fill:#358132}.helper-text{margin:0;margin:0;color:black;font-family:var(--font-family);font-size:0.75rem;font-weight:500;line-height:1.333em;-webkit-letter-spacing:0.013em;-moz-letter-spacing:0.013em;-ms-letter-spacing:0.013em;letter-spacing:0.013em;text-align:left;color:#6f6f6f}.helper-text.disabled{color:#bebebe !important}.error .helper .helper-text{color:var(--danger-main)}.error .helper.focus .helper-text{color:#b30d2f}.warning .helper .helper-text{color:#ff9200}.warning .helper.focus .helper-text{color:#ad6200}.success .helper .helper-text{color:#4bb748}.success .helper.focus .helper-text{color:#358132}";
 var TextField = /** @class */ (function () {
     function TextField(hostRef) {
         registerInstance(this, hostRef);
+        this.valueChange = createEvent(this, "valueChange", 7);
         this.label = "";
@@ -16,6 +17,31 @@ this.meta = "";
     }
+    TextField.prototype.valueChanged = function () {
+        var inputEl = this.el.querySelector("input");
+        if (inputEl.value !== this.value) {
+            inputEl.value = this.value;
+        }
+    };
+    TextField.prototype.inputChanged = function (ev) {
+        var val = ev.target && ev.target.value;
+        this.value = val;
+        this.valueChange.emit(this.value);
+    };
     TextField.prototype.render = function () {
         var _this = this;
-        return (h(Host, null, h("div", { class: "main " + this.variant }, h("label", { class: "label" }, h("p", null, this.label), h("p", null, this.meta)), h("div", { class: "input-wrapper" }, this.multiline ? (h("textarea", { class: this.focus ? "input focus" : "input", placeholder: this.placeholder, disabled: this.disabled, onFocus: function () { return (_this.focus = true); }, onBlur: function () { return (_this.focus = false); } })) : (h("input", { class: this.focus ? "input focus" : "input", placeholder: this.placeholder, disabled: this.disabled, type: this.type, onFocus: function () { return (_this.focus = true); }, onBlur: function () { return (_this.focus = false); } }))), h("div", { class: this.focus ? "helper focus" : "helper" }, this.helpericon && h("div", { class: "svg", innerHTML: this.helpericon }), h("p", { class: "helper-text" + (this.disabled ? " disabled" : "") }, this.helpertext)))));
+        return (h(Host, null, h("div", { class: "textfield " + this.variant }, h("label", null, h("p", null, this.label), h("p", null, this.meta)), h("div", { class: "input-wrapper" }, this.multiline ? (h("textarea", { class: this.focus ? "focus" : "", placeholder: this.placeholder, disabled: this.disabled, onFocus: function () { return (_this.focus = true); }, onBlur: function () { return (_this.focus = false); }, onInput: this.inputChanged.bind(this) })) : (h("input", { class: this.focus ? "focus" : "", placeholder: this.placeholder, disabled: this.disabled, type: this.type, onFocus: function () { return (_this.focus = true); }, onBlur: function () { return (_this.focus = false); }, value: this.value, onInput: this.inputChanged.bind(this) }))), h("div", { class: this.focus ? "helper focus" : "helper" }, this.helpericon && h("div", { class: "svg", innerHTML: this.helpericon }), h("p", { class: "helper-text" + (this.disabled ? " disabled" : "") }, this.helpertext)))));
     };
+    Object.defineProperty(TextField.prototype, "el", {
+        get: function () { return getElement(this); },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextField, "watchers", {
+        get: function () {
+            return {
+                "value": ["valueChanged"]
+            };
+        },
+        enumerable: false,
+        configurable: true
+    });
     return TextField;
@@ -22,0 +48,0 @@ }());

dist/esm/eds-textfield.entry.js

@@ -1,4 +0,4 @@
-import { r as registerInstance, h, H as Host } from './index-72ebb638.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-03244189.js';
 
-const edsTextfieldCss = ":host,:root{--primary-main:rgb(0, 112, 121);--primary-main-light:rgb(222, 237, 238);--primary-hover:rgb(0, 79, 85);--primary-color:rgb(255, 255, 255);--secondary-main:rgb(36, 55, 70);--secondary-main-light:rgb(213, 234, 244);--secondary-hover:rgb(23, 36, 47);--secondary-color:rgb(255, 255, 255);--danger-main:rgb(235, 0, 0);--danger-main-light:rgb(255, 193, 193);--danger-hover:rgb(179, 13, 47);--danger-color:rgb(255, 255, 255);--disabled-main:rgb(234, 234, 234);--disabled-main-light:transparent;--disabled-hover:rgb(234, 234, 234);--disabled-color:rgb(255, 255, 255);--font-family:equinor, sans-serif;--warning-main:rgb(255, 146, 0);--success-main:rgb(75, 183, 72);--pink-main:pink}p{margin:0}.main{min-width:100px;width:100%}.input-wrapper{position:relative}.label{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;position:relative;margin-left:8px;margin-right:8px;margin:0;color:black;font-family:var(--font-family);font-size:0.75rem;font-weight:500;line-height:1.333em;text-align:left;color:#6f6f6f}.input{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f7f7f7;padding-left:8px;padding-right:8px;padding-top:6px;padding-bottom:6px;margin:0;color:black;font-family:var(--font-family);font-size:1rem;font-weight:400;line-height:1.5em;-webkit-letter-spacing:0.025em;-moz-letter-spacing:0.025em;-ms-letter-spacing:0.025em;letter-spacing:0.025em;text-align:left;color:#3d3d3d;border-bottom:1px solid #6f6f6f;outline:1px solid transparent}.input:disabled{cursor:not-allowed;border-bottom:1px solid transparent !important;outline:none !important}.error .input{outline:1px solid var(--danger-main);border-bottom:1px solid transparent}.warning .input{outline:1px solid #ff9200;border-bottom:1px solid transparent}.success .input{outline:1px solid #4bb748;border-bottom:1px solid transparent}.input.focus{outline-offset:0;border-bottom:1px solid transparent;outline:2px solid #007079}.error .input.focus{outline-offset:0;border-bottom:1px solid transparent;outline:2px solid #b30d2f}.warning .input.focus{outline-offset:0;border-bottom:1px solid transparent;outline:2px solid #ad6200}.success .input.focus{outline-offset:0;border-bottom:1px solid transparent;outline:2px solid #358132}.helper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;margin-left:8px;margin-top:8px}.error .helper .svg{width:16px;height:16px;fill:var(--danger-main);margin-right:8px}.error .helper.focus .svg{fill:#b30d2f}.warning .helper .svg{width:16px;height:16px;fill:#ff9200;margin-right:8px}.warning .helper.focus .svg{fill:#ad6200}.success .helper .svg{width:16px;height:16px;fill:#4bb748;margin-right:8px}.success .helper.focus .svg{fill:#358132}.helper-text{margin:0;margin:0;color:black;font-family:var(--font-family);font-size:0.75rem;font-weight:500;line-height:1.333em;-webkit-letter-spacing:0.013em;-moz-letter-spacing:0.013em;-ms-letter-spacing:0.013em;letter-spacing:0.013em;text-align:left;color:#6f6f6f}.helper-text.disabled{color:#bebebe !important}.error .helper .helper-text{color:var(--danger-main)}.error .helper.focus .helper-text{color:#b30d2f}.warning .helper .helper-text{color:#ff9200}.warning .helper.focus .helper-text{color:#ad6200}.success .helper .helper-text{color:#4bb748}.success .helper.focus .helper-text{color:#358132}";
+const edsTextfieldCss = ":host,:root{--primary-main:rgb(0, 112, 121);--primary-main-light:rgb(222, 237, 238);--primary-hover:rgb(0, 79, 85);--primary-color:rgb(255, 255, 255);--secondary-main:rgb(36, 55, 70);--secondary-main-light:rgb(213, 234, 244);--secondary-hover:rgb(23, 36, 47);--secondary-color:rgb(255, 255, 255);--danger-main:rgb(235, 0, 0);--danger-main-light:rgb(255, 193, 193);--danger-hover:rgb(179, 13, 47);--danger-color:rgb(255, 255, 255);--disabled-main:rgb(234, 234, 234);--disabled-main-light:transparent;--disabled-hover:rgb(234, 234, 234);--disabled-color:rgb(255, 255, 255);--font-family:equinor, sans-serif;--warning-main:rgb(255, 146, 0);--success-main:rgb(75, 183, 72);--pink-main:pink}p{margin:0}.input-wrapper{position:relative}.textfield{min-width:100px;width:100%}.textfield label{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;position:relative;margin-left:8px;margin-right:8px;margin:0;color:black;font-family:var(--font-family);font-size:0.75rem;font-weight:500;line-height:1.333em;text-align:left;color:#6f6f6f}.textfield input{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f7f7f7;padding-left:8px;padding-right:8px;padding-top:6px;padding-bottom:6px;margin:0;color:black;font-family:var(--font-family);font-size:1rem;font-weight:400;line-height:1.5em;-webkit-letter-spacing:0.025em;-moz-letter-spacing:0.025em;-ms-letter-spacing:0.025em;letter-spacing:0.025em;text-align:left;color:#3d3d3d;border-bottom:1px solid #6f6f6f;outline:1px solid transparent}.textfield input:disabled{cursor:not-allowed;border-bottom:1px solid transparent !important;outline:none !important}.textfield input.focus{outline-offset:0;border-bottom:1px solid transparent;outline:2px solid #007079}.textfield.error input{outline:1px solid var(--danger-main);border-bottom:1px solid transparent}.textfield.warning input{outline:1px solid #ff9200;border-bottom:1px solid transparent}.textfield.success input{outline:1px solid #4bb748;border-bottom:1px solid transparent}.error .input.focus{outline-offset:0;border-bottom:1px solid transparent;outline:2px solid #b30d2f}.warning .input.focus{outline-offset:0;border-bottom:1px solid transparent;outline:2px solid #ad6200}.success .input.focus{outline-offset:0;border-bottom:1px solid transparent;outline:2px solid #358132}.helper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;margin-left:8px;margin-top:8px}.error .helper .svg{width:16px;height:16px;fill:var(--danger-main);margin-right:8px}.error .helper.focus .svg{fill:#b30d2f}.warning .helper .svg{width:16px;height:16px;fill:#ff9200;margin-right:8px}.warning .helper.focus .svg{fill:#ad6200}.success .helper .svg{width:16px;height:16px;fill:#4bb748;margin-right:8px}.success .helper.focus .svg{fill:#358132}.helper-text{margin:0;margin:0;color:black;font-family:var(--font-family);font-size:0.75rem;font-weight:500;line-height:1.333em;-webkit-letter-spacing:0.013em;-moz-letter-spacing:0.013em;-ms-letter-spacing:0.013em;letter-spacing:0.013em;text-align:left;color:#6f6f6f}.helper-text.disabled{color:#bebebe !important}.error .helper .helper-text{color:var(--danger-main)}.error .helper.focus .helper-text{color:#b30d2f}.warning .helper .helper-text{color:#ff9200}.warning .helper.focus .helper-text{color:#ad6200}.success .helper .helper-text{color:#4bb748}.success .helper.focus .helper-text{color:#358132}";
 
@@ -8,2 +8,3 @@ const TextField = class {
         registerInstance(this, hostRef);
+        this.valueChange = createEvent(this, "valueChange", 7);
         this.label = "";
@@ -19,5 +20,20 @@ this.meta = "";
     }
+    valueChanged() {
+        const inputEl = this.el.querySelector("input");
+        if (inputEl.value !== this.value) {
+            inputEl.value = this.value;
+        }
+    }
+    inputChanged(ev) {
+        let val = ev.target && ev.target.value;
+        this.value = val;
+        this.valueChange.emit(this.value);
+    }
     render() {
-        return (h(Host, null, h("div", { class: `main ${this.variant}` }, h("label", { class: "label" }, h("p", null, this.label), h("p", null, this.meta)), h("div", { class: "input-wrapper" }, this.multiline ? (h("textarea", { class: this.focus ? "input focus" : "input", placeholder: this.placeholder, disabled: this.disabled, onFocus: () => (this.focus = true), onBlur: () => (this.focus = false) })) : (h("input", { class: this.focus ? "input focus" : "input", placeholder: this.placeholder, disabled: this.disabled, type: this.type, onFocus: () => (this.focus = true), onBlur: () => (this.focus = false) }))), h("div", { class: this.focus ? "helper focus" : "helper" }, this.helpericon && h("div", { class: "svg", innerHTML: this.helpericon }), h("p", { class: `helper-text${this.disabled ? " disabled" : ""}` }, this.helpertext)))));
+        return (h(Host, null, h("div", { class: `textfield ${this.variant}` }, h("label", null, h("p", null, this.label), h("p", null, this.meta)), h("div", { class: "input-wrapper" }, this.multiline ? (h("textarea", { class: this.focus ? "focus" : "", placeholder: this.placeholder, disabled: this.disabled, onFocus: () => (this.focus = true), onBlur: () => (this.focus = false), onInput: this.inputChanged.bind(this) })) : (h("input", { class: this.focus ? "focus" : "", placeholder: this.placeholder, disabled: this.disabled, type: this.type, onFocus: () => (this.focus = true), onBlur: () => (this.focus = false), value: this.value, onInput: this.inputChanged.bind(this) }))), h("div", { class: this.focus ? "helper focus" : "helper" }, this.helpericon && h("div", { class: "svg", innerHTML: this.helpericon }), h("p", { class: `helper-text${this.disabled ? " disabled" : ""}` }, this.helpertext)))));
     }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "value": ["valueChanged"]
+    }; }
 };
@@ -24,0 +40,0 @@ TextField.style = edsTextfieldCss;

dist/types/components.d.ts

@@ -18,2 +18,6 @@ /* eslint-disable */
         "type": string;
+        /**
+          * Event value
+         */
+        "value": string;
         "variant": string;
@@ -41,4 +45,9 @@ }
         "multiline"?: boolean;
+        "onValueChange"?: (event: CustomEvent<any>) => void;
         "placeholder"?: string;
         "type"?: string;
+        /**
+          * Event value
+         */
+        "value"?: string;
         "variant"?: string;
@@ -45,0 +54,0 @@ }

dist/types/components/eds-textfield/eds-textfield.d.ts

@@ -0,1 +1,2 @@
+import { EventEmitter } from "../../stencil-public-runtime";
 export declare class TextField {
@@ -12,3 +13,9 @@ focus: boolean;
     helpericon: string;
+    el: HTMLElement;
+    /** Event value */
+    value: string;
+    valueChange: EventEmitter;
+    valueChanged(): void;
+    inputChanged(ev: any): void;
     render(): any;
 }

package.json

 {
   "name": "eds-textfield",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Stencil Component Starter",
@@ -29,3 +29,3 @@ "main": "dist/index.js",
   "license": "MIT",
-  "gitHead": "7791ff5eff18e8bc22b211669a33d0f93c228b0e"
+  "gitHead": "c16e0d0e0feaef4bf37004da2c60c0c2b69515dc"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1900711

increased by151.93%

Number of package files

195

increased by174.65%

Lines of code

25005

increased by165.33%

Worsened metrics

Number of low supply chain risk alerts

45

increased by800%

Number of medium supply chain risk alerts

30

increased by130.77%

No dependency changes