@sme.up/ketchup 4.0.0 → 4.1.0

package/dist/collection/utils/kup-scroll-on-hover/kup-scroll-on-hover.js

@@ -1,17 +1,15 @@
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, privateMap, value) {
-  if (!privateMap.has(receiver)) {
-    throw new TypeError("attempted to set private field on non-instance");
-  }
-  privateMap.set(receiver, value);
-  return value;
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+  if (kind === "m") throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, privateMap) {
-  if (!privateMap.has(receiver)) {
-    throw new TypeError("attempted to get private field on non-instance");
-  }
-  return privateMap.get(receiver);
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _arrowsContainer, _leftArrows, _rightArrows, _scrollEvent, _mousemoveEvent, _mouseleaveEvent, _rAF, _timeout;
+var _KupScrollOnHover_arrowsContainer, _KupScrollOnHover_leftArrows, _KupScrollOnHover_rightArrows, _KupScrollOnHover_scrollEvent, _KupScrollOnHover_mousemoveEvent, _KupScrollOnHover_mouseleaveEvent, _KupScrollOnHover_rAF, _KupScrollOnHover_timeout;
 import { ScrollOnHoverDirection, } from './kup-scroll-on-hover-declarations';
 const dom = document.documentElement;
 /**
@@ -25,40 +23,40 @@ export class KupScrollOnHover {
    * @param {number} step - The amount in pixels for each scroll recursion.
    */
   constructor(delay, step) {
-    _arrowsContainer.set(this, void 0);
-    _leftArrows.set(this, void 0);
-    _rightArrows.set(this, void 0);
-    _scrollEvent.set(this, void 0);
-    _mousemoveEvent.set(this, void 0);
-    _mouseleaveEvent.set(this, void 0);
-    _rAF.set(this, void 0);
-    _timeout.set(this, void 0);
+    _KupScrollOnHover_arrowsContainer.set(this, void 0);
+    _KupScrollOnHover_leftArrows.set(this, void 0);
+    _KupScrollOnHover_rightArrows.set(this, void 0);
+    _KupScrollOnHover_scrollEvent.set(this, void 0);
+    _KupScrollOnHover_mousemoveEvent.set(this, void 0);
+    _KupScrollOnHover_mouseleaveEvent.set(this, void 0);
+    _KupScrollOnHover_rAF.set(this, void 0);
+    _KupScrollOnHover_timeout.set(this, void 0);
     this.delay = delay ? delay : 500;
     this.managedElements = new Set();
     this.step = step ? step : 50;
-    __classPrivateFieldSet(this, _arrowsContainer, document.createElement('div'));
-    __classPrivateFieldSet(this, _leftArrows, []);
-    __classPrivateFieldSet(this, _mouseleaveEvent, (event) => this.stop(event.target));
-    __classPrivateFieldSet(this, _mousemoveEvent, (event) => this.start(event));
-    __classPrivateFieldSet(this, _rAF, null);
-    __classPrivateFieldSet(this, _rightArrows, []);
-    __classPrivateFieldSet(this, _scrollEvent, (event) => this.updateChildren(event.target));
-    __classPrivateFieldSet(this, _timeout, null);
-    __classPrivateFieldGet(this, _arrowsContainer).id = 'kup-scrolling-arrows';
+    __classPrivateFieldSet(this, _KupScrollOnHover_arrowsContainer, document.createElement('div'), "f");
+    __classPrivateFieldSet(this, _KupScrollOnHover_leftArrows, [], "f");
+    __classPrivateFieldSet(this, _KupScrollOnHover_mouseleaveEvent, (event) => this.stop(event.target), "f");
+    __classPrivateFieldSet(this, _KupScrollOnHover_mousemoveEvent, (event) => this.start(event), "f");
+    __classPrivateFieldSet(this, _KupScrollOnHover_rAF, null, "f");
+    __classPrivateFieldSet(this, _KupScrollOnHover_rightArrows, [], "f");
+    __classPrivateFieldSet(this, _KupScrollOnHover_scrollEvent, (event) => this.updateChildren(event.target), "f");
+    __classPrivateFieldSet(this, _KupScrollOnHover_timeout, null, "f");
+    __classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f").id = 'kup-scrolling-arrows';
     for (let index = 1; index < 4; index++) {
       const arrow = document.createElement('div');
       arrow.setAttribute('class', 'kup-left-scrolling-arrow kup-arrow-' + index);
-      __classPrivateFieldGet(this, _leftArrows).push(arrow);
+      __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f").push(arrow);
     }
     for (let index = 1; index < 4; index++) {
       const arrow = document.createElement('div');
       arrow.setAttribute('class', 'kup-right-scrolling-arrow kup-arrow-' + index);
-      __classPrivateFieldGet(this, _rightArrows).push(arrow);
+      __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f").push(arrow);
     }
-    __classPrivateFieldGet(this, _arrowsContainer).append(__classPrivateFieldGet(this, _leftArrows)[2], __classPrivateFieldGet(this, _leftArrows)[1], __classPrivateFieldGet(this, _leftArrows)[0], __classPrivateFieldGet(this, _rightArrows)[0], __classPrivateFieldGet(this, _rightArrows)[1], __classPrivateFieldGet(this, _rightArrows)[2]);
+    __classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f").append(__classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f")[2], __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f")[1], __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f")[0], __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f")[0], __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f")[1], __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f")[2]);
     this.container = document.createElement('div');
     this.container.setAttribute('kup-scroll-on-hover', '');
-    this.container.appendChild(__classPrivateFieldGet(this, _arrowsContainer));
+    this.container.appendChild(__classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f"));
     document.body.appendChild(this.container);
   }
   /**
@@ -76,10 +74,10 @@ export class KupScrollOnHover {
       y: 0,
     };
     if (el.scrollOnHover.children) {
-      el.addEventListener('scroll', __classPrivateFieldGet(this, _scrollEvent));
+      el.addEventListener('scroll', __classPrivateFieldGet(this, _KupScrollOnHover_scrollEvent, "f"));
     }
-    el.addEventListener('mousemove', __classPrivateFieldGet(this, _mousemoveEvent));
-    el.addEventListener('mouseleave', __classPrivateFieldGet(this, _mouseleaveEvent));
+    el.addEventListener('mousemove', __classPrivateFieldGet(this, _KupScrollOnHover_mousemoveEvent, "f"));
+    el.addEventListener('mouseleave', __classPrivateFieldGet(this, _KupScrollOnHover_mouseleaveEvent, "f"));
     this.managedElements.add(el);
   }
   /**
@@ -87,9 +85,9 @@ export class KupScrollOnHover {
    * @param {KupScrollOnHoverElement} el - Element to unregister.
    */
   unregister(el) {
-    el.removeEventListener('scroll', __classPrivateFieldGet(this, _scrollEvent));
-    el.removeEventListener('mousemove', __classPrivateFieldGet(this, _mousemoveEvent));
-    el.removeEventListener('mouseleave', __classPrivateFieldGet(this, _mouseleaveEvent));
+    el.removeEventListener('scroll', __classPrivateFieldGet(this, _KupScrollOnHover_scrollEvent, "f"));
+    el.removeEventListener('mousemove', __classPrivateFieldGet(this, _KupScrollOnHover_mousemoveEvent, "f"));
+    el.removeEventListener('mouseleave', __classPrivateFieldGet(this, _KupScrollOnHover_mouseleaveEvent, "f"));
     if (this.managedElements) {
       this.managedElements.delete(el);
     }
@@ -111,9 +109,9 @@ export class KupScrollOnHover {
     el.scrollOnHover.rect = el.getBoundingClientRect();
     el.scrollOnHover.x = event.clientX;
     el.scrollOnHover.y = event.clientY;
-    __classPrivateFieldGet(this, _arrowsContainer).style.left = event.clientX + 'px';
-    __classPrivateFieldGet(this, _arrowsContainer).style.top = event.clientY + 'px';
-    if (el.scrollOnHover.active || __classPrivateFieldGet(this, _timeout)) {
+    __classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f").style.left = event.clientX + 'px';
+    __classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f").style.top = event.clientY + 'px';
+    if (el.scrollOnHover.active || __classPrivateFieldGet(this, _KupScrollOnHover_timeout, "f")) {
       return;
     }
     let trueWidth = el.clientWidth;
@@ -135,18 +133,18 @@ export class KupScrollOnHover {
         if (direction) {
           for (let i = 0; i < 3; i++) {
             if (direction === ScrollOnHoverDirection.LEFT) {
-              __classPrivateFieldGet(this, _leftArrows)[i].classList.add('kup-activated');
+              __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f")[i].classList.add('kup-activated');
             }
             else {
-              __classPrivateFieldGet(this, _rightArrows)[i].classList.add('kup-activated');
+              __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f")[i].classList.add('kup-activated');
             }
           }
-          __classPrivateFieldSet(this, _timeout, setTimeout(() => {
+          __classPrivateFieldSet(this, _KupScrollOnHover_timeout, setTimeout(() => {
             el.scrollOnHover.active = true;
-            __classPrivateFieldSet(this, _rAF, requestAnimationFrame(function () {
+            __classPrivateFieldSet(this, _KupScrollOnHover_rAF, requestAnimationFrame(function () {
               dom.ketchup.scrollOnHover.run(el, maxScrollLeft, percRight, percLeft, direction);
-            }));
-          }, this.delay));
+            }), "f");
+          }, this.delay), "f");
         }
       }
     }
@@ -157,16 +155,16 @@ export class KupScrollOnHover {
    */
   async stop(el) {
     el.scrollOnHover.active = false;
-    cancelAnimationFrame(__classPrivateFieldGet(this, _rAF));
-    clearTimeout(__classPrivateFieldGet(this, _timeout));
-    __classPrivateFieldSet(this, _timeout, null);
-    for (let i = 0; i < __classPrivateFieldGet(this, _leftArrows).length; i++) {
-      __classPrivateFieldGet(this, _leftArrows)[i].classList.remove('kup-activated');
-      __classPrivateFieldGet(this, _leftArrows)[i].classList.remove('kup-animated');
+    cancelAnimationFrame(__classPrivateFieldGet(this, _KupScrollOnHover_rAF, "f"));
+    clearTimeout(__classPrivateFieldGet(this, _KupScrollOnHover_timeout, "f"));
+    __classPrivateFieldSet(this, _KupScrollOnHover_timeout, null, "f");
+    for (let i = 0; i < __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f").length; i++) {
+      __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f")[i].classList.remove('kup-activated');
+      __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f")[i].classList.remove('kup-animated');
     }
-    for (let i = 0; i < __classPrivateFieldGet(this, _rightArrows).length; i++) {
-      __classPrivateFieldGet(this, _rightArrows)[i].classList.remove('kup-activated');
-      __classPrivateFieldGet(this, _rightArrows)[i].classList.remove('kup-animated');
+    for (let i = 0; i < __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f").length; i++) {
+      __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f")[i].classList.remove('kup-activated');
+      __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f")[i].classList.remove('kup-animated');
     }
   }
   /**
@@ -200,7 +198,7 @@ export class KupScrollOnHover {
     }
     let arrow;
     if (direction === ScrollOnHoverDirection.LEFT) {
-      arrow = __classPrivateFieldGet(this, _leftArrows);
+      arrow = __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f");
       if (el.scrollLeft === 0) {
         this.stop(el);
         return;
@@ -208,7 +206,7 @@ export class KupScrollOnHover {
       el.scrollLeft -= this.step;
     }
     else {
-      arrow = __classPrivateFieldGet(this, _rightArrows);
+      arrow = __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f");
       if (el.scrollLeft === maxScrollLeft) {
         this.stop(el);
         return;
@@ -218,9 +216,9 @@ export class KupScrollOnHover {
     for (let i = 0; i < arrow.length; i++) {
       arrow[i].classList.add('kup-animated');
     }
-    __classPrivateFieldSet(this, _rAF, requestAnimationFrame(function () {
+    __classPrivateFieldSet(this, _KupScrollOnHover_rAF, requestAnimationFrame(function () {
       dom.ketchup.scrollOnHover.run(el, maxScrollLeft, percRight, percLeft, direction);
-    }));
+    }), "f");
   }
   /**
    * Scrolls children of the element having the "hover-scrolling-child" class
@@ -232,4 +230,4 @@ export class KupScrollOnHover {
     }
   }
 }
-_arrowsContainer = new WeakMap(), _leftArrows = new WeakMap(), _rightArrows = new WeakMap(), _scrollEvent = new WeakMap(), _mousemoveEvent = new WeakMap(), _mouseleaveEvent = new WeakMap(), _rAF = new WeakMap(), _timeout = new WeakMap();
+_KupScrollOnHover_arrowsContainer = new WeakMap(), _KupScrollOnHover_leftArrows = new WeakMap(), _KupScrollOnHover_rightArrows = new WeakMap(), _KupScrollOnHover_scrollEvent = new WeakMap(), _KupScrollOnHover_mousemoveEvent = new WeakMap(), _KupScrollOnHover_mouseleaveEvent = new WeakMap(), _KupScrollOnHover_rAF = new WeakMap(), _KupScrollOnHover_timeout = new WeakMap();

package/dist/collection/utils/kup-toolbar/kup-toolbar.js

@@ -1,17 +1,15 @@
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, privateMap, value) {
-  if (!privateMap.has(receiver)) {
-    throw new TypeError("attempted to set private field on non-instance");
-  }
-  privateMap.set(receiver, value);
-  return value;
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+  if (kind === "m") throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, privateMap) {
-  if (!privateMap.has(receiver)) {
-    throw new TypeError("attempted to get private field on non-instance");
-  }
-  return privateMap.get(receiver);
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _keyEvent;
+var _KupToolbar_keyEvent;
 import { KupToolbarModifierKeys } from './kup-toolbar-declarations';
 const dom = document.documentElement;
 /**
@@ -23,14 +21,14 @@ export class KupToolbar {
    * Initializes KupToolbar.
    */
   constructor() {
-    _keyEvent.set(this, void 0);
+    _KupToolbar_keyEvent.set(this, void 0);
     this.active = false;
     this.managedElements = new Set();
     this.modifiers = [
       KupToolbarModifierKeys.ALT,
       KupToolbarModifierKeys.CTRL,
     ];
-    __classPrivateFieldSet(this, _keyEvent, function (e) {
+    __classPrivateFieldSet(this, _KupToolbar_keyEvent, function (e) {
       const toolbar = dom.ketchup.toolbar;
       if (toolbar.managedElements) {
         for (let index = 0; index < toolbar.modifiers.length; index++) {
@@ -52,9 +50,9 @@ export class KupToolbar {
         }
         toolbar.show();
       }
-    });
-    document.addEventListener('keydown', __classPrivateFieldGet(this, _keyEvent));
-    document.addEventListener('keyup', __classPrivateFieldGet(this, _keyEvent));
+    }, "f");
+    document.addEventListener('keydown', __classPrivateFieldGet(this, _KupToolbar_keyEvent, "f"));
+    document.addEventListener('keyup', __classPrivateFieldGet(this, _KupToolbar_keyEvent, "f"));
   }
   /**
    * Shows components' toolbar.
@@ -105,4 +103,4 @@ export class KupToolbar {
     return !this.managedElements ? false : this.managedElements.has(el);
   }
 }
-_keyEvent = new WeakMap();
+_KupToolbar_keyEvent = new WeakMap();

package/dist/esm/{cell-utils-cb612463.js → cell-utils-de384721.js}

@@ -1,5 +1,5 @@
-import { f as commonjsGlobal, K as KupDates, c as KupObjects, a as KupDatesFormats } from './kup-objects-d38d2fa2.js';
-import { q as unformattedStringToFormattedStringNumber, t as unformattedStringToFormattedStringTime, v as unformattedStringToFormattedStringTimestamp, n as numeral, d as stringToNumber } from './utils-13dd007a.js';
+import { f as commonjsGlobal, K as KupDates, c as KupObjects, a as KupDatesFormats } from './kup-objects-5968aefd.js';
+import { q as unformattedStringToFormattedStringNumber, t as unformattedStringToFormattedStringTime, v as unformattedStringToFormattedStringTimestamp, n as numeral, d as stringToNumber } from './utils-a1dd14c3.js';
 
 /**
  * Checks if `value` is classified as an `Array` object.

package/dist/esm/{f-chip-125d5dd6.js → f-chip-d585b63e.js}

@@ -1,12 +1,12 @@
-import { h } from './index-bf2824a6.js';
+import { h } from './index-51694018.js';
 import { F as FButtonStyling } from './f-button-declarations-fd4965d1.js';
-import { F as FImage } from './f-image-68b34fab.js';
-import { K as KupThemeIconValues, a as KupDebugCategory, c as KupThemeColorValues } from './kup-manager-e7d7b353.js';
+import { F as FImage } from './f-image-23548d00.js';
+import { K as KupThemeIconValues, a as KupDebugCategory, b as KupThemeColorValues } from './kup-manager-583f2815.js';
 
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */
 /*-------------------------------------------------*/
-const FButton = (props) => {
+const FButton = (props, children) => {
   if (!props.styling) {
     props.styling = FButtonStyling.RAISED;
   }
@@ -17,7 +17,9 @@ const FButton = (props) => {
     (props.styling.toLowerCase() === FButtonStyling.RAISED &&
       props.icon &&
       (props.label === null || props.label === undefined)));
-  return (h("div", Object.assign({ class: `f-button--wrapper ${props.danger ? 'kup-danger' : ''} ${props.fullHeight ? 'kup-full-height' : ''} ${props.fullWidth ? 'kup-full-width' : ''} ${props.info ? 'kup-info' : ''} ${props.large ? 'kup-large' : ''} ${props.pulsating ? 'kup-pulsating' : ''}  ${props.shaped ? 'kup-shaped' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.slim ? 'kup-slim' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }), isIconButton ? renderIconButton(props) : renderButton(props)));
+  return (h("div", Object.assign({ class: `f-button--wrapper ${props.danger ? 'kup-danger' : ''} ${props.fullHeight ? 'kup-full-height' : ''} ${props.fullWidth ? 'kup-full-width' : ''} ${props.info ? 'kup-info' : ''} ${props.large ? 'kup-large' : ''} ${props.pulsating ? 'kup-pulsating' : ''}  ${props.shaped ? 'kup-shaped' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.slim ? 'kup-slim' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }),
+    isIconButton ? renderIconButton(props) : renderButton(props),
+    children));
 };
 /*-------------------------------------------------*/
 /*                  M e t h o d s                  */

package/dist/esm/{f-image-68b34fab.js → f-image-23548d00.js}

@@ -1,5 +1,5 @@
-import { h, g as getAssetPath } from './index-bf2824a6.js';
-import { c as KupThemeColorValues } from './kup-manager-e7d7b353.js';
+import { h, g as getAssetPath } from './index-51694018.js';
+import { b as KupThemeColorValues } from './kup-manager-583f2815.js';
 
 /**
  * The type of a CSS step in CSS-drawing mode.
@@ -64,8 +64,7 @@ function createIcon(props) {
       : `var(${KupThemeColorValues.ICON})`,
   };
   if (props.resource.indexOf('--kup') > -1) {
-    let themeIcon = props.resource.replace('--kup-', '');
-    themeIcon = themeIcon.replace('-icon', '');
+    let themeIcon = props.resource.replace('--', '');
     classObj['kup-icon'] = true;
     classObj[themeIcon] = true;
   }

package/dist/esm/{index-bf2824a6.js → index-51694018.js}

@@ -379,7 +379,6 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                         // Workaround for Safari, moving the <input> caret when re-assigning the same valued
                         if (memberName === 'list') {
                             isProp = false;
-                            // tslint:disable-next-line: triple-equals
                         }
                         else if (oldValue == null || elm[memberName] != n) {
                             elm[memberName] = n;
@@ -1032,14 +1031,14 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
             prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
                 plt.jmp(() => {
                     const propName = attrNameToPropName.get(attrName);
-                    //  In a webcomponent lifecyle the attributeChangedCallback runs prior to connectedCallback
+                    //  In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
                     //  in the case where an attribute was set inline.
                     //  ```html
                     //    <my-component some-attribute="some-value"></my-component>
                     //  ```
                     //
-                    //  There is an edge case where a developer sets the attribute inline on a custom element and then programatically
-                    //  changes it before it has been upgraded as shown below:
+                    //  There is an edge case where a developer sets the attribute inline on a custom element and then
+                    //  programmatically changes it before it has been upgraded as shown below:
                     //
                     //  ```html
                     //    <!-- this component has _not_ been upgraded yet -->
@@ -1049,13 +1048,13 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                     //      el = document.querySelector("#test");
                     //      el.someAttribute = "another-value";
                     //      // upgrade component
-                    //      cutsomElements.define('my-component', MyComponent);
+                    //      customElements.define('my-component', MyComponent);
                     //    </script>
                     //  ```
                     //  In this case if we do not unshadow here and use the value of the shadowing property, attributeChangedCallback
                     //  will be called with `newValue = "some-value"` and will set the shadowed property (this.someAttribute = "another-value")
                     //  to the value that was set inline i.e. "some-value" from above example. When
-                    //  the connectedCallback attempts to unshadow it will use "some-value" as the intial value rather than "another-value"
+                    //  the connectedCallback attempts to unshadow it will use "some-value" as the initial value rather than "another-value"
                     //
                     //  The case where the attribute was NOT set inline but was not set programmatically shall be handled/unshadowed
                     //  by connectedCallback as this attributeChangedCallback will not fire.
@@ -1069,6 +1068,14 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                         newValue = this[propName];
                         delete this[propName];
                     }
+                    else if (prototype.hasOwnProperty(propName) &&
+                        typeof this[propName] === 'number' &&
+                        this[propName] == newValue) {
+                        // if the propName exists on the prototype of `Cstr`, this update may be a result of Stencil using native
+                        // APIs to reflect props as attributes. Calls to `setAttribute(someElement, propName)` will result in
+                        // `propName` to be converted to a `DOMString`, which may not be what we want for other primitive props.
+                        return;
+                    }
                     this[propName] = newValue === null && typeof this[propName] === 'boolean' ? false : newValue;
                 });
             };
@@ -1154,7 +1161,7 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
     const ancestorComponent = hostRef.$ancestorComponent$;
     const schedule = () => scheduleUpdate(hostRef, true);
     if (ancestorComponent && ancestorComponent['s-rc']) {
-        // this is the intial load and this component it has an ancestor component
+        // this is the initial load and this component it has an ancestor component
         // but the ancestor component has NOT fired its will update lifecycle yet
         // so let's just cool our jets and wait for the ancestor to continue first
         // this will get fired off when the ancestor component
@@ -1241,71 +1248,73 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     let isBootstrapping = true;
     Object.assign(plt, options);
     plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
-    lazyBundles.map((lazyBundle) => lazyBundle[1].map((compactMeta) => {
-        const cmpMeta = {
-            $flags$: compactMeta[0],
-            $tagName$: compactMeta[1],
-            $members$: compactMeta[2],
-            $listeners$: compactMeta[3],
-        };
-        {
-            cmpMeta.$members$ = compactMeta[2];
-        }
-        {
-            cmpMeta.$listeners$ = compactMeta[3];
-        }
-        {
-            cmpMeta.$attrsToReflect$ = [];
-        }
-        {
-            cmpMeta.$watchers$ = {};
-        }
-        const tagName = cmpMeta.$tagName$;
-        const HostElement = class extends HTMLElement {
-            // StencilLazyHost
-            constructor(self) {
-                // @ts-ignore
-                super(self);
-                self = this;
-                registerHost(self, cmpMeta);
-                if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
-                    // this component is using shadow dom
-                    // and this browser supports shadow dom
-                    // add the read-only property "shadowRoot" to the host element
-                    // adding the shadow root build conditionals to minimize runtime
-                    {
+    lazyBundles.map((lazyBundle) => {
+        lazyBundle[1].map((compactMeta) => {
+            const cmpMeta = {
+                $flags$: compactMeta[0],
+                $tagName$: compactMeta[1],
+                $members$: compactMeta[2],
+                $listeners$: compactMeta[3],
+            };
+            {
+                cmpMeta.$members$ = compactMeta[2];
+            }
+            {
+                cmpMeta.$listeners$ = compactMeta[3];
+            }
+            {
+                cmpMeta.$attrsToReflect$ = [];
+            }
+            {
+                cmpMeta.$watchers$ = {};
+            }
+            const tagName = cmpMeta.$tagName$;
+            const HostElement = class extends HTMLElement {
+                // StencilLazyHost
+                constructor(self) {
+                    // @ts-ignore
+                    super(self);
+                    self = this;
+                    registerHost(self, cmpMeta);
+                    if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+                        // this component is using shadow dom
+                        // and this browser supports shadow dom
+                        // add the read-only property "shadowRoot" to the host element
+                        // adding the shadow root build conditionals to minimize runtime
                         {
-                            self.attachShadow({ mode: 'open' });
+                            {
+                                self.attachShadow({ mode: 'open' });
+                            }
                         }
                     }
                 }
-            }
-            connectedCallback() {
-                if (appLoadFallback) {
-                    clearTimeout(appLoadFallback);
-                    appLoadFallback = null;
+                connectedCallback() {
+                    if (appLoadFallback) {
+                        clearTimeout(appLoadFallback);
+                        appLoadFallback = null;
+                    }
+                    if (isBootstrapping) {
+                        // connectedCallback will be processed once all components have been registered
+                        deferredConnectedCallbacks.push(this);
+                    }
+                    else {
+                        plt.jmp(() => connectedCallback(this));
+                    }
                 }
-                if (isBootstrapping) {
-                    // connectedCallback will be processed once all components have been registered
-                    deferredConnectedCallbacks.push(this);
+                disconnectedCallback() {
+                    plt.jmp(() => disconnectedCallback(this));
                 }
-                else {
-                    plt.jmp(() => connectedCallback(this));
+                componentOnReady() {
+                    return getHostRef(this).$onReadyPromise$;
                 }
+            };
+            cmpMeta.$lazyBundleId$ = lazyBundle[0];
+            if (!exclude.includes(tagName) && !customElements.get(tagName)) {
+                cmpTags.push(tagName);
+                customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1 /* isElementConstructor */));
             }
-            disconnectedCallback() {
-                plt.jmp(() => disconnectedCallback(this));
-            }
-            componentOnReady() {
-                return getHostRef(this).$onReadyPromise$;
-            }
-        };
-        cmpMeta.$lazyBundleId$ = lazyBundle[0];
-        if (!exclude.includes(tagName) && !customElements.get(tagName)) {
-            cmpTags.push(tagName);
-            customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1 /* isElementConstructor */));
-        }
-    }));
+        });
+    });
     {
         visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
         visibilityStyle.setAttribute('data-styles', '');