-
Отчет от 15.05.2020
+
Disabled
+
+
`,
+ styles: `
+ :host {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .example-stage {
+ display: flex;
+ align-items: center;
+ min-height: 160px;
+ }
+ `,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class LinkDisabledExample {
- disabled = true;
+ readonly disabled = model(true);
}
diff --git a/packages/docs-examples/components/link/link-external/link-external-example.ts b/packages/docs-examples/components/link/link-external/link-external-example.ts
index 240ed01a48..325d29fed2 100644
--- a/packages/docs-examples/components/link/link-external/link-external-example.ts
+++ b/packages/docs-examples/components/link/link-external/link-external-example.ts
@@ -8,11 +8,16 @@ import { KbqLink } from '@koobiq/components/link';
selector: 'link-external-example',
imports: [KbqLink],
template: `
-
+
CVE-2019-1020010
+ `,
+ styles: `
+ :host {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--kbq-size-xxl);
+ min-height: 160px;
+ }
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
diff --git a/packages/docs-examples/components/link/link-general/link-general-example.ts b/packages/docs-examples/components/link/link-general/link-general-example.ts
deleted file mode 100644
index 0dd84beb52..0000000000
--- a/packages/docs-examples/components/link/link-general/link-general-example.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { KbqLink } from '@koobiq/components/link';
-
-/**
- * @title Link general
- */
-@Component({
- selector: 'link-general-example',
- imports: [KbqLink],
- template: `
-
Scan report
- `,
- styles: `
- :host {
- display: flex;
- padding: var(--kbq-size-l);
- }
- `,
- changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class LinkGeneralExample {}
diff --git a/packages/docs-examples/components/link/link-icons/link-icons-example.ts b/packages/docs-examples/components/link/link-icons/link-icons-example.ts
index fe2e2b1811..5de3724656 100644
--- a/packages/docs-examples/components/link/link-icons/link-icons-example.ts
+++ b/packages/docs-examples/components/link/link-icons/link-icons-example.ts
@@ -1,20 +1,32 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { KbqIconModule } from '@koobiq/components/icon';
-import { KbqLink, KbqLinkPrefix } from '@koobiq/components/link';
+import { KbqLink, KbqLinkPrefix, KbqLinkSuffix } from '@koobiq/components/link';
/**
* @title Link icons
*/
@Component({
selector: 'link-icons-example',
- imports: [KbqLink, KbqLinkPrefix, KbqIconModule],
+ imports: [KbqLink, KbqLinkPrefix, KbqLinkSuffix, KbqIconModule],
template: `
-
+
+
+ Scan history
+
+
+
+ Scan report
+
+
+ `,
+ styles: `
+ :host {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--kbq-size-xxl);
+ min-height: 160px;
+ }
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
diff --git a/packages/docs-examples/components/link/link-in-text/link-in-text-example.ts b/packages/docs-examples/components/link/link-in-text/link-in-text-example.ts
new file mode 100644
index 0000000000..ee8b9bb9ed
--- /dev/null
+++ b/packages/docs-examples/components/link/link-in-text/link-in-text-example.ts
@@ -0,0 +1,33 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { KbqLink, KbqLinkSuffix } from '@koobiq/components/link';
+
+/**
+ * @title Link in text
+ */
+@Component({
+ selector: 'link-in-text-example',
+ imports: [KbqLink, KbqLinkSuffix],
+ template: `
+
+ Learn more
+
+ about scan reports
+ .
+
+
+ `,
+ styles: `
+ :host {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 160px;
+ }
+
+ .example-text {
+ margin: 0;
+ }
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class LinkInTextExample {}
diff --git a/packages/docs-examples/components/link/link-multi-line/link-multi-line-example.ts b/packages/docs-examples/components/link/link-multi-line/link-multi-line-example.ts
index 74ccca7543..1b1c84c267 100644
--- a/packages/docs-examples/components/link/link-multi-line/link-multi-line-example.ts
+++ b/packages/docs-examples/components/link/link-multi-line/link-multi-line-example.ts
@@ -9,7 +9,7 @@ import { KbqLink, KbqLinkPrefix } from '@koobiq/components/link';
selector: 'link-multi-line-example',
imports: [KbqLink, KbqLinkPrefix, KbqIconModule],
template: `
-
+
I fully agree
@@ -20,8 +20,14 @@ import { KbqLink, KbqLinkPrefix } from '@koobiq/components/link';
styles: `
:host {
display: flex;
- padding: var(--kbq-size-l);
+ align-items: center;
+ justify-content: center;
+ min-height: 160px;
+ }
+
+ .example-text {
width: 200px;
+ margin: 0;
}
`,
changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/packages/docs-examples/components/link/link-overview/link-overview-example.ts b/packages/docs-examples/components/link/link-overview/link-overview-example.ts
index 8323b4c048..3c1057dfee 100644
--- a/packages/docs-examples/components/link/link-overview/link-overview-example.ts
+++ b/packages/docs-examples/components/link/link-overview/link-overview-example.ts
@@ -1,43 +1,23 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { KbqIconModule } from '@koobiq/components/icon';
-import { KbqLink, KbqLinkPrefix } from '@koobiq/components/link';
+import { KbqLink } from '@koobiq/components/link';
/**
* @title Link
*/
@Component({
selector: 'link-overview-example',
- imports: [KbqLink, KbqLinkPrefix, KbqIconModule],
+ imports: [KbqLink],
template: `
-
-
-
-
-
-
-
-
-
+ Scan report
+ `,
+ styles: `
+ :host {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 160px;
+ }
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
-export class LinkOverviewExample {
- active = true;
- focus = true;
- disabled = true;
-}
+export class LinkOverviewExample {}
diff --git a/packages/docs-examples/components/link/link-prepositions/link-prepositions-example.ts b/packages/docs-examples/components/link/link-prepositions/link-prepositions-example.ts
deleted file mode 100644
index 079b738e68..0000000000
--- a/packages/docs-examples/components/link/link-prepositions/link-prepositions-example.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { KbqLink } from '@koobiq/components/link';
-
-/**
- * @title Link preposition
- */
-@Component({
- selector: 'link-prepositions-example',
- imports: [KbqLink],
- template: `
-
- `,
- changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class LinkPrepositionsExample {}
diff --git a/packages/docs-examples/components/link/link-print/link-print-example.ts b/packages/docs-examples/components/link/link-print/link-print-example.ts
index fcd9dd8086..3ba807a637 100644
--- a/packages/docs-examples/components/link/link-print/link-print-example.ts
+++ b/packages/docs-examples/components/link/link-print/link-print-example.ts
@@ -8,15 +8,15 @@ import { KbqLink } from '@koobiq/components/link';
selector: 'link-print-example',
imports: [KbqLink],
template: `
-
+
CVE-2019-1020010
+ `,
+ styles: `
+ :host {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 160px;
+ }
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
diff --git a/packages/docs-examples/components/link/link-pseudo/link-pseudo-example.ts b/packages/docs-examples/components/link/link-pseudo/link-pseudo-example.ts
index 2f63249c99..3aaf0ac15a 100644
--- a/packages/docs-examples/components/link/link-pseudo/link-pseudo-example.ts
+++ b/packages/docs-examples/components/link/link-pseudo/link-pseudo-example.ts
@@ -13,7 +13,9 @@ import { KbqLink } from '@koobiq/components/link';
styles: `
:host {
display: flex;
- padding: var(--kbq-size-l);
+ align-items: center;
+ justify-content: center;
+ min-height: 160px;
}
`,
changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/packages/docs-examples/components/link/link-size/link-size-example.ts b/packages/docs-examples/components/link/link-size/link-size-example.ts
new file mode 100644
index 0000000000..65b32c5dd1
--- /dev/null
+++ b/packages/docs-examples/components/link/link-size/link-size-example.ts
@@ -0,0 +1,41 @@
+import { ChangeDetectionStrategy, Component, model } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { KbqButtonToggleModule } from '@koobiq/components/button-toggle';
+import { KbqDefaultSizes } from '@koobiq/components/core';
+import { KbqLink } from '@koobiq/components/link';
+
+/**
+ * @title Link size
+ */
+@Component({
+ selector: 'link-size-example',
+ imports: [KbqLink, KbqButtonToggleModule, FormsModule],
+ template: `
+
+ Compact
+ Normal
+ Big
+
+
+
+ `,
+ styles: `
+ :host {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .example-stage {
+ display: flex;
+ align-items: center;
+ min-height: 160px;
+ }
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class LinkSizeExample {
+ readonly size = model
('normal');
+}
diff --git a/packages/docs-examples/components/link/link-target-blank/link-target-blank-example.ts b/packages/docs-examples/components/link/link-target-blank/link-target-blank-example.ts
deleted file mode 100644
index 52b5e206ee..0000000000
--- a/packages/docs-examples/components/link/link-target-blank/link-target-blank-example.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { KbqLink } from '@koobiq/components/link';
-
-/**
- * @title Link target blank
- */
-@Component({
- selector: 'link-target-blank-example',
- imports: [KbqLink],
- template: `
-
- `,
- changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class LinkTargetBlankExample {}
diff --git a/packages/docs-examples/components/link/link-underline/link-underline-example.ts b/packages/docs-examples/components/link/link-underline/link-underline-example.ts
new file mode 100644
index 0000000000..9553452ff8
--- /dev/null
+++ b/packages/docs-examples/components/link/link-underline/link-underline-example.ts
@@ -0,0 +1,42 @@
+import { ChangeDetectionStrategy, Component, model } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { KbqButtonToggleModule } from '@koobiq/components/button-toggle';
+import { KbqLink, KbqLinkUnderline } from '@koobiq/components/link';
+
+/**
+ * @title Link underline
+ */
+@Component({
+ selector: 'link-underline-example',
+ imports: [KbqLink, KbqButtonToggleModule, FormsModule],
+ template: `
+
+ Always
+ Hover
+ None
+
+
+
+ `,
+ styles: `
+ :host {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .example-stage {
+ display: flex;
+ align-items: center;
+ min-height: 160px;
+ }
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class LinkUnderlineExample {
+ readonly underline = model('always');
+}
diff --git a/packages/docs-examples/components/link/link-visited/link-visited-example.ts b/packages/docs-examples/components/link/link-visited/link-visited-example.ts
index b861e145f6..d39a410dcc 100644
--- a/packages/docs-examples/components/link/link-visited/link-visited-example.ts
+++ b/packages/docs-examples/components/link/link-visited/link-visited-example.ts
@@ -8,9 +8,15 @@ import { KbqLink } from '@koobiq/components/link';
selector: 'link-visited-example',
imports: [KbqLink],
template: `
-
+ Scan report
+ `,
+ styles: `
+ :host {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 160px;
+ }
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
diff --git a/packages/docs-examples/components/link/link-with-caption/link-with-caption-example.ts b/packages/docs-examples/components/link/link-with-caption/link-with-caption-example.ts
index 8404be46c6..bee50ca8ad 100644
--- a/packages/docs-examples/components/link/link-with-caption/link-with-caption-example.ts
+++ b/packages/docs-examples/components/link/link-with-caption/link-with-caption-example.ts
@@ -15,8 +15,10 @@ import { KbqLink, KbqLinkSuffix } from '@koobiq/components/link';
`,
styles: `
:host {
- display: inline-block;
- padding: var(--kbq-size-l);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 160px;
}
.example-link-caption {
diff --git a/packages/docs-examples/example-module.ts b/packages/docs-examples/example-module.ts
index 0ad6214065..eae0f745dd 100644
--- a/packages/docs-examples/example-module.ts
+++ b/packages/docs-examples/example-module.ts
@@ -3581,18 +3581,6 @@ export const EXAMPLE_COMPONENTS: {[id: string]: LiveExample} = {
"primaryFile": "link-application-example.ts",
"importPath": "components/link"
},
- "link-caption": {
- "packagePath": "components/link/link-caption",
- "title": "Link caption",
- "componentName": "LinkCaptionExample",
- "files": [
- "link-caption-example.ts"
- ],
- "localImportFiles": [],
- "selector": "link-caption-example",
- "primaryFile": "link-caption-example.ts",
- "importPath": "components/link"
- },
"link-disabled": {
"packagePath": "components/link/link-disabled",
"title": "Link disabled",
@@ -3617,18 +3605,6 @@ export const EXAMPLE_COMPONENTS: {[id: string]: LiveExample} = {
"primaryFile": "link-external-example.ts",
"importPath": "components/link"
},
- "link-general": {
- "packagePath": "components/link/link-general",
- "title": "Link general",
- "componentName": "LinkGeneralExample",
- "files": [
- "link-general-example.ts"
- ],
- "localImportFiles": [],
- "selector": "link-general-example",
- "primaryFile": "link-general-example.ts",
- "importPath": "components/link"
- },
"link-icons": {
"packagePath": "components/link/link-icons",
"title": "Link icons",
@@ -3641,6 +3617,18 @@ export const EXAMPLE_COMPONENTS: {[id: string]: LiveExample} = {
"primaryFile": "link-icons-example.ts",
"importPath": "components/link"
},
+ "link-in-text": {
+ "packagePath": "components/link/link-in-text",
+ "title": "Link in text",
+ "componentName": "LinkInTextExample",
+ "files": [
+ "link-in-text-example.ts"
+ ],
+ "localImportFiles": [],
+ "selector": "link-in-text-example",
+ "primaryFile": "link-in-text-example.ts",
+ "importPath": "components/link"
+ },
"link-multi-line": {
"packagePath": "components/link/link-multi-line",
"title": "Link multi-line",
@@ -3665,18 +3653,6 @@ export const EXAMPLE_COMPONENTS: {[id: string]: LiveExample} = {
"primaryFile": "link-overview-example.ts",
"importPath": "components/link"
},
- "link-prepositions": {
- "packagePath": "components/link/link-prepositions",
- "title": "Link preposition",
- "componentName": "LinkPrepositionsExample",
- "files": [
- "link-prepositions-example.ts"
- ],
- "localImportFiles": [],
- "selector": "link-prepositions-example",
- "primaryFile": "link-prepositions-example.ts",
- "importPath": "components/link"
- },
"link-print": {
"packagePath": "components/link/link-print",
"title": "Link print",
@@ -3701,16 +3677,28 @@ export const EXAMPLE_COMPONENTS: {[id: string]: LiveExample} = {
"primaryFile": "link-pseudo-example.ts",
"importPath": "components/link"
},
- "link-target-blank": {
- "packagePath": "components/link/link-target-blank",
- "title": "Link target blank",
- "componentName": "LinkTargetBlankExample",
+ "link-size": {
+ "packagePath": "components/link/link-size",
+ "title": "Link size",
+ "componentName": "LinkSizeExample",
+ "files": [
+ "link-size-example.ts"
+ ],
+ "localImportFiles": [],
+ "selector": "link-size-example",
+ "primaryFile": "link-size-example.ts",
+ "importPath": "components/link"
+ },
+ "link-underline": {
+ "packagePath": "components/link/link-underline",
+ "title": "Link underline",
+ "componentName": "LinkUnderlineExample",
"files": [
- "link-target-blank-example.ts"
+ "link-underline-example.ts"
],
"localImportFiles": [],
- "selector": "link-target-blank-example",
- "primaryFile": "link-target-blank-example.ts",
+ "selector": "link-underline-example",
+ "primaryFile": "link-underline-example.ts",
"importPath": "components/link"
},
"link-visited": {
@@ -8274,17 +8262,16 @@ export type LiveExampleId =
| 'layout-flex-order'
| 'layout-flex-overview'
| 'link-application'
- | 'link-caption'
| 'link-disabled'
| 'link-external'
- | 'link-general'
| 'link-icons'
+ | 'link-in-text'
| 'link-multi-line'
| 'link-overview'
- | 'link-prepositions'
| 'link-print'
| 'link-pseudo'
- | 'link-target-blank'
+ | 'link-size'
+ | 'link-underline'
| 'link-visited'
| 'link-with-caption'
| 'list-action-button'
diff --git a/packages/docs-examples/loader/index.ts b/packages/docs-examples/loader/index.ts
index 39259b5c23..e0d6d20bd6 100644
--- a/packages/docs-examples/loader/index.ts
+++ b/packages/docs-examples/loader/index.ts
@@ -585,28 +585,26 @@ export async function loadExampleComponent(id: string): Promise |
return import('@koobiq/docs-examples/components/layout-flex').then((m) => m.LayoutFlexOverviewExample);
case 'link-application':
return import('@koobiq/docs-examples/components/link').then((m) => m.LinkApplicationExample);
- case 'link-caption':
- return import('@koobiq/docs-examples/components/link').then((m) => m.LinkCaptionExample);
case 'link-disabled':
return import('@koobiq/docs-examples/components/link').then((m) => m.LinkDisabledExample);
case 'link-external':
return import('@koobiq/docs-examples/components/link').then((m) => m.LinkExternalExample);
- case 'link-general':
- return import('@koobiq/docs-examples/components/link').then((m) => m.LinkGeneralExample);
case 'link-icons':
return import('@koobiq/docs-examples/components/link').then((m) => m.LinkIconsExample);
+ case 'link-in-text':
+ return import('@koobiq/docs-examples/components/link').then((m) => m.LinkInTextExample);
case 'link-multi-line':
return import('@koobiq/docs-examples/components/link').then((m) => m.LinkMultiLineExample);
case 'link-overview':
return import('@koobiq/docs-examples/components/link').then((m) => m.LinkOverviewExample);
- case 'link-prepositions':
- return import('@koobiq/docs-examples/components/link').then((m) => m.LinkPrepositionsExample);
case 'link-print':
return import('@koobiq/docs-examples/components/link').then((m) => m.LinkPrintExample);
case 'link-pseudo':
return import('@koobiq/docs-examples/components/link').then((m) => m.LinkPseudoExample);
- case 'link-target-blank':
- return import('@koobiq/docs-examples/components/link').then((m) => m.LinkTargetBlankExample);
+ case 'link-size':
+ return import('@koobiq/docs-examples/components/link').then((m) => m.LinkSizeExample);
+ case 'link-underline':
+ return import('@koobiq/docs-examples/components/link').then((m) => m.LinkUnderlineExample);
case 'link-visited':
return import('@koobiq/docs-examples/components/link').then((m) => m.LinkVisitedExample);
case 'link-with-caption':
|
-| :--------------------------------------------------------------------: |
-| AI on Windows. Project links are active and open in AI Desktop |
-
-| 
|
-| :----------------------------------------------------------------------: |
-| AI on macOS. Project links are displayed as plain text |
-
-Sometimes specifying the product and adding a logo may be excessive. If you are confident that the context makes the link's purpose clear, these elements can be omitted.
-
-##### Pseudo-link
-
-An analog of a button. Does not reload the page, does not open in a new tab or by link.
+A pseudo link looks like a link, but acts as a button: it performs an action without leaving the page. Use it for an action inside text.