feat: svg-icons registrator service and component (#DS-2890)

angular.json

@@ -1617,6 +1617,42 @@
                 }
             }
         },
+        "dev-svg-icon": {
+            "projectType": "application",
+            "root": "packages/components-dev/svg-icon",
+            "sourceRoot": "packages/components-dev/svg-icon",
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:application",
+                    "options": {
+                        "outputPath": {
+                            "base": "dist/components-dev/svg-icon"
+                        },
+                        "assets": [
+                            {
+                                "glob": "**/*",
+                                "input": "node_modules/@koobiq/icons/svg",
+                                "output": "/assets/SVGIcons"
+                            }
+                        ],
+                        "tsConfig": "packages/components-dev/svg-icon/tsconfig.app.json",
+                        "index": "packages/components-dev/index.html",
+                        "polyfills": ["zone.js"],
+                        "extractLicenses": false,
+                        "sourceMap": true,
+                        "optimization": false,
+                        "namedChunks": true,
+                        "browser": "packages/components-dev/svg-icon/main.ts"
+                    }
+                },
+                "serve": {
+                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "options": {
+                        "buildTarget": "dev-svg-icon:build"
+                    }
+                }
+            }
+        },
         "dev-table": {
             "projectType": "application",
             "root": "packages/components-dev/table",

apps/docs/src/app/components/component-viewer/component-viewer.module.ts

@@ -39,7 +39,6 @@ import {
         DocExampleViewerModule,
         SidenavModule,
         NavbarModule,
-        KbqIconModule,
         KbqLinkModule
     ],
     declarations: [

package.json

@@ -231,6 +231,7 @@
         "dev:sidebar": "ng serve dev-sidebar --port 3003",
         "dev:sidepanel": "ng serve dev-sidepanel --port 3003",
         "dev:splitter": "ng serve dev-splitter --port 3003",
+        "dev:svg-icon": "ng serve dev-svg-icon --port 3003",
         "dev:table": "ng serve dev-table --port 3003",
         "dev:tabs": "ng serve dev-tabs --port 3003",
         "dev:tag": "ng serve dev-tag --port 3003",

packages/components-dev/svg-icon/main.ts

@@ -0,0 +1,6 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { DemoModule } from './module';
+
+platformBrowserDynamic()
+    .bootstrapModule(DemoModule)
+    .catch((error) => console.error(error));

packages/components-dev/svg-icon/module.ts

@@ -0,0 +1,38 @@
+import { HttpClientModule } from '@angular/common/http';
+import { ChangeDetectionStrategy, Component, NgModule, ViewEncapsulation } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { KbqComponentColors } from '@koobiq/components/core';
+import { KbqSvgIconModule, provideKbqSvgIconsConfig } from '../../components/svg-icon';
+
+const mockKbqSvgIcons = {
+    'kbq-windows_16':
+        '<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill="currentColor" d="M8 2.18c0-.09.07-.166.16-.174l6.65-.57a.175.175 0 0 1 .19.174v5.54a.175.175 0 0 1-.175.175h-6.65A.175.175 0 0 1 8 7.15zm-6.843.535A.175.175 0 0 0 1 2.889V7.15c0 .097.078.175.175.175h5.377a.175.175 0 0 0 .175-.175V2.324a.175.175 0 0 0-.193-.174zm-.01 9.884A.175.175 0 0 1 1 12.426V8.813c0-.097.078-.175.175-.175h5.377c.097 0 .175.078.175.175v4.46c0 .107-.096.19-.202.173zm7.006 1.062A.175.175 0 0 1 8 13.488V8.813c0-.097.078-.175.175-.175h6.65c.097 0 .175.078.175.175v5.532a.175.175 0 0 1-.197.174z"/></svg>'
+};
+
+@Component({
+    selector: 'app',
+    templateUrl: './template.html',
+    styleUrls: ['../main.scss', './styles.scss'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DemoComponent {
+    protected readonly colors = KbqComponentColors;
+}
+
+@NgModule({
+    declarations: [DemoComponent],
+    imports: [
+        HttpClientModule,
+        BrowserModule,
+        KbqSvgIconModule.withIcons(mockKbqSvgIcons)],
+    bootstrap: [DemoComponent],
+    providers: [
+        provideKbqSvgIconsConfig({
+            size: '24px',
+            color: 'black'
+        })
+
+    ]
+})
+export class DemoModule {}

packages/components-dev/svg-icon/styles.scss

@@ -0,0 +1 @@
+// no styles

packages/components-dev/svg-icon/template.html

@@ -0,0 +1 @@
+<kbqSvgIcon name="kbq-windows_16"></kbqSvgIcon>

packages/components-dev/svg-icon/tsconfig.app.json

@@ -0,0 +1,4 @@
+{
+    "extends": "../tsconfig.dev.json",
+    "include": ["**/*.ts"]
+}

packages/components-dev/tsconfig.dev.json

@@ -5,6 +5,8 @@
     },
     "angularCompilerOptions": {
         "strictTemplates": true,
+        "resolveJsonModule": true,
+        "esModuleInterop": true,
         "extendedDiagnostics": {
             "checks": {
                 "optionalChainNotNullable": "suppress"

packages/components/svg-icon/_svg-icon-button-theme.scss

@@ -0,0 +1,169 @@
+@use 'sass:map';
+
+@use '../core/styles/theming/theming' as *;
+@use '../core/styles/common/tokens' as *;
+
+@mixin kbq-svg-icon-button-theme() {
+    .kbq-svg-icon-button {
+        &:focus {
+            outline: none;
+        }
+
+        // FIXME: move to unified mixin
+        &.kbq-theme {
+            svg path {
+                fill: var(--kbq-icon-button-theme-default);
+            }
+
+            &:active,
+            &.kbq-active {
+                svg path {
+                    fill: var(--kbq-icon-button-theme-states-active);
+                }
+            }
+
+            &:not(.kbq-disabled):hover {
+                svg path {
+                    fill: var(--kbq-icon-button-theme-states-hover);
+                }
+            }
+
+            &.kbq-disabled {
+                svg path {
+                    fill: var(--kbq-icon-button-theme-states-disabled);
+                }
+            }
+        }
+
+        &.kbq-contrast {
+            svg path {
+                fill: var(--kbq-icon-button-contrast-default);
+            }
+
+            &:active,
+            &.kbq-active {
+                svg path {
+                    fill: var(--kbq-icon-button-contrast-states-active);
+                }
+            }
+
+            &:not(.kbq-disabled):hover {
+                svg path {
+                    fill: var(--kbq-icon-button-contrast-states-hover);
+                }
+            }
+
+            &.kbq-disabled {
+                svg path {
+                    fill: var(--kbq-icon-button-contrast-states-disabled);
+                }
+            }
+        }
+
+        &.kbq-contrast-fade {
+            svg path {
+                fill: var(--kbq-icon-button-fade-contrast-default);
+            }
+
+            &:active,
+            &.kbq-active {
+                svg path {
+                    fill: var(--kbq-icon-button-fade-contrast-states-active);
+                }
+            }
+
+            &:not(.kbq-disabled):hover {
+                svg path {
+                    fill: var(--kbq-icon-button-fade-contrast-states-hover);
+                }
+            }
+
+            &.kbq-disabled {
+                svg path {
+                    fill: var(--kbq-icon-button-fade-contrast-states-disabled);
+                }
+            }
+        }
+
+        &.kbq-error {
+            svg path {
+                fill: var(--kbq-icon-button-error-default);
+            }
+
+            &:active,
+            &.kbq-active {
+                svg path {
+                    fill: var(--kbq-icon-button-error-states-active);
+                }
+            }
+
+            &:not(.kbq-disabled):hover {
+                svg path {
+                    fill: var(--kbq-icon-button-error-states-hover);
+                }
+            }
+
+            &.kbq-disabled {
+                svg path {
+                    fill: var(--kbq-icon-button-error-states-disabled);
+                }
+            }
+        }
+
+        &.kbq-success {
+            svg path {
+                fill: var(--kbq-icon-button-success-default);
+            }
+
+            &:active,
+            &.kbq-active {
+                svg path {
+                    fill: var(--kbq-icon-button-success-states-active);
+                }
+            }
+
+            &:not(.kbq-disabled):hover {
+                svg path {
+                    fill: var(--kbq-icon-button-success-states-hover);
+                }
+            }
+
+            &.kbq-disabled {
+                svg path {
+                    fill: var(--kbq-icon-button-success-states-disabled);
+                }
+            }
+        }
+
+        &.kbq-warning {
+            svg path {
+                fill: var(--kbq-icon-button-warning-default);
+            }
+
+            &:active,
+            &.kbq-active {
+                svg path {
+                    fill: var(--kbq-icon-button-warning-states-active);
+                }
+            }
+
+            &:not(.kbq-disabled):hover {
+                svg path {
+                    fill: var(--kbq-icon-button-warning-states-hover);
+                }
+            }
+
+            &.kbq-disabled {
+                svg path {
+                    fill: var(--kbq-icon-button-warning-states-disabled);
+                }
+            }
+        }
+
+        &.cdk-keyboard-focused {
+            box-shadow:
+                inset 0 0 0.1px 1px var(--kbq-states-focused-color),
+                0 0 0.1px 1px var(--kbq-states-focused-color);
+        }
+    }
+}

packages/components/svg-icon/_svg-icon-item-theme.scss

@@ -0,0 +1,62 @@
+@use 'sass:map';
+
+@use '../core/styles/theming/theming' as *;
+@use '../core/styles/common/tokens' as *;
+
+@mixin kbq-svg-icon-item-style($type, $style-name) {
+    $base: icon-item-filled-#{$type}-#{$style-name};
+
+    background: var(--kbq-#{$base}-background);
+
+    svg path {
+        fill: var(--kbq-#{$base}-color);
+    }
+}
+
+@mixin kbq-svg-icon-item-theme() {
+    .kbq-svg-icon-item {
+        &.kbq-svg-icon-item_fade-off {
+            &.kbq-theme {
+                @include kbq-svg-icon-item-style(fade-off, theme);
+            }
+
+            &.kbq-contrast {
+                @include kbq-svg-icon-item-style(fade-off, contrast);
+            }
+
+            &.kbq-error {
+                @include kbq-svg-icon-item-style(fade-off, error);
+            }
+
+            &.kbq-warning {
+                @include kbq-svg-icon-item-style(fade-off, warning);
+            }
+
+            &.kbq-success {
+                @include kbq-svg-icon-item-style(fade-off, success);
+            }
+        }
+
+        &.kbq-svg-icon-item_fade-on {
+            &.kbq-theme {
+                @include kbq-svg-icon-item-style(fade-on, theme);
+            }
+
+            &.kbq-contrast {
+                @include kbq-svg-icon-item-style(fade-on, contrast);
+            }
+
+            &.kbq-error {
+                @include kbq-svg-icon-item-style(fade-on, error);
+            }
+
+            &.kbq-warning {
+                @include kbq-svg-icon-item-style(fade-on, warning);
+            }
+
+            &.kbq-success {
+                @include kbq-svg-icon-item-style(fade-on, success);
+            }
+        }
+    }
+}

packages/components/svg-icon/_svg-icon-theme.scss

@@ -0,0 +1,29 @@
+@use '../core/styles/common/tokens' as *;
+
+@mixin kbq-svg-icon-theme() {
+    .kbq-svg-icon:not(.kbq-icon-button, .kbq-icon-item) {
+        &.kbq-theme svg path {
+            fill: var(--kbq-icon-theme-color);
+        }
+
+        &.kbq-contrast svg path {
+            fill: var(--kbq-icon-contrast-color);
+        }
+
+        &.kbq-contrast-fade svg path {
+            fill: var(--kbq-icon-fade-contrast-color);
+        }
+
+        &.kbq-error svg path {
+            fill: var(--kbq-icon-error-color);
+        }
+
+        &.kbq-warning svg path {
+            fill: var(--kbq-icon-warning-color);
+        }
+
+        &.kbq-success svg path {
+            fill: var(--kbq-icon-success-color);
+        }
+    }
+}