From 25618ee628697ed8e8f28b8d6e697d7251eab86e Mon Sep 17 00:00:00 2001
From: Mathieu Boulianne <mathieu.boulianne1@gmail.com>
Date: Thu, 20 Jun 2019 15:05:51 -0400
Subject: [PATCH 1/9] Premier jet

---
 package-lock.json                             |  44 +--
 package.json                                  |   1 +
 src/components/button/button.html             |   1 +
 src/components/button/button.ts               |   3 +
 src/components/component-names.ts             |   1 +
 .../copy-to-clipboard.stories.ts.snap         | 296 ++++++++++++++++++
 .../copy-to-clipboard/copy-to-clipboard.html  |  14 +
 .../copy-to-clipboard.lang.en.json            |   5 +
 .../copy-to-clipboard.lang.fr.json            |   5 +
 .../copy-to-clipboard.stories.ts              |  39 +++
 .../copy-to-clipboard/copy-to-clipboard.ts    |  95 ++++++
 src/components/textfield/textfield.ts         |   2 -
 src/lang/en.ts                                |   1 +
 src/lang/fr.ts                                |   1 +
 .../input-management/input-management.ts      |  14 +-
 15 files changed, 485 insertions(+), 37 deletions(-)
 create mode 100644 src/components/copy-to-clipboard/__snapshots__/copy-to-clipboard.stories.ts.snap
 create mode 100644 src/components/copy-to-clipboard/copy-to-clipboard.html
 create mode 100644 src/components/copy-to-clipboard/copy-to-clipboard.lang.en.json
 create mode 100644 src/components/copy-to-clipboard/copy-to-clipboard.lang.fr.json
 create mode 100644 src/components/copy-to-clipboard/copy-to-clipboard.stories.ts
 create mode 100644 src/components/copy-to-clipboard/copy-to-clipboard.ts

diff --git a/package-lock.json b/package-lock.json
index fb09e0628..42559ba60 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7259,8 +7259,6 @@
             "version": "2.0.4",
             "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz",
             "integrity": "sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==",
-            "dev": true,
-            "optional": true,
             "requires": {
                 "good-listener": "^1.2.2",
                 "select": "^1.1.2",
@@ -8710,9 +8708,7 @@
         "delegate": {
             "version": "3.2.0",
             "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
-            "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
-            "dev": true,
-            "optional": true
+            "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
         },
         "delegates": {
             "version": "1.0.0",
@@ -11035,14 +11031,12 @@
                 "balanced-match": {
                     "version": "1.0.0",
                     "bundled": true,
-                    "dev": true,
-                    "optional": true
+                    "dev": true
                 },
                 "brace-expansion": {
                     "version": "1.1.11",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "balanced-match": "^1.0.0",
                         "concat-map": "0.0.1"
@@ -11057,20 +11051,17 @@
                 "code-point-at": {
                     "version": "1.1.0",
                     "bundled": true,
-                    "dev": true,
-                    "optional": true
+                    "dev": true
                 },
                 "concat-map": {
                     "version": "0.0.1",
                     "bundled": true,
-                    "dev": true,
-                    "optional": true
+                    "dev": true
                 },
                 "console-control-strings": {
                     "version": "1.1.0",
                     "bundled": true,
-                    "dev": true,
-                    "optional": true
+                    "dev": true
                 },
                 "core-util-is": {
                     "version": "1.0.2",
@@ -11187,8 +11178,7 @@
                 "inherits": {
                     "version": "2.0.3",
                     "bundled": true,
-                    "dev": true,
-                    "optional": true
+                    "dev": true
                 },
                 "ini": {
                     "version": "1.3.5",
@@ -11200,7 +11190,6 @@
                     "version": "1.0.0",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "number-is-nan": "^1.0.0"
                     }
@@ -11215,7 +11204,6 @@
                     "version": "3.0.4",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "brace-expansion": "^1.1.7"
                     }
@@ -11223,14 +11211,12 @@
                 "minimist": {
                     "version": "0.0.8",
                     "bundled": true,
-                    "dev": true,
-                    "optional": true
+                    "dev": true
                 },
                 "minipass": {
                     "version": "2.3.5",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "safe-buffer": "^5.1.2",
                         "yallist": "^3.0.0"
@@ -11249,7 +11235,6 @@
                     "version": "0.5.1",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "minimist": "0.0.8"
                     }
@@ -11330,8 +11315,7 @@
                 "number-is-nan": {
                     "version": "1.0.1",
                     "bundled": true,
-                    "dev": true,
-                    "optional": true
+                    "dev": true
                 },
                 "object-assign": {
                     "version": "4.1.1",
@@ -11343,7 +11327,6 @@
                     "version": "1.4.0",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "wrappy": "1"
                     }
@@ -11466,7 +11449,6 @@
                     "version": "1.0.2",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "code-point-at": "^1.0.0",
                         "is-fullwidth-code-point": "^1.0.0",
@@ -11820,8 +11802,6 @@
             "version": "1.2.2",
             "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
             "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
-            "dev": true,
-            "optional": true,
             "requires": {
                 "delegate": "^3.1.2"
             }
@@ -19958,9 +19938,7 @@
         "select": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
-            "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
-            "dev": true,
-            "optional": true
+            "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
         },
         "select-hose": {
             "version": "2.0.0",
@@ -22245,9 +22223,7 @@
         "tiny-emitter": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
-            "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
-            "dev": true,
-            "optional": true
+            "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
         },
         "tinycolor2": {
             "version": "1.4.1",
diff --git a/package.json b/package.json
index 8f866a959..6c20d519b 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "dependencies": {
         "axios": "^0.17.1",
         "cleave.js": "^1.5.0",
+        "clipboard": "^2.0.4",
         "css-element-queries": "^0.4.0",
         "enquire.js": "^2.1.6",
         "es6-promise": "^4.1.1",
diff --git a/src/components/button/button.html b/src/components/button/button.html
index 6f3ddc439..dfc111dbb 100644
--- a/src/components/button/button.html
+++ b/src/components/button/button.html
@@ -7,6 +7,7 @@
         :disabled="disabled || isWaiting"
         :type="type"
         @click="onClick"
+        @mousedown="onMousedown"
         @focus="onFocus"
         @blur="onBlur">
     <m-icon aria-hidden="true"
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index 148e6c3e7..ff230af77 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -67,6 +67,9 @@ export class MButton extends Vue {
         (this.$el as HTMLElement).blur();
     }
 
+    @Emit('mousedown')
+    onMousedown(event: Event): void { }
+
     @Emit('focus')
     onFocus(event: Event): void { }
 
diff --git a/src/components/component-names.ts b/src/components/component-names.ts
index cf4a95315..a6dc3a639 100644
--- a/src/components/component-names.ts
+++ b/src/components/component-names.ts
@@ -13,6 +13,7 @@ export const CHECKBOX_NAME: string = 'm-checkbox';
 export const CHIP_NAME: string = 'm-chip';
 export const CHIP_ADD_NAME: string = 'm-chip-add';
 export const CHIP_DELETE_NAME: string = 'm-chip-delete';
+export const COPY_TO_CLIPBOARD_NAME: string = 'm-copy-to-clipboard';
 export const DATEFIELDS_NAME: string = 'm-datefields';
 export const DATEPICKER_NAME: string = 'm-datepicker';
 export const DATERANGEPICKER_NAME: string = 'm-daterangepicker';
diff --git a/src/components/copy-to-clipboard/__snapshots__/copy-to-clipboard.stories.ts.snap b/src/components/copy-to-clipboard/__snapshots__/copy-to-clipboard.stories.ts.snap
new file mode 100644
index 000000000..6269de78a
--- /dev/null
+++ b/src/components/copy-to-clipboard/__snapshots__/copy-to-clipboard.stories.ts.snap
@@ -0,0 +1,296 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots components|m-copy-to-clipboard custom 1`] = `
+<div>
+  <div
+    class="m-textfield m--is-readonly m--has-label m--is-type-text"
+    style="width: 100%; max-width: 288px;"
+  >
+    <div
+      class="m-input-style m--is-readonly m--is-label-up m--has-label m--has-value m--is-tag-default"
+    >
+      <div
+        class="m-input-style__content"
+        style="margin-top: 10px;"
+      >
+        <label
+          class="m-input-style__label"
+          for="mTextfield-uuid"
+        >
+          <span
+            class="m-input-style__text"
+          >
+            <span>
+              some label
+            </span>
+             
+            <!---->
+          </span>
+        </label>
+         
+        <div
+          class="m-input-style__body"
+        >
+          <!---->
+           
+          <div
+            class="m-input-style__left-content"
+          >
+            <input
+              class="m-textfield__input"
+              id="mTextfield-uuid"
+              maxlength="Infinity"
+              readonly="readonly"
+              type="text"
+            />
+              
+            <!---->
+             
+            <!---->
+             
+            <!---->
+          </div>
+           
+          <div
+            class="m-input-style__right-content"
+          >
+            <span
+              style="white-space: nowrap;"
+            />
+          </div>
+           
+          <!---->
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="m-textfield__validation"
+    >
+      <div
+        class="m-validation-message m-textfield__validation__message"
+      >
+        <!---->
+         
+        <!---->
+      </div>
+       
+      <!---->
+    </div>
+  </div>
+   
+  <button
+    class="m-button m--is-skin-secondary"
+    type="button"
+  >
+    <!---->
+     
+    <!---->
+     
+    <span
+      class="m-button__text"
+    >
+      Custom Copy Button 
+      <!---->
+    </span>
+     
+    <!---->
+     
+    <!---->
+  </button>
+</div>
+`;
+
+exports[`Storyshots components|m-copy-to-clipboard default 1`] = `
+<div>
+  <div
+    class="m-textfield m--is-readonly m--is-type-text"
+    style="width: 100%; max-width: 288px;"
+  >
+    <div
+      class="m-input-style m--is-readonly m--is-tag-default"
+    >
+      <div
+        class="m-input-style__content"
+        style="margin-top: 10px;"
+      >
+        <span
+          class="m-input-style__label"
+          style="z-index: -1;"
+        >
+          <span
+            class="m-input-style__text"
+          />
+        </span>
+         
+        <div
+          class="m-input-style__body"
+        >
+          <div
+            class="m-input-style__prefix"
+          />
+           
+          <div
+            class="m-input-style__left-content"
+          >
+            <input
+              class="m-textfield__input"
+              id="mTextfield-uuid"
+              maxlength="Infinity"
+              readonly="readonly"
+              type="text"
+            />
+              
+            <!---->
+             
+            <!---->
+             
+            <!---->
+          </div>
+           
+          <div
+            class="m-input-style__right-content"
+          >
+            <span
+              style="white-space: nowrap;"
+            />
+          </div>
+           
+          <!---->
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="m-textfield__validation"
+    >
+      <div
+        class="m-validation-message m-textfield__validation__message"
+      >
+        <!---->
+         
+        <!---->
+      </div>
+       
+      <!---->
+    </div>
+  </div>
+   
+  <button
+    class="m-button m--is-skin-primary"
+    type="button"
+  >
+    <!---->
+     
+    <!---->
+     
+    <span
+      class="m-button__text"
+    >
+      Copy 
+      <!---->
+    </span>
+     
+    <!---->
+     
+    <!---->
+  </button>
+</div>
+`;
+
+exports[`Storyshots components|m-copy-to-clipboard default with value 1`] = `
+<div>
+  <div
+    class="m-textfield m--is-readonly m--is-type-text"
+    style="width: 100%; max-width: 288px;"
+  >
+    <div
+      class="m-input-style m--is-readonly m--has-value m--is-tag-default"
+    >
+      <div
+        class="m-input-style__content"
+        style="margin-top: 10px;"
+      >
+        <span
+          class="m-input-style__label"
+          style="z-index: -1;"
+        >
+          <span
+            class="m-input-style__text"
+          />
+        </span>
+         
+        <div
+          class="m-input-style__body"
+        >
+          <div
+            class="m-input-style__prefix"
+          />
+           
+          <div
+            class="m-input-style__left-content"
+          >
+            <input
+              class="m-textfield__input"
+              id="mTextfield-uuid"
+              maxlength="Infinity"
+              readonly="readonly"
+              type="text"
+            />
+              
+            <!---->
+             
+            <!---->
+             
+            <!---->
+          </div>
+           
+          <div
+            class="m-input-style__right-content"
+          >
+            <span
+              style="white-space: nowrap;"
+            />
+          </div>
+           
+          <!---->
+        </div>
+      </div>
+    </div>
+     
+    <div
+      class="m-textfield__validation"
+    >
+      <div
+        class="m-validation-message m-textfield__validation__message"
+      >
+        <!---->
+         
+        <!---->
+      </div>
+       
+      <!---->
+    </div>
+  </div>
+   
+  <button
+    class="m-button m--is-skin-primary"
+    type="button"
+  >
+    <!---->
+     
+    <!---->
+     
+    <span
+      class="m-button__text"
+    >
+      Copy 
+      <!---->
+    </span>
+     
+    <!---->
+     
+    <!---->
+  </button>
+</div>
+`;
diff --git a/src/components/copy-to-clipboard/copy-to-clipboard.html b/src/components/copy-to-clipboard/copy-to-clipboard.html
new file mode 100644
index 000000000..543f419e4
--- /dev/null
+++ b/src/components/copy-to-clipboard/copy-to-clipboard.html
@@ -0,0 +1,14 @@
+<div>
+    <slot name="input"
+          :props="inputProps"
+          :handlers="inputHandlers">
+        <m-textfield v-bind="inputProps"
+                     v-on="inputHandlers">
+        </m-textfield>
+    </slot>
+    <slot name="button"
+          :handlers="buttonHandlers">
+        <m-button v-on="buttonHandlers"
+                  @mousedown.prevent>{{ labelCopyBtn }}</m-button>
+    </slot>
+</div>
diff --git a/src/components/copy-to-clipboard/copy-to-clipboard.lang.en.json b/src/components/copy-to-clipboard/copy-to-clipboard.lang.en.json
new file mode 100644
index 000000000..4984f99e3
--- /dev/null
+++ b/src/components/copy-to-clipboard/copy-to-clipboard.lang.en.json
@@ -0,0 +1,5 @@
+{
+    "m-copy-to-clipboard": {
+        "copy": "Copier"
+    }
+}
diff --git a/src/components/copy-to-clipboard/copy-to-clipboard.lang.fr.json b/src/components/copy-to-clipboard/copy-to-clipboard.lang.fr.json
new file mode 100644
index 000000000..162df8804
--- /dev/null
+++ b/src/components/copy-to-clipboard/copy-to-clipboard.lang.fr.json
@@ -0,0 +1,5 @@
+{
+    "m-copy-to-clipboard": {
+        "copy": "Copy"
+    }
+}
diff --git a/src/components/copy-to-clipboard/copy-to-clipboard.stories.ts b/src/components/copy-to-clipboard/copy-to-clipboard.stories.ts
new file mode 100644
index 000000000..039a4cff4
--- /dev/null
+++ b/src/components/copy-to-clipboard/copy-to-clipboard.stories.ts
@@ -0,0 +1,39 @@
+import { withA11y } from '@storybook/addon-a11y';
+import { storiesOf } from '@storybook/vue';
+import Vue from 'vue';
+import { componentsHierarchyRootSeparator } from '../../../conf/storybook/utils';
+import { MButton } from '../button/button';
+import { COPY_TO_CLIPBOARD_NAME } from '../component-names';
+import { MTextfield } from '../textfield/textfield';
+import CopyToClipboardPlugin from './copy-to-clipboard';
+
+Vue.use(CopyToClipboardPlugin);
+const componentName: string = COPY_TO_CLIPBOARD_NAME;
+
+storiesOf(`${componentsHierarchyRootSeparator}${COPY_TO_CLIPBOARD_NAME}`, module)
+    .addDecorator(withA11y)
+    .add('default', () => ({
+        template: `<${componentName} :value="''" />`
+    }))
+    .add('default with value', () => ({
+        template: `<${componentName} :value="'some value'" />`
+    }))
+    .add('custom', () => ({
+        template: `
+        <${componentName} :value="value">
+            <template slot="input" slot-scope="{ props, handlers }">
+                <m-textfield v-bind="props" v-on="handlers" :label="'some label'">
+                </m-textfield>
+            </template>
+            <template slot="button" slot-scope="{ handlers }">
+                <m-button v-on="handlers" skin="secondary" @mousedown.prevent>Custom Copy Button</m-button>
+            </template>
+        </${componentName}>`,
+        data: () => ({
+            value: 'some value'
+        }),
+        components: {
+            MTextfield,
+            MButton
+        }
+    }));
diff --git a/src/components/copy-to-clipboard/copy-to-clipboard.ts b/src/components/copy-to-clipboard/copy-to-clipboard.ts
new file mode 100644
index 000000000..17520c7af
--- /dev/null
+++ b/src/components/copy-to-clipboard/copy-to-clipboard.ts
@@ -0,0 +1,95 @@
+import ClipboardJs from 'clipboard';
+import { PluginObject } from 'vue';
+import { Component, Prop } from 'vue-property-decorator';
+import { ModulVue } from '../../utils/vue/vue';
+import ButtonPlugin from '../button/button';
+import { COPY_TO_CLIPBOARD_NAME } from '../component-names';
+import I18nPlugin from '../i18n/i18n';
+import TextfieldPlugin from '../textfield/textfield';
+import WithRender from './copy-to-clipboard.html';
+
+export interface CopyToClipboardInputSupport {
+    value: any;
+    readonly: boolean;
+    selection: string;
+}
+
+class DefaultCopyToClipboardPropsValue implements CopyToClipboardInputSupport {
+    constructor(public readonly: boolean = true, public selection: string = '', public value: string = '') { }
+}
+
+function copyToClipboard(text: string): Promise<void> {
+    return new Promise((resolve, reject) => {
+        const fakeElement: HTMLButtonElement = document.createElement('button');
+        const clipboard: ClipboardJs = new ClipboardJs(fakeElement, {
+            text(): string { return text; },
+            action(): string { return 'copy'; },
+            container: document.body
+        });
+
+        clipboard.on('success', (result: any) => {
+            clipboard.destroy();
+            resolve(result);
+        });
+
+        clipboard.on('error', (result: any) => {
+            clipboard.destroy();
+            reject(result);
+        });
+
+        fakeElement.click();
+    });
+}
+
+@WithRender
+@Component
+export class MCopyToClipboard extends ModulVue {
+    @Prop({
+        default: '',
+        required: true
+    })
+    value: string;
+
+    labelCopyBtn: string = this.$i18n.translate('m-copy-to-clipboard:copy');
+    selectedText: string = '';
+
+    get inputProps(): CopyToClipboardInputSupport {
+        return new DefaultCopyToClipboardPropsValue(true, this.selectedText, this.value);
+    }
+
+    get inputHandlers(): { [key: string]: (value: string) => void } {
+        return {
+            click: this.copyText
+        };
+    }
+
+    get buttonHandlers(): { [key: string]: (value: string) => void } {
+        return {
+            click: this.copyText,
+            mousedown: this.selectText
+        };
+    }
+
+    selectText(): void {
+        this.selectedText = '';
+        this.$nextTick(() => {
+            this.selectedText = this.value;
+        });
+    }
+
+    copyText(): void {
+        copyToClipboard(this.value);
+        this.selectText();
+    }
+}
+
+const CopyToClipboardPlugin: PluginObject<any> = {
+    install(v): void {
+        v.component(COPY_TO_CLIPBOARD_NAME, MCopyToClipboard);
+        v.use(I18nPlugin);
+        v.use(TextfieldPlugin);
+        v.use(ButtonPlugin);
+    }
+};
+
+export default CopyToClipboardPlugin;
diff --git a/src/components/textfield/textfield.ts b/src/components/textfield/textfield.ts
index d7342f61d..aedf25bd0 100644
--- a/src/components/textfield/textfield.ts
+++ b/src/components/textfield/textfield.ts
@@ -38,7 +38,6 @@ const ICON_NAME_PASSWORD_HIDDEN: string = 'm-svg__hide';
     ]
 })
 export class MTextfield extends ModulVue implements InputManagementData {
-
     @Prop({
         default: MTextfieldType.Text,
         validator: value =>
@@ -95,7 +94,6 @@ export class MTextfield extends ModulVue implements InputManagementData {
         this.as<InputManagement>().trimWordWrap = this.hasWordWrap;
     }
 
-
     private togglePasswordVisibility(event): void {
         this.passwordAsText = !this.passwordAsText;
     }
diff --git a/src/lang/en.ts b/src/lang/en.ts
index fa37944ab..9e7f181c3 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -12,6 +12,7 @@ const EnglishPlugin: PluginObject<any> = {
                 require('../components/list-item/list-item.lang.en.json'),
                 require('../components/modal/modal.lang.en.json'),
                 require('../components/chip/chip.lang.en.json'),
+                require('../components/copy-to-clipboard/copy-to-clipboard.lang.en.json'),
                 require('../components/datefields/datefields.lang.en.json'),
                 require('../components/datepicker/datepicker.lang.en.json'),
                 require('../components/daterangepicker/daterangepicker.lang.en.json'),
diff --git a/src/lang/fr.ts b/src/lang/fr.ts
index 0487bbba9..c2109e781 100644
--- a/src/lang/fr.ts
+++ b/src/lang/fr.ts
@@ -13,6 +13,7 @@ const FrenchPlugin: PluginObject<any> = {
                 require('../components/modal/modal.lang.fr.json'),
                 require('../components/calendar/calendar.lang.fr.json'),
                 require('../components/chip/chip.lang.fr.json'),
+                require('../components/copy-to-clipboard/copy-to-clipboard.lang.fr.json'),
                 require('../components/datefields/datefields.lang.fr.json'),
                 require('../components/datepicker/datepicker.lang.fr.json'),
                 require('../components/daterangepicker/daterangepicker.lang.fr.json'),
diff --git a/src/mixins/input-management/input-management.ts b/src/mixins/input-management/input-management.ts
index edb1e11d8..69682db33 100644
--- a/src/mixins/input-management/input-management.ts
+++ b/src/mixins/input-management/input-management.ts
@@ -1,7 +1,7 @@
 import Component from 'vue-class-component';
 import { Model, Prop, Watch } from 'vue-property-decorator';
 import { ModulVue } from '../../utils/vue/vue';
-import { InputStateMixin } from '../input-state/input-state';
+import { InputState, InputStateMixin } from '../input-state/input-state';
 
 
 export interface InputManagementProps {
@@ -34,6 +34,8 @@ export class InputManagement extends ModulVue
     public autocomplete: string;
     @Prop()
     public focus: boolean;
+    @Prop({ default: '' })
+    public selection: string;
 
     public trimWordWrap: boolean = false;
 
@@ -58,6 +60,16 @@ export class InputManagement extends ModulVue
         return !!(this.model || '').toString().trim();
     }
 
+    @Watch('selection')
+    private updateSelection(): void {
+        const inputElement: HTMLInputElement = this.as<InputState>().getInput() as HTMLInputElement;
+        if (inputElement && this.selection) {
+            inputElement.select();
+            const selectionIndex: number = this.as<InputManagement>().value.indexOf(this.selection);
+            inputElement.setSelectionRange(selectionIndex, selectionIndex + this.selection.length);
+        }
+    }
+
     onClick(event: MouseEvent): void {
         this.internalIsFocus = this.as<InputStateMixin>().active;
         let inputEl: HTMLElement | undefined = this.as<InputStateMixin>().getInput();

From 525d6a05f5b7cc2e78626f4cbff10480acdf00bf Mon Sep 17 00:00:00 2001
From: Mathieu Boulianne <mathieu.boulianne1@gmail.com>
Date: Fri, 21 Jun 2019 07:44:26 -0400
Subject: [PATCH 2/9] Repair tests

---
 src/components/login/__snapshots__/login.spec.ts.snap | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/login/__snapshots__/login.spec.ts.snap b/src/components/login/__snapshots__/login.spec.ts.snap
index 96e715039..0bc21ac96 100644
--- a/src/components/login/__snapshots__/login.spec.ts.snap
+++ b/src/components/login/__snapshots__/login.spec.ts.snap
@@ -2,8 +2,8 @@
 
 exports[`MLogin when login should render correctly 1`] = `
 <form>
-  <m-textfield-stub tagStyle="default" value="" focus="true" width="100%" maxWidth="regular" label="Username" type="text" icon="true" maxLength="0" lengthOverflow="true" characterCountThreshold="0"></m-textfield-stub><br>
-  <m-textfield-stub tagStyle="default" value="" width="100%" maxWidth="regular" label="Password" type="password" icon="true" maxLength="0" lengthOverflow="true" characterCountThreshold="0"></m-textfield-stub><br>
+  <m-textfield-stub tagStyle="default" value="" focus="true" selection="" width="100%" maxWidth="regular" label="Username" type="text" icon="true" maxLength="0" lengthOverflow="true" characterCountThreshold="0"></m-textfield-stub><br>
+  <m-textfield-stub tagStyle="default" value="" selection="" width="100%" maxWidth="regular" label="Password" type="password" icon="true" maxLength="0" lengthOverflow="true" characterCountThreshold="0"></m-textfield-stub><br>
   <m-button-stub type="submit" skin="primary" iconPosition="left" iconSize="12px">
     <m-i18n-stub k="m-login:login" params="" htmlEncode="true"></m-i18n-stub>
   </m-button-stub><br>

From 5ce289080de6560775e423caaf33cc37eb4edc26 Mon Sep 17 00:00:00 2001
From: Mathieu Boulianne <mathieu.boulianne1@gmail.com>
Date: Fri, 21 Jun 2019 11:06:53 -0400
Subject: [PATCH 3/9] Make copy to clipboard work on mobile Add a reuqest
 animation frame on mousedown to avoid the mousedown.prevent.

---
 .../__snapshots__/copy-to-clipboard.stories.ts.snap   |  4 ++--
 .../copy-to-clipboard/copy-to-clipboard.html          |  3 +--
 .../copy-to-clipboard/copy-to-clipboard.lang.en.json  |  3 ++-
 .../copy-to-clipboard/copy-to-clipboard.lang.fr.json  |  3 ++-
 .../copy-to-clipboard/copy-to-clipboard.stories.ts    |  2 +-
 src/components/copy-to-clipboard/copy-to-clipboard.ts | 11 +++++++++--
 src/components/input-style/input-style.scss           |  9 +--------
 src/components/toast/toast.ts                         |  5 +++++
 src/mixins/input-management/input-management.ts       |  3 +--
 9 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/components/copy-to-clipboard/__snapshots__/copy-to-clipboard.stories.ts.snap b/src/components/copy-to-clipboard/__snapshots__/copy-to-clipboard.stories.ts.snap
index 6269de78a..96f9b7749 100644
--- a/src/components/copy-to-clipboard/__snapshots__/copy-to-clipboard.stories.ts.snap
+++ b/src/components/copy-to-clipboard/__snapshots__/copy-to-clipboard.stories.ts.snap
@@ -187,7 +187,7 @@ exports[`Storyshots components|m-copy-to-clipboard default 1`] = `
     <span
       class="m-button__text"
     >
-      Copy 
+      Copier 
       <!---->
     </span>
      
@@ -284,7 +284,7 @@ exports[`Storyshots components|m-copy-to-clipboard default with value 1`] = `
     <span
       class="m-button__text"
     >
-      Copy 
+      Copier 
       <!---->
     </span>
      
diff --git a/src/components/copy-to-clipboard/copy-to-clipboard.html b/src/components/copy-to-clipboard/copy-to-clipboard.html
index 543f419e4..cb27927c4 100644
--- a/src/components/copy-to-clipboard/copy-to-clipboard.html
+++ b/src/components/copy-to-clipboard/copy-to-clipboard.html
@@ -8,7 +8,6 @@
     </slot>
     <slot name="button"
           :handlers="buttonHandlers">
-        <m-button v-on="buttonHandlers"
-                  @mousedown.prevent>{{ labelCopyBtn }}</m-button>
+        <m-button v-on="buttonHandlers">{{ labelCopyBtn }}</m-button>
     </slot>
 </div>
diff --git a/src/components/copy-to-clipboard/copy-to-clipboard.lang.en.json b/src/components/copy-to-clipboard/copy-to-clipboard.lang.en.json
index 4984f99e3..c026c2493 100644
--- a/src/components/copy-to-clipboard/copy-to-clipboard.lang.en.json
+++ b/src/components/copy-to-clipboard/copy-to-clipboard.lang.en.json
@@ -1,5 +1,6 @@
 {
     "m-copy-to-clipboard": {
-        "copy": "Copier"
+        "copy": "Copy",
+        "copied": "Copied"
     }
 }
diff --git a/src/components/copy-to-clipboard/copy-to-clipboard.lang.fr.json b/src/components/copy-to-clipboard/copy-to-clipboard.lang.fr.json
index 162df8804..25a7c3b14 100644
--- a/src/components/copy-to-clipboard/copy-to-clipboard.lang.fr.json
+++ b/src/components/copy-to-clipboard/copy-to-clipboard.lang.fr.json
@@ -1,5 +1,6 @@
 {
     "m-copy-to-clipboard": {
-        "copy": "Copy"
+        "copy": "Copier",
+        "copied": "Copié"
     }
 }
diff --git a/src/components/copy-to-clipboard/copy-to-clipboard.stories.ts b/src/components/copy-to-clipboard/copy-to-clipboard.stories.ts
index 039a4cff4..c705e9387 100644
--- a/src/components/copy-to-clipboard/copy-to-clipboard.stories.ts
+++ b/src/components/copy-to-clipboard/copy-to-clipboard.stories.ts
@@ -26,7 +26,7 @@ storiesOf(`${componentsHierarchyRootSeparator}${COPY_TO_CLIPBOARD_NAME}`, module
                 </m-textfield>
             </template>
             <template slot="button" slot-scope="{ handlers }">
-                <m-button v-on="handlers" skin="secondary" @mousedown.prevent>Custom Copy Button</m-button>
+                <m-button v-on="handlers" skin="secondary">Custom Copy Button</m-button>
             </template>
         </${componentName}>`,
         data: () => ({
diff --git a/src/components/copy-to-clipboard/copy-to-clipboard.ts b/src/components/copy-to-clipboard/copy-to-clipboard.ts
index 17520c7af..1abfb5f54 100644
--- a/src/components/copy-to-clipboard/copy-to-clipboard.ts
+++ b/src/components/copy-to-clipboard/copy-to-clipboard.ts
@@ -6,6 +6,7 @@ import ButtonPlugin from '../button/button';
 import { COPY_TO_CLIPBOARD_NAME } from '../component-names';
 import I18nPlugin from '../i18n/i18n';
 import TextfieldPlugin from '../textfield/textfield';
+import ToastPlugin, { MToastPosition, MToastTimeout } from '../toast/toast';
 import WithRender from './copy-to-clipboard.html';
 
 export interface CopyToClipboardInputSupport {
@@ -59,14 +60,14 @@ export class MCopyToClipboard extends ModulVue {
 
     get inputHandlers(): { [key: string]: (value: string) => void } {
         return {
-            click: this.copyText
+            click: this.selectText
         };
     }
 
     get buttonHandlers(): { [key: string]: (value: string) => void } {
         return {
             click: this.copyText,
-            mousedown: this.selectText
+            mousedown: () => requestAnimationFrame(() => this.selectText()) // Avoid selection flicker when spamming copy button.
         };
     }
 
@@ -80,6 +81,11 @@ export class MCopyToClipboard extends ModulVue {
     copyText(): void {
         copyToClipboard(this.value);
         this.selectText();
+        this.$toast.show({
+            text: this.$i18n.translate('m-copy-to-clipboard:copied'),
+            position: MToastPosition.TopCenter,
+            timeout: MToastTimeout.xshort
+        });
     }
 }
 
@@ -89,6 +95,7 @@ const CopyToClipboardPlugin: PluginObject<any> = {
         v.use(I18nPlugin);
         v.use(TextfieldPlugin);
         v.use(ButtonPlugin);
+        v.use(ToastPlugin);
     }
 };
 
diff --git a/src/components/input-style/input-style.scss b/src/components/input-style/input-style.scss
index 3b77e6c58..147049700 100644
--- a/src/components/input-style/input-style.scss
+++ b/src/components/input-style/input-style.scss
@@ -134,11 +134,6 @@ $m-input-style-border-radius: 3px;
         .m-input-style__main {
             border-style: dashed;
         }
-
-        input,
-        textarea {
-            user-select: none;
-        }
     }
 
     &.m--is-disabled,
@@ -165,9 +160,7 @@ $m-input-style-border-radius: 3px;
     }
 
     &.m--is-readonly {
-        @include input-style-cursor() {
-            user-select: none;
-        }
+        @include input-style-cursor();
     }
 
     &.m--is-anim-ready {
diff --git a/src/components/toast/toast.ts b/src/components/toast/toast.ts
index b9c38ddb3..7108eb2b7 100644
--- a/src/components/toast/toast.ts
+++ b/src/components/toast/toast.ts
@@ -15,6 +15,7 @@ import WithRender from './toast.html?style=./toast.scss';
 
 export enum MToastTimeout {
     none = 'none',
+    xshort = 'xshort',
     short = 'short',
     long = 'long'
 }
@@ -38,8 +39,10 @@ export enum MToastState {
 export enum MToastDuration {
     MobileLong = 5000,
     MobileShort = 3000,
+    MobileXShort = 1500,
     DesktopLong = 8000,
     DesktopShort = 5000,
+    DesktopXShort = 2500,
     None = 0
 }
 
@@ -152,6 +155,8 @@ export class MToast extends ModulVue implements PortalMixinImpl {
                 return this.isMobile ? MToastDuration.MobileLong : MToastDuration.DesktopLong;
             case MToastTimeout.short:
                 return this.isMobile ? MToastDuration.MobileShort : MToastDuration.DesktopShort;
+            case MToastTimeout.xshort:
+                return this.isMobile ? MToastDuration.MobileXShort : MToastDuration.DesktopXShort;
             case MToastTimeout.none:
             default:
                 return MToastDuration.None;
diff --git a/src/mixins/input-management/input-management.ts b/src/mixins/input-management/input-management.ts
index 69682db33..0e1504eac 100644
--- a/src/mixins/input-management/input-management.ts
+++ b/src/mixins/input-management/input-management.ts
@@ -64,9 +64,8 @@ export class InputManagement extends ModulVue
     private updateSelection(): void {
         const inputElement: HTMLInputElement = this.as<InputState>().getInput() as HTMLInputElement;
         if (inputElement && this.selection) {
+            inputElement.focus();
             inputElement.select();
-            const selectionIndex: number = this.as<InputManagement>().value.indexOf(this.selection);
-            inputElement.setSelectionRange(selectionIndex, selectionIndex + this.selection.length);
         }
     }
 

From def7ce022091ec25b67232a17a108c41de61572b Mon Sep 17 00:00:00 2001
From: Philippe Rail <philipperail@gmail.com>
Date: Tue, 2 Jul 2019 10:27:00 -0400
Subject: [PATCH 4/9] MODUL-1110 - small visuals changes

---
 .../copy-to-clipboard/copy-to-clipboard.html    | 16 +++++++++++-----
 .../copy-to-clipboard/copy-to-clipboard.scss    | 17 +++++++++++++++++
 .../copy-to-clipboard/copy-to-clipboard.ts      |  7 ++++---
 src/components/textfield/textfield.html         |  1 +
 4 files changed, 33 insertions(+), 8 deletions(-)
 create mode 100644 src/components/copy-to-clipboard/copy-to-clipboard.scss

diff --git a/src/components/copy-to-clipboard/copy-to-clipboard.html b/src/components/copy-to-clipboard/copy-to-clipboard.html
index cb27927c4..da4e12ae9 100644
--- a/src/components/copy-to-clipboard/copy-to-clipboard.html
+++ b/src/components/copy-to-clipboard/copy-to-clipboard.html
@@ -1,13 +1,19 @@
-<div>
+<div class="m-copy-to-clipboard">
     <slot name="input"
           :props="inputProps"
           :handlers="inputHandlers">
         <m-textfield v-bind="inputProps"
                      v-on="inputHandlers">
+
+            <template slot="suffix">
+                <slot name="button"
+                      :handlers="buttonHandlers">
+                    <m-link mode="button"
+                            :underline="false"
+                            v-on="buttonHandlers"
+                            class="m-copy-to-clipboard__button">{{labelCopyBtn}}</m-link>
+                </slot>
+            </template>
         </m-textfield>
     </slot>
-    <slot name="button"
-          :handlers="buttonHandlers">
-        <m-button v-on="buttonHandlers">{{ labelCopyBtn }}</m-button>
-    </slot>
 </div>
diff --git a/src/components/copy-to-clipboard/copy-to-clipboard.scss b/src/components/copy-to-clipboard/copy-to-clipboard.scss
new file mode 100644
index 000000000..3c002b84f
--- /dev/null
+++ b/src/components/copy-to-clipboard/copy-to-clipboard.scss
@@ -0,0 +1,17 @@
+@import 'commons';
+
+.m-copy-to-clipboard {
+    &__button.m-link {
+        padding: 0 4px;
+        border-radius: 8px;
+        transition: background-color $m-transition-duration ease, color $m-transition-duration ease;
+
+        &:hover {
+            background-color: m-color(interactive, lightest);
+        }
+    }
+
+    .m-input-style.m--is-readonly .m-input-style__main {
+        border-style: solid;
+    }
+}
diff --git a/src/components/copy-to-clipboard/copy-to-clipboard.ts b/src/components/copy-to-clipboard/copy-to-clipboard.ts
index 1abfb5f54..3df9af397 100644
--- a/src/components/copy-to-clipboard/copy-to-clipboard.ts
+++ b/src/components/copy-to-clipboard/copy-to-clipboard.ts
@@ -2,12 +2,13 @@ import ClipboardJs from 'clipboard';
 import { PluginObject } from 'vue';
 import { Component, Prop } from 'vue-property-decorator';
 import { ModulVue } from '../../utils/vue/vue';
-import ButtonPlugin from '../button/button';
 import { COPY_TO_CLIPBOARD_NAME } from '../component-names';
 import I18nPlugin from '../i18n/i18n';
+import LinkPlugin from '../link/link';
 import TextfieldPlugin from '../textfield/textfield';
 import ToastPlugin, { MToastPosition, MToastTimeout } from '../toast/toast';
 import WithRender from './copy-to-clipboard.html';
+import './copy-to-clipboard.scss';
 
 export interface CopyToClipboardInputSupport {
     value: any;
@@ -83,7 +84,7 @@ export class MCopyToClipboard extends ModulVue {
         this.selectText();
         this.$toast.show({
             text: this.$i18n.translate('m-copy-to-clipboard:copied'),
-            position: MToastPosition.TopCenter,
+            position: MToastPosition.BottomLeft,
             timeout: MToastTimeout.xshort
         });
     }
@@ -94,7 +95,7 @@ const CopyToClipboardPlugin: PluginObject<any> = {
         v.component(COPY_TO_CLIPBOARD_NAME, MCopyToClipboard);
         v.use(I18nPlugin);
         v.use(TextfieldPlugin);
-        v.use(ButtonPlugin);
+        v.use(LinkPlugin);
         v.use(ToastPlugin);
     }
 };
diff --git a/src/components/textfield/textfield.html b/src/components/textfield/textfield.html
index 7e32b8d11..d8128dd10 100644
--- a/src/components/textfield/textfield.html
+++ b/src/components/textfield/textfield.html
@@ -52,6 +52,7 @@
                                @click="togglePasswordVisibility"
                                key="passwordIcon"
                                button-size="22px"></m-icon-button>
+                <slot name="suffix"></slot>
             </transition>
         </template>
         <textarea v-if="hasWordWrap"

From 31680eb758b11eb27b2a3fb8bfce5eb7abbd12e4 Mon Sep 17 00:00:00 2001
From: Philippe Rail <philipperail@gmail.com>
Date: Tue, 2 Jul 2019 10:32:31 -0400
Subject: [PATCH 5/9] fix snapshots

---
 .../copy-to-clipboard.stories.ts.snap         | 331 +++++++++---------
 1 file changed, 159 insertions(+), 172 deletions(-)

diff --git a/src/components/copy-to-clipboard/__snapshots__/copy-to-clipboard.stories.ts.snap b/src/components/copy-to-clipboard/__snapshots__/copy-to-clipboard.stories.ts.snap
index 96f9b7749..5ebe7be1e 100644
--- a/src/components/copy-to-clipboard/__snapshots__/copy-to-clipboard.stories.ts.snap
+++ b/src/components/copy-to-clipboard/__snapshots__/copy-to-clipboard.stories.ts.snap
@@ -1,66 +1,73 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots components|m-copy-to-clipboard custom 1`] = `
-<div>
+<div
+  class="m-copy-to-clipboard"
+>
   <div
     class="m-textfield m--is-readonly m--has-label m--is-type-text"
     style="width: 100%; max-width: 288px;"
   >
     <div
       class="m-input-style m--is-readonly m--is-label-up m--has-label m--has-value m--is-tag-default"
+      style="margin-top: 10px;"
     >
       <div
-        class="m-input-style__content"
-        style="margin-top: 10px;"
+        class="m-input-style__main"
       >
-        <label
-          class="m-input-style__label"
-          for="mTextfield-uuid"
-        >
-          <span
-            class="m-input-style__text"
-          >
-            <span>
-              some label
-            </span>
-             
-            <!---->
-          </span>
-        </label>
-         
         <div
           class="m-input-style__body"
         >
-          <!---->
+          <label
+            class="m-input-style__label"
+            for="mTextfield-uuid"
+            style="margin-right: 0px;"
+          >
+            <span
+              class="m-input-style__text"
+            >
+              <span>
+                some label
+              </span>
+               
+              <!---->
+            </span>
+          </label>
            
           <div
-            class="m-input-style__left-content"
+            class="m-input-style__input"
           >
-            <input
-              class="m-textfield__input"
-              id="mTextfield-uuid"
-              maxlength="Infinity"
-              readonly="readonly"
-              type="text"
-            />
-              
             <!---->
              
-            <!---->
+            <div
+              class="m-input-style__content"
+            >
+              <input
+                class="m-textfield__input"
+                id="mTextfield-uuid"
+                maxlength="Infinity"
+                readonly="readonly"
+                type="text"
+              />
+                
+              <!---->
+               
+              <!---->
+               
+              <!---->
+            </div>
              
-            <!---->
+            <div
+              class="m-input-style__suffix"
+            >
+              <!---->
+               
+              <!---->
+            </div>
           </div>
-           
-          <div
-            class="m-input-style__right-content"
-          >
-            <span
-              style="white-space: nowrap;"
-            />
-          </div>
-           
-          <!---->
         </div>
+         
+        <!---->
       </div>
     </div>
      
@@ -78,86 +85,86 @@ exports[`Storyshots components|m-copy-to-clipboard custom 1`] = `
       <!---->
     </div>
   </div>
-   
-  <button
-    class="m-button m--is-skin-secondary"
-    type="button"
-  >
-    <!---->
-     
-    <!---->
-     
-    <span
-      class="m-button__text"
-    >
-      Custom Copy Button 
-      <!---->
-    </span>
-     
-    <!---->
-     
-    <!---->
-  </button>
 </div>
 `;
 
 exports[`Storyshots components|m-copy-to-clipboard default 1`] = `
-<div>
+<div
+  class="m-copy-to-clipboard"
+>
   <div
     class="m-textfield m--is-readonly m--is-type-text"
     style="width: 100%; max-width: 288px;"
   >
     <div
       class="m-input-style m--is-readonly m--is-tag-default"
+      style="margin-top: 10px;"
     >
       <div
-        class="m-input-style__content"
-        style="margin-top: 10px;"
+        class="m-input-style__main"
       >
-        <span
-          class="m-input-style__label"
-          style="z-index: -1;"
-        >
-          <span
-            class="m-input-style__text"
-          />
-        </span>
-         
         <div
           class="m-input-style__body"
         >
-          <div
-            class="m-input-style__prefix"
-          />
-           
-          <div
-            class="m-input-style__left-content"
+          <span
+            class="m-input-style__label"
+            style="z-index: -1;"
           >
-            <input
-              class="m-textfield__input"
-              id="mTextfield-uuid"
-              maxlength="Infinity"
-              readonly="readonly"
-              type="text"
+            <span
+              class="m-input-style__text"
             />
-              
-            <!---->
-             
-            <!---->
-             
-            <!---->
-          </div>
+          </span>
            
           <div
-            class="m-input-style__right-content"
+            class="m-input-style__input"
           >
-            <span
-              style="white-space: nowrap;"
+            <div
+              class="m-input-style__prefix"
             />
+             
+            <div
+              class="m-input-style__content"
+            >
+              <input
+                class="m-textfield__input"
+                id="mTextfield-uuid"
+                maxlength="Infinity"
+                readonly="readonly"
+                type="text"
+              />
+                
+              <!---->
+               
+              <!---->
+               
+              <!---->
+            </div>
+             
+            <div
+              class="m-input-style__suffix"
+            >
+              <a
+                class="m-link m-copy-to-clipboard__button m--is-unvisited m--no-underline m--is-button m--has-content"
+                href="#"
+                tabindex="0"
+              >
+                <!---->
+                 
+                <span
+                  class="m-link__text"
+                >
+                  Copier
+                </span>
+                 
+                <!---->
+              </a>
+               
+              <!---->
+            </div>
           </div>
-           
-          <!---->
         </div>
+         
+        <!---->
       </div>
     </div>
      
@@ -175,86 +182,86 @@ exports[`Storyshots components|m-copy-to-clipboard default 1`] = `
       <!---->
     </div>
   </div>
-   
-  <button
-    class="m-button m--is-skin-primary"
-    type="button"
-  >
-    <!---->
-     
-    <!---->
-     
-    <span
-      class="m-button__text"
-    >
-      Copier 
-      <!---->
-    </span>
-     
-    <!---->
-     
-    <!---->
-  </button>
 </div>
 `;
 
 exports[`Storyshots components|m-copy-to-clipboard default with value 1`] = `
-<div>
+<div
+  class="m-copy-to-clipboard"
+>
   <div
     class="m-textfield m--is-readonly m--is-type-text"
     style="width: 100%; max-width: 288px;"
   >
     <div
       class="m-input-style m--is-readonly m--has-value m--is-tag-default"
+      style="margin-top: 10px;"
     >
       <div
-        class="m-input-style__content"
-        style="margin-top: 10px;"
+        class="m-input-style__main"
       >
-        <span
-          class="m-input-style__label"
-          style="z-index: -1;"
-        >
-          <span
-            class="m-input-style__text"
-          />
-        </span>
-         
         <div
           class="m-input-style__body"
         >
-          <div
-            class="m-input-style__prefix"
-          />
-           
-          <div
-            class="m-input-style__left-content"
+          <span
+            class="m-input-style__label"
+            style="z-index: -1;"
           >
-            <input
-              class="m-textfield__input"
-              id="mTextfield-uuid"
-              maxlength="Infinity"
-              readonly="readonly"
-              type="text"
+            <span
+              class="m-input-style__text"
             />
-              
-            <!---->
-             
-            <!---->
-             
-            <!---->
-          </div>
+          </span>
            
           <div
-            class="m-input-style__right-content"
+            class="m-input-style__input"
           >
-            <span
-              style="white-space: nowrap;"
+            <div
+              class="m-input-style__prefix"
             />
+             
+            <div
+              class="m-input-style__content"
+            >
+              <input
+                class="m-textfield__input"
+                id="mTextfield-uuid"
+                maxlength="Infinity"
+                readonly="readonly"
+                type="text"
+              />
+                
+              <!---->
+               
+              <!---->
+               
+              <!---->
+            </div>
+             
+            <div
+              class="m-input-style__suffix"
+            >
+              <a
+                class="m-link m-copy-to-clipboard__button m--is-unvisited m--no-underline m--is-button m--has-content"
+                href="#"
+                tabindex="0"
+              >
+                <!---->
+                 
+                <span
+                  class="m-link__text"
+                >
+                  Copier
+                </span>
+                 
+                <!---->
+              </a>
+               
+              <!---->
+            </div>
           </div>
-           
-          <!---->
         </div>
+         
+        <!---->
       </div>
     </div>
      
@@ -272,25 +279,5 @@ exports[`Storyshots components|m-copy-to-clipboard default with value 1`] = `
       <!---->
     </div>
   </div>
-   
-  <button
-    class="m-button m--is-skin-primary"
-    type="button"
-  >
-    <!---->
-     
-    <!---->
-     
-    <span
-      class="m-button__text"
-    >
-      Copier 
-      <!---->
-    </span>
-     
-    <!---->
-     
-    <!---->
-  </button>
 </div>
 `;

From 61a62f7644888b55b950e2b3001135917c4fd217 Mon Sep 17 00:00:00 2001
From: Mathieu Boulianne <mathieu.boulianne1@gmail.com>
Date: Tue, 2 Jul 2019 14:56:34 -0400
Subject: [PATCH 6/9] Change toast handling when copying the text

---
 src/components/component-names.ts             |   1 +
 .../copy-to-clipboard.stories.ts.snap         | 194 ++++++++++++++++++
 .../copy-to-clipboard-feedback.ts             |  53 +++++
 .../copy-to-clipboard/copy-to-clipboard.html  |   1 -
 .../copy-to-clipboard.stories.ts              |  18 ++
 .../copy-to-clipboard/copy-to-clipboard.ts    |  12 +-
 src/components/link/link.html                 |   1 +
 src/components/link/link.ts                   |   5 +-
 src/components/toast/toast.ts                 |   1 +
 9 files changed, 275 insertions(+), 11 deletions(-)
 create mode 100644 src/components/copy-to-clipboard/copy-to-clipboard-feedback.ts

diff --git a/src/components/component-names.ts b/src/components/component-names.ts
index a6dc3a639..eeaea1851 100644
--- a/src/components/component-names.ts
+++ b/src/components/component-names.ts
@@ -14,6 +14,7 @@ export const CHIP_NAME: string = 'm-chip';
 export const CHIP_ADD_NAME: string = 'm-chip-add';
 export const CHIP_DELETE_NAME: string = 'm-chip-delete';
 export const COPY_TO_CLIPBOARD_NAME: string = 'm-copy-to-clipboard';
+export const COPY_TO_CLIPBOARD_FEEDBACK_NAME: string = 'm-copy-to-clipboard-feedback';
 export const DATEFIELDS_NAME: string = 'm-datefields';
 export const DATEPICKER_NAME: string = 'm-datepicker';
 export const DATERANGEPICKER_NAME: string = 'm-daterangepicker';
diff --git a/src/components/copy-to-clipboard/__snapshots__/copy-to-clipboard.stories.ts.snap b/src/components/copy-to-clipboard/__snapshots__/copy-to-clipboard.stories.ts.snap
index 5ebe7be1e..61fb4a87b 100644
--- a/src/components/copy-to-clipboard/__snapshots__/copy-to-clipboard.stories.ts.snap
+++ b/src/components/copy-to-clipboard/__snapshots__/copy-to-clipboard.stories.ts.snap
@@ -88,6 +88,103 @@ exports[`Storyshots components|m-copy-to-clipboard custom 1`] = `
 </div>
 `;
 
+exports[`Storyshots components|m-copy-to-clipboard custom user feedback 1`] = `
+<div
+  class="m-copy-to-clipboard"
+>
+  <div
+    class="m-textfield m--is-readonly m--is-type-text"
+    style="width: 100%; max-width: 288px;"
+  >
+    <div
+      class="m-input-style m--is-readonly m--has-value m--is-tag-default"
+      style="margin-top: 10px;"
+    >
+      <div
+        class="m-input-style__main"
+      >
+        <div
+          class="m-input-style__body"
+        >
+          <span
+            class="m-input-style__label"
+            style="z-index: -1;"
+          >
+            <span
+              class="m-input-style__text"
+            />
+          </span>
+           
+          <div
+            class="m-input-style__input"
+          >
+            <div
+              class="m-input-style__prefix"
+            />
+             
+            <div
+              class="m-input-style__content"
+            >
+              <input
+                class="m-textfield__input"
+                id="mTextfield-uuid"
+                maxlength="Infinity"
+                readonly="readonly"
+                type="text"
+              />
+                
+              <!---->
+               
+              <!---->
+               
+              <!---->
+            </div>
+             
+            <div
+              class="m-input-style__suffix"
+            >
+              <a
+                class="m-link m-copy-to-clipboard__button m--is-unvisited m--no-underline m--is-button m--has-content"
+                href="#"
+                tabindex="0"
+              >
+                <!---->
+                 
+                <span
+                  class="m-link__text"
+                >
+                  Copier
+                </span>
+                 
+                <!---->
+              </a>
+               
+              <!---->
+            </div>
+          </div>
+        </div>
+         
+        <!---->
+      </div>
+    </div>
+     
+    <div
+      class="m-textfield__validation"
+    >
+      <div
+        class="m-validation-message m-textfield__validation__message"
+      >
+        <!---->
+         
+        <!---->
+      </div>
+       
+      <!---->
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots components|m-copy-to-clipboard default 1`] = `
 <div
   class="m-copy-to-clipboard"
@@ -281,3 +378,100 @@ exports[`Storyshots components|m-copy-to-clipboard default with value 1`] = `
   </div>
 </div>
 `;
+
+exports[`Storyshots components|m-copy-to-clipboard user feedback 1`] = `
+<div
+  class="m-copy-to-clipboard"
+>
+  <div
+    class="m-textfield m--is-readonly m--is-type-text"
+    style="width: 100%; max-width: 288px;"
+  >
+    <div
+      class="m-input-style m--is-readonly m--has-value m--is-tag-default"
+      style="margin-top: 10px;"
+    >
+      <div
+        class="m-input-style__main"
+      >
+        <div
+          class="m-input-style__body"
+        >
+          <span
+            class="m-input-style__label"
+            style="z-index: -1;"
+          >
+            <span
+              class="m-input-style__text"
+            />
+          </span>
+           
+          <div
+            class="m-input-style__input"
+          >
+            <div
+              class="m-input-style__prefix"
+            />
+             
+            <div
+              class="m-input-style__content"
+            >
+              <input
+                class="m-textfield__input"
+                id="mTextfield-uuid"
+                maxlength="Infinity"
+                readonly="readonly"
+                type="text"
+              />
+                
+              <!---->
+               
+              <!---->
+               
+              <!---->
+            </div>
+             
+            <div
+              class="m-input-style__suffix"
+            >
+              <a
+                class="m-link m-copy-to-clipboard__button m--is-unvisited m--no-underline m--is-button m--has-content"
+                href="#"
+                tabindex="0"
+              >
+                <!---->
+                 
+                <span
+                  class="m-link__text"
+                >
+                  Copier
+                </span>
+                 
+                <!---->
+              </a>
+               
+              <!---->
+            </div>
+          </div>
+        </div>
+         
+        <!---->
+      </div>
+    </div>
+     
+    <div
+      class="m-textfield__validation"
+    >
+      <div
+        class="m-validation-message m-textfield__validation__message"
+      >
+        <!---->
+         
+        <!---->
+      </div>
+       
+      <!---->
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/copy-to-clipboard/copy-to-clipboard-feedback.ts b/src/components/copy-to-clipboard/copy-to-clipboard-feedback.ts
new file mode 100644
index 000000000..ba34ce975
--- /dev/null
+++ b/src/components/copy-to-clipboard/copy-to-clipboard-feedback.ts
@@ -0,0 +1,53 @@
+import { PluginObject, VNode } from 'vue';
+import Component from 'vue-class-component';
+import { Prop } from 'vue-property-decorator';
+import { ModulVue } from '../../utils/vue/vue';
+import { COPY_TO_CLIPBOARD_FEEDBACK_NAME } from '../component-names';
+import I18nPlugin from '../i18n/i18n';
+import TextfieldPlugin from '../textfield/textfield';
+import ToastPlugin, { MToastPosition, MToastTimeout } from '../toast/toast';
+
+@Component
+export class MCopyToClipboardFeedback extends ModulVue {
+    @Prop()
+    message: string;
+
+    @Prop({
+        default: MToastPosition.BottomRight
+    })
+    position: MToastPosition;
+
+    @Prop({
+        default: MToastTimeout.xshort
+    })
+    timeout: MToastTimeout;
+
+    render(): VNode {
+        if (this.$scopedSlots && this.$scopedSlots.default) {
+            return this.$scopedSlots.default({
+                showToast: () => this.showToast()
+            }) as any;
+        } else {
+            throw new Error('copy-to-clipboard expects a default scoped slot.');
+        }
+    }
+
+    showToast(): void {
+        this.$toast.show({
+            text: this.message ? this.message : this.$i18n.translate('m-copy-to-clipboard:copied'),
+            position: this.position,
+            timeout: this.timeout
+        });
+    }
+}
+
+const CopyToClipboardFeedbackPlugin: PluginObject<any> = {
+    install(v): void {
+        v.component(COPY_TO_CLIPBOARD_FEEDBACK_NAME, MCopyToClipboardFeedback);
+        v.use(I18nPlugin);
+        v.use(TextfieldPlugin);
+        v.use(ToastPlugin);
+    }
+};
+
+export default CopyToClipboardFeedbackPlugin;
diff --git a/src/components/copy-to-clipboard/copy-to-clipboard.html b/src/components/copy-to-clipboard/copy-to-clipboard.html
index da4e12ae9..182ab8a60 100644
--- a/src/components/copy-to-clipboard/copy-to-clipboard.html
+++ b/src/components/copy-to-clipboard/copy-to-clipboard.html
@@ -4,7 +4,6 @@
           :handlers="inputHandlers">
         <m-textfield v-bind="inputProps"
                      v-on="inputHandlers">
-
             <template slot="suffix">
                 <slot name="button"
                       :handlers="buttonHandlers">
diff --git a/src/components/copy-to-clipboard/copy-to-clipboard.stories.ts b/src/components/copy-to-clipboard/copy-to-clipboard.stories.ts
index c705e9387..a33fa9097 100644
--- a/src/components/copy-to-clipboard/copy-to-clipboard.stories.ts
+++ b/src/components/copy-to-clipboard/copy-to-clipboard.stories.ts
@@ -5,10 +5,12 @@ import { componentsHierarchyRootSeparator } from '../../../conf/storybook/utils'
 import { MButton } from '../button/button';
 import { COPY_TO_CLIPBOARD_NAME } from '../component-names';
 import { MTextfield } from '../textfield/textfield';
+import { COPY_TO_CLIPBOARD_FEEDBACK_NAME } from './../component-names';
 import CopyToClipboardPlugin from './copy-to-clipboard';
 
 Vue.use(CopyToClipboardPlugin);
 const componentName: string = COPY_TO_CLIPBOARD_NAME;
+const feedbackComponentName: string = COPY_TO_CLIPBOARD_FEEDBACK_NAME;
 
 storiesOf(`${componentsHierarchyRootSeparator}${COPY_TO_CLIPBOARD_NAME}`, module)
     .addDecorator(withA11y)
@@ -18,6 +20,22 @@ storiesOf(`${componentsHierarchyRootSeparator}${COPY_TO_CLIPBOARD_NAME}`, module
     .add('default with value', () => ({
         template: `<${componentName} :value="'some value'" />`
     }))
+    .add('user feedback', () => ({
+        template: `
+        <${feedbackComponentName}>
+            <template slot-scope="{ showToast }">
+                <${componentName} :value="'some value'" @copy="showToast" />
+            </template>
+        </${feedbackComponentName}>`
+    }))
+    .add('custom user feedback', () => ({
+        template: `
+        <${feedbackComponentName} :message="'some message'" :position="'top-center'" :timeout="'none'">
+            <template slot-scope="{ showToast }">
+                <${componentName} :value="'some value'" @copy="showToast" />
+            </template>
+        </${feedbackComponentName}>`
+    }))
     .add('custom', () => ({
         template: `
         <${componentName} :value="value">
diff --git a/src/components/copy-to-clipboard/copy-to-clipboard.ts b/src/components/copy-to-clipboard/copy-to-clipboard.ts
index 3df9af397..b03eaeb8d 100644
--- a/src/components/copy-to-clipboard/copy-to-clipboard.ts
+++ b/src/components/copy-to-clipboard/copy-to-clipboard.ts
@@ -3,10 +3,9 @@ import { PluginObject } from 'vue';
 import { Component, Prop } from 'vue-property-decorator';
 import { ModulVue } from '../../utils/vue/vue';
 import { COPY_TO_CLIPBOARD_NAME } from '../component-names';
-import I18nPlugin from '../i18n/i18n';
 import LinkPlugin from '../link/link';
 import TextfieldPlugin from '../textfield/textfield';
-import ToastPlugin, { MToastPosition, MToastTimeout } from '../toast/toast';
+import CopyToClipboardFeedbackPlugin from './copy-to-clipboard-feedback';
 import WithRender from './copy-to-clipboard.html';
 import './copy-to-clipboard.scss';
 
@@ -82,21 +81,16 @@ export class MCopyToClipboard extends ModulVue {
     copyText(): void {
         copyToClipboard(this.value);
         this.selectText();
-        this.$toast.show({
-            text: this.$i18n.translate('m-copy-to-clipboard:copied'),
-            position: MToastPosition.BottomLeft,
-            timeout: MToastTimeout.xshort
-        });
+        this.$emit('copy');
     }
 }
 
 const CopyToClipboardPlugin: PluginObject<any> = {
     install(v): void {
         v.component(COPY_TO_CLIPBOARD_NAME, MCopyToClipboard);
-        v.use(I18nPlugin);
         v.use(TextfieldPlugin);
         v.use(LinkPlugin);
-        v.use(ToastPlugin);
+        v.use(CopyToClipboardFeedbackPlugin);
     }
 };
 
diff --git a/src/components/link/link.html b/src/components/link/link.html
index 7e8c89232..c5b2ba10d 100644
--- a/src/components/link/link.html
+++ b/src/components/link/link.html
@@ -39,6 +39,7 @@
        :href="propUrl"
        :target="target"
        @click="onClick"
+       @mousedown="onMousedown"
        v-if="!isRouterLink"
        @keyup="onKeyup"
        :tabindex="disabled ? '-1' : tabindex"
diff --git a/src/components/link/link.ts b/src/components/link/link.ts
index b8094da70..e373ed470 100644
--- a/src/components/link/link.ts
+++ b/src/components/link/link.ts
@@ -1,6 +1,6 @@
 import { PluginObject } from 'vue';
 import Component from 'vue-class-component';
-import { Prop, Watch } from 'vue-property-decorator';
+import { Emit, Prop, Watch } from 'vue-property-decorator';
 import { Location } from 'vue-router';
 import { KeyCode } from '../../utils/keycode/keycode';
 import { ModulVue } from '../../utils/vue/vue';
@@ -112,6 +112,9 @@ export class MLink extends ModulVue {
         }
     }
 
+    @Emit('mousedown')
+    private onMousedown(): void { }
+
     private get isRouterLink(): boolean {
         return this.mode === MLinkMode.RouterLink;
     }
diff --git a/src/components/toast/toast.ts b/src/components/toast/toast.ts
index 7108eb2b7..18f754984 100644
--- a/src/components/toast/toast.ts
+++ b/src/components/toast/toast.ts
@@ -77,6 +77,7 @@ export class MToast extends ModulVue implements PortalMixinImpl {
         default: MToastTimeout.none,
         validator: value =>
             value === MToastTimeout.none ||
+            value === MToastTimeout.xshort ||
             value === MToastTimeout.short ||
             value === MToastTimeout.long
     })

From 719ab88e13ad987e2b298336c9272350dbec365c Mon Sep 17 00:00:00 2001
From: Mathieu Boulianne <mathieu.boulianne1@gmail.com>
Date: Fri, 5 Jul 2019 07:02:40 -0400
Subject: [PATCH 7/9] Code review

---
 src/components/button/button.html             |  4 +-
 src/components/button/button.ts               |  6 +++
 .../copy-to-clipboard-feedback.ts             | 17 +-------
 .../copy-to-clipboard/copy-to-clipboard.html  | 26 ++++++------
 .../copy-to-clipboard.stories.ts              |  8 ++--
 .../copy-to-clipboard/copy-to-clipboard.ts    | 42 +++++++++++--------
 src/components/textfield/textfield.ts         | 10 ++++-
 .../input-management/input-management.ts      | 13 +-----
 src/utils/input/input.ts                      | 12 ++++++
 9 files changed, 73 insertions(+), 65 deletions(-)
 create mode 100644 src/utils/input/input.ts

diff --git a/src/components/button/button.html b/src/components/button/button.html
index dfc111dbb..21f701977 100644
--- a/src/components/button/button.html
+++ b/src/components/button/button.html
@@ -9,7 +9,9 @@
         @click="onClick"
         @mousedown="onMousedown"
         @focus="onFocus"
-        @blur="onBlur">
+        @blur="onBlur"
+        @touchstart="onTouchstart"
+        @touchend="onTouchend">
     <m-icon aria-hidden="true"
             class="m-button__icon m--is-left"
             :name="iconName"
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index ff230af77..5aa0a3c29 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -70,6 +70,12 @@ export class MButton extends Vue {
     @Emit('mousedown')
     onMousedown(event: Event): void { }
 
+    @Emit('touchstart')
+    onTouchstart(event: Event): void { }
+
+    @Emit('touchend')
+    onTouchend(event: Event): void { }
+
     @Emit('focus')
     onFocus(event: Event): void { }
 
diff --git a/src/components/copy-to-clipboard/copy-to-clipboard-feedback.ts b/src/components/copy-to-clipboard/copy-to-clipboard-feedback.ts
index ba34ce975..da7064b4c 100644
--- a/src/components/copy-to-clipboard/copy-to-clipboard-feedback.ts
+++ b/src/components/copy-to-clipboard/copy-to-clipboard-feedback.ts
@@ -1,11 +1,8 @@
-import { PluginObject, VNode } from 'vue';
+import { VNode } from 'vue';
 import Component from 'vue-class-component';
 import { Prop } from 'vue-property-decorator';
 import { ModulVue } from '../../utils/vue/vue';
-import { COPY_TO_CLIPBOARD_FEEDBACK_NAME } from '../component-names';
-import I18nPlugin from '../i18n/i18n';
-import TextfieldPlugin from '../textfield/textfield';
-import ToastPlugin, { MToastPosition, MToastTimeout } from '../toast/toast';
+import { MToastPosition, MToastTimeout } from '../toast/toast';
 
 @Component
 export class MCopyToClipboardFeedback extends ModulVue {
@@ -41,13 +38,3 @@ export class MCopyToClipboardFeedback extends ModulVue {
     }
 }
 
-const CopyToClipboardFeedbackPlugin: PluginObject<any> = {
-    install(v): void {
-        v.component(COPY_TO_CLIPBOARD_FEEDBACK_NAME, MCopyToClipboardFeedback);
-        v.use(I18nPlugin);
-        v.use(TextfieldPlugin);
-        v.use(ToastPlugin);
-    }
-};
-
-export default CopyToClipboardFeedbackPlugin;
diff --git a/src/components/copy-to-clipboard/copy-to-clipboard.html b/src/components/copy-to-clipboard/copy-to-clipboard.html
index 182ab8a60..a1226163b 100644
--- a/src/components/copy-to-clipboard/copy-to-clipboard.html
+++ b/src/components/copy-to-clipboard/copy-to-clipboard.html
@@ -1,17 +1,17 @@
-<div class="m-copy-to-clipboard">
-    <slot name="input"
-          :props="inputProps"
-          :handlers="inputHandlers">
-        <m-textfield v-bind="inputProps"
-                     v-on="inputHandlers">
+<div class="m-copy-to-clipboard"
+     @mousedown="selectText"
+     @mouseup="selectText"
+     @touchstart="selectText"
+     @touchend="selectText"
+     @click="selectText">
+    <slot :input-props="inputProps"
+          :button-handlers="buttonHandlers">
+        <m-textfield v-bind="inputProps">
             <template slot="suffix">
-                <slot name="button"
-                      :handlers="buttonHandlers">
-                    <m-link mode="button"
-                            :underline="false"
-                            v-on="buttonHandlers"
-                            class="m-copy-to-clipboard__button">{{labelCopyBtn}}</m-link>
-                </slot>
+                <m-link mode="button"
+                        :underline="false"
+                        v-on="buttonHandlers"
+                        class="m-copy-to-clipboard__button">{{labelCopyBtn}}</m-link>
             </template>
         </m-textfield>
     </slot>
diff --git a/src/components/copy-to-clipboard/copy-to-clipboard.stories.ts b/src/components/copy-to-clipboard/copy-to-clipboard.stories.ts
index a33fa9097..35099d334 100644
--- a/src/components/copy-to-clipboard/copy-to-clipboard.stories.ts
+++ b/src/components/copy-to-clipboard/copy-to-clipboard.stories.ts
@@ -39,12 +39,10 @@ storiesOf(`${componentsHierarchyRootSeparator}${COPY_TO_CLIPBOARD_NAME}`, module
     .add('custom', () => ({
         template: `
         <${componentName} :value="value">
-            <template slot="input" slot-scope="{ props, handlers }">
-                <m-textfield v-bind="props" v-on="handlers" :label="'some label'">
+            <template slot-scope="{ inputProps, buttonHandlers }">
+                <m-textfield v-bind="inputProps" :label="'some label'">
                 </m-textfield>
-            </template>
-            <template slot="button" slot-scope="{ handlers }">
-                <m-button v-on="handlers" skin="secondary">Custom Copy Button</m-button>
+                <button v-on="buttonHandlers">Some button</button>
             </template>
         </${componentName}>`,
         data: () => ({
diff --git a/src/components/copy-to-clipboard/copy-to-clipboard.ts b/src/components/copy-to-clipboard/copy-to-clipboard.ts
index b03eaeb8d..87652339c 100644
--- a/src/components/copy-to-clipboard/copy-to-clipboard.ts
+++ b/src/components/copy-to-clipboard/copy-to-clipboard.ts
@@ -1,21 +1,30 @@
 import ClipboardJs from 'clipboard';
 import { PluginObject } from 'vue';
 import { Component, Prop } from 'vue-property-decorator';
+import { InputSelectable } from '../../utils/input/input';
 import { ModulVue } from '../../utils/vue/vue';
-import { COPY_TO_CLIPBOARD_NAME } from '../component-names';
+import { COPY_TO_CLIPBOARD_FEEDBACK_NAME, COPY_TO_CLIPBOARD_NAME } from '../component-names';
+import I18nPlugin from '../i18n/i18n';
 import LinkPlugin from '../link/link';
 import TextfieldPlugin from '../textfield/textfield';
-import CopyToClipboardFeedbackPlugin from './copy-to-clipboard-feedback';
+import ToastPlugin from '../toast/toast';
+import { MCopyToClipboardFeedback } from './copy-to-clipboard-feedback';
 import WithRender from './copy-to-clipboard.html';
 import './copy-to-clipboard.scss';
 
-export interface CopyToClipboardInputSupport {
+interface CopyToClipboardInputProps {
     value: any;
     readonly: boolean;
     selection: string;
 }
 
-class DefaultCopyToClipboardPropsValue implements CopyToClipboardInputSupport {
+export interface CopyToClipboardInputSupport extends InputSelectable, CopyToClipboardInputProps {
+    value: any;
+    readonly: boolean;
+    selection: string;
+}
+
+class DefaultCopyToClipboardPropsValue implements CopyToClipboardInputProps {
     constructor(public readonly: boolean = true, public selection: string = '', public value: string = '') { }
 }
 
@@ -54,33 +63,27 @@ export class MCopyToClipboard extends ModulVue {
     labelCopyBtn: string = this.$i18n.translate('m-copy-to-clipboard:copy');
     selectedText: string = '';
 
-    get inputProps(): CopyToClipboardInputSupport {
+    get inputProps(): CopyToClipboardInputProps {
         return new DefaultCopyToClipboardPropsValue(true, this.selectedText, this.value);
     }
 
-    get inputHandlers(): { [key: string]: (value: string) => void } {
-        return {
-            click: this.selectText
-        };
-    }
-
     get buttonHandlers(): { [key: string]: (value: string) => void } {
         return {
-            click: this.copyText,
-            mousedown: () => requestAnimationFrame(() => this.selectText()) // Avoid selection flicker when spamming copy button.
+            click: this.copyText
         };
     }
 
     selectText(): void {
-        this.selectedText = '';
-        this.$nextTick(() => {
-            this.selectedText = this.value;
+        requestAnimationFrame(() => {
+            this.selectedText = '';
+            this.$nextTick(() => {
+                this.selectedText = this.value;
+            });
         });
     }
 
     copyText(): void {
         copyToClipboard(this.value);
-        this.selectText();
         this.$emit('copy');
     }
 }
@@ -88,9 +91,12 @@ export class MCopyToClipboard extends ModulVue {
 const CopyToClipboardPlugin: PluginObject<any> = {
     install(v): void {
         v.component(COPY_TO_CLIPBOARD_NAME, MCopyToClipboard);
+        v.component(COPY_TO_CLIPBOARD_FEEDBACK_NAME, MCopyToClipboardFeedback);
         v.use(TextfieldPlugin);
         v.use(LinkPlugin);
-        v.use(CopyToClipboardFeedbackPlugin);
+        v.use(I18nPlugin);
+        v.use(TextfieldPlugin);
+        v.use(ToastPlugin);
     }
 };
 
diff --git a/src/components/textfield/textfield.ts b/src/components/textfield/textfield.ts
index aedf25bd0..85ea1b90d 100644
--- a/src/components/textfield/textfield.ts
+++ b/src/components/textfield/textfield.ts
@@ -6,6 +6,7 @@ import { InputLabel } from '../../mixins/input-label/input-label';
 import { InputManagement, InputManagementData } from '../../mixins/input-management/input-management';
 import { InputState } from '../../mixins/input-state/input-state';
 import { InputWidth } from '../../mixins/input-width/input-width';
+import { changeSelection, InputSelectable } from '../../utils/input/input';
 import uuid from '../../utils/uuid/uuid';
 import { ModulVue } from '../../utils/vue/vue';
 import CharacterCountPlugin from '../character-count/character-count';
@@ -37,7 +38,7 @@ const ICON_NAME_PASSWORD_HIDDEN: string = 'm-svg__hide';
         InputLabel
     ]
 })
-export class MTextfield extends ModulVue implements InputManagementData {
+export class MTextfield extends ModulVue implements InputManagementData, InputSelectable {
     @Prop({
         default: MTextfieldType.Text,
         validator: value =>
@@ -61,6 +62,8 @@ export class MTextfield extends ModulVue implements InputManagementData {
     public lengthOverflow: boolean;
     @Prop({ default: 0 })
     public characterCountThreshold: number;
+    @Prop({ default: '' })
+    public selection: string;
 
     readonly internalValue: string;
 
@@ -150,6 +153,11 @@ export class MTextfield extends ModulVue implements InputManagementData {
     private resetModel(): void {
         this.$emit('input', '');
     }
+
+    @Watch('selection')
+    updateSelection(): void {
+        changeSelection(this.as<InputState>().getInput() as HTMLInputElement, this.selection);
+    }
 }
 
 const TextfieldPlugin: PluginObject<any> = {
diff --git a/src/mixins/input-management/input-management.ts b/src/mixins/input-management/input-management.ts
index 0e1504eac..edb1e11d8 100644
--- a/src/mixins/input-management/input-management.ts
+++ b/src/mixins/input-management/input-management.ts
@@ -1,7 +1,7 @@
 import Component from 'vue-class-component';
 import { Model, Prop, Watch } from 'vue-property-decorator';
 import { ModulVue } from '../../utils/vue/vue';
-import { InputState, InputStateMixin } from '../input-state/input-state';
+import { InputStateMixin } from '../input-state/input-state';
 
 
 export interface InputManagementProps {
@@ -34,8 +34,6 @@ export class InputManagement extends ModulVue
     public autocomplete: string;
     @Prop()
     public focus: boolean;
-    @Prop({ default: '' })
-    public selection: string;
 
     public trimWordWrap: boolean = false;
 
@@ -60,15 +58,6 @@ export class InputManagement extends ModulVue
         return !!(this.model || '').toString().trim();
     }
 
-    @Watch('selection')
-    private updateSelection(): void {
-        const inputElement: HTMLInputElement = this.as<InputState>().getInput() as HTMLInputElement;
-        if (inputElement && this.selection) {
-            inputElement.focus();
-            inputElement.select();
-        }
-    }
-
     onClick(event: MouseEvent): void {
         this.internalIsFocus = this.as<InputStateMixin>().active;
         let inputEl: HTMLElement | undefined = this.as<InputStateMixin>().getInput();
diff --git a/src/utils/input/input.ts b/src/utils/input/input.ts
new file mode 100644
index 000000000..19c989ba2
--- /dev/null
+++ b/src/utils/input/input.ts
@@ -0,0 +1,12 @@
+export interface InputSelectable {
+    selection: string;
+    updateSelection(): void;
+}
+
+export function changeSelection(input: HTMLInputElement, selection: string): void {
+    const indexSelection: number = input.value.indexOf(selection || '');
+    if (input && selection && indexSelection >= 0) {
+        input.focus();
+        input.setSelectionRange(indexSelection, indexSelection + selection.length);
+    }
+}

From 1f2e13cd398a995e478653cca537eb63ae86d548 Mon Sep 17 00:00:00 2001
From: Mathieu Boulianne <mathieu.boulianne1@gmail.com>
Date: Fri, 5 Jul 2019 07:07:34 -0400
Subject: [PATCH 8/9] fix tests

---
 .../__snapshots__/copy-to-clipboard.stories.ts.snap           | 4 ++++
 src/components/login/__snapshots__/login.spec.ts.snap         | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/copy-to-clipboard/__snapshots__/copy-to-clipboard.stories.ts.snap b/src/components/copy-to-clipboard/__snapshots__/copy-to-clipboard.stories.ts.snap
index 61fb4a87b..52f7fa83e 100644
--- a/src/components/copy-to-clipboard/__snapshots__/copy-to-clipboard.stories.ts.snap
+++ b/src/components/copy-to-clipboard/__snapshots__/copy-to-clipboard.stories.ts.snap
@@ -85,6 +85,10 @@ exports[`Storyshots components|m-copy-to-clipboard custom 1`] = `
       <!---->
     </div>
   </div>
+   
+  <button>
+    Some button
+  </button>
 </div>
 `;
 
diff --git a/src/components/login/__snapshots__/login.spec.ts.snap b/src/components/login/__snapshots__/login.spec.ts.snap
index 0bc21ac96..05e84b2c6 100644
--- a/src/components/login/__snapshots__/login.spec.ts.snap
+++ b/src/components/login/__snapshots__/login.spec.ts.snap
@@ -2,8 +2,8 @@
 
 exports[`MLogin when login should render correctly 1`] = `
 <form>
-  <m-textfield-stub tagStyle="default" value="" focus="true" selection="" width="100%" maxWidth="regular" label="Username" type="text" icon="true" maxLength="0" lengthOverflow="true" characterCountThreshold="0"></m-textfield-stub><br>
-  <m-textfield-stub tagStyle="default" value="" selection="" width="100%" maxWidth="regular" label="Password" type="password" icon="true" maxLength="0" lengthOverflow="true" characterCountThreshold="0"></m-textfield-stub><br>
+  <m-textfield-stub tagStyle="default" value="" focus="true" width="100%" maxWidth="regular" label="Username" type="text" icon="true" maxLength="0" lengthOverflow="true" characterCountThreshold="0" selection=""></m-textfield-stub><br>
+  <m-textfield-stub tagStyle="default" value="" width="100%" maxWidth="regular" label="Password" type="password" icon="true" maxLength="0" lengthOverflow="true" characterCountThreshold="0" selection=""></m-textfield-stub><br>
   <m-button-stub type="submit" skin="primary" iconPosition="left" iconSize="12px">
     <m-i18n-stub k="m-login:login" params="" htmlEncode="true"></m-i18n-stub>
   </m-button-stub><br>

From d590205ade310418307a1b0351c17dcf037bb034 Mon Sep 17 00:00:00 2001
From: Mathieu Boulianne <mathieu.boulianne1@gmail.com>
Date: Fri, 5 Jul 2019 07:33:52 -0400
Subject: [PATCH 9/9] fix build

---
 src/components/link/link.html | 1 -
 src/components/link/link.ts   | 5 +----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/link/link.html b/src/components/link/link.html
index c5b2ba10d..7e8c89232 100644
--- a/src/components/link/link.html
+++ b/src/components/link/link.html
@@ -39,7 +39,6 @@
        :href="propUrl"
        :target="target"
        @click="onClick"
-       @mousedown="onMousedown"
        v-if="!isRouterLink"
        @keyup="onKeyup"
        :tabindex="disabled ? '-1' : tabindex"
diff --git a/src/components/link/link.ts b/src/components/link/link.ts
index e373ed470..b8094da70 100644
--- a/src/components/link/link.ts
+++ b/src/components/link/link.ts
@@ -1,6 +1,6 @@
 import { PluginObject } from 'vue';
 import Component from 'vue-class-component';
-import { Emit, Prop, Watch } from 'vue-property-decorator';
+import { Prop, Watch } from 'vue-property-decorator';
 import { Location } from 'vue-router';
 import { KeyCode } from '../../utils/keycode/keycode';
 import { ModulVue } from '../../utils/vue/vue';
@@ -112,9 +112,6 @@ export class MLink extends ModulVue {
         }
     }
 
-    @Emit('mousedown')
-    private onMousedown(): void { }
-
     private get isRouterLink(): boolean {
         return this.mode === MLinkMode.RouterLink;
     }