igniteui-webcomponents-inputs 1.3.3 → 1.4.2

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

@@ -1,19 +1,14 @@
-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";
 let requiredStyle = `
-.ig-input input::-ms-clear {
-    display: none;
-    width: 0;
-    height: 0;
-}
 
 `;
 let pending = [];
@@ -37,26 +32,25 @@ function ensureCss() {
 function injectCss(style, attributeName, onload = null) {
     for (let i = 0; i < document.head.children.length; i++) {
         let child = document.head.children[i];
-        if (child.tagName == "link" && child.hasAttribute(attributeName)) {
+        if (child.tagName &&
+            child.tagName.toLowerCase() == "style" && child.hasAttribute(attributeName)) {
             return;
         }
     }
-    let 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');
+    let styleEle = document.createElement("style");
+    styleEle.textContent = style;
+    styleEle.setAttribute(attributeName, 'true');
     if (onload) {
         const onloadResolved = () => {
-            link.onload = null;
+            styleEle.onload = null;
             onload();
         };
-        link.onload = onloadResolved;
+        styleEle.onload = onloadResolved;
     }
-    document.head.appendChild(link);
+    document.head.appendChild(styleEle);
 }
-export let IgcInputComponent = /*@__PURE__*/ (() => {
-    class IgcInputComponent extends IgcInputGroupItemComponent {
+export let IgcXInputComponent = /*@__PURE__*/ (() => {
+    class IgcXInputComponent extends IgcXInputGroupItemComponent {
         constructor() {
             super();
             this._disconnected = false;
@@ -126,7 +120,7 @@ export let IgcInputComponent = /*@__PURE__*/ (() => {
             this._wrapper.destroy();
         }
         createImplementation() {
-            return new Input();
+            return new XInput();
         }
         disconnectedCallback() {
             this._disconnected = true;
@@ -142,8 +136,8 @@ export let IgcInputComponent = /*@__PURE__*/ (() => {
                 }
                 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";
@@ -165,98 +159,98 @@ export let IgcInputComponent = /*@__PURE__*/ (() => {
             return this._implementation;
         }
         static get observedAttributes() {
-            if (IgcInputComponent._observedAttributesIgcInputComponent == null) {
-                let names = getAllPropertyNames(IgcInputComponent);
+            if (IgcXInputComponent._observedAttributesIgcXInputComponent == null) {
+                let names = getAllPropertyNames(IgcXInputComponent);
                 for (let i = 0; i < names.length; i++) {
                     names[i] = toSpinal(names[i]);
                 }
-                IgcInputComponent._observedAttributesIgcInputComponent = names;
+                IgcXInputComponent._observedAttributesIgcXInputComponent = names;
             }
-            return IgcInputComponent._observedAttributesIgcInputComponent;
+            return IgcXInputComponent._observedAttributesIgcXInputComponent;
         }
         static register() {
-            if (!IgcInputComponent._isElementRegistered) {
-                IgcInputComponent._isElementRegistered = true;
-                RegisterElementHelper.registerElement(IgcInputComponent.htmlTagName, IgcInputComponent);
+            if (!IgcXInputComponent._isElementRegistered) {
+                IgcXInputComponent._isElementRegistered = true;
+                RegisterElementHelper.registerElement(IgcXInputComponent.htmlTagName, IgcXInputComponent);
             }
         }
         /**
      * Gets or sets the display density to use for the input.
     */
         get density() {
-            return this.i.m;
+            return this.i.x;
         }
         set density(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));
         }
         /**
          * Gets the actual display density to use for the label.
         */
         get actualDensity() {
-            return this.i.l;
+            return this.i.w;
         }
         set actualDensity(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));
         }
         /**
          * Gets/Sets the input mask for the input.
         */
         get mask() {
-            return this.i.b6;
+            return this.i.b9;
         }
         set mask(v) {
-            this.i.b6 = v;
+            this.i.b9 = v;
         }
         /**
          * Gets/Sets the character representing a fillable spot in the input mask
         */
         get promptChar() {
-            return this.i.ca;
+            return this.i.cd;
         }
         set promptChar(v) {
-            this.i.ca = v;
+            this.i.cd = v;
         }
         /**
          * Specifies if the bound value includes the formatting symbols.
         */
         get includeLiterals() {
-            return this.i.ap;
+            return this.i.aq;
         }
         set includeLiterals(v) {
-            this.i.ap = ensureBool(v);
-            this._a("includeLiterals", this.i.ap);
+            this.i.aq = ensureBool(v);
+            this._a("includeLiterals", this.i.aq);
         }
         /**
          * Gets the actual color to use for the text color.
         */
         get actualTextColor() {
-            return brushToString(this.i.dr);
+            return brushToString(this.i.du);
         }
         set actualTextColor(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));
         }
         /**
          * Gets the actual hover color to use for the text.
         */
         get actualHoverTextColor() {
-            return brushToString(this.i.dq);
+            return brushToString(this.i.dt);
         }
         set actualHoverTextColor(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));
         }
         /**
          * Gets or sets the color to use for the text.
         */
         get textColor() {
-            return brushToString(this.i.dv);
+            return brushToString(this.i.dy);
         }
         set textColor(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));
         }
         /**
          * Gets or sets the use for the button.
@@ -277,88 +271,88 @@ export let IgcInputComponent = /*@__PURE__*/ (() => {
          * Gets or sets the type to use for the input.
         */
         get inputType() {
-            return this.i.b1;
+            return this.i.b3;
         }
         set inputType(v) {
-            this.i.b1 = v;
+            this.i.b3 = v;
         }
         /**
          * Gets or sets the placeholder to use for the input.
         */
         get placeholder() {
-            return this.i.b8;
+            return this.i.cb;
         }
         set placeholder(v) {
-            this.i.b8 = v;
+            this.i.cb = v;
         }
         /**
          * Gets or sets the color to use for the hovered text of the button regardless of type.
         */
         get hoverTextColor() {
-            return brushToString(this.i.du);
+            return brushToString(this.i.dx);
         }
         set hoverTextColor(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));
         }
         /**
          * Gets or sets the id to use for the checkbox.
         */
         get id() {
-            return this.i.by;
+            return this.i.b0;
         }
         set id(v) {
-            this.i.by = v;
+            this.i.b0 = v;
         }
         /**
          * Gets or sets TabIndex to use for the checkbox.
         */
         get tabIndex() {
-            return this.i.a8;
+            return this.i.ba;
         }
         set tabIndex(v) {
-            this.i.a8 = +v;
-            this._a("tabIndex", this.i.a8);
+            this.i.ba = +v;
+            this._a("tabIndex", this.i.ba);
         }
         /**
          * Gets or sets the for attribute to use for the input.
         */
         get for() {
-            return this.i.bv;
+            return this.i.bx;
         }
         set for(v) {
-            this.i.bv = v;
+            this.i.bx = v;
         }
         /**
          * Gets or sets the value of the aria-label attribute.
         */
         get ariaLabel() {
-            return this.i.br;
+            return this.i.bt;
         }
         set ariaLabel(v) {
-            this.i.br = v;
+            this.i.bt = v;
         }
         /**
          * Gets or sets whether the input is hovered.
         */
         get isHover() {
-            return this.i.ar;
+            return this.i.as;
         }
         set isHover(v) {
-            this.i.ar = ensureBool(v);
-            this._a("isHover", this.i.ar);
+            this.i.as = ensureBool(v);
+            this._a("isHover", this.i.as);
         }
         /**
          * Gets or sets the value for the input.
         */
         get value() {
-            return this.i.cg;
+            return this.i.cj;
         }
         set value(v) {
-            this.i.cg = v;
+            this.i.cj = v;
         }
         get hasValue() {
-            return this.i.ao;
+            return this.i.ap;
         }
         /**
          * Gets or sets whether the checkbox is disabled.
@@ -370,6 +364,16 @@ export let IgcInputComponent = /*@__PURE__*/ (() => {
             this.i.disabled = ensureBool(v);
             this._a("disabled", this.i.disabled);
         }
+        /**
+         * Gets or sets whether the checkbox is readonly.
+        */
+        get readonly() {
+            return this.i.readonly;
+        }
+        set readonly(v) {
+            this.i.readonly = ensureBool(v);
+            this._a("readonly", this.i.readonly);
+        }
         /**
          * 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.
         */
@@ -401,7 +405,7 @@ export let IgcInputComponent = /*@__PURE__*/ (() => {
         
         */
         exportVisualModel() {
-            let iv = this.i.ba();
+            let iv = this.i.bc();
             return (iv);
         }
         /**
@@ -409,17 +413,17 @@ export let IgcInputComponent = /*@__PURE__*/ (() => {
         
         */
         exportSerializedVisualModel() {
-            let iv = this.i.bu();
+            let iv = this.i.bw();
             return (iv);
         }
         setSelectionRange(selectionStart, selectionEnd) {
-            this.i.df(selectionStart, selectionEnd);
+            this.i.di(selectionStart, selectionEnd);
         }
         blur() {
-            this.i.cj();
+            this.i.cm();
         }
         select() {
-            this.i.dd();
+            this.i.dg();
         }
         get keyDown() {
             return this._keyDown;
@@ -532,9 +536,8 @@ export let IgcInputComponent = /*@__PURE__*/ (() => {
             this.i.changing = delegateCombine(this.i.changing, this._changing_wrapped);
         }
     }
-    IgcInputComponent._observedAttributesIgcInputComponent = null;
-    IgcInputComponent.htmlTagName = "igc-input";
-    IgcInputComponent._isElementRegistered = false;
-    return IgcInputComponent;
+    IgcXInputComponent._observedAttributesIgcXInputComponent = null;
+    IgcXInputComponent.htmlTagName = "igc-x-input";
+    IgcXInputComponent._isElementRegistered = false;
+    return IgcXInputComponent;
 })();
-//# sourceMappingURL=igc-input-component.js.map