igniteui-webcomponents-inputs 1.3.3 → 1.4.2

package/esm5/lib/{igc-input-component.js → igc-x-input-component.js}

@@ -1,15 +1,15 @@
 import * as tslib_1 from "tslib";
-import { Input } from "./Input";
+import { XInput } from "./XInput";
 import { ensureEnum, brushToString, stringToBrush, ensureBool, NamePatcher, toSpinal, enumToString, getAllPropertyNames } from "igniteui-webcomponents-core";
 import { FontInfo } from "igniteui-webcomponents-core";
 import { WebComponentRenderer, PortalManager } from "igniteui-webcomponents-core";
 import { delegateCombine, delegateRemove } from "igniteui-webcomponents-core";
 import { RegisterElementHelper } from "igniteui-webcomponents-core";
-import { IgcInputGroupItemComponent } from './igc-input-group-item-component';
+import { IgcXInputGroupItemComponent } from './igc-x-input-group-item-component';
 import { IgcInputChangeEventArgs } from './igc-input-change-event-args';
 import { ControlDisplayDensity_$type } from "igniteui-webcomponents-core";
 import { IgcKeyEventArgs } from "igniteui-webcomponents-core";
-var requiredStyle = "\n.ig-input input::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n}\n\n";
+var requiredStyle = "\n\n";
 var pending = [];
 var checked = /*@__PURE__*/ new WeakMap(); // TODO why not WeakSet?
 function ensureCss() {
@@ -34,27 +34,26 @@ function injectCss(style, attributeName, onload) {
     }
     for (var i = 0; i < document.head.children.length; i++) {
         var child = document.head.children[i];
-        if (child.tagName == "link" && child.hasAttribute(attributeName)) {
+        if (child.tagName &&
+            child.tagName.toLowerCase() == "style" && child.hasAttribute(attributeName)) {
             return;
         }
     }
-    var link = document.createElement("link");
-    link.setAttribute('href', 'data:text/css;charset=UTF-8,' + encodeURIComponent(style));
-    link.setAttribute('rel', 'stylesheet');
-    link.setAttribute('type', 'text/css');
-    link.setAttribute(attributeName, 'true');
+    var styleEle = document.createElement("style");
+    styleEle.textContent = style;
+    styleEle.setAttribute(attributeName, 'true');
     if (onload) {
         var onloadResolved = function () {
-            link.onload = null;
+            styleEle.onload = null;
             onload();
         };
-        link.onload = onloadResolved;
+        styleEle.onload = onloadResolved;
     }
-    document.head.appendChild(link);
+    document.head.appendChild(styleEle);
 }
-var IgcInputComponent = /** @class */ /*@__PURE__*/ (function (_super) {
-    tslib_1.__extends(IgcInputComponent, _super);
-    function IgcInputComponent() {
+var IgcXInputComponent = /** @class */ /*@__PURE__*/ (function (_super) {
+    tslib_1.__extends(IgcXInputComponent, _super);
+    function IgcXInputComponent() {
         var _this = _super.call(this) || this;
         _this._disconnected = false;
         _this._keyDown = null;
@@ -122,7 +121,7 @@ var IgcInputComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         //    this._checkbox.notifySizeChanged();
         //});
     }
-    IgcInputComponent.prototype._onChildrenChanged = function () {
+    IgcXInputComponent.prototype._onChildrenChanged = function () {
         var children = [];
         for (var i = 0; i < this.childNodes.length; i++) {
             var child = this.childNodes[i];
@@ -133,23 +132,23 @@ var IgcInputComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         this._portalManager.onChildrenChanged(children);
     };
     // supports angular themes or custom properties set in CSS
-    IgcInputComponent.prototype.updateStyle = function () {
+    IgcXInputComponent.prototype.updateStyle = function () {
         this._styling(this, this);
     };
-    IgcInputComponent.prototype.destroy = function () {
+    IgcXInputComponent.prototype.destroy = function () {
         this._input.destroy();
         this._wrapper.destroy();
     };
-    IgcInputComponent.prototype.createImplementation = function () {
-        return new Input();
+    IgcXInputComponent.prototype.createImplementation = function () {
+        return new XInput();
     };
-    IgcInputComponent.prototype.disconnectedCallback = function () {
+    IgcXInputComponent.prototype.disconnectedCallback = function () {
         this._disconnected = true;
         if (this.i) {
             this.i.onDetachedFromUI();
         }
     };
-    IgcInputComponent.prototype.connectedCallback = function () {
+    IgcXInputComponent.prototype.connectedCallback = function () {
         if (this._disconnected) {
             this._disconnected = false;
             if (this.i) {
@@ -157,8 +156,8 @@ var IgcInputComponent = /** @class */ /*@__PURE__*/ (function (_super) {
             }
             return;
         }
-        this.classList.add("ig-input");
-        this.classList.add("igc-input");
+        this.classList.add("ig-x-input");
+        this.classList.add("igc-x-input");
         this.appendChild(this._container.getNativeElement());
         this._attached = true;
         this.style.display = "inline-block";
@@ -170,10 +169,10 @@ var IgcInputComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         this._styling(this, this);
         this.afterContentInit();
     };
-    IgcInputComponent.prototype.afterContentInit = function () {
+    IgcXInputComponent.prototype.afterContentInit = function () {
         //this.i.notifySizeChanged();
     };
-    Object.defineProperty(IgcInputComponent.prototype, "i", {
+    Object.defineProperty(IgcXInputComponent.prototype, "i", {
         /**
                                  * @hidden
                                  */
@@ -183,137 +182,137 @@ var IgcInputComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputComponent, "observedAttributes", {
+    Object.defineProperty(IgcXInputComponent, "observedAttributes", {
         get: function () {
-            if (IgcInputComponent._observedAttributesIgcInputComponent == null) {
-                var names = getAllPropertyNames(IgcInputComponent);
+            if (IgcXInputComponent._observedAttributesIgcXInputComponent == null) {
+                var names = getAllPropertyNames(IgcXInputComponent);
                 for (var i = 0; i < names.length; i++) {
                     names[i] = toSpinal(names[i]);
                 }
-                IgcInputComponent._observedAttributesIgcInputComponent = names;
+                IgcXInputComponent._observedAttributesIgcXInputComponent = names;
             }
-            return IgcInputComponent._observedAttributesIgcInputComponent;
+            return IgcXInputComponent._observedAttributesIgcXInputComponent;
         },
         enumerable: true,
         configurable: true
     });
-    IgcInputComponent.register = function () {
-        if (!IgcInputComponent._isElementRegistered) {
-            IgcInputComponent._isElementRegistered = true;
-            RegisterElementHelper.registerElement(IgcInputComponent.htmlTagName, IgcInputComponent);
+    IgcXInputComponent.register = function () {
+        if (!IgcXInputComponent._isElementRegistered) {
+            IgcXInputComponent._isElementRegistered = true;
+            RegisterElementHelper.registerElement(IgcXInputComponent.htmlTagName, IgcXInputComponent);
         }
     };
-    Object.defineProperty(IgcInputComponent.prototype, "density", {
+    Object.defineProperty(IgcXInputComponent.prototype, "density", {
         /**
      * Gets or sets the display density to use for the input.
     */
         get: function () {
-            return this.i.m;
+            return this.i.x;
         },
         set: function (v) {
-            this.i.m = ensureEnum(ControlDisplayDensity_$type, v);
-            this._a("density", enumToString(ControlDisplayDensity_$type, this.i.m));
+            this.i.x = ensureEnum(ControlDisplayDensity_$type, v);
+            this._a("density", enumToString(ControlDisplayDensity_$type, this.i.x));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputComponent.prototype, "actualDensity", {
+    Object.defineProperty(IgcXInputComponent.prototype, "actualDensity", {
         /**
          * Gets the actual display density to use for the label.
         */
         get: function () {
-            return this.i.l;
+            return this.i.w;
         },
         set: function (v) {
-            this.i.l = ensureEnum(ControlDisplayDensity_$type, v);
-            this._a("actualDensity", enumToString(ControlDisplayDensity_$type, this.i.l));
+            this.i.w = ensureEnum(ControlDisplayDensity_$type, v);
+            this._a("actualDensity", enumToString(ControlDisplayDensity_$type, this.i.w));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputComponent.prototype, "mask", {
+    Object.defineProperty(IgcXInputComponent.prototype, "mask", {
         /**
          * Gets/Sets the input mask for the input.
         */
         get: function () {
-            return this.i.b6;
+            return this.i.b9;
         },
         set: function (v) {
-            this.i.b6 = v;
+            this.i.b9 = v;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputComponent.prototype, "promptChar", {
+    Object.defineProperty(IgcXInputComponent.prototype, "promptChar", {
         /**
          * Gets/Sets the character representing a fillable spot in the input mask
         */
         get: function () {
-            return this.i.ca;
+            return this.i.cd;
         },
         set: function (v) {
-            this.i.ca = v;
+            this.i.cd = v;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputComponent.prototype, "includeLiterals", {
+    Object.defineProperty(IgcXInputComponent.prototype, "includeLiterals", {
         /**
          * Specifies if the bound value includes the formatting symbols.
         */
         get: function () {
-            return this.i.ap;
+            return this.i.aq;
         },
         set: function (v) {
-            this.i.ap = ensureBool(v);
-            this._a("includeLiterals", this.i.ap);
+            this.i.aq = ensureBool(v);
+            this._a("includeLiterals", this.i.aq);
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputComponent.prototype, "actualTextColor", {
+    Object.defineProperty(IgcXInputComponent.prototype, "actualTextColor", {
         /**
          * Gets the actual color to use for the text color.
         */
         get: function () {
-            return brushToString(this.i.dr);
+            return brushToString(this.i.du);
         },
         set: function (v) {
-            this.i.dr = stringToBrush(v);
-            this._a("actualTextColor", brushToString(this.i.dr));
+            this.i.du = stringToBrush(v);
+            this._a("actualTextColor", brushToString(this.i.du));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputComponent.prototype, "actualHoverTextColor", {
+    Object.defineProperty(IgcXInputComponent.prototype, "actualHoverTextColor", {
         /**
          * Gets the actual hover color to use for the text.
         */
         get: function () {
-            return brushToString(this.i.dq);
+            return brushToString(this.i.dt);
         },
         set: function (v) {
-            this.i.dq = stringToBrush(v);
-            this._a("actualHoverTextColor", brushToString(this.i.dq));
+            this.i.dt = stringToBrush(v);
+            this._a("actualHoverTextColor", brushToString(this.i.dt));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputComponent.prototype, "textColor", {
+    Object.defineProperty(IgcXInputComponent.prototype, "textColor", {
         /**
          * Gets or sets the color to use for the text.
         */
         get: function () {
-            return brushToString(this.i.dv);
+            return brushToString(this.i.dy);
         },
         set: function (v) {
-            this.i.dv = stringToBrush(v);
-            this._a("textColor", brushToString(this.i.dv));
+            this.i.dy = stringToBrush(v);
+            this._a("textColor", brushToString(this.i.dy));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputComponent.prototype, "textStyle", {
+    Object.defineProperty(IgcXInputComponent.prototype, "textStyle", {
         /**
          * Gets or sets the use for the button.
         */
@@ -332,134 +331,134 @@ var IgcInputComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputComponent.prototype, "inputType", {
+    Object.defineProperty(IgcXInputComponent.prototype, "inputType", {
         /**
          * Gets or sets the type to use for the input.
         */
         get: function () {
-            return this.i.b1;
+            return this.i.b3;
         },
         set: function (v) {
-            this.i.b1 = v;
+            this.i.b3 = v;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputComponent.prototype, "placeholder", {
+    Object.defineProperty(IgcXInputComponent.prototype, "placeholder", {
         /**
          * Gets or sets the placeholder to use for the input.
         */
         get: function () {
-            return this.i.b8;
+            return this.i.cb;
         },
         set: function (v) {
-            this.i.b8 = v;
+            this.i.cb = v;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputComponent.prototype, "hoverTextColor", {
+    Object.defineProperty(IgcXInputComponent.prototype, "hoverTextColor", {
         /**
          * Gets or sets the color to use for the hovered text of the button regardless of type.
         */
         get: function () {
-            return brushToString(this.i.du);
+            return brushToString(this.i.dx);
         },
         set: function (v) {
-            this.i.du = stringToBrush(v);
-            this._a("hoverTextColor", brushToString(this.i.du));
+            this.i.dx = stringToBrush(v);
+            this._a("hoverTextColor", brushToString(this.i.dx));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputComponent.prototype, "id", {
+    Object.defineProperty(IgcXInputComponent.prototype, "id", {
         /**
          * Gets or sets the id to use for the checkbox.
         */
         get: function () {
-            return this.i.by;
+            return this.i.b0;
         },
         set: function (v) {
-            this.i.by = v;
+            this.i.b0 = v;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputComponent.prototype, "tabIndex", {
+    Object.defineProperty(IgcXInputComponent.prototype, "tabIndex", {
         /**
          * Gets or sets TabIndex to use for the checkbox.
         */
         get: function () {
-            return this.i.a8;
+            return this.i.ba;
         },
         set: function (v) {
-            this.i.a8 = +v;
-            this._a("tabIndex", this.i.a8);
+            this.i.ba = +v;
+            this._a("tabIndex", this.i.ba);
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputComponent.prototype, "for", {
+    Object.defineProperty(IgcXInputComponent.prototype, "for", {
         /**
          * Gets or sets the for attribute to use for the input.
         */
         get: function () {
-            return this.i.bv;
+            return this.i.bx;
         },
         set: function (v) {
-            this.i.bv = v;
+            this.i.bx = v;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputComponent.prototype, "ariaLabel", {
+    Object.defineProperty(IgcXInputComponent.prototype, "ariaLabel", {
         /**
          * Gets or sets the value of the aria-label attribute.
         */
         get: function () {
-            return this.i.br;
+            return this.i.bt;
         },
         set: function (v) {
-            this.i.br = v;
+            this.i.bt = v;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputComponent.prototype, "isHover", {
+    Object.defineProperty(IgcXInputComponent.prototype, "isHover", {
         /**
          * Gets or sets whether the input is hovered.
         */
         get: function () {
-            return this.i.ar;
+            return this.i.as;
         },
         set: function (v) {
-            this.i.ar = ensureBool(v);
-            this._a("isHover", this.i.ar);
+            this.i.as = ensureBool(v);
+            this._a("isHover", this.i.as);
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputComponent.prototype, "value", {
+    Object.defineProperty(IgcXInputComponent.prototype, "value", {
         /**
          * Gets or sets the value for the input.
         */
         get: function () {
-            return this.i.cg;
+            return this.i.cj;
         },
         set: function (v) {
-            this.i.cg = v;
+            this.i.cj = v;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputComponent.prototype, "hasValue", {
+    Object.defineProperty(IgcXInputComponent.prototype, "hasValue", {
         get: function () {
-            return this.i.ao;
+            return this.i.ap;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputComponent.prototype, "disabled", {
+    Object.defineProperty(IgcXInputComponent.prototype, "disabled", {
         /**
          * Gets or sets whether the checkbox is disabled.
         */
@@ -473,7 +472,21 @@ var IgcInputComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputComponent.prototype, "selectionStart", {
+    Object.defineProperty(IgcXInputComponent.prototype, "readonly", {
+        /**
+         * Gets or sets whether the checkbox is readonly.
+        */
+        get: function () {
+            return this.i.readonly;
+        },
+        set: function (v) {
+            this.i.readonly = ensureBool(v);
+            this._a("readonly", this.i.readonly);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcXInputComponent.prototype, "selectionStart", {
         /**
          * Returns / Sets the beginning index of the selected text. When nothing is selected, this returns the position of the text input cursor (caret) inside of the input.
         */
@@ -487,7 +500,7 @@ var IgcInputComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputComponent.prototype, "selectionEnd", {
+    Object.defineProperty(IgcXInputComponent.prototype, "selectionEnd", {
         /**
          * Returns / Sets the end index of the selected text. When nothing is selected, this returns the position of the text input cursor (caret) inside of the input.
         */
@@ -501,38 +514,38 @@ var IgcInputComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    IgcInputComponent.prototype.onDetachedFromUI = function () {
+    IgcXInputComponent.prototype.onDetachedFromUI = function () {
         this.i.onDetachedFromUI();
     };
-    IgcInputComponent.prototype.onAttachedToUI = function () {
+    IgcXInputComponent.prototype.onAttachedToUI = function () {
         this.i.onAttachedToUI();
     };
     /**
      * Exports visual information about the current state of the grid.
     
     */
-    IgcInputComponent.prototype.exportVisualModel = function () {
-        var iv = this.i.ba();
+    IgcXInputComponent.prototype.exportVisualModel = function () {
+        var iv = this.i.bc();
         return (iv);
     };
     /**
      * Returns a serialized copy of the exported visual model
     
     */
-    IgcInputComponent.prototype.exportSerializedVisualModel = function () {
-        var iv = this.i.bu();
+    IgcXInputComponent.prototype.exportSerializedVisualModel = function () {
+        var iv = this.i.bw();
         return (iv);
     };
-    IgcInputComponent.prototype.setSelectionRange = function (selectionStart, selectionEnd) {
-        this.i.df(selectionStart, selectionEnd);
+    IgcXInputComponent.prototype.setSelectionRange = function (selectionStart, selectionEnd) {
+        this.i.di(selectionStart, selectionEnd);
     };
-    IgcInputComponent.prototype.blur = function () {
-        this.i.cj();
+    IgcXInputComponent.prototype.blur = function () {
+        this.i.cm();
     };
-    IgcInputComponent.prototype.select = function () {
-        this.i.dd();
+    IgcXInputComponent.prototype.select = function () {
+        this.i.dg();
     };
-    Object.defineProperty(IgcInputComponent.prototype, "keyDown", {
+    Object.defineProperty(IgcXInputComponent.prototype, "keyDown", {
         get: function () {
             return this._keyDown;
         },
@@ -559,7 +572,7 @@ var IgcInputComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputComponent.prototype, "keyUp", {
+    Object.defineProperty(IgcXInputComponent.prototype, "keyUp", {
         get: function () {
             return this._keyUp;
         },
@@ -586,7 +599,7 @@ var IgcInputComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputComponent.prototype, "keyPress", {
+    Object.defineProperty(IgcXInputComponent.prototype, "keyPress", {
         get: function () {
             return this._keyPress;
         },
@@ -613,7 +626,7 @@ var IgcInputComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputComponent.prototype, "change", {
+    Object.defineProperty(IgcXInputComponent.prototype, "change", {
         get: function () {
             return this._change;
         },
@@ -640,7 +653,7 @@ var IgcInputComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputComponent.prototype, "changing", {
+    Object.defineProperty(IgcXInputComponent.prototype, "changing", {
         get: function () {
             return this._changing;
         },
@@ -667,10 +680,9 @@ var IgcInputComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    IgcInputComponent._observedAttributesIgcInputComponent = null;
-    IgcInputComponent.htmlTagName = "igc-input";
-    IgcInputComponent._isElementRegistered = false;
-    return IgcInputComponent;
-}(IgcInputGroupItemComponent));
-export { IgcInputComponent };
-//# sourceMappingURL=igc-input-component.js.map
+    IgcXInputComponent._observedAttributesIgcXInputComponent = null;
+    IgcXInputComponent.htmlTagName = "igc-x-input";
+    IgcXInputComponent._isElementRegistered = false;
+    return IgcXInputComponent;
+}(IgcXInputGroupItemComponent));
+export { IgcXInputComponent };