@sapphire-ion/framework 1.0.12 → 1.0.15

package/lib/classes/environment.d.ts

@@ -2,6 +2,7 @@ import { Credentials } from "./credentials";
 import { ViewFiltros } from "./filters/view-filtros";
 import { PageOption } from "./page-option";
 export declare class Environment {
+    useFluentIcons: boolean;
     production: boolean;
     applicationName: string;
     apiUrl: string | null;
@@ -9,5 +10,5 @@ export declare class Environment {
     defaultPageLimits: PageOption[];
     get defaultPageLimit(): number | null;
     get defaultPaginationObject(): ViewFiltros;
-    constructor(production: boolean, applicationName: string, apiUrl: string, defaultCredentials?: Credentials, defaultPageLimits?: PageOption[]);
+    constructor(production: boolean, applicationName: string, apiUrl: string, defaultCredentials?: Credentials, defaultPageLimits?: PageOption[], useFluentIcons?: boolean);
 }

package/lib/components/default/default-view/default-view.component.d.ts

@@ -6,6 +6,7 @@ import { HttpServiceAtivo } from '../../../services/web/http.ativo.service';
 import { HttpService } from '../../../services/web/http.service';
 import { GenericService } from './../../../services/generics.service';
 import { View } from './view';
+import { InputType } from '../../inputs/input-type';
 import * as i0 from "@angular/core";
 /** Componente View Padão */
 export declare class DefaultViewComponent<T extends HttpService | HttpServiceAtivo> extends View<T> implements OnInit {
@@ -20,6 +21,7 @@ export declare class DefaultViewComponent<T extends HttpService | HttpServiceAti
     noNew: boolean;
     /** Remove os breadcrumbs da listagem */
     noBreadcrumbs: boolean;
+    InputType: typeof InputType;
     constructor(fb: FormBuilder, elementRef: ElementRef, activatedRoute: ActivatedRoute, genericService: GenericService, navController: NavController);
     static ɵfac: i0.ɵɵFactoryDeclaration<DefaultViewComponent<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DefaultViewComponent<any>, "default-view", never, { "noBack": { "alias": "noBack"; "required": false; }; "noNew": { "alias": "noNew"; "required": false; }; "noBreadcrumbs": { "alias": "noBreadcrumbs"; "required": false; }; }, {}, never, never, false, never>;

package/lib/components/drawer/drawer-group/drawer-group.component.d.ts

@@ -14,7 +14,7 @@ export declare class DrawerGroupComponent implements OnInit {
     useTranslation: boolean;
     constructor(router: Router, navController: NavController, genericService: GenericService);
     ngOnInit(): void;
-    HandleNav(item: Menu | any): void;
+    HandleNav(item: Menu | any, event: MouseEvent): void;
     SetTitle(item: Menu): void;
     lstIonAcordionGroup: QueryList<IonAccordion>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DrawerGroupComponent, never>;

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

@@ -1,9 +1,7 @@
 import { EventEmitter, InputSignal, Signal } from '@angular/core';
 import { Menu } from './menu';
-import { GenericService } from '../../services/generics.service';
 import * as i0 from "@angular/core";
 export declare class DrawerComponent {
-    private genericService;
     TranslationModule: any;
     loading: boolean;
     lstMenu: InputSignal<Menu[]>;
@@ -12,7 +10,7 @@ export declare class DrawerComponent {
     colapsedChange: EventEmitter<boolean>;
     title: string;
     useTranslation: boolean;
-    constructor(genericService: GenericService);
+    constructor();
     CurrentGroupActive: Menu;
     ToggleCollapsed(): void;
     _enterColapsed: boolean;

package/lib/components/inputs/input-configuration.d.ts

@@ -5,4 +5,5 @@ import { InputStringConfiguration } from "./input-string/input-string.configurat
 import { InputBoolConfiguration } from "./input-bool/input-bool.configuration";
 import { InputDateConfiguration } from "./input-date/input-date.configuration";
 import { InputFileConfiguration } from "./input-file/input-file.configuration";
-export type InputConfiguration = InputFileConfiguration | InputSelectConfiguration | InputBoolConfiguration | InputDateConfiguration | InputDecimalConfiguration | InputNumberConfiguration | InputCurrencyConfiguration | InputCpfCnpjConfiguration | InputStringConfiguration | any;
+import { InputTelefoneCelularConfiguration } from "./input-telefone/input-telefone.configuration";
+export type InputConfiguration = InputBoolConfiguration | InputCpfCnpjConfiguration | InputDateConfiguration | InputDecimalConfiguration | InputCurrencyConfiguration | InputNumberConfiguration | InputFileConfiguration | InputSelectConfiguration | InputStringConfiguration | InputTelefoneCelularConfiguration | any;

package/lib/components/inputs/input-icon/fluenticons.d.ts

@@ -0,0 +1 @@
+export declare const lstFluenticons: string[];

package/lib/components/inputs/input-icon/input-icon.component.d.ts

@@ -0,0 +1,20 @@
+import { ElementRef } from '@angular/core';
+import { CustomInput } from '../custom-input';
+import { EnvironmentService } from '../../../services/environment.service';
+import { InputSelectConfiguration } from '../input-select/input.select.configuration';
+import * as i0 from "@angular/core";
+export declare class InputIconComponent extends CustomInput<string> {
+    private environmentService;
+    lstIcons: {
+        name: string;
+    }[];
+    input: ElementRef<HTMLInputElement>;
+    inputContainer: ElementRef<HTMLDivElement>;
+    focus(event: MouseEvent): void;
+    config: InputSelectConfiguration;
+    constructor(environmentService: EnvironmentService);
+    writeValue(obj: string): void | Promise<void>;
+    SetValue(obj: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InputIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputIconComponent, "input-icon", never, {}, {}, never, never, false, never>;
+}

package/lib/components/inputs/input-icon/ionicons.d.ts

@@ -0,0 +1 @@
+export declare const lstIconsIonicons: string[];

package/lib/components/inputs/input-type.d.ts

@@ -1,16 +1,22 @@
 export declare enum InputType {
     Bool = "Bool",
-    Currency = "Currency",
+    Cep = "Cep",
+    Color = "Color",
+    CpfCnpj = "CpfCnpj",
+    Cpf = "Cpf",
+    Cnpj = "Cnpj",
     Date = "Date",
     DateTime = "DateTime",
     Time = "Time",
     Decimal = "Decimal",
+    Currency = "Currency",
     Number = "Number",
     File = "File",
-    String = "String",
-    TextArea = "TextArea",
+    Icon = "Icon",
     Select = "Select",
-    Cpf = "Cpf",
-    Cpnj = "Cnpj",
-    CpfCnpj = "CpfCnpj"
+    String = "String",
+    TelefoneCelular = "TelefoneCelular",
+    Telefone = "Telefone",
+    Celular = "Celular",
+    TextArea = "TextArea"
 }

package/lib/components/inputs/inputs.module.d.ts

@@ -6,24 +6,25 @@ import * as i4 from "./input-cpf-cnpj/input-cpf-cnpj.component";
 import * as i5 from "./input-date/input-date.component";
 import * as i6 from "./input-decimal/input-decimal.component";
 import * as i7 from "./input-file/input-file.component";
-import * as i8 from "./input-select/input-select.component";
-import * as i9 from "./input-select/directives/sion-label-template.directive";
-import * as i10 from "./input-select/directives/sion-option-template.directive";
-import * as i11 from "./input-select/directives/sion-placeholder-template.directive";
-import * as i12 from "./input-string/input-string.component";
-import * as i13 from "./input-telefone/input-telefone.component";
-import * as i14 from "./input-textarea/input-textarea.component";
-import * as i15 from "./input-file/download-button/download-button.component";
-import * as i16 from "@ionic/angular";
-import * as i17 from "@angular/common";
-import * as i18 from "@angular/forms";
-import * as i19 from "../image/image.component";
-import * as i20 from "@maskito/angular";
-import * as i21 from "../popover/sion-popover.module";
-import * as i22 from "../loading/loading.component";
-import * as i23 from "../../directives/ng-var.directive";
+import * as i8 from "./input-icon/input-icon.component";
+import * as i9 from "./input-select/input-select.component";
+import * as i10 from "./input-select/directives/sion-label-template.directive";
+import * as i11 from "./input-select/directives/sion-option-template.directive";
+import * as i12 from "./input-select/directives/sion-placeholder-template.directive";
+import * as i13 from "./input-string/input-string.component";
+import * as i14 from "./input-telefone/input-telefone.component";
+import * as i15 from "./input-textarea/input-textarea.component";
+import * as i16 from "./input-file/download-button/download-button.component";
+import * as i17 from "@ionic/angular";
+import * as i18 from "@angular/common";
+import * as i19 from "@angular/forms";
+import * as i20 from "../image/image.component";
+import * as i21 from "@maskito/angular";
+import * as i22 from "../popover/sion-popover.module";
+import * as i23 from "../loading/loading.component";
+import * as i24 from "../../directives/ng-var.directive";
 export declare class InputsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<InputsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<InputsModule, [typeof i1.InputBoolComponent, typeof i2.InputCepComponent, typeof i3.InputColorComponent, typeof i4.InputCpfCnpjComponent, typeof i5.InputDateComponent, typeof i6.InputDecimalComponent, typeof i7.InputFileComponent, typeof i8.InputSelectComponent, typeof i9.SIonLabelTemplateDirective, typeof i10.SIonOptionTemplateDirective, typeof i11.SIonPlaceholderTemplateDirective, typeof i12.InputStringComponent, typeof i13.InputTelefoneComponent, typeof i14.InputTextareaComponent, typeof i15.DownloadButtonComponent], [typeof i16.IonicModule, typeof i17.CommonModule, typeof i18.ReactiveFormsModule, typeof i18.FormsModule, typeof i19.ImageComponent, typeof i20.MaskitoDirective, typeof i21.SIonPopoverModule, typeof i22.LoadingComponent, typeof i23.NgVarDirective], [typeof i1.InputBoolComponent, typeof i2.InputCepComponent, typeof i3.InputColorComponent, typeof i4.InputCpfCnpjComponent, typeof i5.InputDateComponent, typeof i6.InputDecimalComponent, typeof i7.InputFileComponent, typeof i8.InputSelectComponent, typeof i9.SIonLabelTemplateDirective, typeof i10.SIonOptionTemplateDirective, typeof i11.SIonPlaceholderTemplateDirective, typeof i12.InputStringComponent, typeof i13.InputTelefoneComponent, typeof i14.InputTextareaComponent, typeof i15.DownloadButtonComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<InputsModule, [typeof i1.InputBoolComponent, typeof i2.InputCepComponent, typeof i3.InputColorComponent, typeof i4.InputCpfCnpjComponent, typeof i5.InputDateComponent, typeof i6.InputDecimalComponent, typeof i7.InputFileComponent, typeof i8.InputIconComponent, typeof i9.InputSelectComponent, typeof i10.SIonLabelTemplateDirective, typeof i11.SIonOptionTemplateDirective, typeof i12.SIonPlaceholderTemplateDirective, typeof i13.InputStringComponent, typeof i14.InputTelefoneComponent, typeof i15.InputTextareaComponent, typeof i16.DownloadButtonComponent], [typeof i17.IonicModule, typeof i18.CommonModule, typeof i19.ReactiveFormsModule, typeof i19.FormsModule, typeof i20.ImageComponent, typeof i21.MaskitoDirective, typeof i22.SIonPopoverModule, typeof i23.LoadingComponent, typeof i24.NgVarDirective], [typeof i1.InputBoolComponent, typeof i2.InputCepComponent, typeof i3.InputColorComponent, typeof i4.InputCpfCnpjComponent, typeof i5.InputDateComponent, typeof i6.InputDecimalComponent, typeof i7.InputFileComponent, typeof i8.InputIconComponent, typeof i9.InputSelectComponent, typeof i10.SIonLabelTemplateDirective, typeof i11.SIonOptionTemplateDirective, typeof i12.SIonPlaceholderTemplateDirective, typeof i13.InputStringComponent, typeof i14.InputTelefoneComponent, typeof i15.InputTextareaComponent, typeof i16.DownloadButtonComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<InputsModule>;
 }

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

@@ -22,6 +22,7 @@ export declare class DefaultLoginComponent implements OnInit {
     loading: boolean;
     submitted: boolean;
     OnLogin: EventEmitter<any>;
+    loginContainer: HTMLElement;
     Login($event?: KeyboardEvent): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DefaultLoginComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DefaultLoginComponent, "login", never, {}, { "OnLogin": "OnLogin"; }, never, ["[slot=logo]", "[slot=end]"], true, never>;

package/lib/index.d.ts

@@ -65,6 +65,7 @@ export * from '../lib/components/inputs/input-decimal/input-decimal.configuratio
 export * from '../lib/components/inputs/input-file/download-button/download-button.component';
 export * from '../lib/components/inputs/input-file/input-file.component';
 export * from '../lib/components/inputs/input-file/input-file.configuration';
+export * from '../lib/components/inputs/input-icon/input-icon.component';
 export * from '../lib/components/inputs/input-select/directives/sion-label-template.directive';
 export * from '../lib/components/inputs/input-select/directives/sion-option-template.directive';
 export * from '../lib/components/inputs/input-select/directives/sion-placeholder-template.directive';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sapphire-ion/framework",
-  "version": "1.0.12",
+  "version": "1.0.15",
   "private": false,
   "peerDependencies": {
     "@angular/common": "^18.2.8",

package/themes/compiled-styles.scss

@@ -1951,6 +1951,10 @@ video {
   padding: 0.25rem;
 }
 
+.p-1\.5 {
+  padding: 0.375rem;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
@@ -2031,6 +2035,10 @@ video {
   padding-bottom: 0px !important;
 }
 
+.\!pr-0 {
+  padding-right: 0px !important;
+}
+
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -2051,6 +2059,10 @@ video {
   padding-right: 2.5rem;
 }
 
+.pr-2 {
+  padding-right: 0.5rem;
+}
+
 .pr-3 {
   padding-right: 0.75rem;
 }
@@ -2333,6 +2345,12 @@ video {
   margin-right: 0px;
 }
 
+@supports selector(::-webkit-scrollbar-thumb) {
+  .supports-\[selector\(\:\:-webkit-scrollbar-thumb\)\]\:\!w-\[3\.375rem\] {
+    width: 3.375rem !important;
+  }
+}
+
 @media (min-width: 640px) {
   .sm\:flex-row {
     flex-direction: row;

package/themes/components/drawer/drawer-group/drawer-group.component.scss

@@ -1,22 +1,25 @@
 
 .bg-active{
-  --background: color-mix(in srgb, var(--ion-color-secondary) 70%, transparent 30%) !important;
+  --color-primary: var(--ion-color-primary) !important;
+  --step-1-opacity: 0.7 !important;
+  --step-2-opacity: 0.3 !important;
+  // --background: color-mix(in srgb, var(--ion-color-secondary) 70%, transparent 30%) !important;
 }
 .bg-inactive{
-  @apply cursor-pointer;
-  --border-radius: 1rem;
+  --color-primary: var(--ion-color-step-250);
+  --step-1-opacity: .5;
+  --step-2-opacity: .4;
+  --step-3-opacity: .8;
+}
+.menu{
+  @apply rounded-xl cursor-pointer p-1.5 flex items-center justify-start gap-2;
+  transition: --color-primary, --step-1-opacity, --step-2-opacity .2s ease-in-out;
+  --inset: var(--color-primary) 0px 1.75px 1px 0px inset;
+  box-shadow: var(--inset);
+}
 
-  &::part(native){
-      @apply transition-all;
-  }
-  --background: color-mix(in srgb, var(--ion-color-light-shade) 50%, transparent 50%);
-  &:hover{
-      --background: color-mix(in srgb, var(--ion-color-light-shade) 70%, transparent 30%);
-  }
-  @media (prefers-color-scheme: dark) {
-      --background: color-mix(in srgb, var(--ion-color-light-tint) 70%, transparent 30%);
-      &:hover{
-          --background: var(--ion-color-light-tint);
-      }
-  }
+.header{
+  --color-primary: var(--ion-color-primary) !important;
+  --step-1-opacity: 0.7 !important;
+  --step-2-opacity: 0.3 !important;
 }

package/themes/components/drawer/drawer.component.scss

@@ -1,46 +1,69 @@
-#drawer-button{
-    &:hover{
-        background-color: color-mix(in srgb, var(--ion-color-dark-tint) 50%, transparent 50%);
-        ion-icon{
-            color: var(--ion-color-light);
-        }
-    }
-    @apply rounded-full;
-}
+// #drawer-button{
+//     &:hover{
+//         background-color: color-mix(in srgb, var(--ion-color-dark-tint) 50%, transparent 50%);
+//         ion-icon{
+//             color: var(--ion-color-light);
+//         }
+//     }
+//     @apply rounded-full;
+// }
 
-#menu-conteiner{
-    @apply overflow-y-auto overflow-x-hidden size-full;
-}
+// #menu-conteiner{
+//     @apply overflow-y-auto overflow-x-hidden size-full;
+// }
 
-#group-menu{
-    --min-height: 3rem;
-    --min-width: 3rem;
-    @apply transition-all;
-    &:hover{
-        #tooltip{
-            @apply translate-x-0 opacity-100 w-fit #{!important};
-        }
-    }
-}
+// #group-menu{
+//     --min-height: 3rem;
+//     --min-width: 3rem;
+//     @apply transition-all;
+//     &:hover{
+//         #tooltip{
+//             @apply translate-x-0 opacity-100 w-fit #{!important};
+//         }
+//     }
+// }
+
+// .bg-active{
+//     --background: color-mix(in srgb, var(--ion-color-secondary) 70%, transparent 30%) !important;
+// }
+// .bg-inactive{
+//     @apply cursor-pointer;
+//     --border-radius: 1rem;
+
+//     &::part(native){
+//         @apply transition-all;
+//     }
+//     --background: color-mix(in srgb, var(--ion-color-light-shade) 50%, transparent 50%) ;
+//     &:hover{
+//         --background: color-mix(in srgb, var(--ion-color-light-shade) 70%, transparent 30%) ;
+//     }
+//     @media (prefers-color-scheme: dark) {
+//         --background: color-mix(in srgb, var(--ion-color-light-tint) 70%, transparent 30%);
+//         &:hover{
+//             --background: var(--ion-color-light-tint);
+//         }
+//     }
+// }
 
 .bg-active{
-    --background: color-mix(in srgb, var(--ion-color-secondary) 70%, transparent 30%) !important;
+  --color-primary: var(--ion-color-primary) !important;
+  --step-1-opacity: 0.7 !important;
+  --step-2-opacity: 0.3 !important;
+  // --background: color-mix(in srgb, var(--ion-color-secondary) 70%, transparent 30%) !important;
 }
 .bg-inactive{
-    @apply cursor-pointer;
-    --border-radius: 1rem;
-
-    &::part(native){
-        @apply transition-all;
-    }
-    --background: color-mix(in srgb, var(--ion-color-light-shade) 50%, transparent 50%) ;
-    &:hover{
-        --background: color-mix(in srgb, var(--ion-color-light-shade) 70%, transparent 30%) ;
-    }
-    @media (prefers-color-scheme: dark) {
-        --background: color-mix(in srgb, var(--ion-color-light-tint) 70%, transparent 30%);
-        &:hover{
-            --background: var(--ion-color-light-tint);
-        }
-    }
-}
+  --color-primary: var(--ion-color-step-250);
+  --step-1-opacity: .5;
+  --step-2-opacity: .4;
+  --step-3-opacity: .8;
+}
+.menu{
+  @apply rounded-xl cursor-pointer p-2 flex items-center justify-center gap-2;
+  transition: --color-primary, --step-1-opacity, --step-2-opacity .2s ease-in-out;
+  --inset: var(--color-primary) 0px 1.75px 1px 0px inset;
+  box-shadow: var(--inset);
+}
+.toggle:hover{
+  --color-primary: var(--ion-color-step-500) !important;
+  transition: --color-primary .2s ease-in-out;
+} 

package/themes/styles/core.styles.scss

@@ -20,19 +20,25 @@ input-date{
   --ion-color-translucid: color-mix(in srgb, var(--ion-color-medium) 20%, transparent 80%);
 }
 
-/* width */
+// /* width */
 ::-webkit-scrollbar {
-  height: 5px;
+  height: 7.5px;
   width: 5px;
   margin: 2px;
 }
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-  background: var(--ion-color-medium); 
+  background: var(--ion-color-medium-shade); 
   border-radius: 10px;
 }
 
+/* Track */
+::-webkit-scrollbar-track {
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--ion-color-medium) 25%, transparent)
+}
+
 input-bool, input-color,  input-date,  input-date-time,  input-time,  input-decimal,  input-number,  input-currency, 
 input-file,  input-select,  input-string,  input-textarea {
 	@apply block;
@@ -406,4 +412,55 @@ tooltip{
 
 text-tooltip{
   @apply block relative w-full;
-}
+}
+
+
+
+@mixin property($variable: variable, $syntax: "<color>", $inherits: true, $initial-value: #FF){
+  @property --#{$variable} {
+    syntax: $syntax;
+    initial-value: $initial-value;
+    inherits: $inherits;
+  }
+}
+
+@include property(
+  $variable: color-primary, 
+  $syntax: "<color>", 
+  $inherits: false, 
+  $initial-value: transparent
+);
+@include property(
+  $variable: color-primary, 
+  $syntax: "<color>", 
+  $inherits: false, 
+  $initial-value: transparent
+);
+@include property(
+  $variable: step-1-opacity, 
+  $syntax: "<number>", 
+  $inherits: false, 
+  $initial-value: 0
+);
+@include property(
+  $variable: step-2-opacity, 
+  $syntax: "<number>", 
+  $inherits: false, 
+  $initial-value: 0
+);
+@include property(
+  $variable: step-3-opacity, 
+  $syntax: "<number>", 
+  $inherits: false, 
+  $initial-value: 0
+);
+
+.gradient-background{
+  // --color-primary  : var(--color-primary  , var(--ion-color-primary));
+  // --color-secondary: var(--color-secondary, var(--ion-color-light));
+
+  background: radial-gradient(ellipse at 0px top, 
+    hsl(from var(--color-primary  , var(--ion-color-primary)) h s l / var(--step-1-opacity, 0.7)), 
+    hsl(from var(--color-primary  , var(--ion-color-primary)) h s l / var(--step-2-opacity, 0.3))), 
+    hsl(from var(--color-secondary, var(--ion-color-light))   h s l / var(--step-3-opacity, 0.2));
+}