@mgdis/mg-components 6.7.0 → 6.8.0

package/dist/components/mg-icon2.js

@@ -49,30 +49,45 @@ const MgIcon = /*@__PURE__*/ proxyCustomElement(class MgIcon extends HTMLElement
          * @param icon - icon to render
          */
         this.renderIcon = (icon) => {
-            this.element.shadowRoot.innerHTML = icons[icon];
-            this.svg = this.element.shadowRoot.querySelector('svg');
+            var _a;
+            // Remove existing SVG from ShadowRoot
+            (_a = this.element.shadowRoot.querySelector('svg')) === null || _a === void 0 ? void 0 : _a.remove();
+            // Append new SVG to ShadowRoot
+            const svgContainer = document.createElement('div');
+            svgContainer.innerHTML = icons[icon];
+            this.element.shadowRoot.append(svgContainer.firstChild);
+            svgContainer.remove();
             // update svg attributes
+            this.svg = this.element.shadowRoot.querySelector('svg');
             this.svg.setAttribute('aria-hidden', 'true');
             this.svg.setAttribute('focusable', 'false');
             this.svg.setAttribute('class', this.classCollection.join());
         };
     }
     validateIcon(newValue, oldValue) {
-        if (!Object.keys(icons).includes(newValue))
+        if (!Object.keys(icons).includes(newValue)) {
             throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}. Passed value: ${Ve(newValue)}.`);
+        }
         else {
-            if (oldValue !== undefined)
+            if (oldValue !== undefined) {
                 this.classCollection.delete(`mg-c-icon--${oldValue}`);
+            }
             this.classCollection.add(`mg-c-icon--${newValue}`);
             this.renderIcon(newValue);
         }
     }
     validateSize(newValue, oldValue) {
-        if (!sizes.includes(newValue))
+        // When removing size attribute, it is set to null
+        if (newValue === null) {
+            newValue = 'medium';
+        }
+        if (!sizes.includes(newValue)) {
             throw new Error(`<mg-icon> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${Ve(newValue)}.`);
+        }
         else {
-            if (oldValue !== undefined)
+            if (oldValue !== undefined) {
                 this.classCollection.delete(`mg-c-icon--size-${oldValue}`);
+            }
             this.classCollection.add(`mg-c-icon--size-${newValue}`);
         }
     }