@mk-kit/ui 0.42.0 → 0.44.0

package/fesm2022/mk-kit-ui-checkbox.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { inject, model, input, booleanAttribute, signal, computed, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
-import { MkFieldContext, mkUniqueId, mkValidatorChange } from '@mk-kit/ui/core';
+import { MkFieldContext, mkInjectFieldTouched, mkUniqueId, mkValidatorChange } from '@mk-kit/ui/core';
 
 /**
  * Checkbox — a themed checkbox built on a visually-hidden native
@@ -20,6 +20,8 @@ import { MkFieldContext, mkUniqueId, mkValidatorChange } from '@mk-kit/ui/core';
  */
 class MkCheckbox {
     field = inject(MkFieldContext, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     /** Two-way checked state. */
     checked = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
@@ -49,7 +51,7 @@ class MkCheckbox {
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     isRequired = computed(() => this.required() || (this.field?.isRequired() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (this.field?.hasError() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
     describedBy = computed(() => this.field?.describedBy() ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));

package/fesm2022/mk-kit-ui-checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"mk-kit-ui-checkbox.mjs","sources":["../../../projects/mk-kit/checkbox/checkbox.ts","../../../projects/mk-kit/checkbox/checkbox.html","../../../projects/mk-kit/checkbox/mk-kit-ui-checkbox.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  booleanAttribute,\n  computed,\n  forwardRef,\n  inject,\n  input,\n  model,\n  signal,\n} from '@angular/core';\nimport {\n  ControlValueAccessor,\n  NG_VALIDATORS,\n  NG_VALUE_ACCESSOR,\n  type AbstractControl,\n  type ValidationErrors,\n  type Validator,\n} from '@angular/forms';\nimport type { MkSize, MkTone } from '@mk-kit/ui/core';\nimport { MkFieldContext } from '@mk-kit/ui/core';\nimport { mkUniqueId } from '@mk-kit/ui/core';\nimport { mkValidatorChange } from '@mk-kit/ui/core';\n\n/**\n * Checkbox — a themed checkbox built on a visually-hidden native\n * `input[type=checkbox]` (so keyboard + form semantics are native) with a\n * custom box. Supports an `indeterminate` state and projects its label.\n *\n * Implements `ControlValueAccessor` with a two-way `checked` model, so it works\n * with `[(ngModel)]`, reactive forms and `[(checked)]`.\n *\n * ```html\n * <mk-checkbox [(ngModel)]=\"accepted\">Accept terms</mk-checkbox>\n * <mk-checkbox [(checked)]=\"all\" [indeterminate]=\"some()\" tone=\"success\">\n *   Select all\n * </mk-checkbox>\n * ```\n */\n@Component({\n  selector: 'mk-checkbox',\n  templateUrl: './checkbox.html',\n  styleUrl: './checkbox.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'mk-checkbox',\n    '[class.mk-checkbox--sm]': \"size() === 'sm'\",\n    '[class.mk-checkbox--md]': \"size() === 'md'\",\n    '[class.mk-checkbox--lg]': \"size() === 'lg'\",\n    '[class.mk-checkbox--checked]': 'checked()',\n    '[class.mk-checkbox--indeterminate]': 'indeterminate()',\n    '[class.mk-checkbox--disabled]': 'isDisabled()',\n    '[class.mk-checkbox--invalid]': 'isInvalid()',\n    '[attr.data-tone]': 'tone()',\n  },\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => MkCheckbox),\n      multi: true,\n    },\n    {\n      provide: NG_VALIDATORS,\n      useExisting: forwardRef(() => MkCheckbox),\n      multi: true,\n    },\n  ],\n})\nexport class MkCheckbox implements ControlValueAccessor, Validator {\n  private readonly field = inject(MkFieldContext, { optional: true });\n\n  /** Two-way checked state. */\n  readonly checked = model(false);\n  /** Two-way indeterminate (\"mixed\") state; cleared when the user toggles. */\n  readonly indeterminate = model(false);\n  /** Disable the control. */\n  readonly disabled = input(false, { transform: booleanAttribute });\n  /** Force the invalid visual + `aria-invalid` when used standalone. */\n  readonly invalid = input(false, { transform: booleanAttribute });\n  /** Mark required (adds `aria-required`). */\n  readonly required = input(false, { transform: booleanAttribute });\n  /** Control size. */\n  readonly size = input<MkSize>('md');\n  /** Semantic color tone for the checked box. */\n  readonly tone = input<MkTone>('primary');\n  /** Accessible label when no text content is projected. */\n  readonly ariaLabel = input<string>('', { alias: 'aria-label' });\n\n  private readonly cvaDisabled = signal(false);\n  private onChange: (value: boolean) => void = () => {};\n  protected onTouched: () => void = () => {};\n\n  readonly inputId = this.field?.controlId ?? mkUniqueId('mk-checkbox');\n\n  protected readonly isDisabled = computed(\n    () => this.disabled() || this.cvaDisabled(),\n  );\n  protected readonly isRequired = computed(\n    () => this.required() || (this.field?.isRequired() ?? false),\n  );\n  protected readonly isInvalid = computed(\n    () => this.invalid() || (this.field?.hasError() ?? false),\n  );\n  protected readonly describedBy = computed(\n    () => this.field?.describedBy() ?? null,\n  );\n\n  protected onNativeChange(event: Event): void {\n    const target = event.target as HTMLInputElement;\n    this.indeterminate.set(false);\n    this.checked.set(target.checked);\n    this.onChange(target.checked);\n  }\n\n  // --- ControlValueAccessor -------------------------------------------------\n  writeValue(value: unknown): void {\n    this.checked.set(!!value);\n  }\n  registerOnChange(fn: (value: boolean) => void): void {\n    this.onChange = fn;\n  }\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n  setDisabledState(isDisabled: boolean): void {\n    this.cvaDisabled.set(isDisabled);\n  }\n\n  // --- Validator ------------------------------------------------------------\n  private readonly validatorChange = mkValidatorChange(() => {\n    this.required();\n  });\n\n  /**\n   * Reports `required` for an unchecked box when `[required]` is set, so\n   * `required` on the element behaves like `Validators.requiredTrue`.\n   */\n  validate(control: AbstractControl): ValidationErrors | null {\n    if (!this.required()) return null;\n    return control.value === true ? null : { required: true };\n  }\n\n  registerOnValidatorChange(fn: () => void): void {\n    this.validatorChange.register(fn);\n  }\n}\n","<label class=\"mk-checkbox__root\">\n  <span class=\"mk-checkbox__control\">\n    <input\n      class=\"mk-checkbox__native\"\n      type=\"checkbox\"\n      [id]=\"inputId\"\n      [checked]=\"checked()\"\n      [indeterminate]=\"indeterminate()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"isRequired()\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-required]=\"isRequired() || null\"\n      [attr.aria-invalid]=\"isInvalid() || null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      (change)=\"onNativeChange($event)\"\n      (blur)=\"onTouched()\"\n    />\n    <span class=\"mk-checkbox__box\" aria-hidden=\"true\">\n      <span class=\"mk-checkbox__check\"></span>\n      <span class=\"mk-checkbox__dash\"></span>\n    </span>\n  </span>\n  <span class=\"mk-checkbox__text\"><ng-content /></span>\n</label>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"mk-kit-ui-checkbox.mjs","sources":["../../../projects/mk-kit/checkbox/checkbox.ts","../../../projects/mk-kit/checkbox/checkbox.html","../../../projects/mk-kit/checkbox/mk-kit-ui-checkbox.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  booleanAttribute,\n  computed,\n  forwardRef,\n  inject,\n  input,\n  model,\n  signal,\n} from '@angular/core';\nimport {\n  ControlValueAccessor,\n  NG_VALIDATORS,\n  NG_VALUE_ACCESSOR,\n  type AbstractControl,\n  type ValidationErrors,\n  type Validator,\n} from '@angular/forms';\nimport type { MkSize, MkTone } from '@mk-kit/ui/core';\nimport { MkFieldContext } from '@mk-kit/ui/core';\nimport { mkUniqueId } from '@mk-kit/ui/core';\nimport { mkValidatorChange } from '@mk-kit/ui/core';\nimport { mkInjectFieldTouched } from '@mk-kit/ui/core';\n\n/**\n * Checkbox — a themed checkbox built on a visually-hidden native\n * `input[type=checkbox]` (so keyboard + form semantics are native) with a\n * custom box. Supports an `indeterminate` state and projects its label.\n *\n * Implements `ControlValueAccessor` with a two-way `checked` model, so it works\n * with `[(ngModel)]`, reactive forms and `[(checked)]`.\n *\n * ```html\n * <mk-checkbox [(ngModel)]=\"accepted\">Accept terms</mk-checkbox>\n * <mk-checkbox [(checked)]=\"all\" [indeterminate]=\"some()\" tone=\"success\">\n *   Select all\n * </mk-checkbox>\n * ```\n */\n@Component({\n  selector: 'mk-checkbox',\n  templateUrl: './checkbox.html',\n  styleUrl: './checkbox.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'mk-checkbox',\n    '[class.mk-checkbox--sm]': \"size() === 'sm'\",\n    '[class.mk-checkbox--md]': \"size() === 'md'\",\n    '[class.mk-checkbox--lg]': \"size() === 'lg'\",\n    '[class.mk-checkbox--checked]': 'checked()',\n    '[class.mk-checkbox--indeterminate]': 'indeterminate()',\n    '[class.mk-checkbox--disabled]': 'isDisabled()',\n    '[class.mk-checkbox--invalid]': 'isInvalid()',\n    '[attr.data-tone]': 'tone()',\n  },\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => MkCheckbox),\n      multi: true,\n    },\n    {\n      provide: NG_VALIDATORS,\n      useExisting: forwardRef(() => MkCheckbox),\n      multi: true,\n    },\n  ],\n})\nexport class MkCheckbox implements ControlValueAccessor, Validator {\n  private readonly field = inject(MkFieldContext, { optional: true });\n  /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */\n  private readonly fieldTouched = mkInjectFieldTouched();\n\n  /** Two-way checked state. */\n  readonly checked = model(false);\n  /** Two-way indeterminate (\"mixed\") state; cleared when the user toggles. */\n  readonly indeterminate = model(false);\n  /** Disable the control. */\n  readonly disabled = input(false, { transform: booleanAttribute });\n  /** Force the invalid visual + `aria-invalid` when used standalone. */\n  readonly invalid = input(false, { transform: booleanAttribute });\n  /** Mark required (adds `aria-required`). */\n  readonly required = input(false, { transform: booleanAttribute });\n  /** Control size. */\n  readonly size = input<MkSize>('md');\n  /** Semantic color tone for the checked box. */\n  readonly tone = input<MkTone>('primary');\n  /** Accessible label when no text content is projected. */\n  readonly ariaLabel = input<string>('', { alias: 'aria-label' });\n\n  private readonly cvaDisabled = signal(false);\n  private onChange: (value: boolean) => void = () => {};\n  protected onTouched: () => void = () => {};\n\n  readonly inputId = this.field?.controlId ?? mkUniqueId('mk-checkbox');\n\n  protected readonly isDisabled = computed(\n    () => this.disabled() || this.cvaDisabled(),\n  );\n  protected readonly isRequired = computed(\n    () => this.required() || (this.field?.isRequired() ?? false),\n  );\n  protected readonly isInvalid = computed(\n    () => (this.invalid() && this.fieldTouched()) || (this.field?.hasError() ?? false),\n  );\n  protected readonly describedBy = computed(\n    () => this.field?.describedBy() ?? null,\n  );\n\n  protected onNativeChange(event: Event): void {\n    const target = event.target as HTMLInputElement;\n    this.indeterminate.set(false);\n    this.checked.set(target.checked);\n    this.onChange(target.checked);\n  }\n\n  // --- ControlValueAccessor -------------------------------------------------\n  writeValue(value: unknown): void {\n    this.checked.set(!!value);\n  }\n  registerOnChange(fn: (value: boolean) => void): void {\n    this.onChange = fn;\n  }\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n  setDisabledState(isDisabled: boolean): void {\n    this.cvaDisabled.set(isDisabled);\n  }\n\n  // --- Validator ------------------------------------------------------------\n  private readonly validatorChange = mkValidatorChange(() => {\n    this.required();\n  });\n\n  /**\n   * Reports `required` for an unchecked box when `[required]` is set, so\n   * `required` on the element behaves like `Validators.requiredTrue`.\n   */\n  validate(control: AbstractControl): ValidationErrors | null {\n    if (!this.required()) return null;\n    return control.value === true ? null : { required: true };\n  }\n\n  registerOnValidatorChange(fn: () => void): void {\n    this.validatorChange.register(fn);\n  }\n}\n","<label class=\"mk-checkbox__root\">\n  <span class=\"mk-checkbox__control\">\n    <input\n      class=\"mk-checkbox__native\"\n      type=\"checkbox\"\n      [id]=\"inputId\"\n      [checked]=\"checked()\"\n      [indeterminate]=\"indeterminate()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"isRequired()\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-required]=\"isRequired() || null\"\n      [attr.aria-invalid]=\"isInvalid() || null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      (change)=\"onNativeChange($event)\"\n      (blur)=\"onTouched()\"\n    />\n    <span class=\"mk-checkbox__box\" aria-hidden=\"true\">\n      <span class=\"mk-checkbox__check\"></span>\n      <span class=\"mk-checkbox__dash\"></span>\n    </span>\n  </span>\n  <span class=\"mk-checkbox__text\"><ng-content /></span>\n</label>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAyBA;;;;;;;;;;;;;;AAcG;MA8BU,UAAU,CAAA;IACJ,KAAK,GAAG,MAAM,CAAC,cAAc,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;;IAElD,YAAY,GAAG,oBAAoB,EAAE;;IAG7C,OAAO,GAAG,KAAK,CAAC,KAAK;gFAAC;;IAEtB,aAAa,GAAG,KAAK,CAAC,KAAK;sFAAC;;IAE5B,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;;IAExD,OAAO,GAAG,KAAK,CAAC,KAAK,+EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;;IAEvD,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;;IAExD,IAAI,GAAG,KAAK,CAAS,IAAI;6EAAC;;IAE1B,IAAI,GAAG,KAAK,CAAS,SAAS;6EAAC;;IAE/B,SAAS,GAAG,KAAK,CAAS,EAAE,iFAAI,KAAK,EAAE,YAAY,EAAA,CAAG;IAE9C,WAAW,GAAG,MAAM,CAAC,KAAK;oFAAC;AACpC,IAAA,QAAQ,GAA6B,MAAK,EAAE,CAAC;AAC3C,IAAA,SAAS,GAAe,MAAK,EAAE,CAAC;IAEjC,OAAO,GAAG,IAAI,CAAC,KAAK,EAAE,SAAS,IAAI,UAAU,CAAC,aAAa,CAAC;AAElD,IAAA,UAAU,GAAG,QAAQ,CACtC,MAAM,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,WAAW,EAAE;mFAC5C;IACkB,UAAU,GAAG,QAAQ,CACtC,MAAM,IAAI,CAAC,QAAQ,EAAE,KAAK,IAAI,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,KAAK,CAAC;mFAC7D;IACkB,SAAS,GAAG,QAAQ,CACrC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,IAAI,CAAC,YAAY,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,KAAK,CAAC;kFACnF;AACkB,IAAA,WAAW,GAAG,QAAQ,CACvC,MAAM,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,IAAI;oFACxC;AAES,IAAA,cAAc,CAAC,KAAY,EAAA;AACnC,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC;QAC7B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC;AAChC,QAAA,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC;IAC/B;;AAGA,IAAA,UAAU,CAAC,KAAc,EAAA;QACvB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;IAC3B;AACA,IAAA,gBAAgB,CAAC,EAA4B,EAAA;AAC3C,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;IACpB;AACA,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AACA,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAClC,QAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC;IAClC;;AAGiB,IAAA,eAAe,GAAG,iBAAiB,CAAC,MAAK;QACxD,IAAI,CAAC,QAAQ,EAAE;AACjB,IAAA,CAAC,CAAC;AAEF;;;AAGG;AACH,IAAA,QAAQ,CAAC,OAAwB,EAAA;AAC/B,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAAE,YAAA,OAAO,IAAI;AACjC,QAAA,OAAO,OAAO,CAAC,KAAK,KAAK,IAAI,GAAG,IAAI,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE;IAC3D;AAEA,IAAA,yBAAyB,CAAC,EAAc,EAAA;AACtC,QAAA,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,EAAE,CAAC;IACnC;uGA9EW,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,eAAA,EAAA,aAAA,EAAA,qBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,uBAAA,EAAA,iBAAA,EAAA,uBAAA,EAAA,iBAAA,EAAA,uBAAA,EAAA,iBAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,kCAAA,EAAA,iBAAA,EAAA,6BAAA,EAAA,cAAA,EAAA,4BAAA,EAAA,aAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,EAAA,cAAA,EAAA,aAAA,EAAA,EAAA,SAAA,EAbV;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,UAAU,CAAC;AACzC,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;AACD,YAAA;AACE,gBAAA,OAAO,EAAE,aAAa;AACtB,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,UAAU,CAAC;AACzC,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;AACF,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECnEH,y1BAwBA,EAAA,MAAA,EAAA,CAAA,06FAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FD6Ca,UAAU,EAAA,UAAA,EAAA,CAAA;kBA7BtB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,eAAA,EAGN,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,KAAK,EAAE,aAAa;AACpB,wBAAA,yBAAyB,EAAE,iBAAiB;AAC5C,wBAAA,yBAAyB,EAAE,iBAAiB;AAC5C,wBAAA,yBAAyB,EAAE,iBAAiB;AAC5C,wBAAA,8BAA8B,EAAE,WAAW;AAC3C,wBAAA,oCAAoC,EAAE,iBAAiB;AACvD,wBAAA,+BAA+B,EAAE,cAAc;AAC/C,wBAAA,8BAA8B,EAAE,aAAa;AAC7C,wBAAA,kBAAkB,EAAE,QAAQ;qBAC7B,EAAA,SAAA,EACU;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,gBAAgB,CAAC;AACzC,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;AACD,wBAAA;AACE,4BAAA,OAAO,EAAE,aAAa;AACtB,4BAAA,WAAW,EAAE,UAAU,CAAC,gBAAgB,CAAC;AACzC,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;AACF,qBAAA,EAAA,QAAA,EAAA,y1BAAA,EAAA,MAAA,EAAA,CAAA,06FAAA,CAAA,EAAA;;;AEnEH;;AAEG;;;;"}

package/fesm2022/mk-kit-ui-core.mjs

@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
 import { inject, DOCUMENT, DestroyRef, PLATFORM_ID, signal, computed, effect, Injectable, InjectionToken, ApplicationRef, EnvironmentInjector, createComponent, Injector, ElementRef, input, output, Directive, untracked } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
 import { Observable } from 'rxjs';
+import { FORM_FIELD } from '@angular/forms/signals';
 
 /** Shared primitive types used across mk-kit components. */
 
@@ -1446,6 +1447,9 @@ const MK_DEFAULT_I18N = {
     logFollow: 'Follow',
     logCopyAll: 'Copy log',
     logWrapLines: 'Wrap lines',
+    orgChartLabel: 'Organisation chart',
+    orgChartExpand: 'Expand {label}',
+    orgChartCollapse: 'Collapse {label}',
     chatLabel: 'Conversation',
     chatComposerLabel: 'Message',
     chatPlaceholder: 'Type a message…',
@@ -1581,6 +1585,11 @@ const MK_DEFAULT_I18N = {
     chartShare: 'Share',
     chartLabel: 'Label',
     qrCodeLabel: (text) => `QR code: ${text}`,
+    sortableListLabel: 'Sortable list',
+    filterColumn: (column) => `Filter ${column}`,
+    clearFilter: (column) => `Clear filter for ${column}`,
+    filterAny: 'All',
+    filterMin: 'Min',
     blockEditor: {
         addBlock: 'Add block',
         addFirstBlock: 'Add your first block',
@@ -1872,6 +1881,132 @@ function mkFirstErrorMessage(errors, strings, overrides) {
     return errors ? strings.unknown : null;
 }
 
+/**
+ * Converts Signal Forms errors to the reactive-forms `ValidationErrors` shape
+ * the `validation` i18n table is keyed by, so both form systems render the
+ * same messages. The built-in kinds map to Angular's classic keys and payloads
+ * (`minLength` → `minlength: { requiredLength }`, `minDate` → `mkMinDate`,
+ * …); any other kind is kept as-is with its payload spread into the value.
+ *
+ * @returns The error map in the order the errors were reported, or `null`
+ *   when the list is empty.
+ */
+function mkSignalErrorsToValidationErrors(errors) {
+    if (!errors || errors.length === 0)
+        return null;
+    const out = {};
+    for (const err of errors) {
+        const [key, payload] = toReactiveError(err);
+        if (!(key in out))
+            out[key] = payload;
+    }
+    return out;
+}
+function toReactiveError(error) {
+    const err = error;
+    const message = err.message;
+    switch (err.kind) {
+        case 'required':
+            return ['required', message ? { message } : true];
+        case 'email':
+            return ['email', message ? { message } : true];
+        case 'min':
+            return ['min', { min: err['min'], actual: err['actual'], message }];
+        case 'max':
+            return ['max', { max: err['max'], actual: err['actual'], message }];
+        case 'minLength':
+            return ['minlength', { requiredLength: err['minLength'], actualLength: err['actualLength'], message }];
+        case 'maxLength':
+            return ['maxlength', { requiredLength: err['maxLength'], actualLength: err['actualLength'], message }];
+        case 'pattern':
+            return ['pattern', { requiredPattern: String(err['pattern'] ?? ''), message }];
+        case 'minDate':
+            return ['mkMinDate', { min: err['minDate'], actual: err['actual'], message }];
+        case 'maxDate':
+            return ['mkMaxDate', { max: err['maxDate'], actual: err['actual'], message }];
+        default: {
+            // Custom / server / compat errors: keep the kind as the key and expose the
+            // payload (a `CompatValidationError` carries the reactive payload in
+            // `context`) so per-key `errorMessages` functions receive it.
+            const rest = {};
+            for (const key of Object.keys(err)) {
+                if (key !== 'kind' && key !== 'fieldTree' && key !== 'formField')
+                    rest[key] = err[key];
+            }
+            const context = rest['context'];
+            if (context && typeof context === 'object') {
+                return [err.kind, { ...context, message: message ?? context.message }];
+            }
+            return [err.kind, Object.keys(rest).length ? rest : message ? { message } : true];
+        }
+    }
+}
+/**
+ * Resolves the message for the first Signal Forms error on a field, the way
+ * `mkFirstErrorMessage` does for reactive forms.
+ *
+ * Lookup order: the field's `overrides` for that kind, then the `message` the
+ * schema attached to the error (`required(p.email, { message: '…' })`), then
+ * the i18n `validation` table, then the generic fallback.
+ *
+ * @returns The message, or `null` when there are no errors.
+ */
+function mkSignalErrorMessage(errors, strings, overrides) {
+    if (!errors || errors.length === 0)
+        return null;
+    const first = errors[0];
+    const [key, payload] = toReactiveError(first);
+    const override = overrides?.[key];
+    if (typeof override === 'string')
+        return override;
+    if (typeof override === 'function')
+        return override(payload);
+    if (typeof first.message === 'string' && first.message)
+        return first.message;
+    return mkFirstErrorMessage({ [key]: payload }, strings);
+}
+
+/**
+ * Touched-gate for a control's `invalid` input under Signal Forms.
+ *
+ * When a control is bound with the `[formField]` directive, Angular writes the
+ * field's `invalid()` state straight into the control's `invalid` input — from
+ * the first render, before the user has reached the field. mk-kit controls
+ * pass that input through this gate so the invalid visual (and `aria-invalid`)
+ * only shows once the field is touched or dirty, matching how `mk-form-field`
+ * reveals its message and how `submit()` (which marks every field touched)
+ * surfaces the remaining problems.
+ *
+ * Returns a signal that is always `true` for a control that is not bound with
+ * `[formField]`, so a standalone `[invalid]="true"` keeps working as before.
+ * Call it in a field initializer (an injection context):
+ *
+ * ```ts
+ * private readonly fieldTouched = mkInjectFieldTouched();
+ * protected readonly isInvalid = computed(
+ *   () => (this.invalid() && this.fieldTouched()) || (this.field?.hasError() ?? false),
+ * );
+ * ```
+ *
+ * The binding is looked up lazily, on first read: the `FormField` directive
+ * itself injects the element's `NG_VALUE_ACCESSOR` (the control) while it is
+ * created, so resolving it from the control's constructor would be circular.
+ */
+function mkInjectFieldTouched() {
+    const injector = inject(Injector);
+    let formField;
+    const resolve = () => formField === undefined
+        ? (formField = injector.get(FORM_FIELD, null, { self: true, optional: true }))
+        : formField;
+    return computed(() => {
+        const field = resolve();
+        if (!field)
+            return true;
+        const state = field.state();
+        return state.touched() || state.dirty();
+    });
+}
+
 /** Operators offered per field type, in menu order. */
 const MK_QUERY_OPERATORS = {
     string: ['contains', 'notContains', 'eq', 'neq', 'startsWith', 'endsWith', 'empty', 'notEmpty'],
@@ -2126,5 +2261,5 @@ function mkQueryToText(group, fields = [], i18n = MK_DEFAULT_I18N) {
  * Generated bundle index. Do not edit.
  */
 
-export { MK_BREAKPOINTS, MK_DEFAULT_BREAKPOINTS, MK_DEFAULT_DATE_NAMES, MK_DEFAULT_I18N, MK_DEFAULT_VALIDATION, MK_I18N, MK_OVERLAY_DATA, MK_QUERY_OPERATORS, MK_QUERY_UNARY, MkAnchoredPanel, MkBreakpointService, MkFieldContext, MkFocusTrap, MkLiveAnnouncer, MkOverlayRef, MkOverlayService, MkThemeService, mkComputeAnchoredPosition, mkCreateQueryGroup, mkCreateQueryRule, mkFirstErrorMessage, mkGetFocusable, mkHighlight, mkHighlightJson, mkIsQueryGroup, mkIsResponsive, mkQueryCompact, mkQueryIsEmpty, mkQueryOperatorLabel, mkQueryOperatorsFor, mkQueryRuleCount, mkQueryRuleIsComplete, mkQueryRuleMatches, mkQueryToPredicate, mkQueryToText, mkUniqueId, mkValidatorChange, provideMkI18n };
+export { MK_BREAKPOINTS, MK_DEFAULT_BREAKPOINTS, MK_DEFAULT_DATE_NAMES, MK_DEFAULT_I18N, MK_DEFAULT_VALIDATION, MK_I18N, MK_OVERLAY_DATA, MK_QUERY_OPERATORS, MK_QUERY_UNARY, MkAnchoredPanel, MkBreakpointService, MkFieldContext, MkFocusTrap, MkLiveAnnouncer, MkOverlayRef, MkOverlayService, MkThemeService, mkComputeAnchoredPosition, mkCreateQueryGroup, mkCreateQueryRule, mkFirstErrorMessage, mkGetFocusable, mkHighlight, mkHighlightJson, mkInjectFieldTouched, mkIsQueryGroup, mkIsResponsive, mkQueryCompact, mkQueryIsEmpty, mkQueryOperatorLabel, mkQueryOperatorsFor, mkQueryRuleCount, mkQueryRuleIsComplete, mkQueryRuleMatches, mkQueryToPredicate, mkQueryToText, mkSignalErrorMessage, mkSignalErrorsToValidationErrors, mkUniqueId, mkValidatorChange, provideMkI18n };
 //# sourceMappingURL=mk-kit-ui-core.mjs.map