asksuite-citrus 0.5.4 → 0.6.1

package/lib/asksuite-citrus.module.d.ts

@@ -14,13 +14,14 @@ import * as i12 from "./components/date-picker/date-picker-calendar/date-picker-
 import * as i13 from "./components/skeleton/skeleton.component";
 import * as i14 from "./directives/spinner/spinner.component";
 import * as i15 from "./directives/spinner/spinner.directive";
-import * as i16 from "@angular/common";
-import * as i17 from "@angular/forms";
-import * as i18 from "@angular/cdk/overlay";
-import * as i19 from "@ngx-translate/core";
-import * as i20 from "ngx-skeleton-loader";
+import * as i16 from "./directives/badge/badge.directive";
+import * as i17 from "@angular/common";
+import * as i18 from "@angular/forms";
+import * as i19 from "@angular/cdk/overlay";
+import * as i20 from "@ngx-translate/core";
+import * as i21 from "ngx-skeleton-loader";
 export declare class AsksuiteCitrusModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AsksuiteCitrusModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AsksuiteCitrusModule, [typeof i1.ButtonComponent, typeof i2.InputComponent, typeof i3.SelectComponent, typeof i4.BoxComponent, typeof i5.AvatarComponent, typeof i6.DropdownContainerComponent, typeof i7.AskDropdownDirective, typeof i8.AutocompleteComponent, typeof i9.ChipsComponent, typeof i10.CheckboxComponent, typeof i11.DatePickerComponent, typeof i12.DatePickerCalendarComponent, typeof i13.SkeletonComponent, typeof i14.SpinnerComponent, typeof i15.SpinnerDirective], [typeof i16.CommonModule, typeof i17.FormsModule, typeof i17.ReactiveFormsModule, typeof i18.CdkOverlayOrigin, typeof i18.CdkConnectedOverlay, typeof i18.OverlayModule, typeof i19.TranslateModule, typeof i20.NgxSkeletonLoaderModule], [typeof i1.ButtonComponent, typeof i2.InputComponent, typeof i3.SelectComponent, typeof i4.BoxComponent, typeof i5.AvatarComponent, typeof i6.DropdownContainerComponent, typeof i7.AskDropdownDirective, typeof i8.AutocompleteComponent, typeof i9.ChipsComponent, typeof i10.CheckboxComponent, typeof i11.DatePickerComponent, typeof i12.DatePickerCalendarComponent, typeof i13.SkeletonComponent, typeof i15.SpinnerDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AsksuiteCitrusModule, [typeof i1.ButtonComponent, typeof i2.InputComponent, typeof i3.SelectComponent, typeof i4.BoxComponent, typeof i5.AvatarComponent, typeof i6.DropdownContainerComponent, typeof i7.AskDropdownDirective, typeof i8.AutocompleteComponent, typeof i9.ChipsComponent, typeof i10.CheckboxComponent, typeof i11.DatePickerComponent, typeof i12.DatePickerCalendarComponent, typeof i13.SkeletonComponent, typeof i14.SpinnerComponent, typeof i15.SpinnerDirective, typeof i16.BadgeDirective], [typeof i17.CommonModule, typeof i18.FormsModule, typeof i18.ReactiveFormsModule, typeof i19.CdkOverlayOrigin, typeof i19.CdkConnectedOverlay, typeof i19.OverlayModule, typeof i20.TranslateModule, typeof i21.NgxSkeletonLoaderModule], [typeof i1.ButtonComponent, typeof i2.InputComponent, typeof i3.SelectComponent, typeof i4.BoxComponent, typeof i5.AvatarComponent, typeof i6.DropdownContainerComponent, typeof i7.AskDropdownDirective, typeof i8.AutocompleteComponent, typeof i9.ChipsComponent, typeof i10.CheckboxComponent, typeof i11.DatePickerComponent, typeof i12.DatePickerCalendarComponent, typeof i13.SkeletonComponent, typeof i15.SpinnerDirective, typeof i16.BadgeDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AsksuiteCitrusModule>;
 }

package/lib/components/autocomplete/autocomplete.component.d.ts

@@ -47,6 +47,7 @@ export declare class AutocompleteComponent implements AfterViewInit, ControlValu
     placeholder: string;
     emptyMessage: string;
     selectAll: boolean;
+    allOptionsSelectedText: string | null;
     constructor(formBuilder: FormBuilder, overlay: Overlay, viewContainerRef: ViewContainerRef, change: ChangeDetectorRef);
     ngAfterViewInit(): void;
     private handleInputChange;
@@ -75,5 +76,5 @@ export declare class AutocompleteComponent implements AfterViewInit, ControlValu
     registerOnTouched(fn: any): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AutocompleteComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AutocompleteComponent, "ask-autocomplete", never, { "filterFn": { "alias": "filterFn"; "required": false; }; "displayFn": { "alias": "displayFn"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "valueProp": { "alias": "valueProp"; "required": false; }; "options": { "alias": "options"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; }; "selectAll": { "alias": "selectAll"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AutocompleteComponent, "ask-autocomplete", never, { "filterFn": { "alias": "filterFn"; "required": false; }; "displayFn": { "alias": "displayFn"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "valueProp": { "alias": "valueProp"; "required": false; }; "options": { "alias": "options"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; }; "selectAll": { "alias": "selectAll"; "required": false; }; "allOptionsSelectedText": { "alias": "allOptionsSelectedText"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/components/avatar/avatar.component.d.ts

@@ -9,11 +9,12 @@ export declare enum AvatarStatus {
 export declare class AvatarComponent {
     src: string;
     status: AvatarStatus | 'none' | 'online' | 'busy' | 'absent';
+    statusTitle: string;
     background: 'primary' | 'secondary' | 'dark';
     set name(value: string);
     static readonly BOT_ICON: string;
     protected _initials: string;
     get image(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<AvatarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarComponent, "ask-avatar", never, { "src": { "alias": "src"; "required": false; }; "status": { "alias": "status"; "required": false; }; "background": { "alias": "background"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarComponent, "ask-avatar", never, { "src": { "alias": "src"; "required": false; }; "status": { "alias": "status"; "required": false; }; "statusTitle": { "alias": "statusTitle"; "required": false; }; "background": { "alias": "background"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, {}, never, never, false, never>;
 }

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

@@ -0,0 +1,20 @@
+import { ElementRef, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class BadgeDirective implements OnChanges, OnDestroy {
+    private elRef;
+    private document;
+    askBadge: number | null;
+    badgePosition: 'top-right' | 'top-left' | 'bottom-left' | 'bottom-right';
+    badgeCustomClasses?: string;
+    badgeVariant: 'secondary' | 'primary';
+    badgeSize: 'regular' | 'large' | 'small';
+    badgeElement: HTMLElement | null;
+    constructor(elRef: ElementRef, document: Document);
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    private updateBadgeText;
+    private createBadge;
+    private addClasses;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BadgeDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BadgeDirective, "[askBadge]", never, { "askBadge": { "alias": "askBadge"; "required": false; }; "badgePosition": { "alias": "badgePosition"; "required": false; }; "badgeCustomClasses": { "alias": "badgeCustomClasses"; "required": false; }; "badgeVariant": { "alias": "badgeVariant"; "required": false; }; "badgeSize": { "alias": "badgeSize"; "required": false; }; }, {}, never, never, false, never>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asksuite-citrus",
-  "version": "0.5.4",
+  "version": "0.6.1",
   "peerDependencies": {
     "@angular/common": "^16.1.0",
     "@angular/core": "^16.1.0",

package/public-api.d.ts

@@ -13,3 +13,4 @@ export * from './lib/components/date-picker/date-picker-calendar/date-picker-cal
 export * from './lib/components/skeleton/skeleton.component';
 export * from './lib/directives/ask-dropdown.directive';
 export * from './lib/directives/spinner/spinner.directive';
+export * from './lib/directives/badge/badge.directive';

package/styles/animations.scss

@@ -0,0 +1,83 @@
+.scale-in-center {
+  -webkit-animation: scale-in-center 0.3s ease-in-out both;
+  animation: scale-in-center 0.3s ease-in-out both;
+}
+
+/* ----------------------------------------------
+ * Generated by Animista on 2023-9-6 16:3:54
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info.
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation scale-in-center
+ * ----------------------------------------
+ */
+@-webkit-keyframes scale-in-center {
+  0% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+@keyframes scale-in-center {
+  0% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.scale-out-center {
+  -webkit-animation: scale-out-center 0.3s ease-in-out both;
+  animation: scale-out-center 0.3s ease-in-out both;
+}
+
+/* ----------------------------------------------
+ * Generated by Animista on 2023-9-6 16:4:36
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info.
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation scale-out-center
+ * ----------------------------------------
+ */
+@-webkit-keyframes scale-out-center {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+    opacity: 1;
+  }
+}
+@keyframes scale-out-center {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+    opacity: 1;
+  }
+}

package/styles/styles.scss

@@ -68,3 +68,67 @@
 input {
   font-size: $font-md;
 }
+
+/**
+  Badge
+ */
+
+.ask-badge {
+  position: relative;
+
+  > .badge {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--bg-color);
+    color: #fff;
+    font-size: 12px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    border-radius: 50%;
+    box-shadow: 0 2px 6px -1px rgb(0 0 0 / 50%);
+  }
+
+  > .badge.-primary {
+    --bg-color: var(--asksuite-orange);
+  }
+
+  > .badge.-secondary {
+    --bg-color: var(--grey-800);
+  }
+
+  > .badge.-top {
+    top: -10px;
+  }
+  > .badge.-bottom {
+    bottom: -10px;
+  }
+
+  > .badge.-left {
+    left: -10px;
+  }
+
+  > .badge.-right {
+    right: -10px;
+  }
+
+  > .badge.-small {
+    width: 18px;
+    height: 18px;
+    font-size: 10px;
+  }
+  > .badge.-regular {
+    width: 22px;
+    height: 22px;
+    font-size: 11px;
+  }
+
+  > .badge.-large {
+    width: 28px;
+    height: 28px;
+    font-size: 12px;
+  }
+}
+

package/styles/tokens.scss

@@ -7,3 +7,4 @@
 @import './font-weights';
 @import './radii';
 @import './helpers';
+@import './animations';