matcha-components 20.12.0 → 20.15.0

package/src/lib/matcha-checkbox/checkbox.stories.ts

@@ -0,0 +1,391 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatchaCheckboxModule } from './checkbox.module';
+
+export default {
+    title: 'Atoms / Checkbox',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [
+                CommonModule,
+                FormsModule,
+                ReactiveFormsModule,
+                MatchaCheckboxModule
+            ],
+        }),
+    ],
+    args: {
+        color: 'accent',
+        disabled: false,
+        indeterminate: false,
+        label: 'Checkbox',
+    },
+    argTypes: {
+        color: {
+            description: 'Theme color palette',
+            control: 'select',
+            defaultValue: 'accent',
+            table: {
+                defaultValue: { summary: 'accent' },
+            },
+            options: [ '', 'red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange', 'primary', 'accent', 'warn', 'brown', 'grey', 'blue-grey', 'primary', 'accent', 'warn'],
+
+        },
+        disabled: {
+            control: 'boolean',
+        },
+        indeterminate: {
+            control: 'boolean',
+        },
+        label: {
+            control: 'text',
+        },
+    },
+    tags: ['autodocs'],
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+
+export const CheckboxControls: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+        <matcha-checkbox checked="true" ${args['color'] ? `color="${args['color']}"` : ''} ${args['disabled'] ? 'disabled' : ''}>${args['label']}</matcha-checkbox>
+        `,
+    }),
+    name: 'Checkbox Controls',
+};
+
+
+export const CheckboxBasic: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+        <div class="grid-md-4 gap-16">
+            <div class="flex-column gap-16">
+                <matcha-checkbox checked="true" disabled>Disabled</matcha-checkbox>
+                <matcha-checkbox checked="true" color="primary">Primary</matcha-checkbox>
+                <matcha-checkbox checked="true" color="accent">Accent</matcha-checkbox>
+                <matcha-checkbox checked="true" color="warn">Warn</matcha-checkbox>
+                <matcha-checkbox checked="true" color="red">Red</matcha-checkbox>
+                <matcha-checkbox checked="true" color="pink">Pink</matcha-checkbox>
+            </div>
+
+            <div class="flex-column gap-16">
+                <matcha-checkbox checked="true" color="purple">Purple</matcha-checkbox>
+                <matcha-checkbox checked="true" color="deep-purple">Deep Purple</matcha-checkbox>
+                <matcha-checkbox checked="true" color="indigo">Indigo</matcha-checkbox>
+                <matcha-checkbox checked="true" color="blue">Blue</matcha-checkbox>
+                <matcha-checkbox checked="true" color="light-blue">Light Blue</matcha-checkbox>
+                <matcha-checkbox checked="true" color="cyan">Cyan</matcha-checkbox>
+            </div>
+
+            <div class="flex-column gap-16">
+                <matcha-checkbox checked="true" color="teal">Teal</matcha-checkbox>
+                <matcha-checkbox checked="true" color="green">Green</matcha-checkbox>
+                <matcha-checkbox checked="true" color="light-green">Light Green</matcha-checkbox>
+                <matcha-checkbox checked="true" color="lime">Lime</matcha-checkbox>
+                <matcha-checkbox checked="true" color="yellow">Yellow</matcha-checkbox>
+                <matcha-checkbox checked="true" color="amber">Amber</matcha-checkbox>
+            </div>
+
+            <div class="flex-column gap-16">
+                <matcha-checkbox checked="true" color="orange">Orange</matcha-checkbox>
+                <matcha-checkbox checked="true" color="deep-orange">Deep Orange</matcha-checkbox>
+                <matcha-checkbox checked="true" color="brown">Brown</matcha-checkbox>
+                <matcha-checkbox checked="true" color="grey">Grey</matcha-checkbox>
+                <matcha-checkbox checked="true" color="blue-grey">Blue Grey</matcha-checkbox>
+            </div>
+        </div>
+        `,
+    }),
+    name: 'Checkbox Colors',
+};
+
+/**
+ * ##### Typescript
+ *
+ * ```ts
+*   public aceitoTermos: boolean = false;
+*   public termosChanged(event: any) {
+*   this['aceitoTermos'] = event;
+*   }
+ * ```
+ */
+export const CheckboxTemplateDriven: StoryObj = {
+    render: (args) => ({
+        props: {
+            aceitoTermos: false,
+            termosChanged(event: any) {
+                this['aceitoTermos'] = event;
+            }
+        },
+        template: `
+        <div class="d-flex flex-column gap-16">
+            <h4>Template Driven Form</h4>
+            <matcha-checkbox
+                [(ngModel)]="aceitoTermos"
+                (ngModelChange)="termosChanged($event)">
+                Aceito os termos
+            </matcha-checkbox>
+            <p>Valor: {{aceitoTermos}}</p>
+        </div>
+        `,
+    }),
+    name: 'Checkbox Template Driven',
+};
+
+/**
+ * ##### Typescript
+ *
+ * ```ts
+ *      public task: any = {
+ *          name: 'Configurar Projeto',
+ *          completed: false,
+ *          subtasks: [
+ *              { name: 'Instalar dependências', completed: false },
+ *              { name: 'Configurar ambiente', completed: false },
+ *              { name: 'Criar componentes', completed: false }
+ *          ]
+ *      }
+ *      public allComplete() {
+ *          return this.task.subtasks?.every((t: { completed: boolean }) => t.completed) ?? false;
+ *      }
+ *      public someComplete() {
+ *          const completedCount = this.task.subtasks.filter((t: { completed: boolean }) => t.completed).length;
+ *          return completedCount > 0 && completedCount < this.task.subtasks.length;
+ *      }
+ *      public setAll() {
+ *          const newValue = this['someComplete']() || !this.task.completed;
+ *          this.task.subtasks.forEach((t: { completed: boolean }) => t.completed = newValue);
+ *          this.task.completed = newValue;
+ *      }
+ *      public updateAllComplete() {
+ *          this.task.completed = this.task.subtasks.every((t: { completed: boolean }) => t.completed);
+ *      }
+ * ```
+ */
+export const CheckboxReactiveForms: StoryObj = {
+    render: (args) => ({
+        props: {
+            task: {
+                name: 'Configurar Projeto',
+                completed: false,
+                subtasks: [
+                    { name: 'Instalar dependências', completed: false },
+                    { name: 'Configurar ambiente', completed: false },
+                    { name: 'Criar componentes', completed: false }
+                ]
+            },
+            allComplete() {
+                return this['task'].subtasks?.every((t: { completed: boolean }) => t.completed) ?? false;
+            },
+            someComplete() {
+                const completedCount = this['task'].subtasks.filter((t: { completed: boolean }) => t.completed).length;
+                return completedCount > 0 && completedCount < this['task'].subtasks.length;
+            },
+            setAll() {
+                const newValue = this['someComplete']() || !this['task'].completed;
+                this['task'].subtasks.forEach((t: { completed: boolean }) => t.completed = newValue);
+                this['task'].completed = newValue;
+            },
+            updateAllComplete() {
+                this['task'].completed = this['task'].subtasks.every((t: { completed: boolean }) => t.completed);
+            }
+        },
+        template: `
+        <div class="d-flex flex-column gap-16">
+            <matcha-checkbox
+                [(ngModel)]="task.completed"
+                [indeterminate]="someComplete() && !allComplete()"
+                (change)="setAll()">
+                {{task.name}}
+            </matcha-checkbox>
+
+            <div class="ml-24">
+                <div *ngFor="let subtask of task.subtasks">
+                    <matcha-checkbox
+                        [(ngModel)]="subtask.completed"
+                        (ngModelChange)="updateAllComplete()">
+                        {{subtask.name}}
+                    </matcha-checkbox>
+                </div>
+            </div>
+        </div>
+        <pre>Task: {{ task | json }}</pre>
+        `,
+    }),
+    name: 'Checkbox Indeterminate Template Driven',
+};
+
+
+/**
+ * ##### Typescript
+ *
+ * ```ts
+ * import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms';
+ *
+ * export class SomeComponent implements OnInit, OnDestroy {
+ *     public configForm: FormGroup;
+ *
+ *     constructor(private fb: FormBuilder) {
+ *         this.configForm = this.fb.group({
+ *             mainTask: [false],
+ *             backupAutomatico: [false],
+ *             notificacoesEmail: [false],
+ *             modoEscuro: [false],
+ *             sincronizacaoNuvem: [false]
+ *         });
+ *     }
+ *
+ *     someConfigComplete(): boolean {
+ *         const formValue = this.configForm.value;
+ *         const checkedCount = Object.keys(formValue)
+ *             .filter(key => key !== 'mainTask')
+ *             .filter(key => formValue[key])
+ *             .length;
+ *         return checkedCount > 0 && checkedCount < 4; // 4 é o número total de checkboxes
+ *     }
+ *
+ *     allConfigComplete(): boolean {
+ *         const formValue = this.configForm.value;
+ *         return Object.keys(formValue)
+ *             .filter(key => key !== 'mainTask')
+ *             .every(key => formValue[key]);
+ *     }
+ *
+ *     setAllConfig(checked: boolean) {
+ *         const newValue = this['someConfigComplete']() || !this['configForm'].get('mainTask')?.value;
+ *         const controls = this['configForm'].controls;
+ *         Object.keys(controls).forEach(key => {
+ *             if (key !== 'mainTask') {
+ *                 controls[key].setValue(newValue);
+ *             }
+ *         });
+ *         this.configForm.get('mainTask')?.setValue(newValue);
+ *     }
+ *
+ *     updateConfigParent() {
+ *         const allComplete = this.allConfigComplete();
+ *         this.configForm.get('mainTask')?.setValue(allComplete);
+ *     }
+ *
+ *     toggleSubtask(fieldName: string) {
+ *         const control = this.configForm.get(fieldName);
+ *         if (control) {
+ *             control.setValue(!control.value);
+ *             this.updateConfigParent();
+ *         }
+ *     }
+ *
+ *     get subtasksFormArray() {
+ *         return this.configForm.get('subtasks') as FormArray;
+ *     }
+ * }
+ * ```
+ */
+export const CheckboxIndeterminateReactiveForms: StoryObj = {
+    render: () => ({
+        props: {
+            configForm: new FormGroup({
+                mainTask: new FormControl(false),
+                backupAutomatico: new FormControl(false),
+                notificacoesEmail: new FormControl(false),
+                modoEscuro: new FormControl(false),
+                sincronizacaoNuvem: new FormControl(false)
+            }),
+            someConfigComplete() {
+                const formValue = this['configForm'].value;
+                const checkedCount = Object.keys(formValue)
+                    .filter(key => key !== 'mainTask')
+                    .filter(key => formValue[key])
+                    .length;
+                return checkedCount > 0 && checkedCount < 4;
+            },
+            allConfigComplete() {
+                const formValue = this['configForm'].value;
+                return Object.keys(formValue)
+                    .filter(key => key !== 'mainTask')
+                    .every(key => formValue[key]);
+            },
+            setAllConfig(checked: boolean) {
+                // Se estiver indeterminado ou desmarcado, marca todos
+                // Se estiver marcado, desmarca todos
+                const newValue = this['someConfigComplete']() || !this['configForm'].get('mainTask')?.value;
+
+                // Atualiza todas as subtasks
+                const controls = this['configForm'].controls;
+                Object.keys(controls).forEach(key => {
+                    if (key !== 'mainTask') {
+                        controls[key].setValue(newValue);
+                    }
+                });
+
+                // Atualiza o mainTask
+                this['configForm'].get('mainTask')?.setValue(newValue);
+            },
+            updateConfigParent() {
+                const allComplete = this['allConfigComplete']();
+                this['configForm'].get('mainTask')?.setValue(allComplete);
+            },
+            toggleSubtask(fieldName: string) {
+                const control = this['configForm'].get(fieldName);
+                if (control) {
+                    control.setValue(!control.value);
+                    this['updateConfigParent']();
+                }
+            }
+        },
+        template: `
+        <div class="d-flex flex-column gap-16" [formGroup]="configForm">
+            <matcha-checkbox
+                formControlName="mainTask"
+                [indeterminate]="someConfigComplete()"
+                (change)="setAllConfig(!allConfigComplete())">
+                Todas as configurações
+            </matcha-checkbox>
+
+            <div class="ml-24">
+                <matcha-checkbox
+                    formControlName="backupAutomatico"
+                    (change)="toggleSubtask('backupAutomatico')">
+                    Backup automático
+                </matcha-checkbox>
+
+                <matcha-checkbox
+                    formControlName="notificacoesEmail"
+                    (change)="toggleSubtask('notificacoesEmail')">
+                    Notificações por email
+                </matcha-checkbox>
+
+                <matcha-checkbox
+                    formControlName="modoEscuro"
+                    (change)="toggleSubtask('modoEscuro')">
+                    Modo escuro
+                </matcha-checkbox>
+
+                <matcha-checkbox
+                    formControlName="sincronizacaoNuvem"
+                    (change)="toggleSubtask('sincronizacaoNuvem')">
+                    Sincronização em nuvem
+                </matcha-checkbox>
+            </div>
+
+            <pre>Form Value: {{ configForm.value | json }}</pre>
+        </div>
+        `,
+    }),
+    name: 'Checkbox Indeterminate Reactive Forms',
+};

package/src/lib/matcha-components.module.ts

@@ -0,0 +1,149 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { MatchaAutocompleteModule } from './matcha-autocomplete/matcha-autocomplete.module';
+import { MatchaOptionModule } from './matcha-option/matcha-option.module';
+import { MatchaPanelModule } from './matcha-panel/matcha-panel.module';
+import { MatchaSelectModule } from './matcha-select/matcha-select.module';
+import { MatchaAccordionModule } from './matcha-accordion/accordion.module';
+import { MatchaBadgeModule } from './matcha-badge/badge.module';
+import { MatchaButtonModule } from './matcha-button/button.module';
+import { MatchaButtonToggleModule } from './matcha-button-toggle/button-toggle.module';
+import { MatchaCardModule } from './matcha-card/card.module';
+import { MatchaCheckboxModule } from './matcha-checkbox/checkbox.module';
+import { MatchaDividerModule } from './matcha-divider/divider.module';
+import { MatchaElevationModule } from './matcha-elevation/elevation.module';
+import { MatchaFormFieldModule } from './matcha-form-field/matcha-form-field.module';
+import { MatchaHintTextModule } from './matcha-hint-text/hint.module';
+import { MatchaIconModule } from './matcha-icon/icon.module';
+import { MatchaInfiniteScrollModule } from './matcha-infinite-scroll/matcha-infinite-scroll.module';
+import { MatchaInputModule } from './matcha-input/input.module';
+import { MatchaMasonryModule } from './matcha-masonry/masonry.module';
+import { MatchaMenuModule } from './matcha-menu/menu.module';
+import { MatchaModalModule } from './matcha-modal/matcha-modal.module';
+import { MatchaOverflowDraggableComponent } from './matcha-overflow-draggable/matcha-overflow-draggable.component';
+import { MatchaPaginatorModule } from './matcha-paginator/paginator.module';
+import { MatchaProgressBarModule } from './matcha-progress-bar/progress-bar.module';
+import { MatchaRippleModule } from './matcha-ripple/ripple.module';
+import { MatchaSidenavModule } from './matcha-sidenav/sidenav.module';
+import { MatchaSlideToggleModule } from './matcha-slide-toggle/slide-toggle.module';
+import { MatchaSliderModule } from './matcha-slider/slider.module';
+import { MatchaSnackBarModule } from './matcha-snackbar/snack-bar.module';
+import { MatchaSortHeaderModule } from './matcha-sort-header/sort-header.module';
+import { MatchaSpinModule } from './matcha-spin/spin.module';
+import { MatchaSpinnerModule } from './matcha-spinner/spinner.module';
+import { MatchaTableModule } from './matcha-table/table.module';
+import { MatchaTabsModule } from './matcha-tabs/tabs.module';
+import { MatchaTitleModule } from './matcha-title/title.module';
+import { MatchaTooltipModule } from './matcha-tooltip/tooltip.module';
+import { MatchaDateRangeModule } from './matcha-date-range/date-range.module';
+import { MatchaTimeModule } from './matcha-time/time.module';
+import { MatchaStepperModule } from './matcha-stepper/stepper.module';
+import { MatchaDropListModule } from './matcha-drop-list/drop-list.module';
+// import { MatchaInputPhoneModule } from './matcha-input-phone/input-phone.module';
+import { MatchaPageLayoutModule } from './matcha-page-layout/page-layout.module';
+import { MatchaLazyloadModule } from './matcha-lazyload/lazyload.module';
+import { MatchaRadioModule } from './matcha-radio/radio.module';
+import { MatchaAvatarModule } from './matcha-avatar/avatar.module';
+import { MatchaDrawerModule } from './matcha-drawer/drawer.module';
+import { MatchaHighlightModule } from './matcha-highlight/highlight.module';
+@NgModule({
+    declarations: [MatchaOverflowDraggableComponent],
+    imports: [
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatchaAccordionModule,
+        MatchaAutocompleteModule,
+        MatchaOptionModule,
+        MatchaPanelModule,
+        MatchaSelectModule,
+        MatchaBadgeModule,
+        MatchaButtonModule,
+        MatchaButtonToggleModule,
+        MatchaCardModule,
+        MatchaCheckboxModule,
+        MatchaRadioModule,
+        MatchaDividerModule,
+        MatchaElevationModule,
+        MatchaFormFieldModule,
+        MatchaHintTextModule,
+        MatchaIconModule,
+        MatchaInfiniteScrollModule,
+        MatchaLazyloadModule,
+        MatchaInputModule,
+        // MatchaInputPhoneModule,
+        MatchaMasonryModule,
+        MatchaMenuModule,
+        MatchaModalModule,
+        MatchaPaginatorModule,
+        MatchaProgressBarModule,
+        MatchaRippleModule,
+        MatchaSidenavModule,
+        MatchaSlideToggleModule,
+        MatchaSliderModule,
+        MatchaSnackBarModule,
+        MatchaSortHeaderModule,
+        MatchaSpinModule,
+        MatchaSpinnerModule,
+        MatchaStepperModule,
+        MatchaTableModule,
+        MatchaTabsModule,
+        MatchaTitleModule,
+        MatchaTooltipModule,
+        MatchaDateRangeModule,
+        MatchaTimeModule,
+        MatchaDropListModule,
+        MatchaPageLayoutModule,
+        MatchaDrawerModule,
+        MatchaHighlightModule
+    ],
+    exports: [MatchaAccordionModule,
+         MatchaAutocompleteModule,
+         MatchaOptionModule,
+         MatchaPanelModule,
+         MatchaSelectModule,
+         MatchaBadgeModule,
+         MatchaButtonModule,
+         MatchaButtonToggleModule,
+         MatchaCardModule,
+         MatchaCheckboxModule,
+         MatchaRadioModule,
+         MatchaDividerModule,
+         MatchaElevationModule,
+         MatchaFormFieldModule,
+         MatchaHintTextModule,
+         MatchaIconModule,
+         MatchaInfiniteScrollModule,
+         MatchaLazyloadModule,
+         MatchaInputModule,
+        //  MatchaInputPhoneModule,
+         MatchaMasonryModule,
+         MatchaMenuModule,
+         MatchaModalModule,
+         MatchaPaginatorModule,
+         MatchaProgressBarModule,
+         MatchaRippleModule,
+         MatchaSidenavModule,
+         MatchaSlideToggleModule,
+         MatchaSliderModule,
+         MatchaSnackBarModule,
+         MatchaSortHeaderModule,
+         MatchaSpinModule,
+         MatchaSpinnerModule,
+         MatchaStepperModule,
+         MatchaTableModule,
+         MatchaTabsModule,
+         MatchaTitleModule,
+         MatchaTooltipModule,
+         MatchaDateRangeModule,
+         MatchaTimeModule,
+         MatchaDropListModule,
+         MatchaPageLayoutModule,
+         MatchaAvatarModule,
+         MatchaDrawerModule,
+         MatchaHighlightModule
+    ],
+})
+export class MatchaComponentsModule { }

package/src/lib/matcha-date-range/date-range/date-range.component.html

@@ -0,0 +1,3 @@
+<div class="d-flex gap-16">
+  <ng-content></ng-content>
+</div>

package/src/lib/matcha-date-range/date-range/date-range.component.ts

@@ -0,0 +1,100 @@
+import { AfterContentInit, Component, ContentChildren, OnDestroy, QueryList } from '@angular/core';
+import { AbstractControl, NgControl } from '@angular/forms';
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'matcha-date-range',
+  templateUrl: './date-range.component.html',
+  styleUrls: ['./date-range.component.scss'],
+  standalone: false
+})
+export class MatchaDateRangeComponent implements AfterContentInit, OnDestroy {
+  @ContentChildren(NgControl, { descendants: true }) controls!: QueryList<NgControl>;
+
+  private startDateControl: AbstractControl | null = null;
+  private endDateControl: AbstractControl | null = null;
+  private subscription = new Subscription();
+
+  ngAfterContentInit(): void {
+    // Pega os controles projetados no template
+    const controlsArray = this.controls.toArray();
+    if (controlsArray.length >= 2) {
+      this.startDateControl = controlsArray[0].control;
+      this.endDateControl = controlsArray[1].control;
+
+      // Adiciona validação nos dois campos
+      if (this.startDateControl && this.endDateControl) {
+        this.subscription.add(
+          this.startDateControl.valueChanges.subscribe(() => this.validateDateRange())
+        );
+        this.subscription.add(
+          this.endDateControl.valueChanges.subscribe(() => this.validateDateRange())
+        );
+      }
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+
+  /**
+   * Validação de formato de data e intervalo: data inicial não pode ser posterior à data final
+   */
+  private validateDateRange(): void {
+    if (!this.startDateControl || !this.endDateControl) return;
+    if (!this.startDateControl.value || !this.endDateControl.value) return;
+
+    // Validação de formato de data (YYYY-MM-DD)
+    const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
+
+    if (!dateRegex.test(this.startDateControl.value)) {
+      this.startDateControl.setErrors({ ['invalidDateFormat']: true });
+      return;
+    }
+
+    if (!dateRegex.test(this.endDateControl.value)) {
+      this.endDateControl.setErrors({ ['invalidDateFormat']: true });
+      return;
+    }
+
+    const startDate = new Date(this.startDateControl.value);
+    const endDate = new Date(this.endDateControl.value);
+
+    // Verifica se as datas são válidas
+    if (isNaN(startDate.getTime())) {
+      this.startDateControl.setErrors({ ['invalidDate']: true });
+      return;
+    }
+
+    if (isNaN(endDate.getTime())) {
+      this.endDateControl.setErrors({ ['invalidDate']: true });
+      return;
+    }
+
+    if (startDate > endDate) {
+      // Adiciona erros quando a data inicial é posterior à final
+      this.startDateControl.setErrors({ ['startAfterEnd']: true });
+      this.endDateControl.setErrors({ ['endBeforeStart']: true });
+    } else {
+      // Remove apenas nossos erros específicos
+      this.removeSpecificError(this.startDateControl, 'startAfterEnd');
+      this.removeSpecificError(this.endDateControl, 'endBeforeStart');
+      this.removeSpecificError(this.startDateControl, 'invalidDateFormat');
+      this.removeSpecificError(this.endDateControl, 'invalidDateFormat');
+      this.removeSpecificError(this.startDateControl, 'invalidDate');
+      this.removeSpecificError(this.endDateControl, 'invalidDate');
+    }
+  }
+
+  /**
+   * Remove um erro específico sem afetar outros erros
+   */
+  private removeSpecificError(control: AbstractControl, errorName: string): void {
+    const errors = { ...control.errors };
+    if (errors) {
+      delete errors[errorName];
+      control.setErrors(Object.keys(errors).length ? errors : null);
+    }
+  }
+}

package/src/lib/matcha-date-range/date-range.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatchaDateRangeComponent } from './date-range/date-range.component';
+
+@NgModule({
+  declarations: [MatchaDateRangeComponent],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule
+  ],
+  exports: [MatchaDateRangeComponent]
+})
+export class MatchaDateRangeModule { }

package/src/lib/matcha-divider/divider/divider.component.html

@@ -0,0 +1 @@
+<div [class]="classes"></div>