matcha-components 20.12.0 → 20.15.0

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

@@ -0,0 +1,158 @@
+import { Directive, ElementRef, HostListener, Input, Renderer2 } from '@angular/core';
+
+@Directive({
+    selector: '[matchaTooltip]',
+    standalone: false
+})
+export class MatchaTooltipDirective {
+  @Input('matchaTooltip') tooltipText: string = '';
+  @Input('matchaTooltipDisabled') tooltipDisabled: boolean | string = false;
+  @Input('matchaTooltipAbove') preferAbove: boolean = false;
+  @Input('matchaTooltipBelow') preferBelow: boolean = false;
+  @Input('matchaTooltipLeft') preferLeft: boolean = false;
+  @Input('matchaTooltipRight') preferRight: boolean = false;
+  @Input('matchaTooltipEnableClose') tooltipEnableClose: boolean = false;
+
+  private tooltipElement: HTMLElement | null = null;
+  private documentClickListener: (() => void) | null = null;
+
+  constructor(private el: ElementRef, private renderer: Renderer2) {}
+
+  @HostListener('mouseenter')
+  onMouseEnter() {
+    if (this.tooltipEnableClose) {
+      // Em modo de clique/tap, não abre via hover
+      return;
+    }
+    if (this.tooltipDisabled || this.tooltipElement || !this.tooltipText) {
+      return;
+    }
+    this.createTooltip();
+  }
+
+  @HostListener('mouseleave')
+  onMouseLeave() {
+    if (!this.tooltipEnableClose && this.tooltipElement) {
+      this.destroyTooltip();
+    }
+  }
+
+  @HostListener('click', ['$event'])
+  onClick(event: Event) {
+    if (!this.tooltipEnableClose) {
+      return;
+    }
+    event.stopPropagation();
+    if (!this.tooltipElement && !this.tooltipDisabled && this.tooltipText) {
+      this.createTooltip();
+    }
+  }
+
+  private createTooltip() {
+    // Cria o tooltip e adiciona a classe base
+    this.tooltipElement = this.renderer.createElement('div');
+    this.renderer.addClass(this.tooltipElement, 'matcha-tooltip-content');
+
+    // Define o conteúdo do tooltip
+    this.tooltipElement!.textContent = this.tooltipText;
+
+    // Define estilos iniciais para medição
+    this.renderer.setStyle(this.tooltipElement, 'position', 'absolute');
+    this.renderer.setStyle(this.tooltipElement, 'top', '0');
+    this.renderer.setStyle(this.tooltipElement, 'left', '0');
+    this.renderer.setStyle(this.tooltipElement, 'visibility', 'hidden');
+    this.renderer.appendChild(document.body, this.tooltipElement);
+
+    // Se tooltipEnableClose estiver ativo, adiciona o botão de fechar
+    if (this.tooltipEnableClose) {
+      const closeButton = this.renderer.createElement('div');
+      this.renderer.addClass(closeButton, 'matcha-tooltip-close');
+      this.renderer.appendChild(this.tooltipElement, closeButton);
+      this.renderer.listen(closeButton, 'click', (e: Event) => {
+        e.stopPropagation();
+        this.destroyTooltip();
+      });
+      this.documentClickListener = this.renderer.listen('document', 'click', (e: Event) => {
+        if (this.tooltipElement && !this.tooltipElement.contains(e.target as Node)) {
+          this.destroyTooltip();
+        }
+      });
+    }
+
+    // Medidas e cálculo de posição
+    const margin = 8;
+    const hostRect = this.el.nativeElement.getBoundingClientRect();
+    const tooltipRect = this.tooltipElement!.getBoundingClientRect();
+
+    const hasSpaceAbove = hostRect.top >= tooltipRect.height + margin;
+    const hasSpaceBelow = (window.innerHeight - hostRect.bottom) >= tooltipRect.height + margin;
+    const hasSpaceLeft  = hostRect.left >= tooltipRect.width + margin;
+    const hasSpaceRight = (window.innerWidth - hostRect.right) >= tooltipRect.width + margin;
+
+    let chosenPosition: 'above' | 'below' | 'left' | 'right' = 'above';
+    if (this.preferAbove && hasSpaceAbove) {
+      chosenPosition = 'above';
+    } else if (this.preferBelow && hasSpaceBelow) {
+      chosenPosition = 'below';
+    } else if (this.preferLeft && hasSpaceLeft) {
+      chosenPosition = 'left';
+    } else if (this.preferRight && hasSpaceRight) {
+      chosenPosition = 'right';
+    } else {
+      chosenPosition = hasSpaceAbove ? 'above' : (hasSpaceBelow ? 'below' : 'above');
+    }
+
+    let top: number = 0;
+    let left: number = 0;
+    switch (chosenPosition) {
+      case 'above':
+        top = hostRect.top + window.scrollY - tooltipRect.height - margin;
+        left = hostRect.left + window.scrollX + (hostRect.width - tooltipRect.width) / 2;
+        break;
+      case 'below':
+        top = hostRect.bottom + window.scrollY + margin;
+        left = hostRect.left + window.scrollX + (hostRect.width - tooltipRect.width) / 2;
+        break;
+      case 'left':
+        top = hostRect.top + window.scrollY + (hostRect.height - tooltipRect.height) / 2;
+        left = hostRect.left + window.scrollX - tooltipRect.width - margin;
+        break;
+      case 'right':
+        top = hostRect.top + window.scrollY + (hostRect.height - tooltipRect.height) / 2;
+        left = hostRect.right + window.scrollX + margin;
+        break;
+    }
+
+    if (left < margin) {
+      left = margin;
+    } else if (left + tooltipRect.width > window.innerWidth - margin) {
+      left = window.innerWidth - tooltipRect.width - margin;
+    }
+
+    this.renderer.setStyle(this.tooltipElement, 'top', `${top}px`);
+    this.renderer.setStyle(this.tooltipElement, 'left', `${left}px`);
+    this.renderer.setStyle(this.tooltipElement, 'visibility', 'visible');
+
+    this.renderer.removeClass(this.tooltipElement, 'matcha-tooltip-content_below');
+    this.renderer.removeClass(this.tooltipElement, 'matcha-tooltip-content_left');
+    this.renderer.removeClass(this.tooltipElement, 'matcha-tooltip-content_right');
+    if (chosenPosition === 'below') {
+      this.renderer.addClass(this.tooltipElement, 'matcha-tooltip-content_below');
+    } else if (chosenPosition === 'left') {
+      this.renderer.addClass(this.tooltipElement, 'matcha-tooltip-content_left');
+    } else if (chosenPosition === 'right') {
+      this.renderer.addClass(this.tooltipElement, 'matcha-tooltip-content_right');
+    }
+  }
+
+  private destroyTooltip() {
+    if (this.tooltipElement) {
+      this.renderer.removeChild(document.body, this.tooltipElement);
+      this.tooltipElement = null;
+    }
+    if (this.documentClickListener) {
+      this.documentClickListener();
+      this.documentClickListener = null;
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+// import { MatchaTooltipComponent } from './tooltip/tooltip.component';
+import { MatchaTooltipDirective } from './tooltip.directive';
+
+@NgModule({
+    declarations: [MatchaTooltipDirective],
+    imports: [CommonModule],
+    exports: [MatchaTooltipDirective],
+})
+export class MatchaTooltipModule {}

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

@@ -0,0 +1,259 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { tooltipArgtypes } from './tooltip.argtypes';
+import { MatchaTooltipModule } from './tooltip.module';
+import { MatchaButtonModule } from '../matcha-button/button.module';
+import { MatchaDividerModule } from '../matcha-divider/divider.module';
+import { MatchaIconModule } from '../matcha-icon/icon.module';
+
+export default {
+    title: 'Atoms / Tooltip',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [CommonModule, MatchaTooltipModule, MatchaButtonModule, MatchaIconModule, MatchaDividerModule],
+        }),
+    ],
+    tags: ['autodocs'],
+    args: {
+        tooltipText: 'Eu sou um tooltip incrivel!',
+        tooltipDisabled: false,
+        preferAbove: false,
+        preferBelow: false,
+        preferLeft: false,
+        preferRight: false,
+        tooltipEnableClose: false,
+    },
+    argTypes: tooltipArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+/** Este é o card principal */
+export const TooltipControls: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+            <section class="flex-column gap-16">
+                <!-- Botão renderizado com os parâmetros -->
+                <div class="background-surface-alpha p-16 radius-8 flex-column gap-8">
+                    <div class="flex-center">
+                        <button matcha-button size="medium" color="blue"
+                        matchaTooltip="${args['tooltipText']}"
+                        [matchaTooltipDisabled]="${args['tooltipDisabled']}"
+                        [matchaTooltipAbove]="${args['preferAbove']}"
+                        [matchaTooltipBelow]="${args['preferBelow']}"
+                        [matchaTooltipLeft]="${args['preferLeft']}"
+                        [matchaTooltipRight]="${args['preferRight']}"
+                        [matchaTooltipEnableClose]="${args['tooltipEnableClose']}"
+                        >{{ tooltipEnableClose ? 'Clique aqui' : 'Passe o mouse'}} para ver o tooltip</button>
+                    </div>
+                </div>
+            </section>
+        `,
+
+    }),
+    name: 'Tooltip Controls',
+};
+
+
+export const TooltipClickTap: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+            <section class="flex-column gap-16">
+                <!-- Botão renderizado com os parâmetros -->
+                <div class="background-surface-alpha p-16 radius-8 flex-column gap-8">
+                    <p>
+                        <span>
+                        Abrir tooltip com clique/tap no icone
+                        </span>
+                        <span class="i-matcha-info" matchaTooltip="Você pode me fechar clicando no X ou clidando fora de mim!"
+                        [matchaTooltipRight]="true"
+                        [matchaTooltipEnableClose]="true"></span>
+                    </p>
+                </div>
+            </section>
+        `,
+    }),
+    name: 'Tooltip Click/Tap',
+};
+
+
+export const TooltipAboveDefault: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+            <section class="flex-column gap-16">
+                <!-- Botão renderizado com os parâmetros -->
+                <div class="background-surface-alpha p-16 radius-8 flex-column gap-8">
+                    <p>
+                        <span
+                        matchaTooltip="Eu sou um tooltip incrivel!">
+                        Tooltip padrão
+                        </span>
+                    </p>
+
+                    <p>
+                        <span
+                        matchaTooltip="Eu sou um tooltip incrivel!"
+                        [matchaTooltipAbove]="true">
+                        Tooltip acima
+                        </span>
+                    </p>
+
+                    <p>
+                        <button matchaTooltip="Eu sou um botão com tooltip!">
+                        Tooltip padrão (Botão)
+                        </button>
+                    </p>
+
+                </div>
+            </section>
+        `,
+    }),
+    name: 'Tooltip Above/Default',
+};
+
+
+export const TooltipBelow: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+            <section class="flex-column gap-16">
+                <!-- Botão renderizado com os parâmetros -->
+                <div class="background-surface-alpha p-16 radius-8 flex-column gap-8">
+
+                    <p>
+                        <span
+                        matchaTooltip="Eu sou um tooltip incrivel!"
+                        [matchaTooltipBelow]="true">
+                        Tooltip abaixo
+                        </span>
+                    </p>
+
+                </div>
+            </section>
+        `,
+    }),
+    name: 'Tooltip Below',
+};
+
+
+export const TooltipLeft: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+            <section class="flex-column gap-16">
+                <!-- Botão renderizado com os parâmetros -->
+                <span>Se não houver espaço para a renderização do tooltip ele será exibido onde for possível</span>
+                <div class="background-surface-alpha p-16 radius-8 flex-column gap-8">
+
+                    <p class="text-left">
+                        <span
+                        matchaTooltip="Eu sou um tooltip incrivel!"
+                        [matchaTooltipLeft]="true">
+                        Tooltip esquerda
+                        </span>
+                    </p>
+
+                    <p class="text-right">
+                        <span
+                        matchaTooltip="Eu sou um tooltip incrivel!"
+                        [matchaTooltipLeft]="true">
+                        Tooltip esquerda
+                        </span>
+                    </p>
+
+                </div>
+            </section>
+        `,
+    }),
+    name: 'Tooltip Left',
+};
+
+
+export const TooltipRight: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+            <section class="flex-column gap-16">
+                <!-- Botão renderizado com os parâmetros -->
+                <span>Se não houver espaço para a renderização do tooltip ele será exibido onde for possível</span>
+                <div class="background-surface-alpha p-16 radius-8 flex-column gap-8">
+
+                    <p class="text-left">
+                        <span
+                        matchaTooltip="Eu sou um tooltip incrivel!"
+                        [matchaTooltipRight]="true">
+                        Tooltip direita
+                        </span>
+                    </p>
+
+                    <p class="text-right">
+                        <span
+                        matchaTooltip="Eu sou um tooltip incrivel!"
+                        [matchaTooltipRight]="true">
+                        Tooltip direita
+                        </span>
+                    </p>
+
+                </div>
+            </section>
+        `,
+    }),
+    name: 'Tooltip Right',
+};
+
+
+export const TooltipDisabled: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+            <section class="flex-column gap-16">
+                <!-- Botão renderizado com os parâmetros -->
+                <div class="background-surface-alpha p-16 radius-8 flex-column gap-8">
+                    <p>
+                        <span
+                        matchaTooltip="Eu sou um tooltip incrivel!"
+                        [matchaTooltipDisabled]="false">
+                        Tooltip disabled false
+                        </span>
+                    </p>
+
+                    <p>
+                        <span
+                        matchaTooltip="Eu sou um tooltip incrivel!"
+                        [matchaTooltipDisabled]="true"
+                        [matchaTooltipAbove]="true"
+                        [matchaTooltipBelow]="false"
+                        [matchaTooltipLeft]="false"
+                        [matchaTooltipRight]="false">
+                        Tooltip disabled true
+                        </span>
+                    </p>
+                </div>
+            </section>
+        `,
+    }),
+    name: 'Tooltip Disabled',
+};

package/src/lib/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  };

package/src/public-api.ts

@@ -0,0 +1,180 @@
+/*
+ * Public API Surface of matcha-components
+ */
+
+// -----------------------------------------------------------
+// INTERFACES
+// -----------------------------------------------------------
+export * from './lib/matcha-option/matcha-option-parent.interface';
+
+// -----------------------------------------------------------
+// COMPONENTS
+// -----------------------------------------------------------
+export * from './lib/matcha-accordion/accordion/accordion.component';
+export * from './lib/matcha-accordion/accordion-item/accordion-item.component';
+export * from './lib/matcha-accordion/accordion-header/accordion-header.component';
+export * from './lib/matcha-accordion/accordion-content/accordion-content.component';
+export * from './lib/matcha-infinite-scroll/matcha-infinite-scroll/matcha-infinite-scroll.component';
+export * from './lib/matcha-infinite-scroll/matcha-infinite-scroll-data/matcha-infinite-scroll-data.component';
+export * from './lib/matcha-lazyload/lazyload/lazyload.component';
+export * from './lib/matcha-lazyload/lazyload-data/lazyload-data.component';
+export * from './lib/matcha-button/button/button.component';
+export * from './lib/matcha-card/card/card.component';
+export * from './lib/matcha-divider/divider/divider.component';
+export * from './lib/matcha-title/title/title.component';
+export * from './lib/matcha-drawer/drawer/drawer.component';
+export * from './lib/matcha-drawer/drawer-container/drawer-container.component';
+export * from './lib/matcha-drawer/drawer-content/drawer-content.component';
+export * from './lib/matcha-icon/icon.component';
+export * from './lib/matcha-grid/grid.component';
+export * from './lib/matcha-masonry/masonry/masonry.component';
+export * from './lib/matcha-modal/modal-content/modal-content.component';
+export * from './lib/matcha-modal/modal-header/modal-header.component';
+export * from './lib/matcha-modal/modal-footer/modal-footer.component';
+export * from './lib/matcha-modal/modal-options/modal-options.component';
+export * from './lib/matcha-modal/modal/modal.component';
+export * from './lib/matcha-menu/menu.component';
+export * from './lib/matcha-toolbar/toolbar/toolbar.component';
+export * from './lib/matcha-toolbar/toolbar-button/toolbar-button.component';
+export * from './lib/matcha-toolbar/toolbar-content/toolbar-content.component';
+export * from './lib/matcha-toolbar/toolbar-main-button/toolbar-main-button.component';
+export * from './lib/matcha-toolbar/toolbar-custom-button/toolbar-custom-button.component';
+export * from './lib/matcha-form-field/matcha-form-field/matcha-form-field.component';
+export * from './lib/matcha-form-field/matcha-label/matcha-label.component';
+export * from './lib/matcha-form-field/matcha-error/matcha-error.component';
+export * from './lib/matcha-checkbox/checkbox/checkbox.component';
+export * from './lib/matcha-radio/radio/radio.component';
+export * from './lib/matcha-spin/spin/spin.component';
+export * from './lib/matcha-spinner/spinner/spinner.component';
+export * from './lib/matcha-hint-text/hint/hint-text.component';
+export * from './lib/matcha-skeleton/skeleton/skeleton.component';
+export * from './lib/matcha-slide-toggle/slide-toggle/slide-toggle.component';
+export * from './lib/matcha-button-toggle/button-toggle/button-toggle.component';
+export * from './lib/matcha-tabs/tabs/tabs.component';
+export * from './lib/matcha-tabs/tab-item/tab-item.component';
+export * from './lib/matcha-date-range/date-range/date-range.component';
+export * from './lib/matcha-time/time/time.component';
+// export * from './lib/matcha-input-phone/input-phone.component';
+export * from './lib/matcha-stepper/step/step.component';
+export * from './lib/matcha-stepper/stepper/stepper.component';
+export * from './lib/matcha-stepper/stepper-content/stepper-content.component';
+export * from './lib/matcha-stepper/stepper-controller/stepper-controller.component';
+export * from './lib/matcha-drop-list/drop-list/drop-list.component';
+export * from './lib/matcha-page-layout/page-layout.component';
+export * from './lib/matcha-avatar/avatar/avatar.component';
+export * from './lib/matcha-autocomplete/matcha-autocomplete.component';
+export * from './lib/matcha-option/matcha-option.component';
+export * from './lib/matcha-panel/matcha-panel.component';
+export * from './lib/matcha-select/matcha-select.component';
+export * from './lib/matcha-paginator/paginator/paginator.component';
+export * from './lib/matcha-paginator/paginator/page-event.interface';
+export * from './lib/matcha-paginator/paginator-intl.service';
+export * from './lib/matcha-highlight/highlight.component';
+export * from './lib/matcha-highlight/copy-button/copy-button.component';
+
+// -----------------------------------------------------------
+// MODULES
+// -----------------------------------------------------------
+export * from './lib/matcha-accordion/accordion.module';
+export * from './lib/matcha-infinite-scroll/matcha-infinite-scroll.module';
+export * from './lib/matcha-lazyload/lazyload.module';
+export * from './lib/matcha-modal/matcha-modal.module';
+export * from './lib/matcha-card/card.module';
+export * from './lib/matcha-masonry/masonry.module';
+export * from './lib/matcha-title/title.module';
+export * from './lib/matcha-button/button.module';
+export * from './lib/matcha-button-toggle/button-toggle.module';
+export * from './lib/matcha-toolbar/toolbar.module';
+export * from './lib/matcha-tooltip/tooltip.module';
+export * from './lib/matcha-divider/divider.module';
+export * from './lib/matcha-elevation/elevation.module';
+export * from './lib/matcha-grid/grid.module';
+export * from './lib/matcha-form-field/matcha-form-field.module';
+export * from './lib/matcha-components.module';
+export * from './lib/matcha-autocomplete/matcha-autocomplete.module';
+export * from './lib/matcha-option/matcha-option.module';
+export * from './lib/matcha-select/matcha-select.module';
+export * from './lib/matcha-badge/badge.module';
+export * from './lib/matcha-tabs/tabs.module';
+export * from './lib/matcha-checkbox/checkbox.module';
+export * from './lib/matcha-radio/radio.module';
+export * from './lib/matcha-icon/icon.module';
+export * from './lib/matcha-input/input.module';
+export * from './lib/matcha-menu/menu.module';
+export * from './lib/matcha-sidenav/sidenav.module';
+export * from './lib/matcha-paginator/paginator.module';
+export * from './lib/matcha-progress-bar/progress-bar.module';
+export * from './lib/matcha-skeleton/skeleton.module';
+export * from './lib/matcha-slide-toggle/slide-toggle.module';
+export * from './lib/matcha-slider/slider.module';
+export * from './lib/matcha-snackbar/snack-bar.module';
+export * from './lib/matcha-sort-header/sort-header.module';
+export * from './lib/matcha-table/table.module';
+export * from './lib/matcha-tabs/tabs.module';
+export * from './lib/matcha-ripple/ripple.module';
+export * from './lib/matcha-spin/spin.module';
+export * from './lib/matcha-spinner/spinner.module';
+export * from './lib/matcha-hint-text/hint.module';
+// export * from './lib/matcha-input-phone/input-phone.module';
+export * from './lib/matcha-stepper/stepper.module';
+export * from './lib/matcha-drop-list/drop-list.module';
+export * from './lib/matcha-page-layout/page-layout.module';
+export * from './lib/matcha-avatar/avatar.module';
+export * from './lib/matcha-drawer/drawer.module';
+export * from './lib/matcha-breakpoint-observable/breakpoint-observable.module';
+export * from './lib/matcha-autocomplete/matcha-autocomplete.module';
+export * from './lib/matcha-panel/matcha-panel.module';
+export * from './lib/matcha-paginator/paginator.module';
+export * from './lib/matcha-highlight/highlight.module';
+
+// -----------------------------------------------------------
+// SERVICES
+// -----------------------------------------------------------
+export * from './lib/matcha-modal/modal.service';
+export * from './lib/matcha-modal/overlay.service';
+export * from './lib/matcha-date-range/date-range.module';
+export * from './lib/matcha-time/time.module';
+export * from './lib/matcha-stepper/stepper.service';
+export * from './lib/matcha-breakpoint-observable/breakpoint-observer.service';
+
+// -----------------------------------------------------------
+// DIRECTIVES
+// -----------------------------------------------------------
+export * from './lib/matcha-tooltip/tooltip.directive';
+export * from './lib/matcha-input/input.directive';
+export * from './lib/matcha-table/table.directive';
+export * from './lib/matcha-sort-header/sort-header.directive';
+export * from './lib/matcha-snackbar/snack-bar.directive';
+export * from './lib/matcha-slider/matcha-slider.directive';
+export * from './lib/matcha-progress-bar/progress-bar.directive';
+export * from './lib/matcha-sidenav/sidenav.directive';
+export * from './lib/matcha-menu/menu.directive';
+export * from './lib/matcha-elevation/elevation.directive';
+export * from './lib/matcha-badge/badge.directive';
+export * from './lib/matcha-ripple/ripple.directive';
+export * from './lib/matcha-drop-list/directives/drag.directive';
+export * from './lib/matcha-drop-list/directives/drag-handle.directive';
+export * from './lib/matcha-autocomplete/matcha-autocomplete.directive';
+export * from './lib/matcha-select/matcha-select.directive';
+export * from './lib/matcha-stepper/next-step.diretive';
+export * from './lib/matcha-stepper/prev-step.diretive';
+export * from './lib/matcha-stepper/step-content.diretive';
+export * from './lib/matcha-drop-list/directives/drag.directive';
+export * from './lib/matcha-drop-list/directives/drag-handle.directive';
+
+// -----------------------------------------------------------
+// PIPES
+// -----------------------------------------------------------
+
+// -----------------------------------------------------------
+// VENDORS
+// -----------------------------------------------------------
+// export * from './lib/matcha-input-phone/lib/ngx-mask-applier.service';
+// export * from './lib/matcha-input-phone/lib/ngx-mask.directive';
+// export * from './lib/matcha-input-phone/lib/ngx-mask.module';
+// export * from './lib/matcha-input-phone/lib/ngx-mask.pipe';
+// export * from './lib/matcha-input-phone/lib/ngx-mask.service';
+// export * from './lib/matcha-input-phone/lib/ngx-mask.providers';
+// export * from './lib/matcha-input-phone/lib/custom-keyboard-event';
+// export * from './lib/matcha-input-phone/lib/ngx-mask.config';
+// export * from './lib/matcha-input-phone/lib/ngx-mask-expression.enum';

package/tsconfig.lib.json

@@ -0,0 +1,18 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "include": [
+    "**/**/**/*.stories.ts",
+    "projects/matcha-components/src/lib/**/*.stories.ts"
+  ],
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}