igniteui-webcomponents-inputs 4.2.5 → 4.3.0-beta.0

package/esm5/lib/igc-x-icon-component.js

@@ -1,6 +1,6 @@
-import * as tslib_1 from "tslib";
+import { __extends, __values } from "tslib";
 import { XIcon } from "./XIcon";
-import { ensureEnum, brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, NamePatcher, toSpinal, enumToString, getAllPropertyNames, fromSpinal } from "igniteui-webcomponents-core";
+import { ensureEnum, brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, NamePatcher, toSpinal, fromBrushCollection, toBrushCollection, brushCollectionToString, enumToString, getAllPropertyNames, fromSpinal } from "igniteui-webcomponents-core";
 import { FontInfo } from "igniteui-webcomponents-core";
 import { WebComponentRenderer, PortalManager } from "igniteui-webcomponents-core";
 import { TypeRegistrar } from "igniteui-webcomponents-core";
@@ -8,7 +8,7 @@ import { RegisterElementHelper } from "igniteui-webcomponents-core";
 import { IgcHTMLElement } from "igniteui-webcomponents-core";
 import { BaseControlTheme_$type } from "igniteui-webcomponents-core";
 var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
-    tslib_1.__extends(IgcXIconComponent, _super);
+    __extends(IgcXIconComponent, _super);
     function IgcXIconComponent() {
         var _this = _super.call(this) || this;
         _this._disconnected = false;
@@ -46,7 +46,7 @@ var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         var mut = new MutationObserver(function (list) {
             var e_1, _b;
             try {
-                for (var list_1 = tslib_1.__values(list), list_1_1 = list_1.next(); !list_1_1.done; list_1_1 = list_1.next()) {
+                for (var list_1 = __values(list), list_1_1 = list_1.next(); !list_1_1.done; list_1_1 = list_1.next()) {
                     var mutation = list_1_1.value;
                     if (mutation.type == 'childList') {
                         _this._onChildrenChanged();
@@ -135,7 +135,7 @@ var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         } /**
                                      * @hidden
                                      */,
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     IgcXIconComponent._createFromInternal = function (internal) {
@@ -191,7 +191,7 @@ var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
             }
             return IgcXIconComponent._observedAttributesIgcXIconComponent;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     IgcXIconComponent.prototype.attributeChangedCallback = function (name, oldValue, newValue) {
@@ -214,255 +214,332 @@ var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
      * Gets or sets the base built in theme to use for the button.
     */
         get: function () {
-            return this.i.e;
+            return this.i.i;
         },
         set: function (v) {
-            this.i.e = ensureEnum(BaseControlTheme_$type, v);
-            this._a("baseTheme", enumToString(BaseControlTheme_$type, this.i.e));
+            this.i.i = ensureEnum(BaseControlTheme_$type, v);
+            this._a("baseTheme", enumToString(BaseControlTheme_$type, this.i.i));
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcXIconComponent.prototype, "actualFill", {
         /**
-         * Gets the color to use for the actual background.
+         * Gets the fill color currently used by the icon.
         */
         get: function () {
-            return brushToString(this.i.bx);
+            return brushToString(this.i.cp);
         },
         set: function (v) {
-            this.i.bx = stringToBrush(v);
-            this._a("actualFill", brushToString(this.i.bx));
+            this.i.cp = stringToBrush(v);
+            this._a("actualFill", brushToString(this.i.cp));
         },
-        enumerable: true,
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcXIconComponent.prototype, "actualStroke", {
+        /**
+         * Gets the stroke color currently used by the icon.
+        */
+        get: function () {
+            return brushToString(this.i.cq);
+        },
+        set: function (v) {
+            this.i.cq = stringToBrush(v);
+            this._a("actualStroke", brushToString(this.i.cq));
+        },
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcXIconComponent.prototype, "actualTextColor", {
         /**
-         * Gets the color to use for the actual text color.
+         * Gets the text color currently used by the icon.
         */
         get: function () {
-            return brushToString(this.i.b1);
+            return brushToString(this.i.cr);
         },
         set: function (v) {
-            this.i.b1 = stringToBrush(v);
-            this._a("actualTextColor", brushToString(this.i.b1));
+            this.i.cr = stringToBrush(v);
+            this._a("actualTextColor", brushToString(this.i.cr));
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
-    Object.defineProperty(IgcXIconComponent.prototype, "actualHoverFill", {
+    Object.defineProperty(IgcXIconComponent.prototype, "actualStrokeWidth", {
         /**
-         * Gets the color to use for the actual background.
+         * Gets the stroke width currently used by the icon.
         */
         get: function () {
-            return brushToString(this.i.by);
+            return this.i.ad;
         },
         set: function (v) {
-            this.i.by = stringToBrush(v);
-            this._a("actualHoverFill", brushToString(this.i.by));
+            this.i.ad = +v;
+            this._a("actualStrokeWidth", this.i.ad);
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
-    Object.defineProperty(IgcXIconComponent.prototype, "actualHoverStroke", {
+    Object.defineProperty(IgcXIconComponent.prototype, "fill", {
         /**
-         * Gets the hover stroke to use for the icon.
+         * Gets or sets the fill color to use for the icon.
         */
         get: function () {
-            return brushToString(this.i.bz);
+            return brushToString(this.i.fill);
         },
         set: function (v) {
-            this.i.bz = stringToBrush(v);
-            this._a("actualHoverStroke", brushToString(this.i.bz));
+            this.i.fill = stringToBrush(v);
+            this._a("fill", brushToString(this.i.fill));
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
-    Object.defineProperty(IgcXIconComponent.prototype, "actualStroke", {
+    Object.defineProperty(IgcXIconComponent.prototype, "stroke", {
         /**
-         * Gets the stroke to use for the icon.
+         * Gets or sets the stroke color to use for the icon.
         */
         get: function () {
-            return brushToString(this.i.b0);
+            return brushToString(this.i.c5);
         },
         set: function (v) {
-            this.i.b0 = stringToBrush(v);
-            this._a("actualStroke", brushToString(this.i.b0));
+            this.i.c5 = stringToBrush(v);
+            this._a("stroke", brushToString(this.i.c5));
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
-    Object.defineProperty(IgcXIconComponent.prototype, "actualHoverStrokeThickness", {
+    Object.defineProperty(IgcXIconComponent.prototype, "strokeWidth", {
         /**
-         * Gets the hover stroke to use for the icon.
+         * Gets or sets the stroke thickness to use for the icon.
         */
         get: function () {
-            return this.i.u;
+            return this.i.aj;
         },
         set: function (v) {
-            this.i.u = +v;
-            this._a("actualHoverStrokeThickness", this.i.u);
+            this.i.aj = +v;
+            this._a("strokeWidth", this.i.aj);
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
-    Object.defineProperty(IgcXIconComponent.prototype, "actualStrokeThickness", {
+    Object.defineProperty(IgcXIconComponent.prototype, "textColor", {
         /**
-         * Gets the stroke to use for the icon.
+         * Gets or sets the text color to use for the icon.
         */
         get: function () {
-            return this.i.v;
+            return brushToString(this.i.c6);
         },
         set: function (v) {
-            this.i.v = +v;
-            this._a("actualStrokeThickness", this.i.v);
+            this.i.c6 = stringToBrush(v);
+            this._a("textColor", brushToString(this.i.c6));
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
-    Object.defineProperty(IgcXIconComponent.prototype, "fill", {
+    Object.defineProperty(IgcXIconComponent.prototype, "hoverFill", {
         /**
-         * Gets or sets the color to use for the actual background.
+         * Gets or sets the fill color to use when the icon is hovered.
         */
         get: function () {
-            return brushToString(this.i.fill);
+            return brushToString(this.i.cy);
         },
         set: function (v) {
-            this.i.fill = stringToBrush(v);
-            this._a("fill", brushToString(this.i.fill));
+            this.i.cy = stringToBrush(v);
+            this._a("hoverFill", brushToString(this.i.cy));
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
-    Object.defineProperty(IgcXIconComponent.prototype, "textColor", {
+    Object.defineProperty(IgcXIconComponent.prototype, "hoverStroke", {
         /**
-         * Gets or sets the color to use for the text.
+         * Gets or sets the stroke color to use when the icon is hovered.
         */
         get: function () {
-            return brushToString(this.i.cb);
+            return brushToString(this.i.cz);
         },
         set: function (v) {
-            this.i.cb = stringToBrush(v);
-            this._a("textColor", brushToString(this.i.cb));
+            this.i.cz = stringToBrush(v);
+            this._a("hoverStroke", brushToString(this.i.cz));
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
-    Object.defineProperty(IgcXIconComponent.prototype, "svgPath", {
+    Object.defineProperty(IgcXIconComponent.prototype, "hoverStrokeThickness", {
         /**
-         * Gets or sets the color to use for the text.
+         * Gets or sets the stroke thickness to use when the icon is hovered.
         */
         get: function () {
-            return this.i.svgPath;
+            return this.i.ah;
         },
         set: function (v) {
-            this.i.svgPath = v;
+            this.i.ah = +v;
+            this._a("hoverStrokeThickness", this.i.ah);
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
-    Object.defineProperty(IgcXIconComponent.prototype, "hoverFill", {
+    Object.defineProperty(IgcXIconComponent.prototype, "hoverTextColor", {
         /**
-         * Gets or sets the color to use for the actual background.
+         * Gets or sets the text color to use when the icon is hovered.
         */
         get: function () {
-            return brushToString(this.i.b7);
+            return brushToString(this.i.c0);
         },
         set: function (v) {
-            this.i.b7 = stringToBrush(v);
-            this._a("hoverFill", brushToString(this.i.b7));
+            this.i.c0 = stringToBrush(v);
+            this._a("hoverTextColor", brushToString(this.i.c0));
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
-    Object.defineProperty(IgcXIconComponent.prototype, "hoverStroke", {
+    Object.defineProperty(IgcXIconComponent.prototype, "fillColors", {
         /**
-         * Gets or sets the hover stroke to use for the icon.
+         * Gets or sets a collection of fill colors to use in the icon.
+         * These colors can be used by SVG elements that have been marked with the
+         * ig-icon-fill-#
+         * class where # is a number from 0 to count - 1.
         */
         get: function () {
-            return brushToString(this.i.b8);
+            return fromBrushCollection(this.i.c);
         },
         set: function (v) {
-            this.i.b8 = stringToBrush(v);
-            this._a("hoverStroke", brushToString(this.i.b8));
+            this.i.c = toBrushCollection(v);
+            this._a("fillColors", brushCollectionToString(this.i.c));
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
-    Object.defineProperty(IgcXIconComponent.prototype, "stroke", {
+    Object.defineProperty(IgcXIconComponent.prototype, "strokeColors", {
         /**
-         * Gets or sets the stroke to use for the icon.
+         * Gets or sets a collection of stroke colors to use in the icon.
+         * These colors can be used by SVG elements that have been marked with the
+         * ig-icon-stroke-#
+         * class where # is a number from 0 to count - 1.
         */
         get: function () {
-            return brushToString(this.i.ca);
+            return fromBrushCollection(this.i.d);
         },
         set: function (v) {
-            this.i.ca = stringToBrush(v);
-            this._a("stroke", brushToString(this.i.ca));
+            this.i.d = toBrushCollection(v);
+            this._a("strokeColors", brushCollectionToString(this.i.d));
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
-    Object.defineProperty(IgcXIconComponent.prototype, "hoverStrokeThickness", {
+    Object.defineProperty(IgcXIconComponent.prototype, "primaryFillColor", {
         /**
-         * Gets or sets the hover stroke to use for the icon.
+         * Gets or sets a primary fill color for the icon.
+         * This color is used by SVG elements that have been marked
+         * with the
+         * ig-icon-primary-fill
+         * class.
         */
         get: function () {
-            return this.i.y;
+            return brushToString(this.i.c1);
         },
         set: function (v) {
-            this.i.y = +v;
-            this._a("hoverStrokeThickness", this.i.y);
+            this.i.c1 = stringToBrush(v);
+            this._a("primaryFillColor", brushToString(this.i.c1));
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
-    Object.defineProperty(IgcXIconComponent.prototype, "strokeThickness", {
+    Object.defineProperty(IgcXIconComponent.prototype, "primaryStrokeColor", {
         /**
-         * Gets or sets the stroke to use for the icon.
+         * Gets or sets a primary stroke color for the icon.
+         * This color is used by SVG elements that have been marked
+         * with the
+         * ig-icon-primary-stroke
+         * class.
         */
         get: function () {
-            return this.i.aa;
+            return brushToString(this.i.c2);
         },
         set: function (v) {
-            this.i.aa = +v;
-            this._a("strokeThickness", this.i.aa);
+            this.i.c2 = stringToBrush(v);
+            this._a("primaryStrokeColor", brushToString(this.i.c2));
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
-    Object.defineProperty(IgcXIconComponent.prototype, "textStyle", {
+    Object.defineProperty(IgcXIconComponent.prototype, "secondaryFillColor", {
         /**
-         * Gets or sets the use for the button.
+         * Gets or sets a secondary fill color for the icon.
+         * This color is used by SVG elements that have been marked
+         * with the
+         * ig-icon-secondary-fill
+         * class.
         */
         get: function () {
-            if (this.i.g == null) {
-                return null;
-            }
-            return this.i.g.fontString;
+            return brushToString(this.i.c3);
         },
         set: function (v) {
-            var fi = new FontInfo();
-            fi.fontString = v;
-            this.i.g = fi;
-            this._a("textStyle", this.i.g != null ? this.i.g.fontString : "");
+            this.i.c3 = stringToBrush(v);
+            this._a("secondaryFillColor", brushToString(this.i.c3));
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
-    Object.defineProperty(IgcXIconComponent.prototype, "hoverTextColor", {
+    Object.defineProperty(IgcXIconComponent.prototype, "secondaryStrokeColor", {
+        /**
+         * Gets or sets a secondary stroke color for the icon.
+         * This color is used by SVG elements that have been marked
+         * with the
+         * ig-icon-secondary-stroke
+         * class.
+        */
+        get: function () {
+            return brushToString(this.i.c4);
+        },
+        set: function (v) {
+            this.i.c4 = stringToBrush(v);
+            this._a("secondaryStrokeColor", brushToString(this.i.c4));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcXIconComponent.prototype, "svgPath", {
+        /**
+         * Gets or sets path data for the icon to use.
+        */
+        get: function () {
+            return this.i.svgPath;
+        },
+        set: function (v) {
+            this.i.svgPath = v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcXIconComponent.prototype, "svg", {
+        /**
+         * Gets or sets svg text for the icon to use.
+        */
+        get: function () {
+            return this.i.svg;
+        },
+        set: function (v) {
+            this.i.svg = v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcXIconComponent.prototype, "textStyle", {
         /**
-         * Gets or sets the color to use for the hovered text of the button regardless of type.
+         * Gets or sets the use for the button.
         */
         get: function () {
-            return brushToString(this.i.b9);
+            if (this.i.k == null) {
+                return null;
+            }
+            return this.i.k.fontString;
         },
         set: function (v) {
-            this.i.b9 = stringToBrush(v);
-            this._a("hoverTextColor", brushToString(this.i.b9));
+            var fi = new FontInfo();
+            fi.fontString = v;
+            this.i.k = fi;
+            this._a("textStyle", this.i.k != null ? this.i.k.fontString : "");
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcXIconComponent.prototype, "id", {
@@ -470,12 +547,12 @@ var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the id to use for the checkbox.
         */
         get: function () {
-            return this.i.ay;
+            return this.i.bc;
         },
         set: function (v) {
-            this.i.ay = v;
+            this.i.bc = v;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcXIconComponent.prototype, "tabIndex", {
@@ -483,13 +560,13 @@ var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets TabIndex to use for the checkbox.
         */
         get: function () {
-            return this.i.ac;
+            return this.i.aq;
         },
         set: function (v) {
-            this.i.ac = +v;
-            this._a("tabIndex", this.i.ac);
+            this.i.aq = +v;
+            this._a("tabIndex", this.i.aq);
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcXIconComponent.prototype, "ariaLabel", {
@@ -497,12 +574,12 @@ var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the value of the aria-label attribute.
         */
         get: function () {
-            return this.i.ap;
+            return this.i.a1;
         },
         set: function (v) {
-            this.i.ap = v;
+            this.i.a1 = v;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcXIconComponent.prototype, "isHover", {
@@ -510,13 +587,13 @@ var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets whether the icon is hovered.
         */
         get: function () {
-            return this.i.n;
+            return this.i.r;
         },
         set: function (v) {
-            this.i.n = ensureBool(v);
-            this._a("isHover", this.i.n);
+            this.i.r = ensureBool(v);
+            this._a("isHover", this.i.r);
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcXIconComponent.prototype, "disabled", {
@@ -530,18 +607,102 @@ var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
             this.i.disabled = ensureBool(v);
             this._a("disabled", this.i.disabled);
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcXIconComponent.prototype, "opacity", {
         get: function () {
-            return this.i.z;
+            return this.i.ai;
         },
         set: function (v) {
-            this.i.z = +v;
-            this._a("opacity", this.i.z);
+            this.i.ai = +v;
+            this._a("opacity", this.i.ai);
         },
-        enumerable: true,
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcXIconComponent.prototype, "viewBoxLeft", {
+        /**
+         * Gets or sets the viewbox left for the svg icon.
+        */
+        get: function () {
+            return this.i.al;
+        },
+        set: function (v) {
+            this.i.al = +v;
+            this._a("viewBoxLeft", this.i.al);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcXIconComponent.prototype, "viewBoxTop", {
+        /**
+         * Gets or sets the viewbox top for the svg icon.
+        */
+        get: function () {
+            return this.i.am;
+        },
+        set: function (v) {
+            this.i.am = +v;
+            this._a("viewBoxTop", this.i.am);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcXIconComponent.prototype, "viewBoxWidth", {
+        /**
+         * Gets or sets the viewbox width for the svg icon.
+        */
+        get: function () {
+            return this.i.an;
+        },
+        set: function (v) {
+            this.i.an = +v;
+            this._a("viewBoxWidth", this.i.an);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcXIconComponent.prototype, "viewBoxHeight", {
+        /**
+         * Gets or sets the viewbox height for the svg icon.
+        */
+        get: function () {
+            return this.i.ak;
+        },
+        set: function (v) {
+            this.i.ak = +v;
+            this._a("viewBoxHeight", this.i.ak);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcXIconComponent.prototype, "width", {
+        /**
+         * Gets or sets the width of the icon.
+        */
+        get: function () {
+            return this.i.ao;
+        },
+        set: function (v) {
+            this.i.ao = +v;
+            this._a("width", this.i.ao);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcXIconComponent.prototype, "height", {
+        /**
+         * Gets or sets the height of the icon.
+        */
+        get: function () {
+            return this.i.ag;
+        },
+        set: function (v) {
+            this.i.ag = +v;
+            this._a("height", this.i.ag);
+        },
+        enumerable: false,
         configurable: true
     });
     IgcXIconComponent.prototype.findByName = function (name) {
@@ -556,7 +717,7 @@ var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         get: function () {
             return this._hasUserValues;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     IgcXIconComponent.prototype.__m = function (propertyName) {
@@ -620,7 +781,7 @@ var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     
     */
     IgcXIconComponent.prototype.exportVisualModel = function () {
-        var iv = this.i.ae();
+        var iv = this.i.as();
         return (iv);
     };
     /**
@@ -628,7 +789,7 @@ var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     
     */
     IgcXIconComponent.prototype.exportSerializedVisualModel = function () {
-        var iv = this.i.as();
+        var iv = this.i.a4();
         return (iv);
     };
     IgcXIconComponent._observedAttributesIgcXIconComponent = null;