chore: updated link example and dev app (#DS-2881) (#765)

Author: artembelik

packages/components-dev/link/module.ts

@@ -1,16 +1,30 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 import { KbqIconModule } from '@koobiq/components/icon';
 import { KbqLinkModule } from '@koobiq/components/link';
+import { LinkExamplesModule } from 'packages/docs-examples/components/link';
+import { DevThemeToggle } from '../theme-toggle';
 
 @Component({
     standalone: true,
-    imports: [KbqLinkModule, KbqIconModule],
+    imports: [LinkExamplesModule],
+    selector: 'dev-examples',
+    template: `
+        <link-application-example />
+        <hr />
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DevExamples {}
+
+@Component({
+    standalone: true,
+    imports: [KbqLinkModule, KbqIconModule, DevExamples, DevThemeToggle],
     selector: 'dev-app',
     templateUrl: './template.html',
     styleUrls: ['./styles.scss'],
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DevApp {
-    url = 'http://localhost:3003/';
+    readonly url = 'http://localhost:3003/';
 }

packages/components-dev/link/template.html

@@ -1,3 +1,9 @@
+<dev-theme-toggle />
+
+<hr />
+
+<dev-examples />
+
 <table>
     <tr class="kbq-text-big">
         <td>Disabled</td>

packages/docs-examples/components/link/link-application/link-application-example.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { KbqIconModule } from '@koobiq/components/icon';
 import { KbqLinkModule } from '@koobiq/components/link';
 
@@ -13,18 +13,33 @@ import { KbqLinkModule } from '@koobiq/components/link';
         KbqIconModule
     ],
     template: `
-        <div style="padding: 16px">
-            <a class="kbq-link_external" href="https://koobiq.io/en/components/link" target="_blank" kbq-link>
-                <span class="kbq-link__text">Отчет сканирования в AI Desktop</span>
-                <i kbq-icon="kbq-north-east_16"></i>
-            </a>
-        </div>
-        <div style="padding: 16px">
-            <a class="kbq-link_external" href="https://koobiq.io/en/components/link" target="_blank" kbq-link>
-                <span class="kbq-link__text">Отчет сканирования в AI Desktop</span>
-            </a>
-            <img style="margin-left: 5px; vertical-align: middle" alt="" src="favicon.ico" />
-        </div>
-    `
+        <a class="kbq-link_external" href="https://koobiq.io/en/components/link" target="_blank" kbq-link>
+            <span class="kbq-link__text">The scan report in Deep Inspector</span>
+            <i kbq-icon="kbq-north-east_16"></i>
+        </a>
+
+        <a
+            class="kbq-link_external example-link-with-svg-icon"
+            href="https://koobiq.io/en/components/link"
+            target="_blank"
+            kbq-link
+        >
+            <span class="kbq-link__text">The scan report in Deep Inspector</span>
+            <img kbq-icon="" src="https://koobiq.io/assets/images/favicons/icon.svg" width="16" alt="icon" />
+        </a>
+    `,
+    styles: `
+        :host {
+            display: flex;
+            flex-direction: column;
+            gap: var(--kbq-size-s);
+        }
+
+        .example-link-with-svg-icon {
+            display: inline-flex;
+            align-items: center;
+        }
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class LinkApplicationExample {}