asksuite-citrus 0.5.3 → 0.6.0

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

@@ -11,15 +11,28 @@ export declare class AutocompleteComponent implements AfterViewInit, ControlValu
     list: ElementRef | undefined;
     wrapper: ElementRef | undefined;
     overlayContent: TemplateRef<any> | undefined;
+    set listViewport(value: ElementRef);
     protected inputControl: FormControl<string | null>;
     protected filteredOptions: any[];
     protected paginatedFilteredOptions: any[];
     protected selectedOption?: any;
+    protected selection: any[];
     protected closed: boolean;
     protected selectionForm: FormGroup;
     protected chipsCollapsed: boolean;
     protected checkAllValue: boolean;
     protected disabled: boolean;
+    protected showChips: boolean;
+    protected showAllSelectionBtn: boolean;
+    protected showPlaceholder: boolean;
+    protected showExpandedSelectionActions: boolean;
+    protected showSelectAllCheckbox: boolean;
+    protected chipsContainerClasses: {
+        "-two": boolean;
+        "-three": boolean;
+        "-four": boolean;
+        "-many": boolean;
+    };
     private _overlayRef;
     private _portal;
     private _destroy;
@@ -34,22 +47,28 @@ 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;
+    private listenSelectionChange;
     private handleSelectionChange;
+    private updateChipsContainerClasses;
     handleOptionSelected(item: any): void;
     handleAutocompleteClick(): void;
+    protected handleChipsListActionClick(): void;
     showOptions(): void;
     private getOverlayConfig;
     hideOptions(): void;
     handleClick(event: MouseEvent): void;
     get selectedOptions(): any[];
-    handleSelectAll(event: Event): void;
+    handleSelectAll(checked: boolean): void;
     selectAllOptions(selected: boolean): void;
     handleChipAction(option: any): void;
     display(option: any): string | undefined;
-    getMoreItems(scrollIndex: number): void;
+    getMoreItems(): void;
+    private updateFormControls;
+    protected updateValidation(): void;
     writeValue(obj: any[] | any): void;
     onChange: (_: any) => void;
     registerOnChange(fn: any): void;
@@ -57,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/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.3",
+  "version": "0.6.0",
   "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';