otimus-library 0.3.1 → 0.3.3

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnDestroy, OnChanges, ElementRef, Renderer2, NgZone, ChangeDetectorRef, SimpleChanges, OnInit, AfterViewInit, AfterContentChecked, EventEmitter, QueryList, AfterContentInit } from '@angular/core';
+import { OnDestroy, OnChanges, ElementRef, Renderer2, NgZone, ChangeDetectorRef, SimpleChanges, OnInit, AfterViewInit, AfterContentInit, EventEmitter, QueryList } from '@angular/core';
 import * as rxjs from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -115,7 +115,7 @@ declare class OcFilterComponent implements AfterViewInit {
     static ɵcmp: i0.ɵɵComponentDeclaration<OcFilterComponent, "oc-filter", never, { "isOpen": { "alias": "isOpen"; "required": false; }; "ocText": { "alias": "ocText"; "required": false; }; "ocActive": { "alias": "ocActive"; "required": false; }; "ocSide": { "alias": "ocSide"; "required": false; }; "ocStyle": { "alias": "ocStyle"; "required": false; }; }, {}, never, ["[row]", "[body]"], true, never>;
 }
 
-declare class OcInputComponent implements AfterViewInit, OnChanges, AfterContentChecked {
+declare class OcInputComponent implements AfterContentInit, AfterViewInit, OnChanges {
     private el;
     private renderer;
     private styleThemeService;
@@ -128,7 +128,9 @@ declare class OcInputComponent implements AfterViewInit, OnChanges, AfterContent
     ocMinWidth?: string;
     ocMaxWidth?: string;
     ocRequired: boolean;
-    ocStyle: OcStyleThemeType;
+    private _ocStyle;
+    set ocStyle(value: OcStyleThemeType);
+    get ocStyle(): OcStyleThemeType;
     inputId: string;
     hasSuffix: boolean;
     hasPrefix: boolean;
@@ -137,8 +139,8 @@ declare class OcInputComponent implements AfterViewInit, OnChanges, AfterContent
     get computedMaxWidth(): string;
     constructor(el: ElementRef, renderer: Renderer2, styleThemeService: StyleThemeService);
     ngOnChanges(changes: SimpleChanges): void;
+    ngAfterContentInit(): void;
     ngAfterViewInit(): void;
-    ngAfterContentChecked(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<OcInputComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<OcInputComponent, "oc-input", never, { "ocError": { "alias": "ocError"; "required": false; }; "ocSize": { "alias": "ocSize"; "required": false; }; "ocPlaceholder": { "alias": "ocPlaceholder"; "required": false; }; "ocWidth": { "alias": "ocWidth"; "required": false; }; "ocMinWidth": { "alias": "ocMinWidth"; "required": false; }; "ocMaxWidth": { "alias": "ocMaxWidth"; "required": false; }; "ocRequired": { "alias": "ocRequired"; "required": false; }; "ocStyle": { "alias": "ocStyle"; "required": false; }; }, {}, ["ocPrefix", "ocSuffix"], ["*", "ocPrefix", "ocSuffix"], true, never>;
 }
@@ -213,7 +215,7 @@ interface OcAutoCompleteType {
     counter?: number;
 }
 
-declare class OcAutocompleteComponent implements AfterViewInit, OnChanges, AfterContentChecked, OnInit {
+declare class OcAutocompleteComponent implements AfterContentInit, AfterViewInit, OnChanges, OnInit {
     private renderer;
     private el;
     private translateService;
@@ -246,7 +248,9 @@ declare class OcAutocompleteComponent implements AfterViewInit, OnChanges, After
     ocTypeForMoreResultsText?: string;
     ocLoading: boolean;
     ocSemanticLike: boolean;
-    ocStyle: OcStyleThemeType;
+    private _ocStyle;
+    set ocStyle(value: OcStyleThemeType);
+    get ocStyle(): OcStyleThemeType;
     ocTabIndex?: number;
     iconSize: 'small' | 'medium' | 'large';
     ocSelectByTyping: boolean;
@@ -270,8 +274,8 @@ declare class OcAutocompleteComponent implements AfterViewInit, OnChanges, After
     get computedMaxWidth(): string;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnInit(): void;
+    ngAfterContentInit(): void;
     ngAfterViewInit(): void;
-    ngAfterContentChecked(): void;
     formatOcValueType(): string | null;
     getTranslation(code: number | string): string;
     loadOptions(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "otimus-library",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "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: 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';