igniteui-webcomponents 4.3.1 → 4.5.0-beta.1

package/components/common/util.d.ts

@@ -23,3 +23,41 @@ export declare function getOffset(element: HTMLElement, parent: HTMLElement): {
 };
 export declare function createCounter(): () => number;
 export declare function isLTR(element: HTMLElement): boolean;
+/**
+ * Builds a string from format specifiers and replacement parameters.
+ *
+ * @example
+ * ```typescript
+ * format('{0} says "{1}".', 'John', 'Hello'); // 'John says "Hello".'
+ * ```
+ */
+export declare function format(template: string, ...params: string[]): string;
+/**
+ * Parse the passed `value` as a number or return the `fallback` if it can't be done.
+ *
+ * @example
+ * ```typescript
+ * asNumber('5'); // 5
+ * asNumber('3.14'); // 3.14
+ * asNumber('five'); // 0
+ * asNUmber('five', 5); // 5
+ * ```
+ */
+export declare function asNumber(value: unknown, fallback?: number): number;
+/**
+ * Returns the value wrapped between the min and max bounds.
+ *
+ * If the value is greater than max, returns the min and vice-versa.
+ * If the value is between the bounds, it is returned unchanged.
+ *
+ * @example
+ * ```typescript
+ * wrap(1, 4, 2); // 2
+ * wrap(1, 4, 5); // 1
+ * wrap(1, 4, -1); // 4
+ * ```
+ */
+export declare function wrap(min: number, max: number, value: number): number;
+export declare function isDefined<T = unknown>(value: T): boolean;
+/** Convenient wrapper for `Array.some` */
+export declare function any<T>(arr: T[], predicate: keyof T | ((item: T, idx: number, array: T[]) => boolean)): boolean;

package/components/common/util.js

@@ -25,4 +25,38 @@ export function createCounter() {
 export function isLTR(element) {
     return getComputedStyle(element).getPropertyValue('direction') === 'ltr';
 }
+export function format(template, ...params) {
+    return template.replace(/{(\d+)}/g, function (match, index) {
+        if (index >= params.length) {
+            return match;
+        }
+        const value = params[index];
+        if (typeof value !== 'number' && !value) {
+            return '';
+        }
+        return value;
+    });
+}
+export function asNumber(value, fallback = 0) {
+    const parsed = parseFloat(value);
+    return isNaN(parsed) ? fallback : parsed;
+}
+export function wrap(min, max, value) {
+    if (value < min) {
+        return max;
+    }
+    else if (value > max) {
+        return min;
+    }
+    return value;
+}
+export function isDefined(value) {
+    return value !== undefined;
+}
+export function any(arr, predicate) {
+    if (predicate instanceof Function) {
+        return arr.some(predicate);
+    }
+    return arr.some((item) => Boolean(item[predicate]));
+}
 //# sourceMappingURL=util.js.map

package/components/common/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sourceRoot":"","sources":["../../../src/components/common/util.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,YAA0B,EAAE,EAAE;IACxD,OAAO,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC;SAC7B,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;SAClC,IAAI,CAAC,GAAG,CAAC,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,IAAY,EAAE,KAAa,EAAE,EAAE,CAAC,CAAC,IAAI,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC;AAE/E,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,MAAc,EAAE,GAAW,EAAE,GAAW,EAAE,EAAE,CAChE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;AAavC,MAAM,UAAU,SAAS,CAAC,OAAoB,EAAE,MAAmB;IACjE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IACrE,MAAM,EACJ,GAAG,EAAE,IAAI,EACT,IAAI,EAAE,KAAK,EACX,MAAM,EAAE,OAAO,EACf,KAAK,EAAE,MAAM,GACd,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;IAEnC,OAAO;QACL,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC;QAC3B,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC;QAC9B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;QACjC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,OAAO,CAAC;KACrC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,aAAa;IAC3B,IAAI,CAAC,GAAG,CAAC,CAAC;IACV,OAAO;QACL,CAAC,EAAE,CAAC;QACJ,OAAO,CAAC,CAAC;IACX,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,KAAK,CAAC,OAAoB;IACxC,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,WAAW,CAAC,KAAK,KAAK,CAAC;AAC3E,CAAC","sourcesContent":["export interface PartNameInfo {\n  readonly [name: string]: string | boolean | number;\n}\n\nexport const partNameMap = (partNameInfo: PartNameInfo) => {\n  return Object.keys(partNameInfo)\n    .filter((key) => partNameInfo[key])\n    .join(' ');\n};\n\nexport const asPercent = (part: number, whole: number) => (part / whole) * 100;\n\nexport const clamp = (number: number, min: number, max: number) =>\n  Math.max(min, Math.min(number, max));\n\n/**\n *\n * Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the\n * parent doesn't have to be positioned relative or absolute.\n *\n * Work around for the following issues in Chromium based browsers:\n *\n * https://bugs.chromium.org/p/chromium/issues/detail?id=1330819\n * https://bugs.chromium.org/p/chromium/issues/detail?id=1334556\n *\n */\nexport function getOffset(element: HTMLElement, parent: HTMLElement) {\n  const { top, left, bottom, right } = element.getBoundingClientRect();\n  const {\n    top: pTop,\n    left: pLeft,\n    bottom: pBottom,\n    right: pRight,\n  } = parent.getBoundingClientRect();\n\n  return {\n    top: Math.round(top - pTop),\n    left: Math.round(left - pLeft),\n    right: Math.round(right - pRight),\n    bottom: Math.round(bottom - pBottom),\n  };\n}\n\nexport function createCounter() {\n  let i = 0;\n  return function () {\n    i++;\n    return i;\n  };\n}\n\nexport function isLTR(element: HTMLElement) {\n  return getComputedStyle(element).getPropertyValue('direction') === 'ltr';\n}\n"]}
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../../../src/components/common/util.ts"],"names":[],"mappings":"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","sourcesContent":["export interface PartNameInfo {\n  readonly [name: string]: string | boolean | number;\n}\n\nexport const partNameMap = (partNameInfo: PartNameInfo) => {\n  return Object.keys(partNameInfo)\n    .filter((key) => partNameInfo[key])\n    .join(' ');\n};\n\nexport const asPercent = (part: number, whole: number) => (part / whole) * 100;\n\nexport const clamp = (number: number, min: number, max: number) =>\n  Math.max(min, Math.min(number, max));\n\n/**\n *\n * Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the\n * parent doesn't have to be positioned relative or absolute.\n *\n * Work around for the following issues in Chromium based browsers:\n *\n * https://bugs.chromium.org/p/chromium/issues/detail?id=1330819\n * https://bugs.chromium.org/p/chromium/issues/detail?id=1334556\n *\n */\nexport function getOffset(element: HTMLElement, parent: HTMLElement) {\n  const { top, left, bottom, right } = element.getBoundingClientRect();\n  const {\n    top: pTop,\n    left: pLeft,\n    bottom: pBottom,\n    right: pRight,\n  } = parent.getBoundingClientRect();\n\n  return {\n    top: Math.round(top - pTop),\n    left: Math.round(left - pLeft),\n    right: Math.round(right - pRight),\n    bottom: Math.round(bottom - pBottom),\n  };\n}\n\nexport function createCounter() {\n  let i = 0;\n  return function () {\n    i++;\n    return i;\n  };\n}\n\nexport function isLTR(element: HTMLElement) {\n  return getComputedStyle(element).getPropertyValue('direction') === 'ltr';\n}\n\n/**\n * Builds a string from format specifiers and replacement parameters.\n *\n * @example\n * ```typescript\n * format('{0} says \"{1}\".', 'John', 'Hello'); // 'John says \"Hello\".'\n * ```\n */\nexport function format(template: string, ...params: string[]): string {\n  return template.replace(/{(\\d+)}/g, function (match: string, index: number) {\n    if (index >= params.length) {\n      return match;\n    }\n\n    const value: string = params[index];\n    if (typeof value !== 'number' && !value) {\n      return '';\n    }\n    return value;\n  });\n}\n\n/**\n * Parse the passed `value` as a number or return the `fallback` if it can't be done.\n *\n * @example\n * ```typescript\n * asNumber('5'); // 5\n * asNumber('3.14'); // 3.14\n * asNumber('five'); // 0\n * asNUmber('five', 5); // 5\n * ```\n */\nexport function asNumber(value: unknown, fallback = 0) {\n  const parsed = parseFloat(value as string);\n  return isNaN(parsed) ? fallback : parsed;\n}\n\n/**\n * Returns the value wrapped between the min and max bounds.\n *\n * If the value is greater than max, returns the min and vice-versa.\n * If the value is between the bounds, it is returned unchanged.\n *\n * @example\n * ```typescript\n * wrap(1, 4, 2); // 2\n * wrap(1, 4, 5); // 1\n * wrap(1, 4, -1); // 4\n * ```\n */\nexport function wrap(min: number, max: number, value: number) {\n  if (value < min) {\n    return max;\n  } else if (value > max) {\n    return min;\n  }\n\n  return value;\n}\n\nexport function isDefined<T = unknown>(value: T) {\n  return value !== undefined;\n}\n\n/** Convenient wrapper for `Array.some` */\nexport function any<T>(\n  arr: T[],\n  predicate: keyof T | ((item: T, idx: number, array: T[]) => boolean)\n) {\n  if (predicate instanceof Function) {\n    return arr.some(predicate);\n  }\n  return arr.some((item) => Boolean(item[predicate]));\n}\n"]}

package/components/common/validators.d.ts

@@ -0,0 +1,45 @@
+type ValidatorHandler<T> = (host: T) => boolean;
+type ValidatorMessageFormat<T> = (host: T) => string;
+export interface Validator<T = any> {
+    key: keyof ValidityStateFlags;
+    message: string | ValidatorMessageFormat<T>;
+    isValid: ValidatorHandler<T>;
+}
+export declare const requiredValidator: Validator<{
+    required: boolean;
+    value?: string;
+}>;
+export declare const requiredNumberValidator: Validator<{
+    required: boolean;
+    value?: number | string;
+}>;
+export declare const requiredBooleanValidator: Validator<{
+    required: boolean;
+    checked: boolean;
+}>;
+export declare const minLengthValidator: Validator<{
+    minLength: number;
+    value: string;
+}>;
+export declare const maxLengthValidator: Validator<{
+    maxLength: number;
+    value: string;
+}>;
+export declare const patternValidator: Validator<{
+    pattern: string;
+    value: string;
+}>;
+export declare const minValidator: Validator<{
+    min: number | string;
+    value: number | string;
+}>;
+export declare const maxValidator: Validator<{
+    max: number | string;
+    value: number | string;
+}>;
+export declare const stepValidator: Validator<{
+    min: number | string;
+    step: number | string;
+    value: number | string;
+}>;
+export {};

package/components/common/validators.js

@@ -0,0 +1,54 @@
+import validatorMessages from './localization/validation-en.js';
+import { asNumber, format, isDefined } from './util.js';
+export const requiredValidator = {
+    key: 'valueMissing',
+    message: validatorMessages.required,
+    isValid: ({ required, value }) => (required ? !!value : true),
+};
+export const requiredNumberValidator = {
+    key: 'valueMissing',
+    message: validatorMessages.required,
+    isValid: ({ required, value }) => (required ? isDefined(value) : true),
+};
+export const requiredBooleanValidator = {
+    key: 'valueMissing',
+    message: validatorMessages.required,
+    isValid: ({ required, checked }) => (required ? checked : true),
+};
+export const minLengthValidator = {
+    key: 'tooShort',
+    message: ({ minLength }) => format(validatorMessages.minLength, `${minLength}`),
+    isValid: ({ minLength, value }) => minLength ? value.length >= minLength : true,
+};
+export const maxLengthValidator = {
+    key: 'tooLong',
+    message: ({ maxLength }) => format(validatorMessages.maxLength, `${maxLength}`),
+    isValid: ({ maxLength, value }) => maxLength ? value.length <= maxLength : true,
+};
+export const patternValidator = {
+    key: 'patternMismatch',
+    message: validatorMessages.pattern,
+    isValid: ({ pattern, value }) => pattern ? new RegExp(pattern, 'u').test(value) : true,
+};
+export const minValidator = {
+    key: 'rangeUnderflow',
+    message: ({ min }) => format(validatorMessages.min, `${min}`),
+    isValid: ({ min, value }) => isDefined(min)
+        ? isDefined(value) && asNumber(value) >= asNumber(min)
+        : true,
+};
+export const maxValidator = {
+    key: 'rangeOverflow',
+    message: ({ max }) => format(validatorMessages.max, `${max}`),
+    isValid: ({ max, value }) => isDefined(max)
+        ? isDefined(value) && asNumber(value) <= asNumber(max)
+        : true,
+};
+export const stepValidator = {
+    key: 'stepMismatch',
+    message: 'Value does not conform to step constraint',
+    isValid: ({ min, step, value }) => isDefined(step)
+        ? (asNumber(value) - asNumber(min)) % asNumber(step, 1) === 0
+        : true,
+};
+//# sourceMappingURL=validators.js.map

package/components/common/validators.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validators.js","sourceRoot":"","sources":["../../../src/components/common/validators.ts"],"names":[],"mappings":"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","sourcesContent":["import validatorMessages from './localization/validation-en.js';\nimport { asNumber, format, isDefined } from './util.js';\n\ntype ValidatorHandler<T> = (host: T) => boolean;\ntype ValidatorMessageFormat<T> = (host: T) => string;\n\nexport interface Validator<T = any> {\n  key: keyof ValidityStateFlags;\n  message: string | ValidatorMessageFormat<T>;\n  isValid: ValidatorHandler<T>;\n}\n\nexport const requiredValidator: Validator<{\n  required: boolean;\n  value?: string;\n}> = {\n  key: 'valueMissing',\n  message: validatorMessages.required,\n  isValid: ({ required, value }) => (required ? !!value : true),\n};\n\nexport const requiredNumberValidator: Validator<{\n  required: boolean;\n  value?: number | string;\n}> = {\n  key: 'valueMissing',\n  message: validatorMessages.required,\n  isValid: ({ required, value }) => (required ? isDefined(value) : true),\n};\n\nexport const requiredBooleanValidator: Validator<{\n  required: boolean;\n  checked: boolean;\n}> = {\n  key: 'valueMissing',\n  message: validatorMessages.required,\n  isValid: ({ required, checked }) => (required ? checked : true),\n};\n\nexport const minLengthValidator: Validator<{\n  minLength: number;\n  value: string;\n}> = {\n  key: 'tooShort',\n  message: ({ minLength }) =>\n    format(validatorMessages.minLength, `${minLength}`),\n  isValid: ({ minLength, value }) =>\n    minLength ? value.length >= minLength : true,\n};\n\nexport const maxLengthValidator: Validator<{\n  maxLength: number;\n  value: string;\n}> = {\n  key: 'tooLong',\n  message: ({ maxLength }) =>\n    format(validatorMessages.maxLength, `${maxLength}`),\n  isValid: ({ maxLength, value }) =>\n    maxLength ? value.length <= maxLength : true,\n};\n\nexport const patternValidator: Validator<{ pattern: string; value: string }> = {\n  key: 'patternMismatch',\n  message: validatorMessages.pattern,\n  isValid: ({ pattern, value }) =>\n    pattern ? new RegExp(pattern, 'u').test(value) : true,\n};\n\nexport const minValidator: Validator<{\n  min: number | string;\n  value: number | string;\n}> = {\n  key: 'rangeUnderflow',\n  message: ({ min }) => format(validatorMessages.min, `${min}`),\n  isValid: ({ min, value }) =>\n    isDefined(min)\n      ? isDefined(value) && asNumber(value) >= asNumber(min)\n      : true,\n};\n\nexport const maxValidator: Validator<{\n  max: number | string;\n  value: number | string;\n}> = {\n  key: 'rangeOverflow',\n  message: ({ max }) => format(validatorMessages.max, `${max}`),\n  isValid: ({ max, value }) =>\n    isDefined(max)\n      ? isDefined(value) && asNumber(value) <= asNumber(max)\n      : true,\n};\n\nexport const stepValidator: Validator<{\n  min: number | string;\n  step: number | string;\n  value: number | string;\n}> = {\n  key: 'stepMismatch',\n  message: 'Value does not conform to step constraint',\n  isValid: ({ min, step, value }) =>\n    isDefined(step)\n      ? (asNumber(value) - asNumber(min)) % asNumber(step, 1) === 0\n      : true,\n};\n"]}

package/components/date-time-input/date-time-input.d.ts

@@ -2,6 +2,7 @@ import { DatePartDeltas, DatePart } from './date-util.js';
 import { IgcMaskInputBaseComponent, MaskRange } from '../mask-input/mask-input-base.js';
 import { IgcInputEventMap } from '../input/input-base.js';
 import { AbstractConstructor } from '../common/mixins/constructor.js';
+import { Validator } from '../common/validators.js';
 export interface IgcDateTimeInputEventMap extends Omit<IgcInputEventMap, 'igcChange'> {
     igcChange: CustomEvent<Date | null>;
 }
@@ -30,6 +31,7 @@ declare const IgcDateTimeInputComponent_base: AbstractConstructor<import("../com
  */
 export default class IgcDateTimeInputComponent extends IgcDateTimeInputComponent_base {
     static readonly tagName = "igc-date-time-input";
+    protected validators: Validator<this>[];
     protected _defaultMask: string;
     protected _value: Date | null;
     private _oldValue;
@@ -48,16 +50,35 @@ export default class IgcDateTimeInputComponent extends IgcDateTimeInputComponent
      */
     get value(): Date | null;
     set value(val: Date | null);
+    protected updateFormValue(): void;
+    /**
+     * The minimum value required for the input to remain valid.
+     * @attr
+     */
+    min: Date;
+    /**
+     * The maximum value required for the input to remain valid.
+     * @attr
+     */
+    max: Date;
     /**
      * The minimum value required for the input to remain valid.
      * @attr min-value
+     *
+     * @deprecated - since v4.4.0
+     * Use the `min` property instead.
      */
-    minValue: Date | null;
+    get minValue(): Date;
+    set minValue(value: Date);
     /**
      * The maximum value required for the input to remain valid.
      * @attr max-value
+     *
+     * @deprecated - since v4.4.0
+     * Use the `max` property instead.
      */
-    maxValue: Date | null;
+    get maxValue(): Date;
+    set maxValue(value: Date);
     /**
      * Format to display the value in when not editing.
      * Defaults to the input format if not set.
@@ -82,18 +103,12 @@ export default class IgcDateTimeInputComponent extends IgcDateTimeInputComponent
     protected setDefaultMask(): void;
     protected setDisplayFormat(): void;
     protected promptChange(): void;
-    protected handleInvalidState(): void;
-    protected validate(): {} | null;
+    protected constraintChange(): void;
     private get hasDateParts();
     private get hasTimeParts();
     private get targetDatePart();
     private get datePartDeltas();
-    constructor();
     connectedCallback(): void;
-    /** Checks for validity of the control and shows the browser message if it's invalid. */
-    reportValidity(): boolean;
-    /** Check for validity of the control */
-    checkValidity(): boolean;
     /** Increments a date/time portion. */
     stepUp(datePart?: DatePart, delta?: number): void;
     /** Decrements a date/time portion. */
@@ -116,9 +131,13 @@ export default class IgcDateTimeInputComponent extends IgcDateTimeInputComponent
     private isComplete;
     private updateValue;
     private getNewPosition;
-    protected handleFocus(): void;
+    protected handleFocus(): Promise<void>;
     protected handleBlur(): void;
-    protected handleKeydown(e: KeyboardEvent): void;
+    protected handleHorizontalArrows(event: KeyboardEvent): void;
+    protected handleVerticalArrows(event: KeyboardEvent): Promise<void>;
+    protected handleSemicolon(event: KeyboardEvent): void;
+    protected keyMap: Map<string, ((event: KeyboardEvent) => void) | ((event: KeyboardEvent) => Promise<void>) | ((event: KeyboardEvent) => void)>;
+    protected handleKeydown(e: KeyboardEvent): Promise<void>;
     protected renderInput(): import("lit-html").TemplateResult<1>;
 }
 declare global {