@indigina/ui-kit 1.1.16 → 1.1.18

package/lib/components/kit-svg-icon/kit-svg-icon.const.d.ts

@@ -76,5 +76,6 @@ export declare enum KitSvgIcon {
     MENU = "menu",
     MESSAGE = "message",
     RELOAD = "reload",
-    WINDOW_RESTORE = "window-restore"
+    WINDOW_RESTORE = "window-restore",
+    BACK_ARROW = "back-arrow"
 }

package/lib/directives/kit-badge/kit-badge.const.d.ts

@@ -0,0 +1,7 @@
+export declare enum KitBadgeTheme {
+    SUCCESS = "success",
+    DEFAULT = "default",
+    DANGER = "danger",
+    PROCESSING = "processing",
+    WARNING = "warning"
+}

package/lib/directives/kit-badge/kit-badge.directive.d.ts

@@ -0,0 +1,22 @@
+import { ElementRef, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { KitBadgeTheme } from './kit-badge.const';
+import * as i0 from "@angular/core";
+export declare class KitBadgeDirective implements OnInit, OnDestroy {
+    private elementRef;
+    private renderer;
+    /**
+     * Defines the content of the badge
+     */
+    kitBadgeText?: string | number;
+    /**
+     * Defines the theme color of the badge
+     */
+    kitBadgeTheme: KitBadgeTheme;
+    private badgeElement;
+    constructor(elementRef: ElementRef, renderer: Renderer2);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private createBadge;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KitBadgeDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KitBadgeDirective, "[kitBadge]", never, { "kitBadgeText": { "alias": "kitBadgeText"; "required": false; }; "kitBadgeTheme": { "alias": "kitBadgeTheme"; "required": false; }; }, {}, never, never, false, never>;
+}

package/lib/directives/kit-badge/kit-badge.module.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./kit-badge.directive";
+export declare class KitBadgeModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KitBadgeModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KitBadgeModule, [typeof i1.KitBadgeDirective], never, [typeof i1.KitBadgeDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KitBadgeModule>;
+}

package/package.json

@@ -7,7 +7,7 @@
     "components",
     "shared"
   ],
-  "version": "1.1.16",
+  "version": "1.1.18",
   "peerDependencies": {
     "@angular/common": "^17.0.7",
     "@angular/core": "^17.0.7"

package/public-api.d.ts

@@ -86,3 +86,6 @@ export { KitCopyTextComponent } from './lib/components/kit-copy-text/kit-copy-te
 export { KitNavigationMenuModule } from './lib/components/kit-navigation-menu/kit-navigation-menu.module';
 export { KitNavigationMenuComponent } from './lib/components/kit-navigation-menu/kit-navigation-menu.component';
 export { KitNavigationMenuItem } from './lib/components/kit-navigation-menu/kit-navigation-menu.model';
+export { KitBadgeModule } from './lib/directives/kit-badge/kit-badge.module';
+export { KitBadgeDirective } from './lib/directives/kit-badge/kit-badge.directive';
+export { KitBadgeTheme } from './lib/directives/kit-badge/kit-badge.const';

package/styles/components/badge.scss

@@ -0,0 +1,54 @@
+.kit-badge {
+  position: relative;
+  display: inline-block;
+
+  &-content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(50%, -50%);
+
+    &.danger {
+      background: var(--ui-kit-color-red-1);
+    }
+
+    &.default {
+      background: var(--ui-kit-color-grey-13);
+    }
+
+    &.success {
+      background: var(--ui-kit-color-green-1);
+    }
+
+    &.processing {
+      background: var(--ui-kit-color-teal);
+    }
+
+    &.warning {
+      background: var(--ui-kit-color-orange);
+    }
+  }
+
+  &-text {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 7px;
+    height: 20px;
+    color: var(--ui-kit-color-white);
+    font-size: 12px;
+    font-weight: 500;
+    border-radius: 16px;
+
+    &.default {
+      color: var(--ui-kit-color-grey-10);
+    }
+  }
+
+  &-status {
+    width: 6px;
+    height: 6px;
+    border: 2px solid var(--ui-kit-color-grey-13);
+    border-radius: 50%;
+  }
+}

package/styles/styles.scss

@@ -19,3 +19,4 @@
 @import "theming";
 @import "components/tooltip";
 @import "components/toastr";
+@import "components/badge";

package/styles/theming.scss

@@ -8,8 +8,9 @@
 
   /* custom palette */
   --ui-kit-color-main: #56a2f7;
-  --ui-kit-color-hover: #002a3a;
-  --ui-kit-color-selected: #3678c3;
+  --ui-kit-color-hover: #3678c3;
+  --ui-kit-color-selected: #3678c366;
+  --ui-kit-color-active: #002a3a;
 
   --ui-kit-color-grey-0: #252b30;
   --ui-kit-color-grey-2: #a7b2c3;
@@ -27,10 +28,16 @@
   --ui-kit-color-grey-14: #565963;
 
   --ui-kit-color-green: #00b0ad;
+  --ui-kit-color-green-1: #39c237;
 
   --ui-kit-color-red: #ef3e42;
   --ui-kit-color-red-20: #f8e0e0;
+  --ui-kit-color-red-1: #f5222d;
 
   --ui-kit-color-cobalt: #006890;
   --ui-kit-color-cobalt-darkest: #002a3a;
+
+  --ui-kit-color-teal: #23afd2;
+
+  --ui-kit-color-orange: #faad14;
 }