@intelligentgrowthsolutions/eco - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

dist/cjs/eco-button.cjs.entry.js

@@ -8,3 +8,3 @@ 'use strict';
 
-const ecoButtonCss = "button{--color:var(--c-text);--highlight:var(--c-text);--fs:var(--fs-md);--padding:var(--sp-sm);--border-radius:var(--br-md);--shadow-outer:hsla(254, 39%, 17%, 0.2);position:relative;text-align:center;cursor:pointer;appearance:none;user-select:none;border:none;outline:0;display:flex;align-items:center;width:100%;padding:var(--padding);font-size:var(--fs);font-family:var(--ff-base);font-weight:var(--fw-bold);line-height:var(--line-height-tight);color:var(--color);background-color:var(--c-cta-background);border-radius:var(--border-radius)}button[disabled]{filter:grayscale(100%) opacity(0.8);cursor:not-allowed}button[disabled]:hover::before,button[disabled]:focus::before,button[disabled]:active::before{box-shadow:0 0 0 calc(var(--padding) / 4) var(--c-cta-background) inset,\n    0 0 0 calc(var(--padding) / 2) var(--highlight) inset, 0 0 0 transparent}button::before{transition:box-shadow 150ms;content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--border-radius);box-shadow:0 0 0 calc(var(--padding) / 8) var(--c-cta-background) inset,\n    0 0 0 calc(var(--padding) / 4) var(--highlight) inset, 0 0 0 transparent;mix-blend-mode:multiply}button:hover::before,button:focus::before{box-shadow:0 0 0 calc(var(--padding) / 8) transparent inset,\n    0 0 0 calc(var(--padding) / 4) var(--highlight) inset,\n    0 0 var(--padding) var(--shadow-outer)}button:active::before{box-shadow:0 0 0 calc(var(--padding) / 8) transparent inset,\n    0 0 0 calc(var(--padding) / 4) var(--highlight) inset,\n    0 0 var(--padding) var(--shadow-outer) inset}.default{--color:var(--c-text);--highlight:var(--c-text)}.info{--color:var(--c-cta-info);--highlight:var(--c-cta-info)}.ghost{--color:var(--c-text);--highlight:var(--c-cta-background)}.ghost:hover::before,.ghost:focus::before{--highlight:var(--c-text)}.success{--color:var(--c-cta-success);--highlight:var(--c-cta-success)}.danger{--color:var(--c-cta-danger);--highlight:var(--c-cta-danger)}.warning{--color:var(--c-cta-warning);--highlight:var(--c-cta-warning)}.sm{--fs:var(--fs-sm);--padding:var(--sp-xs);--border-radius:var(--br-sm)}.md{--fs:var(--fs-md);--padding:var(--sp-sm);--border-radius:var(--br-md)}.lg{--fs:var(--fs-lg);--padding:var(--sp-md);--border-radius:var(--br-lg)}.xl{--fs:var(--fs-xl);--padding:var(--sp-lg);--border-radius:var(--br-xl)}span{min-height:var(--fs-xl);display:flex;align-items:center}eco-icon{margin-right:var(--sp-xs)}";
+const ecoButtonCss = "button{--color:var(--c-text);--highlight:var(--c-text);--fs:var(--fs-md);--padding:var(--sp-sm);--border-radius:var(--br-md);--shadow-outer:hsla(var(--igs-primary-dark-blue-hsl), 0.2);position:relative;text-align:center;cursor:pointer;appearance:none;user-select:none;border:none;outline:0;display:flex;align-items:center;width:100%;padding:var(--padding);font-size:var(--fs);font-family:var(--ff-base);font-weight:var(--fw-bold);line-height:var(--line-height-tight);color:var(--color);background-color:var(--c-cta-background);border-radius:var(--border-radius)}button[disabled]{filter:grayscale(100%) opacity(0.8);cursor:not-allowed;background-color:var(--c-input-disabled)}button[disabled]:hover::before,button[disabled]:focus::before,button[disabled]:active::before{box-shadow:0 0 0 var(--bw-base) var(--c-cta-background) inset,\n    0 0 0 var(--bw-thick) var(--highlight) inset, 0 0 0 transparent}button::before{transition:box-shadow 150ms;content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--border-radius);box-shadow:0 0 0 var(--bw-base) var(--c-cta-background) inset,\n    0 0 0 var(--bw-thick) var(--highlight) inset, 0 0 0 transparent;mix-blend-mode:multiply}button:hover::before,button:focus::before{box-shadow:0 0 0 var(--bw-base) transparent inset,\n    0 0 0 var(--bw-thick) var(--highlight) inset,\n    0 0 var(--sp-sm) var(--shadow-outer)}button:active::before{box-shadow:0 0 0 var(--bw-base) transparent inset,\n    0 0 0 var(--bw-thick) var(--highlight) inset,\n    0 0 var(--sp-sm) var(--shadow-outer) inset}.default{--color:var(--c-text);--highlight:var(--c-text)}.info{--color:var(--c-cta-info);--highlight:var(--c-cta-info)}.ghost{--color:var(--c-text);--highlight:var(--c-cta-background)}.ghost:hover::before,.ghost:focus::before{--highlight:var(--c-text)}.success{--color:var(--c-cta-success);--highlight:var(--c-cta-success)}.danger{--color:var(--c-cta-danger);--highlight:var(--c-cta-danger)}.warning{--color:var(--c-cta-warning);--highlight:var(--c-cta-warning)}.sm{--fs:var(--fs-sm);--padding:var(--sp-xs);--border-radius:var(--br-md)}.md{--fs:var(--fs-md);--padding:var(--sp-sm);--border-radius:var(--br-md)}.lg{--fs:var(--fs-lg);--padding:var(--sp-md);--border-radius:var(--br-lg)}.xl{--fs:var(--fs-xl);--padding:var(--sp-lg);--border-radius:var(--br-xl)}span{min-height:var(--fs-xl);display:flex;align-items:center}eco-icon{margin-right:var(--sp-xs)}";
 
@@ -11,0 +11,0 @@ const EcoButton = class {

dist/cjs/eco-input-file.cjs.entry.js

@@ -8,3 +8,3 @@ 'use strict';
 
-const ecoInputFileCss = ":host{display:block;position:relative}input{width:0.1px;height:0.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}input+label{font-size:1.25em;font-weight:700;color:white;background-color:black;display:inline-block}input:focus+label,input+label:hover{background-color:red;cursor:pointer;outline:1px dotted #000}";
+const ecoInputFileCss = "div{--color:var(--c-text);max-width:100%;display:grid;gap:var(--sp-xs);grid-template-columns:100%}input{display:none}label{display:grid;grid-template-columns:1fr auto;gap:var(--sp-md);justify-content:center;align-items:center;box-shadow:0 0 0 var(--bw-thin) var(--color) inset;border-radius:var(--br-md);padding-left:var(--sp-md);user-select:none;cursor:pointer;background-color:var(--c-cta-background)}label:hover,label:focus,label::active{box-shadow:0 0 0 var(--bw-thick) var(--color) inset}.button{position:relative;cursor:pointer;user-select:none;padding:var(--sp-sm);font-family:var(--ff-base);font-weight:var(--fw-bold);line-height:var(--line-height-tight);color:var(--c-text);background-color:var(--c-cta-background);border-radius:var(--br-md)}.button::before{transition:box-shadow 150ms;content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--br-md);box-shadow:0 0 0 transparent inset, 0 0 0 var(--bw-base) var(--c-text) inset,\n    0 0 0 transparent;mix-blend-mode:multiply}.button:hover::before,.button:focus::before{box-shadow:0 0 0 var(--bw-base) transparent inset,\n    0 0 0 var(--bw-thick) var(--c-text) inset,\n    0 0 var(--sp-sm) hsla(var(--igs-primary-dark-blue-hsl), 0.2)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm label{width:15ch}.md label{width:30ch}.lg label{width:45ch}.full label{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}.disabled{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}.disabled .button{cursor:not-allowed;filter:grayscale(100%) opacity(0.8);cursor:not-allowed;background-color:var(--c-input-disabled);box-shadow:0 0 0 transparent inset, 0 0 0 var(--bw-base) var(--c-text) inset,\n    0 0 0 transparent}.disabled .button:hover::before,.disabled .button:focus::before,.disabled .button:active::before{box-shadow:0 0 0 transparent inset, 0 0 0 var(--bw-base) var(--c-text) inset,\n    0 0 0 transparent}";
 
@@ -14,4 +14,6 @@ const EcoInputFile = class {
     index.registerInstance(this, hostRef);
-    this.label = "Text input label";
+    this.label = "File input label";
     this.optional = "Optional";
+    this.text = "Select a file...";
+    this.accept = "";
     this.status = utils.EcoInputStatusList.default;
@@ -21,9 +23,23 @@ this.width = utils.EcoInputWidthList.full;
   }
+  componentDidRender() {
+    const inputElement = this.el.shadowRoot.querySelector("input");
+    const labelElement = this.el.shadowRoot.querySelector("label .filename");
+    inputElement.addEventListener("change", function () {
+      var fileName = inputElement.files[0].name;
+      labelElement.textContent = fileName;
+    });
+  }
   render() {
     let idFile = new Date().getTime() + Math.floor(Math.random() * Math.floor(10000));
     this.inputId = idFile.toString();
-    let filename = document.querySelector("`input#${this.inputId}`");
-    console.log(filename);
-    return (index.h(index.Host, null, this.label && (index.h("eco-text-label", { for: this.inputId }, this.label, !this.required && (index.h("eco-text-input-optional", null, this.optional)))), this.help && index.h("eco-text-input-help", null, this.help), index.h("input", { id: this.inputId, type: "file", name: "file" }), index.h("eco-button", { label: "click" })));
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, null, index.h("div", { class: classMap }, this.label && (index.h("eco-text-label", { for: this.inputId }, this.label, !this.required && (index.h("eco-text-input-optional", null, this.optional)))), this.help && index.h("eco-text-input-help", null, this.help), index.h("input", { id: this.inputId, name: "upload", type: "file", accept: this.accept, disabled: this.disabled, required: this.required }), index.h("label", { htmlFor: this.inputId, class: this.disabled ? "disabled" : "" }, index.h("span", { class: "filename" }, this.text), index.h("span", { class: "button" }, "Choose file")))));
   }
+  getCssClassMap() {
+    return {
+      [this.status]: true,
+      [this.width]: true,
+    };
+  }
+  get el() { return index.getElement(this); }
 };
@@ -30,0 +46,0 @@ EcoInputFile.style = ecoInputFileCss;

dist/cjs/eco-input-number.cjs.entry.js

@@ -8,3 +8,3 @@ 'use strict';
 
-const ecoInputTextCss = ":host{--color:var(--c-text);display:block;max-width:100%}div{display:grid;gap:var(--sp-xs);grid-template-columns:100%;color:var(--color)}input{font-size:var(--fs-md);font-weight:var(--fw-base);background-color:var(--c-cta-background);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--color) inset;max-width:100%}input:not(:placeholder-shown){box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--c-cta-danger) inset}input:valid{box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--c-cta-success) inset;box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--color) inset}input:focus{box-shadow:0 0 0 calc(var(--sp-xs) / 4) var(--color) inset}input[disabled]{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}input:read-only{color:var(--c-text-secondary)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm input{width:15ch}.md input{width:30ch}.lg input{width:45ch}.full input{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}";
+const ecoInputTextCss = ":host{--color:var(--c-text);display:block;max-width:100%}div{display:grid;gap:var(--sp-xs);grid-template-columns:100%;color:var(--color)}input{font-size:var(--fs-md);font-weight:var(--fw-base);background-color:var(--c-cta-background);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;box-shadow:0 0 0 var(--bw-base) var(--color) inset;max-width:100%}input:not(:placeholder-shown){box-shadow:0 0 0 var(--bw-base) var(--c-cta-danger) inset}input:valid{box-shadow:0 0 0 var(--bw-base) var(--c-cta-success) inset;box-shadow:0 0 0 var(--bw-base) var(--color) inset}input:focus{box-shadow:0 0 0 var(--bw-thick) var(--color) inset}input[disabled]{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}input:read-only{color:var(--c-text-secondary)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm input{width:15ch}.md input{width:30ch}.lg input{width:45ch}.full input{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}";
 
@@ -11,0 +11,0 @@ const EcoInputNumber = class {

dist/cjs/eco-input-text.cjs.entry.js

@@ -8,3 +8,3 @@ 'use strict';
 
-const ecoInputTextCss = ":host{--color:var(--c-text);display:block;max-width:100%}div{display:grid;gap:var(--sp-xs);grid-template-columns:100%;color:var(--color)}input{font-size:var(--fs-md);font-weight:var(--fw-base);background-color:var(--c-cta-background);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--color) inset;max-width:100%}input:not(:placeholder-shown){box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--c-cta-danger) inset}input:valid{box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--c-cta-success) inset;box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--color) inset}input:focus{box-shadow:0 0 0 calc(var(--sp-xs) / 4) var(--color) inset}input[disabled]{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}input:read-only{color:var(--c-text-secondary)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm input{width:15ch}.md input{width:30ch}.lg input{width:45ch}.full input{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}";
+const ecoInputTextCss = ":host{--color:var(--c-text);display:block;max-width:100%}div{display:grid;gap:var(--sp-xs);grid-template-columns:100%;color:var(--color)}input{font-size:var(--fs-md);font-weight:var(--fw-base);background-color:var(--c-cta-background);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;box-shadow:0 0 0 var(--bw-base) var(--color) inset;max-width:100%}input:not(:placeholder-shown){box-shadow:0 0 0 var(--bw-base) var(--c-cta-danger) inset}input:valid{box-shadow:0 0 0 var(--bw-base) var(--c-cta-success) inset;box-shadow:0 0 0 var(--bw-base) var(--color) inset}input:focus{box-shadow:0 0 0 var(--bw-thick) var(--color) inset}input[disabled]{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}input:read-only{color:var(--c-text-secondary)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm input{width:15ch}.md input{width:30ch}.lg input{width:45ch}.full input{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}";
 
@@ -11,0 +11,0 @@ const EcoInputText = class {

dist/cjs/eco-input-textarea.cjs.entry.js

@@ -8,3 +8,3 @@ 'use strict';
 
-const ecoInputTextareaCss = ":host{--color:var(--c-text);--height:var(--fs-md);display:block;max-width:100%}div{display:grid;gap:var(--sp-xs);grid-template-columns:100%;color:var(--color)}textarea{background-color:var(--c-cta-background);font-family:var(--ff-base);font-size:var(--fs-md);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--color) inset;max-width:100%;resize:none}textarea:valid{box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--c-cta-success) inset;box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--color) inset}textarea:focus{box-shadow:0 0 0 calc(var(--sp-xs) / 4) var(--color) inset}textarea[disabled]{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}textarea:read-only{color:var(--c-text-secondary)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm textarea{width:15ch}.md textarea{width:30ch}.lg textarea{width:45ch}.full textarea{max-width:100%}.short textarea{height:calc(var(--height) * 4)}.average textarea{height:calc(var(--height) * 6)}.tall textarea{height:calc(var(--height) * 15)}.resize{resize:both}";
+const ecoInputTextareaCss = ":host{--color:var(--c-text);--height:var(--fs-md);display:block;max-width:100%}div{display:grid;gap:var(--sp-xs);grid-template-columns:100%;color:var(--color)}textarea{background-color:var(--c-cta-background);font-family:var(--ff-base);font-size:var(--fs-md);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;box-shadow:0 0 0 var(--bw-base) var(--color) inset;max-width:100%;resize:none}textarea:valid{box-shadow:0 0 0 var(--bw-base) var(--c-cta-success) inset;box-shadow:0 0 0 var(--bw-base) var(--color) inset}textarea:focus{box-shadow:0 0 0 var(--bw-thick) var(--color) inset}textarea[disabled]{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}textarea:read-only{color:var(--c-text-secondary)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm textarea{width:15ch}.md textarea{width:30ch}.lg textarea{width:45ch}.full textarea{max-width:100%}.short textarea{height:calc(var(--height) * 4)}.average textarea{height:calc(var(--height) * 6)}.tall textarea{height:calc(var(--height) * 15)}.resize{resize:both}";
 
@@ -11,0 +11,0 @@ const EcoInputTextarea = class {

dist/cjs/eco-select.cjs.entry.js

@@ -8,3 +8,3 @@ 'use strict';
 
-const ecoSelectCss = ":host{--color:var(--c-text);display:block;max-width:100%}div{display:grid;gap:var(--sp-xs);grid-template-columns:100%;color:var(--color)}select{display:block;font-size:var(--fs-md);font-family:var(--ff-base);font-weight:var(--fw-base);color:var(--color);line-height:var(--line-height-base);padding:var(--sp-sm);width:100%;max-width:100%;box-sizing:border-box;margin:0;border:0;box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--color) inset;border-radius:var(--br-md);-moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:var(--c-cta-background);background-image:url(\"eco/static/icons/content-collapse.svg\");background-repeat:no-repeat;background-position:right var(--sp-xs) top 50%;background-size:var(--sp-xl) auto}select::-ms-expand{display:none}select:hover{box-shadow:0 0 0 calc(var(--sp-xs) / 4) var(--color) inset}select:focus{box-shadow:0 0 0 calc(var(--sp-xs) / 4) var(--color) inset;color:var(--color);outline:none}select option{font-weight:var(--fw-base)}*[dir=\"rtl\"] select,:root:lang(ar) select,:root:lang(iw) select{background-position:left var(--sp-xs) top 50%}select:disabled,select[aria-disabled=\"true\"]{color:var(--c-text);background-color:var(--c-input-disabled);cursor:not-allowed}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm select{width:15ch}.md select{width:30ch}.lg select{width:45ch}.full select{width:100%}";
+const ecoSelectCss = ":host{--color:var(--c-text);display:block;max-width:100%}div{display:grid;gap:var(--sp-xs);grid-template-columns:100%;color:var(--color)}select{display:block;font-size:var(--fs-md);font-family:var(--ff-base);font-weight:var(--fw-base);color:var(--color);line-height:var(--line-height-base);padding:var(--sp-sm);width:100%;max-width:100%;box-sizing:border-box;margin:0;border:0;box-shadow:0 0 0 var(--bw-base) var(--color) inset;border-radius:var(--br-md);-moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:var(--c-cta-background);background-image:url(\"eco/static/icons/content-collapse.svg\");background-repeat:no-repeat;background-position:right var(--sp-xs) top 50%;background-size:var(--sp-xl) auto}select::-ms-expand{display:none}select:hover{box-shadow:0 0 0 var(--bw-thick) var(--color) inset}select:focus{box-shadow:0 0 0 var(--bw-thick) var(--color) inset;color:var(--color);outline:none}select option{font-weight:var(--fw-base)}*[dir=\"rtl\"] select,:root:lang(ar) select,:root:lang(iw) select{background-position:left var(--sp-xs) top 50%}select:disabled,select[aria-disabled=\"true\"]{color:var(--c-text);background-color:var(--c-input-disabled);cursor:not-allowed}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm select{width:15ch}.md select{width:30ch}.lg select{width:45ch}.full select{width:100%}";
 
@@ -11,0 +11,0 @@ const EcoSelect = class {

dist/cjs/eco-table.cjs.entry.js

@@ -7,4 +7,2 @@ 'use strict';
 
-const ecoTableCss = ":host{display:block;overflow:auto;--table-background:hsl(0, 0%, 100%);--table-even-row:hsla(var(--igs-primary-dark-blue-hsl), 0.05);--table-shadow:hsla(var(--igs-primary-dark-blue-h), 0%, 60%, 0.4)}::slotted(*){color:red}::slotted(table){width:100%;border-collapse:collapse;border-spacing:0;background-color:aquamarine;background-color:var(--table-background);border-radius:var(--br-sm);box-shadow:0 calc(var(--sp-md) / 8) calc(var(--sp-md) / 6)\n    var(--table-shadow);position:relative}::slotted(thead){background-color:var(--c-cta-background);box-shadow:0 calc(var(--sp-md) / 12) calc(var(--sp-md) / 8)\n    var(--table-shadow)}::slotted(tr:nth-of-type(even)){background-color:var(--table-even-row)}::slotted(th),::slotted(td){white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0}::slotted(th){position:sticky;top:0;padding:var(--sp-xs);font-size:var(--fs-sm)}::slotted(td){padding:var(--sp-xs)}";
-
 const EcoTable = class {
@@ -15,7 +13,10 @@ constructor(hostRef) {
   render() {
-    return (index.h(index.Host, null, index.h("slot", null)));
+    return (index.h(index.Host, { "qa-id": this.tableQaId, class: {
+        sticky: this.sticky,
+        responsive: this.responsive,
+        equalcolumns: this.equalcolumns,
+      } }, index.h("slot", null)));
   }
 };
-EcoTable.style = ecoTableCss;
 
 exports.eco_table = EcoTable;

dist/cjs/eco.cjs.js

@@ -18,3 +18,3 @@ 'use strict';
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["eco-icon_2.cjs",[[1,"eco-messagebox",{"type":[1],"icon":[1],"icontype":[1]}],[1,"eco-icon",{"icon":[1],"icontype":[1],"iconsize":[1],"url":[1]}]]],["eco-input-file.cjs",[[1,"eco-input-file",{"label":[1],"help":[1],"optional":[1],"value":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-card.cjs",[[1,"eco-card",{"cardQaId":[1,"card-qa-id"],"sticky":[4],"collapsable":[4],"collapsed":[4]}]]],["eco-text-label.cjs",[[1,"eco-text-label",{"for":[1],"labelQaId":[1,"label-qa-id"],"wrap":[4]}]]],["eco-input-date.cjs",[[1,"eco-input-date",{"label":[1],"help":[1],"optional":[1],"readonly":[4],"required":[4],"disabled":[4],"withnow":[4],"withtime":[4],"ddmin":[2],"ddmax":[2],"mmmin":[2],"mmmax":[2],"yyyymin":[2],"yyyymax":[2],"minutemin":[2],"minutemax":[2],"hourmin":[2],"hourmax":[2]}]]],["eco-input-text.cjs",[[1,"eco-input-text",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-textarea.cjs",[[1,"eco-input-textarea",{"label":[1],"value":[1],"help":[1],"optional":[1],"status":[1],"width":[1],"height":[1],"disabled":[4],"readonly":[4],"required":[4],"resize":[4],"inputId":[1,"input-id"]}]]],["eco-radio-group.cjs",[[1,"eco-radio-group",{"label":[1],"help":[1],"radioData":[16]}]]],["eco-select.cjs",[[4,"eco-select",{"label":[1],"help":[1],"name":[1],"optional":[1],"status":[1],"width":[1],"selectQaId":[1,"select-qa-id"],"disabled":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-checkbox.cjs",[[1,"eco-checkbox",{"label":[1],"name":[1],"checkboxQaId":[1,"checkbox-qa-id"],"checked":[4],"disabled":[4],"inputId":[1,"input-id"]}]]],["eco-radio-button.cjs",[[1,"eco-radio-button",{"name":[1],"label":[1],"radioQaId":[1,"radio-qa-id"],"checked":[4],"disabled":[4],"controlValue":[1,"control-value"],"inputId":[1,"input-id"]}]]],["eco-description.cjs",[[1,"eco-description",{"term":[1],"description":[1],"descQaId":[1,"desc-qa-id"]}]]],["eco-description-group.cjs",[[1,"eco-description-group",{"vertical":[4]}]]],["eco-table.cjs",[[1,"eco-table"]]],["eco-input-number.cjs",[[1,"eco-input-number",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[2],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"min":[2],"max":[2],"step":[2],"inputId":[1,"input-id"]}]]],["eco-button.cjs",[[1,"eco-button",{"label":[1],"size":[1],"type":[1],"disabled":[4],"icon":[1],"icontype":[1],"iconsize":[1]}]]],["eco-card-body_3.cjs",[[1,"eco-card-body"],[1,"eco-card-footer"],[1,"eco-card-header"]]],["eco-text-input-help_2.cjs",[[1,"eco-text-input-optional"],[1,"eco-text-input-help"]]]], options);
+  return index.bootstrapLazy([["eco-card.cjs",[[1,"eco-card",{"cardQaId":[1,"card-qa-id"],"sticky":[4],"collapsable":[4],"collapsed":[4]}]]],["eco-input-date.cjs",[[1,"eco-input-date",{"label":[1],"help":[1],"optional":[1],"readonly":[4],"required":[4],"disabled":[4],"withnow":[4],"withtime":[4],"ddmin":[2],"ddmax":[2],"mmmin":[2],"mmmax":[2],"yyyymin":[2],"yyyymax":[2],"minutemin":[2],"minutemax":[2],"hourmin":[2],"hourmax":[2]}]]],["eco-input-file.cjs",[[1,"eco-input-file",{"label":[1],"help":[1],"optional":[1],"text":[1],"accept":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-text.cjs",[[1,"eco-input-text",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-textarea.cjs",[[1,"eco-input-textarea",{"label":[1],"value":[1],"help":[1],"optional":[1],"status":[1],"width":[1],"height":[1],"disabled":[4],"readonly":[4],"required":[4],"resize":[4],"inputId":[1,"input-id"]}]]],["eco-radio-group.cjs",[[1,"eco-radio-group",{"label":[1],"help":[1],"radioData":[16]}]]],["eco-select.cjs",[[4,"eco-select",{"label":[1],"help":[1],"name":[1],"optional":[1],"status":[1],"width":[1],"selectQaId":[1,"select-qa-id"],"disabled":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-button.cjs",[[1,"eco-button",{"label":[1],"size":[1],"type":[1],"disabled":[4],"icon":[1],"icontype":[1],"iconsize":[1]}]]],["eco-checkbox.cjs",[[1,"eco-checkbox",{"label":[1],"name":[1],"checkboxQaId":[1,"checkbox-qa-id"],"checked":[4],"disabled":[4],"inputId":[1,"input-id"]}]]],["eco-messagebox.cjs",[[1,"eco-messagebox",{"type":[1],"icon":[1],"icontype":[1]}]]],["eco-radio-button.cjs",[[1,"eco-radio-button",{"name":[1],"label":[1],"radioQaId":[1,"radio-qa-id"],"checked":[4],"disabled":[4],"controlValue":[1,"control-value"],"inputId":[1,"input-id"]}]]],["eco-description.cjs",[[1,"eco-description",{"term":[1],"description":[1],"descQaId":[1,"desc-qa-id"]}]]],["eco-description-group.cjs",[[1,"eco-description-group",{"vertical":[4]}]]],["eco-table.cjs",[[1,"eco-table",{"responsive":[4],"equalcolumns":[4],"sticky":[4],"tableQaId":[1,"table-qa-id"]}]]],["eco-text-label.cjs",[[1,"eco-text-label",{"for":[1],"labelQaId":[1,"label-qa-id"],"wrap":[4]}]]],["eco-input-number.cjs",[[1,"eco-input-number",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[2],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"min":[2],"max":[2],"step":[2],"inputId":[1,"input-id"]}]]],["eco-card-body_3.cjs",[[1,"eco-card-body"],[1,"eco-card-footer"],[1,"eco-card-header"]]],["eco-icon.cjs",[[1,"eco-icon",{"icon":[1],"icontype":[1],"iconsize":[1],"url":[1]}]]],["eco-text-input-help_2.cjs",[[1,"eco-text-input-optional"],[1,"eco-text-input-help"]]]], options);
 });

dist/cjs/loader.cjs.js

@@ -17,3 +17,3 @@ 'use strict';
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["eco-icon_2.cjs",[[1,"eco-messagebox",{"type":[1],"icon":[1],"icontype":[1]}],[1,"eco-icon",{"icon":[1],"icontype":[1],"iconsize":[1],"url":[1]}]]],["eco-input-file.cjs",[[1,"eco-input-file",{"label":[1],"help":[1],"optional":[1],"value":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-card.cjs",[[1,"eco-card",{"cardQaId":[1,"card-qa-id"],"sticky":[4],"collapsable":[4],"collapsed":[4]}]]],["eco-text-label.cjs",[[1,"eco-text-label",{"for":[1],"labelQaId":[1,"label-qa-id"],"wrap":[4]}]]],["eco-input-date.cjs",[[1,"eco-input-date",{"label":[1],"help":[1],"optional":[1],"readonly":[4],"required":[4],"disabled":[4],"withnow":[4],"withtime":[4],"ddmin":[2],"ddmax":[2],"mmmin":[2],"mmmax":[2],"yyyymin":[2],"yyyymax":[2],"minutemin":[2],"minutemax":[2],"hourmin":[2],"hourmax":[2]}]]],["eco-input-text.cjs",[[1,"eco-input-text",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-textarea.cjs",[[1,"eco-input-textarea",{"label":[1],"value":[1],"help":[1],"optional":[1],"status":[1],"width":[1],"height":[1],"disabled":[4],"readonly":[4],"required":[4],"resize":[4],"inputId":[1,"input-id"]}]]],["eco-radio-group.cjs",[[1,"eco-radio-group",{"label":[1],"help":[1],"radioData":[16]}]]],["eco-select.cjs",[[4,"eco-select",{"label":[1],"help":[1],"name":[1],"optional":[1],"status":[1],"width":[1],"selectQaId":[1,"select-qa-id"],"disabled":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-checkbox.cjs",[[1,"eco-checkbox",{"label":[1],"name":[1],"checkboxQaId":[1,"checkbox-qa-id"],"checked":[4],"disabled":[4],"inputId":[1,"input-id"]}]]],["eco-radio-button.cjs",[[1,"eco-radio-button",{"name":[1],"label":[1],"radioQaId":[1,"radio-qa-id"],"checked":[4],"disabled":[4],"controlValue":[1,"control-value"],"inputId":[1,"input-id"]}]]],["eco-description.cjs",[[1,"eco-description",{"term":[1],"description":[1],"descQaId":[1,"desc-qa-id"]}]]],["eco-description-group.cjs",[[1,"eco-description-group",{"vertical":[4]}]]],["eco-table.cjs",[[1,"eco-table"]]],["eco-input-number.cjs",[[1,"eco-input-number",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[2],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"min":[2],"max":[2],"step":[2],"inputId":[1,"input-id"]}]]],["eco-button.cjs",[[1,"eco-button",{"label":[1],"size":[1],"type":[1],"disabled":[4],"icon":[1],"icontype":[1],"iconsize":[1]}]]],["eco-card-body_3.cjs",[[1,"eco-card-body"],[1,"eco-card-footer"],[1,"eco-card-header"]]],["eco-text-input-help_2.cjs",[[1,"eco-text-input-optional"],[1,"eco-text-input-help"]]]], options);
+  return index.bootstrapLazy([["eco-card.cjs",[[1,"eco-card",{"cardQaId":[1,"card-qa-id"],"sticky":[4],"collapsable":[4],"collapsed":[4]}]]],["eco-input-date.cjs",[[1,"eco-input-date",{"label":[1],"help":[1],"optional":[1],"readonly":[4],"required":[4],"disabled":[4],"withnow":[4],"withtime":[4],"ddmin":[2],"ddmax":[2],"mmmin":[2],"mmmax":[2],"yyyymin":[2],"yyyymax":[2],"minutemin":[2],"minutemax":[2],"hourmin":[2],"hourmax":[2]}]]],["eco-input-file.cjs",[[1,"eco-input-file",{"label":[1],"help":[1],"optional":[1],"text":[1],"accept":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-text.cjs",[[1,"eco-input-text",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-textarea.cjs",[[1,"eco-input-textarea",{"label":[1],"value":[1],"help":[1],"optional":[1],"status":[1],"width":[1],"height":[1],"disabled":[4],"readonly":[4],"required":[4],"resize":[4],"inputId":[1,"input-id"]}]]],["eco-radio-group.cjs",[[1,"eco-radio-group",{"label":[1],"help":[1],"radioData":[16]}]]],["eco-select.cjs",[[4,"eco-select",{"label":[1],"help":[1],"name":[1],"optional":[1],"status":[1],"width":[1],"selectQaId":[1,"select-qa-id"],"disabled":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-button.cjs",[[1,"eco-button",{"label":[1],"size":[1],"type":[1],"disabled":[4],"icon":[1],"icontype":[1],"iconsize":[1]}]]],["eco-checkbox.cjs",[[1,"eco-checkbox",{"label":[1],"name":[1],"checkboxQaId":[1,"checkbox-qa-id"],"checked":[4],"disabled":[4],"inputId":[1,"input-id"]}]]],["eco-messagebox.cjs",[[1,"eco-messagebox",{"type":[1],"icon":[1],"icontype":[1]}]]],["eco-radio-button.cjs",[[1,"eco-radio-button",{"name":[1],"label":[1],"radioQaId":[1,"radio-qa-id"],"checked":[4],"disabled":[4],"controlValue":[1,"control-value"],"inputId":[1,"input-id"]}]]],["eco-description.cjs",[[1,"eco-description",{"term":[1],"description":[1],"descQaId":[1,"desc-qa-id"]}]]],["eco-description-group.cjs",[[1,"eco-description-group",{"vertical":[4]}]]],["eco-table.cjs",[[1,"eco-table",{"responsive":[4],"equalcolumns":[4],"sticky":[4],"tableQaId":[1,"table-qa-id"]}]]],["eco-text-label.cjs",[[1,"eco-text-label",{"for":[1],"labelQaId":[1,"label-qa-id"],"wrap":[4]}]]],["eco-input-number.cjs",[[1,"eco-input-number",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[2],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"min":[2],"max":[2],"step":[2],"inputId":[1,"input-id"]}]]],["eco-card-body_3.cjs",[[1,"eco-card-body"],[1,"eco-card-footer"],[1,"eco-card-header"]]],["eco-icon.cjs",[[1,"eco-icon",{"icon":[1],"icontype":[1],"iconsize":[1],"url":[1]}]]],["eco-text-input-help_2.cjs",[[1,"eco-text-input-optional"],[1,"eco-text-input-help"]]]], options);
   });
@@ -20,0 +20,0 @@ };

dist/collection/components/eco-input-file/eco-input-file.js

@@ -1,7 +0,9 @@
-import { Component, Host, h, Prop } from "@stencil/core";
-import { EcoInputStatusList, EcoInputWidthList } from "../../utils/utils";
+import { Component, Host, h, Prop, Element } from "@stencil/core";
+import { EcoInputStatusList, EcoInputWidthList, } from "../../utils/utils";
 export class EcoInputFile {
   constructor() {
-    this.label = "Text input label";
+    this.label = "File input label";
     this.optional = "Optional";
+    this.text = "Select a file...";
+    this.accept = "";
     this.status = EcoInputStatusList.default;
@@ -11,15 +13,31 @@ this.width = EcoInputWidthList.full;
   }
+  componentDidRender() {
+    const inputElement = this.el.shadowRoot.querySelector("input");
+    const labelElement = this.el.shadowRoot.querySelector("label .filename");
+    inputElement.addEventListener("change", function () {
+      var fileName = inputElement.files[0].name;
+      labelElement.textContent = fileName;
+    });
+  }
   render() {
     let idFile = new Date().getTime() + Math.floor(Math.random() * Math.floor(10000));
     this.inputId = idFile.toString();
-    let filename = document.querySelector("`input#${this.inputId}`");
-    console.log(filename);
+    const classMap = this.getCssClassMap();
     return (h(Host, null,
-      this.label && (h("eco-text-label", { for: this.inputId },
-        this.label,
-        !this.required && (h("eco-text-input-optional", null, this.optional)))),
-      this.help && h("eco-text-input-help", null, this.help),
-      h("input", { id: this.inputId, type: "file", name: "file" }),
-      h("eco-button", { label: "click" })));
+      h("div", { class: classMap },
+        this.label && (h("eco-text-label", { for: this.inputId },
+          this.label,
+          !this.required && (h("eco-text-input-optional", null, this.optional)))),
+        this.help && h("eco-text-input-help", null, this.help),
+        h("input", { id: this.inputId, name: "upload", type: "file", accept: this.accept, disabled: this.disabled, required: this.required }),
+        h("label", { htmlFor: this.inputId, class: this.disabled ? "disabled" : "" },
+          h("span", { class: "filename" }, this.text),
+          h("span", { class: "button" }, "Choose file")))));
   }
+  getCssClassMap() {
+    return {
+      [this.status]: true,
+      [this.width]: true,
+    };
+  }
   static get is() { return "eco-input-file"; }
@@ -50,3 +68,3 @@ static get encapsulation() { return "shadow"; }
       "reflect": false,
-      "defaultValue": "\"Text input label\""
+      "defaultValue": "\"File input label\""
     },
@@ -88,3 +106,3 @@ "help": {
     },
-    "value": {
+    "text": {
       "type": "string",
@@ -103,5 +121,24 @@ "mutable": false,
       },
-      "attribute": "value",
-      "reflect": false
+      "attribute": "text",
+      "reflect": false,
+      "defaultValue": "\"Select a file...\""
     },
+    "accept": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "accept",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
     "status": {
@@ -223,2 +260,3 @@ "type": "string",
   }; }
+  static get elementRef() { return "el"; }
 }

dist/collection/components/eco-table/eco-table.js

@@ -1,5 +0,9 @@
-import { Component, Host, h } from "@stencil/core";
+import { Component, Host, h, Prop } from "@stencil/core";
 export class EcoTable {
   render() {
-    return (h(Host, null,
+    return (h(Host, { "qa-id": this.tableQaId, class: {
+        sticky: this.sticky,
+        responsive: this.responsive,
+        equalcolumns: this.equalcolumns,
+      } },
       h("slot", null)));
@@ -9,8 +13,72 @@ }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["eco-table.css"]
+  static get properties() { return {
+    "responsive": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "responsive",
+      "reflect": false
+    },
+    "equalcolumns": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "equalcolumns",
+      "reflect": false
+    },
+    "sticky": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "sticky",
+      "reflect": false
+    },
+    "tableQaId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "table-qa-id",
+      "reflect": false
+    }
   }; }
-  static get styleUrls() { return {
-    "$": ["eco-table.css"]
-  }; }
 }

dist/collection/components/eco-table/eco-table.stories.js

@@ -7,12 +7,23 @@ import { html } from "lit-html";
 
-const Default = ({}) => html`
-  <eco-table>
+const args = {
+  sticky: false,
+  responsive: false,
+  equalcolumns: false,
+};
+
+const Default = ({ sticky, responsive, equalcolumns }) => html`
+  <eco-table
+    sticky="${sticky}"
+    responsive="${responsive}"
+    equalcolumns="${equalcolumns}"
+  >
     <table>
       <thead>
         <tr>
-          <th>Name</th>
-          <th>IPV6</th>
-          <th>City</th>
-          <th>Colour</th>
-          <th>GUID</th>
+          <th>First Name</th>
+          <th>Last Name</th>
+          <th>Age</th>
+          <th>Email</th>
+          <th>Phone</th>
+          <th>Occupation</th>
         </tr>
@@ -22,50 +33,180 @@ </thead>
         <tr>
-          <td>Ian Delgado</td>
-          <td>0b97:ed30:98d5:c540:a36b:8604:b9d0:0357</td>
-          <td>Cerumvu</td>
-          <td>rgb(189,250,44)</td>
-          <td>41ec676c-f19e-56e5-ad84-e32edcb33883</td>
+          <td data-label="First Name">Carl</td>
+          <td data-label="Last Name">Cole</td>
+          <td data-label="Age">29</td>
+          <td data-label="Email">[e-mail]</td>
+          <td data-label="Phone">248-1212-48</td>
+          <td data-label="Occupation">Fashion Designer</td>
         </tr>
+
         <tr>
-          <td>Annie Collier</td>
-          <td>1608:820c:604c:217b:805a:7937:560a:f89a</td>
-          <td>Cugomam</td>
-          <td>rgb(244,160,1)</td>
-          <td>dd400d16-991a-5cf7-897a-50cdf6707ca1</td>
+          <td data-label="First Name">Steven</td>
+          <td data-label="Last Name">Chapman</td>
+          <td data-label="Age">18</td>
+          <td data-label="Email">[e-mail]</td>
+          <td data-label="Phone">954-7204-83</td>
+          <td data-label="Occupation">Composer</td>
         </tr>
+
         <tr>
-          <td>Brett Kim</td>
-          <td>68a8:68b1:36ca:a10a:09c3:e2e4:9bf3:d815</td>
-          <td>Iwojahsuf</td>
-          <td>rgb(24,74,65)</td>
-          <td>4d5391ab-2ca6-5bf0-a22f-676fdc5eeca9</td>
+          <td data-label="First Name">Fiona</td>
+          <td data-label="Last Name">Harper</td>
+          <td data-label="Age">24</td>
+          <td data-label="Email">[e-mail]</td>
+          <td data-label="Phone">807-6959-49</td>
+          <td data-label="Occupation">Astronomer</td>
         </tr>
+
         <tr>
-          <td>Antonio Burke</td>
-          <td>877a:02d4:510a:9cc5:fdbc:73f8:fa59:cdb0</td>
-          <td>Biojvi</td>
-          <td>rgb(241,188,59)</td>
-          <td>998fbc3f-5f2c-57a8-a30e-7c0c791d6a93</td>
+          <td data-label="First Name">Marcus</td>
+          <td data-label="Last Name">Lloyd</td>
+          <td data-label="Age">29</td>
+          <td data-label="Email">[e-mail]</td>
+          <td data-label="Phone">712-9570-66</td>
+          <td data-label="Occupation">Mathematician</td>
         </tr>
+
         <tr>
-          <td>Willie Park</td>
-          <td>80ba:7adf:8f2e:ac52:3e29:9066:aeb7:f591</td>
-          <td>Betote</td>
-          <td>rgb(169,237,19)</td>
-          <td>a216f20b-1552-5927-bc39-a1efe28ed9b0</td>
+          <td data-label="First Name">Brooke</td>
+          <td data-label="Last Name">Wilson</td>
+          <td data-label="Age">28</td>
+          <td data-label="Email">[e-mail]</td>
+          <td data-label="Phone">205-5372-41</td>
+          <td data-label="Occupation">Chemist</td>
         </tr>
+
         <tr>
-          <td>Trevor Hammond</td>
-          <td>198f:2126:9682:2ccc:acdf:73e5:4715:b8c5</td>
-          <td>Napuguvu</td>
-          <td>rgb(58,135,237)</td>
-          <td>a8247460-61f7-58fd-9a26-7d68fc33f0bf</td>
+          <td data-label="First Name">Mike</td>
+          <td data-label="Last Name">Gray</td>
+          <td data-label="Age">18</td>
+          <td data-label="Email">[e-mail]</td>
+          <td data-label="Phone">461-7753-79</td>
+          <td data-label="Occupation">Salesman</td>
         </tr>
+
         <tr>
-          <td>Luella Larson</td>
-          <td>9091:b40e:ef3c:9995:c680:726d:d8d0:ad81</td>
-          <td>Nalbago</td>
-          <td>rgb(198,52,108)</td>
-          <td>2ec4c916-d6bc-5b2f-8e48-9c6cf6c21841</td>
+          <td data-label="First Name">Lana</td>
+          <td data-label="Last Name">Anderson</td>
+          <td data-label="Age">22</td>
+          <td data-label="Email">[e-mail]</td>
+          <td data-label="Phone">081-5107-79</td>
+          <td data-label="Occupation">Insurer</td>
         </tr>
+
+        <tr>
+          <td data-label="First Name">Tiana</td>
+          <td data-label="Last Name">Hamilton</td>
+          <td data-label="Age">26</td>
+          <td data-label="Email">[e-mail]</td>
+          <td data-label="Phone">891-8443-49</td>
+          <td data-label="Occupation">Botanist</td>
+        </tr>
+
+        <tr>
+          <td data-label="First Name">Sarah</td>
+          <td data-label="Last Name">Wells</td>
+          <td data-label="Age">19</td>
+          <td data-label="Email">[e-mail]</td>
+          <td data-label="Phone">965-9761-21</td>
+          <td data-label="Occupation">Lawer</td>
+        </tr>
+
+        <tr>
+          <td data-label="First Name">Sabrina</td>
+          <td data-label="Last Name">Clark</td>
+          <td data-label="Age">29</td>
+          <td data-label="Email">[e-mail]</td>
+          <td data-label="Phone">696-0496-39</td>
+          <td data-label="Occupation">Cook</td>
+        </tr>
+
+        <tr>
+          <td data-label="First Name">Aida</td>
+          <td data-label="Last Name">Murray</td>
+          <td data-label="Age">24</td>
+          <td data-label="Email">[e-mail]</td>
+          <td data-label="Phone">745-8902-41</td>
+          <td data-label="Occupation">Driver</td>
+        </tr>
+
+        <tr>
+          <td data-label="First Name">Blake</td>
+          <td data-label="Last Name">Allen</td>
+          <td data-label="Age">23</td>
+          <td data-label="Email">[e-mail]</td>
+          <td data-label="Phone">847-0746-25</td>
+          <td data-label="Occupation">Electrician</td>
+        </tr>
+
+        <tr>
+          <td data-label="First Name">Jasmine</td>
+          <td data-label="Last Name">Chapman</td>
+          <td data-label="Age">18</td>
+          <td data-label="Email">[e-mail]</td>
+          <td data-label="Phone">611-6688-06</td>
+          <td data-label="Occupation">Geologist</td>
+        </tr>
+
+        <tr>
+          <td data-label="First Name">Daniel</td>
+          <td data-label="Last Name">Reed</td>
+          <td data-label="Age">18</td>
+          <td data-label="Email">[e-mail]</td>
+          <td data-label="Phone">444-8592-39</td>
+          <td data-label="Occupation">Geologist</td>
+        </tr>
+
+        <tr>
+          <td data-label="First Name">Emma</td>
+          <td data-label="Last Name">Hill</td>
+          <td data-label="Age">24</td>
+          <td data-label="Email">[e-mail]</td>
+          <td data-label="Phone">369-1909-16</td>
+          <td data-label="Occupation">Biochemist</td>
+        </tr>
+
+        <tr>
+          <td data-label="First Name">Maya</td>
+          <td data-label="Last Name">Perry</td>
+          <td data-label="Age">21</td>
+          <td data-label="Email">[e-mail]</td>
+          <td data-label="Phone">035-6603-40</td>
+          <td data-label="Occupation">Electrician</td>
+        </tr>
+
+        <tr>
+          <td data-label="First Name">Andrew</td>
+          <td data-label="Last Name">Riley</td>
+          <td data-label="Age">18</td>
+          <td data-label="Email">[e-mail]</td>
+          <td data-label="Phone">636-6132-92</td>
+          <td data-label="Occupation">Baker</td>
+        </tr>
+
+        <tr>
+          <td data-label="First Name">Garry</td>
+          <td data-label="Last Name">Johnston</td>
+          <td data-label="Age">22</td>
+          <td data-label="Email">[e-mail]</td>
+          <td data-label="Phone">662-3140-83</td>
+          <td data-label="Occupation">Pharmacist</td>
+        </tr>
+
+        <tr>
+          <td data-label="First Name">Brooke</td>
+          <td data-label="Last Name">Parker</td>
+          <td data-label="Age">23</td>
+          <td data-label="Email">[e-mail]</td>
+          <td data-label="Phone">204-2494-86</td>
+          <td data-label="Occupation">Interior Designer</td>
+        </tr>
+
+        <tr>
+          <td data-label="First Name">Deanna</td>
+          <td data-label="Last Name">Ryan</td>
+          <td data-label="Age">18</td>
+          <td data-label="Email">[e-mail]</td>
+          <td data-label="Phone">324-1219-10</td>
+          <td data-label="Occupation">Jeweller</td>
+        </tr>
       </tbody>
@@ -76,4 +217,4 @@ </table>
 
-export const Demo = Default.bind({});
-// Adjust.args = { ...args };
+export const Adjust = Default.bind({});
+Adjust.args = { ...args };
 // Adjust.argTypes = { ...argTypes };

dist/custom-elements/index.js

@@ -58,3 +58,3 @@ import { attachShadow, h, Host, Fragment, createEvent, proxyCustomElement } from '@stencil/core/internal/client';
 
-const ecoButtonCss = "button{--color:var(--c-text);--highlight:var(--c-text);--fs:var(--fs-md);--padding:var(--sp-sm);--border-radius:var(--br-md);--shadow-outer:hsla(254, 39%, 17%, 0.2);position:relative;text-align:center;cursor:pointer;appearance:none;user-select:none;border:none;outline:0;display:flex;align-items:center;width:100%;padding:var(--padding);font-size:var(--fs);font-family:var(--ff-base);font-weight:var(--fw-bold);line-height:var(--line-height-tight);color:var(--color);background-color:var(--c-cta-background);border-radius:var(--border-radius)}button[disabled]{filter:grayscale(100%) opacity(0.8);cursor:not-allowed}button[disabled]:hover::before,button[disabled]:focus::before,button[disabled]:active::before{box-shadow:0 0 0 calc(var(--padding) / 4) var(--c-cta-background) inset,\n    0 0 0 calc(var(--padding) / 2) var(--highlight) inset, 0 0 0 transparent}button::before{transition:box-shadow 150ms;content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--border-radius);box-shadow:0 0 0 calc(var(--padding) / 8) var(--c-cta-background) inset,\n    0 0 0 calc(var(--padding) / 4) var(--highlight) inset, 0 0 0 transparent;mix-blend-mode:multiply}button:hover::before,button:focus::before{box-shadow:0 0 0 calc(var(--padding) / 8) transparent inset,\n    0 0 0 calc(var(--padding) / 4) var(--highlight) inset,\n    0 0 var(--padding) var(--shadow-outer)}button:active::before{box-shadow:0 0 0 calc(var(--padding) / 8) transparent inset,\n    0 0 0 calc(var(--padding) / 4) var(--highlight) inset,\n    0 0 var(--padding) var(--shadow-outer) inset}.default{--color:var(--c-text);--highlight:var(--c-text)}.info{--color:var(--c-cta-info);--highlight:var(--c-cta-info)}.ghost{--color:var(--c-text);--highlight:var(--c-cta-background)}.ghost:hover::before,.ghost:focus::before{--highlight:var(--c-text)}.success{--color:var(--c-cta-success);--highlight:var(--c-cta-success)}.danger{--color:var(--c-cta-danger);--highlight:var(--c-cta-danger)}.warning{--color:var(--c-cta-warning);--highlight:var(--c-cta-warning)}.sm{--fs:var(--fs-sm);--padding:var(--sp-xs);--border-radius:var(--br-sm)}.md{--fs:var(--fs-md);--padding:var(--sp-sm);--border-radius:var(--br-md)}.lg{--fs:var(--fs-lg);--padding:var(--sp-md);--border-radius:var(--br-lg)}.xl{--fs:var(--fs-xl);--padding:var(--sp-lg);--border-radius:var(--br-xl)}span{min-height:var(--fs-xl);display:flex;align-items:center}eco-icon{margin-right:var(--sp-xs)}";
+const ecoButtonCss = "button{--color:var(--c-text);--highlight:var(--c-text);--fs:var(--fs-md);--padding:var(--sp-sm);--border-radius:var(--br-md);--shadow-outer:hsla(var(--igs-primary-dark-blue-hsl), 0.2);position:relative;text-align:center;cursor:pointer;appearance:none;user-select:none;border:none;outline:0;display:flex;align-items:center;width:100%;padding:var(--padding);font-size:var(--fs);font-family:var(--ff-base);font-weight:var(--fw-bold);line-height:var(--line-height-tight);color:var(--color);background-color:var(--c-cta-background);border-radius:var(--border-radius)}button[disabled]{filter:grayscale(100%) opacity(0.8);cursor:not-allowed;background-color:var(--c-input-disabled)}button[disabled]:hover::before,button[disabled]:focus::before,button[disabled]:active::before{box-shadow:0 0 0 var(--bw-base) var(--c-cta-background) inset,\n    0 0 0 var(--bw-thick) var(--highlight) inset, 0 0 0 transparent}button::before{transition:box-shadow 150ms;content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--border-radius);box-shadow:0 0 0 var(--bw-base) var(--c-cta-background) inset,\n    0 0 0 var(--bw-thick) var(--highlight) inset, 0 0 0 transparent;mix-blend-mode:multiply}button:hover::before,button:focus::before{box-shadow:0 0 0 var(--bw-base) transparent inset,\n    0 0 0 var(--bw-thick) var(--highlight) inset,\n    0 0 var(--sp-sm) var(--shadow-outer)}button:active::before{box-shadow:0 0 0 var(--bw-base) transparent inset,\n    0 0 0 var(--bw-thick) var(--highlight) inset,\n    0 0 var(--sp-sm) var(--shadow-outer) inset}.default{--color:var(--c-text);--highlight:var(--c-text)}.info{--color:var(--c-cta-info);--highlight:var(--c-cta-info)}.ghost{--color:var(--c-text);--highlight:var(--c-cta-background)}.ghost:hover::before,.ghost:focus::before{--highlight:var(--c-text)}.success{--color:var(--c-cta-success);--highlight:var(--c-cta-success)}.danger{--color:var(--c-cta-danger);--highlight:var(--c-cta-danger)}.warning{--color:var(--c-cta-warning);--highlight:var(--c-cta-warning)}.sm{--fs:var(--fs-sm);--padding:var(--sp-xs);--border-radius:var(--br-md)}.md{--fs:var(--fs-md);--padding:var(--sp-sm);--border-radius:var(--br-md)}.lg{--fs:var(--fs-lg);--padding:var(--sp-md);--border-radius:var(--br-lg)}.xl{--fs:var(--fs-xl);--padding:var(--sp-lg);--border-radius:var(--br-xl)}span{min-height:var(--fs-xl);display:flex;align-items:center}eco-icon{margin-right:var(--sp-xs)}";
 
@@ -274,3 +274,3 @@ const EcoButton = class extends HTMLElement {
 
-const ecoInputFileCss = ":host{display:block;position:relative}input{width:0.1px;height:0.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}input+label{font-size:1.25em;font-weight:700;color:white;background-color:black;display:inline-block}input:focus+label,input+label:hover{background-color:red;cursor:pointer;outline:1px dotted #000}";
+const ecoInputFileCss = "div{--color:var(--c-text);max-width:100%;display:grid;gap:var(--sp-xs);grid-template-columns:100%}input{display:none}label{display:grid;grid-template-columns:1fr auto;gap:var(--sp-md);justify-content:center;align-items:center;box-shadow:0 0 0 var(--bw-thin) var(--color) inset;border-radius:var(--br-md);padding-left:var(--sp-md);user-select:none;cursor:pointer;background-color:var(--c-cta-background)}label:hover,label:focus,label::active{box-shadow:0 0 0 var(--bw-thick) var(--color) inset}.button{position:relative;cursor:pointer;user-select:none;padding:var(--sp-sm);font-family:var(--ff-base);font-weight:var(--fw-bold);line-height:var(--line-height-tight);color:var(--c-text);background-color:var(--c-cta-background);border-radius:var(--br-md)}.button::before{transition:box-shadow 150ms;content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--br-md);box-shadow:0 0 0 transparent inset, 0 0 0 var(--bw-base) var(--c-text) inset,\n    0 0 0 transparent;mix-blend-mode:multiply}.button:hover::before,.button:focus::before{box-shadow:0 0 0 var(--bw-base) transparent inset,\n    0 0 0 var(--bw-thick) var(--c-text) inset,\n    0 0 var(--sp-sm) hsla(var(--igs-primary-dark-blue-hsl), 0.2)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm label{width:15ch}.md label{width:30ch}.lg label{width:45ch}.full label{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}.disabled{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}.disabled .button{cursor:not-allowed;filter:grayscale(100%) opacity(0.8);cursor:not-allowed;background-color:var(--c-input-disabled);box-shadow:0 0 0 transparent inset, 0 0 0 var(--bw-base) var(--c-text) inset,\n    0 0 0 transparent}.disabled .button:hover::before,.disabled .button:focus::before,.disabled .button:active::before{box-shadow:0 0 0 transparent inset, 0 0 0 var(--bw-base) var(--c-text) inset,\n    0 0 0 transparent}";
 
@@ -282,4 +282,6 @@ const EcoInputFile = class extends HTMLElement {
     attachShadow(this);
-    this.label = "Text input label";
+    this.label = "File input label";
     this.optional = "Optional";
+    this.text = "Select a file...";
+    this.accept = "";
     this.status = EcoInputStatusList.default;
@@ -289,13 +291,27 @@ this.width = EcoInputWidthList.full;
   }
+  componentDidRender() {
+    const inputElement = this.el.shadowRoot.querySelector("input");
+    const labelElement = this.el.shadowRoot.querySelector("label .filename");
+    inputElement.addEventListener("change", function () {
+      var fileName = inputElement.files[0].name;
+      labelElement.textContent = fileName;
+    });
+  }
   render() {
     let idFile = new Date().getTime() + Math.floor(Math.random() * Math.floor(10000));
     this.inputId = idFile.toString();
-    let filename = document.querySelector("`input#${this.inputId}`");
-    console.log(filename);
-    return (h(Host, null, this.label && (h("eco-text-label", { for: this.inputId }, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("input", { id: this.inputId, type: "file", name: "file" }), h("eco-button", { label: "click" })));
+    const classMap = this.getCssClassMap();
+    return (h(Host, null, h("div", { class: classMap }, this.label && (h("eco-text-label", { for: this.inputId }, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("input", { id: this.inputId, name: "upload", type: "file", accept: this.accept, disabled: this.disabled, required: this.required }), h("label", { htmlFor: this.inputId, class: this.disabled ? "disabled" : "" }, h("span", { class: "filename" }, this.text), h("span", { class: "button" }, "Choose file")))));
   }
+  getCssClassMap() {
+    return {
+      [this.status]: true,
+      [this.width]: true,
+    };
+  }
+  get el() { return this; }
   static get style() { return ecoInputFileCss; }
 };
 
-const ecoInputTextCss = ":host{--color:var(--c-text);display:block;max-width:100%}div{display:grid;gap:var(--sp-xs);grid-template-columns:100%;color:var(--color)}input{font-size:var(--fs-md);font-weight:var(--fw-base);background-color:var(--c-cta-background);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--color) inset;max-width:100%}input:not(:placeholder-shown){box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--c-cta-danger) inset}input:valid{box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--c-cta-success) inset;box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--color) inset}input:focus{box-shadow:0 0 0 calc(var(--sp-xs) / 4) var(--color) inset}input[disabled]{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}input:read-only{color:var(--c-text-secondary)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm input{width:15ch}.md input{width:30ch}.lg input{width:45ch}.full input{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}";
+const ecoInputTextCss = ":host{--color:var(--c-text);display:block;max-width:100%}div{display:grid;gap:var(--sp-xs);grid-template-columns:100%;color:var(--color)}input{font-size:var(--fs-md);font-weight:var(--fw-base);background-color:var(--c-cta-background);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;box-shadow:0 0 0 var(--bw-base) var(--color) inset;max-width:100%}input:not(:placeholder-shown){box-shadow:0 0 0 var(--bw-base) var(--c-cta-danger) inset}input:valid{box-shadow:0 0 0 var(--bw-base) var(--c-cta-success) inset;box-shadow:0 0 0 var(--bw-base) var(--color) inset}input:focus{box-shadow:0 0 0 var(--bw-thick) var(--color) inset}input[disabled]{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}input:read-only{color:var(--c-text-secondary)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm input{width:15ch}.md input{width:30ch}.lg input{width:45ch}.full input{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}";
 
@@ -329,3 +345,3 @@ const EcoInputNumber = class extends HTMLElement {
 
-const ecoInputTextCss$1 = ":host{--color:var(--c-text);display:block;max-width:100%}div{display:grid;gap:var(--sp-xs);grid-template-columns:100%;color:var(--color)}input{font-size:var(--fs-md);font-weight:var(--fw-base);background-color:var(--c-cta-background);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--color) inset;max-width:100%}input:not(:placeholder-shown){box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--c-cta-danger) inset}input:valid{box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--c-cta-success) inset;box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--color) inset}input:focus{box-shadow:0 0 0 calc(var(--sp-xs) / 4) var(--color) inset}input[disabled]{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}input:read-only{color:var(--c-text-secondary)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm input{width:15ch}.md input{width:30ch}.lg input{width:45ch}.full input{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}";
+const ecoInputTextCss$1 = ":host{--color:var(--c-text);display:block;max-width:100%}div{display:grid;gap:var(--sp-xs);grid-template-columns:100%;color:var(--color)}input{font-size:var(--fs-md);font-weight:var(--fw-base);background-color:var(--c-cta-background);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;box-shadow:0 0 0 var(--bw-base) var(--color) inset;max-width:100%}input:not(:placeholder-shown){box-shadow:0 0 0 var(--bw-base) var(--c-cta-danger) inset}input:valid{box-shadow:0 0 0 var(--bw-base) var(--c-cta-success) inset;box-shadow:0 0 0 var(--bw-base) var(--color) inset}input:focus{box-shadow:0 0 0 var(--bw-thick) var(--color) inset}input[disabled]{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}input:read-only{color:var(--c-text-secondary)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm input{width:15ch}.md input{width:30ch}.lg input{width:45ch}.full input{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}";
 
@@ -359,3 +375,3 @@ const EcoInputText = class extends HTMLElement {
 
-const ecoInputTextareaCss = ":host{--color:var(--c-text);--height:var(--fs-md);display:block;max-width:100%}div{display:grid;gap:var(--sp-xs);grid-template-columns:100%;color:var(--color)}textarea{background-color:var(--c-cta-background);font-family:var(--ff-base);font-size:var(--fs-md);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--color) inset;max-width:100%;resize:none}textarea:valid{box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--c-cta-success) inset;box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--color) inset}textarea:focus{box-shadow:0 0 0 calc(var(--sp-xs) / 4) var(--color) inset}textarea[disabled]{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}textarea:read-only{color:var(--c-text-secondary)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm textarea{width:15ch}.md textarea{width:30ch}.lg textarea{width:45ch}.full textarea{max-width:100%}.short textarea{height:calc(var(--height) * 4)}.average textarea{height:calc(var(--height) * 6)}.tall textarea{height:calc(var(--height) * 15)}.resize{resize:both}";
+const ecoInputTextareaCss = ":host{--color:var(--c-text);--height:var(--fs-md);display:block;max-width:100%}div{display:grid;gap:var(--sp-xs);grid-template-columns:100%;color:var(--color)}textarea{background-color:var(--c-cta-background);font-family:var(--ff-base);font-size:var(--fs-md);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;box-shadow:0 0 0 var(--bw-base) var(--color) inset;max-width:100%;resize:none}textarea:valid{box-shadow:0 0 0 var(--bw-base) var(--c-cta-success) inset;box-shadow:0 0 0 var(--bw-base) var(--color) inset}textarea:focus{box-shadow:0 0 0 var(--bw-thick) var(--color) inset}textarea[disabled]{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}textarea:read-only{color:var(--c-text-secondary)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm textarea{width:15ch}.md textarea{width:30ch}.lg textarea{width:45ch}.full textarea{max-width:100%}.short textarea{height:calc(var(--height) * 4)}.average textarea{height:calc(var(--height) * 6)}.tall textarea{height:calc(var(--height) * 15)}.resize{resize:both}";
 
@@ -452,3 +468,3 @@ const EcoInputTextarea = class extends HTMLElement {
 
-const ecoSelectCss = ":host{--color:var(--c-text);display:block;max-width:100%}div{display:grid;gap:var(--sp-xs);grid-template-columns:100%;color:var(--color)}select{display:block;font-size:var(--fs-md);font-family:var(--ff-base);font-weight:var(--fw-base);color:var(--color);line-height:var(--line-height-base);padding:var(--sp-sm);width:100%;max-width:100%;box-sizing:border-box;margin:0;border:0;box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--color) inset;border-radius:var(--br-md);-moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:var(--c-cta-background);background-image:url(\"eco/static/icons/content-collapse.svg\");background-repeat:no-repeat;background-position:right var(--sp-xs) top 50%;background-size:var(--sp-xl) auto}select::-ms-expand{display:none}select:hover{box-shadow:0 0 0 calc(var(--sp-xs) / 4) var(--color) inset}select:focus{box-shadow:0 0 0 calc(var(--sp-xs) / 4) var(--color) inset;color:var(--color);outline:none}select option{font-weight:var(--fw-base)}*[dir=\"rtl\"] select,:root:lang(ar) select,:root:lang(iw) select{background-position:left var(--sp-xs) top 50%}select:disabled,select[aria-disabled=\"true\"]{color:var(--c-text);background-color:var(--c-input-disabled);cursor:not-allowed}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm select{width:15ch}.md select{width:30ch}.lg select{width:45ch}.full select{width:100%}";
+const ecoSelectCss = ":host{--color:var(--c-text);display:block;max-width:100%}div{display:grid;gap:var(--sp-xs);grid-template-columns:100%;color:var(--color)}select{display:block;font-size:var(--fs-md);font-family:var(--ff-base);font-weight:var(--fw-base);color:var(--color);line-height:var(--line-height-base);padding:var(--sp-sm);width:100%;max-width:100%;box-sizing:border-box;margin:0;border:0;box-shadow:0 0 0 var(--bw-base) var(--color) inset;border-radius:var(--br-md);-moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:var(--c-cta-background);background-image:url(\"eco/static/icons/content-collapse.svg\");background-repeat:no-repeat;background-position:right var(--sp-xs) top 50%;background-size:var(--sp-xl) auto}select::-ms-expand{display:none}select:hover{box-shadow:0 0 0 var(--bw-thick) var(--color) inset}select:focus{box-shadow:0 0 0 var(--bw-thick) var(--color) inset;color:var(--color);outline:none}select option{font-weight:var(--fw-base)}*[dir=\"rtl\"] select,:root:lang(ar) select,:root:lang(iw) select{background-position:left var(--sp-xs) top 50%}select:disabled,select[aria-disabled=\"true\"]{color:var(--c-text);background-color:var(--c-input-disabled);cursor:not-allowed}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm select{width:15ch}.md select{width:30ch}.lg select{width:45ch}.full select{width:100%}";
 
@@ -481,4 +497,2 @@ const EcoSelect = class extends HTMLElement {
 
-const ecoTableCss = ":host{display:block;overflow:auto;--table-background:hsl(0, 0%, 100%);--table-even-row:hsla(var(--igs-primary-dark-blue-hsl), 0.05);--table-shadow:hsla(var(--igs-primary-dark-blue-h), 0%, 60%, 0.4)}::slotted(*){color:red}::slotted(table){width:100%;border-collapse:collapse;border-spacing:0;background-color:aquamarine;background-color:var(--table-background);border-radius:var(--br-sm);box-shadow:0 calc(var(--sp-md) / 8) calc(var(--sp-md) / 6)\n    var(--table-shadow);position:relative}::slotted(thead){background-color:var(--c-cta-background);box-shadow:0 calc(var(--sp-md) / 12) calc(var(--sp-md) / 8)\n    var(--table-shadow)}::slotted(tr:nth-of-type(even)){background-color:var(--table-even-row)}::slotted(th),::slotted(td){white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0}::slotted(th){position:sticky;top:0;padding:var(--sp-xs);font-size:var(--fs-sm)}::slotted(td){padding:var(--sp-xs)}";
-
 const EcoTable = class extends HTMLElement {
@@ -491,5 +505,8 @@ constructor() {
   render() {
-    return (h(Host, null, h("slot", null)));
+    return (h(Host, { "qa-id": this.tableQaId, class: {
+        sticky: this.sticky,
+        responsive: this.responsive,
+        equalcolumns: this.equalcolumns,
+      } }, h("slot", null)));
   }
-  static get style() { return ecoTableCss; }
 };
@@ -545,3 +562,3 @@
 const EcoInputDate$1 = /*@__PURE__*/proxyCustomElement(EcoInputDate, [1,"eco-input-date",{"label":[1],"help":[1],"optional":[1],"readonly":[4],"required":[4],"disabled":[4],"withnow":[4],"withtime":[4],"ddmin":[2],"ddmax":[2],"mmmin":[2],"mmmax":[2],"yyyymin":[2],"yyyymax":[2],"minutemin":[2],"minutemax":[2],"hourmin":[2],"hourmax":[2]}]);
-const EcoInputFile$1 = /*@__PURE__*/proxyCustomElement(EcoInputFile, [1,"eco-input-file",{"label":[1],"help":[1],"optional":[1],"value":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]);
+const EcoInputFile$1 = /*@__PURE__*/proxyCustomElement(EcoInputFile, [1,"eco-input-file",{"label":[1],"help":[1],"optional":[1],"text":[1],"accept":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]);
 const EcoInputNumber$1 = /*@__PURE__*/proxyCustomElement(EcoInputNumber, [1,"eco-input-number",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[2],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"min":[2],"max":[2],"step":[2],"inputId":[1,"input-id"]}]);
@@ -554,3 +571,3 @@ const EcoInputText$1 = /*@__PURE__*/proxyCustomElement(EcoInputText, [1,"eco-input-text",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]);
 const EcoSelect$1 = /*@__PURE__*/proxyCustomElement(EcoSelect, [4,"eco-select",{"label":[1],"help":[1],"name":[1],"optional":[1],"status":[1],"width":[1],"selectQaId":[1,"select-qa-id"],"disabled":[4],"required":[4],"inputId":[1,"input-id"]}]);
-const EcoTable$1 = /*@__PURE__*/proxyCustomElement(EcoTable, [1,"eco-table"]);
+const EcoTable$1 = /*@__PURE__*/proxyCustomElement(EcoTable, [1,"eco-table",{"responsive":[4],"equalcolumns":[4],"sticky":[4],"tableQaId":[1,"table-qa-id"]}]);
 const EcoTextInputHelp$1 = /*@__PURE__*/proxyCustomElement(EcoTextInputHelp, [1,"eco-text-input-help"]);
@@ -557,0 +574,0 @@ const EcoTextInputOptional$1 = /*@__PURE__*/proxyCustomElement(EcoTextInputOptional, [1,"eco-text-input-optional"]);

dist/eco/eco.esm.js

@@ -1,1 +0,1 @@
-import{p as e,b as a}from"./p-8908b1ea.js";(()=>{const a=import.meta.url,i={};return""!==a&&(i.resourcesUrl=new URL(".",a).href),e(i)})().then((e=>a([["p-ed3c855b",[[1,"eco-messagebox",{type:[1],icon:[1],icontype:[1]}],[1,"eco-icon",{icon:[1],icontype:[1],iconsize:[1],url:[1]}]]],["p-2104b95b",[[1,"eco-input-file",{label:[1],help:[1],optional:[1],value:[1],status:[1],width:[1],disabled:[4],readonly:[4],required:[4],inputId:[1,"input-id"]}]]],["p-24b61043",[[1,"eco-card",{cardQaId:[1,"card-qa-id"],sticky:[4],collapsable:[4],collapsed:[4]}]]],["p-5f0647fa",[[1,"eco-text-label",{for:[1],labelQaId:[1,"label-qa-id"],wrap:[4]}]]],["p-bfcf61ab",[[1,"eco-input-date",{label:[1],help:[1],optional:[1],readonly:[4],required:[4],disabled:[4],withnow:[4],withtime:[4],ddmin:[2],ddmax:[2],mmmin:[2],mmmax:[2],yyyymin:[2],yyyymax:[2],minutemin:[2],minutemax:[2],hourmin:[2],hourmax:[2]}]]],["p-18c6956c",[[1,"eco-input-text",{type:[1],label:[1],help:[1],optional:[1],value:[1],status:[1],width:[1],disabled:[4],readonly:[4],required:[4],inputId:[1,"input-id"]}]]],["p-df4d18c8",[[1,"eco-input-textarea",{label:[1],value:[1],help:[1],optional:[1],status:[1],width:[1],height:[1],disabled:[4],readonly:[4],required:[4],resize:[4],inputId:[1,"input-id"]}]]],["p-1242c800",[[1,"eco-radio-group",{label:[1],help:[1],radioData:[16]}]]],["p-703e41f0",[[4,"eco-select",{label:[1],help:[1],name:[1],optional:[1],status:[1],width:[1],selectQaId:[1,"select-qa-id"],disabled:[4],required:[4],inputId:[1,"input-id"]}]]],["p-7c96afeb",[[1,"eco-checkbox",{label:[1],name:[1],checkboxQaId:[1,"checkbox-qa-id"],checked:[4],disabled:[4],inputId:[1,"input-id"]}]]],["p-1e6376d0",[[1,"eco-radio-button",{name:[1],label:[1],radioQaId:[1,"radio-qa-id"],checked:[4],disabled:[4],controlValue:[1,"control-value"],inputId:[1,"input-id"]}]]],["p-81e19add",[[1,"eco-description",{term:[1],description:[1],descQaId:[1,"desc-qa-id"]}]]],["p-178d8da8",[[1,"eco-description-group",{vertical:[4]}]]],["p-ae9f7192",[[1,"eco-table"]]],["p-e73b2438",[[1,"eco-input-number",{type:[1],label:[1],help:[1],optional:[1],value:[2],status:[1],width:[1],disabled:[4],readonly:[4],required:[4],min:[2],max:[2],step:[2],inputId:[1,"input-id"]}]]],["p-1938da92",[[1,"eco-button",{label:[1],size:[1],type:[1],disabled:[4],icon:[1],icontype:[1],iconsize:[1]}]]],["p-08f0a10b",[[1,"eco-card-body"],[1,"eco-card-footer"],[1,"eco-card-header"]]],["p-e7404a01",[[1,"eco-text-input-optional"],[1,"eco-text-input-help"]]]],e)));
+import{p as e,b as a}from"./p-8908b1ea.js";(()=>{const a=import.meta.url,i={};return""!==a&&(i.resourcesUrl=new URL(".",a).href),e(i)})().then((e=>a([["p-4c94bc11",[[1,"eco-card",{cardQaId:[1,"card-qa-id"],sticky:[4],collapsable:[4],collapsed:[4]}]]],["p-bfcf61ab",[[1,"eco-input-date",{label:[1],help:[1],optional:[1],readonly:[4],required:[4],disabled:[4],withnow:[4],withtime:[4],ddmin:[2],ddmax:[2],mmmin:[2],mmmax:[2],yyyymin:[2],yyyymax:[2],minutemin:[2],minutemax:[2],hourmin:[2],hourmax:[2]}]]],["p-3e5babfd",[[1,"eco-input-file",{label:[1],help:[1],optional:[1],text:[1],accept:[1],status:[1],width:[1],disabled:[4],readonly:[4],required:[4],inputId:[1,"input-id"]}]]],["p-7e5140fb",[[1,"eco-input-text",{type:[1],label:[1],help:[1],optional:[1],value:[1],status:[1],width:[1],disabled:[4],readonly:[4],required:[4],inputId:[1,"input-id"]}]]],["p-081f8d61",[[1,"eco-input-textarea",{label:[1],value:[1],help:[1],optional:[1],status:[1],width:[1],height:[1],disabled:[4],readonly:[4],required:[4],resize:[4],inputId:[1,"input-id"]}]]],["p-1242c800",[[1,"eco-radio-group",{label:[1],help:[1],radioData:[16]}]]],["p-04de9fff",[[4,"eco-select",{label:[1],help:[1],name:[1],optional:[1],status:[1],width:[1],selectQaId:[1,"select-qa-id"],disabled:[4],required:[4],inputId:[1,"input-id"]}]]],["p-6ff3ca43",[[1,"eco-button",{label:[1],size:[1],type:[1],disabled:[4],icon:[1],icontype:[1],iconsize:[1]}]]],["p-7c96afeb",[[1,"eco-checkbox",{label:[1],name:[1],checkboxQaId:[1,"checkbox-qa-id"],checked:[4],disabled:[4],inputId:[1,"input-id"]}]]],["p-4bc1460d",[[1,"eco-messagebox",{type:[1],icon:[1],icontype:[1]}]]],["p-1e6376d0",[[1,"eco-radio-button",{name:[1],label:[1],radioQaId:[1,"radio-qa-id"],checked:[4],disabled:[4],controlValue:[1,"control-value"],inputId:[1,"input-id"]}]]],["p-81e19add",[[1,"eco-description",{term:[1],description:[1],descQaId:[1,"desc-qa-id"]}]]],["p-178d8da8",[[1,"eco-description-group",{vertical:[4]}]]],["p-35c67271",[[1,"eco-table",{responsive:[4],equalcolumns:[4],sticky:[4],tableQaId:[1,"table-qa-id"]}]]],["p-5f0647fa",[[1,"eco-text-label",{for:[1],labelQaId:[1,"label-qa-id"],wrap:[4]}]]],["p-20a424fc",[[1,"eco-input-number",{type:[1],label:[1],help:[1],optional:[1],value:[2],status:[1],width:[1],disabled:[4],readonly:[4],required:[4],min:[2],max:[2],step:[2],inputId:[1,"input-id"]}]]],["p-08f0a10b",[[1,"eco-card-body"],[1,"eco-card-footer"],[1,"eco-card-header"]]],["p-510ae47a",[[1,"eco-icon",{icon:[1],icontype:[1],iconsize:[1],url:[1]}]]],["p-e7404a01",[[1,"eco-text-input-optional"],[1,"eco-text-input-help"]]]],e)));

dist/esm/eco-button.entry.js

 import { r as registerInstance, h, H as Host } from './index-4789c778.js';
-import { b as EcoInputSizeList, a as EcoTypeList } from './utils-260779fb.js';
+import { E as EcoInputSizeList, a as EcoTypeList } from './utils-d466c8a5.js';
 
-const ecoButtonCss = "button{--color:var(--c-text);--highlight:var(--c-text);--fs:var(--fs-md);--padding:var(--sp-sm);--border-radius:var(--br-md);--shadow-outer:hsla(254, 39%, 17%, 0.2);position:relative;text-align:center;cursor:pointer;appearance:none;user-select:none;border:none;outline:0;display:flex;align-items:center;width:100%;padding:var(--padding);font-size:var(--fs);font-family:var(--ff-base);font-weight:var(--fw-bold);line-height:var(--line-height-tight);color:var(--color);background-color:var(--c-cta-background);border-radius:var(--border-radius)}button[disabled]{filter:grayscale(100%) opacity(0.8);cursor:not-allowed}button[disabled]:hover::before,button[disabled]:focus::before,button[disabled]:active::before{box-shadow:0 0 0 calc(var(--padding) / 4) var(--c-cta-background) inset,\n    0 0 0 calc(var(--padding) / 2) var(--highlight) inset, 0 0 0 transparent}button::before{transition:box-shadow 150ms;content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--border-radius);box-shadow:0 0 0 calc(var(--padding) / 8) var(--c-cta-background) inset,\n    0 0 0 calc(var(--padding) / 4) var(--highlight) inset, 0 0 0 transparent;mix-blend-mode:multiply}button:hover::before,button:focus::before{box-shadow:0 0 0 calc(var(--padding) / 8) transparent inset,\n    0 0 0 calc(var(--padding) / 4) var(--highlight) inset,\n    0 0 var(--padding) var(--shadow-outer)}button:active::before{box-shadow:0 0 0 calc(var(--padding) / 8) transparent inset,\n    0 0 0 calc(var(--padding) / 4) var(--highlight) inset,\n    0 0 var(--padding) var(--shadow-outer) inset}.default{--color:var(--c-text);--highlight:var(--c-text)}.info{--color:var(--c-cta-info);--highlight:var(--c-cta-info)}.ghost{--color:var(--c-text);--highlight:var(--c-cta-background)}.ghost:hover::before,.ghost:focus::before{--highlight:var(--c-text)}.success{--color:var(--c-cta-success);--highlight:var(--c-cta-success)}.danger{--color:var(--c-cta-danger);--highlight:var(--c-cta-danger)}.warning{--color:var(--c-cta-warning);--highlight:var(--c-cta-warning)}.sm{--fs:var(--fs-sm);--padding:var(--sp-xs);--border-radius:var(--br-sm)}.md{--fs:var(--fs-md);--padding:var(--sp-sm);--border-radius:var(--br-md)}.lg{--fs:var(--fs-lg);--padding:var(--sp-md);--border-radius:var(--br-lg)}.xl{--fs:var(--fs-xl);--padding:var(--sp-lg);--border-radius:var(--br-xl)}span{min-height:var(--fs-xl);display:flex;align-items:center}eco-icon{margin-right:var(--sp-xs)}";
+const ecoButtonCss = "button{--color:var(--c-text);--highlight:var(--c-text);--fs:var(--fs-md);--padding:var(--sp-sm);--border-radius:var(--br-md);--shadow-outer:hsla(var(--igs-primary-dark-blue-hsl), 0.2);position:relative;text-align:center;cursor:pointer;appearance:none;user-select:none;border:none;outline:0;display:flex;align-items:center;width:100%;padding:var(--padding);font-size:var(--fs);font-family:var(--ff-base);font-weight:var(--fw-bold);line-height:var(--line-height-tight);color:var(--color);background-color:var(--c-cta-background);border-radius:var(--border-radius)}button[disabled]{filter:grayscale(100%) opacity(0.8);cursor:not-allowed;background-color:var(--c-input-disabled)}button[disabled]:hover::before,button[disabled]:focus::before,button[disabled]:active::before{box-shadow:0 0 0 var(--bw-base) var(--c-cta-background) inset,\n    0 0 0 var(--bw-thick) var(--highlight) inset, 0 0 0 transparent}button::before{transition:box-shadow 150ms;content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--border-radius);box-shadow:0 0 0 var(--bw-base) var(--c-cta-background) inset,\n    0 0 0 var(--bw-thick) var(--highlight) inset, 0 0 0 transparent;mix-blend-mode:multiply}button:hover::before,button:focus::before{box-shadow:0 0 0 var(--bw-base) transparent inset,\n    0 0 0 var(--bw-thick) var(--highlight) inset,\n    0 0 var(--sp-sm) var(--shadow-outer)}button:active::before{box-shadow:0 0 0 var(--bw-base) transparent inset,\n    0 0 0 var(--bw-thick) var(--highlight) inset,\n    0 0 var(--sp-sm) var(--shadow-outer) inset}.default{--color:var(--c-text);--highlight:var(--c-text)}.info{--color:var(--c-cta-info);--highlight:var(--c-cta-info)}.ghost{--color:var(--c-text);--highlight:var(--c-cta-background)}.ghost:hover::before,.ghost:focus::before{--highlight:var(--c-text)}.success{--color:var(--c-cta-success);--highlight:var(--c-cta-success)}.danger{--color:var(--c-cta-danger);--highlight:var(--c-cta-danger)}.warning{--color:var(--c-cta-warning);--highlight:var(--c-cta-warning)}.sm{--fs:var(--fs-sm);--padding:var(--sp-xs);--border-radius:var(--br-md)}.md{--fs:var(--fs-md);--padding:var(--sp-sm);--border-radius:var(--br-md)}.lg{--fs:var(--fs-lg);--padding:var(--sp-md);--border-radius:var(--br-lg)}.xl{--fs:var(--fs-xl);--padding:var(--sp-lg);--border-radius:var(--br-xl)}span{min-height:var(--fs-xl);display:flex;align-items:center}eco-icon{margin-right:var(--sp-xs)}";
 
@@ -6,0 +6,0 @@ const EcoButton = class {

dist/esm/eco-card.entry.js

 import { r as registerInstance, h, F as Fragment, H as Host, g as getElement } from './index-4789c778.js';
-import { b as EcoInputSizeList, E as EcoIconList } from './utils-260779fb.js';
+import { E as EcoInputSizeList, b as EcoIconList } from './utils-d466c8a5.js';
 
@@ -4,0 +4,0 @@ const ecoCardCss = ":host{--card-background:hsl(0, 0%, 100%);--card-shadow:hsl(var(--igs-primary-dark-blue-h), 0%, 60%, 0.4);display:block;background-color:var(--card-background);border-radius:var(--br-md);box-shadow:0 calc(var(--sp-md) / 8) calc(var(--sp-md) / 6) var(--card-shadow);z-index:1}.sticky{position:sticky;top:0;background-color:var(--card-background);z-index:2}.collapsable{cursor:pointer;user-select:none}.collapsed{border-radius:var(--br-md)}";

dist/esm/eco-input-file.entry.js

@@ -1,5 +0,5 @@
-import { r as registerInstance, h, H as Host } from './index-4789c778.js';
-import { c as EcoInputStatusList, d as EcoInputWidthList } from './utils-260779fb.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-4789c778.js';
+import { c as EcoInputStatusList, d as EcoInputWidthList } from './utils-d466c8a5.js';
 
-const ecoInputFileCss = ":host{display:block;position:relative}input{width:0.1px;height:0.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}input+label{font-size:1.25em;font-weight:700;color:white;background-color:black;display:inline-block}input:focus+label,input+label:hover{background-color:red;cursor:pointer;outline:1px dotted #000}";
+const ecoInputFileCss = "div{--color:var(--c-text);max-width:100%;display:grid;gap:var(--sp-xs);grid-template-columns:100%}input{display:none}label{display:grid;grid-template-columns:1fr auto;gap:var(--sp-md);justify-content:center;align-items:center;box-shadow:0 0 0 var(--bw-thin) var(--color) inset;border-radius:var(--br-md);padding-left:var(--sp-md);user-select:none;cursor:pointer;background-color:var(--c-cta-background)}label:hover,label:focus,label::active{box-shadow:0 0 0 var(--bw-thick) var(--color) inset}.button{position:relative;cursor:pointer;user-select:none;padding:var(--sp-sm);font-family:var(--ff-base);font-weight:var(--fw-bold);line-height:var(--line-height-tight);color:var(--c-text);background-color:var(--c-cta-background);border-radius:var(--br-md)}.button::before{transition:box-shadow 150ms;content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--br-md);box-shadow:0 0 0 transparent inset, 0 0 0 var(--bw-base) var(--c-text) inset,\n    0 0 0 transparent;mix-blend-mode:multiply}.button:hover::before,.button:focus::before{box-shadow:0 0 0 var(--bw-base) transparent inset,\n    0 0 0 var(--bw-thick) var(--c-text) inset,\n    0 0 var(--sp-sm) hsla(var(--igs-primary-dark-blue-hsl), 0.2)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm label{width:15ch}.md label{width:30ch}.lg label{width:45ch}.full label{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}.disabled{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}.disabled .button{cursor:not-allowed;filter:grayscale(100%) opacity(0.8);cursor:not-allowed;background-color:var(--c-input-disabled);box-shadow:0 0 0 transparent inset, 0 0 0 var(--bw-base) var(--c-text) inset,\n    0 0 0 transparent}.disabled .button:hover::before,.disabled .button:focus::before,.disabled .button:active::before{box-shadow:0 0 0 transparent inset, 0 0 0 var(--bw-base) var(--c-text) inset,\n    0 0 0 transparent}";
 
@@ -9,4 +9,6 @@ const EcoInputFile = class {
     registerInstance(this, hostRef);
-    this.label = "Text input label";
+    this.label = "File input label";
     this.optional = "Optional";
+    this.text = "Select a file...";
+    this.accept = "";
     this.status = EcoInputStatusList.default;
@@ -16,9 +18,23 @@ this.width = EcoInputWidthList.full;
   }
+  componentDidRender() {
+    const inputElement = this.el.shadowRoot.querySelector("input");
+    const labelElement = this.el.shadowRoot.querySelector("label .filename");
+    inputElement.addEventListener("change", function () {
+      var fileName = inputElement.files[0].name;
+      labelElement.textContent = fileName;
+    });
+  }
   render() {
     let idFile = new Date().getTime() + Math.floor(Math.random() * Math.floor(10000));
     this.inputId = idFile.toString();
-    let filename = document.querySelector("`input#${this.inputId}`");
-    console.log(filename);
-    return (h(Host, null, this.label && (h("eco-text-label", { for: this.inputId }, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("input", { id: this.inputId, type: "file", name: "file" }), h("eco-button", { label: "click" })));
+    const classMap = this.getCssClassMap();
+    return (h(Host, null, h("div", { class: classMap }, this.label && (h("eco-text-label", { for: this.inputId }, this.label, !this.required && (h("eco-text-input-optional", null, this.optional)))), this.help && h("eco-text-input-help", null, this.help), h("input", { id: this.inputId, name: "upload", type: "file", accept: this.accept, disabled: this.disabled, required: this.required }), h("label", { htmlFor: this.inputId, class: this.disabled ? "disabled" : "" }, h("span", { class: "filename" }, this.text), h("span", { class: "button" }, "Choose file")))));
   }
+  getCssClassMap() {
+    return {
+      [this.status]: true,
+      [this.width]: true,
+    };
+  }
+  get el() { return getElement(this); }
 };
@@ -25,0 +41,0 @@ EcoInputFile.style = ecoInputFileCss;

dist/esm/eco-input-number.entry.js

 import { r as registerInstance, h, H as Host } from './index-4789c778.js';
-import { c as EcoInputStatusList, d as EcoInputWidthList } from './utils-260779fb.js';
+import { c as EcoInputStatusList, d as EcoInputWidthList } from './utils-d466c8a5.js';
 
-const ecoInputTextCss = ":host{--color:var(--c-text);display:block;max-width:100%}div{display:grid;gap:var(--sp-xs);grid-template-columns:100%;color:var(--color)}input{font-size:var(--fs-md);font-weight:var(--fw-base);background-color:var(--c-cta-background);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--color) inset;max-width:100%}input:not(:placeholder-shown){box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--c-cta-danger) inset}input:valid{box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--c-cta-success) inset;box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--color) inset}input:focus{box-shadow:0 0 0 calc(var(--sp-xs) / 4) var(--color) inset}input[disabled]{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}input:read-only{color:var(--c-text-secondary)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm input{width:15ch}.md input{width:30ch}.lg input{width:45ch}.full input{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}";
+const ecoInputTextCss = ":host{--color:var(--c-text);display:block;max-width:100%}div{display:grid;gap:var(--sp-xs);grid-template-columns:100%;color:var(--color)}input{font-size:var(--fs-md);font-weight:var(--fw-base);background-color:var(--c-cta-background);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;box-shadow:0 0 0 var(--bw-base) var(--color) inset;max-width:100%}input:not(:placeholder-shown){box-shadow:0 0 0 var(--bw-base) var(--c-cta-danger) inset}input:valid{box-shadow:0 0 0 var(--bw-base) var(--c-cta-success) inset;box-shadow:0 0 0 var(--bw-base) var(--color) inset}input:focus{box-shadow:0 0 0 var(--bw-thick) var(--color) inset}input[disabled]{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}input:read-only{color:var(--c-text-secondary)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm input{width:15ch}.md input{width:30ch}.lg input{width:45ch}.full input{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}";
 
@@ -6,0 +6,0 @@ const EcoInputNumber = class {

dist/esm/eco-input-text.entry.js

 import { r as registerInstance, h, H as Host } from './index-4789c778.js';
-import { c as EcoInputStatusList, d as EcoInputWidthList } from './utils-260779fb.js';
+import { c as EcoInputStatusList, d as EcoInputWidthList } from './utils-d466c8a5.js';
 
-const ecoInputTextCss = ":host{--color:var(--c-text);display:block;max-width:100%}div{display:grid;gap:var(--sp-xs);grid-template-columns:100%;color:var(--color)}input{font-size:var(--fs-md);font-weight:var(--fw-base);background-color:var(--c-cta-background);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--color) inset;max-width:100%}input:not(:placeholder-shown){box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--c-cta-danger) inset}input:valid{box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--c-cta-success) inset;box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--color) inset}input:focus{box-shadow:0 0 0 calc(var(--sp-xs) / 4) var(--color) inset}input[disabled]{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}input:read-only{color:var(--c-text-secondary)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm input{width:15ch}.md input{width:30ch}.lg input{width:45ch}.full input{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}";
+const ecoInputTextCss = ":host{--color:var(--c-text);display:block;max-width:100%}div{display:grid;gap:var(--sp-xs);grid-template-columns:100%;color:var(--color)}input{font-size:var(--fs-md);font-weight:var(--fw-base);background-color:var(--c-cta-background);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;box-shadow:0 0 0 var(--bw-base) var(--color) inset;max-width:100%}input:not(:placeholder-shown){box-shadow:0 0 0 var(--bw-base) var(--c-cta-danger) inset}input:valid{box-shadow:0 0 0 var(--bw-base) var(--c-cta-success) inset;box-shadow:0 0 0 var(--bw-base) var(--color) inset}input:focus{box-shadow:0 0 0 var(--bw-thick) var(--color) inset}input[disabled]{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}input:read-only{color:var(--c-text-secondary)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm input{width:15ch}.md input{width:30ch}.lg input{width:45ch}.full input{max-width:100%}eco-text-input-optional{margin-left:var(--sp-xs);margin-right:var(--sp-xs)}";
 
@@ -6,0 +6,0 @@ const EcoInputText = class {

dist/esm/eco-input-textarea.entry.js

 import { r as registerInstance, h, H as Host } from './index-4789c778.js';
-import { c as EcoInputStatusList, d as EcoInputWidthList } from './utils-260779fb.js';
+import { c as EcoInputStatusList, d as EcoInputWidthList } from './utils-d466c8a5.js';
 
-const ecoInputTextareaCss = ":host{--color:var(--c-text);--height:var(--fs-md);display:block;max-width:100%}div{display:grid;gap:var(--sp-xs);grid-template-columns:100%;color:var(--color)}textarea{background-color:var(--c-cta-background);font-family:var(--ff-base);font-size:var(--fs-md);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--color) inset;max-width:100%;resize:none}textarea:valid{box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--c-cta-success) inset;box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--color) inset}textarea:focus{box-shadow:0 0 0 calc(var(--sp-xs) / 4) var(--color) inset}textarea[disabled]{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}textarea:read-only{color:var(--c-text-secondary)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm textarea{width:15ch}.md textarea{width:30ch}.lg textarea{width:45ch}.full textarea{max-width:100%}.short textarea{height:calc(var(--height) * 4)}.average textarea{height:calc(var(--height) * 6)}.tall textarea{height:calc(var(--height) * 15)}.resize{resize:both}";
+const ecoInputTextareaCss = ":host{--color:var(--c-text);--height:var(--fs-md);display:block;max-width:100%}div{display:grid;gap:var(--sp-xs);grid-template-columns:100%;color:var(--color)}textarea{background-color:var(--c-cta-background);font-family:var(--ff-base);font-size:var(--fs-md);padding:var(--sp-sm);border-radius:var(--br-md);border:none;outline:none;appearance:none;box-shadow:0 0 0 var(--bw-base) var(--color) inset;max-width:100%;resize:none}textarea:valid{box-shadow:0 0 0 var(--bw-base) var(--c-cta-success) inset;box-shadow:0 0 0 var(--bw-base) var(--color) inset}textarea:focus{box-shadow:0 0 0 var(--bw-thick) var(--color) inset}textarea[disabled]{cursor:not-allowed;user-select:none;background-color:var(--c-input-disabled);color:var(--c-text)}textarea:read-only{color:var(--c-text-secondary)}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm textarea{width:15ch}.md textarea{width:30ch}.lg textarea{width:45ch}.full textarea{max-width:100%}.short textarea{height:calc(var(--height) * 4)}.average textarea{height:calc(var(--height) * 6)}.tall textarea{height:calc(var(--height) * 15)}.resize{resize:both}";
 
@@ -6,0 +6,0 @@ const EcoInputTextarea = class {

dist/esm/eco-select.entry.js

 import { r as registerInstance, h, H as Host } from './index-4789c778.js';
-import { c as EcoInputStatusList, d as EcoInputWidthList } from './utils-260779fb.js';
+import { c as EcoInputStatusList, d as EcoInputWidthList } from './utils-d466c8a5.js';
 
-const ecoSelectCss = ":host{--color:var(--c-text);display:block;max-width:100%}div{display:grid;gap:var(--sp-xs);grid-template-columns:100%;color:var(--color)}select{display:block;font-size:var(--fs-md);font-family:var(--ff-base);font-weight:var(--fw-base);color:var(--color);line-height:var(--line-height-base);padding:var(--sp-sm);width:100%;max-width:100%;box-sizing:border-box;margin:0;border:0;box-shadow:0 0 0 calc(var(--sp-xs) / 8) var(--color) inset;border-radius:var(--br-md);-moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:var(--c-cta-background);background-image:url(\"eco/static/icons/content-collapse.svg\");background-repeat:no-repeat;background-position:right var(--sp-xs) top 50%;background-size:var(--sp-xl) auto}select::-ms-expand{display:none}select:hover{box-shadow:0 0 0 calc(var(--sp-xs) / 4) var(--color) inset}select:focus{box-shadow:0 0 0 calc(var(--sp-xs) / 4) var(--color) inset;color:var(--color);outline:none}select option{font-weight:var(--fw-base)}*[dir=\"rtl\"] select,:root:lang(ar) select,:root:lang(iw) select{background-position:left var(--sp-xs) top 50%}select:disabled,select[aria-disabled=\"true\"]{color:var(--c-text);background-color:var(--c-input-disabled);cursor:not-allowed}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm select{width:15ch}.md select{width:30ch}.lg select{width:45ch}.full select{width:100%}";
+const ecoSelectCss = ":host{--color:var(--c-text);display:block;max-width:100%}div{display:grid;gap:var(--sp-xs);grid-template-columns:100%;color:var(--color)}select{display:block;font-size:var(--fs-md);font-family:var(--ff-base);font-weight:var(--fw-base);color:var(--color);line-height:var(--line-height-base);padding:var(--sp-sm);width:100%;max-width:100%;box-sizing:border-box;margin:0;border:0;box-shadow:0 0 0 var(--bw-base) var(--color) inset;border-radius:var(--br-md);-moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:var(--c-cta-background);background-image:url(\"eco/static/icons/content-collapse.svg\");background-repeat:no-repeat;background-position:right var(--sp-xs) top 50%;background-size:var(--sp-xl) auto}select::-ms-expand{display:none}select:hover{box-shadow:0 0 0 var(--bw-thick) var(--color) inset}select:focus{box-shadow:0 0 0 var(--bw-thick) var(--color) inset;color:var(--color);outline:none}select option{font-weight:var(--fw-base)}*[dir=\"rtl\"] select,:root:lang(ar) select,:root:lang(iw) select{background-position:left var(--sp-xs) top 50%}select:disabled,select[aria-disabled=\"true\"]{color:var(--c-text);background-color:var(--c-input-disabled);cursor:not-allowed}.default{--color:var(--c-text)}.error{--color:var(--c-cta-danger)}.success{--color:var(--c-cta-success)}.sm select{width:15ch}.md select{width:30ch}.lg select{width:45ch}.full select{width:100%}";
 
@@ -6,0 +6,0 @@ const EcoSelect = class {

dist/esm/eco-table.entry.js

 import { r as registerInstance, h, H as Host } from './index-4789c778.js';
 
-const ecoTableCss = ":host{display:block;overflow:auto;--table-background:hsl(0, 0%, 100%);--table-even-row:hsla(var(--igs-primary-dark-blue-hsl), 0.05);--table-shadow:hsla(var(--igs-primary-dark-blue-h), 0%, 60%, 0.4)}::slotted(*){color:red}::slotted(table){width:100%;border-collapse:collapse;border-spacing:0;background-color:aquamarine;background-color:var(--table-background);border-radius:var(--br-sm);box-shadow:0 calc(var(--sp-md) / 8) calc(var(--sp-md) / 6)\n    var(--table-shadow);position:relative}::slotted(thead){background-color:var(--c-cta-background);box-shadow:0 calc(var(--sp-md) / 12) calc(var(--sp-md) / 8)\n    var(--table-shadow)}::slotted(tr:nth-of-type(even)){background-color:var(--table-even-row)}::slotted(th),::slotted(td){white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0}::slotted(th){position:sticky;top:0;padding:var(--sp-xs);font-size:var(--fs-sm)}::slotted(td){padding:var(--sp-xs)}";
-
 const EcoTable = class {
@@ -10,7 +8,10 @@ constructor(hostRef) {
   render() {
-    return (h(Host, null, h("slot", null)));
+    return (h(Host, { "qa-id": this.tableQaId, class: {
+        sticky: this.sticky,
+        responsive: this.responsive,
+        equalcolumns: this.equalcolumns,
+      } }, h("slot", null)));
   }
 };
-EcoTable.style = ecoTableCss;
 
 export { EcoTable as eco_table };

dist/esm/eco.js

@@ -16,3 +16,3 @@ import { p as promiseResolve, b as bootstrapLazy } from './index-4789c778.js';
 patchBrowser().then(options => {
-  return bootstrapLazy([["eco-icon_2",[[1,"eco-messagebox",{"type":[1],"icon":[1],"icontype":[1]}],[1,"eco-icon",{"icon":[1],"icontype":[1],"iconsize":[1],"url":[1]}]]],["eco-input-file",[[1,"eco-input-file",{"label":[1],"help":[1],"optional":[1],"value":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-card",[[1,"eco-card",{"cardQaId":[1,"card-qa-id"],"sticky":[4],"collapsable":[4],"collapsed":[4]}]]],["eco-text-label",[[1,"eco-text-label",{"for":[1],"labelQaId":[1,"label-qa-id"],"wrap":[4]}]]],["eco-input-date",[[1,"eco-input-date",{"label":[1],"help":[1],"optional":[1],"readonly":[4],"required":[4],"disabled":[4],"withnow":[4],"withtime":[4],"ddmin":[2],"ddmax":[2],"mmmin":[2],"mmmax":[2],"yyyymin":[2],"yyyymax":[2],"minutemin":[2],"minutemax":[2],"hourmin":[2],"hourmax":[2]}]]],["eco-input-text",[[1,"eco-input-text",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-textarea",[[1,"eco-input-textarea",{"label":[1],"value":[1],"help":[1],"optional":[1],"status":[1],"width":[1],"height":[1],"disabled":[4],"readonly":[4],"required":[4],"resize":[4],"inputId":[1,"input-id"]}]]],["eco-radio-group",[[1,"eco-radio-group",{"label":[1],"help":[1],"radioData":[16]}]]],["eco-select",[[4,"eco-select",{"label":[1],"help":[1],"name":[1],"optional":[1],"status":[1],"width":[1],"selectQaId":[1,"select-qa-id"],"disabled":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-checkbox",[[1,"eco-checkbox",{"label":[1],"name":[1],"checkboxQaId":[1,"checkbox-qa-id"],"checked":[4],"disabled":[4],"inputId":[1,"input-id"]}]]],["eco-radio-button",[[1,"eco-radio-button",{"name":[1],"label":[1],"radioQaId":[1,"radio-qa-id"],"checked":[4],"disabled":[4],"controlValue":[1,"control-value"],"inputId":[1,"input-id"]}]]],["eco-description",[[1,"eco-description",{"term":[1],"description":[1],"descQaId":[1,"desc-qa-id"]}]]],["eco-description-group",[[1,"eco-description-group",{"vertical":[4]}]]],["eco-table",[[1,"eco-table"]]],["eco-input-number",[[1,"eco-input-number",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[2],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"min":[2],"max":[2],"step":[2],"inputId":[1,"input-id"]}]]],["eco-button",[[1,"eco-button",{"label":[1],"size":[1],"type":[1],"disabled":[4],"icon":[1],"icontype":[1],"iconsize":[1]}]]],["eco-card-body_3",[[1,"eco-card-body"],[1,"eco-card-footer"],[1,"eco-card-header"]]],["eco-text-input-help_2",[[1,"eco-text-input-optional"],[1,"eco-text-input-help"]]]], options);
+  return bootstrapLazy([["eco-card",[[1,"eco-card",{"cardQaId":[1,"card-qa-id"],"sticky":[4],"collapsable":[4],"collapsed":[4]}]]],["eco-input-date",[[1,"eco-input-date",{"label":[1],"help":[1],"optional":[1],"readonly":[4],"required":[4],"disabled":[4],"withnow":[4],"withtime":[4],"ddmin":[2],"ddmax":[2],"mmmin":[2],"mmmax":[2],"yyyymin":[2],"yyyymax":[2],"minutemin":[2],"minutemax":[2],"hourmin":[2],"hourmax":[2]}]]],["eco-input-file",[[1,"eco-input-file",{"label":[1],"help":[1],"optional":[1],"text":[1],"accept":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-text",[[1,"eco-input-text",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-textarea",[[1,"eco-input-textarea",{"label":[1],"value":[1],"help":[1],"optional":[1],"status":[1],"width":[1],"height":[1],"disabled":[4],"readonly":[4],"required":[4],"resize":[4],"inputId":[1,"input-id"]}]]],["eco-radio-group",[[1,"eco-radio-group",{"label":[1],"help":[1],"radioData":[16]}]]],["eco-select",[[4,"eco-select",{"label":[1],"help":[1],"name":[1],"optional":[1],"status":[1],"width":[1],"selectQaId":[1,"select-qa-id"],"disabled":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-button",[[1,"eco-button",{"label":[1],"size":[1],"type":[1],"disabled":[4],"icon":[1],"icontype":[1],"iconsize":[1]}]]],["eco-checkbox",[[1,"eco-checkbox",{"label":[1],"name":[1],"checkboxQaId":[1,"checkbox-qa-id"],"checked":[4],"disabled":[4],"inputId":[1,"input-id"]}]]],["eco-messagebox",[[1,"eco-messagebox",{"type":[1],"icon":[1],"icontype":[1]}]]],["eco-radio-button",[[1,"eco-radio-button",{"name":[1],"label":[1],"radioQaId":[1,"radio-qa-id"],"checked":[4],"disabled":[4],"controlValue":[1,"control-value"],"inputId":[1,"input-id"]}]]],["eco-description",[[1,"eco-description",{"term":[1],"description":[1],"descQaId":[1,"desc-qa-id"]}]]],["eco-description-group",[[1,"eco-description-group",{"vertical":[4]}]]],["eco-table",[[1,"eco-table",{"responsive":[4],"equalcolumns":[4],"sticky":[4],"tableQaId":[1,"table-qa-id"]}]]],["eco-text-label",[[1,"eco-text-label",{"for":[1],"labelQaId":[1,"label-qa-id"],"wrap":[4]}]]],["eco-input-number",[[1,"eco-input-number",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[2],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"min":[2],"max":[2],"step":[2],"inputId":[1,"input-id"]}]]],["eco-card-body_3",[[1,"eco-card-body"],[1,"eco-card-footer"],[1,"eco-card-header"]]],["eco-icon",[[1,"eco-icon",{"icon":[1],"icontype":[1],"iconsize":[1],"url":[1]}]]],["eco-text-input-help_2",[[1,"eco-text-input-optional"],[1,"eco-text-input-help"]]]], options);
 });

dist/esm/loader.js

@@ -13,3 +13,3 @@ import { p as promiseResolve, b as bootstrapLazy } from './index-4789c778.js';
   return patchEsm().then(() => {
-  return bootstrapLazy([["eco-icon_2",[[1,"eco-messagebox",{"type":[1],"icon":[1],"icontype":[1]}],[1,"eco-icon",{"icon":[1],"icontype":[1],"iconsize":[1],"url":[1]}]]],["eco-input-file",[[1,"eco-input-file",{"label":[1],"help":[1],"optional":[1],"value":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-card",[[1,"eco-card",{"cardQaId":[1,"card-qa-id"],"sticky":[4],"collapsable":[4],"collapsed":[4]}]]],["eco-text-label",[[1,"eco-text-label",{"for":[1],"labelQaId":[1,"label-qa-id"],"wrap":[4]}]]],["eco-input-date",[[1,"eco-input-date",{"label":[1],"help":[1],"optional":[1],"readonly":[4],"required":[4],"disabled":[4],"withnow":[4],"withtime":[4],"ddmin":[2],"ddmax":[2],"mmmin":[2],"mmmax":[2],"yyyymin":[2],"yyyymax":[2],"minutemin":[2],"minutemax":[2],"hourmin":[2],"hourmax":[2]}]]],["eco-input-text",[[1,"eco-input-text",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-textarea",[[1,"eco-input-textarea",{"label":[1],"value":[1],"help":[1],"optional":[1],"status":[1],"width":[1],"height":[1],"disabled":[4],"readonly":[4],"required":[4],"resize":[4],"inputId":[1,"input-id"]}]]],["eco-radio-group",[[1,"eco-radio-group",{"label":[1],"help":[1],"radioData":[16]}]]],["eco-select",[[4,"eco-select",{"label":[1],"help":[1],"name":[1],"optional":[1],"status":[1],"width":[1],"selectQaId":[1,"select-qa-id"],"disabled":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-checkbox",[[1,"eco-checkbox",{"label":[1],"name":[1],"checkboxQaId":[1,"checkbox-qa-id"],"checked":[4],"disabled":[4],"inputId":[1,"input-id"]}]]],["eco-radio-button",[[1,"eco-radio-button",{"name":[1],"label":[1],"radioQaId":[1,"radio-qa-id"],"checked":[4],"disabled":[4],"controlValue":[1,"control-value"],"inputId":[1,"input-id"]}]]],["eco-description",[[1,"eco-description",{"term":[1],"description":[1],"descQaId":[1,"desc-qa-id"]}]]],["eco-description-group",[[1,"eco-description-group",{"vertical":[4]}]]],["eco-table",[[1,"eco-table"]]],["eco-input-number",[[1,"eco-input-number",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[2],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"min":[2],"max":[2],"step":[2],"inputId":[1,"input-id"]}]]],["eco-button",[[1,"eco-button",{"label":[1],"size":[1],"type":[1],"disabled":[4],"icon":[1],"icontype":[1],"iconsize":[1]}]]],["eco-card-body_3",[[1,"eco-card-body"],[1,"eco-card-footer"],[1,"eco-card-header"]]],["eco-text-input-help_2",[[1,"eco-text-input-optional"],[1,"eco-text-input-help"]]]], options);
+  return bootstrapLazy([["eco-card",[[1,"eco-card",{"cardQaId":[1,"card-qa-id"],"sticky":[4],"collapsable":[4],"collapsed":[4]}]]],["eco-input-date",[[1,"eco-input-date",{"label":[1],"help":[1],"optional":[1],"readonly":[4],"required":[4],"disabled":[4],"withnow":[4],"withtime":[4],"ddmin":[2],"ddmax":[2],"mmmin":[2],"mmmax":[2],"yyyymin":[2],"yyyymax":[2],"minutemin":[2],"minutemax":[2],"hourmin":[2],"hourmax":[2]}]]],["eco-input-file",[[1,"eco-input-file",{"label":[1],"help":[1],"optional":[1],"text":[1],"accept":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-text",[[1,"eco-input-text",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[1],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-input-textarea",[[1,"eco-input-textarea",{"label":[1],"value":[1],"help":[1],"optional":[1],"status":[1],"width":[1],"height":[1],"disabled":[4],"readonly":[4],"required":[4],"resize":[4],"inputId":[1,"input-id"]}]]],["eco-radio-group",[[1,"eco-radio-group",{"label":[1],"help":[1],"radioData":[16]}]]],["eco-select",[[4,"eco-select",{"label":[1],"help":[1],"name":[1],"optional":[1],"status":[1],"width":[1],"selectQaId":[1,"select-qa-id"],"disabled":[4],"required":[4],"inputId":[1,"input-id"]}]]],["eco-button",[[1,"eco-button",{"label":[1],"size":[1],"type":[1],"disabled":[4],"icon":[1],"icontype":[1],"iconsize":[1]}]]],["eco-checkbox",[[1,"eco-checkbox",{"label":[1],"name":[1],"checkboxQaId":[1,"checkbox-qa-id"],"checked":[4],"disabled":[4],"inputId":[1,"input-id"]}]]],["eco-messagebox",[[1,"eco-messagebox",{"type":[1],"icon":[1],"icontype":[1]}]]],["eco-radio-button",[[1,"eco-radio-button",{"name":[1],"label":[1],"radioQaId":[1,"radio-qa-id"],"checked":[4],"disabled":[4],"controlValue":[1,"control-value"],"inputId":[1,"input-id"]}]]],["eco-description",[[1,"eco-description",{"term":[1],"description":[1],"descQaId":[1,"desc-qa-id"]}]]],["eco-description-group",[[1,"eco-description-group",{"vertical":[4]}]]],["eco-table",[[1,"eco-table",{"responsive":[4],"equalcolumns":[4],"sticky":[4],"tableQaId":[1,"table-qa-id"]}]]],["eco-text-label",[[1,"eco-text-label",{"for":[1],"labelQaId":[1,"label-qa-id"],"wrap":[4]}]]],["eco-input-number",[[1,"eco-input-number",{"type":[1],"label":[1],"help":[1],"optional":[1],"value":[2],"status":[1],"width":[1],"disabled":[4],"readonly":[4],"required":[4],"min":[2],"max":[2],"step":[2],"inputId":[1,"input-id"]}]]],["eco-card-body_3",[[1,"eco-card-body"],[1,"eco-card-footer"],[1,"eco-card-header"]]],["eco-icon",[[1,"eco-icon",{"icon":[1],"icontype":[1],"iconsize":[1],"url":[1]}]]],["eco-text-input-help_2",[[1,"eco-text-input-optional"],[1,"eco-text-input-help"]]]], options);
   });
@@ -16,0 +16,0 @@ };

dist/types/components.d.ts

@@ -76,2 +76,3 @@ /* eslint-disable */
     interface EcoInputFile {
+        "accept": string;
         "disabled": boolean;
@@ -85,3 +86,3 @@ "help": string;
         "status": EcoInputStatusList;
-        "value": string;
+        "text": string;
         "width": EcoInputWidthList;
@@ -164,2 +165,6 @@ }
     interface EcoTable {
+        "equalcolumns": boolean;
+        "responsive": boolean;
+        "sticky": boolean;
+        "tableQaId": string;
     }
@@ -399,2 +404,3 @@ interface EcoTextInputHelp {
     interface EcoInputFile {
+        "accept"?: string;
         "disabled"?: boolean;
@@ -408,3 +414,3 @@ "help"?: string;
         "status"?: EcoInputStatusList;
-        "value"?: string;
+        "text"?: string;
         "width"?: EcoInputWidthList;
@@ -488,2 +494,6 @@ }
     interface EcoTable {
+        "equalcolumns"?: boolean;
+        "responsive"?: boolean;
+        "sticky"?: boolean;
+        "tableQaId"?: string;
     }
@@ -490,0 +500,0 @@ interface EcoTextInputHelp {

dist/types/components/eco-input-file/eco-input-file.d.ts

 import { EcoInputStatusList, EcoInputWidthList } from "../../utils/utils";
 export declare class EcoInputFile {
+  el: {
+    shadowRoot: {
+      querySelector: (arg0: string) => any;
+    };
+  };
   label: string;
   help: string;
   optional: string;
-  value: string;
+  text: string;
+  accept: string;
   status: EcoInputStatusList;
@@ -13,3 +19,5 @@ width: EcoInputWidthList;
   inputId: string;
+  componentDidRender(): void;
   render(): any;
+  private getCssClassMap;
 }

dist/types/components/eco-table/eco-table.d.ts

 export declare class EcoTable {
+  responsive: boolean;
+  equalcolumns: boolean;
+  sticky: boolean;
+  tableQaId: string;
   render(): any;
 }

package.json

 {
   "name": "@intelligentgrowthsolutions/eco",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Eco Design System for Intelligent Growth Solutions",
@@ -18,3 +18,3 @@ "main": "dist/index.cjs.js",
     "build": "stencil build --docs --prod",
-    "start": "stencil build --dev --watch --serve",
+    "start": "stencil build --prod --watch --serve",
     "test": "stencil test --spec --e2e",
@@ -42,9 +42,9 @@ "test.watch": "stencil test --spec --e2e --watchAll",
     "@babel/core": "^7.12.3",
-    "@storybook/addon-a11y": "^6.1.10",
-    "@storybook/addon-actions": "^6.1.10",
-    "@storybook/addon-docs": "^6.1.10",
-    "@storybook/addon-essentials": "^6.1.10",
-    "@storybook/addon-links": "^6.1.10",
-    "@storybook/addon-storysource": "^6.1.10",
-    "@storybook/web-components": "^6.1.10",
+    "@storybook/addon-a11y": "^6.1.11",
+    "@storybook/addon-actions": "^6.1.11",
+    "@storybook/addon-docs": "^6.1.11",
+    "@storybook/addon-essentials": "^6.1.11",
+    "@storybook/addon-links": "^6.1.11",
+    "@storybook/addon-storysource": "^6.1.11",
+    "@storybook/web-components": "^6.1.11",
     "@types/jest": "^26.0.15",
@@ -51,0 +51,0 @@ "@types/puppeteer": "^5.4.0",

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

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

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

Improved metrics

Total package byte prevSize

684016

increased by2.81%

Number of package files

248

increased by1.22%

Lines of code

12912

increased by3.28%

Worsened metrics

Number of low supply chain risk alerts

25

increased by19.05%

No dependency changes