mapa-library-ui 1.4.1 → 1.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +237 -2
- package/fesm2022/mapa-library-ui-src-lib-components-datepicker-range.mjs +158 -43
- package/fesm2022/mapa-library-ui-src-lib-components-datepicker-range.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-datepicker.mjs +97 -23
- package/fesm2022/mapa-library-ui-src-lib-components-datepicker.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-form.mjs +157 -42
- package/fesm2022/mapa-library-ui-src-lib-components-form.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-table.mjs +97 -23
- package/fesm2022/mapa-library-ui-src-lib-components-table.mjs.map +1 -1
- package/fesm2022/mapa-library-ui.mjs +158 -43
- package/fesm2022/mapa-library-ui.mjs.map +1 -1
- package/index.d.ts +24 -7
- package/mapa-library-ui-1.5.1.tgz +0 -0
- package/package.json +2 -2
- package/src/lib/components/datepicker-range/index.d.ts +11 -5
- package/mapa-library-ui-1.4.1.tgz +0 -0
package/README.md
CHANGED
|
@@ -1,3 +1,238 @@
|
|
|
1
|
-
#
|
|
1
|
+
# mapa-library-ui
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Design system do **Mapa — Human Data Science**: componentes Angular Material customizados,
|
|
4
|
+
serviços, pipes e utilitários consumidos pelo shell e por todos os remotes do ecossistema.
|
|
5
|
+
|
|
6
|
+
Construído com **ng-packagr** (Angular 20.3). Distribuído em **subpacotes** (_secondary entry points_)
|
|
7
|
+
para que cada consumidor importe apenas o que usa.
|
|
8
|
+
|
|
9
|
+
- Pacote npm: `mapa-library-ui`
|
|
10
|
+
- Versão atual: **1.5.0**
|
|
11
|
+
- Componentes: **standalone** (sem `NgModule`), prefixo de seletor `mapa-*`
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## Instalação
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install mapa-library-ui
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
A biblioteca declara Angular e demais bibliotecas como **`peerDependencies`** — o consumidor é quem
|
|
22
|
+
fixa as versões. Garanta que o app já tenha (ou instale):
|
|
23
|
+
|
|
24
|
+
```jsonc
|
|
25
|
+
"@angular/animations": "^20.3.0",
|
|
26
|
+
"@angular/cdk": "^20.2.0",
|
|
27
|
+
"@angular/common": "^20.3.0",
|
|
28
|
+
"@angular/core": "^20.3.0",
|
|
29
|
+
"@angular/forms": "^20.3.0",
|
|
30
|
+
"@angular/localize": "^20.3.0",
|
|
31
|
+
"@angular/material": "^20.2.0",
|
|
32
|
+
"@angular/router": "^20.3.0",
|
|
33
|
+
"apexcharts": "^5.10.3",
|
|
34
|
+
"ng-apexcharts": "^2.3.0",
|
|
35
|
+
"ngx-mask": "^20.0.3",
|
|
36
|
+
"ngx-mat-select-search": "^8.0.4",
|
|
37
|
+
"mapa-frontend-i18n": "^2.0.0",
|
|
38
|
+
"rxjs": "^7.8.2",
|
|
39
|
+
"ts-md5": "^1.3.1"
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
> A lib usa **`mapa-frontend-i18n`** para os textos de UI. Mudanças que dependem de novas strings
|
|
43
|
+
> exigem publicar o `mapa-frontend-i18n` **antes**.
|
|
44
|
+
|
|
45
|
+
### Pré-requisitos no app consumidor
|
|
46
|
+
|
|
47
|
+
- **Animações** habilitadas: `provideAnimations()` (necessário para Material).
|
|
48
|
+
- Tema do **Angular Material** configurado no app.
|
|
49
|
+
- Para datepickers, definir `MAT_DATE_FORMATS` (a lib trabalha no formato `DD/MM/YYYY`).
|
|
50
|
+
|
|
51
|
+
---
|
|
52
|
+
|
|
53
|
+
## Uso
|
|
54
|
+
|
|
55
|
+
Os componentes são **standalone** — importe diretamente da subpath correspondente e adicione ao
|
|
56
|
+
array `imports` do seu componente/rota:
|
|
57
|
+
|
|
58
|
+
```ts
|
|
59
|
+
import { Component } from '@angular/core';
|
|
60
|
+
import { ButtonComponent } from 'mapa-library-ui/button';
|
|
61
|
+
import { MapaTableComponent } from 'mapa-library-ui/table';
|
|
62
|
+
import { TableColumn } from 'mapa-library-ui'; // interfaces/utilitários vêm da raiz
|
|
63
|
+
|
|
64
|
+
@Component({
|
|
65
|
+
selector: 'app-example',
|
|
66
|
+
standalone: true,
|
|
67
|
+
imports: [ButtonComponent, MapaTableComponent],
|
|
68
|
+
template: `
|
|
69
|
+
<mapa-button color="primary" (clicked)="onClick()">Salvar</mapa-button>
|
|
70
|
+
<mapa-table [columns]="columns" [data]="rows"></mapa-table>
|
|
71
|
+
`,
|
|
72
|
+
})
|
|
73
|
+
export class ExampleComponent {
|
|
74
|
+
columns: TableColumn[] = [/* ... */];
|
|
75
|
+
rows = [/* ... */];
|
|
76
|
+
onClick() {}
|
|
77
|
+
}
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
> **Importe sempre da subpath** (`mapa-library-ui/button`, `mapa-library-ui/table`, …).
|
|
81
|
+
> **Interfaces, elements, pipes e helpers de i18n** ficam na raiz (`mapa-library-ui`).
|
|
82
|
+
|
|
83
|
+
### Internacionalização (i18n)
|
|
84
|
+
|
|
85
|
+
Os textos padrão são **pt-BR**. Para sobrescrevê-los, há dois caminhos:
|
|
86
|
+
|
|
87
|
+
**1. Estático, na inicialização** — via provider:
|
|
88
|
+
|
|
89
|
+
```ts
|
|
90
|
+
import { provideMapaUiTexts } from 'mapa-library-ui';
|
|
91
|
+
|
|
92
|
+
export const appConfig: ApplicationConfig = {
|
|
93
|
+
providers: [
|
|
94
|
+
provideMapaUiTexts({
|
|
95
|
+
filters: { clear: 'Clear filters', submit: 'Filter' },
|
|
96
|
+
validation: { required: 'Required field' },
|
|
97
|
+
}),
|
|
98
|
+
],
|
|
99
|
+
};
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
**2. Dinâmico, em runtime** — via `MapaI18nService` (ex.: troca de idioma):
|
|
103
|
+
|
|
104
|
+
```ts
|
|
105
|
+
import { MapaI18nService, PartialMapaUiTexts } from 'mapa-library-ui';
|
|
106
|
+
|
|
107
|
+
constructor(private i18n: MapaI18nService) {}
|
|
108
|
+
|
|
109
|
+
setEnglish() {
|
|
110
|
+
const texts: PartialMapaUiTexts = { common: { selectAll: 'Select all' } };
|
|
111
|
+
this.i18n.setTexts(texts); // faz merge sobre os defaults pt-BR
|
|
112
|
+
}
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
Os textos informados sofrem _merge_ sobre os defaults — você só precisa enviar as chaves que quer
|
|
116
|
+
alterar. Grupos disponíveis: `common`, `filters`, `datepicker`, `capability`, `paginator`,
|
|
117
|
+
`warning`, `table`, `validation`.
|
|
118
|
+
|
|
119
|
+
---
|
|
120
|
+
|
|
121
|
+
## Subpacotes (secondary entry points)
|
|
122
|
+
|
|
123
|
+
Cada componente/recurso é importado por uma subpath própria. Por isso os remotes compartilham a lib
|
|
124
|
+
com `includeSecondaries: true` no Module Federation.
|
|
125
|
+
|
|
126
|
+
| Subpath | Seletor / export principal | Descrição |
|
|
127
|
+
|---|---|---|
|
|
128
|
+
| `mapa-library-ui` | interfaces, `elements`, pipes, utils, helpers de i18n | Tipos e utilitários transversais (`TableColumn`, `DialogData`, `ElementOption`, `provideMapaUiTexts`, `MapaI18nService`, pipes de CPF/data…) |
|
|
129
|
+
| `/authorize` | guard de rota | Guard de autorização (`canActivate`) |
|
|
130
|
+
| `/benchmarking` | `<mapa-benchmark-chart>`, `<mapa-benchmark-indicator>` | Gráfico e indicador de benchmarking |
|
|
131
|
+
| `/breadcrumb` | `<mapa-breadcrumb>` | Trilha de navegação |
|
|
132
|
+
| `/button` | `<mapa-button>` | Botão (`color`, `disabled`, `clicked`) |
|
|
133
|
+
| `/button-icon` | `<mapa-button-icon>` | Botão com ícone |
|
|
134
|
+
| `/capability` | `<mapa-capability-*>` | Família de componentes de competências (comparativo, indicadores, intervalos, detalhe…) |
|
|
135
|
+
| `/chart` | `<mapa-chart>` | Gráfico genérico (ApexCharts) |
|
|
136
|
+
| `/checkbox` | `<mapa-checkbox>` | Checkbox |
|
|
137
|
+
| `/datepicker` | `<mapa-datepicker>` | Seletor de data |
|
|
138
|
+
| `/datepicker-range` | `<mapa-datepicker-range>` | Seletor de intervalo de datas |
|
|
139
|
+
| `/dialog` | `<mapa-dialog>`, `openDialog()` | Diálogo + helper para abrir via `MatDialog` |
|
|
140
|
+
| `/dropdown` | `<mapa-dropdown>` | Select com busca |
|
|
141
|
+
| `/dropdown-tree` | `<mapa-dropdown-tree>`, `DataNode` | Select em árvore |
|
|
142
|
+
| `/empty` | `<mapa-empty>` | Estado vazio |
|
|
143
|
+
| `/filters` | `<mapa-filters>` | Barra de filtros |
|
|
144
|
+
| `/form` | `<mapa-form>` | Formulário dinâmico |
|
|
145
|
+
| `/group-report` | `<mapa-group-report>` | Relatório de grupo |
|
|
146
|
+
| `/icon` | `<mapa-icon>` | Ícone |
|
|
147
|
+
| `/input` | `<mapa-input>` | Campo de texto |
|
|
148
|
+
| `/menu` | `<mapa-menu>`, `MenuItem`, `MenuActionEvent` | Menu de ações |
|
|
149
|
+
| `/nav-list` | `<mapa-nav-list>` | Lista de navegação |
|
|
150
|
+
| `/radio-button` | `<mapa-radio-button>` | Radio button |
|
|
151
|
+
| `/report-item` | `<mapa-report-item>` | Item de relatório |
|
|
152
|
+
| `/scale` | `<mapa-scale>`, `<mapa-progressbar>`, `<mapa-details>` | Escala e barras de progresso |
|
|
153
|
+
| `/scale-parameterization` | `<mapa-scale-parameterization>` | Parametrização de escalas |
|
|
154
|
+
| `/services` | `LoaderService` | Serviços de infraestrutura (loader) |
|
|
155
|
+
| `/slide-toggle` | `<mapa-slide-toggle>` | Slide toggle |
|
|
156
|
+
| `/svg-icon` | `<mapa-svg-icon>` | Ícone SVG inline |
|
|
157
|
+
| `/table` | `<mapa-table>`, `customPaginatorFactory` | Tabela com paginação, ordenação e seleção |
|
|
158
|
+
| `/tag` | `<mapa-tag>` | Tag/chip |
|
|
159
|
+
| `/textarea` | `<mapa-textarea>` | Área de texto |
|
|
160
|
+
| `/tooltip` | diretiva + componente de tooltip | Tooltip customizado |
|
|
161
|
+
| `/warning` | `<mapa-warning>` | Aviso/alerta |
|
|
162
|
+
|
|
163
|
+
> A lista canônica de subpaths está no campo `exports` de
|
|
164
|
+
> [`package.json`](package.json). O surface público da raiz está em
|
|
165
|
+
> [`src/public-api.ts`](src/public-api.ts).
|
|
166
|
+
|
|
167
|
+
---
|
|
168
|
+
|
|
169
|
+
## Desenvolvimento
|
|
170
|
+
|
|
171
|
+
Não há dev server da própria biblioteca. Desenvolve-se através do app de **documentação** (vitrine de
|
|
172
|
+
componentes) ou via `watch` + consumidor linkado.
|
|
173
|
+
|
|
174
|
+
Comandos (rodar a partir da **raiz do workspace**, `mapa-frontend-library/`):
|
|
175
|
+
|
|
176
|
+
| Comando | O que faz |
|
|
177
|
+
|---|---|
|
|
178
|
+
| `ng serve --project=documentation` | Sobe o app de documentação em **http://localhost:4444/** (hot reload) |
|
|
179
|
+
| `npm run build:lib` | Build da lib → `dist/mapa-library-ui` |
|
|
180
|
+
| `npm run watch` | Build da lib em watch (`--configuration development`) |
|
|
181
|
+
| `npm test` | Testes (Karma + Jasmine) |
|
|
182
|
+
|
|
183
|
+
### Adicionar um novo componente
|
|
184
|
+
|
|
185
|
+
1. `ng generate component components/<nome> --project=mapa-library-ui --no-standalone` (ou standalone — o padrão atual da lib é **standalone**).
|
|
186
|
+
2. Crie a pasta `src/` dentro de `components/<nome>` e mova os arquivos do componente para ela.
|
|
187
|
+
3. Copie `ng-package.json` e `public-api.ts` de um componente existente, ajustando os caminhos/exports para o novo componente.
|
|
188
|
+
4. Registre o componente no `exports` de [`package.json`](package.json) (novo secondary entry point) e, se for surface público da raiz, em [`src/public-api.ts`](src/public-api.ts).
|
|
189
|
+
5. Documente o componente no projeto `documentation` (adicione a entrada no `drawer` e a rota).
|
|
190
|
+
|
|
191
|
+
> Exports só ficam acessíveis ao consumidor se entrarem no **secondary entry point** correto
|
|
192
|
+
> (`ng-package.json` + `public-api.ts`) **e** no `exports` do `package.json`.
|
|
193
|
+
|
|
194
|
+
---
|
|
195
|
+
|
|
196
|
+
## Build & publicação
|
|
197
|
+
|
|
198
|
+
```bash
|
|
199
|
+
# 1. Suba a versão em projects/mapa-library-ui/package.json
|
|
200
|
+
# 2. Build
|
|
201
|
+
npm run build:lib
|
|
202
|
+
|
|
203
|
+
# 3. Publique a partir do artefato gerado
|
|
204
|
+
npm publish ./dist/mapa-library-ui
|
|
205
|
+
|
|
206
|
+
# 4. Suba a dependência nos consumidores (shell + remotes)
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
> A publicação também roda na pipeline (`azure-pipelines.yml`) ao integrar em `develop`:
|
|
210
|
+
> build → `npm pack` → publish no registro NPM da Mapa.
|
|
211
|
+
|
|
212
|
+
Ao depender de novas strings de UI, **publique `mapa-frontend-i18n` antes** de publicar esta lib.
|
|
213
|
+
|
|
214
|
+
---
|
|
215
|
+
|
|
216
|
+
## Fluxo de trabalho (branch / PR)
|
|
217
|
+
|
|
218
|
+
Branch a partir de `develop` (`feature/{taskid}` ou `bugfix/{taskid}`) → PR para `develop` com o work
|
|
219
|
+
item vinculado. Lembre de **publicar a nova versão** quando o consumo depender dela.
|
|
220
|
+
|
|
221
|
+
---
|
|
222
|
+
|
|
223
|
+
## Estrutura
|
|
224
|
+
|
|
225
|
+
```
|
|
226
|
+
projects/mapa-library-ui/
|
|
227
|
+
├── src/
|
|
228
|
+
│ ├── public-api.ts # surface público da raiz
|
|
229
|
+
│ ├── <subpath>.ts # reexport de cada secondary entry point
|
|
230
|
+
│ └── lib/
|
|
231
|
+
│ ├── components/<nome>/ # componentes (cada um com ng-package.json + public-api.ts)
|
|
232
|
+
│ └── core/ # elements, interfaces, services, pipes, directives, i18n, utils
|
|
233
|
+
├── ng-package.json # config ng-packagr (saída: dist/mapa-library-ui)
|
|
234
|
+
├── package.json # nome/versão, peerDependencies, exports (subpaths)
|
|
235
|
+
└── tsconfig.lib(.prod).json
|
|
236
|
+
```
|
|
237
|
+
|
|
238
|
+
O app de demonstração fica em `projects/documentation/` (porta **4444**).
|
|
@@ -4,7 +4,7 @@ import { InjectionToken, inject, Injector, signal, Optional, Inject, Injectable,
|
|
|
4
4
|
import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
5
5
|
import * as i2 from '@angular/forms';
|
|
6
6
|
import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
|
|
7
|
-
import { provideNativeDateAdapter } from '@angular/material/core';
|
|
7
|
+
import { DateAdapter, provideNativeDateAdapter } from '@angular/material/core';
|
|
8
8
|
import * as i3 from '@angular/material/datepicker';
|
|
9
9
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
10
10
|
import * as i4 from '@angular/material/form-field';
|
|
@@ -14,9 +14,11 @@ import { MatIconModule } from '@angular/material/icon';
|
|
|
14
14
|
import * as i6 from '@angular/material/input';
|
|
15
15
|
import { MatInputModule } from '@angular/material/input';
|
|
16
16
|
import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
|
|
17
|
-
import {
|
|
17
|
+
import { getStoredAppLanguage, getIntlLocale, getMapaUiTexts } from 'mapa-frontend-i18n';
|
|
18
18
|
|
|
19
19
|
const DAY_MONTH_YEAR_PATTERN = /^(\d{2})\/(\d{2})\/(\d{4})$/;
|
|
20
|
+
const MONTH_DAY_YEAR_PATTERN = /^(\d{2})\/(\d{2})\/(\d{4})$/;
|
|
21
|
+
const DOCS_LANGUAGE_STORAGE_KEY = "mapa-library-ui-docs-language";
|
|
20
22
|
function isValidDate(date) {
|
|
21
23
|
return !Number.isNaN(date.getTime());
|
|
22
24
|
}
|
|
@@ -29,7 +31,93 @@ function formatDateAsDayMonthYear(date) {
|
|
|
29
31
|
const year = `${date.getFullYear()}`;
|
|
30
32
|
return `${day}/${month}/${year}`;
|
|
31
33
|
}
|
|
32
|
-
function
|
|
34
|
+
function formatDateAsMonthDayYear(date) {
|
|
35
|
+
const day = `${date.getDate()}`.padStart(2, "0");
|
|
36
|
+
const month = `${date.getMonth() + 1}`.padStart(2, "0");
|
|
37
|
+
const year = `${date.getFullYear()}`;
|
|
38
|
+
return `${month}/${day}/${year}`;
|
|
39
|
+
}
|
|
40
|
+
function normalizeDateLocale(value) {
|
|
41
|
+
if (typeof value !== "string") {
|
|
42
|
+
return "pt-BR";
|
|
43
|
+
}
|
|
44
|
+
const normalizedValue = value.trim().toLowerCase();
|
|
45
|
+
if (normalizedValue.startsWith("en")) {
|
|
46
|
+
return "en";
|
|
47
|
+
}
|
|
48
|
+
if (normalizedValue.startsWith("es")) {
|
|
49
|
+
return "es";
|
|
50
|
+
}
|
|
51
|
+
return "pt-BR";
|
|
52
|
+
}
|
|
53
|
+
function getDocsStoredLanguage() {
|
|
54
|
+
if (typeof window === "undefined") {
|
|
55
|
+
return null;
|
|
56
|
+
}
|
|
57
|
+
try {
|
|
58
|
+
return window.localStorage.getItem(DOCS_LANGUAGE_STORAGE_KEY);
|
|
59
|
+
}
|
|
60
|
+
catch {
|
|
61
|
+
return null;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
function getActiveDateLocale() {
|
|
65
|
+
return normalizeDateLocale(getDocsStoredLanguage() ?? getStoredAppLanguage());
|
|
66
|
+
}
|
|
67
|
+
function isMonthFirstDateLocale(locale = getActiveDateLocale()) {
|
|
68
|
+
return normalizeDateLocale(locale) === "en";
|
|
69
|
+
}
|
|
70
|
+
function getActiveDateFormat(locale = getActiveDateLocale()) {
|
|
71
|
+
return isMonthFirstDateLocale(locale) ? "MM/DD/YYYY" : "DD/MM/YYYY";
|
|
72
|
+
}
|
|
73
|
+
function getActiveMaterialDateFormat(locale = getActiveDateLocale()) {
|
|
74
|
+
return isMonthFirstDateLocale(locale) ? "MM/dd/yyyy" : "dd/MM/yyyy";
|
|
75
|
+
}
|
|
76
|
+
function getDateInputMask(_locale = getActiveDateLocale()) {
|
|
77
|
+
return "00/00/0000";
|
|
78
|
+
}
|
|
79
|
+
function formatDateForLocale(date, locale = getActiveDateLocale()) {
|
|
80
|
+
return isMonthFirstDateLocale(locale)
|
|
81
|
+
? formatDateAsMonthDayYear(date)
|
|
82
|
+
: formatDateAsDayMonthYear(date);
|
|
83
|
+
}
|
|
84
|
+
function parseOrderedDate(value, pattern, order) {
|
|
85
|
+
const match = pattern.exec(value.trim());
|
|
86
|
+
if (!match) {
|
|
87
|
+
return null;
|
|
88
|
+
}
|
|
89
|
+
const [, firstValue, secondValue, yearValue] = match;
|
|
90
|
+
const year = Number(yearValue);
|
|
91
|
+
const month = Number(order === "month-first" ? firstValue : secondValue);
|
|
92
|
+
const day = Number(order === "month-first" ? secondValue : firstValue);
|
|
93
|
+
const parsedDate = new Date(year, month - 1, day);
|
|
94
|
+
if (parsedDate.getFullYear() !== year ||
|
|
95
|
+
parsedDate.getMonth() !== month - 1 ||
|
|
96
|
+
parsedDate.getDate() !== day) {
|
|
97
|
+
return null;
|
|
98
|
+
}
|
|
99
|
+
return parsedDate;
|
|
100
|
+
}
|
|
101
|
+
function parseLocaleDateValue(value, locale = getActiveDateLocale()) {
|
|
102
|
+
const normalizedLocale = normalizeDateLocale(locale);
|
|
103
|
+
const parsers = normalizedLocale === "en"
|
|
104
|
+
? [
|
|
105
|
+
() => parseOrderedDate(value, MONTH_DAY_YEAR_PATTERN, "month-first"),
|
|
106
|
+
() => parseOrderedDate(value, DAY_MONTH_YEAR_PATTERN, "day-first"),
|
|
107
|
+
]
|
|
108
|
+
: [
|
|
109
|
+
() => parseOrderedDate(value, DAY_MONTH_YEAR_PATTERN, "day-first"),
|
|
110
|
+
() => parseOrderedDate(value, MONTH_DAY_YEAR_PATTERN, "month-first"),
|
|
111
|
+
];
|
|
112
|
+
for (const parse of parsers) {
|
|
113
|
+
const parsedDate = parse();
|
|
114
|
+
if (parsedDate) {
|
|
115
|
+
return parsedDate;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
return null;
|
|
119
|
+
}
|
|
120
|
+
function parseDateValue(value, locale = getActiveDateLocale()) {
|
|
33
121
|
if (value instanceof Date) {
|
|
34
122
|
return isValidDate(value) ? new Date(value.getTime()) : null;
|
|
35
123
|
}
|
|
@@ -44,11 +132,11 @@ function parseDateValue(value) {
|
|
|
44
132
|
if (!trimmedValue) {
|
|
45
133
|
return null;
|
|
46
134
|
}
|
|
47
|
-
const
|
|
48
|
-
if (
|
|
49
|
-
return
|
|
135
|
+
const localeDate = parseLocaleDateValue(trimmedValue, locale);
|
|
136
|
+
if (localeDate) {
|
|
137
|
+
return localeDate;
|
|
50
138
|
}
|
|
51
|
-
if (DAY_MONTH_YEAR_PATTERN.test(trimmedValue)) {
|
|
139
|
+
if (DAY_MONTH_YEAR_PATTERN.test(trimmedValue) || MONTH_DAY_YEAR_PATTERN.test(trimmedValue)) {
|
|
52
140
|
return null;
|
|
53
141
|
}
|
|
54
142
|
const parsedDate = new Date(trimmedValue);
|
|
@@ -58,21 +146,7 @@ function isDateValue(value) {
|
|
|
58
146
|
return parseDateValue(value) !== null;
|
|
59
147
|
}
|
|
60
148
|
function parseBrazilianDate(value) {
|
|
61
|
-
|
|
62
|
-
if (!match) {
|
|
63
|
-
return null;
|
|
64
|
-
}
|
|
65
|
-
const [, dayValue, monthValue, yearValue] = match;
|
|
66
|
-
const day = Number(dayValue);
|
|
67
|
-
const month = Number(monthValue);
|
|
68
|
-
const year = Number(yearValue);
|
|
69
|
-
const parsedDate = new Date(year, month - 1, day);
|
|
70
|
-
if (parsedDate.getFullYear() !== year ||
|
|
71
|
-
parsedDate.getMonth() !== month - 1 ||
|
|
72
|
-
parsedDate.getDate() !== day) {
|
|
73
|
-
return null;
|
|
74
|
-
}
|
|
75
|
-
return parsedDate;
|
|
149
|
+
return parseOrderedDate(value, DAY_MONTH_YEAR_PATTERN, "day-first");
|
|
76
150
|
}
|
|
77
151
|
function normalizeDateInput(value) {
|
|
78
152
|
return parseDateValue(value);
|
|
@@ -91,7 +165,7 @@ function formatLocaleDate(value, dateStyle = "short") {
|
|
|
91
165
|
if (!date) {
|
|
92
166
|
return "";
|
|
93
167
|
}
|
|
94
|
-
return new Intl.DateTimeFormat(getIntlLocale(
|
|
168
|
+
return new Intl.DateTimeFormat(getIntlLocale(getActiveDateLocale()), {
|
|
95
169
|
dateStyle,
|
|
96
170
|
}).format(date);
|
|
97
171
|
}
|
|
@@ -101,7 +175,7 @@ function formatLocaleDateTime(value, options = {}) {
|
|
|
101
175
|
return "";
|
|
102
176
|
}
|
|
103
177
|
const { dateStyle = "short", timeStyle = "short" } = options;
|
|
104
|
-
return new Intl.DateTimeFormat(getIntlLocale(
|
|
178
|
+
return new Intl.DateTimeFormat(getIntlLocale(getActiveDateLocale()), {
|
|
105
179
|
dateStyle,
|
|
106
180
|
timeStyle,
|
|
107
181
|
}).format(date);
|
|
@@ -195,27 +269,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
195
269
|
args: [MAPA_UI_TEXTS]
|
|
196
270
|
}] }] });
|
|
197
271
|
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
272
|
+
function getMapaDatepickerRangeFormats() {
|
|
273
|
+
const dateInput = getActiveMaterialDateFormat();
|
|
274
|
+
return {
|
|
275
|
+
parse: {
|
|
276
|
+
dateInput,
|
|
277
|
+
},
|
|
278
|
+
display: {
|
|
279
|
+
dateInput,
|
|
280
|
+
monthYearLabel: "MMM YYYY",
|
|
281
|
+
dateA11yLabel: "LL",
|
|
282
|
+
monthYearA11yLabel: "MMMM YYYY",
|
|
283
|
+
},
|
|
284
|
+
};
|
|
285
|
+
}
|
|
209
286
|
class MapaDatepickerRange {
|
|
210
287
|
constructor(i18n, cdr) {
|
|
211
288
|
this.i18n = i18n;
|
|
212
289
|
this.cdr = cdr;
|
|
213
290
|
this.destroyRef = inject(DestroyRef);
|
|
214
|
-
this.
|
|
291
|
+
this.dateAdapter = inject((DateAdapter));
|
|
215
292
|
this.emptyValue = {
|
|
216
293
|
startDate: null,
|
|
217
294
|
endDate: null,
|
|
218
295
|
};
|
|
296
|
+
this.currentLocale = null;
|
|
219
297
|
this.formDatepicker = new FormGroup({
|
|
220
298
|
startDate: new FormControl(null),
|
|
221
299
|
endDate: new FormControl(null),
|
|
@@ -228,7 +306,14 @@ class MapaDatepickerRange {
|
|
|
228
306
|
get texts() {
|
|
229
307
|
return this.i18n.textsSignal();
|
|
230
308
|
}
|
|
309
|
+
get dateInputMask() {
|
|
310
|
+
return getDateInputMask(this.getLocale());
|
|
311
|
+
}
|
|
312
|
+
get activeDateFormat() {
|
|
313
|
+
return getActiveDateFormat(this.getLocale());
|
|
314
|
+
}
|
|
231
315
|
ngOnInit() {
|
|
316
|
+
this.syncLocaleSettings();
|
|
232
317
|
if (!this.element?.key) {
|
|
233
318
|
throw new Error("mapa-datepicker-range requires element.key to resolve the target control.");
|
|
234
319
|
}
|
|
@@ -253,6 +338,9 @@ class MapaDatepickerRange {
|
|
|
253
338
|
this.updateExternalFromDatepicker(value);
|
|
254
339
|
});
|
|
255
340
|
}
|
|
341
|
+
ngDoCheck() {
|
|
342
|
+
this.syncLocaleSettings();
|
|
343
|
+
}
|
|
256
344
|
get startDatePlaceholder() {
|
|
257
345
|
return this.texts.datepicker.startDatePlaceholder;
|
|
258
346
|
}
|
|
@@ -260,6 +348,7 @@ class MapaDatepickerRange {
|
|
|
260
348
|
return this.texts.datepicker.endDatePlaceholder;
|
|
261
349
|
}
|
|
262
350
|
syncFromExternal(value) {
|
|
351
|
+
this.syncLocaleSettings();
|
|
263
352
|
const nextValue = value ?? this.emptyValue;
|
|
264
353
|
const displayValue = {
|
|
265
354
|
startDate: nextValue.startDate,
|
|
@@ -282,6 +371,7 @@ class MapaDatepickerRange {
|
|
|
282
371
|
this.cdr.markForCheck();
|
|
283
372
|
}
|
|
284
373
|
updateExternalFromDisplay(value) {
|
|
374
|
+
this.syncLocaleSettings();
|
|
285
375
|
const nextValue = {
|
|
286
376
|
startDate: value.startDate ?? null,
|
|
287
377
|
endDate: value.endDate ?? null,
|
|
@@ -295,12 +385,13 @@ class MapaDatepickerRange {
|
|
|
295
385
|
this.cdr.markForCheck();
|
|
296
386
|
}
|
|
297
387
|
updateExternalFromDatepicker(value) {
|
|
388
|
+
this.syncLocaleSettings();
|
|
298
389
|
if (!value.startDate || !value.endDate) {
|
|
299
390
|
return;
|
|
300
391
|
}
|
|
301
392
|
const nextValue = {
|
|
302
|
-
startDate:
|
|
303
|
-
endDate:
|
|
393
|
+
startDate: formatDateForLocale(value.startDate, this.getLocale()),
|
|
394
|
+
endDate: formatDateForLocale(value.endDate, this.getLocale()),
|
|
304
395
|
};
|
|
305
396
|
this.patchExternalValue(nextValue);
|
|
306
397
|
this.formDisplay.patchValue(nextValue, { emitEvent: false });
|
|
@@ -333,11 +424,35 @@ class MapaDatepickerRange {
|
|
|
333
424
|
this.patchExternalValue(defaultRange);
|
|
334
425
|
this.cdr.markForCheck();
|
|
335
426
|
}
|
|
427
|
+
getLocale() {
|
|
428
|
+
return this.currentLocale ?? getActiveDateLocale();
|
|
429
|
+
}
|
|
430
|
+
syncLocaleSettings() {
|
|
431
|
+
const nextLocale = getActiveDateLocale();
|
|
432
|
+
if (this.currentLocale === nextLocale) {
|
|
433
|
+
return;
|
|
434
|
+
}
|
|
435
|
+
this.currentLocale = nextLocale;
|
|
436
|
+
this.dateAdapter.setLocale(nextLocale);
|
|
437
|
+
const datepickerValue = this.formDatepicker.getRawValue();
|
|
438
|
+
const hasDateRange = !!datepickerValue.startDate && !!datepickerValue.endDate;
|
|
439
|
+
if (hasDateRange) {
|
|
440
|
+
const formattedRange = {
|
|
441
|
+
startDate: formatDateForLocale(datepickerValue.startDate, nextLocale),
|
|
442
|
+
endDate: formatDateForLocale(datepickerValue.endDate, nextLocale),
|
|
443
|
+
};
|
|
444
|
+
this.formDisplay.patchValue(formattedRange, { emitEvent: false });
|
|
445
|
+
if (this.rangeControl) {
|
|
446
|
+
this.patchExternalValue(formattedRange);
|
|
447
|
+
}
|
|
448
|
+
}
|
|
449
|
+
this.cdr.markForCheck();
|
|
450
|
+
}
|
|
336
451
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDatepickerRange, deps: [{ token: MapaI18nService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
337
452
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaDatepickerRange, isStandalone: true, selector: "mapa-datepicker-range", inputs: { formGroup: "formGroup", element: "element" }, providers: [
|
|
338
453
|
provideNgxMask(),
|
|
339
|
-
provideNativeDateAdapter(
|
|
340
|
-
], ngImport: i0, template: "@if (element.label) {\n <div class=\"mapa-datepicker-range__label\">\n {{ element.label }}\n </div>\n}\n<section class=\"mapa-datepicker-range\" [formGroup]=\"formDisplay\">\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"mapa-datepicker-range__start-date\"\n >\n <input\n matInput\n formControlName=\"startDate\"\n [placeholder]=\"startDatePlaceholder\"\n mask=\"
|
|
454
|
+
provideNativeDateAdapter(getMapaDatepickerRangeFormats()),
|
|
455
|
+
], ngImport: i0, template: "@if (element.label) {\n <div class=\"mapa-datepicker-range__label\">\n {{ element.label }}\n </div>\n}\n<section class=\"mapa-datepicker-range\" [formGroup]=\"formDisplay\">\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"mapa-datepicker-range__start-date\"\n >\n <input\n matInput\n formControlName=\"startDate\"\n [placeholder]=\"startDatePlaceholder\"\n [mask]=\"dateInputMask\"\n [attr.data-date-format]=\"activeDateFormat\"\n />\n </mat-form-field>\n <div class=\"mapa-datepicker-range__divider\">–</div>\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"mapa-datepicker-range__end-date\"\n >\n <input\n matInput\n formControlName=\"endDate\"\n [placeholder]=\"endDatePlaceholder\"\n [mask]=\"dateInputMask\"\n [attr.data-date-format]=\"activeDateFormat\"\n />\n <mat-icon matSuffix (click)=\"cleanDatepicker()\">close</mat-icon>\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-date-range-picker touchUi=\"true\" #picker></mat-date-range-picker>\n </mat-form-field>\n</section>\n<section class=\"mapa--hidden\">\n <mat-form-field [formGroup]=\"formDatepicker\">\n <mat-date-range-input [rangePicker]=\"picker\">\n <input matStartDate formControlName=\"startDate\" />\n <input matEndDate formControlName=\"endDate\" />\n </mat-date-range-input>\n </mat-form-field>\n</section>\n", styles: [":host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mdc-text-field--outlined{background-color:#fff}:host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mat-mdc-text-field-wrapper{min-height:48px!important;height:48px!important}:host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-datepicker-range{display:flex;align-items:center;justify-content:flex-start;background-color:#fff;border:2px solid #a7aaad;border-radius:8px;padding:0 .75em;min-height:48px;height:48px;width:310px}:host ::ng-deep .mapa-datepicker-range__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-datepicker-range__start-date{width:100px!important;display:flex;align-items:center;align-self:stretch}:host ::ng-deep .mapa-datepicker-range__start-date .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker-range__start-date .mat-mdc-text-field-wrapper{width:100px!important}:host ::ng-deep .mapa-datepicker-range__end-date{width:100px!important;min-width:100px!important;display:flex;align-items:center;align-self:stretch}:host ::ng-deep .mapa-datepicker-range__end-date .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker-range__end-date .mat-mdc-text-field-wrapper{width:100px!important;min-width:100px!important}:host ::ng-deep .mapa-datepicker-range__divider{margin:0 8px}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix{display:flex;align-items:center;gap:4px;margin-left:96px;padding:unset!important}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix .mat-icon,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix .mat-datepicker-toggle{margin:0}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-flex{display:flex;align-items:center;min-height:100%}:host ::ng-deep .mapa-datepicker-range .mat-mdc-text-field-wrapper{padding:0!important;align-items:center!important;display:flex;background:#fff;min-height:100%}:host ::ng-deep .mapa-datepicker-range .mdc-notched-outline{display:none}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-infix{padding:0!important;min-height:unset!important;border-top:unset!important;display:flex;align-items:center;height:100%}:host ::ng-deep .mapa-datepicker-range .mat-mdc-input-element{align-self:center;height:100%;line-height:24px;margin:0!important;padding:0 8px 0 0!important;text-align:center;vertical-align:middle}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa--hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
341
456
|
}
|
|
342
457
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDatepickerRange, decorators: [{
|
|
343
458
|
type: Component,
|
|
@@ -351,8 +466,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
351
466
|
MatInputModule,
|
|
352
467
|
], providers: [
|
|
353
468
|
provideNgxMask(),
|
|
354
|
-
provideNativeDateAdapter(
|
|
355
|
-
], standalone: true, template: "@if (element.label) {\n <div class=\"mapa-datepicker-range__label\">\n {{ element.label }}\n </div>\n}\n<section class=\"mapa-datepicker-range\" [formGroup]=\"formDisplay\">\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"mapa-datepicker-range__start-date\"\n >\n <input\n matInput\n formControlName=\"startDate\"\n [placeholder]=\"startDatePlaceholder\"\n mask=\"
|
|
469
|
+
provideNativeDateAdapter(getMapaDatepickerRangeFormats()),
|
|
470
|
+
], standalone: true, template: "@if (element.label) {\n <div class=\"mapa-datepicker-range__label\">\n {{ element.label }}\n </div>\n}\n<section class=\"mapa-datepicker-range\" [formGroup]=\"formDisplay\">\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"mapa-datepicker-range__start-date\"\n >\n <input\n matInput\n formControlName=\"startDate\"\n [placeholder]=\"startDatePlaceholder\"\n [mask]=\"dateInputMask\"\n [attr.data-date-format]=\"activeDateFormat\"\n />\n </mat-form-field>\n <div class=\"mapa-datepicker-range__divider\">–</div>\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"mapa-datepicker-range__end-date\"\n >\n <input\n matInput\n formControlName=\"endDate\"\n [placeholder]=\"endDatePlaceholder\"\n [mask]=\"dateInputMask\"\n [attr.data-date-format]=\"activeDateFormat\"\n />\n <mat-icon matSuffix (click)=\"cleanDatepicker()\">close</mat-icon>\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-date-range-picker touchUi=\"true\" #picker></mat-date-range-picker>\n </mat-form-field>\n</section>\n<section class=\"mapa--hidden\">\n <mat-form-field [formGroup]=\"formDatepicker\">\n <mat-date-range-input [rangePicker]=\"picker\">\n <input matStartDate formControlName=\"startDate\" />\n <input matEndDate formControlName=\"endDate\" />\n </mat-date-range-input>\n </mat-form-field>\n</section>\n", styles: [":host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mdc-text-field--outlined{background-color:#fff}:host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mat-mdc-text-field-wrapper{min-height:48px!important;height:48px!important}:host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-datepicker-range{display:flex;align-items:center;justify-content:flex-start;background-color:#fff;border:2px solid #a7aaad;border-radius:8px;padding:0 .75em;min-height:48px;height:48px;width:310px}:host ::ng-deep .mapa-datepicker-range__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-datepicker-range__start-date{width:100px!important;display:flex;align-items:center;align-self:stretch}:host ::ng-deep .mapa-datepicker-range__start-date .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker-range__start-date .mat-mdc-text-field-wrapper{width:100px!important}:host ::ng-deep .mapa-datepicker-range__end-date{width:100px!important;min-width:100px!important;display:flex;align-items:center;align-self:stretch}:host ::ng-deep .mapa-datepicker-range__end-date .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker-range__end-date .mat-mdc-text-field-wrapper{width:100px!important;min-width:100px!important}:host ::ng-deep .mapa-datepicker-range__divider{margin:0 8px}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix{display:flex;align-items:center;gap:4px;margin-left:96px;padding:unset!important}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix .mat-icon,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix .mat-datepicker-toggle{margin:0}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-flex{display:flex;align-items:center;min-height:100%}:host ::ng-deep .mapa-datepicker-range .mat-mdc-text-field-wrapper{padding:0!important;align-items:center!important;display:flex;background:#fff;min-height:100%}:host ::ng-deep .mapa-datepicker-range .mdc-notched-outline{display:none}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-infix{padding:0!important;min-height:unset!important;border-top:unset!important;display:flex;align-items:center;height:100%}:host ::ng-deep .mapa-datepicker-range .mat-mdc-input-element{align-self:center;height:100%;line-height:24px;margin:0!important;padding:0 8px 0 0!important;text-align:center;vertical-align:middle}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa--hidden{display:none}\n"] }]
|
|
356
471
|
}], ctorParameters: () => [{ type: MapaI18nService }, { type: i0.ChangeDetectorRef }], propDecorators: { formGroup: [{
|
|
357
472
|
type: Input
|
|
358
473
|
}], element: [{
|
|
@@ -371,5 +486,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
371
486
|
* Generated bundle index. Do not edit.
|
|
372
487
|
*/
|
|
373
488
|
|
|
374
|
-
export {
|
|
489
|
+
export { MapaDatepickerRange, getMapaDatepickerRangeFormats };
|
|
375
490
|
//# sourceMappingURL=mapa-library-ui-src-lib-components-datepicker-range.mjs.map
|