✨ copy content input

design-system/projects/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mprisma/components",
-  "version": "0.0.68",
+  "version": "0.0.69",
   "repository": {
     "type": "git",
     "url": "https://github.com/gabriel-gn/prisma-components.git"

design-system/projects/lib/src/components/inputs/copy-content-input/copy-content-input.component.html

@@ -1,9 +1,16 @@
 <ng-container *ngIf="text">
-  <div class="d-flex">
-    <input [attr.readonly]="disabled" [attr.disabled]="disabled" [value]="text" class="form-control" [title]="text"
-           style="border-radius: var(--border-radius-md) 0px 0px var(--border-radius-md) !important;" type="text">
-    <button [cdkCopyToClipboard]="text" class="btn-copy">
-      <i class="uil uil-lg uil-copy"></i>
+  <div class="d-flex" [ngClass]="{'h-100': fillHeight}">
+    <input [attr.disabled]="disabled" [attr.readonly]="disabled" [value]="text" class="form-control" [title]="text"
+           style="border-radius: var(--border-radius-{{borderRadius}}) 0px 0px var(--border-radius-{{borderRadius}}) !important;"
+           type="text"
+    >
+    <button
+      [cdkCopyToClipboard]="text"
+      (click)="copyCallbackExecute(text)"
+      class="btn btn-copy btn-{{btnColor}}"
+      style="border-radius: 0 var(--border-radius-{{borderRadius}}) var(--border-radius-{{borderRadius}}) 0 !important;"
+    >
+      <i class="uil uil-lg uil-copy d-flex justify-content-center align-items-center align-self-center"></i>
     </button>
   </div>
 </ng-container>

design-system/projects/lib/src/components/inputs/copy-content-input/copy-content-input.component.scss

@@ -0,0 +1,7 @@
+.btn-copy {
+  min-width: 40px !important;
+  max-width: 40px !important;
+  display: flex !important;
+  justify-content: center !important;
+  padding: 3px !important;
+}

design-system/projects/lib/src/components/inputs/copy-content-input/copy-content-input.component.ts

@@ -1,4 +1,6 @@
 import {Component, Input, OnInit} from '@angular/core';
+import {MainColors} from '../../../models/colors';
+import {Sizes} from '../../../models/sizes';
 
 @Component({
   selector: 'pm-copy-content-input',
@@ -15,24 +17,35 @@ export class CopyContentInputComponent implements OnInit {
    * Desabilita a interação o input.
    */
   @Input() disabled = true;
-  // public readonly notifier: SnotifyService;
+  /**
+   * Executa um comando ao copiar para a área de transferência
+   */
+  @Input() copyCallback: (inputText: string) => void;
+  /**
+   * Faz o input ter altura 100%
+   */
+  @Input() fillHeight: boolean = false;
+  /**
+   * Faz o input ter altura 100%
+   */
+  @Input() btnColor: MainColors = MainColors.primary;
+  /**
+   * Raio da borda
+   */
+  @Input() borderRadius: Sizes = Sizes.md;
+
 
   constructor(
-    // private notifierService: SnotifyService
   ) {
-    // this.notifier = notifierService;
   }
 
   ngOnInit(): void {
   }
 
-  // /**
-  //  * Notifica que o valor foi copiado para a clipboard.
-  //  * O que copia mesmo é a diretiva [cdkCopyToClipboard]="texto"
-  //  * @param inputElement: uma tag input
-  //  */
-  // copyInputMessage(inputElement) {
-  //   this.notifier.info('Link copiado para a área de transferência')
-  // }
+  public copyCallbackExecute(inputText: string): void {
+    if (this.copyCallback) {
+      this.copyCallback(inputText);
+    }
+  }
 
 }

design-system/projects/lib/src/components/inputs/copy-content-input/copy-content-input.stories.mdx

@@ -6,7 +6,7 @@ import SourceStory from '!!raw-loader!./copy-content-input.stories';
 import {
   defaultArgs,
   DefaultCopyContentInput,
-} from "./copy-content-input.stories";
+} from "./copy-content-input.stories"; import {MainColors} from "../../../models/colors"; import {Sizes} from "../../../models/sizes";
 
 export const argTypes = {
   disabled: {
@@ -22,6 +22,18 @@ export const argTypes = {
     },
     control: { type: 'text'}
   },
+  btnColor: {
+    table: {
+      defaultValue: { summary: defaultArgs.btnColor},
+    },
+    control: {type: 'select'}, options: Object.values(MainColors),
+  },
+  borderRadius: {
+    table: {
+      defaultValue: { summary: defaultArgs.borderRadius},
+    },
+    control: {type: 'select'}, options: Object.values(Sizes),
+  },
 }
 
 <Meta

design-system/projects/lib/src/components/inputs/copy-content-input/copy-content-input.stories.ts

@@ -1,6 +1,8 @@
 import {CopyContentInputComponent} from './copy-content-input.component';
 import {Meta} from '@storybook/angular/types-6-0';
 import {Story} from '@storybook/angular';
+import {MainColors} from '../../../models/colors';
+import {Sizes} from '../../../models/sizes';
 
 export default {
   title: 'Prisma/Stories/CopyContentInput',
@@ -13,15 +15,22 @@ export const Template: Story<CopyContentInputComponent> = (args) => ({
     <pm-copy-content-input
       [text]="text"
       [disabled]="disabled"
+      [copyCallback]="copyCallback"
+      [fillHeight]="fillHeight"
+      [btnColor]="btnColor"
+      [borderRadius]="borderRadius"
     >
-      Conteúdo
     </pm-copy-content-input>
   `
 });
 
 export const defaultArgs = {
   disabled: false,
-  text: ''
+  text: '',
+  copyCallback: undefined,
+  fillHeight: false,
+  btnColor: MainColors.primary,
+  borderRadius: Sizes.md
 };
 
 export const DefaultCopyContentInput = Template.bind({});

design-system/projects/lib/src/styles/default/_buttons.scss

@@ -44,16 +44,6 @@
   border: none;
 }
 
-.btn-copy {
-  @extend .btn-primary;
-  min-width: 40px !important;
-  max-width: 40px !important;
-  display: flex !important;
-  justify-content: center !important;
-  padding: 3px !important;
-  border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0 !important;
-}
-
 .btn-icon-action {
   box-shadow: none !important;
   outline: none !important;