otimus-library 0.3.47 → 0.3.49

package/index.d.ts

@@ -129,7 +129,7 @@ declare class OcBadgeComponent implements OnInit {
 
 declare class OcCardComponent {
     readonly ocSelected: i0.InputSignal<boolean>;
-    readonly ocColor: i0.InputSignal<"green" | "red" | "yellow" | "default">;
+    readonly ocColor: i0.InputSignal<"default" | "green" | "red" | "yellow">;
     readonly ocClickable: i0.InputSignal<boolean>;
     ocClick: EventEmitter<void>;
     protected onClick(): void;
@@ -249,6 +249,7 @@ declare class OcModalFooterComponent {
 interface OcAutoCompleteType {
     name: string;
     value?: any;
+    id?: any;
     icon?: MaterialSymbol;
     iconSize?: string;
     counter?: number;
@@ -281,6 +282,11 @@ declare class OcAutocompleteComponent implements AfterContentInit, AfterViewInit
     input: ElementRef;
     options: ElementRef;
     outerDiv: ElementRef<HTMLDivElement>;
+    /**
+     * Helper to get the identifier value from a data item.
+     * Supports both 'value' and 'id' properties for backwards compatibility.
+     */
+    private getItemValue;
     listOptionsElements: QueryList<ElementRef<HTMLLIElement>>;
     ocPrefix: any;
     ocSuffix: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "otimus-library",
-  "version": "0.3.47",
+  "version": "0.3.49",
   "license": "MIT",
   "peerDependencies": {
     "@angular/cdk": "^20.2.5",

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: 14px;
-  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: 14px;
+  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';