skateui - npm Package Compare versions

Comparing version 0.1.95 to 0.1.96

dist/cjs/loader.cjs.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-077882ad.js');
+const index = require('./index-26ebdd1c.js');
 
@@ -18,3 +18,3 @@ /*
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["sui-button_6.cjs",[[1,"sui-button",null,[[0,"click","clickEventHandler"],[0,"keyup","keyEventHandler"]]],[1,"sui-flextext",{"minSize":[1026,"min-size"],"maxSize":[1026,"max-size"]}],[1,"sui-input",{"value":[520]}],[1,"sui-nav",{"autoHide":[2,"auto-hide"]}],[1,"sui-overlay",{"position":[1],"transitionTime":[1,"transition-time"],"close":[64],"open":[64]}],[1,"sui-select",{"leftPadding":[32],"rightPadding":[32],"topPadding":[32],"value":[32]}]]]], options);
+  return index.bootstrapLazy([["sui-button_6.cjs",[[1,"sui-button",null,[[0,"click","clickEventHandler"],[0,"keyup","keyEventHandler"]]],[1,"sui-flextext",{"minSize":[1026,"min-size"],"maxSize":[1026,"max-size"]}],[1,"sui-input",{"value":[8],"el":[16]}],[1,"sui-nav",{"autoHide":[2,"auto-hide"]}],[1,"sui-overlay",{"position":[1],"transitionTime":[1,"transition-time"],"close":[64],"open":[64]}],[1,"sui-select",{"leftPadding":[32],"rightPadding":[32],"topPadding":[32],"value":[32]}]]]], options);
   });
@@ -21,0 +21,0 @@ };

dist/cjs/skateui.cjs.js

 'use strict';
 
-const index = require('./index-077882ad.js');
+const index = require('./index-26ebdd1c.js');
 
@@ -18,3 +18,3 @@ /*
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["sui-button_6.cjs",[[1,"sui-button",null,[[0,"click","clickEventHandler"],[0,"keyup","keyEventHandler"]]],[1,"sui-flextext",{"minSize":[1026,"min-size"],"maxSize":[1026,"max-size"]}],[1,"sui-input",{"value":[520]}],[1,"sui-nav",{"autoHide":[2,"auto-hide"]}],[1,"sui-overlay",{"position":[1],"transitionTime":[1,"transition-time"],"close":[64],"open":[64]}],[1,"sui-select",{"leftPadding":[32],"rightPadding":[32],"topPadding":[32],"value":[32]}]]]], options);
+  return index.bootstrapLazy([["sui-button_6.cjs",[[1,"sui-button",null,[[0,"click","clickEventHandler"],[0,"keyup","keyEventHandler"]]],[1,"sui-flextext",{"minSize":[1026,"min-size"],"maxSize":[1026,"max-size"]}],[1,"sui-input",{"value":[8],"el":[16]}],[1,"sui-nav",{"autoHide":[2,"auto-hide"]}],[1,"sui-overlay",{"position":[1],"transitionTime":[1,"transition-time"],"close":[64],"open":[64]}],[1,"sui-select",{"leftPadding":[32],"rightPadding":[32],"topPadding":[32],"value":[32]}]]]], options);
 });

dist/cjs/sui-button_6.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-077882ad.js');
+const index = require('./index-26ebdd1c.js');
 
@@ -177,3 +177,3 @@ function cloneEvents(el) {
         })() && CSS.supports(keyVal[0], val[0])) {
-          this.dummyElement.style.setProperty(keyVal[0], val[0], val[1] || null);
+          this.el.style.setProperty(keyVal[0], val[0], val[1] || null);
           if (Array.isArray(copyStyle) && copyStyle.includes(keyVal[0])) {
@@ -188,3 +188,3 @@ // add to style copy bypass list
       // skip 'hidden' | 'class' | 'id' | excluded list
-      this.dummyElement.setAttribute(attName, val);
+      this.el.setAttribute(attName, val);
       // attribute update callback
@@ -212,3 +212,3 @@ if (typeof options.attCallback === 'function') {
             })() && CSS.supports(s, hostStyle[s])) {
-              this.dummyElement.style.setProperty(s, hostStyle[s]);
+              this.el.style.setProperty(s, hostStyle[s]);
             }
@@ -226,3 +226,3 @@ }
     if (attName === 'id' && appendIdToSlotElement) {
-      this.dummyElement.setAttribute(attName, hostAttributes[attName]);
+      this.el.setAttribute(attName, hostAttributes[attName]);
       this.host.removeAttribute(attName);
@@ -266,3 +266,3 @@ }
         // attribute is removed
-        this.dummyElement.removeAttribute(attributeName);
+        this.el.removeAttribute(attributeName);
         continue;
@@ -289,3 +289,3 @@ }
     })();
-    this.dummyElement = (() => {
+    this.el = (() => {
       // element only needs to be created once, hence creating on class init
@@ -308,5 +308,5 @@ if (!this.host.hasAttribute('disabled')) {
     if (this.isFormButton) {
-      this.host.parentElement.insertBefore(this.dummyElement, this.host);
-      this.dummyElement.click();
-      this.dummyElement.remove();
+      this.host.parentElement.insertBefore(this.el, this.host);
+      this.el.click();
+      this.el.remove();
     }
@@ -438,6 +438,8 @@ }
     this.isButton = false;
-    this.dummyElement = (() => {
+    this.el = (() => {
       var _a, _b;
       // add input element manually because shadow dom input is not recognized by forms
       let inputType = this.host.getAttribute('type'); // always use getAttribute() for proper casing
+      // let value = this.host.getAttribute('value');
+      let value = this.value;
       if (!inputType || !this.availableTypes.includes(inputType)) {
@@ -459,3 +461,3 @@ this.host.setAttribute('type', 'text');
           if (previousSpan && previousSpan.hasAttribute('slot') && previousSpan.getAttribute('slot') === 'value' && this.isButton) {
-            previousSpan.innerHTML = this.host.getAttribute('value') || (inputType === 'submit' ? 'Submit' : 'Reset');
+            previousSpan.innerHTML = value || (inputType === 'submit' ? 'Submit' : 'Reset');
           }
@@ -470,5 +472,8 @@ else {
       const input = document.createElement('input');
-      if (this.value) {
-        input.setAttribute('value', this.value);
+      if (value) {
+        input.setAttribute('value', value);
       }
+      // if (this.value) {
+      //   input.setAttribute('value', this.value);
+      // }
       // setup new slot name
@@ -488,3 +493,3 @@ // slot name is to prevent users adding custom elements
         }
-        this.dummyElement.click();
+        this.el.click();
       };
@@ -507,3 +512,4 @@ if (this.isButton) {
         let span = document.createElement('span');
-        span.innerHTML = this.host.getAttribute('value') || (inputType === 'submit' ? 'Submit' : 'Reset');
+        // span.innerHTML = this.value || (inputType === 'submit' ? 'Submit' : 'Reset');
+        span.innerHTML = value || (inputType === 'submit' ? 'Submit' : 'Reset');
         span.setAttribute('slot', 'value');
@@ -525,3 +531,3 @@ this.host.prepend(span);
           }
-          this.dummyElement.click();
+          this.el.click();
         };
@@ -583,2 +589,7 @@ this.host.addEventListener('keyup', (e) => {
   }
+  valueHandler(n, o) {
+    if (n !== o) {
+      this.el.value = n;
+    }
+  }
   componentDidLoad() {
@@ -589,3 +600,3 @@ dummyHandler.bind(this)({
       copyStyle: this.isChecker ? null : !this.isButton ? (hostCss) => {
-        this.dummyElement.style.setProperty('border-radius', hostCss['border-radius'], 'important');
+        this.el.style.setProperty('border-radius', hostCss['border-radius'], 'important');
         // make text input fill the host
@@ -606,18 +617,17 @@ let needAdjustment = false;
         if (!needAdjustment) {
-          this.dummyElement.style.setProperty('margin', '0', 'important');
+          this.el.style.setProperty('margin', '0', 'important');
           return;
         }
         if (padding[1] || padding[3]) {
-          this.dummyElement.style.setProperty('width', `calc(100% + ${padding[1]}px + ${padding[3]}px)`, 'important');
+          this.el.style.setProperty('width', `calc(100% + ${padding[1]}px + ${padding[3]}px)`, 'important');
         }
-        this.dummyElement.style.setProperty('padding', hostCss['padding'], 'important');
-        this.dummyElement.style.setProperty('margin', padding.map(p => {
+        this.el.style.setProperty('padding', hostCss['padding'], 'important');
+        this.el.style.setProperty('margin', padding.map(p => {
           return p ? `-${p}px` : '0px';
         }).join(' '), 'important');
       } : null,
-      attCallback: (attName, val) => {
-        if (attName === 'value' && this.dummyElement.value !== val) {
-          this.dummyElement.value = val;
-        }
-      },
+      // attCallback: (attName, val) => {
+      //   console.log({attName,val})
+      // },
+      excludeAttribute: ['value'],
       appendIdToSlotElement: true
@@ -627,3 +637,3 @@ });
     // emit events from host
-    cloneEvents.bind(this)(this.dummyElement);
+    cloneEvents.bind(this)(this.el);
   }
@@ -634,3 +644,3 @@ disconnectedCallback() {
     // remove dummy element
-    this.dummyElement.remove();
+    this.el.remove();
   }
@@ -641,2 +651,5 @@ render() {
   get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["valueHandler"]
+  }; }
 };
@@ -998,2 +1011,5 @@ SuiInput.style = suiInputCss;
   }
+  disconnectedCallback() {
+    this.close();
+  }
   render() {
@@ -1017,3 +1033,3 @@ return (index.h(index.Host, { hidden: true, style: { display: this.overlayId ? null : 'none' } }, index.h("slot", null)));
     })();
-    this.dummyElement = (() => {
+    this.el = (() => {
       var _a;
@@ -1066,3 +1082,3 @@ const select_pre = this.host.getElementsByTagName('select');
       copyStyle: (hostCss) => {
-        this.dummyElement.style.setProperty('border-radius', hostCss['border-radius'], 'important');
+        this.el.style.setProperty('border-radius', hostCss['border-radius'], 'important');
         // make text input fill the host
@@ -1083,3 +1099,3 @@ let needAdjustment = false;
         if (!needAdjustment) {
-          this.dummyElement.style.setProperty('margin', '0', 'important');
+          this.el.style.setProperty('margin', '0', 'important');
           return;
@@ -1089,6 +1105,6 @@ }
           this.topPadding = `${padding[0]}px`;
-          this.dummyElement.style.setProperty('height', `calc(100% + ${padding[0]}px + ${padding[2]}px)`, 'important');
+          this.el.style.setProperty('height', `calc(100% + ${padding[0]}px + ${padding[2]}px)`, 'important');
         }
         else if (!this.isMultiple) {
-          this.dummyElement.style.setProperty('height', hostCss['height'], 'important');
+          this.el.style.setProperty('height', hostCss['height'], 'important');
         }
@@ -1098,6 +1114,6 @@ if (padding[1] || padding[3]) {
           this.rightPadding = `${padding[1]}px`;
-          this.dummyElement.style.setProperty('width', `calc(100% + ${this.leftPadding} + ${this.rightPadding})`, 'important');
+          this.el.style.setProperty('width', `calc(100% + ${this.leftPadding} + ${this.rightPadding})`, 'important');
         }
-        this.dummyElement.style.setProperty('padding', hostCss['padding'], 'important');
-        this.dummyElement.style.setProperty('margin', padding.map(p => {
+        this.el.style.setProperty('padding', hostCss['padding'], 'important');
+        this.el.style.setProperty('margin', padding.map(p => {
           return p ? `-${p}px` : '0px';
@@ -1104,0 +1120,0 @@ }).join(' '), 'important');

dist/collection/components/sui-button/sui-button.js

@@ -8,3 +8,3 @@ import { Component, h, Element, Listen, Host } from '@stencil/core';
     })();
-    this.dummyElement = (() => {
+    this.el = (() => {
       // element only needs to be created once, hence creating on class init
@@ -27,8 +27,8 @@ if (!this.host.hasAttribute('disabled')) {
     if (this.isFormButton) {
-      this.host.parentElement.insertBefore(this.dummyElement, this.host);
-      this.dummyElement.click();
-      this.dummyElement.remove();
+      this.host.parentElement.insertBefore(this.el, this.host);
+      this.el.click();
+      this.el.remove();
     }
     else {
-      // this.dummyElement.click();
+      // this.el.click();
     }
@@ -35,0 +35,0 @@ }

dist/collection/components/sui-input/sui-input.js

@@ -1,2 +0,2 @@
-import { Component, Host, h, Element, Prop } from '@stencil/core';
+import { Component, Host, h, Element, Prop, Watch } from '@stencil/core'; //Method, 
 import { dummyHandler, randomString, cloneEvents } from '../../utils/utils';
@@ -24,6 +24,8 @@ export class SuiInput {
     this.isButton = false;
-    this.dummyElement = (() => {
+    this.el = (() => {
       var _a, _b;
       // add input element manually because shadow dom input is not recognized by forms
       let inputType = this.host.getAttribute('type'); // always use getAttribute() for proper casing
+      // let value = this.host.getAttribute('value');
+      let value = this.value;
       if (!inputType || !this.availableTypes.includes(inputType)) {
@@ -45,3 +47,3 @@ this.host.setAttribute('type', 'text');
           if (previousSpan && previousSpan.hasAttribute('slot') && previousSpan.getAttribute('slot') === 'value' && this.isButton) {
-            previousSpan.innerHTML = this.host.getAttribute('value') || (inputType === 'submit' ? 'Submit' : 'Reset');
+            previousSpan.innerHTML = value || (inputType === 'submit' ? 'Submit' : 'Reset');
           }
@@ -56,5 +58,8 @@ else {
       const input = document.createElement('input');
-      if (this.value) {
-        input.setAttribute('value', this.value);
+      if (value) {
+        input.setAttribute('value', value);
       }
+      // if (this.value) {
+      //   input.setAttribute('value', this.value);
+      // }
       // setup new slot name
@@ -74,3 +79,3 @@ // slot name is to prevent users adding custom elements
         }
-        this.dummyElement.click();
+        this.el.click();
       };
@@ -93,3 +98,4 @@ if (this.isButton) {
         let span = document.createElement('span');
-        span.innerHTML = this.host.getAttribute('value') || (inputType === 'submit' ? 'Submit' : 'Reset');
+        // span.innerHTML = this.value || (inputType === 'submit' ? 'Submit' : 'Reset');
+        span.innerHTML = value || (inputType === 'submit' ? 'Submit' : 'Reset');
         span.setAttribute('slot', 'value');
@@ -111,3 +117,3 @@ this.host.prepend(span);
           }
-          this.dummyElement.click();
+          this.el.click();
         };
@@ -169,2 +175,7 @@ this.host.addEventListener('keyup', (e) => {
   }
+  valueHandler(n, o) {
+    if (n !== o) {
+      this.el.value = n;
+    }
+  }
   componentDidLoad() {
@@ -175,3 +186,3 @@ dummyHandler.bind(this)({
       copyStyle: this.isChecker ? null : !this.isButton ? (hostCss) => {
-        this.dummyElement.style.setProperty('border-radius', hostCss['border-radius'], 'important');
+        this.el.style.setProperty('border-radius', hostCss['border-radius'], 'important');
         // make text input fill the host
@@ -192,18 +203,17 @@ let needAdjustment = false;
         if (!needAdjustment) {
-          this.dummyElement.style.setProperty('margin', '0', 'important');
+          this.el.style.setProperty('margin', '0', 'important');
           return;
         }
         if (padding[1] || padding[3]) {
-          this.dummyElement.style.setProperty('width', `calc(100% + ${padding[1]}px + ${padding[3]}px)`, 'important');
+          this.el.style.setProperty('width', `calc(100% + ${padding[1]}px + ${padding[3]}px)`, 'important');
         }
-        this.dummyElement.style.setProperty('padding', hostCss['padding'], 'important');
-        this.dummyElement.style.setProperty('margin', padding.map(p => {
+        this.el.style.setProperty('padding', hostCss['padding'], 'important');
+        this.el.style.setProperty('margin', padding.map(p => {
           return p ? `-${p}px` : '0px';
         }).join(' '), 'important');
       } : null,
-      attCallback: (attName, val) => {
-        if (attName === 'value' && this.dummyElement.value !== val) {
-          this.dummyElement.value = val;
-        }
-      },
+      // attCallback: (attName, val) => {
+      //   console.log({attName,val})
+      // },
+      excludeAttribute: ['value'],
       appendIdToSlotElement: true
@@ -213,3 +223,3 @@ });
     // emit events from host
-    cloneEvents.bind(this)(this.dummyElement);
+    cloneEvents.bind(this)(this.el);
   }
@@ -220,3 +230,3 @@ disconnectedCallback() {
     // remove dummy element
-    this.dummyElement.remove();
+    this.el.remove();
   }
@@ -254,6 +264,26 @@ render() {
       "attribute": "value",
-      "reflect": true
+      "reflect": false
+    },
+    "el": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "HTMLInputElement",
+        "resolved": "HTMLInputElement",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "(() => {\n    // add input element manually because shadow dom input is not recognized by forms\n    let inputType = this.host.getAttribute('type'); // always use getAttribute() for proper casing\n    // let value = this.host.getAttribute('value');\n    let value = this.value;\n    if (!inputType || !this.availableTypes.includes(inputType)) {\n      this.host.setAttribute('type', 'text');\n      inputType = 'text';\n    }\n\n    this.isButton = inputType === 'reset' || inputType === 'submit';\n    this.isChecker = inputType === 'checkbox' || inputType === 'radio';\n\n    const previousInput = this.host.getElementsByTagName('input')?.[0];\n    if (previousInput && previousInput.hasAttribute('slot')) {\n      // if element already exists, return\n      // element can already exist when working on hot reloads\n\n      // setup new slot name\n      previousInput.setAttribute('slot', this.slotName);\n\n      // button input use additional span to display text\n      const previousSpan = this.host.getElementsByTagName('span')?.[0];\n      if (previousSpan) {\n        if (previousSpan && previousSpan.hasAttribute('slot') && previousSpan.getAttribute('slot') === 'value' && this.isButton) {\n          previousSpan.innerHTML = value || (inputType === 'submit' ? 'Submit' : 'Reset');\n        }\n        else {\n          previousSpan.remove();\n        }\n      }\n      return previousInput;\n    }\n\n    // create new element\n    const input = document.createElement('input');\n    if (value) {\n      input.setAttribute('value', value);\n    }\n    // if (this.value) {\n    //   input.setAttribute('value', this.value);\n    // }\n\n    // setup new slot name\n    // slot name is to prevent users adding custom elements\n    input.setAttribute('slot', this.slotName);\n\n    if (!this.availableTypes.includes(inputType)) {\n      // type not available (yet)\n      this.host.prepend(input);\n      return input;\n    }\n\n    // add eventlistener manually if type is checkbox | radio | reset | submit\n    const clicker = () => {\n      if (this.host.attributes.getNamedItem('disabled')) {\n        // does not trigger dummy when disabled\n        return;\n      }\n      this.el.click();\n    };\n\n    if (this.isButton) {\n      // hidden\n      input.setAttribute('hidden', '');\n\n      // tab index is on host\n      if (!this.host.hasAttribute('disabled')) {\n        this.host.setAttribute('tabindex', '0');\n      }\n\n      this.host.addEventListener('keyup', (e) => {\n        if (e.key === 'Enter') {\n          // checkbox, radio should be able to trigger click on enter key\n          clicker();\n        }\n      });\n      this.host.addEventListener('click', clicker);\n\n      // add button text\n      let span = document.createElement('span');\n      // span.innerHTML = this.value || (inputType === 'submit' ? 'Submit' : 'Reset');\n      span.innerHTML = value || (inputType === 'submit' ? 'Submit' : 'Reset');\n      span.setAttribute('slot', 'value');\n      this.host.prepend(span);\n    }\n\n    else if (this.isChecker) {\n      // hidden\n      input.setAttribute('hidden', '');\n\n      // tab index is on host\n      if (!this.host.hasAttribute('disabled')) {\n        this.host.setAttribute('tabindex', '0');\n      }\n\n      // add eventlistener manually if type is checkbox | radio\n      const clicker = () => {\n        if (this.host.attributes.getNamedItem('disabled')) {\n          // does not trigger dummy when disabled\n          return;\n        }\n        this.el.click();\n      };\n\n      this.host.addEventListener('keyup', (e) => {\n        if (e.key === 'Enter') {\n          // checkbox, radio should be able to trigger click on enter key\n          clicker();\n        }\n      }, true);\n\n      this.host.addEventListener('click', clicker);\n\n      input.addEventListener('change', () => {\n        // keep track of checked, update dom\n        if (inputType === 'checkbox') {\n          if (input.checked) {\n            this.host.setAttribute('checked', '');\n          }\n          else {\n            this.host.removeAttribute('checked');\n          }\n        }\n\n        if (inputType === 'radio') {\n          // triggers only on checked, since radio button can't uncheck from user input\n          let radios = document.getElementsByName(input.name);\n          for (let i = 0; i < radios.length; i++) {\n            if (\n              (radios[i] instanceof HTMLInputElement) &&\n              radios[i].getAttribute('type') === 'radio' &&\n              radios[i] !== input\n            ) {\n              radios[i].parentElement.removeAttribute('checked'); // remove checked attribute from it's host\n            }\n          }\n          this.host.setAttribute('checked', '');\n        }\n      });\n    }\n\n    else {\n      // tab index is on input element\n\n      for (const [key, value] of Object.entries({\n        // set important styles\n        // these value should not be editable\n        'box-sizing': 'border-box',\n        display: 'block',\n        'font-size': 'inherit',\n        'line-height': '1.2'\n      })) {\n        input.style.setProperty(key, value, 'important');\n      }\n      // for (const [key, value] of Object.entries({\n      //   'background-color': 'transparent',\n      //   color: 'inherit',\n      //   border: 'none',\n      // })) {\n      //   input.style.setProperty(key, value);\n      // }\n    }\n\n    this.host.prepend(input);\n    return input;\n  })()"
     }
   }; }
   static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "value",
+      "methodName": "valueHandler"
+    }]; }
 }

dist/collection/components/sui-overlay/sui-overlay.js

@@ -240,2 +240,5 @@ import { Component, Host, h, Element, Prop, Method } from '@stencil/core';
   }
+  disconnectedCallback() {
+    this.close();
+  }
   render() {
@@ -242,0 +245,0 @@ return (h(Host, { hidden: true, style: { display: this.overlayId ? null : 'none' } },

dist/collection/components/sui-select/sui-select.js

@@ -11,3 +11,3 @@ import { Component, Host, h, Element, State } from '@stencil/core';
     })();
-    this.dummyElement = (() => {
+    this.el = (() => {
       var _a;
@@ -60,3 +60,3 @@ const select_pre = this.host.getElementsByTagName('select');
       copyStyle: (hostCss) => {
-        this.dummyElement.style.setProperty('border-radius', hostCss['border-radius'], 'important');
+        this.el.style.setProperty('border-radius', hostCss['border-radius'], 'important');
         // make text input fill the host
@@ -77,3 +77,3 @@ let needAdjustment = false;
         if (!needAdjustment) {
-          this.dummyElement.style.setProperty('margin', '0', 'important');
+          this.el.style.setProperty('margin', '0', 'important');
           return;
@@ -83,6 +83,6 @@ }
           this.topPadding = `${padding[0]}px`;
-          this.dummyElement.style.setProperty('height', `calc(100% + ${padding[0]}px + ${padding[2]}px)`, 'important');
+          this.el.style.setProperty('height', `calc(100% + ${padding[0]}px + ${padding[2]}px)`, 'important');
         }
         else if (!this.isMultiple) {
-          this.dummyElement.style.setProperty('height', hostCss['height'], 'important');
+          this.el.style.setProperty('height', hostCss['height'], 'important');
         }
@@ -92,6 +92,6 @@ if (padding[1] || padding[3]) {
           this.rightPadding = `${padding[1]}px`;
-          this.dummyElement.style.setProperty('width', `calc(100% + ${this.leftPadding} + ${this.rightPadding})`, 'important');
+          this.el.style.setProperty('width', `calc(100% + ${this.leftPadding} + ${this.rightPadding})`, 'important');
         }
-        this.dummyElement.style.setProperty('padding', hostCss['padding'], 'important');
-        this.dummyElement.style.setProperty('margin', padding.map(p => {
+        this.el.style.setProperty('padding', hostCss['padding'], 'important');
+        this.el.style.setProperty('margin', padding.map(p => {
           return p ? `-${p}px` : '0px';
@@ -98,0 +98,0 @@ }).join(' '), 'important');

dist/collection/utils/utils.js

@@ -173,3 +173,3 @@ export function cloneEvents(el) {
         })() && CSS.supports(keyVal[0], val[0])) {
-          this.dummyElement.style.setProperty(keyVal[0], val[0], val[1] || null);
+          this.el.style.setProperty(keyVal[0], val[0], val[1] || null);
           if (Array.isArray(copyStyle) && copyStyle.includes(keyVal[0])) {
@@ -184,3 +184,3 @@ // add to style copy bypass list
       // skip 'hidden' | 'class' | 'id' | excluded list
-      this.dummyElement.setAttribute(attName, val);
+      this.el.setAttribute(attName, val);
       // attribute update callback
@@ -208,3 +208,3 @@ if (typeof options.attCallback === 'function') {
             })() && CSS.supports(s, hostStyle[s])) {
-              this.dummyElement.style.setProperty(s, hostStyle[s]);
+              this.el.style.setProperty(s, hostStyle[s]);
             }
@@ -222,3 +222,3 @@ }
     if (attName === 'id' && appendIdToSlotElement) {
-      this.dummyElement.setAttribute(attName, hostAttributes[attName]);
+      this.el.setAttribute(attName, hostAttributes[attName]);
       this.host.removeAttribute(attName);
@@ -262,3 +262,3 @@ }
         // attribute is removed
-        this.dummyElement.removeAttribute(attributeName);
+        this.el.removeAttribute(attributeName);
         continue;
@@ -265,0 +265,0 @@ }

dist/esm/loader.js

@@ -1,2 +0,2 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-c1dbdf18.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-169abe3a.js';
 
@@ -13,3 +13,3 @@ /*
   return patchEsm().then(() => {
-  return bootstrapLazy([["sui-button_6",[[1,"sui-button",null,[[0,"click","clickEventHandler"],[0,"keyup","keyEventHandler"]]],[1,"sui-flextext",{"minSize":[1026,"min-size"],"maxSize":[1026,"max-size"]}],[1,"sui-input",{"value":[520]}],[1,"sui-nav",{"autoHide":[2,"auto-hide"]}],[1,"sui-overlay",{"position":[1],"transitionTime":[1,"transition-time"],"close":[64],"open":[64]}],[1,"sui-select",{"leftPadding":[32],"rightPadding":[32],"topPadding":[32],"value":[32]}]]]], options);
+  return bootstrapLazy([["sui-button_6",[[1,"sui-button",null,[[0,"click","clickEventHandler"],[0,"keyup","keyEventHandler"]]],[1,"sui-flextext",{"minSize":[1026,"min-size"],"maxSize":[1026,"max-size"]}],[1,"sui-input",{"value":[8],"el":[16]}],[1,"sui-nav",{"autoHide":[2,"auto-hide"]}],[1,"sui-overlay",{"position":[1],"transitionTime":[1,"transition-time"],"close":[64],"open":[64]}],[1,"sui-select",{"leftPadding":[32],"rightPadding":[32],"topPadding":[32],"value":[32]}]]]], options);
   });
@@ -16,0 +16,0 @@ };

dist/esm/skateui.js

@@ -1,2 +0,2 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-c1dbdf18.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-169abe3a.js';
 
@@ -16,3 +16,3 @@ /*
 patchBrowser().then(options => {
-  return bootstrapLazy([["sui-button_6",[[1,"sui-button",null,[[0,"click","clickEventHandler"],[0,"keyup","keyEventHandler"]]],[1,"sui-flextext",{"minSize":[1026,"min-size"],"maxSize":[1026,"max-size"]}],[1,"sui-input",{"value":[520]}],[1,"sui-nav",{"autoHide":[2,"auto-hide"]}],[1,"sui-overlay",{"position":[1],"transitionTime":[1,"transition-time"],"close":[64],"open":[64]}],[1,"sui-select",{"leftPadding":[32],"rightPadding":[32],"topPadding":[32],"value":[32]}]]]], options);
+  return bootstrapLazy([["sui-button_6",[[1,"sui-button",null,[[0,"click","clickEventHandler"],[0,"keyup","keyEventHandler"]]],[1,"sui-flextext",{"minSize":[1026,"min-size"],"maxSize":[1026,"max-size"]}],[1,"sui-input",{"value":[8],"el":[16]}],[1,"sui-nav",{"autoHide":[2,"auto-hide"]}],[1,"sui-overlay",{"position":[1],"transitionTime":[1,"transition-time"],"close":[64],"open":[64]}],[1,"sui-select",{"leftPadding":[32],"rightPadding":[32],"topPadding":[32],"value":[32]}]]]], options);
 });

dist/esm/sui-button_6.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-c1dbdf18.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-169abe3a.js';
 
@@ -172,3 +172,3 @@ function cloneEvents(el) {
         })() && CSS.supports(keyVal[0], val[0])) {
-          this.dummyElement.style.setProperty(keyVal[0], val[0], val[1] || null);
+          this.el.style.setProperty(keyVal[0], val[0], val[1] || null);
           if (Array.isArray(copyStyle) && copyStyle.includes(keyVal[0])) {
@@ -183,3 +183,3 @@ // add to style copy bypass list
       // skip 'hidden' | 'class' | 'id' | excluded list
-      this.dummyElement.setAttribute(attName, val);
+      this.el.setAttribute(attName, val);
       // attribute update callback
@@ -207,3 +207,3 @@ if (typeof options.attCallback === 'function') {
             })() && CSS.supports(s, hostStyle[s])) {
-              this.dummyElement.style.setProperty(s, hostStyle[s]);
+              this.el.style.setProperty(s, hostStyle[s]);
             }
@@ -221,3 +221,3 @@ }
     if (attName === 'id' && appendIdToSlotElement) {
-      this.dummyElement.setAttribute(attName, hostAttributes[attName]);
+      this.el.setAttribute(attName, hostAttributes[attName]);
       this.host.removeAttribute(attName);
@@ -261,3 +261,3 @@ }
         // attribute is removed
-        this.dummyElement.removeAttribute(attributeName);
+        this.el.removeAttribute(attributeName);
         continue;
@@ -284,3 +284,3 @@ }
     })();
-    this.dummyElement = (() => {
+    this.el = (() => {
       // element only needs to be created once, hence creating on class init
@@ -303,5 +303,5 @@ if (!this.host.hasAttribute('disabled')) {
     if (this.isFormButton) {
-      this.host.parentElement.insertBefore(this.dummyElement, this.host);
-      this.dummyElement.click();
-      this.dummyElement.remove();
+      this.host.parentElement.insertBefore(this.el, this.host);
+      this.el.click();
+      this.el.remove();
     }
@@ -433,6 +433,8 @@ }
     this.isButton = false;
-    this.dummyElement = (() => {
+    this.el = (() => {
       var _a, _b;
       // add input element manually because shadow dom input is not recognized by forms
       let inputType = this.host.getAttribute('type'); // always use getAttribute() for proper casing
+      // let value = this.host.getAttribute('value');
+      let value = this.value;
       if (!inputType || !this.availableTypes.includes(inputType)) {
@@ -454,3 +456,3 @@ this.host.setAttribute('type', 'text');
           if (previousSpan && previousSpan.hasAttribute('slot') && previousSpan.getAttribute('slot') === 'value' && this.isButton) {
-            previousSpan.innerHTML = this.host.getAttribute('value') || (inputType === 'submit' ? 'Submit' : 'Reset');
+            previousSpan.innerHTML = value || (inputType === 'submit' ? 'Submit' : 'Reset');
           }
@@ -465,5 +467,8 @@ else {
       const input = document.createElement('input');
-      if (this.value) {
-        input.setAttribute('value', this.value);
+      if (value) {
+        input.setAttribute('value', value);
       }
+      // if (this.value) {
+      //   input.setAttribute('value', this.value);
+      // }
       // setup new slot name
@@ -483,3 +488,3 @@ // slot name is to prevent users adding custom elements
         }
-        this.dummyElement.click();
+        this.el.click();
       };
@@ -502,3 +507,4 @@ if (this.isButton) {
         let span = document.createElement('span');
-        span.innerHTML = this.host.getAttribute('value') || (inputType === 'submit' ? 'Submit' : 'Reset');
+        // span.innerHTML = this.value || (inputType === 'submit' ? 'Submit' : 'Reset');
+        span.innerHTML = value || (inputType === 'submit' ? 'Submit' : 'Reset');
         span.setAttribute('slot', 'value');
@@ -520,3 +526,3 @@ this.host.prepend(span);
           }
-          this.dummyElement.click();
+          this.el.click();
         };
@@ -578,2 +584,7 @@ this.host.addEventListener('keyup', (e) => {
   }
+  valueHandler(n, o) {
+    if (n !== o) {
+      this.el.value = n;
+    }
+  }
   componentDidLoad() {
@@ -584,3 +595,3 @@ dummyHandler.bind(this)({
       copyStyle: this.isChecker ? null : !this.isButton ? (hostCss) => {
-        this.dummyElement.style.setProperty('border-radius', hostCss['border-radius'], 'important');
+        this.el.style.setProperty('border-radius', hostCss['border-radius'], 'important');
         // make text input fill the host
@@ -601,18 +612,17 @@ let needAdjustment = false;
         if (!needAdjustment) {
-          this.dummyElement.style.setProperty('margin', '0', 'important');
+          this.el.style.setProperty('margin', '0', 'important');
           return;
         }
         if (padding[1] || padding[3]) {
-          this.dummyElement.style.setProperty('width', `calc(100% + ${padding[1]}px + ${padding[3]}px)`, 'important');
+          this.el.style.setProperty('width', `calc(100% + ${padding[1]}px + ${padding[3]}px)`, 'important');
         }
-        this.dummyElement.style.setProperty('padding', hostCss['padding'], 'important');
-        this.dummyElement.style.setProperty('margin', padding.map(p => {
+        this.el.style.setProperty('padding', hostCss['padding'], 'important');
+        this.el.style.setProperty('margin', padding.map(p => {
           return p ? `-${p}px` : '0px';
         }).join(' '), 'important');
       } : null,
-      attCallback: (attName, val) => {
-        if (attName === 'value' && this.dummyElement.value !== val) {
-          this.dummyElement.value = val;
-        }
-      },
+      // attCallback: (attName, val) => {
+      //   console.log({attName,val})
+      // },
+      excludeAttribute: ['value'],
       appendIdToSlotElement: true
@@ -622,3 +632,3 @@ });
     // emit events from host
-    cloneEvents.bind(this)(this.dummyElement);
+    cloneEvents.bind(this)(this.el);
   }
@@ -629,3 +639,3 @@ disconnectedCallback() {
     // remove dummy element
-    this.dummyElement.remove();
+    this.el.remove();
   }
@@ -636,2 +646,5 @@ render() {
   get host() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["valueHandler"]
+  }; }
 };
@@ -993,2 +1006,5 @@ SuiInput.style = suiInputCss;
   }
+  disconnectedCallback() {
+    this.close();
+  }
   render() {
@@ -1012,3 +1028,3 @@ return (h(Host, { hidden: true, style: { display: this.overlayId ? null : 'none' } }, h("slot", null)));
     })();
-    this.dummyElement = (() => {
+    this.el = (() => {
       var _a;
@@ -1061,3 +1077,3 @@ const select_pre = this.host.getElementsByTagName('select');
       copyStyle: (hostCss) => {
-        this.dummyElement.style.setProperty('border-radius', hostCss['border-radius'], 'important');
+        this.el.style.setProperty('border-radius', hostCss['border-radius'], 'important');
         // make text input fill the host
@@ -1078,3 +1094,3 @@ let needAdjustment = false;
         if (!needAdjustment) {
-          this.dummyElement.style.setProperty('margin', '0', 'important');
+          this.el.style.setProperty('margin', '0', 'important');
           return;
@@ -1084,6 +1100,6 @@ }
           this.topPadding = `${padding[0]}px`;
-          this.dummyElement.style.setProperty('height', `calc(100% + ${padding[0]}px + ${padding[2]}px)`, 'important');
+          this.el.style.setProperty('height', `calc(100% + ${padding[0]}px + ${padding[2]}px)`, 'important');
         }
         else if (!this.isMultiple) {
-          this.dummyElement.style.setProperty('height', hostCss['height'], 'important');
+          this.el.style.setProperty('height', hostCss['height'], 'important');
         }
@@ -1093,6 +1109,6 @@ if (padding[1] || padding[3]) {
           this.rightPadding = `${padding[1]}px`;
-          this.dummyElement.style.setProperty('width', `calc(100% + ${this.leftPadding} + ${this.rightPadding})`, 'important');
+          this.el.style.setProperty('width', `calc(100% + ${this.leftPadding} + ${this.rightPadding})`, 'important');
         }
-        this.dummyElement.style.setProperty('padding', hostCss['padding'], 'important');
-        this.dummyElement.style.setProperty('margin', padding.map(p => {
+        this.el.style.setProperty('padding', hostCss['padding'], 'important');
+        this.el.style.setProperty('margin', padding.map(p => {
           return p ? `-${p}px` : '0px';
@@ -1099,0 +1115,0 @@ }).join(' '), 'important');

dist/skateui/skateui.esm.js

@@ -1,1 +0,1 @@
-import{p as i,b as e}from"./p-b89c24c2.js";(()=>{const e=import.meta.url,t={};return""!==e&&(t.resourcesUrl=new URL(".",e).href),i(t)})().then((i=>e([["p-ac65682d",[[1,"sui-button",null,[[0,"click","clickEventHandler"],[0,"keyup","keyEventHandler"]]],[1,"sui-flextext",{minSize:[1026,"min-size"],maxSize:[1026,"max-size"]}],[1,"sui-input",{value:[520]}],[1,"sui-nav",{autoHide:[2,"auto-hide"]}],[1,"sui-overlay",{position:[1],transitionTime:[1,"transition-time"],close:[64],open:[64]}],[1,"sui-select",{leftPadding:[32],rightPadding:[32],topPadding:[32],value:[32]}]]]],i)));
+import{p as i,b as e}from"./p-4a37566f.js";(()=>{const e=import.meta.url,t={};return""!==e&&(t.resourcesUrl=new URL(".",e).href),i(t)})().then((i=>e([["p-acc94171",[[1,"sui-button",null,[[0,"click","clickEventHandler"],[0,"keyup","keyEventHandler"]]],[1,"sui-flextext",{minSize:[1026,"min-size"],maxSize:[1026,"max-size"]}],[1,"sui-input",{value:[8],el:[16]}],[1,"sui-nav",{autoHide:[2,"auto-hide"]}],[1,"sui-overlay",{position:[1],transitionTime:[1,"transition-time"],close:[64],open:[64]}],[1,"sui-select",{leftPadding:[32],rightPadding:[32],topPadding:[32],value:[32]}]]]],i)));

dist/types/components.d.ts

@@ -16,2 +16,3 @@ /* eslint-disable */
     interface SuiInput {
+        "el": HTMLInputElement;
         "value": any;
@@ -85,2 +86,3 @@ }
     interface SuiInput {
+        "el"?: HTMLInputElement;
         "value"?: any;
@@ -87,0 +89,0 @@ }

dist/types/components/sui-button/sui-button.d.ts

@@ -5,3 +5,3 @@ export declare class SuiButton {
   isFormButton: HTMLFormElement;
-  dummyElement: HTMLButtonElement & {
+  el: HTMLButtonElement & {
     hidden: boolean;
@@ -8,0 +8,0 @@ };

dist/types/components/sui-input/sui-input.d.ts

 export declare class SuiInput {
+  value: any;
   host: HTMLElement;
-  value: any;
+  valueHandler(n: string, o: string): void;
   availableTypes: string[];
@@ -9,3 +10,3 @@ observer: MutationObserver;
   isButton: boolean;
-  dummyElement: HTMLInputElement;
+  el: HTMLInputElement;
   componentDidLoad(): void;
@@ -12,0 +13,0 @@ disconnectedCallback(): void;

dist/types/components/sui-overlay/sui-overlay.d.ts

@@ -10,3 +10,4 @@ export declare class SuiOverlay {
   open(): Promise<unknown>;
+  disconnectedCallback(): void;
   render(): any;
 }

dist/types/components/sui-select/sui-select.d.ts

@@ -8,5 +8,5 @@ export declare class SuiSelect {
   isMultiple: boolean;
-  dummyElement: HTMLSelectElement;
+  el: HTMLSelectElement;
   componentWillLoad(): void;
   render(): any;
 }

package.json

 {
   "name": "skateui",
-  "version": "0.1.95",
+  "version": "0.1.96",
   "description": "Stencil Component Starter",
@@ -5,0 +5,0 @@ "main": "dist/index.cjs.js",

New alerts

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

Major refactor

Supply chain risk

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

470780

increased by1.71%

Lines of code

8736

increased by1.48%

Number of medium supply chain risk alerts

2

decreased by-33.33%

Worsened metrics

Number of low supply chain risk alerts

11

increased by10%

No dependency changes