igniteui-webcomponents 4.3.0 → 4.4.0

package/components/combo/themes/light/item/combo-item.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"combo-item.base.css.js","sourceRoot":"","sources":["../../../../../../src/components/combo/themes/light/item/combo-item.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmIvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n[hidden] {\n  display: none !important;\n}\n\n:host {\n  font-family: var(--ig-body-2-font-family, var(--ig-font-family));\n  font-size: var(--ig-body-2-font-size);\n  font-weight: var(--ig-body-2-font-weight);\n  font-style: var(--ig-body-2-font-style);\n  line-height: var(--ig-body-2-line-height);\n  letter-spacing: var(--ig-body-2-letter-spacing);\n  text-transform: var(--ig-body-2-text-transform);\n  margin-top: var(--ig-body-2-margin-top);\n  margin-bottom: var(--ig-body-2-margin-bottom);\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: start;\n      -ms-flex-pack: start;\n          justify-content: flex-start;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  width: 100%;\n  white-space: nowrap;\n  position: relative;\n  cursor: pointer;\n  color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n  outline-style: none;\n  padding-inline: max(var(--is-large, 1) * max(24px, -1 * 24px) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(12px, -1 * 12px) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(6px, -1 * 6px) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n  padding-block: max(var(--is-large, 1) * max(8px, -1 * 8px) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(4px, -1 * 4px) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(2px, -1 * 2px) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n}\n\n:host(:hover),\n:host([active]) {\n  background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n\n:host([selected]) {\n  background: hsla(var(--ig-secondary-100), var(--ig-secondary-a));\n  color: var(--ig-secondary-100-contrast);\n}\n\n:host([selected]:hover),\n:host([selected][active]) {\n  background: hsla(var(--ig-secondary-200), var(--ig-secondary-a));\n  color: var(--ig-secondary-200-contrast);\n}\n\n:host([disabled]) {\n  color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n  cursor: default;\n  pointer-events: none;\n}\n\n::slotted(*) {\n  font: inherit;\n}\n\n[part=content] {\n  white-space: nowrap;\n  -o-text-overflow: ellipsis;\n     text-overflow: ellipsis;\n  overflow: hidden;\n  display: block;\n  width: 100%;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n}\n\n[part=prefix],\n[part=suffix] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n}\n\n[name=prefix]::slotted(*) {\n  -webkit-margin-end: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(16px, -1 * 16px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(16px, -1 * 16px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n          margin-inline-end: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(16px, -1 * 16px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(16px, -1 * 16px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n\n[name=suffix]::slotted(*) {\n  -webkit-margin-start: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(16px, -1 * 16px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(16px, -1 * 16px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n          margin-inline-start: max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(16px, -1 * 16px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(16px, -1 * 16px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n\n:host {\n  --component-size: var(--ig-size, var(--ig-size-medium));\n  gap: 0.5rem;\n  border-radius: 0 !important;\n}\n\nigc-checkbox {\n  pointer-events: none;\n}`;\n"]}
+{"version":3,"file":"combo-item.base.css.js","sourceRoot":"","sources":["../../../../../../src/components/combo/themes/light/item/combo-item.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+GvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n\n:host {\n  font-family: var(--ig-body-2-font-family, var(--ig-font-family));\n  font-size: var(--ig-body-2-font-size);\n  font-weight: var(--ig-body-2-font-weight);\n  font-style: var(--ig-body-2-font-style);\n  line-height: var(--ig-body-2-line-height);\n  letter-spacing: var(--ig-body-2-letter-spacing);\n  text-transform: var(--ig-body-2-text-transform);\n  margin-top: var(--ig-body-2-margin-top);\n  margin-bottom: var(--ig-body-2-margin-bottom);\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: start;\n      -ms-flex-pack: start;\n          justify-content: flex-start;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  width: 100%;\n  white-space: nowrap;\n  position: relative;\n  cursor: pointer;\n  outline-style: none;\n  padding-inline: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(0.75rem, -1 * 0.75rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.375rem, -1 * 0.375rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n  padding-block: max(var(--is-large, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(0.125rem, -1 * 0.125rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n}\n\n:host([disabled]) {\n  cursor: default;\n  pointer-events: none;\n}\n\n::slotted(*) {\n  font: inherit;\n}\n\n[part=content] {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  display: block;\n  width: 100%;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n}\n\n[part=prefix],\n[part=suffix] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n}\n\n[name=prefix]::slotted(*) {\n  -webkit-margin-end: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n          margin-inline-end: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n\n[name=suffix]::slotted(*) {\n  -webkit-margin-start: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n          margin-inline-start: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n\n:host {\n  --component-size: var(--ig-size, var(--ig-size-medium));\n  gap: 0.5rem;\n}\n\nigc-checkbox {\n  pointer-events: none;\n}`;\n"]}

package/components/common/localization/validation-en.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+    readonly minLength: "Entry should be at least {0} character(s) long";
+    readonly maxLength: "Entry should be no more than {0} character(s) long";
+    readonly required: "This field is required";
+    readonly pattern: "Entry does not match the required pattern";
+    readonly mask: "All required positions should be filled";
+    readonly min: "A value of at least {0} should be entered";
+    readonly max: "A value no more than {0} should be entered";
+};
+export default _default;

package/components/common/localization/validation-en.js

@@ -0,0 +1,10 @@
+export default {
+    minLength: 'Entry should be at least {0} character(s) long',
+    maxLength: 'Entry should be no more than {0} character(s) long',
+    required: 'This field is required',
+    pattern: 'Entry does not match the required pattern',
+    mask: 'All required positions should be filled',
+    min: 'A value of at least {0} should be entered',
+    max: 'A value no more than {0} should be entered',
+};
+//# sourceMappingURL=validation-en.js.map

package/components/common/localization/validation-en.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-en.js","sourceRoot":"","sources":["../../../../src/components/common/localization/validation-en.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,SAAS,EAAE,gDAAgD;IAC3D,SAAS,EAAE,oDAAoD;IAC/D,QAAQ,EAAE,wBAAwB;IAClC,OAAO,EAAE,2CAA2C;IACpD,IAAI,EAAE,yCAAyC;IAC/C,GAAG,EAAE,2CAA2C;IAChD,GAAG,EAAE,4CAA4C;CACzC,CAAC","sourcesContent":["export default {\n  minLength: 'Entry should be at least {0} character(s) long',\n  maxLength: 'Entry should be no more than {0} character(s) long',\n  required: 'This field is required',\n  pattern: 'Entry does not match the required pattern',\n  mask: 'All required positions should be filled',\n  min: 'A value of at least {0} should be entered',\n  max: 'A value no more than {0} should be entered',\n} as const;\n"]}

package/components/common/mixins/event-emitter.js.map

@@ -1 +1 @@
-{"version":3,"file":"event-emitter.js","sourceRoot":"","sources":["../../../../src/components/common/mixins/event-emitter.ts"],"names":[],"mappings":"AAsCA,MAAM,UAAU,iBAAiB,CAC/B,UAAa;IAEb,MAAM,mBAAoB,SAAQ,UAAU;QAY1B,gBAAgB,CAC9B,IAAY,EACZ,QAA4C,EAC5C,OAA2C;YAE3C,KAAK,CAAC,gBAAgB,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;QAClD,CAAC;QAae,mBAAmB,CACjC,IAAY,EACZ,QAA4C,EAC5C,OAAwC;YAExC,KAAK,CAAC,mBAAmB,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;QACrD,CAAC;QAKM,SAAS,CACd,IAAO,EACP,aAAkC;YAElC,OAAO,IAAI,CAAC,aAAa,CACvB,IAAI,WAAW,CACb,IAAc,EACd,MAAM,CAAC,MAAM,CACX;gBACE,OAAO,EAAE,IAAI;gBACb,UAAU,EAAE,KAAK;gBACjB,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,EAAE;aACX,EACD,aAAa,CACd,CACF,CACF,CAAC;QACJ,CAAC;KACF;IACD,OAAO,mBAAgE,CAAC;AAC1E,CAAC","sourcesContent":["import { LitElement } from 'lit';\nimport type { AbstractConstructor, Constructor } from './constructor';\n\nexport type UnpackCustomEvent<T> = T extends CustomEvent<infer U> ? U : never;\n\nexport declare class EventEmitterInterface<E> {\n  public addEventListener<K extends keyof M, M extends E & HTMLElementEventMap>(\n    type: K,\n    listener: (this: HTMLElement, ev: M[K]) => any,\n    options?: boolean | AddEventListenerOptions\n  ): void;\n  public addEventListener(\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions\n  ): void;\n  public removeEventListener<\n    K extends keyof M,\n    M extends E & HTMLElementEventMap\n  >(\n    type: K,\n    listener: (this: HTMLElement, ev: M[K]) => any,\n    options?: boolean | EventListenerOptions\n  ): void;\n  public removeEventListener(\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | EventListenerOptions\n  ): void;\n  public emitEvent<K extends keyof E, D extends UnpackCustomEvent<E[K]>>(\n    type: K,\n    eventInitDict?: CustomEventInit<D>\n  ): boolean;\n}\n\nexport function EventEmitterMixin<E, T extends AbstractConstructor<LitElement>>(\n  superClass: T\n): AbstractConstructor<EventEmitterInterface<E>> & T;\nexport function EventEmitterMixin<E, T extends Constructor<LitElement>>(\n  superClass: T\n) {\n  class EventEmitterElement extends superClass {\n    /**\n     * @private\n     */\n    public override addEventListener<\n      K extends keyof M,\n      M extends E & HTMLElementEventMap\n    >(\n      type: K,\n      listener: (this: HTMLElement, ev: M[K]) => any,\n      options?: boolean | AddEventListenerOptions\n    ): void;\n    public override addEventListener(\n      type: string,\n      listener: EventListenerOrEventListenerObject,\n      options?: boolean | AddEventListenerOptions\n    ): void {\n      super.addEventListener(type, listener, options);\n    }\n\n    /**\n     * @private\n     */\n    public override removeEventListener<\n      K extends keyof M,\n      M extends E & HTMLElementEventMap\n    >(\n      type: K,\n      listener: (this: HTMLElement, ev: M[K]) => any,\n      options?: boolean | EventListenerOptions\n    ): void;\n    public override removeEventListener(\n      type: string,\n      listener: EventListenerOrEventListenerObject,\n      options?: boolean | EventListenerOptions\n    ): void {\n      super.removeEventListener(type, listener, options);\n    }\n\n    /**\n     * @private\n     */\n    public emitEvent<K extends keyof E, D extends UnpackCustomEvent<E[K]>>(\n      type: K,\n      eventInitDict?: CustomEventInit<D>\n    ): boolean {\n      return this.dispatchEvent(\n        new CustomEvent<D>(\n          type as string,\n          Object.assign(\n            {\n              bubbles: true,\n              cancelable: false,\n              composed: true,\n              detail: {},\n            },\n            eventInitDict\n          )\n        )\n      );\n    }\n  }\n  return EventEmitterElement as Constructor<EventEmitterInterface<E>> & T;\n}\n"]}
+{"version":3,"file":"event-emitter.js","sourceRoot":"","sources":["../../../../src/components/common/mixins/event-emitter.ts"],"names":[],"mappings":"AAsCA,MAAM,UAAU,iBAAiB,CAC/B,UAAa;IAEb,MAAM,mBAAoB,SAAQ,UAAU;QAY1B,gBAAgB,CAC9B,IAAY,EACZ,QAA4C,EAC5C,OAA2C;YAE3C,KAAK,CAAC,gBAAgB,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;QAClD,CAAC;QAae,mBAAmB,CACjC,IAAY,EACZ,QAA4C,EAC5C,OAAwC;YAExC,KAAK,CAAC,mBAAmB,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;QACrD,CAAC;QAKM,SAAS,CACd,IAAO,EACP,aAAkC;YAElC,OAAO,IAAI,CAAC,aAAa,CACvB,IAAI,WAAW,CACb,IAAc,EACd,MAAM,CAAC,MAAM,CACX;gBACE,OAAO,EAAE,IAAI;gBACb,UAAU,EAAE,KAAK;gBACjB,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,EAAE;aACX,EACD,aAAa,CACd,CACF,CACF,CAAC;QACJ,CAAC;KACF;IACD,OAAO,mBAAgE,CAAC;AAC1E,CAAC","sourcesContent":["import { LitElement } from 'lit';\nimport type { AbstractConstructor, Constructor } from './constructor';\n\nexport type UnpackCustomEvent<T> = T extends CustomEvent<infer U> ? U : never;\n\nexport declare class EventEmitterInterface<E> {\n  public addEventListener<K extends keyof M, M extends E & HTMLElementEventMap>(\n    type: K,\n    listener: (this: HTMLElement, ev: M[K]) => any,\n    options?: boolean | AddEventListenerOptions\n  ): void;\n  public addEventListener(\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions\n  ): void;\n  public removeEventListener<\n    K extends keyof M,\n    M extends E & HTMLElementEventMap,\n  >(\n    type: K,\n    listener: (this: HTMLElement, ev: M[K]) => any,\n    options?: boolean | EventListenerOptions\n  ): void;\n  public removeEventListener(\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | EventListenerOptions\n  ): void;\n  public emitEvent<K extends keyof E, D extends UnpackCustomEvent<E[K]>>(\n    type: K,\n    eventInitDict?: CustomEventInit<D>\n  ): boolean;\n}\n\nexport function EventEmitterMixin<E, T extends AbstractConstructor<LitElement>>(\n  superClass: T\n): AbstractConstructor<EventEmitterInterface<E>> & T;\nexport function EventEmitterMixin<E, T extends Constructor<LitElement>>(\n  superClass: T\n) {\n  class EventEmitterElement extends superClass {\n    /**\n     * @private\n     */\n    public override addEventListener<\n      K extends keyof M,\n      M extends E & HTMLElementEventMap,\n    >(\n      type: K,\n      listener: (this: HTMLElement, ev: M[K]) => any,\n      options?: boolean | AddEventListenerOptions\n    ): void;\n    public override addEventListener(\n      type: string,\n      listener: EventListenerOrEventListenerObject,\n      options?: boolean | AddEventListenerOptions\n    ): void {\n      super.addEventListener(type, listener, options);\n    }\n\n    /**\n     * @private\n     */\n    public override removeEventListener<\n      K extends keyof M,\n      M extends E & HTMLElementEventMap,\n    >(\n      type: K,\n      listener: (this: HTMLElement, ev: M[K]) => any,\n      options?: boolean | EventListenerOptions\n    ): void;\n    public override removeEventListener(\n      type: string,\n      listener: EventListenerOrEventListenerObject,\n      options?: boolean | EventListenerOptions\n    ): void {\n      super.removeEventListener(type, listener, options);\n    }\n\n    /**\n     * @private\n     */\n    public emitEvent<K extends keyof E, D extends UnpackCustomEvent<E[K]>>(\n      type: K,\n      eventInitDict?: CustomEventInit<D>\n    ): boolean {\n      return this.dispatchEvent(\n        new CustomEvent<D>(\n          type as string,\n          Object.assign(\n            {\n              bubbles: true,\n              cancelable: false,\n              composed: true,\n              detail: {},\n            },\n            eventInitDict\n          )\n        )\n      );\n    }\n  }\n  return EventEmitterElement as Constructor<EventEmitterInterface<E>> & T;\n}\n"]}

package/components/common/mixins/form-associated-required.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+import type { Constructor } from './constructor.js';
+import { FormAssociatedElementInterface } from './form-associated.js';
+export declare class FormRequiredInterface {
+    protected requiredChange(): void;
+    /**
+     * Makes the control a required field in a form context.
+     * @attr
+     */
+    required: boolean;
+}
+/**
+ * Turns the passed class element into a Form Associated Custom Element with
+ * additional `required` attribute.
+ */
+export declare function FormAssociatedRequiredMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<FormRequiredInterface & FormAssociatedElementInterface> & T;

package/components/common/mixins/form-associated-required.js

@@ -0,0 +1,29 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { property } from 'lit/decorators.js';
+import { watch } from '../decorators/watch.js';
+import { FormAssociatedMixin, } from './form-associated.js';
+export function FormAssociatedRequiredMixin(superClass) {
+    class FormAssociatedRequiredElement extends FormAssociatedMixin(superClass) {
+        constructor() {
+            super(...arguments);
+            this.required = false;
+        }
+        requiredChange() {
+            this.updateValidity();
+            this.invalid = !this.checkValidity();
+        }
+    }
+    __decorate([
+        property({ type: Boolean, reflect: true })
+    ], FormAssociatedRequiredElement.prototype, "required", void 0);
+    __decorate([
+        watch('required', { waitUntilFirstUpdate: true })
+    ], FormAssociatedRequiredElement.prototype, "requiredChange", null);
+    return FormAssociatedRequiredElement;
+}
+//# sourceMappingURL=form-associated-required.js.map

package/components/common/mixins/form-associated-required.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-associated-required.js","sourceRoot":"","sources":["../../../../src/components/common/mixins/form-associated-required.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAE/C,OAAO,EAEL,mBAAmB,GACpB,MAAM,sBAAsB,CAAC;AAgB9B,MAAM,UAAU,2BAA2B,CACzC,UAAa;IAEb,MAAM,6BAA8B,SAAQ,mBAAmB,CAAC,UAAU,CAAC;QAA3E;;YAMS,aAAQ,GAAG,KAAK,CAAC;QAO1B,CAAC;QAJW,cAAc;YACtB,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;QACvC,CAAC;KACF;IAPQ;QADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mEACnB;IAGd;QADT,KAAK,CAAC,UAAU,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;uEAIjD;IAGH,OAAO,6BAGJ,CAAC;AACN,CAAC","sourcesContent":["import { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { watch } from '../decorators/watch.js';\nimport type { Constructor } from './constructor.js';\nimport {\n  FormAssociatedElementInterface,\n  FormAssociatedMixin,\n} from './form-associated.js';\n\nexport declare class FormRequiredInterface {\n  protected requiredChange(): void;\n\n  /**\n   * Makes the control a required field in a form context.\n   * @attr\n   */\n  public required: boolean;\n}\n\n/**\n * Turns the passed class element into a Form Associated Custom Element with\n * additional `required` attribute.\n */\nexport function FormAssociatedRequiredMixin<T extends Constructor<LitElement>>(\n  superClass: T\n) {\n  class FormAssociatedRequiredElement extends FormAssociatedMixin(superClass) {\n    /**\n     * Makes the control a required field in a form context.\n     * @attr\n     */\n    @property({ type: Boolean, reflect: true })\n    public required = false;\n\n    @watch('required', { waitUntilFirstUpdate: true })\n    protected requiredChange() {\n      this.updateValidity();\n      this.invalid = !this.checkValidity();\n    }\n  }\n\n  return FormAssociatedRequiredElement as unknown as Constructor<\n    FormRequiredInterface & FormAssociatedElementInterface\n  > &\n    T;\n}\n"]}

package/components/common/mixins/form-associated.d.ts

@@ -0,0 +1,92 @@
+import { LitElement } from 'lit';
+import type { Constructor } from './constructor';
+import type { Validator } from '../validators.js';
+export declare class FormAssociatedElementInterface {
+    #private;
+    static readonly formAssociated: boolean;
+    protected validators: Validator[];
+    protected _disabled: boolean;
+    protected _invalid: boolean;
+    protected _dirty: boolean;
+    /**
+     * The default value of the control at "creation" time.
+     *
+     * @remarks
+     * This is set by default on `connectedCallback` through the `setDefaultValue` call.
+     * It expects the component to have either a `checked` or a `value` property and binds it to the initial value of the
+     * respective property.
+     *
+     * In use-cases where additional customization is required, make sure to override the `setDefaultValue` method.
+     */
+    protected _defaultValue: unknown;
+    /**
+     * Applies the {@link FormAssociatedElementInterface.invalid | `invalid`} attribute on the control and the associated styles
+     * if the element has completed the first update cycle or it has been interacted with by the user.
+     *
+     * Usually, it should be called after {@link FormAssociatedElementInterface.updateValidity | `updateValidity()`}
+     */
+    protected setInvalidState(): void;
+    /**
+     * Executes the component validators and updates the internal validity state.
+     */
+    protected updateValidity(message?: string): void;
+    /**
+     * Saves the initial value/checked state of the control.
+     *
+     * Called on connectedCallback.
+     */
+    protected setDefaultValue(): void;
+    /**
+     * Called when the parent form is reset.
+     *
+     * Restores the initially bound value/checked state of the control.
+     */
+    protected restoreDefaultValue(): void;
+    protected setFormValue(value: string | File | FormData | null, state?: string | File | FormData | null | undefined): void;
+    protected setValidity(flags?: ValidityStateFlags | undefined, message?: string | undefined, anchor?: HTMLElement | undefined): void;
+    protected formResetCallback(): void;
+    protected formDisabledCallback(state: boolean): void;
+    protected formStateRestoreCallback(state: string | FormData | File, mode: 'autocomplete' | 'restore'): void;
+    /**
+     * The disabled state of the component
+     * @attr [disabled=false]
+     */
+    disabled: boolean;
+    /**
+     * Control the validity of the control.
+     * @attr
+     */
+    invalid: boolean;
+    /**
+     * The name attribute of the control.
+     * @attr
+     */
+    name: string;
+    /** Returns the HTMLFormElement associated with this element. */
+    get form(): HTMLFormElement | null;
+    /**
+     * Returns a ValidityState object which represents the different validity states
+     * the element can be in, with respect to constraint validation.
+     */
+    get validity(): ValidityState;
+    /** A string containing the validation message of this element. */
+    get validationMessage(): string;
+    /**
+     * A boolean value which returns true if the element is a submittable element
+     * that is a candidate for constraint validation.
+     */
+    get willValidate(): boolean;
+    /** Checks for validity of the control and emits the invalid event if it invalid. */
+    checkValidity(): boolean;
+    /** Checks for validity of the control and shows the browser message if it invalid. */
+    reportValidity(): boolean;
+    /**
+     * Sets a custom validation message for the control.
+     * As long as `message` is not empty, the control is considered invalid.
+     */
+    setCustomValidity(message: string): void;
+}
+/**
+ * Turns the passed class element into a Form Associated Custom Element.
+ */
+export declare function FormAssociatedMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<FormAssociatedElementInterface> & T;

package/components/common/mixins/form-associated.js

@@ -0,0 +1,151 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+import { property } from 'lit/decorators.js';
+export function FormAssociatedMixin(superClass) {
+    var _FormAssociatedElement_internals;
+    class FormAssociatedElement extends superClass {
+        get form() {
+            return __classPrivateFieldGet(this, _FormAssociatedElement_internals, "f").form;
+        }
+        get validity() {
+            return __classPrivateFieldGet(this, _FormAssociatedElement_internals, "f").validity;
+        }
+        get validationMessage() {
+            return __classPrivateFieldGet(this, _FormAssociatedElement_internals, "f").validationMessage;
+        }
+        get willValidate() {
+            return __classPrivateFieldGet(this, _FormAssociatedElement_internals, "f").willValidate;
+        }
+        get disabled() {
+            return this._disabled;
+        }
+        set disabled(value) {
+            const prev = this._disabled;
+            this._disabled = value;
+            this.toggleAttribute('disabled', Boolean(this._disabled));
+            this.requestUpdate('disabled', prev);
+        }
+        get invalid() {
+            return this._invalid;
+        }
+        set invalid(value) {
+            const prev = this._invalid;
+            this._invalid = value;
+            this.toggleAttribute('invalid', Boolean(this._invalid));
+            this.requestUpdate('invalid', prev);
+        }
+        constructor(...args) {
+            super(args);
+            _FormAssociatedElement_internals.set(this, void 0);
+            this.validators = [];
+            this._disabled = false;
+            this._invalid = false;
+            this._dirty = false;
+            this.handleInvalid = (event) => {
+                event.preventDefault();
+                this.invalid = true;
+            };
+            __classPrivateFieldSet(this, _FormAssociatedElement_internals, this.attachInternals(), "f");
+            this.addEventListener('invalid', this.handleInvalid);
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this._dirty = false;
+            this.setDefaultValue();
+        }
+        setDefaultValue() {
+            if ('checked' in this) {
+                this._defaultValue = this.checked;
+            }
+            else if ('value' in this) {
+                this._defaultValue = this.value;
+            }
+        }
+        restoreDefaultValue() {
+            if ('checked' in this) {
+                this.checked = this._defaultValue;
+            }
+            else if ('value' in this) {
+                this.value = this._defaultValue;
+            }
+        }
+        setFormValue(value, state) {
+            __classPrivateFieldGet(this, _FormAssociatedElement_internals, "f").setFormValue(value, state || value);
+        }
+        setValidity(flags, message, anchor) {
+            __classPrivateFieldGet(this, _FormAssociatedElement_internals, "f").setValidity(flags, message, anchor);
+        }
+        formResetCallback() {
+            this.restoreDefaultValue();
+            this._dirty = false;
+            this.performUpdate();
+            this.invalid = false;
+        }
+        formDisabledCallback(state) {
+            this._disabled = state;
+            this.requestUpdate();
+        }
+        updateValidity(message) {
+            const validity = {};
+            let validationMessage = '';
+            for (const validator of this.validators) {
+                const isValid = validator.isValid(this);
+                validity[validator.key] = !isValid;
+                if (!isValid) {
+                    validationMessage =
+                        typeof validator.message === 'function'
+                            ? validator.message(this)
+                            : validator.message;
+                }
+            }
+            if (message) {
+                validity.customError = true;
+                validationMessage = message;
+            }
+            __classPrivateFieldGet(this, _FormAssociatedElement_internals, "f").setValidity(validity, validationMessage);
+        }
+        setInvalidState() {
+            if (this.hasUpdated || this._dirty) {
+                this.invalid = !this.checkValidity();
+            }
+        }
+        reportValidity() {
+            return __classPrivateFieldGet(this, _FormAssociatedElement_internals, "f").reportValidity();
+        }
+        checkValidity() {
+            return __classPrivateFieldGet(this, _FormAssociatedElement_internals, "f").checkValidity();
+        }
+        setCustomValidity(message) {
+            this.updateValidity(message);
+            this.invalid = !this.checkValidity();
+        }
+    }
+    _FormAssociatedElement_internals = new WeakMap();
+    FormAssociatedElement.formAssociated = true;
+    __decorate([
+        property({ reflect: true })
+    ], FormAssociatedElement.prototype, "name", void 0);
+    __decorate([
+        property({ type: Boolean, reflect: true })
+    ], FormAssociatedElement.prototype, "disabled", null);
+    __decorate([
+        property({ type: Boolean, reflect: true })
+    ], FormAssociatedElement.prototype, "invalid", null);
+    return FormAssociatedElement;
+}
+//# sourceMappingURL=form-associated.js.map

package/components/common/mixins/form-associated.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-associated.js","sourceRoot":"","sources":["../../../../src/components/common/mixins/form-associated.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport type { Constructor } from './constructor';\nimport type { Validator } from '../validators.js';\n\nexport declare class FormAssociatedElementInterface {\n  public static readonly formAssociated: boolean;\n\n  #internals: ElementInternals;\n  protected validators: Validator[];\n  protected _disabled: boolean;\n  protected _invalid: boolean;\n  protected _dirty: boolean;\n\n  /**\n   * The default value of the control at \"creation\" time.\n   *\n   * @remarks\n   * This is set by default on `connectedCallback` through the `setDefaultValue` call.\n   * It expects the component to have either a `checked` or a `value` property and binds it to the initial value of the\n   * respective property.\n   *\n   * In use-cases where additional customization is required, make sure to override the `setDefaultValue` method.\n   */\n  protected _defaultValue: unknown;\n\n  /**\n   * Applies the {@link FormAssociatedElementInterface.invalid | `invalid`} attribute on the control and the associated styles\n   * if the element has completed the first update cycle or it has been interacted with by the user.\n   *\n   * Usually, it should be called after {@link FormAssociatedElementInterface.updateValidity | `updateValidity()`}\n   */\n  protected setInvalidState(): void;\n\n  /**\n   * Executes the component validators and updates the internal validity state.\n   */\n  protected updateValidity(message?: string): void;\n\n  /**\n   * Saves the initial value/checked state of the control.\n   *\n   * Called on connectedCallback.\n   */\n  protected setDefaultValue(): void;\n\n  /**\n   * Called when the parent form is reset.\n   *\n   * Restores the initially bound value/checked state of the control.\n   */\n  protected restoreDefaultValue(): void;\n\n  protected setFormValue(\n    value: string | File | FormData | null,\n    state?: string | File | FormData | null | undefined\n  ): void;\n  protected setValidity(\n    flags?: ValidityStateFlags | undefined,\n    message?: string | undefined,\n    anchor?: HTMLElement | undefined\n  ): void;\n\n  protected formResetCallback(): void;\n  protected formDisabledCallback(state: boolean): void;\n  protected formStateRestoreCallback(\n    state: string | FormData | File,\n    mode: 'autocomplete' | 'restore'\n  ): void;\n\n  /**\n   * The disabled state of the component\n   * @attr [disabled=false]\n   */\n  public disabled: boolean;\n\n  /**\n   * Control the validity of the control.\n   * @attr\n   */\n  public invalid: boolean;\n\n  /**\n   * The name attribute of the control.\n   * @attr\n   */\n  public name: string;\n\n  /** Returns the HTMLFormElement associated with this element. */\n  public get form(): HTMLFormElement | null;\n\n  /**\n   * Returns a ValidityState object which represents the different validity states\n   * the element can be in, with respect to constraint validation.\n   */\n  public get validity(): ValidityState;\n\n  /** A string containing the validation message of this element. */\n  public get validationMessage(): string;\n\n  /**\n   * A boolean value which returns true if the element is a submittable element\n   * that is a candidate for constraint validation.\n   */\n  public get willValidate(): boolean;\n\n  /** Checks for validity of the control and emits the invalid event if it invalid. */\n  public checkValidity(): boolean;\n\n  /** Checks for validity of the control and shows the browser message if it invalid. */\n  public reportValidity(): boolean;\n\n  /**\n   * Sets a custom validation message for the control.\n   * As long as `message` is not empty, the control is considered invalid.\n   */\n  public setCustomValidity(message: string): void;\n}\n\n/**\n * Turns the passed class element into a Form Associated Custom Element.\n */\nexport function FormAssociatedMixin<T extends Constructor<LitElement>>(\n  superClass: T\n) {\n  class FormAssociatedElement extends superClass {\n    public static readonly formAssociated = true;\n\n    #internals: ElementInternals;\n    protected validators: Validator[] = [];\n    protected _disabled = false;\n    protected _invalid = false;\n    protected _dirty = false;\n\n    /**\n     * The default value of the control at \"creation\" time.\n     *\n     * @remarks\n     * This is set by default on `connectedCallback` through the `setDefaultValue` call.\n     * It expects the component to have either a `checked` or a `value` property and binds it to the initial value of the\n     * respective property.\n     *\n     * In use-cases where additional customization is required, make sure to override the `setDefaultValue` method.\n     */\n    protected _defaultValue: unknown;\n\n    /**\n     * The name attribute of the control.\n     * @attr\n     */\n    @property({ reflect: true })\n    public name!: string;\n\n    /** Returns the HTMLFormElement associated with this element. */\n    public get form() {\n      return this.#internals.form;\n    }\n\n    /**\n     * Returns a ValidityState object which represents the different validity states\n     * the element can be in, with respect to constraint validation.\n     */\n    public get validity() {\n      return this.#internals.validity;\n    }\n\n    /** A string containing the validation message of this element. */\n    public get validationMessage() {\n      return this.#internals.validationMessage;\n    }\n\n    /**\n     * A boolean value which returns true if the element is a submittable element\n     * that is a candidate for constraint validation.\n     */\n    public get willValidate() {\n      return this.#internals.willValidate;\n    }\n\n    /**\n     * The disabled state of the component\n     * @attr [disabled=false]\n     */\n    @property({ type: Boolean, reflect: true })\n    public get disabled() {\n      return this._disabled;\n    }\n\n    public set disabled(value: boolean) {\n      const prev = this._disabled;\n      this._disabled = value;\n      this.toggleAttribute('disabled', Boolean(this._disabled));\n      this.requestUpdate('disabled', prev);\n    }\n\n    /**\n     * Control the validity of the control.\n     * @attr [invalid=false]\n     */\n    @property({ type: Boolean, reflect: true })\n    public get invalid() {\n      return this._invalid;\n    }\n\n    public set invalid(value: boolean) {\n      const prev = this._invalid;\n      this._invalid = value;\n      this.toggleAttribute('invalid', Boolean(this._invalid));\n      this.requestUpdate('invalid', prev);\n    }\n\n    constructor(...args: any[]) {\n      super(args);\n      this.#internals = this.attachInternals();\n      this.addEventListener('invalid', this.handleInvalid);\n    }\n\n    public override connectedCallback(): void {\n      super.connectedCallback();\n      this._dirty = false;\n      this.setDefaultValue();\n    }\n\n    /**\n     * Saves the initial value/checked state of the control.\n     *\n     * Called on connectedCallback.\n     */\n    protected setDefaultValue() {\n      if ('checked' in this) {\n        this._defaultValue = this.checked;\n      } else if ('value' in this) {\n        this._defaultValue = this.value;\n      }\n    }\n\n    /**\n     * Called when the parent form is reset.\n     *\n     * Restores the initially bound value/checked state of the control.\n     */\n    protected restoreDefaultValue() {\n      if ('checked' in this) {\n        this.checked = this._defaultValue;\n      } else if ('value' in this) {\n        this.value = this._defaultValue;\n      }\n    }\n\n    protected handleInvalid = (event: Event) => {\n      event.preventDefault();\n      this.invalid = true;\n    };\n\n    protected setFormValue(\n      value: string | File | FormData | null,\n      state?: string | File | FormData | null | undefined\n    ) {\n      this.#internals.setFormValue(value, state || value);\n    }\n\n    protected setValidity(\n      flags?: ValidityStateFlags | undefined,\n      message?: string | undefined,\n      anchor?: HTMLElement | undefined\n    ) {\n      this.#internals.setValidity(flags, message, anchor);\n    }\n\n    protected formResetCallback() {\n      this.restoreDefaultValue();\n      this._dirty = false;\n\n      // Apply any changes happening during form reset synchronously\n      this.performUpdate();\n\n      this.invalid = false;\n    }\n\n    protected formDisabledCallback(state: boolean) {\n      this._disabled = state;\n      this.requestUpdate();\n    }\n\n    /**\n     * Executes the component validators and updates the internal validity state.\n     */\n    protected updateValidity(message?: string) {\n      const validity: ValidityStateFlags = {};\n      let validationMessage = '';\n\n      for (const validator of this.validators) {\n        const isValid = validator.isValid(this);\n\n        validity[validator.key] = !isValid;\n\n        if (!isValid) {\n          validationMessage =\n            typeof validator.message === 'function'\n              ? validator.message(this)\n              : validator.message;\n        }\n      }\n\n      if (message) {\n        validity.customError = true;\n        validationMessage = message;\n      }\n\n      this.#internals.setValidity(validity, validationMessage);\n    }\n\n    /**\n     * Applies the {@link FormAssociatedElementInterface.invalid | `invalid`} attribute on the control and the associated styles\n     * if the element has completed the first update cycle or it has been interacted with by the user.\n     *\n     * Usually, it should be called after {@link FormAssociatedElementInterface.updateValidity | `updateValidity()`}\n     */\n    protected setInvalidState() {\n      if (this.hasUpdated || this._dirty) {\n        this.invalid = !this.checkValidity();\n      }\n    }\n\n    /** Checks for validity of the control and shows the browser message if it invalid. */\n    public reportValidity() {\n      return this.#internals.reportValidity();\n    }\n\n    /** Checks for validity of the control and emits the invalid event if it invalid. */\n    public checkValidity() {\n      return this.#internals.checkValidity();\n    }\n\n    /**\n     * Sets a custom validation message for the control.\n     * As long as `message` is not empty, the control is considered invalid.\n     */\n    public setCustomValidity(message: string) {\n      this.updateValidity(message);\n      this.invalid = !this.checkValidity();\n    }\n  }\n\n  return FormAssociatedElement as unknown as Constructor<FormAssociatedElementInterface> &\n    T;\n}\n"]}

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":"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;AAUD,MAAM,UAAU,MAAM,CAAC,QAAgB,EAAE,GAAG,MAAgB;IAC1D,OAAO,QAAQ,CAAC,OAAO,CAAC,UAAU,EAAE,UAAU,KAAa,EAAE,KAAa;QACxE,IAAI,KAAK,IAAI,MAAM,CAAC,MAAM,EAAE;YAC1B,OAAO,KAAK,CAAC;SACd;QAED,MAAM,KAAK,GAAW,MAAM,CAAC,KAAK,CAAC,CAAC;QACpC,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,KAAK,EAAE;YACvC,OAAO,EAAE,CAAC;SACX;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CAAC;AACL,CAAC;AAaD,MAAM,UAAU,QAAQ,CAAC,KAAc,EAAE,QAAQ,GAAG,CAAC;IACnD,MAAM,MAAM,GAAG,UAAU,CAAC,KAAe,CAAC,CAAC;IAC3C,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;AAC3C,CAAC;AAeD,MAAM,UAAU,IAAI,CAAC,GAAW,EAAE,GAAW,EAAE,KAAa;IAC1D,IAAI,KAAK,GAAG,GAAG,EAAE;QACf,OAAO,GAAG,CAAC;KACZ;SAAM,IAAI,KAAK,GAAG,GAAG,EAAE;QACtB,OAAO,GAAG,CAAC;KACZ;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,UAAU,SAAS,CAAc,KAAQ;IAC7C,OAAO,KAAK,KAAK,SAAS,CAAC;AAC7B,CAAC;AAGD,MAAM,UAAU,GAAG,CACjB,GAAQ,EACR,SAAoE;IAEpE,IAAI,SAAS,YAAY,QAAQ,EAAE;QACjC,OAAO,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KAC5B;IACD,OAAO,GAAG,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AACtD,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\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"]}