otimus-library 0.2.88 → 0.2.90

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

@@ -43,6 +43,7 @@ export declare class OcAutocompleteComponent implements AfterViewInit, OnChanges
     ocDisabled: boolean;
     ocType: 'counterSelect' | 'default';
     ocHasDeleteButton?: boolean;
+    ocEnableKeyboard: boolean;
     ocValueChange: EventEmitter<string>;
     ocChange: EventEmitter<string | null>;
     ocCounterSelectChange: EventEmitter<OcAutoCompleteType[]>;
@@ -53,6 +54,7 @@ export declare class OcAutocompleteComponent implements AfterViewInit, OnChanges
     isOptionsShown: boolean;
     filteredData: OcAutoCompleteType[];
     selectedValue: OcAutoCompleteType;
+    selectedIndex: number;
     get computedWidth(): string | null;
     get computedMinWidth(): string;
     get computedMaxWidth(): string;
@@ -73,6 +75,7 @@ export declare class OcAutocompleteComponent implements AfterViewInit, OnChanges
     protected incrementCounter(option: OcAutoCompleteType): void;
     protected decrementCounter(option: OcAutoCompleteType): void;
     emitCounterSelectChange(): void;
+    protected onKeyDown(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<OcAutocompleteComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<OcAutocompleteComponent, "oc-autocomplete", never, { "ocData": { "alias": "ocData"; "required": false; }; "ocPlaceholder": { "alias": "ocPlaceholder"; "required": false; }; "ocError": { "alias": "ocError"; "required": false; }; "ocSize": { "alias": "ocSize"; "required": false; }; "ocValue": { "alias": "ocValue"; "required": false; }; "ocClearOnChange": { "alias": "ocClearOnChange"; "required": false; }; "ocWidth": { "alias": "ocWidth"; "required": false; }; "ocMinWidth": { "alias": "ocMinWidth"; "required": false; }; "ocMaxWidth": { "alias": "ocMaxWidth"; "required": false; }; "ocOptionsMaxHeight": { "alias": "ocOptionsMaxHeight"; "required": false; }; "ocOptionsWidth": { "alias": "ocOptionsWidth"; "required": false; }; "ocRequired": { "alias": "ocRequired"; "required": false; }; "ocMaxResults": { "alias": "ocMaxResults"; "required": false; }; "ocAllowNotListedValue": { "alias": "ocAllowNotListedValue"; "required": false; }; "ocNoAvailableOptionsText": { "alias": "ocNoAvailableOptionsText"; "required": false; }; "ocTypeForMoreResultsText": { "alias": "ocTypeForMoreResultsText"; "required": false; }; "ocLoading": { "alias": "ocLoading"; "required": false; }; "ocSemanticLike": { "alias": "ocSemanticLike"; "required": false; }; "ocStyle": { "alias": "ocStyle"; "required": false; }; "ocTabIndex": { "alias": "ocTabIndex"; "required": false; }; "iconSize": { "alias": "iconSize"; "required": false; }; "ocSelectByTyping": { "alias": "ocSelectByTyping"; "required": false; }; "ocDisabled": { "alias": "ocDisabled"; "required": false; }; "ocType": { "alias": "ocType"; "required": false; }; "ocHasDeleteButton": { "alias": "ocHasDeleteButton"; "required": false; }; }, { "ocValueChange": "ocValueChange"; "ocChange": "ocChange"; "ocCounterSelectChange": "ocCounterSelectChange"; "ocOptionNotFound": "ocOptionNotFound"; "ocClick": "ocClick"; }, ["ocPrefix", "ocSuffix"], ["*", "ocPrefix", "ocSuffix"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OcAutocompleteComponent, "oc-autocomplete", never, { "ocData": { "alias": "ocData"; "required": false; }; "ocPlaceholder": { "alias": "ocPlaceholder"; "required": false; }; "ocError": { "alias": "ocError"; "required": false; }; "ocSize": { "alias": "ocSize"; "required": false; }; "ocValue": { "alias": "ocValue"; "required": false; }; "ocClearOnChange": { "alias": "ocClearOnChange"; "required": false; }; "ocWidth": { "alias": "ocWidth"; "required": false; }; "ocMinWidth": { "alias": "ocMinWidth"; "required": false; }; "ocMaxWidth": { "alias": "ocMaxWidth"; "required": false; }; "ocOptionsMaxHeight": { "alias": "ocOptionsMaxHeight"; "required": false; }; "ocOptionsWidth": { "alias": "ocOptionsWidth"; "required": false; }; "ocRequired": { "alias": "ocRequired"; "required": false; }; "ocMaxResults": { "alias": "ocMaxResults"; "required": false; }; "ocAllowNotListedValue": { "alias": "ocAllowNotListedValue"; "required": false; }; "ocNoAvailableOptionsText": { "alias": "ocNoAvailableOptionsText"; "required": false; }; "ocTypeForMoreResultsText": { "alias": "ocTypeForMoreResultsText"; "required": false; }; "ocLoading": { "alias": "ocLoading"; "required": false; }; "ocSemanticLike": { "alias": "ocSemanticLike"; "required": false; }; "ocStyle": { "alias": "ocStyle"; "required": false; }; "ocTabIndex": { "alias": "ocTabIndex"; "required": false; }; "iconSize": { "alias": "iconSize"; "required": false; }; "ocSelectByTyping": { "alias": "ocSelectByTyping"; "required": false; }; "ocDisabled": { "alias": "ocDisabled"; "required": false; }; "ocType": { "alias": "ocType"; "required": false; }; "ocHasDeleteButton": { "alias": "ocHasDeleteButton"; "required": false; }; "ocEnableKeyboard": { "alias": "ocEnableKeyboard"; "required": false; }; }, { "ocValueChange": "ocValueChange"; "ocChange": "ocChange"; "ocCounterSelectChange": "ocCounterSelectChange"; "ocOptionNotFound": "ocOptionNotFound"; "ocClick": "ocClick"; }, ["ocPrefix", "ocSuffix"], ["*", "ocPrefix", "ocSuffix"], true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "otimus-library",
-  "version": "0.2.88",
+  "version": "0.2.90",
   "license": "MIT",
   "peerDependencies": {
     "@angular/cdk": "^18.2.14",

package/styles/colors.scss

@@ -1,71 +1,71 @@
-@use './variables.scss';
-
-.oc.color {
-  // Purple Colors
-  &.p-1 {
-    color: variables.$color-brand-p-1;
-  }
-  &.p-2 {
-    color: variables.$color-brand-dp-1;
-  }
-  &.p-3 {
-    color: variables.$color-brand-p-3;
-  }
-  &.p-4 {
-    color: variables.$color-brand-p-4;
-  }
-  &.p-5 {
-    color: variables.$color-brand-p-5;
-  }
-  &.p-6 {
-    color: variables.$color-brand-p-6;
-  }
-
-  // Dark Purple Colors
-  &.dp-1 {
-    color: variables.$color-brand-dp-1;
-  }
-  &.dp-2 {
-    color: variables.$color-brand-dp-2;
-  }
-  &.dp-3 {
-    color: variables.$color-brand-dp-3;
-  }
-  &.dp-4 {
-    color: variables.$color-brand-dp-4;
-  }
-  &.dp-5 {
-    color: variables.$color-brand-dp-5;
-  }
-
-  // Green Colors
-  &.g-1 {
-    color: variables.$color-brand-g-1;
-  }
-  &.g-2 {
-    color: variables.$color-brand-g-2;
-  }
-  &.g-3 {
-    color: variables.$color-brand-g-3;
-  }
-  &.g-4 {
-    color: variables.$color-brand-g-4;
-  }
-  &.g-5 {
-    color: variables.$color-brand-g-5;
-  }
-  &.g-6 {
-    color: variables.$color-brand-g-6;
-  }
-
-  // Status Colors
-  &.error {
-    color: variables.$color-error;
-  }
-  &.success {
-    color: variables.$color-success;
-  }
-  &.error {
-    color: variables.$color-error;
-  }
+@use './variables.scss';
+
+.oc.color {
+  // Purple Colors
+  &.p-1 {
+    color: variables.$color-brand-p-1;
+  }
+  &.p-2 {
+    color: variables.$color-brand-dp-1;
+  }
+  &.p-3 {
+    color: variables.$color-brand-p-3;
+  }
+  &.p-4 {
+    color: variables.$color-brand-p-4;
+  }
+  &.p-5 {
+    color: variables.$color-brand-p-5;
+  }
+  &.p-6 {
+    color: variables.$color-brand-p-6;
+  }
+
+  // Dark Purple Colors
+  &.dp-1 {
+    color: variables.$color-brand-dp-1;
+  }
+  &.dp-2 {
+    color: variables.$color-brand-dp-2;
+  }
+  &.dp-3 {
+    color: variables.$color-brand-dp-3;
+  }
+  &.dp-4 {
+    color: variables.$color-brand-dp-4;
+  }
+  &.dp-5 {
+    color: variables.$color-brand-dp-5;
+  }
+
+  // Green Colors
+  &.g-1 {
+    color: variables.$color-brand-g-1;
+  }
+  &.g-2 {
+    color: variables.$color-brand-g-2;
+  }
+  &.g-3 {
+    color: variables.$color-brand-g-3;
+  }
+  &.g-4 {
+    color: variables.$color-brand-g-4;
+  }
+  &.g-5 {
+    color: variables.$color-brand-g-5;
+  }
+  &.g-6 {
+    color: variables.$color-brand-g-6;
+  }
+
+  // Status Colors
+  &.error {
+    color: variables.$color-error;
+  }
+  &.success {
+    color: variables.$color-success;
+  }
+  &.error {
+    color: variables.$color-error;
+  }
 }

package/styles/components/buttons/buttons.scss

@@ -1,226 +1,226 @@
-@use '../../variables.scss';
-
-.oc.button {
-  height: 3rem;
-
-  padding: 0 2rem;
-
-  background-color: variables.$color-gray-4;
-  color: variables.$color-gray-1;
-
-  border-radius: 0.5rem;
-  border: none;
-
-  font-weight: 500;
-  font-size: 1rem;
-  transition: 0.15s ease;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.5rem;
-
-  cursor: pointer;
-
-  span{
-    pointer-events: none;
-  }
-
-  &.disabled{
-    opacity: .4;
-    pointer-events: none;
-    cursor: not-allowed;
-  }
-
-  &.align-left{
-    padding-left: 1rem;
-  }
-
-  &.align-right{
-    padding-right: 1rem;
-  }
-
-  &:active{
-    transform: scale(0.99);
-    filter: brightness(0.97);
-  }
-
-  &.white {
-    background-color: variables.$color-white;
-    color: variables.$color-gray-3;
-  }
-
-  &.no-bg{
-    color: variables.$color-gray-3;
-    background-color: transparent;
-
-    &:hover{
-      background-color: variables.$color-gray-6;
-    }
-  }
-
-  &.error{
-    background-color: variables.$color-error;
-    color: variables.$color-gray-6;
-  }
-
-  //Purple Tones
-  &.p-1{
-    background-color: variables.$color-brand-p-1;
-    color: variables.$color-gray-6;
-  }
-  
-  &.p-2{
-    background-color: variables.$color-brand-dp-1;
-    color: variables.$color-gray-6;
-  }
-
-  &.p-3{
-    background-color: variables.$color-brand-p-4;
-    color: variables.$color-gray-6;
-  }
-
-  &.p-4{
-    background-color: variables.$color-brand-p-6;
-    color: variables.$color-gray-6;
-  }
-  
-  //Green Tones
-  &.g-1{
-    background-color: variables.$color-brand-g-1;
-    color: variables.$color-brand-dp-1;
-  }
-
-  &.g-2{
-    background-color: variables.$color-brand-g-2;
-    color: variables.$color-brand-dp-1;
-  }
-
-  &.g-3{
-    background-color: variables.$color-brand-g-3;
-    color: variables.$color-brand-dp-1;
-  }
-
-  &.g-4{
-    background-color: variables.$color-brand-g-6;
-    color: variables.$color-brand-dp-1;
-  }
-  
-  &.gray-1 {
-    background-color: variables.$color-gray-6;
-    color: variables.$color-gray-3
-  }
-
-  &.gray-2{
-    background-color: variables.$color-gray-4;
-    color: variables.$color-gray-1
-  }
-
-  &.gray-3{
-    background-color: variables.$color-gray-3;
-    color: variables.$color-gray-6;
-  }
-
-  &.gray-4{
-    background-color: variables.$color-gray-2;
-    color: variables.$color-gray-6;
-  }
-
-  &.gray-5{
-    background-color: variables.$color-gray-1;
-    color: variables.$color-gray-6;
-  }
-  
-  // SIZES
-  &.tiny {
-    height: 2rem !important;
-  }
-
-  &.small{
-    height: 2.5rem !important;
-  }
-
-  &.large{
-    height: 3.5rem !important;
-  }
-
-  //ICON
-  &.icon{
-    height: 3rem;
-    width: 3rem;
-    padding: 0;
-
-    gap: 0 ;
-
-    &.tiny{
-      width: 2rem !important;
-    }
-
-    &.small{
-      width: 2.5rem !important;
-      padding: 0;
-    }
-
-    &.large{
-      width: 3.5rem !important;
-      padding: 0;
-    
-      // font-size: 2rem !important;
-    }
-  }
-
-  &.outlined{
-    background-color: transparent;
-    border: 2px solid;
-
-    //Purple Tones
-    &.p-1{
-      color: variables.$color-brand-p-1;
-    }
-    
-    &.p-2{
-      color: variables.$color-brand-dp-1;
-    }
-  
-    &.p-3{
-      color: variables.$color-brand-p-4;
-    }
-  
-    &.p-4{
-      color: variables.$color-brand-p-6;
-    }
-    
-    //Green Tones
-    &.g-1{
-      color: variables.$color-brand-g-1;
-    }
-  
-    &.g-2{
-      color: variables.$color-brand-g-2;
-    }
-  
-    &.g-3{
-      color: variables.$color-brand-g-3;
-    }
-  
-    &.g-4{
-      color: variables.$color-brand-g-6;
-    }
-     
-    //Gray
-
-    &.gray-1{
-      color: variables.$color-gray-3;
-    }
-
-    &.gray-2{
-      color: variables.$color-gray-2;
-    }
-
-    &.gray-3{
-      color: variables.$color-gray-1;
-    }
-  }
-}
-
+@use '../../variables.scss';
+
+.oc.button {
+  height: 3rem;
+
+  padding: 0 2rem;
+
+  background-color: variables.$color-gray-4;
+  color: variables.$color-gray-1;
+
+  border-radius: 0.5rem;
+  border: none;
+
+  font-weight: 500;
+  font-size: 1rem;
+  transition: 0.15s ease;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+
+  cursor: pointer;
+
+  span{
+    pointer-events: none;
+  }
+
+  &.disabled{
+    opacity: .4;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  &.align-left{
+    padding-left: 1rem;
+  }
+
+  &.align-right{
+    padding-right: 1rem;
+  }
+
+  &:active{
+    transform: scale(0.99);
+    filter: brightness(0.97);
+  }
+
+  &.white {
+    background-color: variables.$color-white;
+    color: variables.$color-gray-3;
+  }
+
+  &.no-bg{
+    color: variables.$color-gray-3;
+    background-color: transparent;
+
+    &:hover{
+      background-color: variables.$color-gray-6;
+    }
+  }
+
+  &.error{
+    background-color: variables.$color-error;
+    color: variables.$color-gray-6;
+  }
+
+  //Purple Tones
+  &.p-1{
+    background-color: variables.$color-brand-p-1;
+    color: variables.$color-gray-6;
+  }
+  
+  &.p-2{
+    background-color: variables.$color-brand-dp-1;
+    color: variables.$color-gray-6;
+  }
+
+  &.p-3{
+    background-color: variables.$color-brand-p-4;
+    color: variables.$color-gray-6;
+  }
+
+  &.p-4{
+    background-color: variables.$color-brand-p-6;
+    color: variables.$color-gray-6;
+  }
+  
+  //Green Tones
+  &.g-1{
+    background-color: variables.$color-brand-g-1;
+    color: variables.$color-brand-dp-1;
+  }
+
+  &.g-2{
+    background-color: variables.$color-brand-g-2;
+    color: variables.$color-brand-dp-1;
+  }
+
+  &.g-3{
+    background-color: variables.$color-brand-g-3;
+    color: variables.$color-brand-dp-1;
+  }
+
+  &.g-4{
+    background-color: variables.$color-brand-g-6;
+    color: variables.$color-brand-dp-1;
+  }
+  
+  &.gray-1 {
+    background-color: variables.$color-gray-6;
+    color: variables.$color-gray-3
+  }
+
+  &.gray-2{
+    background-color: variables.$color-gray-4;
+    color: variables.$color-gray-1
+  }
+
+  &.gray-3{
+    background-color: variables.$color-gray-3;
+    color: variables.$color-gray-6;
+  }
+
+  &.gray-4{
+    background-color: variables.$color-gray-2;
+    color: variables.$color-gray-6;
+  }
+
+  &.gray-5{
+    background-color: variables.$color-gray-1;
+    color: variables.$color-gray-6;
+  }
+  
+  // SIZES
+  &.tiny {
+    height: 2rem !important;
+  }
+
+  &.small{
+    height: 2.5rem !important;
+  }
+
+  &.large{
+    height: 3.5rem !important;
+  }
+
+  //ICON
+  &.icon{
+    height: 3rem;
+    width: 3rem;
+    padding: 0;
+
+    gap: 0 ;
+
+    &.tiny{
+      width: 2rem !important;
+    }
+
+    &.small{
+      width: 2.5rem !important;
+      padding: 0;
+    }
+
+    &.large{
+      width: 3.5rem !important;
+      padding: 0;
+    
+      // font-size: 2rem !important;
+    }
+  }
+
+  &.outlined{
+    background-color: transparent;
+    border: 2px solid;
+
+    //Purple Tones
+    &.p-1{
+      color: variables.$color-brand-p-1;
+    }
+    
+    &.p-2{
+      color: variables.$color-brand-dp-1;
+    }
+  
+    &.p-3{
+      color: variables.$color-brand-p-4;
+    }
+  
+    &.p-4{
+      color: variables.$color-brand-p-6;
+    }
+    
+    //Green Tones
+    &.g-1{
+      color: variables.$color-brand-g-1;
+    }
+  
+    &.g-2{
+      color: variables.$color-brand-g-2;
+    }
+  
+    &.g-3{
+      color: variables.$color-brand-g-3;
+    }
+  
+    &.g-4{
+      color: variables.$color-brand-g-6;
+    }
+     
+    //Gray
+
+    &.gray-1{
+      color: variables.$color-gray-3;
+    }
+
+    &.gray-2{
+      color: variables.$color-gray-2;
+    }
+
+    &.gray-3{
+      color: variables.$color-gray-1;
+    }
+  }
+}
+
 @import './buttons.shui.scss';