matcha-components 1.0.5 → 1.0.6

package/src/foundation/sizes/sizes.mdx

@@ -0,0 +1,219 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Fundamentos / Sizes / Documentação" />
+
+# Tamanhos
+
+Nesta seção, apresentamos as classes utilizadas para tamanhos do Matcha Design
+System.
+
+---
+
+### Pixels e Porcentagem
+
+Os tamanhos das classes em **pixels** são sempre múltiplos de **4**, sendo o
+mínimo 0 e o máximo **256**.
+
+Os tamanhos em **porcentagem** das classes são sempre múltiplos de **5**, sendo
+o mínimo 0 e o máximo **100**.
+
+    <div class="h-24"></div>
+
+    <div class="grid-1 grid-lg-2 gap-32">
+        <div class="d-flex-column gap-16">
+            <div class="d-flex-row d-flex-space-between d-flex-align-end pr-12">
+                <div class="h5 mb-8 font-size-24">Widths</div>
+                <div class="h3 mb-8 font-size-16 color-accent">[Ver mais](/docs/fundamentos-sizes-width--docs)</div>
+            </div>
+            <div class="matcha-card background-surface d-flex-row d-flex-xs-column d-flex-space-between d-flex-align-center d-flex-xs-align-start gap-8">
+                    <span class="font-size-16">.w-24</span>
+                    <div class="min-w-30-p">
+                        ```html
+                            <div class="w-24">24px Width</div>
+                        ```
+                    </div>
+            </div>
+
+            <div class="matcha-card background-surface d-flex-row d-flex-xs-column d-flex-space-between d-flex-align-center d-flex-xs-align-start gap-8">
+                    <span class="font-size-16">.w-75-p</span>
+                    <div class="min-w-30-p">
+                        ```html
+                            <div class="w-75-p">75% Width</div>
+                        ```
+                    </div>
+            </div>
+        </div>
+
+        <div class="d-flex-column gap-16">
+            <div class="d-flex-row d-flex-space-between d-flex-align-end pr-12">
+                <div class="h5 mb-8 font-size-24">Heights</div>
+                <div class="h3 mb-8 font-size-16 color-accent">[Ver mais](/docs/fundamentos-sizes-height--docs)</div>
+            </div>
+
+            <div class="matcha-card background-surface d-flex-row d-flex-xs-column d-flex-space-between d-flex-align-center d-flex-xs-align-start gap-8">
+                    <span class="font-size-16">.h-24</span>
+                    <div class="min-w-30-p">
+                        ```html
+                            <div class="h-24">24px Height</div>
+                        ```
+                    </div>
+            </div>
+
+            <div class="matcha-card background-surface d-flex-row d-flex-xs-column d-flex-space-between d-flex-align-center d-flex-xs-align-start gap-8">
+                    <span class="font-size-16">.h-75-p</span>
+                    <div class="min-w-30-p">
+                        ```html
+                            <div class="h-75-p">75% Height</div>
+                        ```
+                    </div>
+            </div>
+        </div>
+
+        <div class="d-flex-column gap-16">
+            <div class="d-flex-row d-flex-space-between d-flex-align-end pr-12">
+                <div class="h5 mb-8 font-size-24">Max-widths</div>
+                <div class="h3 mb-8 font-size-16 color-accent">[Ver mais](/docs/fundamentos-sizes-max-width--docs)</div>
+            </div>
+            <div class="matcha-card background-surface d-flex-row d-flex-xs-column d-flex-space-between d-flex-align-center d-flex-xs-align-start gap-8">
+                    <span class="font-size-16">.max-w-24</span>
+                    <div class="min-w-30-p">
+                        ```html
+                            <div class="max-w-24">24px Max-width</div>
+                        ```
+                    </div>
+            </div>
+
+            <div class="matcha-card background-surface d-flex-row d-flex-xs-column d-flex-space-between d-flex-align-center d-flex-xs-align-start gap-8">
+                    <span class="font-size-16">.max-w-75-p</span>
+                    <div class="min-w-30-p">
+                        ```html
+                            <div class="max-w-75-p">75% Max-width</div>
+                        ```
+                    </div>
+            </div>
+        </div>
+
+        <div class="d-flex-column gap-16">
+            <div class="d-flex-row d-flex-space-between d-flex-align-end pr-12">
+                <div class="h5 mb-8 font-size-24">Max-heights</div>
+                <div class="h3 mb-8 font-size-16 color-accent">[Ver mais](/docs/fundamentos-sizes-max-height--docs)</div>
+            </div>
+            <div class="matcha-card background-surface d-flex-row d-flex-xs-column d-flex-space-between d-flex-align-center d-flex-xs-align-start gap-8">
+                    <span class="font-size-16">.max-h-24</span>
+                    <div class="min-w-30-p">
+                        ```html
+                            <div class="max-h-24">24px Max-height</div>
+                        ```
+                    </div>
+            </div>
+
+            <div class="matcha-card background-surface d-flex-row d-flex-xs-column d-flex-space-between d-flex-align-center d-flex-xs-align-start gap-8">
+                    <span class="font-size-16">.max-w-75-p</span>
+                    <div class="min-w-30-p">
+                        ```html
+                            <div class="max-h-75-p">75% Max-height</div>
+                        ```
+                    </div>
+            </div>
+        </div>
+
+        <div class="d-flex-column gap-16">
+            <div class="d-flex-row d-flex-space-between d-flex-align-end pr-12">
+                <div class="h5 mb-8 font-size-24">Min-widths</div>
+                <div class="h3 mb-8 font-size-16 color-accent">[Ver mais](/docs/fundamentos-sizes-min-width--docs)</div>
+            </div>
+            <div class="matcha-card background-surface d-flex-row d-flex-xs-column d-flex-space-between d-flex-align-center d-flex-xs-align-start gap-8">
+                    <span class="font-size-16">.min-w-24</span>
+                    <div class="min-w-30-p">
+                        ```html
+                            <div class="min-w-24">24px Min-width</div>
+                        ```
+                    </div>
+            </div>
+
+            <div class="matcha-card background-surface d-flex-row d-flex-xs-column d-flex-space-between d-flex-align-center d-flex-xs-align-start gap-8">
+                    <span class="font-size-16">.min-w-75-p</span>
+                    <div class="min-w-30-p">
+                        ```html
+                            <div class="min-w-75-p">75% Min-width</div>
+                        ```
+                    </div>
+            </div>
+        </div>
+
+        <div class="d-flex-column gap-16">
+            <div class="d-flex-row d-flex-space-between d-flex-align-end pr-12">
+                <div class="h5 mb-8 font-size-24">Min-heights</div>
+                <div class="h3 mb-8 font-size-16 color-accent">[Ver mais](/docs/fundamentos-sizes-min-height--docs)</div>
+            </div>
+            <div class="matcha-card background-surface d-flex-row d-flex-xs-column d-flex-space-between d-flex-align-center d-flex-xs-align-start gap-8">
+                    <span class="font-size-16">.min-h-24</span>
+                    <div class="min-w-30-p">
+                        ```html
+                            <div class="min-h-24">24px Min-height</div>
+                        ```
+                    </div>
+            </div>
+
+            <div class="matcha-card background-surface d-flex-row d-flex-xs-column d-flex-space-between d-flex-align-center d-flex-xs-align-start gap-8">
+                    <span class="font-size-16">.min-h-75-p</span>
+                    <div class="min-w-30-p">
+                        ```html
+                            <div class="min-h-75-p">75% Min-height</div>
+                        ```
+                    </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="h-24"></div>
+
+### Breakpoints
+
+- xs: 600px
+- sm: 1024px
+- md: 1440px
+- lg: 1920px
+- xl: 2560px
+
+As classes seguem a seguinte convenção:
+
+\{**w / h**\}-\{**breakpoint**\}-\{**valorEmPixels**\}
+
+\{**max / min**\}-\{**w / h**\}-\{**breakpoint**\}-\{**valorEmPorcentagem**\}-p
+
+Exemplos:
+
+**h-xs-8** é aplicado quando a largura mínima da tela atinge 600px, e a altura
+do elemento é definida como 8px.
+
+**min-h-lg-75-p** é aplicado quando a largura mínima da tela atinge 1920px, e a
+altura mínima do elemento é definida como 75%.
+
+    <div class="h-24"></div>
+    <div class="grid-2 grid-sm-2 gap-16">
+        <div class="d-flex-column matcha-card gap-8 d-flex-align-center background-surface">
+            <div class="h5 mb-8 font-size-16">Widths</div>
+            <div class="h3 mb-8 font-size-16 color-accent">[Ver breakpoints](/docs/fundamentos-sizes-width--docs#breakpoints)</div>
+        </div>
+        <div class="d-flex-column matcha-card gap-8 d-flex-align-center background-surface">
+            <div class="h5 mb-8 font-size-16">Heights</div>
+            <div class="h3 mb-8 font-size-16 color-accent">[Ver breakpoints](/docs/fundamentos-sizes-height--docs#breakpoints)</div>
+        </div>
+        <div class="d-flex-column matcha-card gap-8 d-flex-align-center background-surface">
+            <div class="h5 mb-8 font-size-16">Max-widths</div>
+            <div class="h3 mb-8 font-size-16 color-accent">[Ver breakpoints](/docs/fundamentos-sizes-max-width--docs#breakpoints)</div>
+        </div>
+        <div class="d-flex-column matcha-card gap-8 d-flex-align-center background-surface">
+            <div class="h5 mb-8 font-size-16">Max-heights</div>
+            <div class="h3 mb-8 font-size-16 color-accent">[Ver breakpoints](/docs/fundamentos-sizes-max-height--docs#breakpoints)</div>
+        </div>
+        <div class="d-flex-column matcha-card gap-8 d-flex-align-center background-surface">
+            <div class="h5 mb-8 font-size-16">Min-widths</div>
+            <div class="h3 mb-8 font-size-16 color-accent">[Ver breakpoints](/docs/fundamentos-sizes-min-width--docs#breakpoints)</div>
+        </div>
+        <div class="d-flex-column matcha-card gap-8 d-flex-align-center background-surface">
+            <div class="h5 mb-8 font-size-16">Min-heights</div>
+            <div class="h3 mb-8 font-size-16 color-accent">[Ver breakpoints](/docs/fundamentos-sizes-min-height--docs#breakpoints)</div>
+        </div>
+    </div>

package/src/foundation/sizes/widths.mdx

@@ -0,0 +1,234 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Fundamentos / Sizes / Width" />
+
+### Widths
+
+Nessa seção serão apresentadas as maneiras de se usar as classes para Width.
+
+#### Pixels
+
+Os tamanhos em pixels das classes são sempre múltiplos de **4**, sendo o mínimo
+0 e o máximo **256**.
+
+    <div class="h-256 w-100-p overflow-y-scroll">
+        <table class="w-100-p">
+            <thead>
+                <tr>
+                    <th>Classe</th>
+                    <th>Propriedade</th>
+                </tr>
+            </thead>
+            <tbody>
+                {Array.from({ length: 65 }, (_, index) => {
+                const widthValue = index * 4;
+                return (
+                    <tr key={`w-${widthValue}`}>
+                        <td>w-{widthValue}</td>
+                        <td>width: {widthValue}px;</td>
+                    </tr>
+                );
+                })}
+            </tbody>
+        </table>
+    </div>
+
+    <div class="h-24"></div>
+
+    <p class="h5 mb-8 font-size-16 mt-4">Exemplos</p>
+
+    <div class="matcha-card background-surface d-flex-column gap-16">
+        <div class="matcha-card background-bg d-flex-column gap-8">
+            <div class="w-4 h-32 background-accent"></div>
+            <div class="w-16 h-32 background-accent"></div>
+            <div class="w-28 h-32 background-accent"></div>
+            <div class="w-40 h-32 background-accent"></div>
+            <div class="w-52 h-32 background-accent"></div>
+            <div class="w-64 h-32 background-accent"></div>
+        </div>
+        <div>
+            ```html
+            <div class="w-4">4px Width</div>
+            <div class="w-16">16px Width</div>
+            <div class="w-28">28px Width</div>
+            <div class="w-40">40px Width</div>
+            <div class="w-52">52px Width</div>
+            <div class="w-64">64px Width</div>
+            ```
+        </div>
+    </div>
+
+#### Porcentagem
+
+Os tamanhos em porcentagem das classes são sempre múltiplos de **5**, sendo o
+mínimo 0 e o máximo **100**.
+
+        <div class="h-256 w-100-p overflow-y-scroll">
+        <table class="w-100-p">
+            <thead>
+                <tr>
+                    <th>Classe</th>
+                    <th>Propriedade</th>
+                </tr>
+            </thead>
+            <tbody>
+                {Array.from({ length: 21 }, (_, index) => {
+                const widthValue = index * 5;
+                return (
+                    <tr key={`w-${widthValue}-p`}>
+                        <td>w-{widthValue}</td>
+                        <td>width: {widthValue}%;</td>
+                    </tr>
+                );
+                })}
+            </tbody>
+        </table>
+    </div>
+
+    <div class="h-24"></div>
+
+    <p class="h5 mb-8 font-size-16 mt-4">Exemplos</p>
+
+    <div class="matcha-card background-surface d-flex-column gap-16">
+        <div class="matcha-card background-bg d-flex-column gap-8">
+            <div class="w-20-p h-32 background-accent"></div>
+            <div class="w-30-p h-32 background-accent"></div>
+            <div class="w-50-p h-32 background-accent"></div>
+            <div class="w-75-p h-32 background-accent"></div>
+            <div class="w-100-p h-32 background-accent"></div>
+        </div>
+        <div>
+            ```html
+            <div class="w-20-p">20% Width</div>
+            <div class="w-30-p">30% Width</div>
+            <div class="w-50-p">50% Width</div>
+            <div class="w-75-p">75% Width</div>
+            <div class="w-100-p">100% Width</div>
+            ```
+        </div>
+    </div>
+
+    <div class="h-24"></div>
+
+#### Breakpoints
+
+- xs: 600px
+- sm: 1024px
+- md: 1440px
+- lg: 1920px
+- xl: 2560px
+
+As classes de largura (width) seguem a seguinte convenção:
+
+w-\{**breakpoint**\}-\{**valorEmPixels**\}
+
+w-\{**breakpoint**\}-\{**valorEmPorcentagem**\}-p
+
+Exemplos:
+
+**w-xs-8** é aplicado quando a largura mínima da tela atinge 600px, e a largura
+do elemento é definida como 8px.
+
+**w-lg-75-p** é aplicado quando a largura mínima da tela atinge 1920px, e a
+largura do elemento é definida como 75%.
+
+    <div class="h-16"></div>
+
+---
+
+    <p class="h5 mb-8 font-size-16">Classes em Pixels:</p>
+
+    <div class="h-256 w-100-p overflow-y-scroll">
+        <table class="w-100-p">
+            <thead>
+                <tr>
+                    <th>Classe</th>
+                    <th>Propriedade</th>
+                    <th>Breakpoint</th>
+                </tr>
+            </thead>
+            <tbody>
+                {Array.from({ length: 65 }, (_, index) => {
+                const widthValue = index * 4;
+                return (
+                    <>
+                        <tr key={`w-${widthValue}`}>
+                            <td>w-xs-{widthValue}</td>
+                            <td>width: {widthValue}px;</td>
+                            <td>@media only screen and (min-width: 600px)</td>
+                        </tr>
+                        <tr key={`w-${widthValue}`}>
+                            <td>w-sm-{widthValue}</td>
+                            <td>width: {widthValue}px;</td>
+                            <td>@media only screen and (min-width: 1024px)</td>
+                        </tr>
+                        <tr key={`w-${widthValue}`}>
+                            <td>w-md-{widthValue}</td>
+                            <td>width: {widthValue}px;</td>
+                            <td>@media only screen and (min-width: 1440px)</td>
+                        </tr>
+                        <tr key={`w-${widthValue}`}>
+                            <td>w-lg-{widthValue}</td>
+                            <td>width: {widthValue}px;</td>
+                            <td>@media only screen and (min-width: 1920px)</td>
+                        </tr>
+                        <tr key={`w-${widthValue}`}>
+                            <td>w-xl-{widthValue}</td>
+                            <td>width: {widthValue}px;</td>
+                            <td>@media only screen and (min-width: 2560px)</td>
+                        </tr>
+                    </>
+                );
+                })}
+            </tbody>
+        </table>
+    </div>
+
+    <div class="h-16"></div>
+    <p class="h5 mb-8 font-size-16 mt-16">Classes em Porcentagem:</p>
+
+    <div class="h-256 w-100-p overflow-y-scroll">
+        <table class="w-100-p">
+            <thead>
+                <tr>
+                    <th>Classe</th>
+                    <th>Propriedade</th>
+                    <th>Breakpoint</th>
+                </tr>
+            </thead>
+            <tbody>
+                {Array.from({ length: 21 }, (_, index) => {
+                const widthValue = index * 5;
+                return (
+                    <>
+                        <tr key={`w-${widthValue}`}>
+                            <td>w-xs-{widthValue}-p</td>
+                            <td>width: {widthValue}%;</td>
+                            <td>@media only screen and (min-width: 600px)</td>
+                        </tr>
+                        <tr key={`w-${widthValue}`}>
+                            <td>w-sm-{widthValue}-p</td>
+                            <td>width: {widthValue}%;</td>
+                            <td>@media only screen and (min-width: 1024px)</td>
+                        </tr>
+                        <tr key={`w-${widthValue}`}>
+                            <td>w-md-{widthValue}-p</td>
+                            <td>width: {widthValue}%;</td>
+                            <td>@media only screen and (min-width: 1440px)</td>
+                        </tr>
+                        <tr key={`w-${widthValue}`}>
+                            <td>w-lg-{widthValue}-p</td>
+                            <td>width: {widthValue}%;</td>
+                            <td>@media only screen and (min-width: 1920px)</td>
+                        </tr>
+                        <tr key={`w-${widthValue}`}>
+                            <td>w-xl-{widthValue}-p</td>
+                            <td>width: {widthValue}%;</td>
+                            <td>@media only screen and (min-width: 2560px)</td>
+                        </tr>
+                    </>
+                );
+                })}
+            </tbody>
+        </table>
+    </div>

package/src/lib/matcha-autocomplete/autocomplete-overview.directive.ts

@@ -0,0 +1,16 @@
+import { Directive, ElementRef, Renderer2 } from '@angular/core';
+
+@Directive({
+    selector: '[matcha-autocomplete-overview]'
+})
+export class MatchaAutocompleteOverviewDirective {
+
+    constructor(
+        private _elementRef: ElementRef,
+        private _renderer: Renderer2
+    ) {
+        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
+        this._renderer.addClass(this._elementRef.nativeElement,'matcha-autocomplete-overview')
+    }
+
+}

package/src/lib/matcha-autocomplete/autocomplete.argtypes.ts

@@ -0,0 +1,64 @@
+export const autocompleteArgtypes = {
+    autoActiveFirstOption: {
+        description:
+            'Whether the first option should be highlighted when the autocomplete panel is opened.',
+        defaultValue: false,
+    },
+    class: {
+        description:
+            'Classes to be applied to the autocomplete panel inside of the overlay container.',
+    },
+    disableRipple: {
+        description: 'Whether ripples are disabled.',
+    },
+    panelWidth: {
+        description:
+            'Specifies the width of the autocomplete panel. (Can be any CSS sizing value)',
+    },
+    onClosed: {
+        description:
+            'Event that is emitted when the autocomplete panel is closed.',
+        action: 'onClosed',
+    },
+    onOpened: {
+        description:
+            'Event that is emitted when the autocomplete panel is opened.',
+        action: 'onOpened',
+    },
+    onOptionActivated: {
+        description:
+            'Event that is emitted when an option is activated using the keyboard.',
+        action: 'onOptionActivated',
+    },
+    onOptionSelected: {
+        description: 'Event that is emitted when an option is selected.',
+        action: 'onOptionSelected',
+    },
+    autocompleteTriggerDisabled: {
+        description: 'Whether the autocomplete is disabled.',
+        defaultValue: false,
+    },
+    autocompleteTriggerPosition: {
+        description:
+            'Position of the autocomplete panel relative to the trigger element.',
+        options: [null, 'auto', 'above', 'below'],
+        control: { type: 'select' },
+    },
+    label: {
+        description: 'Label of the autocomplete',
+        defaultValue: 'Number',
+        table: {
+            defaultValue: { summary: 'Number' },
+        },
+        control: 'text',
+    },
+    color: {
+        description: 'Theme color palette',
+        control: 'select',
+        defaultValue: 'accent',
+        table: {
+            defaultValue: { summary: 'accent' },
+        },
+        options: ['primary', 'accent', 'warn'],
+    },
+};

package/src/lib/matcha-autocomplete/autocomplete.directive.ts

@@ -0,0 +1,14 @@
+import { Directive, ElementRef, Renderer2 } from '@angular/core';
+
+@Directive({
+    selector: '[matcha-autocomplete]'
+})
+export class MatchaAutocompleteDirective {
+
+    constructor(
+        private _elementRef: ElementRef,
+        private _renderer: Renderer2
+    ) {
+        this._renderer.addClass(this._elementRef.nativeElement,'matcha-autocomplete')
+    }
+}

package/src/lib/matcha-autocomplete/autocomplete.mdx

@@ -0,0 +1,112 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./autocomplete.stories";
+
+<Meta title="Atoms / Autocomplete / Documentação" />
+
+# Autocomplete
+
+> _autocomplete_ é uma entrada de texto normal aprimorada por um painel de opções sugeridas.
+
+---
+
+### Modes
+
+<div class="d-flex-column gap-16">
+    <div class="d-flex-column">
+        <div class="matcha-card background-surface d-flex-column gap-16">
+            <span class="h5">Autocomplete - Default</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.AutocompleteDefault} />
+            </div>
+
+            <div class="d-flex-column">
+                ```html
+                <form class="example-form">
+                    <mat-form-field class="example-full-width">
+                        <mat-label>Number</mat-label>
+                        <input type="text"
+                            placeholder="Pick one"
+                            aria-label="Number"
+                            matInput
+                            [formControl]="myControl"
+                            [matAutocomplete]="auto">
+                        <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
+                        <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
+                            {{option}}
+                        </mat-option>
+                        </mat-autocomplete>
+                    </mat-form-field>
+                    </form>
+                ```
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import {MatAutocompleteModule} from '@angular/material/autocomplete';`
+
+[Official documentation](https://material.angular.io/components/autocomplete/overview)
+
+<br />
+<div class="d-flex-column gap-16">
+    <div class="d-flex-column">
+        <div class="matcha-card background-surface d-flex-column gap-16">
+            <div class="d-flex-column">
+                ```ts
+                import {Component, OnInit} from '@angular/core';
+                import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
+                import {Observable} from 'rxjs';
+                import {map, startWith} from 'rxjs/operators';
+                import {NgFor, AsyncPipe} from '@angular/common';
+                import {MatAutocompleteModule} from '@angular/material/autocomplete';
+                import {MatInputModule} from '@angular/material/input';
+                import {MatFormFieldModule} from '@angular/material/form-field';
+
+                /**
+                * @title Highlight the first autocomplete option
+                */
+                @Component({
+                    selector: 'autocomplete-auto-active-first-option-example',
+                    templateUrl: 'autocomplete-auto-active-first-option-example.html',
+                    styleUrls: ['autocomplete-auto-active-first-option-example.css'],
+                    standalone: true,
+                    imports: [
+                        FormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatAutocompleteModule,
+                        ReactiveFormsModule,
+                        NgFor,
+                        AsyncPipe,
+                    ],
+                })
+
+                export class AutocompleteAutoActiveFirstOptionExample implements OnInit {
+                    myControl = new FormControl('');
+                    options: string[] = ['One', 'Two', 'Three'];
+                    filteredOptions: Observable<string[]>;
+
+                    ngOnInit() {
+                        this.filteredOptions = this.myControl.valueChanges.pipe(
+                        startWith(''),
+                        map(value => this._filter(value || '')),
+                        );
+                    }
+
+                    private _filter(value: string): string[] {
+                        const filterValue = value.toLowerCase();
+                        return this.options.filter(option => option.toLowerCase().includes(filterValue));
+                    }
+                }
+                ```
+            </div>
+        </div>
+    </div>
+
+</div>

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

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+
+import { MatchaAutocompleteDirective } from './autocomplete.directive';
+import { MatchaAutocompleteOverviewDirective } from './autocomplete-overview.directive';
+
+@NgModule({
+    declarations: [
+        MatchaAutocompleteDirective,
+        MatchaAutocompleteOverviewDirective,
+    ],
+    imports: [],
+    exports: [MatchaAutocompleteDirective, MatchaAutocompleteOverviewDirective],
+})
+export class MatchaAutocompleteModule {}