igniteui-webcomponents-inputs 7.1.1-beta.1 → 7.1.1-beta.3

package/esm2022/lib/igc-x-checkbox-component.js

@@ -0,0 +1,623 @@
+import { XCheckbox } from "./XCheckbox";
+import { ensureEnum, brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, NamePatcher, toSpinal, enumToString, getAllPropertyNames, fromSpinal } from "igniteui-webcomponents-core";
+import { WebComponentRenderer, PortalManager } from "igniteui-webcomponents-core";
+import { delegateCombine, delegateRemove } from "igniteui-webcomponents-core";
+import { TypeRegistrar } from "igniteui-webcomponents-core";
+import { RegisterElementHelper } from "igniteui-webcomponents-core";
+import { IgcCheckboxChangeEventArgs } from './igc-checkbox-change-event-args';
+import { CheckboxLabelPosition_$type } from './CheckboxLabelPosition';
+import { BaseControlTheme_$type } from "igniteui-webcomponents-core";
+import { IgcHTMLElement } from "igniteui-webcomponents-core";
+let pending = [];
+let checked = new WeakMap(); // TODO why not WeakSet?
+class IgcXCheckboxComponent extends IgcHTMLElement {
+    constructor() {
+        super();
+        this._disconnected = false;
+        this._settingAttributes = false;
+        this._attached = false;
+        this._queuedSetAttributes = [];
+        this._updatingFromAttribute = false;
+        this.__p = null;
+        this._hasUserValues = new Set();
+        this._stylingContainer = null;
+        this._stylingParent = null;
+        this._inStyling = false;
+        this._change = null;
+        this._change_wrapped = null;
+        if (this._styling) {
+            NamePatcher.ensureStylablePatched(Object.getPrototypeOf(this));
+        }
+        this._portalManager = new PortalManager("checkboxLabel");
+        this._renderer = new WebComponentRenderer(this, document, true, {}, this._portalManager);
+        this._container = this._renderer.createElement("div");
+        this._renderer.updateRoot(this._container);
+        this._implementation = this.createImplementation();
+        this._implementation.externalObject = this;
+        //this._container.setStyleProperty("width", "100%");
+        //this._container.setStyleProperty("height", "100%");
+        var root;
+        root = this._container;
+        if (this._container.getNativeElement() != null) {
+            root = this._container.getNativeElement();
+        }
+        this._wrapper = this._renderer;
+        var checkbox = this.i;
+        this._checkbox = checkbox;
+        checkbox.provideContainer(this._renderer);
+        this._onChildrenChanged();
+        //Checkbox.notifySizeChanged();
+        let mut = new MutationObserver((list) => {
+            for (var mutation of list) {
+                if (mutation.type == 'childList') {
+                    this._onChildrenChanged();
+                }
+            }
+        });
+        mut.observe(this, {
+            childList: true
+        });
+        //this._renderer.addSizeWatcher(() => {
+        //    this._checkbox.notifySizeChanged();
+        //});
+    }
+    _onChildrenChanged() {
+        var children = [];
+        for (var i = 0; i < this.childNodes.length; i++) {
+            var child = this.childNodes[i];
+            if (child !== this._container.getNativeElement()) {
+                children.push(child);
+            }
+        }
+        this._portalManager.onChildrenChanged(children);
+    }
+    // supports angular themes or custom properties set in CSS
+    updateStyle() {
+        this._styling(this, this);
+    }
+    destroy() {
+        this._checkbox.destroy();
+        this._wrapper.destroy();
+    }
+    createImplementation() {
+        return new XCheckbox();
+    }
+    disconnectedCallback() {
+        this._disconnected = true;
+        if (this.i) {
+            this.i.onDetachedFromUI();
+        }
+    }
+    connectedCallback() {
+        if (this._disconnected) {
+            this._disconnected = false;
+            if (this.i) {
+                this.i.onAttachedToUI();
+            }
+            return;
+        }
+        this.classList.add("ig-x-checkbox");
+        this.classList.add("igc-x-checkbox");
+        this.appendChild(this._container.getNativeElement());
+        this._attached = true;
+        this.style.display = "inline-block";
+        //this.style.height = this._height;
+        //this.style.width = this._width;
+        this._flushQueuedAttributes();
+        // supports themes or custom properties set in CSS 
+        this._styling(this, this);
+        this.afterContentInit();
+    }
+    afterContentInit() {
+        this.i.onContentReady();
+        //this.i.notifySizeChanged();
+    }
+    /**
+     * @hidden
+     */
+    get i() {
+        return this._implementation;
+    } /**
+                                 * @hidden
+                                 */
+    static _createFromInternal(internal) {
+        if (!internal) {
+            return null;
+        }
+        if (!internal.$type) {
+            return null;
+        }
+        let name = internal.$type.name;
+        let externalName = "Igc" + name + "Component";
+        if (!TypeRegistrar.isRegistered(externalName)) {
+            return null;
+        }
+        return TypeRegistrar.create(externalName);
+    }
+    _enqueueSetAttribute(attrName, attrValue) {
+        this._queuedSetAttributes.push({ attrName: attrName, attrValue: attrValue });
+    }
+    _flushQueuedAttributes() {
+        this._settingAttributes = true;
+        for (let i = 0; i < this._queuedSetAttributes.length; i++) {
+            this.setAttribute(this._queuedSetAttributes[i].attrName, this._queuedSetAttributes[i].attrValue);
+        }
+        this._settingAttributes = false;
+        this._queuedSetAttributes.length = 0;
+    }
+    _a(attrName, attrValue) {
+        if (this._updatingFromAttribute) {
+            return;
+        }
+        if (attrValue) {
+            attrValue = attrValue.toString();
+        }
+        this._settingAttributes = true;
+        attrName = toSpinal(attrName);
+        if (this._attached) {
+            this.setAttribute(attrName, attrValue);
+        }
+        else {
+            this._enqueueSetAttribute(attrName, attrValue);
+        }
+        this._settingAttributes = false;
+    }
+    static { this._observedAttributesIgcXCheckboxComponent = null; }
+    static get observedAttributes() {
+        if (IgcXCheckboxComponent._observedAttributesIgcXCheckboxComponent == null) {
+            let names = getAllPropertyNames(IgcXCheckboxComponent);
+            for (let i = 0; i < names.length; i++) {
+                names[i] = toSpinal(names[i]);
+            }
+            IgcXCheckboxComponent._observedAttributesIgcXCheckboxComponent = names;
+        }
+        return IgcXCheckboxComponent._observedAttributesIgcXCheckboxComponent;
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (this._settingAttributes) {
+            return;
+        }
+        let setName = fromSpinal(name);
+        this._updatingFromAttribute = true;
+        this[setName] = newValue;
+        this._updatingFromAttribute = false;
+    }
+    static { this.htmlTagName = "igc-x-checkbox"; }
+    static { this._isElementRegistered = false; }
+    static register() {
+        if (!IgcXCheckboxComponent._isElementRegistered) {
+            IgcXCheckboxComponent._isElementRegistered = true;
+            RegisterElementHelper.registerElement(IgcXCheckboxComponent.htmlTagName, IgcXCheckboxComponent);
+        }
+    }
+    /**
+ * Gets or sets the base built in theme to use for the checkbox.
+*/
+    get baseTheme() {
+        return this.i.n;
+    }
+    set baseTheme(v) {
+        this.i.n = ensureEnum(BaseControlTheme_$type, v);
+        this._a("baseTheme", enumToString(BaseControlTheme_$type, this.i.n));
+    }
+    /**
+     * Gets or sets the color to use for the background when the checkbox is unchecked.
+    */
+    get uncheckedBackgroundColor() {
+        return brushToString(this.i.dl);
+    }
+    set uncheckedBackgroundColor(v) {
+        this.i.dl = stringToBrush(v);
+        this._a("uncheckedBackgroundColor", brushToString(this.i.dl));
+    }
+    /**
+     * Gets or sets the color to use for the actual background when the checkbox is unchecked.
+    */
+    get actualUncheckedBackgroundColor() {
+        return brushToString(this.i.db);
+    }
+    set actualUncheckedBackgroundColor(v) {
+        this.i.db = stringToBrush(v);
+        this._a("actualUncheckedBackgroundColor", brushToString(this.i.db));
+    }
+    /**
+     * Gets or sets the color to use for the background when the checkbox is checked.
+    */
+    get checkedBackgroundColor() {
+        return brushToString(this.i.dd);
+    }
+    set checkedBackgroundColor(v) {
+        this.i.dd = stringToBrush(v);
+        this._a("checkedBackgroundColor", brushToString(this.i.dd));
+    }
+    /**
+     * Gets or sets the color to use for the check mark when the checkbox is checked.
+    */
+    get tickColor() {
+        return brushToString(this.i.dk);
+    }
+    set tickColor(v) {
+        this.i.dk = stringToBrush(v);
+        this._a("tickColor", brushToString(this.i.dk));
+    }
+    /**
+     * Gets or sets the color to use for the check mark when the checkbox is checked.
+    */
+    get actualTickColor() {
+        return brushToString(this.i.da);
+    }
+    set actualTickColor(v) {
+        this.i.da = stringToBrush(v);
+        this._a("actualTickColor", brushToString(this.i.da));
+    }
+    /**
+     * Gets or sets the color to use for the check mark when the checkbox is unchecked.
+    */
+    get uncheckedBorderColor() {
+        return brushToString(this.i.dm);
+    }
+    set uncheckedBorderColor(v) {
+        this.i.dm = stringToBrush(v);
+        this._a("uncheckedBorderColor", brushToString(this.i.dm));
+    }
+    /**
+     * Gets or sets the color to use for the check mark when the checkbox is checked.
+    */
+    get checkedBorderColor() {
+        return brushToString(this.i.de);
+    }
+    set checkedBorderColor(v) {
+        this.i.de = stringToBrush(v);
+        this._a("checkedBorderColor", brushToString(this.i.de));
+    }
+    /**
+     * Gets or sets the color to use for the check mark when the checkbox is checked.
+    */
+    get actualUncheckedBorderColor() {
+        return brushToString(this.i.dc);
+    }
+    set actualUncheckedBorderColor(v) {
+        this.i.dc = stringToBrush(v);
+        this._a("actualUncheckedBorderColor", brushToString(this.i.dc));
+    }
+    /**
+     * Gets or sets the color to use for the check mark when the checkbox is checked.
+    */
+    get actualCheckedBorderColor() {
+        return brushToString(this.i.c9);
+    }
+    set actualCheckedBorderColor(v) {
+        this.i.c9 = stringToBrush(v);
+        this._a("actualCheckedBorderColor", brushToString(this.i.c9));
+    }
+    /**
+     * Gets or sets the Width to use for the check mark when the checkbox is checked.
+    */
+    get borderWidth() {
+        return this.i.aq;
+    }
+    set borderWidth(v) {
+        this.i.aq = +v;
+        this._a("borderWidth", this.i.aq);
+    }
+    /**
+     * Gets or sets the Width to use for the check mark when the checkbox is checked.
+    */
+    get actualBorderWidth() {
+        return this.i.an;
+    }
+    set actualBorderWidth(v) {
+        this.i.an = +v;
+        this._a("actualBorderWidth", this.i.an);
+    }
+    /**
+     * Gets or sets the corner radius to use for the checkbox.
+    */
+    get cornerRadius() {
+        return this.i.ar;
+    }
+    set cornerRadius(v) {
+        this.i.ar = +v;
+        this._a("cornerRadius", this.i.ar);
+    }
+    /**
+     * Gets or sets the corner radius to use for the checkbox.
+    */
+    get tickStrokeWidth() {
+        return this.i.av;
+    }
+    set tickStrokeWidth(v) {
+        this.i.av = +v;
+        this._a("tickStrokeWidth", this.i.av);
+    }
+    /**
+     * Gets or sets the stroke width to use for the check mark.
+    */
+    get actualTickStrokeWidth() {
+        return this.i.ap;
+    }
+    set actualTickStrokeWidth(v) {
+        this.i.ap = +v;
+        this._a("actualTickStrokeWidth", this.i.ap);
+    }
+    /**
+     * Gets the actual corner radius to use for the checkbox.
+    */
+    get actualCornerRadius() {
+        return this.i.ao;
+    }
+    set actualCornerRadius(v) {
+        this.i.ao = +v;
+        this._a("actualCornerRadius", this.i.ao);
+    }
+    /**
+     * Gets or sets the color to use for the actual background when the checkbox is checked.
+    */
+    get actualCheckedBackgroundColor() {
+        return brushToString(this.i.c8);
+    }
+    set actualCheckedBackgroundColor(v) {
+        this.i.c8 = stringToBrush(v);
+        this._a("actualCheckedBackgroundColor", brushToString(this.i.c8));
+    }
+    /**
+     * Gets or sets the id to use for the internal native checkbox.
+    */
+    get inputId() {
+        return this.i.b1;
+    }
+    set inputId(v) {
+        this.i.b1 = v;
+    }
+    /**
+     * Gets or sets the id to use for the checkbox.
+    */
+    get id() {
+        return this.i.bz;
+    }
+    set id(v) {
+        this.i.bz = v;
+    }
+    /**
+     * Gets or sets id to use for the checkbox label.
+    */
+    get labelId() {
+        return this.i.labelId;
+    }
+    set labelId(v) {
+        this.i.labelId = v;
+    }
+    /**
+     * Gets or sets name to use for the checkbox.
+    */
+    get name() {
+        return this.i.ca;
+    }
+    set name(v) {
+        this.i.ca = v;
+    }
+    /**
+     * Gets or sets TabIndex to use for the checkbox.
+    */
+    get tabIndex() {
+        return this.i.az;
+    }
+    set tabIndex(v) {
+        this.i.az = +v;
+        this._a("tabIndex", this.i.az);
+    }
+    /**
+     * Gets or sets if the checkbox is required.
+    */
+    get required() {
+        return this.i.ay;
+    }
+    set required(v) {
+        this.i.ay = +v;
+        this._a("required", this.i.ay);
+    }
+    /**
+     * Gets or sets the value of the aria-labelledby attribute.
+    */
+    get ariaLabelledBy() {
+        return this.i.bn;
+    }
+    set ariaLabelledBy(v) {
+        this.i.bn = v;
+    }
+    /**
+     * Gets or sets the value of the aria-label attribute.
+    */
+    get ariaLabel() {
+        return this.i.bm;
+    }
+    set ariaLabel(v) {
+        this.i.bm = v;
+    }
+    /**
+     * Gets or sets value to use for the checkbox.
+    */
+    get value() {
+        return this.i.a4;
+    }
+    set value(v) {
+        this.i.a4 = v;
+    }
+    /**
+     * Gets or sets if the checkbox is Focused.
+    */
+    get focused() {
+        return this.i.focused;
+    }
+    set focused(v) {
+        this.i.focused = ensureBool(v);
+        this._a("focused", this.i.focused);
+    }
+    /**
+     * Gets or sets LabelPosition to use for the checkbox.
+    */
+    get labelPosition() {
+        return this.i.e;
+    }
+    set labelPosition(v) {
+        this.i.e = ensureEnum(CheckboxLabelPosition_$type, v);
+        this._a("labelPosition", enumToString(CheckboxLabelPosition_$type, this.i.e));
+    }
+    /**
+     * Gets or sets whether to disable the ripple effect for the checkbox.
+    */
+    get disableRipple() {
+        return this.i.y;
+    }
+    set disableRipple(v) {
+        this.i.y = ensureBool(v);
+        this._a("disableRipple", this.i.y);
+    }
+    /**
+     * Gets or sets whether the checkbox is checked.
+    */
+    get checked() {
+        return this.i.checked;
+    }
+    set checked(v) {
+        this.i.checked = ensureBool(v);
+        this._a("checked", this.i.checked);
+    }
+    /**
+     * Gets or sets whether the checkbox is indeterminate.
+    */
+    get indeterminate() {
+        return this.i.indeterminate;
+    }
+    set indeterminate(v) {
+        this.i.indeterminate = ensureBool(v);
+        this._a("indeterminate", this.i.indeterminate);
+    }
+    /**
+     * Gets or sets whether the checkbox is disabled.
+    */
+    get disabled() {
+        return this.i.disabled;
+    }
+    set disabled(v) {
+        this.i.disabled = ensureBool(v);
+        this._a("disabled", this.i.disabled);
+    }
+    /**
+     * Gets or sets whether the checkbox transitions are disabled.
+    */
+    get disableTransitions() {
+        return this.i.z;
+    }
+    set disableTransitions(v) {
+        this.i.z = ensureBool(v);
+        this._a("disableTransitions", this.i.z);
+    }
+    findByName(name) {
+        if (this.findEphemera) {
+            if (name && name.indexOf("@@e:") == 0) {
+                return this.findEphemera(name);
+            }
+        }
+        return null;
+    }
+    get hasUserValues() {
+        return this._hasUserValues;
+    }
+    __m(propertyName) {
+        if (!this._inStyling) {
+            this._hasUserValues.add(propertyName);
+        }
+    }
+    _styling(container, component, parent) {
+        if (this._inStyling) {
+            return;
+        }
+        this._inStyling = true;
+        this._stylingContainer = container;
+        this._stylingParent = component;
+        let genericPrefix = "";
+        let typeName = this.i.$type.name;
+        if (typeName.indexOf("Xam") === 0) {
+            typeName = typeName.substring(3);
+        }
+        genericPrefix = toSpinal("XCheckboxComponent");
+        let additionalPrefixes = [];
+        let prefix = toSpinal(typeName);
+        additionalPrefixes.push(prefix + "-");
+        let b = this.i.$type.baseType;
+        while (b && b.name != "Object" &&
+            b.name != "Base" &&
+            b.name != "Control" &&
+            b.Name != "DependencyObject" &&
+            b.Name != "FrameworkElement") {
+            typeName = b.name;
+            if (typeName.indexOf("Xam") === 0) {
+                typeName = typeName.substring(3);
+            }
+            let basePrefix = toSpinal(typeName);
+            additionalPrefixes.push(basePrefix + "-");
+            b = b.baseType;
+        }
+        if (parent) {
+            let parentTypeName = parent.i.$type.name;
+            if (parentTypeName.indexOf("Xam") === 0) {
+                parentTypeName = parentTypeName.substring(3);
+            }
+            let parentPrefix = toSpinal(parentTypeName);
+            additionalPrefixes.push(parentPrefix + "-" + genericPrefix + "-");
+            additionalPrefixes.push(parentPrefix + "-" + prefix + "-");
+        }
+        initializePropertiesFromCss(container, this, genericPrefix + "-", this.hasUserValues, false, additionalPrefixes);
+        if (this._otherStyling) {
+            this._otherStyling(container, component, parent);
+        }
+        this._inStyling = false;
+    }
+    onDetachedFromUI() {
+        this.i.onDetachedFromUI();
+    }
+    onAttachedToUI() {
+        this.i.onAttachedToUI();
+    }
+    /**
+     * Exports visual information about the current state of the grid.
+    
+    */
+    exportVisualModel() {
+        let iv = this.i.a3();
+        return (iv);
+    }
+    /**
+     * Returns a serialized copy of the exported visual model
+    
+    */
+    exportSerializedVisualModel() {
+        let iv = this.i.by();
+        return (iv);
+    }
+    get change() {
+        return this._change;
+    }
+    set change(ev) {
+        if (this._change_wrapped !== null) {
+            this.i.change = delegateRemove(this.i.change, this._change_wrapped);
+            this._change_wrapped = null;
+            this._change = null;
+        }
+        this._change = ev;
+        this._change_wrapped = (o, e) => {
+            let outerArgs = new IgcCheckboxChangeEventArgs();
+            outerArgs._provideImplementation(e);
+            if (this.beforeChange) {
+                this.beforeChange(this, outerArgs);
+            }
+            if (this._change) {
+                this._change(this, outerArgs);
+            }
+        };
+        this.i.change = delegateCombine(this.i.change, this._change_wrapped);
+        ;
+    }
+}
+export { IgcXCheckboxComponent };