UNPKG

igniteui-webcomponents-inputs

Version:

Ignite UI Web Components inputs components.

836 lines (833 loc) 30.5 kB
import { __extends } from "tslib"; import { ensureEnum, brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, NamePatcher, toSpinal, enumToString, getAllPropertyNames, fromSpinal } from "igniteui-webcomponents-core"; import { FontInfo } from "igniteui-webcomponents-core"; import { WebComponentRenderer } from "igniteui-webcomponents-core"; import { delegateCombine, delegateRemove } from "igniteui-webcomponents-core"; import { TypeRegistrar } from "igniteui-webcomponents-core"; import { RegisterElementHelper } from "igniteui-webcomponents-core"; import { XDatePicker } from './XDatePicker'; import { IgcSelectedValueChangedEventArgs } from "./igc-selected-value-changed-event-args"; import { IgcGotFocusEventArgs } from "./igc-got-focus-event-args"; import { IgcLostFocusEventArgs } from "./igc-lost-focus-event-args"; import { IgcInputChangeEventArgs } from "./igc-input-change-event-args"; import { IgcKeyEventArgs } from "igniteui-webcomponents-core"; import { ControlDisplayDensity_$type } from "igniteui-webcomponents-core"; import { BaseControlTheme_$type } from "igniteui-webcomponents-core"; import { DateFormats_$type } from "./DateFormats"; import { DayOfWeek_$type } from "./DayOfWeek"; import { FirstWeek_$type } from "./FirstWeek"; import { IgcHTMLElement } from "igniteui-webcomponents-core"; var IgcXDatePickerComponent = /** @class */ /*@__PURE__*/ (function (_super) { __extends(IgcXDatePickerComponent, _super); function IgcXDatePickerComponent() { var _this = _super.call(this) || this; _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._selectedValueChanged = null; _this._selectedValueChanged_wrapped = null; _this._gotFocus = null; _this._gotFocus_wrapped = null; _this._lostFocus = null; _this._lostFocus_wrapped = null; _this._keyDown = null; _this._keyDown_wrapped = null; _this._changing = null; _this._changing_wrapped = null; _this._valueChange = null; _this._valueChange_wrapped = null; if (_this._styling) { NamePatcher.ensureStylablePatched(Object.getPrototypeOf(_this)); } _this._renderer = new WebComponentRenderer(_this, document, true, null); _this._implementation = _this.createImplementation(); _this._implementation.externalObject = _this; _this._container = _this._renderer.createElement("div"); _this._renderer.updateRoot(_this._container); //this._renderer.rootWrapper.append(this._container); //this._container.setStyleProperty("width", "100%"); //this._container.setStyleProperty("height", "100%"); var datePicker = _this.i; _this._datePicker = datePicker; _this._renderer.addSizeWatcher(function () { _this._datePicker.notifySizeChanged(); }); return _this; } Object.defineProperty(IgcXDatePickerComponent.prototype, "height", { get: function () { return this._height; }, set: function (value) { this._height = value; this.style.height = value; this.i.notifySizeChanged(); }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "width", { get: function () { return this._width; }, set: function (value) { this._width = value; this.style.width = value; this.i.notifySizeChanged(); }, enumerable: false, configurable: true }); // supports angular themes or custom properties set in CSS IgcXDatePickerComponent.prototype.updateStyle = function () { this._styling(this, this); }; IgcXDatePickerComponent.prototype.destroy = function () { this._datePicker.destroy(); }; IgcXDatePickerComponent.prototype.createImplementation = function () { return new XDatePicker(); }; IgcXDatePickerComponent.prototype.disconnectedCallback = function () { this._disconnected = true; this._datePicker.provideContainer(null); }; IgcXDatePickerComponent.prototype.connectedCallback = function () { if (this._disconnected) { this._disconnected = false; return; } this.classList.add("ig-x-date-picker"); this.classList.add("igc-x-date-picker"); var rootWrapper = this._renderer.rootWrapper; var rootElement = rootWrapper.getNativeElement(); this.appendChild(rootElement); this._attached = true; this.style.display = "block"; this.style.height = this._height; this.style.width = this._width; var inputContainer = this._renderer.createElement("div"); this._container.append(inputContainer); var popupContainer = this._renderer.createElement("div"); this._container.append(popupContainer); this._datePicker.provideContainer(this._renderer); this._datePicker.notifySizeChanged(); this._flushQueuedAttributes(); // supports themes or custom properties set in CSS this._styling(this, this); this.afterContentInit(); }; IgcXDatePickerComponent.prototype.afterContentInit = function () { this.i.notifySizeChanged(); }; IgcXDatePickerComponent.prototype.attributeSynced = function (name, value) { // an attribute was set by the component renderer. if (name === 'name') { this.i.setName(value); } }; Object.defineProperty(IgcXDatePickerComponent.prototype, "i", { /** * @hidden */ get: function () { return this._implementation; } /** * @hidden */, enumerable: false, configurable: true }); IgcXDatePickerComponent._createFromInternal = function (internal) { if (!internal) { return null; } if (!internal.$type) { return null; } var name = internal.$type.name; var externalName = "Igc" + name + "Component"; if (!TypeRegistrar.isRegistered(externalName)) { return null; } return TypeRegistrar.create(externalName); }; IgcXDatePickerComponent.prototype._enqueueSetAttribute = function (attrName, attrValue) { this._queuedSetAttributes.push({ attrName: attrName, attrValue: attrValue }); }; IgcXDatePickerComponent.prototype._flushQueuedAttributes = function () { this._settingAttributes = true; for (var i = 0; i < this._queuedSetAttributes.length; i++) { this.setAttribute(this._queuedSetAttributes[i].attrName, this._queuedSetAttributes[i].attrValue); } this._settingAttributes = false; this._queuedSetAttributes.length = 0; }; IgcXDatePickerComponent.prototype._a = function (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; }; Object.defineProperty(IgcXDatePickerComponent, "observedAttributes", { get: function () { if (IgcXDatePickerComponent._observedAttributesIgcXDatePickerComponent == null) { var names = getAllPropertyNames(IgcXDatePickerComponent); for (var i = 0; i < names.length; i++) { names[i] = toSpinal(names[i]); } IgcXDatePickerComponent._observedAttributesIgcXDatePickerComponent = names; } return IgcXDatePickerComponent._observedAttributesIgcXDatePickerComponent; }, enumerable: false, configurable: true }); IgcXDatePickerComponent.prototype.attributeChangedCallback = function (name, oldValue, newValue) { if (this._settingAttributes) { return; } var setName = fromSpinal(name); this._updatingFromAttribute = true; this[setName] = newValue; this._updatingFromAttribute = false; }; IgcXDatePickerComponent.register = function () { if (!IgcXDatePickerComponent._isElementRegistered) { IgcXDatePickerComponent._isElementRegistered = true; RegisterElementHelper.registerElement(IgcXDatePickerComponent.htmlTagName, IgcXDatePickerComponent); } }; Object.defineProperty(IgcXDatePickerComponent.prototype, "value", { /** * Gets or Sets the property name that contains the values. */ get: function () { return this.i.value; }, set: function (v) { this.i.value = v; }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "today", { /** * Gets or Sets the property name that contains the values. */ get: function () { return this.i.bb; }, set: function (v) { this.i.bb = v; }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "label", { /** * Gets or Sets the property name that contains the label. */ get: function () { return this.i.b4; }, set: function (v) { this.i.b4 = v; }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "labelTextColor", { /** * Gets or sets the color to use for the text. */ get: function () { return brushToString(this.i.dx); }, set: function (v) { this.i.dx = stringToBrush(v); this._a("labelTextColor", brushToString(this.i.dx)); }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "labelTextStyle", { /** * Gets or sets the font to use for the combobox. */ get: function () { if (this.i.ac == null) { return null; } return this.i.ac.fontString; }, set: function (v) { var fi = new FontInfo(); fi.fontString = v; this.i.ac = fi; this._a("labelTextStyle", this.i.ac != null ? this.i.ac.fontString : ""); }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "placeholder", { /** * Gets or Sets the property name that contains the placeholder. */ get: function () { return this.i.cc; }, set: function (v) { this.i.cc = v; }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "minDate", { /** * Gets or Sets the property name that contains the MinDate. */ get: function () { return this.i.ba; }, set: function (v) { this.i.ba = v; }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "maxDate", { /** * Gets or Sets the property name that contains the MaxDate. */ get: function () { return this.i.a9; }, set: function (v) { this.i.a9 = v; }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "density", { /** * Gets or sets the display density to use for the date pcicker. */ get: function () { return this.i.y; }, set: function (v) { this.i.y = ensureEnum(ControlDisplayDensity_$type, v); this._a("density", enumToString(ControlDisplayDensity_$type, this.i.y)); }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "baseTheme", { /** * Gets or sets the base built in theme to use for the date picker. */ get: function () { return this.i.w; }, set: function (v) { this.i.w = ensureEnum(BaseControlTheme_$type, v); this._a("baseTheme", enumToString(BaseControlTheme_$type, this.i.w)); }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "textStyle", { /** * Gets or sets the font to use for the combobox. */ get: function () { if (this.i.ad == null) { return null; } return this.i.ad.fontString; }, set: function (v) { var fi = new FontInfo(); fi.fontString = v; this.i.ad = fi; this._a("textStyle", this.i.ad != null ? this.i.ad.fontString : ""); }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "textColor", { /** * Gets or Sets the text color */ get: function () { return brushToString(this.i.dy); }, set: function (v) { this.i.dy = stringToBrush(v); this._a("textColor", brushToString(this.i.dy)); }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "iconColor", { /** * Gets or Sets the text color */ get: function () { return brushToString(this.i.dw); }, set: function (v) { this.i.dw = stringToBrush(v); this._a("iconColor", brushToString(this.i.dw)); }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "showClearButton", { /** * Gets or sets the ShowClearButton property to detirmine if the clear button is shown */ get: function () { return this.i.a0; }, set: function (v) { this.i.a0 = ensureBool(v); this._a("showClearButton", this.i.a0); }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "showTodayButton", { /** * Gets or sets the ShowTodayButton property to detirmine if the today button is shown */ get: function () { return this.i.a1; }, set: function (v) { this.i.a1 = ensureBool(v); this._a("showTodayButton", this.i.a1); }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "allowTextInput", { /** * Gets or sets the AllowTextInput property to detirmine if entering text into the input is allowed */ get: function () { return this.i.au; }, set: function (v) { this.i.au = ensureBool(v); this._a("allowTextInput", this.i.au); }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "openOnFocus", { /** * Gets or sets the AllowTextInput property to detirmine if entering text into the input is allowed */ get: function () { return this.i.ay; }, set: function (v) { this.i.ay = ensureBool(v); this._a("openOnFocus", this.i.ay); }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "firstDayOfWeek", { /** * Gets or sets the FirstDayOfWeek property to detirmine first day of the week */ get: function () { return this.i.j; }, set: function (v) { this.i.j = ensureEnum(DayOfWeek_$type, v); this._a("firstDayOfWeek", enumToString(DayOfWeek_$type, this.i.j)); }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "firstWeekOfYear", { /** * Gets or sets the FirstWeekOfYear property to detirmine first week of the year */ get: function () { return this.i.l; }, set: function (v) { this.i.l = ensureEnum(FirstWeek_$type, v); this._a("firstWeekOfYear", enumToString(FirstWeek_$type, this.i.l)); }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "showWeekNumbers", { /** * Gets or sets the ShowWeekNumbers property to detirmine if the week numbers are shown */ get: function () { return this.i.a2; }, set: function (v) { this.i.a2 = ensureBool(v); this._a("showWeekNumbers", this.i.a2); }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "dateFormat", { /** * Gets or sets the date time format to use for this column. If FormatString is specificied this value is ignored. */ get: function () { return this.i.e; }, set: function (v) { this.i.e = ensureEnum(DateFormats_$type, v); this._a("dateFormat", enumToString(DateFormats_$type, this.i.e)); }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "formatString", { /** * Gets or sets the Format property to detirmine the format of the date in the input */ get: function () { return this.i.bz; }, set: function (v) { this.i.bz = v; }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "isDisabled", { get: function () { return this.i.av; }, set: function (v) { this.i.av = ensureBool(v); this._a("isDisabled", this.i.av); }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "isFixed", { /** * Indicates that the calendar dropdown will position itself relative to the window instead of the document. */ get: function () { return this.i.aw; }, set: function (v) { this.i.aw = ensureBool(v); this._a("isFixed", this.i.aw); }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "openAsChild", { /** * Indicates that the dropdown should open as a child of the date picker. */ get: function () { return this.i.ax; }, set: function (v) { this.i.ax = ensureBool(v); this._a("openAsChild", this.i.ax); }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "useTopLayer", { /** * Indicates that the dropdown will place itself into the browser top layer. */ get: function () { return this.i.a3; }, set: function (v) { this.i.a3 = ensureBool(v); this._a("useTopLayer", this.i.a3); }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "hasUserValues", { get: function () { return this._hasUserValues; }, enumerable: false, configurable: true }); IgcXDatePickerComponent.prototype.__m = function (propertyName) { if (!this._inStyling) { this._hasUserValues.add(propertyName); } }; IgcXDatePickerComponent.prototype._styling = function (container, component, parent) { if (this._inStyling) { return; } this._inStyling = true; this._stylingContainer = container; this._stylingParent = component; var genericPrefix = ""; var typeName = this.i.$type.name; if (typeName.indexOf("Xam") === 0) { typeName = typeName.substring(3); } genericPrefix = toSpinal("XDatePickerComponent"); var additionalPrefixes = []; var prefix = toSpinal(typeName); additionalPrefixes.push(prefix + "-"); var 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); } var basePrefix = toSpinal(typeName); additionalPrefixes.push(basePrefix + "-"); b = b.baseType; } if (parent) { var parentTypeName = parent.i.$type.name; if (parentTypeName.indexOf("Xam") === 0) { parentTypeName = parentTypeName.substring(3); } var 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; }; IgcXDatePickerComponent.prototype.select = function () { this.i.dg(); }; /** * Exports visual information about the current state of the grid. */ IgcXDatePickerComponent.prototype.exportVisualModel = function () { var iv = this.i.bg(); return (iv); }; /** * Returns a serialized copy of the exported visual model */ IgcXDatePickerComponent.prototype.exportSerializedVisualModel = function () { var iv = this.i.bw(); return (iv); }; Object.defineProperty(IgcXDatePickerComponent.prototype, "selectedValueChanged", { /** * Called when date is selected. */ get: function () { return this._selectedValueChanged; }, set: function (ev) { var _this = this; if (this._selectedValueChanged_wrapped !== null) { this.i.selectedValueChanged = delegateRemove(this.i.selectedValueChanged, this._selectedValueChanged_wrapped); this._selectedValueChanged_wrapped = null; this._selectedValueChanged = null; } this._selectedValueChanged = ev; this._selectedValueChanged_wrapped = function (o, e) { var outerArgs = new IgcSelectedValueChangedEventArgs(); outerArgs._provideImplementation(e); if (_this.beforeSelectedValueChanged) { _this.beforeSelectedValueChanged(_this, outerArgs); } if (_this._selectedValueChanged) { _this._selectedValueChanged(_this, outerArgs); } }; this.i.selectedValueChanged = delegateCombine(this.i.selectedValueChanged, this._selectedValueChanged_wrapped); ; }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "gotFocus", { get: function () { return this._gotFocus; }, set: function (ev) { var _this = this; if (this._gotFocus_wrapped !== null) { this.i.gotFocus = delegateRemove(this.i.gotFocus, this._gotFocus_wrapped); this._gotFocus_wrapped = null; this._gotFocus = null; } this._gotFocus = ev; this._gotFocus_wrapped = function (o, e) { var outerArgs = new IgcGotFocusEventArgs(); outerArgs._provideImplementation(e); if (_this.beforeGotFocus) { _this.beforeGotFocus(_this, outerArgs); } if (_this._gotFocus) { _this._gotFocus(_this, outerArgs); } }; this.i.gotFocus = delegateCombine(this.i.gotFocus, this._gotFocus_wrapped); ; }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "lostFocus", { get: function () { return this._lostFocus; }, set: function (ev) { var _this = this; if (this._lostFocus_wrapped !== null) { this.i.lostFocus = delegateRemove(this.i.lostFocus, this._lostFocus_wrapped); this._lostFocus_wrapped = null; this._lostFocus = null; } this._lostFocus = ev; this._lostFocus_wrapped = function (o, e) { var outerArgs = new IgcLostFocusEventArgs(); outerArgs._provideImplementation(e); if (_this.beforeLostFocus) { _this.beforeLostFocus(_this, outerArgs); } if (_this._lostFocus) { _this._lostFocus(_this, outerArgs); } }; this.i.lostFocus = delegateCombine(this.i.lostFocus, this._lostFocus_wrapped); ; }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "keyDown", { get: function () { return this._keyDown; }, set: function (ev) { var _this = this; if (this._keyDown_wrapped !== null) { this.i.keyDown = delegateRemove(this.i.keyDown, this._keyDown_wrapped); this._keyDown_wrapped = null; this._keyDown = null; } this._keyDown = ev; this._keyDown_wrapped = function (o, e) { var outerArgs = new IgcKeyEventArgs(); outerArgs._provideImplementation(e); if (_this.beforeKeyDown) { _this.beforeKeyDown(_this, outerArgs); } if (_this._keyDown) { _this._keyDown(_this, outerArgs); } }; this.i.keyDown = delegateCombine(this.i.keyDown, this._keyDown_wrapped); ; }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "changing", { get: function () { return this._changing; }, set: function (ev) { var _this = this; if (this._changing_wrapped !== null) { this.i.changing = delegateRemove(this.i.changing, this._changing_wrapped); this._changing_wrapped = null; this._changing = null; } this._changing = ev; this._changing_wrapped = function (o, e) { var outerArgs = new IgcInputChangeEventArgs(); outerArgs._provideImplementation(e); if (_this.beforeChanging) { _this.beforeChanging(_this, outerArgs); } if (_this._changing) { _this._changing(_this, outerArgs); } }; this.i.changing = delegateCombine(this.i.changing, this._changing_wrapped); ; }, enumerable: false, configurable: true }); Object.defineProperty(IgcXDatePickerComponent.prototype, "valueChange", { get: function () { return this._valueChange; }, set: function (ev) { var _this = this; if (this._valueChange_wrapped !== null) { this.i.propertyChanged = delegateRemove(this.i.propertyChanged, this._valueChange_wrapped); this._valueChange_wrapped = null; this._valueChange = null; } this._valueChange = ev; this._valueChange_wrapped = function (o, e) { var ext = _this.value; if (e.propertyName == 'Value') { if (_this.beforeValueChange) { _this.beforeValueChange(_this, ext); } if (_this._valueChange) { _this._valueChange(_this, ext); } } }; this.i.propertyChanged = delegateCombine(this.i.propertyChanged, this._valueChange_wrapped); }, enumerable: false, configurable: true }); IgcXDatePickerComponent._observedAttributesIgcXDatePickerComponent = null; IgcXDatePickerComponent.htmlTagName = "igc-x-date-picker"; IgcXDatePickerComponent._isElementRegistered = false; return IgcXDatePickerComponent; }(IgcHTMLElement)); export { IgcXDatePickerComponent };