@muxima-ui/core 1.4.1 → 2.0.0

package/fesm2022/muxima-ui-core-command.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"muxima-ui-core-command.mjs","sources":["../../../projects/core/command/command.ts","../../../projects/core/command/muxima-ui-core-command.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  Directive,\n  ElementRef,\n  Injectable,\n  TemplateRef,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  contentChild,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { DialogRef } from '@angular/cdk/dialog';\nimport { MxDialog, MX_DIALOG_DATA } from '@muxima-ui/core/dialog';\nimport { mxNormalize, mxUniqueId } from '@muxima-ui/core/form-field';\n\nexport interface MxCommandItem<D = unknown> {\n  /** Texto mostrado e pesquisado. */\n  label: string;\n  /** Grupo onde aparece (ex.: \"Páginas\", \"Acções\"). */\n  group?: string;\n  /** Palavras extra para a pesquisa, não mostradas. */\n  keywords?: string[];\n  /** Texto à direita, por exemplo um atalho. */\n  hint?: string;\n  disabled?: boolean;\n  /** Dados livres (rota, id...). */\n  data?: D;\n}\n\n/** Modelo opcional para desenhar cada item (ex.: com ícone). */\n@Directive({ selector: 'ng-template[mxCommandItem]' })\nexport class MxCommandItemTemplate {\n  readonly template = inject<TemplateRef<{ $implicit: MxCommandItem }>>(TemplateRef);\n}\n\n/**\n * Pesquisa de comandos: campo + lista filtrada, por grupos (padrão combobox com lista).\n * Use-se dentro de um diálogo (MxCommandPalette) ou directamente na página.\n *\n * ```html\n * <mx-command [items]=\"comandos\" (selected)=\"executar($event)\" aria-label=\"Pesquisar comandos\" />\n * ```\n */\n@Component({\n  selector: 'mx-command',\n  exportAs: 'mxCommand',\n  imports: [NgTemplateOutlet],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'mx-command', '[attr.aria-label]': 'null' },\n  template: `\n    <div class=\"mx-command-search\">\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n        <circle cx=\"7\" cy=\"7\" r=\"4.5\" stroke=\"currentColor\" stroke-width=\"1.4\" />\n        <path d=\"M10.5 10.5L14 14\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      </svg>\n      <input\n        #search\n        class=\"mx-command-input\"\n        type=\"text\"\n        role=\"combobox\"\n        autocomplete=\"off\"\n        aria-autocomplete=\"list\"\n        aria-expanded=\"true\"\n        [attr.aria-controls]=\"listId\"\n        [attr.aria-activedescendant]=\"flat().length ? optionId(active()) : null\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"query()\"\n        (input)=\"onInput($event)\"\n        (keydown)=\"onKeydown($event)\"\n      />\n    </div>\n    <div class=\"mx-command-list\" role=\"listbox\" [id]=\"listId\" [attr.aria-label]=\"ariaLabel()\">\n      @for (g of groups(); track g.name) {\n        <div role=\"group\" class=\"mx-command-group\" [attr.aria-labelledby]=\"g.name ? groupId(g.name) : null\">\n          @if (g.name) {\n            <div class=\"mx-command-group-label\" [id]=\"groupId(g.name)\" aria-hidden=\"true\">{{ g.name }}</div>\n          }\n          @for (e of g.items; track e.index) {\n            <div\n              class=\"mx-command-item\"\n              role=\"option\"\n              [id]=\"optionId(e.index)\"\n              [attr.aria-selected]=\"e.index === active()\"\n              [attr.aria-disabled]=\"e.item.disabled ? 'true' : null\"\n              [attr.data-active]=\"e.index === active() ? '' : null\"\n              (mousemove)=\"active.set(e.index)\"\n              (click)=\"choose(e.item)\"\n            >\n              @if (itemTemplate(); as t) {\n                <ng-container *ngTemplateOutlet=\"t.template; context: { $implicit: e.item }\" />\n              } @else {\n                <span>{{ e.item.label }}</span>\n              }\n              @if (e.item.hint) {\n                <span class=\"mx-command-hint\">{{ e.item.hint }}</span>\n              }\n            </div>\n          }\n        </div>\n      } @empty {\n        <div class=\"mx-command-empty\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">{{ emptyText() }} \"{{ query() }}\"</div>\n      }\n    </div>\n    <span class=\"mx-visually-hidden\" aria-live=\"polite\">{{ flat().length }} resultados</span>\n  `,\n})\nexport class MxCommand<D = unknown> {\n  readonly items = input.required<readonly MxCommandItem<D>[]>();\n  readonly placeholder = input('Pesquisar...');\n  readonly emptyText = input('Nada encontrado para');\n  readonly ariaLabel = input('Pesquisar', { alias: 'aria-label' });\n  readonly selected = output<MxCommandItem<D>>();\n\n  protected readonly itemTemplate = contentChild(MxCommandItemTemplate);\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n  protected readonly listId = mxUniqueId('mx-command-list');\n  protected readonly query = signal('');\n  protected readonly active = signal(0);\n\n  protected readonly flat = computed(() => {\n    const q = mxNormalize(this.query().trim());\n    const all = this.items();\n    if (!q) return [...all];\n    return all.filter((i) => mxNormalize([i.label, i.group ?? '', ...(i.keywords ?? [])].join(' ')).includes(q));\n  });\n\n  protected readonly groups = computed(() => {\n    const out: { name: string; items: { item: MxCommandItem<D>; index: number }[] }[] = [];\n    this.flat().forEach((item, index) => {\n      const name = item.group ?? '';\n      let g = out.find((x) => x.name === name);\n      if (!g) out.push((g = { name, items: [] }));\n      g.items.push({ item, index });\n    });\n    // a ordem do teclado segue a ordem visual\n    let i = 0;\n    out.forEach((g) => g.items.forEach((e) => (e.index = i++)));\n    return out;\n  });\n\n  private readonly ordered = computed(() => this.groups().flatMap((g) => g.items.map((e) => e.item)));\n\n  constructor() {\n    afterNextRender(() => this.focus());\n  }\n\n  focus(): void {\n    this.host.querySelector<HTMLInputElement>('.mx-command-input')?.focus();\n  }\n\n  protected optionId(i: number): string {\n    return `${this.listId}-${i}`;\n  }\n  protected groupId(name: string): string {\n    return `${this.listId}-g-${mxNormalize(name).replace(/\\W+/g, '-')}`;\n  }\n\n  protected onInput(event: Event): void {\n    this.query.set((event.target as HTMLInputElement).value);\n    this.active.set(0);\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    const n = this.ordered().length;\n    if (!n) return;\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      this.active.update((i) => (i + 1) % n);\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      this.active.update((i) => (i - 1 + n) % n);\n    } else if (event.key === 'Home' && event.ctrlKey) {\n      event.preventDefault();\n      this.active.set(0);\n    } else if (event.key === 'End' && event.ctrlKey) {\n      event.preventDefault();\n      this.active.set(n - 1);\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n      this.choose(this.ordered()[this.active()]);\n      return;\n    } else {\n      return;\n    }\n    queueMicrotask(() => document.getElementById(this.optionId(this.active()))?.scrollIntoView?.({ block: 'nearest' }));\n  }\n\n  protected choose(item: MxCommandItem<D> | undefined): void {\n    if (item && !item.disabled) this.selected.emit(item);\n  }\n}\n\n/** Conteúdo do diálogo aberto por MxCommandPalette. */\n@Component({\n  selector: 'mx-command-palette',\n  imports: [MxCommand],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  template: `<mx-command [items]=\"data.items\" [placeholder]=\"data.placeholder\" [aria-label]=\"data.label\" (selected)=\"ref.close($event)\" />`,\n})\nexport class MxCommandPaletteDialog {\n  protected readonly data = inject<{ items: MxCommandItem[]; placeholder: string; label: string }>(MX_DIALOG_DATA);\n  protected readonly ref = inject<DialogRef<MxCommandItem>>(DialogRef);\n}\n\n/**\n * Abre a pesquisa de comandos num diálogo modal. O resultado é o item escolhido.\n *\n * ```ts\n * inject(MxCommandPalette).open(comandos).closed.subscribe((item) => item && executar(item));\n * ```\n */\n@Injectable({ providedIn: 'root' })\nexport class MxCommandPalette {\n  private readonly dialog = inject(MxDialog);\n\n  open<D>(items: MxCommandItem<D>[], options: { placeholder?: string; label?: string } = {}): DialogRef<MxCommandItem<D>> {\n    const ref = this.dialog.open<MxCommandItem<D>>(MxCommandPaletteDialog, {\n      data: { items, placeholder: options.placeholder ?? 'Pesquisar...', label: options.label ?? 'Pesquisar' },\n      size: 'md',\n      ariaLabel: options.label ?? 'Pesquisar',\n    });\n    ref.addPanelClass('mx-command-panel');\n    return ref as unknown as DialogRef<MxCommandItem<D>>;\n  }\n}\n\nexport const MX_COMMAND = [MxCommand, MxCommandItemTemplate] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"muxima-ui-core-command.mjs","sources":["../../../projects/core/command/command.ts","../../../projects/core/command/muxima-ui-core-command.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  Directive,\n  ElementRef,\n  Injectable,\n  TemplateRef,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  contentChild,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\nimport { injectMxMessages } from '@muxima-ui/core/i18n';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { DialogRef } from '@angular/cdk/dialog';\nimport { MxDialog, MX_DIALOG_DATA } from '@muxima-ui/core/dialog';\nimport { mxNormalize, mxUniqueId } from '@muxima-ui/core/form-field';\n\nexport interface MxCommandItem<D = unknown> {\n  /** Texto mostrado e pesquisado. */\n  label: string;\n  /** Grupo onde aparece (ex.: \"Páginas\", \"Acções\"). */\n  group?: string;\n  /** Palavras extra para a pesquisa, não mostradas. */\n  keywords?: string[];\n  /** Texto à direita, por exemplo um atalho. */\n  hint?: string;\n  disabled?: boolean;\n  /** Dados livres (rota, id...). */\n  data?: D;\n}\n\n/** Modelo opcional para desenhar cada item (ex.: com ícone). */\n@Directive({ selector: 'ng-template[mxCommandItem]' })\nexport class MxCommandItemTemplate {\n  readonly template = inject<TemplateRef<{ $implicit: MxCommandItem }>>(TemplateRef);\n}\n\n/**\n * Pesquisa de comandos: campo + lista filtrada, por grupos (padrão combobox com lista).\n * Use-se dentro de um diálogo (MxCommandPalette) ou directamente na página.\n *\n * ```html\n * <mx-command [items]=\"comandos\" (selected)=\"executar($event)\" aria-label=\"Pesquisar comandos\" />\n * ```\n */\n@Component({\n  selector: 'mx-command',\n  exportAs: 'mxCommand',\n  imports: [NgTemplateOutlet],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'mx-command', '[attr.aria-label]': 'null' },\n  template: `\n    <div class=\"mx-command-search\">\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n        <circle cx=\"7\" cy=\"7\" r=\"4.5\" stroke=\"currentColor\" stroke-width=\"1.4\" />\n        <path d=\"M10.5 10.5L14 14\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      </svg>\n      <input\n        #search\n        class=\"mx-command-input\"\n        type=\"text\"\n        role=\"combobox\"\n        autocomplete=\"off\"\n        aria-autocomplete=\"list\"\n        aria-expanded=\"true\"\n        [attr.aria-controls]=\"listId\"\n        [attr.aria-activedescendant]=\"flat().length ? optionId(active()) : null\"\n        [attr.aria-label]=\"labelText()\"\n        [placeholder]=\"placeholder() ?? i18n().command.placeholder\"\n        [value]=\"query()\"\n        (input)=\"onInput($event)\"\n        (keydown)=\"onKeydown($event)\"\n      />\n    </div>\n    <div class=\"mx-command-list\" role=\"listbox\" [id]=\"listId\" [attr.aria-label]=\"labelText()\">\n      @for (g of groups(); track g.name) {\n        <div role=\"group\" class=\"mx-command-group\" [attr.aria-labelledby]=\"g.name ? groupId(g.name) : null\">\n          @if (g.name) {\n            <div class=\"mx-command-group-label\" [id]=\"groupId(g.name)\" aria-hidden=\"true\">{{ g.name }}</div>\n          }\n          @for (e of g.items; track e.index) {\n            <div\n              class=\"mx-command-item\"\n              role=\"option\"\n              [id]=\"optionId(e.index)\"\n              [attr.aria-selected]=\"e.index === active()\"\n              [attr.aria-disabled]=\"e.item.disabled ? 'true' : null\"\n              [attr.data-active]=\"e.index === active() ? '' : null\"\n              (mousemove)=\"active.set(e.index)\"\n              (click)=\"choose(e.item)\"\n            >\n              @if (itemTemplate(); as t) {\n                <ng-container *ngTemplateOutlet=\"t.template; context: { $implicit: e.item }\" />\n              } @else {\n                <span>{{ e.item.label }}</span>\n              }\n              @if (e.item.hint) {\n                <span class=\"mx-command-hint\">{{ e.item.hint }}</span>\n              }\n            </div>\n          }\n        </div>\n      } @empty {\n        <div class=\"mx-command-empty\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">{{ emptyText() ?? i18n().command.empty }} \"{{ query() }}\"</div>\n      }\n    </div>\n    <span class=\"mx-visually-hidden\" aria-live=\"polite\">{{ i18n().command.results(flat().length) }}</span>\n  `,\n})\nexport class MxCommand<D = unknown> {\n  readonly items = input.required<readonly MxCommandItem<D>[]>();\n  readonly placeholder = input<string>();\n  readonly emptyText = input<string>();\n  readonly ariaLabel = input<string | undefined>(undefined, { alias: 'aria-label' });\n  protected readonly i18n = injectMxMessages();\n  protected readonly labelText = computed(() => this.ariaLabel() ?? this.i18n().command.label);\n  readonly selected = output<MxCommandItem<D>>();\n\n  protected readonly itemTemplate = contentChild(MxCommandItemTemplate);\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n  protected readonly listId = mxUniqueId('mx-command-list');\n  protected readonly query = signal('');\n  protected readonly active = signal(0);\n\n  protected readonly flat = computed(() => {\n    const q = mxNormalize(this.query().trim());\n    const all = this.items();\n    if (!q) return [...all];\n    return all.filter((i) => mxNormalize([i.label, i.group ?? '', ...(i.keywords ?? [])].join(' ')).includes(q));\n  });\n\n  protected readonly groups = computed(() => {\n    const out: { name: string; items: { item: MxCommandItem<D>; index: number }[] }[] = [];\n    this.flat().forEach((item, index) => {\n      const name = item.group ?? '';\n      let g = out.find((x) => x.name === name);\n      if (!g) out.push((g = { name, items: [] }));\n      g.items.push({ item, index });\n    });\n    // a ordem do teclado segue a ordem visual\n    let i = 0;\n    out.forEach((g) => g.items.forEach((e) => (e.index = i++)));\n    return out;\n  });\n\n  private readonly ordered = computed(() => this.groups().flatMap((g) => g.items.map((e) => e.item)));\n\n  constructor() {\n    afterNextRender(() => this.focus());\n  }\n\n  focus(): void {\n    this.host.querySelector<HTMLInputElement>('.mx-command-input')?.focus();\n  }\n\n  protected optionId(i: number): string {\n    return `${this.listId}-${i}`;\n  }\n  protected groupId(name: string): string {\n    return `${this.listId}-g-${mxNormalize(name).replace(/\\W+/g, '-')}`;\n  }\n\n  protected onInput(event: Event): void {\n    this.query.set((event.target as HTMLInputElement).value);\n    this.active.set(0);\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    const n = this.ordered().length;\n    if (!n) return;\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      this.active.update((i) => (i + 1) % n);\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      this.active.update((i) => (i - 1 + n) % n);\n    } else if (event.key === 'Home' && event.ctrlKey) {\n      event.preventDefault();\n      this.active.set(0);\n    } else if (event.key === 'End' && event.ctrlKey) {\n      event.preventDefault();\n      this.active.set(n - 1);\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n      this.choose(this.ordered()[this.active()]);\n      return;\n    } else {\n      return;\n    }\n    queueMicrotask(() => document.getElementById(this.optionId(this.active()))?.scrollIntoView?.({ block: 'nearest' }));\n  }\n\n  protected choose(item: MxCommandItem<D> | undefined): void {\n    if (item && !item.disabled) this.selected.emit(item);\n  }\n}\n\n/** Conteúdo do diálogo aberto por MxCommandPalette. */\n@Component({\n  selector: 'mx-command-palette',\n  imports: [MxCommand],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  template: `<mx-command [items]=\"data.items\" [placeholder]=\"data.placeholder\" [aria-label]=\"data.label\" (selected)=\"ref.close($event)\" />`,\n})\nexport class MxCommandPaletteDialog {\n  protected readonly data = inject<{ items: MxCommandItem[]; placeholder: string; label: string }>(MX_DIALOG_DATA);\n  protected readonly ref = inject<DialogRef<MxCommandItem>>(DialogRef);\n}\n\n/**\n * Abre a pesquisa de comandos num diálogo modal. O resultado é o item escolhido.\n *\n * ```ts\n * inject(MxCommandPalette).open(comandos).closed.subscribe((item) => item && executar(item));\n * ```\n */\n@Injectable({ providedIn: 'root' })\nexport class MxCommandPalette {\n  private readonly dialog = inject(MxDialog);\n  private readonly i18n = injectMxMessages();\n\n  open<D>(items: MxCommandItem<D>[], options: { placeholder?: string; label?: string } = {}): DialogRef<MxCommandItem<D>> {\n    const t = this.i18n().command;\n    const ref = this.dialog.open<MxCommandItem<D>>(MxCommandPaletteDialog, {\n      data: { items, placeholder: options.placeholder ?? t.placeholder, label: options.label ?? t.label },\n      size: 'md',\n      ariaLabel: options.label ?? t.label,\n    });\n    ref.addPanelClass('mx-command-panel');\n    return ref as unknown as DialogRef<MxCommandItem<D>>;\n  }\n}\n\nexport const MX_COMMAND = [MxCommand, MxCommandItemTemplate] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/muxima-ui-core-data-grid.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { input, inject, TemplateRef, Directive, model, booleanAttribute, numberAttribute, output, contentChildren, viewChild, ElementRef, Injector, signal, computed, afterRenderEffect, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, inject, TemplateRef, Directive, model, booleanAttribute, numberAttribute, computed, output, contentChildren, viewChild, ElementRef, Injector, signal, afterRenderEffect, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectMxMessages } from '@muxima-ui/core/i18n';
 import { NgTemplateOutlet } from '@angular/common';
 import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { MxCheckbox } from '@muxima-ui/core/checkbox';
@@ -98,18 +99,20 @@ class MxDataGrid {
     density = input('comfortable', ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
     loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     columnMenu = input(true, { ...(ngDevMode ? { debugName: "columnMenu" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    ariaLabel = input('Tabela de dados', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    i18n = injectMxMessages();
+    msg = computed(() => this.i18n().dataGrid, ...(ngDevMode ? [{ debugName: "msg" }] : /* istanbul ignore next */ []));
     /** Coluna cujo texto identifica a linha nos nomes ("Seleccionar FT 2026/0201"). */
     labelKey = input(null, ...(ngDevMode ? [{ debugName: "labelKey" }] : /* istanbul ignore next */ []));
-    emptyText = input('Sem resultados.', ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
-    loadingText = input('A carregar...', ...(ngDevMode ? [{ debugName: "loadingText" }] : /* istanbul ignore next */ []));
-    columnsText = input('Colunas', ...(ngDevMode ? [{ debugName: "columnsText" }] : /* istanbul ignore next */ []));
-    filterText = input('Filtrar', ...(ngDevMode ? [{ debugName: "filterText" }] : /* istanbul ignore next */ []));
-    allText = input('Todos', ...(ngDevMode ? [{ debugName: "allText" }] : /* istanbul ignore next */ []));
-    selectAllText = input('Seleccionar todas as linhas', ...(ngDevMode ? [{ debugName: "selectAllText" }] : /* istanbul ignore next */ []));
-    selectRowText = input('Seleccionar', ...(ngDevMode ? [{ debugName: "selectRowText" }] : /* istanbul ignore next */ []));
-    selectText = input('Selecção', ...(ngDevMode ? [{ debugName: "selectText" }] : /* istanbul ignore next */ []));
-    resizeHint = input('Alt e setas esquerda e direita mudam a largura da coluna.', ...(ngDevMode ? [{ debugName: "resizeHint" }] : /* istanbul ignore next */ []));
+    emptyText = input(...(ngDevMode ? [undefined, { debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    loadingText = input(...(ngDevMode ? [undefined, { debugName: "loadingText" }] : /* istanbul ignore next */ []));
+    columnsText = input(...(ngDevMode ? [undefined, { debugName: "columnsText" }] : /* istanbul ignore next */ []));
+    filterText = input(...(ngDevMode ? [undefined, { debugName: "filterText" }] : /* istanbul ignore next */ []));
+    allText = input(...(ngDevMode ? [undefined, { debugName: "allText" }] : /* istanbul ignore next */ []));
+    selectAllText = input(...(ngDevMode ? [undefined, { debugName: "selectAllText" }] : /* istanbul ignore next */ []));
+    selectRowText = input(...(ngDevMode ? [undefined, { debugName: "selectRowText" }] : /* istanbul ignore next */ []));
+    selectText = input(...(ngDevMode ? [undefined, { debugName: "selectText" }] : /* istanbul ignore next */ []));
+    resizeHint = input(...(ngDevMode ? [undefined, { debugName: "resizeHint" }] : /* istanbul ignore next */ []));
     /** Enter ou duplo clique numa linha. */
     rowActivate = output();
     cells = contentChildren(MxGridCell, ...(ngDevMode ? [{ debugName: "cells" }] : /* istanbul ignore next */ []));
@@ -170,7 +173,7 @@ class MxDataGrid {
         const s = this.sort();
         const sc = s.key ? cols.find((c) => c.key === s.key) : null;
         if (sc) {
-            const collator = new Intl.Collator('pt', { numeric: true, sensitivity: 'base' });
+            const collator = new Intl.Collator(this.i18n().intlLocale, { numeric: true, sensitivity: 'base' });
             const dir = s.direction === 'asc' ? 1 : -1;
             out = [...out].sort((a, b) => {
                 const x = this.valueOf(sc, a);
@@ -213,14 +216,15 @@ class MxDataGrid {
     allSelected = computed(() => this.rows().length > 0 && this.rows().every((r) => this.selectedSet().has(this.keyOf(r))), ...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
     someSelected = computed(() => !this.allSelected() && this.rows().some((r) => this.selectedSet().has(this.keyOf(r))), ...(ngDevMode ? [{ debugName: "someSelected" }] : /* istanbul ignore next */ []));
     statusText = computed(() => {
-        const fmt = new Intl.NumberFormat('pt-AO');
+        const t = this.msg();
+        const fmt = new Intl.NumberFormat(this.i18n().intlLocale);
         const total = this.totalRows() ?? this.rows().length;
-        const parts = [`${fmt.format(total)} ${total === 1 ? 'linha' : 'linhas'}`];
+        const parts = [t.rows(fmt.format(total), total)];
         if (!this.manual() && this.rows().length !== this.data().length)
-            parts[0] += ` de ${fmt.format(this.data().length)}`;
+            parts[0] += t.of(fmt.format(this.data().length));
         const sel = this.selected().length;
         if (this.selection() !== 'none' && sel)
-            parts.push(`${fmt.format(sel)} ${sel === 1 ? 'seleccionada' : 'seleccionadas'}`);
+            parts.push(t.selected(fmt.format(sel), sel));
         return parts.join(', ');
     }, ...(ngDevMode ? [{ debugName: "statusText" }] : /* istanbul ignore next */ []));
     constructor() {
@@ -265,9 +269,9 @@ class MxDataGrid {
         if (c.format)
             return c.format(v, row);
         if (v instanceof Date)
-            return v.toLocaleDateString('pt-AO');
+            return v.toLocaleDateString(this.i18n().intlLocale);
         if (typeof v === 'number')
-            return v.toLocaleString('pt-AO');
+            return v.toLocaleString(this.i18n().intlLocale);
         return v == null ? '' : String(v);
     }
     rowLabel(row) {
@@ -307,7 +311,7 @@ class MxDataGrid {
             return c.filterOptions;
         return [...new Set(this.data().map((r) => String(this.valueOf(c, r) ?? '')))]
             .filter(Boolean)
-            .sort((a, b) => a.localeCompare(b, 'pt'));
+            .sort((a, b) => a.localeCompare(b, this.i18n().intlLocale));
     }
     isHidden(c) {
         const hidden = this.hiddenKeys();
@@ -334,8 +338,8 @@ class MxDataGrid {
                 : { key: null, direction: 'asc' };
         this.sort.set(next);
         this.announcer.announce(next.key
-            ? `Ordenado por ${c.header}, ${next.direction === 'asc' ? 'ascendente' : 'descendente'}`
-            : 'Sem ordenação');
+            ? this.msg().sorted(c.header, next.direction)
+            : this.msg().unsorted);
     }
     setFilter(key, value) {
         this.filters.update((f) => ({ ...f, [key]: value }));
@@ -478,7 +482,7 @@ class MxDataGrid {
             (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
             event.preventDefault();
             this.setWidth(col.key, this.widthOf(col) + (event.key === 'ArrowRight' ? 16 : -16));
-            this.announcer.announce(`${col.header}, ${this.widthOf(col)} píxeis`);
+            this.announcer.announce(this.msg().width(col.header, this.widthOf(col)));
             return;
         }
         if (inSelect)
@@ -555,7 +559,7 @@ class MxDataGrid {
                 stroke-linejoin="round"
               />
             </svg>
-            {{ columnsText() }}
+            {{ (columnsText() ?? msg().columns) }}
           </button>
           <ng-template #colunas>
             <div mxMenu>
@@ -585,7 +589,7 @@ class MxDataGrid {
       <table
         class="mx-grid-table"
         role="grid"
-        [attr.aria-label]="ariaLabel()"
+        [attr.aria-label]="(ariaLabel() ?? msg().label)"
         [attr.aria-rowcount]="rowCount()"
         [attr.aria-colcount]="colCount()"
         [attr.aria-multiselectable]="selection() === 'multiple' ? 'true' : null"
@@ -618,12 +622,12 @@ class MxDataGrid {
                     mxCheckbox
                     [checked]="allSelected()"
                     [indeterminate]="someSelected()"
-                    [attr.aria-label]="selectAllText()"
+                    [attr.aria-label]="(selectAllText() ?? msg().selectAll)"
                     (change)="toggleAll()"
                     tabindex="-1"
                   />
                 } @else {
-                  <span class="mx-visually-hidden">{{ selectText() }}</span>
+                  <span class="mx-visually-hidden">{{ (selectText() ?? msg().selection) }}</span>
                 }
               </th>
             }
@@ -713,11 +717,11 @@ class MxDataGrid {
                       <select
                         class="mx-grid-filter"
                         tabindex="-1"
-                        [attr.aria-label]="filterText() + ' ' + c.header"
+                        [attr.aria-label]="(filterText() ?? msg().filter) + ' ' + c.header"
                         [value]="filters()[c.key] || ''"
                         (change)="setFilter(c.key, $any($event.target).value)"
                       >
-                        <option value="">{{ allText() }}</option>
+                        <option value="">{{ (allText() ?? msg().all) }}</option>
                         @for (o of optionsOf(c); track o) {
                           <option [value]="o" [selected]="filters()[c.key] === o">{{ o }}</option>
                         }
@@ -728,7 +732,7 @@ class MxDataGrid {
                         class="mx-grid-filter"
                         tabindex="-1"
                         type="search"
-                        [attr.aria-label]="filterText() + ' ' + c.header"
+                        [attr.aria-label]="(filterText() ?? msg().filter) + ' ' + c.header"
                         [value]="filters()[c.key] || ''"
                         (input)="setFilter(c.key, $any($event.target).value)"
                       />
@@ -741,10 +745,7 @@ class MxDataGrid {
                         inputmode="decimal"
                         placeholder=">, <, 10-20"
                         [attr.aria-label]="
-                          filterText() +
-                          ' ' +
-                          c.header +
-                          ', aceita maior que, menor que e intervalos'
+                          msg().numberFilter(filterText() ?? msg().filter, c.header)
                         "
                         [value]="filters()[c.key] || ''"
                         (input)="setFilter(c.key, $any($event.target).value)"
@@ -783,7 +784,7 @@ class MxDataGrid {
                       mxCheckbox
                       tabindex="-1"
                       [checked]="isSelected(row)"
-                      [attr.aria-label]="selectRowText() + ' ' + rowLabel(row)"
+                      [attr.aria-label]="(selectRowText() ?? msg().selectRow) + ' ' + rowLabel(row)"
                       (change)="toggleRow(row)"
                     />
                   } @else {
@@ -793,7 +794,7 @@ class MxDataGrid {
                       tabindex="-1"
                       [name]="radioName"
                       [checked]="isSelected(row)"
-                      [attr.aria-label]="selectRowText() + ' ' + rowLabel(row)"
+                      [attr.aria-label]="(selectRowText() ?? msg().selectRow) + ' ' + rowLabel(row)"
                       (change)="toggleRow(row)"
                     />
                   }
@@ -829,7 +830,7 @@ class MxDataGrid {
                 [attr.colspan]="colCount()"
                 [attr.data-cell]="headerRows() + ':0'"
               >
-                {{ loading() ? loadingText() : emptyText() }}
+                {{ loading() ? (loadingText() ?? msg().loading) : (emptyText() ?? msg().empty) }}
               </td>
             </tr>
           }
@@ -849,7 +850,7 @@ class MxDataGrid {
       <span class="mx-grid-status" aria-live="polite">{{ statusText() }}</span>
       <ng-content select="[mxGridFooter]" />
     </div>
-    <span class="mx-visually-hidden" [id]="resizeHintId">{{ resizeHint() }}</span>
+    <span class="mx-visually-hidden" [id]="resizeHintId">{{ (resizeHint() ?? msg().resizeHint) }}</span>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MxCheckbox, selector: "input[type=checkbox][mxCheckbox]", inputs: ["size", "indeterminate"], exportAs: ["mxCheckbox"] }, { kind: "directive", type: i1.MxMenuTrigger, selector: "[mxMenuTriggerFor]", exportAs: ["mxMenuTrigger"] }, { kind: "directive", type: i1.MxMenu, selector: "[mxMenu]", exportAs: ["mxMenu"] }, { kind: "directive", type: i1.MxMenuItemCheckbox, selector: "[mxMenuItemCheckbox]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxDataGrid, decorators: [{
@@ -879,7 +880,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                 stroke-linejoin="round"
               />
             </svg>
-            {{ columnsText() }}
+            {{ (columnsText() ?? msg().columns) }}
           </button>
           <ng-template #colunas>
             <div mxMenu>
@@ -909,7 +910,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
       <table
         class="mx-grid-table"
         role="grid"
-        [attr.aria-label]="ariaLabel()"
+        [attr.aria-label]="(ariaLabel() ?? msg().label)"
         [attr.aria-rowcount]="rowCount()"
         [attr.aria-colcount]="colCount()"
         [attr.aria-multiselectable]="selection() === 'multiple' ? 'true' : null"
@@ -942,12 +943,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                     mxCheckbox
                     [checked]="allSelected()"
                     [indeterminate]="someSelected()"
-                    [attr.aria-label]="selectAllText()"
+                    [attr.aria-label]="(selectAllText() ?? msg().selectAll)"
                     (change)="toggleAll()"
                     tabindex="-1"
                   />
                 } @else {
-                  <span class="mx-visually-hidden">{{ selectText() }}</span>
+                  <span class="mx-visually-hidden">{{ (selectText() ?? msg().selection) }}</span>
                 }
               </th>
             }
@@ -1037,11 +1038,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                       <select
                         class="mx-grid-filter"
                         tabindex="-1"
-                        [attr.aria-label]="filterText() + ' ' + c.header"
+                        [attr.aria-label]="(filterText() ?? msg().filter) + ' ' + c.header"
                         [value]="filters()[c.key] || ''"
                         (change)="setFilter(c.key, $any($event.target).value)"
                       >
-                        <option value="">{{ allText() }}</option>
+                        <option value="">{{ (allText() ?? msg().all) }}</option>
                         @for (o of optionsOf(c); track o) {
                           <option [value]="o" [selected]="filters()[c.key] === o">{{ o }}</option>
                         }
@@ -1052,7 +1053,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                         class="mx-grid-filter"
                         tabindex="-1"
                         type="search"
-                        [attr.aria-label]="filterText() + ' ' + c.header"
+                        [attr.aria-label]="(filterText() ?? msg().filter) + ' ' + c.header"
                         [value]="filters()[c.key] || ''"
                         (input)="setFilter(c.key, $any($event.target).value)"
                       />
@@ -1065,10 +1066,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                         inputmode="decimal"
                         placeholder=">, <, 10-20"
                         [attr.aria-label]="
-                          filterText() +
-                          ' ' +
-                          c.header +
-                          ', aceita maior que, menor que e intervalos'
+                          msg().numberFilter(filterText() ?? msg().filter, c.header)
                         "
                         [value]="filters()[c.key] || ''"
                         (input)="setFilter(c.key, $any($event.target).value)"
@@ -1107,7 +1105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                       mxCheckbox
                       tabindex="-1"
                       [checked]="isSelected(row)"
-                      [attr.aria-label]="selectRowText() + ' ' + rowLabel(row)"
+                      [attr.aria-label]="(selectRowText() ?? msg().selectRow) + ' ' + rowLabel(row)"
                       (change)="toggleRow(row)"
                     />
                   } @else {
@@ -1117,7 +1115,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                       tabindex="-1"
                       [name]="radioName"
                       [checked]="isSelected(row)"
-                      [attr.aria-label]="selectRowText() + ' ' + rowLabel(row)"
+                      [attr.aria-label]="(selectRowText() ?? msg().selectRow) + ' ' + rowLabel(row)"
                       (change)="toggleRow(row)"
                     />
                   }
@@ -1153,7 +1151,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                 [attr.colspan]="colCount()"
                 [attr.data-cell]="headerRows() + ':0'"
               >
-                {{ loading() ? loadingText() : emptyText() }}
+                {{ loading() ? (loadingText() ?? msg().loading) : (emptyText() ?? msg().empty) }}
               </td>
             </tr>
           }
@@ -1173,7 +1171,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
       <span class="mx-grid-status" aria-live="polite">{{ statusText() }}</span>
       <ng-content select="[mxGridFooter]" />
     </div>
-    <span class="mx-visually-hidden" [id]="resizeHintId">{{ resizeHint() }}</span>
+    <span class="mx-visually-hidden" [id]="resizeHintId">{{ (resizeHint() ?? msg().resizeHint) }}</span>
   `,
                 }]
         }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }], manual: [{ type: i0.Input, args: [{ isSignal: true, alias: "manual", required: false }] }], totalRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRows", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], virtual: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtual", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], columnMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnMenu", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], columnsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnsText", required: false }] }], filterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterText", required: false }] }], allText: [{ type: i0.Input, args: [{ isSignal: true, alias: "allText", required: false }] }], selectAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllText", required: false }] }], selectRowText: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectRowText", required: false }] }], selectText: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectText", required: false }] }], resizeHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeHint", required: false }] }], rowActivate: [{ type: i0.Output, args: ["rowActivate"] }], cells: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MxGridCell), { isSignal: true }] }], toolbarSlot: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MxGridToolbar), { isSignal: true }] }], scroller: [{ type: i0.ViewChild, args: ['scroller', { isSignal: true }] }] } });