@besaitech/ng-design-system 0.0.61 → 0.0.62

package/fesm2022/besaitech-ng-design-system.mjs

@@ -2177,14 +2177,41 @@ const SIZES$a = {
  * first accepted language — so the field "opens on the language you are working in". Empty translations are
  * pruned from the emitted value, keeping the stored map clean.
  *
+ * Mark a must-fill language (a store's main language) with `[requiredLanguages]`, show a per-language
+ * `[maxLength]` counter, and an `[error]` like `sds-input`.
+ *
  * Implements ControlValueAccessor over the map — use with reactive forms or `[(ngModel)]`:
  * `<sds-localized-input [languages]="['fr','nl','en']" [(ngModel)]="title" />`.
  */
 class SdsLocalizedInput {
-    inputId = `sds-localized-input-${nextId$l++}`;
+    autoId = `sds-localized-input-${nextId$l++}`;
+    /** The native field's id; a generated one when empty (set it to pair an external `<label for>`). */
+    inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : []));
+    /** The native field's id: {@link inputId} or the generated one. */
+    fieldId = computed(() => this.inputId() || this.autoId, ...(ngDevMode ? [{ debugName: "fieldId" }] : []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** Accessible name when there is no visible {@link label} (a dense row in a table or list). */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    /** Error message under the field (danger frame + `aria-invalid`); replaces the hint. */
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
+    /** Mark the field invalid (danger frame + `aria-invalid`) without showing an [error] message. */
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Mark the field required: an asterisk after the [label] and `aria-required`. It does not validate — keep your
+     * own validator (e.g. "the main language is filled").
+     */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Languages that must be filled (e.g. a store's main language): while empty, their switcher dot shows in the
+     * danger colour and its title says {@link requiredLanguageLabel}. Display only — validate in the form.
+     */
+    requiredLanguages = input([], ...(ngDevMode ? [{ debugName: "requiredLanguages" }] : []));
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /** Maximum characters per language (native `maxlength` on the field). 0 = no limit. */
+    maxLength = input(0, ...(ngDevMode ? [{ debugName: "maxLength", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /** Show a character counter (of the language being edited) under the field; implied by {@link maxLength}. */
+    showCount = input(false, ...(ngDevMode ? [{ debugName: "showCount", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /** The accepted language codes, in display order (e.g. `['fr','nl','en']`). */
     languages = input([], ...(ngDevMode ? [{ debugName: "languages" }] : []));
     /** Language to pre-select; used when it is one of {@link languages}, else the first accepted language. */
@@ -2200,6 +2227,8 @@ class SdsLocalizedInput {
      */
     languageSwitcherLabel = input('Language', ...(ngDevMode ? [{ debugName: "languageSwitcherLabel" }] : []));
     untranslatedLabel = input('not translated yet', ...(ngDevMode ? [{ debugName: "untranslatedLabel" }] : []));
+    /** Title suffix of a required language that is still empty (see {@link requiredLanguages}). */
+    requiredLanguageLabel = input('required', ...(ngDevMode ? [{ debugName: "requiredLanguageLabel" }] : []));
     valueMap = signal({}, ...(ngDevMode ? [{ debugName: "valueMap" }] : []));
     /** Language chosen via the switcher; null means "follow currentLanguage / the first language". */
     manual = signal(null, ...(ngDevMode ? [{ debugName: "manual" }] : []));
@@ -2207,11 +2236,25 @@ class SdsLocalizedInput {
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     wrapperClasses = computed(() => {
         const parts = [SIZES$a[this.size()]];
+        const danger = !!this.error() || this.invalid();
         parts.push(this.isDisabled()
             ? 'border-border opacity-60 cursor-not-allowed'
-            : 'border-border focus-within:border-brand-500 focus-within:ring-2 focus-within:ring-brand-500/25');
+            : danger
+                ? 'border-danger focus-within:ring-2 focus-within:ring-danger/30'
+                : 'border-border focus-within:border-brand-500 focus-within:ring-2 focus-within:ring-brand-500/25');
         return parts.join(' ');
     }, ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : []));
+    hasCounter = computed(() => this.showCount() || this.maxLength() > 0, ...(ngDevMode ? [{ debugName: "hasCounter" }] : []));
+    describedBy = computed(() => {
+        const ids = [];
+        if (this.error())
+            ids.push(`${this.fieldId()}-err`);
+        else if (this.hint())
+            ids.push(`${this.fieldId()}-hint`);
+        if (this.hasCounter())
+            ids.push(`${this.fieldId()}-count`);
+        return ids.length ? ids.join(' ') : null;
+    }, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
     /** The language currently being edited. */
     activeLang = computed(() => {
         const langs = this.languages();
@@ -2230,6 +2273,10 @@ class SdsLocalizedInput {
         const text = this.valueMap()[lang];
         return !!text && text.trim().length > 0;
     }
+    /** A required language (see {@link requiredLanguages}) that is still empty. */
+    mustFill(lang) {
+        return this.requiredLanguages().includes(lang) && !this.filled(lang);
+    }
     fieldPlaceholder() {
         const base = this.placeholder();
         const lang = this.activeLang().toUpperCase();
@@ -2274,7 +2321,7 @@ class SdsLocalizedInput {
         this.cvaDisabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsLocalizedInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsLocalizedInput, isStandalone: true, selector: "sds-localized-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: false, transformFunction: null }, currentLanguage: { classPropertyName: "currentLanguage", publicName: "currentLanguage", isSignal: true, isRequired: false, transformFunction: null }, multiline: { classPropertyName: "multiline", publicName: "multiline", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, languageSwitcherLabel: { classPropertyName: "languageSwitcherLabel", publicName: "languageSwitcherLabel", isSignal: true, isRequired: false, transformFunction: null }, untranslatedLabel: { classPropertyName: "untranslatedLabel", publicName: "untranslatedLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsLocalizedInput, isStandalone: true, selector: "sds-localized-input", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, requiredLanguages: { classPropertyName: "requiredLanguages", publicName: "requiredLanguages", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, showCount: { classPropertyName: "showCount", publicName: "showCount", isSignal: true, isRequired: false, transformFunction: null }, languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: false, transformFunction: null }, currentLanguage: { classPropertyName: "currentLanguage", publicName: "currentLanguage", isSignal: true, isRequired: false, transformFunction: null }, multiline: { classPropertyName: "multiline", publicName: "multiline", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, languageSwitcherLabel: { classPropertyName: "languageSwitcherLabel", publicName: "languageSwitcherLabel", isSignal: true, isRequired: false, transformFunction: null }, untranslatedLabel: { classPropertyName: "untranslatedLabel", publicName: "untranslatedLabel", isSignal: true, isRequired: false, transformFunction: null }, requiredLanguageLabel: { classPropertyName: "requiredLanguageLabel", publicName: "requiredLanguageLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SdsLocalizedInput),
@@ -2282,7 +2329,12 @@ class SdsLocalizedInput {
             },
         ], ngImport: i0, template: `
     @if (label()) {
-      <label [for]="inputId" class="mb-1.5 block text-sm font-medium text-ink">{{ label() }}</label>
+      <label [for]="fieldId()" class="mb-1.5 block text-sm font-medium text-ink"
+        >{{ label() }}
+        @if (required()) {
+          <span class="ml-0.5 text-danger" aria-hidden="true">*</span>
+        }
+      </label>
     }
 
     <div
@@ -2291,21 +2343,31 @@ class SdsLocalizedInput {
     >
       @if (multiline()) {
         <textarea
-          [id]="inputId"
+          [id]="fieldId()"
           [rows]="rows()"
           [placeholder]="fieldPlaceholder()"
           [disabled]="isDisabled()"
           [value]="current()"
+          [attr.maxlength]="maxLength() || null"
+          [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
+          [attr.aria-invalid]="error() || invalid() ? 'true' : null"
+          [attr.aria-required]="required() ? 'true' : null"
+          [attr.aria-describedby]="describedBy()"
           (input)="write($event)"
           (blur)="onTouched()"
           class="min-w-0 flex-1 resize-y bg-transparent px-3.5 py-2 outline-none placeholder:text-current/50 disabled:cursor-not-allowed"
         ></textarea>
       } @else {
         <input
-          [id]="inputId"
+          [id]="fieldId()"
           [placeholder]="fieldPlaceholder()"
           [disabled]="isDisabled()"
           [value]="current()"
+          [attr.maxlength]="maxLength() || null"
+          [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
+          [attr.aria-invalid]="error() || invalid() ? 'true' : null"
+          [attr.aria-required]="required() ? 'true' : null"
+          [attr.aria-describedby]="describedBy()"
           (input)="write($event)"
           (blur)="onTouched()"
           class="min-w-0 flex-1 bg-transparent px-3.5 outline-none placeholder:text-current/50 disabled:cursor-not-allowed"
@@ -2327,7 +2389,7 @@ class SdsLocalizedInput {
               [disabled]="isDisabled()"
               (click)="select(lang)"
               [attr.aria-selected]="activeLang() === lang"
-              [attr.title]="lang.toUpperCase() + (filled(lang) ? '' : ' — ' + untranslatedLabel())"
+              [attr.title]="lang.toUpperCase() + (filled(lang) ? '' : ' — ' + (mustFill(lang) ? requiredLanguageLabel() : untranslatedLabel()))"
               class="flex items-center gap-1 rounded px-1.5 py-0.5 text-[11px] font-semibold uppercase leading-none transition-colors disabled:cursor-not-allowed disabled:opacity-50"
               [class]="
                 activeLang() === lang
@@ -2338,7 +2400,7 @@ class SdsLocalizedInput {
               {{ lang }}
               <span
                 class="inline-block h-1 w-1 rounded-full"
-                [class]="filled(lang) ? 'bg-success' : 'bg-current/30'"
+                [class]="filled(lang) ? 'bg-success' : mustFill(lang) ? 'bg-danger' : 'bg-current/30'"
               ></span>
             </button>
           }
@@ -2346,8 +2408,23 @@ class SdsLocalizedInput {
       }
     </div>
 
-    @if (hint()) {
-      <p class="mt-1.5 text-xs text-ink-faint">{{ hint() }}</p>
+    @if (hasCounter()) {
+      <div class="mt-1.5 flex items-start gap-3 text-xs">
+        @if (error()) {
+          <p [id]="fieldId() + '-err'" class="flex-1 font-medium text-danger">{{ error() }}</p>
+        } @else if (hint()) {
+          <p [id]="fieldId() + '-hint'" class="flex-1 text-ink-faint">{{ hint() }}</p>
+        } @else {
+          <span class="flex-1"></span>
+        }
+        <span [id]="fieldId() + '-count'" aria-live="polite" class="shrink-0 tabular-nums text-ink-faint">
+          {{ current().length }}{{ maxLength() ? ' / ' + maxLength() : '' }}
+        </span>
+      </div>
+    } @else if (error()) {
+      <p [id]="fieldId() + '-err'" class="mt-1.5 text-xs font-medium text-danger">{{ error() }}</p>
+    } @else if (hint()) {
+      <p [id]="fieldId() + '-hint'" class="mt-1.5 text-xs text-ink-faint">{{ hint() }}</p>
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -2366,7 +2443,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     host: { class: 'block' },
                     template: `
     @if (label()) {
-      <label [for]="inputId" class="mb-1.5 block text-sm font-medium text-ink">{{ label() }}</label>
+      <label [for]="fieldId()" class="mb-1.5 block text-sm font-medium text-ink"
+        >{{ label() }}
+        @if (required()) {
+          <span class="ml-0.5 text-danger" aria-hidden="true">*</span>
+        }
+      </label>
     }
 
     <div
@@ -2375,21 +2457,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     >
       @if (multiline()) {
         <textarea
-          [id]="inputId"
+          [id]="fieldId()"
           [rows]="rows()"
           [placeholder]="fieldPlaceholder()"
           [disabled]="isDisabled()"
           [value]="current()"
+          [attr.maxlength]="maxLength() || null"
+          [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
+          [attr.aria-invalid]="error() || invalid() ? 'true' : null"
+          [attr.aria-required]="required() ? 'true' : null"
+          [attr.aria-describedby]="describedBy()"
           (input)="write($event)"
           (blur)="onTouched()"
           class="min-w-0 flex-1 resize-y bg-transparent px-3.5 py-2 outline-none placeholder:text-current/50 disabled:cursor-not-allowed"
         ></textarea>
       } @else {
         <input
-          [id]="inputId"
+          [id]="fieldId()"
           [placeholder]="fieldPlaceholder()"
           [disabled]="isDisabled()"
           [value]="current()"
+          [attr.maxlength]="maxLength() || null"
+          [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
+          [attr.aria-invalid]="error() || invalid() ? 'true' : null"
+          [attr.aria-required]="required() ? 'true' : null"
+          [attr.aria-describedby]="describedBy()"
           (input)="write($event)"
           (blur)="onTouched()"
           class="min-w-0 flex-1 bg-transparent px-3.5 outline-none placeholder:text-current/50 disabled:cursor-not-allowed"
@@ -2411,7 +2503,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               [disabled]="isDisabled()"
               (click)="select(lang)"
               [attr.aria-selected]="activeLang() === lang"
-              [attr.title]="lang.toUpperCase() + (filled(lang) ? '' : ' — ' + untranslatedLabel())"
+              [attr.title]="lang.toUpperCase() + (filled(lang) ? '' : ' — ' + (mustFill(lang) ? requiredLanguageLabel() : untranslatedLabel()))"
               class="flex items-center gap-1 rounded px-1.5 py-0.5 text-[11px] font-semibold uppercase leading-none transition-colors disabled:cursor-not-allowed disabled:opacity-50"
               [class]="
                 activeLang() === lang
@@ -2422,7 +2514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               {{ lang }}
               <span
                 class="inline-block h-1 w-1 rounded-full"
-                [class]="filled(lang) ? 'bg-success' : 'bg-current/30'"
+                [class]="filled(lang) ? 'bg-success' : mustFill(lang) ? 'bg-danger' : 'bg-current/30'"
               ></span>
             </button>
           }
@@ -2430,12 +2522,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       }
     </div>
 
-    @if (hint()) {
-      <p class="mt-1.5 text-xs text-ink-faint">{{ hint() }}</p>
+    @if (hasCounter()) {
+      <div class="mt-1.5 flex items-start gap-3 text-xs">
+        @if (error()) {
+          <p [id]="fieldId() + '-err'" class="flex-1 font-medium text-danger">{{ error() }}</p>
+        } @else if (hint()) {
+          <p [id]="fieldId() + '-hint'" class="flex-1 text-ink-faint">{{ hint() }}</p>
+        } @else {
+          <span class="flex-1"></span>
+        }
+        <span [id]="fieldId() + '-count'" aria-live="polite" class="shrink-0 tabular-nums text-ink-faint">
+          {{ current().length }}{{ maxLength() ? ' / ' + maxLength() : '' }}
+        </span>
+      </div>
+    } @else if (error()) {
+      <p [id]="fieldId() + '-err'" class="mt-1.5 text-xs font-medium text-danger">{{ error() }}</p>
+    } @else if (hint()) {
+      <p [id]="fieldId() + '-hint'" class="mt-1.5 text-xs text-ink-faint">{{ hint() }}</p>
     }
   `,
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], languages: [{ type: i0.Input, args: [{ isSignal: true, alias: "languages", required: false }] }], currentLanguage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLanguage", required: false }] }], multiline: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiline", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], languageSwitcherLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "languageSwitcherLabel", required: false }] }], untranslatedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "untranslatedLabel", required: false }] }] } });
+        }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], requiredLanguages: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredLanguages", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCount", required: false }] }], languages: [{ type: i0.Input, args: [{ isSignal: true, alias: "languages", required: false }] }], currentLanguage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLanguage", required: false }] }], multiline: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiline", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], languageSwitcherLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "languageSwitcherLabel", required: false }] }], untranslatedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "untranslatedLabel", required: false }] }], requiredLanguageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredLanguageLabel", required: false }] }] } });
 
 let nextId$k = 0;
 const SIZES$9 = {