chore(demo): copy spaces styles on click (taiga-family#203)

projects/demo/src/modules/markup/spaces/examples/1/index.html

@@ -1,59 +1,137 @@
 <h2 i18n class="title">Margin top <code>tui-space_top-&lt;value&gt;</code></h2>
 <div class="row">
-    <div class="example tui-space_top-1 tui-space_right-2">tui-space_top-1</div>
-    <div class="example tui-space_top-2 tui-space_right-2">tui-space_top-2</div>
-    <div class="example tui-space_top-3 tui-space_right-2">tui-space_top-3</div>
-    <div class="example tui-space_top-4 tui-space_right-2">tui-space_top-4</div>
-    <div class="example tui-space_top-5 tui-space_right-2">tui-space_top-5</div>
+    <div class="example tui-space_top-1 tui-space_right-2">
+        <tui-doc-copy cdkCopyToClipboard="tui-space_top-1">
+            tui-space_top-1
+        </tui-doc-copy>
+    </div>
+    <div class="example tui-space_top-2 tui-space_right-2">
+        <tui-doc-copy cdkCopyToClipboard="tui-space_top-2">
+            tui-space_top-2
+        </tui-doc-copy>
+    </div>
+    <div class="example tui-space_top-3 tui-space_right-2">
+        <tui-doc-copy cdkCopyToClipboard="tui-space_top-3">
+            tui-space_top-3
+        </tui-doc-copy>
+    </div>
+    <div class="example tui-space_top-4 tui-space_right-2">
+        <tui-doc-copy cdkCopyToClipboard="tui-space_top-4">
+            tui-space_top-4
+        </tui-doc-copy>
+    </div>
+    <div class="example tui-space_top-5 tui-space_right-2">
+        <tui-doc-copy cdkCopyToClipboard="tui-space_top-5">
+            tui-space_top-5
+        </tui-doc-copy>
+    </div>
 </div>
 <h2 i18n class="title">
     Margin bottom <code>tui-space_bottom-&lt;value&gt;</code>
 </h2>
 <div class="row row_align-items_bottom">
     <div class="example tui-space_bottom-1 tui-space_right-2">
-        tui-space_bottom-1
+        <tui-doc-copy cdkCopyToClipboard="tui-space_bottom-1">
+            tui-space_bottom-1
+        </tui-doc-copy>
     </div>
     <div class="example tui-space_bottom-2 tui-space_right-2">
-        tui-space_bottom-2
+        <tui-doc-copy cdkCopyToClipboard="tui-space_bottom-2">
+            tui-space_bottom-2
+        </tui-doc-copy>
     </div>
     <div class="example tui-space_bottom-3 tui-space_right-2">
-        tui-space_bottom-3
+        <tui-doc-copy cdkCopyToClipboard="tui-space_bottom-3">
+            tui-space_bottom-3
+        </tui-doc-copy>
     </div>
     <div class="example tui-space_bottom-4 tui-space_right-2">
-        tui-space_bottom-4
+        <tui-doc-copy cdkCopyToClipboard="tui-space_bottom-4">
+            tui-space_bottom-4
+        </tui-doc-copy>
     </div>
     <div class="example tui-space_bottom-5 tui-space_right-2">
-        tui-space_bottom-5
+        <tui-doc-copy cdkCopyToClipboard="tui-space_bottom-5">
+            tui-space_bottom-5
+        </tui-doc-copy>
     </div>
 </div>
 <h2 i18n class="title">
     Margin right <code>tui-space_right-&lt;value&gt;</code>
 </h2>
 <div class="row">
-    <div class="example tui-space_right-1">tui-space_right-1</div>
-    <div class="example tui-space_right-2">tui-space_right-2</div>
-    <div class="example tui-space_right-3">tui-space_right-3</div>
-    <div class="example tui-space_right-4">tui-space_right-4</div>
-    <div class="example tui-space_right-5">tui-space_right-5</div>
+    <div class="example tui-space_right-1">
+        <tui-doc-copy cdkCopyToClipboard="tui-space_right-1">
+            tui-space_right-1
+        </tui-doc-copy>
+    </div>
+    <div class="example tui-space_right-2">
+        <tui-doc-copy cdkCopyToClipboard="tui-space_right-2">
+            tui-space_right-2
+        </tui-doc-copy>
+    </div>
+    <div class="example tui-space_right-3">
+        <tui-doc-copy cdkCopyToClipboard="tui-space_right-3">
+            tui-space_right-3
+        </tui-doc-copy>
+    </div>
+    <div class="example tui-space_right-4">
+        <tui-doc-copy cdkCopyToClipboard="tui-space_right-4">
+            tui-space_right-4
+        </tui-doc-copy>
+    </div>
+    <div class="example tui-space_right-5">
+        <tui-doc-copy cdkCopyToClipboard="tui-space_right-5">
+            tui-space_right-5
+        </tui-doc-copy>
+    </div>
     <div class="example"></div>
 </div>
 <h2 i18n class="title">
     Margin left <code>tui-space_left-&lt;value&gt;</code>
 </h2>
 <div class="row">
     <div class="example"></div>
-    <div class="example tui-space_left-1">tui-space_left-1</div>
-    <div class="example tui-space_left-2">tui-space_left-2</div>
-    <div class="example tui-space_left-3">tui-space_left-3</div>
-    <div class="example tui-space_left-4">tui-space_left-4</div>
-    <div class="example tui-space_left-5">tui-space_left-5</div>
+    <div class="example tui-space_left-1">
+        <tui-doc-copy cdkCopyToClipboard="tui-space_left-1">
+            tui-space_left-1
+        </tui-doc-copy>
+    </div>
+    <div class="example tui-space_left-2">
+        <tui-doc-copy cdkCopyToClipboard="tui-space_left-2">
+            tui-space_left-2
+        </tui-doc-copy>
+    </div>
+    <div class="example tui-space_left-3">
+        <tui-doc-copy cdkCopyToClipboard="tui-space_left-3">
+            tui-space_left-3
+        </tui-doc-copy>
+    </div>
+    <div class="example tui-space_left-4">
+        <tui-doc-copy cdkCopyToClipboard="tui-space_left-4">
+            tui-space_left-4
+        </tui-doc-copy>
+    </div>
+    <div class="example tui-space_left-5">
+        <tui-doc-copy cdkCopyToClipboard="tui-space_left-5">
+            tui-space_left-5
+        </tui-doc-copy>
+    </div>
 </div>
 <h2 i18n class="title">
     Vertical and horizontal margins
     <code>tui-space_vertical-&lt;value&gt;</code> and
     <code>tui-space_horizontal-&lt;value&gt;</code>
 </h2>
 <div class="row">
-    <div class="example tui-space_vertical-4">tui-space_vertical-4</div>
-    <div class="example tui-space_horizontal-4">tui-space_horizontal-4</div>
+    <div class="example tui-space_vertical-4">
+        <tui-doc-copy cdkCopyToClipboard="tui-space_vertical-4">
+            tui-space_vertical-4
+        </tui-doc-copy>
+    </div>
+    <div class="example tui-space_horizontal-4">
+        <tui-doc-copy cdkCopyToClipboard="tui-space_horizontal-4">
+            tui-space_horizontal-4
+        </tui-doc-copy>
+    </div>
 </div>

projects/demo/src/modules/markup/spaces/examples/1/index.style.less

@@ -27,7 +27,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 160px;
+    width: 180px;
     height: 75px;
     background-color: var(--tui-base-01);
     border-radius: var(--tui-radius-m);

projects/demo/src/modules/markup/spaces/examples/2/index.html

@@ -2,50 +2,138 @@ <h2 i18n class="title">
     Margin top <code>.tui-space(top, &lt;value&gt;);</code>
 </h2>
 <div class="row">
-    <div class="example example_top-1">.tui-space(top, 1);</div>
-    <div class="example example_top-2">.tui-space(top, 2);</div>
-    <div class="example example_top-3">.tui-space(top, 3);</div>
-    <div class="example example_top-4">.tui-space(top, 4);</div>
-    <div class="example example_top-5">.tui-space(top, 5);</div>
+    <div class="example example_top-1">
+        <tui-doc-copy cdkCopyToClipboard=".tui-space(top, 1);">
+            .tui-space(top, 1);
+        </tui-doc-copy>
+    </div>
+    <div class="example example_top-2">
+        <tui-doc-copy cdkCopyToClipboard=".tui-space(top, 2);">
+            .tui-space(top, 2);
+        </tui-doc-copy>
+    </div>
+    <div class="example example_top-3">
+        <tui-doc-copy cdkCopyToClipboard=".tui-space(top, 3);">
+            .tui-space(top, 3);
+        </tui-doc-copy>
+    </div>
+    <div class="example example_top-4">
+        <tui-doc-copy cdkCopyToClipboard=".tui-space(top, 4);">
+            .tui-space(top, 4);
+        </tui-doc-copy>
+    </div>
+    <div class="example example_top-5">
+        <tui-doc-copy cdkCopyToClipboard=".tui-space(top, 5);">
+            .tui-space(top, 5);
+        </tui-doc-copy>
+    </div>
 </div>
 <h2 i18n class="title">
     Margin bottom <code>.tui-space(bottom, &lt;value&gt;);</code>
 </h2>
 <div class="row row_align-items_bottom">
-    <div class="example example_bottom-1">.tui-space(bottom, 1);</div>
-    <div class="example example_bottom-2">.tui-space(bottom, 2);</div>
-    <div class="example example_bottom-3">.tui-space(bottom, 3);</div>
-    <div class="example example_bottom-4">.tui-space(bottom, 4);</div>
-    <div class="example example_bottom-5">.tui-space(bottom, 5);</div>
+    <div class="example example_bottom-1">
+        <tui-doc-copy cdkCopyToClipboard=".tui-space(bottom, 1);">
+            .tui-space(bottom, 1);
+        </tui-doc-copy>
+    </div>
+    <div class="example example_bottom-2">
+        <tui-doc-copy cdkCopyToClipboard=".tui-space(bottom, 2);">
+            .tui-space(bottom, 2);
+        </tui-doc-copy>
+    </div>
+    <div class="example example_bottom-3">
+        <tui-doc-copy cdkCopyToClipboard=".tui-space(bottom, 3);">
+            .tui-space(bottom, 3);
+        </tui-doc-copy>
+    </div>
+    <div class="example example_bottom-4">
+        <tui-doc-copy cdkCopyToClipboard=".tui-space(bottom, 4);">
+            .tui-space(bottom, 4);
+        </tui-doc-copy>
+    </div>
+    <div class="example example_bottom-5">
+        <tui-doc-copy cdkCopyToClipboard=".tui-space(bottom, 5);">
+            .tui-space(bottom, 5);
+        </tui-doc-copy>
+    </div>
 </div>
 <h2 i18n class="title">
     Margin right <code>.tui-space(right, &lt;value&gt;);</code>
 </h2>
 <div class="row">
-    <div class="example example_right-1">.tui-space(right, 1);</div>
-    <div class="example example_right-2">.tui-space(right, 2);</div>
-    <div class="example example_right-3">.tui-space(right, 3);</div>
-    <div class="example example_right-4">.tui-space(right, 4);</div>
-    <div class="example example_right-5">.tui-space(right, 5);</div>
+    <div class="example example_right-1">
+        <tui-doc-copy cdkCopyToClipboard=".tui-space(right, 1);">
+            .tui-space(right, 1);
+        </tui-doc-copy>
+    </div>
+    <div class="example example_right-2">
+        <tui-doc-copy cdkCopyToClipboard=".tui-space(right, 2);">
+            .tui-space(right, 2);
+        </tui-doc-copy>
+    </div>
+    <div class="example example_right-3">
+        <tui-doc-copy cdkCopyToClipboard=".tui-space(right, 3);">
+            .tui-space(right, 3);
+        </tui-doc-copy>
+    </div>
+    <div class="example example_right-4">
+        <tui-doc-copy cdkCopyToClipboard=".tui-space(right, 4);">
+            .tui-space(right, 4);
+        </tui-doc-copy>
+    </div>
+    <div class="example example_right-5">
+        <tui-doc-copy cdkCopyToClipboard=".tui-space(right, 5);">
+            .tui-space(right, 5);
+        </tui-doc-copy>
+    </div>
     <div class="example"></div>
 </div>
 <h2 i18n class="title">
     Margin left <code>.tui-space(left, &lt;value&gt;);</code>
 </h2>
 <div class="row">
     <div class="example"></div>
-    <div class="example example_left-1">.tui-space(left, 1);</div>
-    <div class="example example_left-2">.tui-space(left, 2);</div>
-    <div class="example example_left-3">.tui-space(left, 3);</div>
-    <div class="example example_left-4">.tui-space(left, 4);</div>
-    <div class="example example_left-5">.tui-space(left, 5);</div>
+    <div class="example example_left-1">
+        <tui-doc-copy cdkCopyToClipboard=".tui-space(left, 1);">
+            .tui-space(left, 1);
+        </tui-doc-copy>
+    </div>
+    <div class="example example_left-2">
+        <tui-doc-copy cdkCopyToClipboard=".tui-space(left, 2);">
+            .tui-space(left, 2);
+        </tui-doc-copy>
+    </div>
+    <div class="example example_left-3">
+        <tui-doc-copy cdkCopyToClipboard=".tui-space(left, 3);">
+            .tui-space(left, 3);
+        </tui-doc-copy>
+    </div>
+    <div class="example example_left-4">
+        <tui-doc-copy cdkCopyToClipboard=".tui-space(left, 4);">
+            .tui-space(left, 4);
+        </tui-doc-copy>
+    </div>
+    <div class="example example_left-5">
+        <tui-doc-copy cdkCopyToClipboard=".tui-space(left, 5);">
+            .tui-space(left, 5);
+        </tui-doc-copy>
+    </div>
 </div>
 <h2 i18n class="title">
     Vertical and horizontal margins
     <code>.tui-space(vertical, &lt;value&gt;);</code> and
     <code>.tui-space(horizontal, &lt;value&gt;);</code>
 </h2>
 <div class="row">
-    <div class="example example_vertical">.tui-space(vertical, 4);</div>
-    <div class="example example_horizontal">.tui-space(horizontal, 4);</div>
+    <div class="example example_vertical">
+        <tui-doc-copy cdkCopyToClipboard=".tui-space(vertical, 4);">
+            .tui-space(vertical, 4);
+        </tui-doc-copy>
+    </div>
+    <div class="example example_horizontal">
+        <tui-doc-copy cdkCopyToClipboard=".tui-space(horizontal, 4);">
+            .tui-space(horizontal, 4);
+        </tui-doc-copy>
+    </div>
 </div>

projects/demo/src/modules/markup/spaces/examples/2/index.style.less

@@ -28,7 +28,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 160px;
+    width: 180px;
     height: 75px;
     background-color: var(--tui-base-01);
     border-radius: var(--tui-radius-m);

projects/demo/src/modules/markup/spaces/spaces.module.ts

@@ -1,14 +1,17 @@
+import {ClipboardModule} from '@angular/cdk/clipboard';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
-import {generateRoutes, TUI_DOC_PAGE_MODULES} from '@taiga-ui/addon-doc';
+import {generateRoutes, TUI_DOC_PAGE_MODULES, TuiDocCopyModule} from '@taiga-ui/addon-doc';
 import {TuiSpacingExample1} from './examples/1';
 import {TuiSpacingExample2} from './examples/2';
 import {SpacesComponent} from './spaces.component';
 
 @NgModule({
     imports: [
         CommonModule,
+        ClipboardModule,
+        TuiDocCopyModule,
         ...TUI_DOC_PAGE_MODULES,
         RouterModule.forChild(generateRoutes(SpacesComponent)),
     ],