cats-ui-lib 2.2.9 → 2.2.11

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, OnInit, OnChanges, TemplateRef, ChangeDetectorRef, ElementRef, SimpleChanges, OnDestroy, Renderer2, QueryList, ViewContainerRef, ApplicationRef, EnvironmentInjector } from '@angular/core';
+import { OnChanges, EventEmitter, ElementRef, SimpleChanges, OnInit, TemplateRef, ChangeDetectorRef, OnDestroy, Renderer2, QueryList, ViewContainerRef, ApplicationRef, EnvironmentInjector } from '@angular/core';
 import { ControlValueAccessor, Validator, FormControl } from '@angular/forms';
 import { SafeHtml, DomSanitizer } from '@angular/platform-browser';
 import { Observable } from 'rxjs';
@@ -41,10 +41,33 @@ declare class SearchConfig {
     serachValue: string;
     placeholder?: string;
 }
+interface InputDropdownOption {
+    id?: string | number;
+    name?: string;
+    icon?: string;
+    [key: string]: any;
+}
+interface InputDropdownConfig {
+    options: InputDropdownOption[];
+    selected?: InputDropdownOption | string | number;
+    idField?: string;
+    textField?: string;
+    iconField?: string;
+    disabledField?: string;
+    placeholder?: string;
+}
 declare class InputConfig {
     type: 'text' | 'email' | 'password' | 'number';
     placeholder?: string;
     label?: string;
+    showDropdown?: boolean;
+    dropdownPosition?: 'leading' | 'trailing';
+    dropdownOptions?: InputDropdownOption[];
+    dropdownSelected?: InputDropdownOption | string | number;
+    leadingDropdown?: InputDropdownConfig;
+    trailingDropdown?: InputDropdownConfig;
+    errorMessage?: string;
+    showErrorMessage?: boolean;
 }
 declare class AutoCompleteSingleSelectConfig {
     idField: string;
@@ -108,21 +131,29 @@ interface DialogConfig {
     showHeader?: boolean;
 }
 
-declare class InputComponent implements ControlValueAccessor, Validator {
+declare class InputComponent implements ControlValueAccessor, Validator, OnChanges {
+    private el;
     inputConfig: InputConfig;
+    selectedValue?: InputDropdownOption | string | number;
     onKeyDown: EventEmitter<{
         value: string;
     } & KeyboardEvent>;
     onKeyUp: EventEmitter<{
         value: string;
     } & KeyboardEvent>;
+    onDropdownSelection: EventEmitter<InputDropdownOption>;
     value: string;
     disabled: boolean;
     touched: boolean;
     control: FormControl<any> | null;
     showPassword: boolean;
+    openDropdown: 'leading' | 'trailing' | null;
+    selectedLeadingOption: InputDropdownOption | null;
+    selectedTrailingOption: InputDropdownOption | null;
     private onChange;
     private onTouched;
+    constructor(el: ElementRef);
+    ngOnChanges(changes: SimpleChanges): void;
     /**
      * @description Method to when value changes
      * @author Shiva Kant
@@ -161,8 +192,25 @@ declare class InputComponent implements ControlValueAccessor, Validator {
      * @author Shiva Kant
      */
     togglePassword(): void;
+    toggleDropdown(position: 'leading' | 'trailing', event: MouseEvent): void;
+    selectDropdownOption(position: 'leading' | 'trailing', option: InputDropdownOption, event: MouseEvent): void;
+    getDropdownText(option: InputDropdownOption | null, config?: InputDropdownConfig): string;
+    getDropdownIcon(option: InputDropdownOption | null, config?: InputDropdownConfig): string;
+    isDropdownSelected(position: 'leading' | 'trailing', option: InputDropdownOption): boolean;
+    isOptionDisabled(option: InputDropdownOption, config?: InputDropdownConfig): boolean;
+    closeDropdown(event: MouseEvent): void;
+    private syncDropdownSelections;
+    private resolveSelectedOption;
+    getDropdownConfig(position: 'leading' | 'trailing'): InputDropdownConfig | undefined;
+    private getIdField;
+    private getTextField;
+    private getIconField;
+    private hasDropdownConfig;
+    getOptionId(option: InputDropdownOption | null, config?: InputDropdownConfig): any;
+    private emitValueChange;
+    private getDropdownSelectedValue;
     static ɵfac: i0.ɵɵFactoryDeclaration<InputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "cats-ui-input", never, { "inputConfig": { "alias": "inputConfig"; "required": false; }; }, { "onKeyDown": "onKeyDown"; "onKeyUp": "onKeyUp"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "cats-ui-input", never, { "inputConfig": { "alias": "inputConfig"; "required": false; }; "selectedValue": { "alias": "selectedValue"; "required": false; }; }, { "onKeyDown": "onKeyDown"; "onKeyUp": "onKeyUp"; "onDropdownSelection": "onDropdownSelection"; }, never, never, true, never>;
 }
 
 declare const SINGLE_SELECT_CONTROL_VALUE_ACCESSOR: any;
@@ -1136,7 +1184,7 @@ declare class DialogBoxService {
 }
 
 interface SidebarConfig {
-    sidebarType?: 'sectional' | string;
+    sidebarType?: 'sectional' | 'default' | string;
     switchOrganiser?: boolean;
 }
 interface SidebarAttribute {
@@ -1208,4 +1256,4 @@ declare class SidebarComponent {
 }
 
 export { AccordionComponent, AccordionItemComponent, AutoCompleteMultiSelectComponent, AutoCompleteMultiSelectConfig, AutoCompleteSingleSelectComponent, AutoCompleteSingleSelectConfig, CatsUiService, CatsUiTooltipDirective, CheckBoxConfig, CheckBoxSubtask, CheckboxButtonComponent, CustomDatePickerComponent, DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALUE_VALIDATOR, DialogBoxComponent, DialogBoxService, FileUploadComponent, HeaderComponent, InputComponent, InputConfig, MULTI_SELECT_CONTROL_VALUE_ACCESSOR, MULTI_SELECT_CONTROL_VALUE_VALIDATOR, MultiSelectComponent, MultiSelectConfig, OutsideClickDirective, RadioButtonComponent, SINGLE_SELECT_CONTROL_VALUE_ACCESSOR, SINGLE_SELECT_CONTROL_VALUE_VALIDATOR, SearchBoxComponent, SearchConfig, SidebarComponent, SingleSelectComponent, SingleSelectConfig, TabContentComponent, TabsetComponent, TimestampFilterComponent, ToggleConfig, ToogleButtonComponent, WizardComponent, WizardService, WizardStepDirective };
-export type { CalenderView, DatePickerConfig, DatePickerMode, DateRange, DateTimeResult, DialogConfig, FilterType, HeaderConfig, RadioButtonConfig, SidebarAttribute, SidebarConfig, SidebarFeature, SidebarModule, TabConfig, TabItem, TimeFilterConfig, TimeFilterOption, TimeFilterOutput, TimeFilterValue };
+export type { CalenderView, DatePickerConfig, DatePickerMode, DateRange, DateTimeResult, DialogConfig, FilterType, HeaderConfig, InputDropdownConfig, InputDropdownOption, RadioButtonConfig, SidebarAttribute, SidebarConfig, SidebarFeature, SidebarModule, TabConfig, TabItem, TimeFilterConfig, TimeFilterOption, TimeFilterOutput, TimeFilterValue };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cats-ui-lib",
-  "version": "2.2.9",
+  "version": "2.2.11",
   "peerDependencies": {
     "@angular/core": ">=18 <22",
     "@angular/common": ">=18 <22"

package/styles/_utilities.scss

@@ -37,6 +37,7 @@ button.cats-btn {
   &.small {
     height: rem(32px);
     padding: rem(5px) rem(15px);
+    border-radius: rem(4px);
     img.btn-icon {
       @include box(rem(16px), rem(16px));
     }
@@ -192,6 +193,124 @@ button.cats-btn {
   }
 }
 
+// ------------------Badge & Tags Styles--------------------
+
+.cats-badge-wrapper {
+  @include box(fit-content, auto);
+  max-width: rem(250px);
+  @include border();
+  @include fontStyle(var(--fs-14), rem(20px));
+  color: var(--text-body-primary);
+  padding: rem(3px) rem(7px);
+  transition: all ease 0.15s;
+
+  &.green {
+    border-color: var(--border-semantics-green);
+    background-color: var(--surface-contextual-green);
+    color: var(--semantics-success-strong);
+  }
+  &.yellow {
+    border-color: var(--border-semantics-yellow);
+    background-color: var(--surface-contextual-yellow);
+    color: var(--semantics-warning-strong);
+  }
+  &.red {
+    border-color: var(--border-decorative-amber-brown);
+    background-color: var(--surface-contextual-red);
+    color: var(--semantics-error-strong);
+  }
+  &.blue {
+    border-color: var(--text-link-muted);
+    background-color: var(--blue-100);
+    color: var(--text-link-hover);
+  }
+  &.strong-grey {
+    border-color: var(--border-core-default);
+    background-color: var(--surface-background-default);
+    color: var(--text-body-primary);
+  }
+  &.orange {
+    border-color: var(--border-decorative-orange);
+    background-color: var(--surface-decorative-orange);
+    color: var(--accent-orange-strong);
+  }
+  &.purple {
+    border-color: var(--border-decorative-purple);
+    background-color: var(--surface-decorative-purple);
+    color: var(--accent-purple-strong);
+  }
+  &.teal {
+    border-color: var(--border-decorative-teal);
+    background-color: var(--surface-decorative-teal);
+    color: var(--accent-teal-strong);
+  }
+  &.amber-brown {
+    border-color: var(--border-decorative-amber-brown);
+    background-color: var(--surface-decorative-amber-brown);
+    color: var(--accent-amber-brown-strong);
+  }
+  &.sage-green {
+    border-color: var(--border-decorative-sage-green);
+    background-color: var(--surface-decorative-sage-green);
+    color: var(--accent-sage-green-dark);
+  }
+  &.muted {
+    border-color: var(--border-core-muted);
+    background-color: var(--surface-background-default);
+    color: var(--text-body-muted);
+  }
+  
+  &.small {
+    @include fontStyle(var(--fs-12), rem(18px));
+    padding: rem(2px) rem(7px);
+  }
+
+  &.cats-rounded {
+    border-radius: rem(36px);
+  }
+
+  &.filled {
+    border-color: transparent;
+    color: var(--text-body-inversed);
+    background-color: var(--text-heading-secondary);
+
+    &.green {
+      background-color: var(--semantics-success-default);
+    }
+    &.yellow {
+      background-color: var(--semantics-warning-strong);
+    }
+    &.red {
+      background-color: var(--semantics-error-strong);
+    }
+    &.blue {
+      background-color: var(--surface-action-default);
+    }
+    &.strong-grey {
+      background-color: var(--text-body-muted);
+    }
+    &.orange {
+      background-color: var(--accent-orange-strong);
+    }
+    &.purple {
+      background-color: var(--accent-purple-strong);
+    }
+    &.teal {
+      background-color: var(--accent-teal-strong);
+    }
+    &.amber-brown {
+      background-color: var(--accent-amber-brown-strong);
+    }
+    &.sage-green {
+      background-color: var(--accent-sage-green-dark);
+    }
+    &.muted {
+      background-color: var(--surface-background-default);
+      color: var(--text-body-muted);
+    }
+  }
+}
+
 /* Display Styles */
 .display-large {
   @include fontStyle(rem(56px), rem(80px), 500);