matcha-components 1.0.6 → 1.0.7

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

@@ -0,0 +1,416 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { MatchaIconModule } from './icon.module';
+
+import { iconArgtypes } from './icon-argtype';
+
+export default {
+    title: 'Atoms / Icon',
+    decorators: [
+        moduleMetadata({
+            imports: [MatchaIconModule],
+            declarations: [],
+        }),
+    ],
+    args: {
+        color: 'accent',
+        size: 'md',
+        name: 'home',
+        loading: false,
+    },
+    argTypes: iconArgtypes,
+    parameters: {
+        docs: {
+            source: { type: 'code' },
+        },
+        controls: {
+            expanded: true,
+            exclude: ['mode'],
+        },
+        componentSubtitle: 'Displays an image that represents a user or organization',
+    },
+} as Meta;
+
+/** Este é o icon principal */
+export const IconOverview: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+            <matcha-icon [name]="name" [color]="color" [size]="size"></matcha-icon>
+        `,
+    }),
+    name: 'Icon Overview',
+};
+
+/** Este é o icon principal */
+export const IconList: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+        <input
+            type="text"
+            id="iconSearch"
+            placeholder="Pesquisar ícone..."
+            onKeyUp="filterIcons()"
+        />
+        <div class="d-flex-row d-flex-wrap gap-24">
+            <matcha-icon class="icon" data-name="app" name="app" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="site" name="site" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="home" name="home" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="home-out" name="home-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="content" name="content" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="content-out" name="content-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="events" name="events" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="events-out" name="events-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="favorite" name="favorite" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="favorite-out" name="favorite-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="tv" name="tv" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="tv-out" name="tv-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="bible" name="bible" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="bible-out" name="bible-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="reading-plan" name="reading-plan" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="reading-plan-out" name="reading-plan-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="agenda" name="agenda" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="agenda-out" name="agenda-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="church" name="church" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="church-out" name="church-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="download" name="download" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="downloads-out" name="downloads-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="groups" name="groups" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="groups-out" name="groups-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="live" name="live" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="live-out" name="live-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="star" name="star" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="star-out" name="star-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="news" name="news" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="news-out" name="news-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="edit" name="edit" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="edit-out" name="edit-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="web" name="web" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="web-out" name="web-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="prayer" name="prayer" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="prayer-out" name="prayer-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="radio" name="radio" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="radio-out" name="radio-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="id-card" name="id-card" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="id-card-out" name="id-card-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="cell" name="cell" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="cell-out" name="cell-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="business" name="business" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="business-out" name="business-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="contact" name="contact" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="contact-out" name="contact-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="store" name="store" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="store-out" name="store-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="mykids" name="mykids" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="mykids-out" name="mykids-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="profile" name="profile" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="profile-out" name="profile-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="bright" name="bright" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="bright-out" name="bright-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="case" name="case" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="case-out" name="case-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="cake" name="cake" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="link" name="link" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="list" name="list" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="grid" name="grid" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="grid-out" name="grid-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="contrast" name="contrast" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="check-in" name="check-in" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="check-out" name="check-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="counseling" name="counseling" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="counseling-out" name="counseling-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="notes" name="notes" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="notes-out" name="notes-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="print" name="print" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="print-out" name="print-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="smile" name="smile" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="notification" name="notification" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="light-mode" name="light-mode" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="dark-mode" name="dark-mode" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="dark-mode-2" name="dark-mode-2" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="category" name="category" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="bank" name="bank" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="visitor" name="visitor" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="participant" name="participant" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="arrow-left" name="arrow-left" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="arrow-up" name="arrow-up" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="arrow-down" name="arrow-down" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="arrow-right" name="arrow-right" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="chevron-left" name="chevron-left" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="chevron-right" name="chevron-right" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="chevron-down" name="chevron-down" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="chevron-up" name="chevron-up" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="reading" name="reading" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="blocked" name="blocked" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="reports" name="reports" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="dashboard" name="dashboard" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="graph" name="graph" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="education" name="education" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="phone" name="phone" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="contact-us" name="contact-us" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="header-panel" name="header-panel" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="audio" name="audio" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="audio-out" name="audio-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="foward" name="foward" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="foward-out" name="foward-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="next" name="next" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="next1" name="next1" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="pause" name="pause" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="pause-out" name="pause-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="play" name="play" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="play-out" name="play-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="microphone" name="microphone" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="microphone-out" name="microphone-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="previous" name="previous" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="previous-out" name="previous-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="rewind" name="rewind" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="rewind-out" name="rewind-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="songbook" name="songbook" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="songbook-out" name="songbook-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="video" name="video" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="video-out" name="video-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="upload" name="upload" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="upload-out" name="upload-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="gallery" name="gallery" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="image-out" name="image-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="edit-image" name="edit-image" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="bonus" name="bonus" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="bonus-out" name="bonus-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="save" name="save" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="save-out" name="save-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="lightbulb" name="lightbulb" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="lightbulb-out" name="lightbulb-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="laptop" name="laptop" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="phone1" name="phone1" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="monitor" name="monitor" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="monitor-out" name="monitor-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="testimony" name="testimony" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="testimony-out" name="testimony-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="pdf" name="pdf" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="podtail" name="podtail" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="net" name="net" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="contact1" name="contact1" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="copy-content" name="copy-content" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="about" name="about" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="about-out" name="about-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="copy" name="copy" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="copy-out" name="copy-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="copy-folder" name="copy-folder" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="copy-folder-out" name="copy-folder-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="new-note" name="new-note" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="new-note-out" name="new-note-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="folder-closed" name="folder-closed" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="folder-opened" name="folder-opened" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="note" name="note" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="note-out" name="note-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="copy-out1" name="copy-out1" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="new-note-out1" name="new-note-out1" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="text" name="text" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="text-align-left" name="text-align-left" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="text-bullet-list" name="text-bullet-list" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="text-align-center" name="text-align-center" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="text-indent-back" name="text-indent-back" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="text-align-justify" name="text-align-justify" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="text-indent-foward" name="text-indent-foward" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="text-align-right" name="text-align-right" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="font-bold" name="font-bold" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="font-underline" name="font-underline" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="font-italic" name="font-italic" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="delete" name="delete" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="delete-out" name="delete-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="filter" name="filter" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="filter-out" name="filter-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="filter-bars" name="filter-bars" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="fullscreen" name="fullscreen" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="fullscreen-out" name="fullscreen-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="fullscreen-exit" name="fullscreen-exit" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="fullscreen-exit-out" name="fullscreen-exit-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="settings" name="settings" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="settings-out" name="settings-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="share" name="share" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="share-out" name="share-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="toggle-off" name="toggle-off" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="toggle-on" name="toggle-on" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="toggle-off-out" name="toggle-off-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="toggle-on-out" name="toggle-on-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="visibility-on" name="visibility-on" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="visibility-off" name="visibility-off" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="visibility-on-out" name="visibility-on-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="visibility-off-out" name="visibility-off-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="logout" name="logout" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="logout-out" name="logout-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="search" name="search" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="search-out" name="search-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="notification1" name="notification1" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="notification-out" name="notification-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="password" name="password" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="password-out" name="password-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="calendar" name="calendar" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="calendar-out" name="calendar-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="menu" name="menu" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="menu-out" name="menu-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="info" name="info" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="info-out" name="info-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="leadership" name="leadership" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="leadership-out" name="leadership-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="attachment" name="attachment" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="attachment-out" name="attachment-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="send" name="send" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="action_sign_error" name="action_sign_error" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="action_close" name="action_close" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="action_sign_success" name="action_sign_success" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="action_done" name="action_done" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="action_sign_warning" name="action_sign_warning" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="action_sign_warning-out" name="action_sign_warning-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="feedback" name="feedback" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="feedback-out" name="feedback-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="action_get_up" name="action_get_up" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="action_get_down" name="action_get_down" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="action_move" name="action_move" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="policy" name="policy" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="action_key" name="action_key" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="action_sign_info" name="action_sign_info" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="action_sign_info-out" name="action_sign_info-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="qr-code-no-border" name="qr-code-no-border" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="qr-code" name="qr-code" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="drag-dots" name="drag-dots" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="drag-bars" name="drag-bars" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="action_arrow_down" name="action_arrow_down" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="action_arrow_left" name="action_arrow_left" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="action_arrow_up" name="action_arrow_up" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="action_arrow_right" name="action_arrow_right" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="action_plus" name="action_plus" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="minus" name="minus" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="action_reload" name="action_reload" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="transfer" name="transfer" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="cost-center" name="cost-center" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="expand" name="expand" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="collapse" name="collapse" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="action_list" name="action_list" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="action_options" name="action_options" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="historic" name="historic" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="plugin" name="plugin" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="modules" name="modules" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="platform" name="platform" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="barcode" name="barcode" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="barcode-out" name="barcode-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="camera" name="camera" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="camera-out" name="camera-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="cast" name="cast" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="cast-out" name="cast-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="location" name="location" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="location-out" name="location-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="clock" name="clock" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="clock-out" name="clock-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="card" name="card" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="card-out" name="card-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="add-card" name="add-card" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="update-balance" name="update-balance" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="cash" name="cash" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="cash-out" name="cash-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="pin" name="pin" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="pin-out" name="pin-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="flag" name="flag" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="flag-out" name="flag-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="category1" name="category1" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="category-out" name="category-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="media" name="media" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="media-out" name="media-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="wallet" name="wallet" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="wallet-out" name="wallet-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="management" name="management" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="business-unit" name="business-unit" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="receipt" name="receipt" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="receipt-out" name="receipt-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="circle-email" name="circle-email" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="email" name="email" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="email-out" name="email-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="pix" name="pix" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="pix-out" name="pix-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="location-cell" name="location-cell" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="location-cell-out" name="location-cell-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="image-rights" name="image-rights" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="image-rights-allowed" name="image-rights-allowed" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="forbidden-passage" name="forbidden-passage" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="allowed-passage" name="allowed-passage" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="food-restriction" name="food-restriction" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="no-food-restriction" name="no-food-restriction" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="allergy" name="allergy" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="special-need" name="special-need" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="map" name="map" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="apple" name="apple" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="number" name="number" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="flow" name="flow" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="ibf-church" name="ibf-church" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="process-barcode" name="process-barcode" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="process-card" name="process-card" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="box-opened" name="box-opened" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="parent" name="parent" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="kid-girl" name="kid-girl" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="kid-boy" name="kid-boy" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="people" name="people" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="circle-code" name="circle-code" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="circle-facebook" name="circle-facebook" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="facebook" name="facebook" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="circle-instagram" name="circle-instagram" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="instagram" name="instagram" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="soundcloud" name="soundcloud" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="circle-soundcloud" name="circle-soundcloud" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="spotify" name="spotify" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="circle-spotify" name="circle-spotify" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="circle-telegram" name="circle-telegram" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="telegram" name="telegram" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="circle-tiktok" name="circle-tiktok" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="tiktok" name="tiktok" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="circle-twitter" name="circle-twitter" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="twitter" name="twitter" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="circle-whatsapp" name="circle-whatsapp" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="whatsapp" name="whatsapp" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="circle-youtube" name="circle-youtube" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="youtube" name="youtube" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="circle-share" name="circle-share" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="share1" name="share1" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="opened-lock" name="opened-lock" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="flickr" name="flickr" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="circle-flickr" name="circle-flickr" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="cookie" name="cookie" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="cookie-out" name="cookie-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="cookie-out-2" name="cookie-out-2" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="emoji-happy" name="emoji-happy" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="emoji-happy-out" name="emoji-happy-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="emoji-prosperous" name="emoji-prosperous" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="emoji-prosperous-out" name="emoji-prosperous-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="emoji-blessed" name="emoji-blessed" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="emoji-blessed-out" name="emoji-blessed-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="emoji-sick" name="emoji-sick" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="emoji-sick-out" name="emoji-sick-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="emoji-alone" name="emoji-alone" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="emoji-alone-out" name="emoji-alone-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="emoji-sad" name="emoji-sad" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="emoji-sad-out" name="emoji-sad-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="emoji-faithless" name="emoji-faithless" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="emoji-faithless-out" name="emoji-faithless-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="emoji-careful" name="emoji-careful" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="emoji-careful-out" name="emoji-careful-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="emoji-distressed" name="emoji-distressed" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="emoji-distressed-out" name="emoji-distressed-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="rocket" name="rocket" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="rocket-out" name="rocket-out" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="flickr-02" name="flickr-02" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="flickr-04" name="flickr-04" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="nu" name="nu" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="bradesco" name="bradesco" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="santander" name="santander" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="bb" name="bb" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="c6-color" name="c6-color" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="itau" name="itau" size="md" color="accent"></matcha-icon>
+            <matcha-icon class="icon" data-name="caixa" name="caixa" size="md" color="accent"></matcha-icon>
+        </div>`,
+    }),
+    name: 'Icon List',
+};

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

@@ -0,0 +1,42 @@
+export const inputArgtypes = {
+    errorStateMatcher: {
+        description: 'An object used to control when error messages are shown.',
+        control: null, // Como é um objeto, não é necessário um controle.
+        table: {
+            disable: true, // Desativamos a tabela para evitar a exibição de informações desnecessárias.
+        },
+    },
+    readonly: {
+        description: 'Whether the element is readonly.',
+        control: 'boolean',
+        defaultValue: false, // Defina o valor padrão conforme necessário.
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    type: {
+        description: 'Input type of the element.',
+        control: 'text', // Você pode alterar o controle para 'select' se houver opções específicas de tipo que deseja listar.
+        defaultValue: 'text', // Defina o valor padrão conforme necessário.
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    errorState: {
+        description: 'Whether the component is in an error state.',
+        control: 'boolean',
+        defaultValue: false, // Defina o valor padrão conforme necessário.
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    color: {
+        description: 'Theme color palette',
+        control: 'select',
+        defaultValue: 'accent',
+        table: {
+            defaultValue: { summary: 'accent' },
+        },
+        options: ['primary', 'accent', 'warn'],
+    },
+};

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

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

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

@@ -0,0 +1,73 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./input.stories";
+
+<Meta title="Atoms / Input / Documentação" />
+
+# Input
+
+> _input_ "ESCREVER DEFINIÇÃO DO ATÔMICO"
+
+---
+
+### 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">Input - Date range picker comparison ranges</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.InputClearButton} />
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+                <form>
+                    <mat-form-field matcha-input appearance="outline" [color]="color">
+                        <mat-label>First campaign</mat-label>
+                        <mat-date-range-input
+                            [formGroup]="campaignOne"
+                            [rangePicker]="campaignOnePicker"
+                            [comparisonStart]="campaignTwo.value.start"
+                            [comparisonEnd]="campaignTwo.value.end">
+                            <input matStartDate placeholder="Start date" formControlName="start">
+                            <input matEndDate placeholder="End date" formControlName="end">
+                        </mat-date-range-input>
+                        <mat-hint>MM/DD/YYYY - MM/DD/YYYY</mat-hint>
+                        <mat-datepicker-toggle matIconSuffix [for]="campaignOnePicker"></mat-datepicker-toggle>
+                        <mat-date-range-picker #campaignOnePicker></mat-date-range-picker>
+                    </mat-form-field>
+
+                    <mat-form-field matcha-datepicker appearance="outline" [color]="color">
+                        <mat-label>Second campaign</mat-label>
+                        <mat-date-range-input
+                            [formGroup]="campaignTwo"
+                            [rangePicker]="campaignTwoPicker"
+                            [comparisonStart]="campaignOne.value.start"
+                            [comparisonEnd]="campaignOne.value.end">
+                            <input matStartDate placeholder="Start date" formControlName="start">
+                            <input matEndDate placeholder="End date" formControlName="end">
+                        </mat-date-range-input>
+                        <mat-datepicker-toggle matIconSuffix [for]="campaignTwoPicker"></mat-datepicker-toggle>
+                        <mat-hint>MM/DD/YYYY - MM/DD/YYYY</mat-hint>
+                        <mat-date-range-picker #campaignTwoPicker></mat-date-range-picker>
+                    </mat-form-field>
+                </form>
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import {MatDatepickerModule} from '@angular/material/input';`
+
+[Official documentation](https://https://material.angular.io/components/input/overview)
+
+<br />

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

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { MatchaInputDirective } from './input.directive';
+
+@NgModule({
+    declarations: [MatchaInputDirective],
+    imports: [],
+    exports: [MatchaInputDirective],
+})
+export class MatchaInputModule {}