@sapphire-ion/framework 1.0.15 → 1.0.17

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

@@ -1,7 +1,13 @@
-import { EventEmitter, InputSignal, Signal } from '@angular/core';
+import { EventEmitter, InputSignal, Signal, WritableSignal } from '@angular/core';
+import { NavController } from '@ionic/angular';
 import { Menu } from './menu';
+import { Router } from '@angular/router';
+import { GenericService } from '../../services/generics.service';
 import * as i0 from "@angular/core";
 export declare class DrawerComponent {
+    router: Router;
+    private navController;
+    private genericService;
     TranslationModule: any;
     loading: boolean;
     lstMenu: InputSignal<Menu[]>;
@@ -10,12 +16,16 @@ export declare class DrawerComponent {
     colapsedChange: EventEmitter<boolean>;
     title: string;
     useTranslation: boolean;
-    constructor();
+    constructor(router: Router, navController: NavController, genericService: GenericService);
     CurrentGroupActive: Menu;
     ToggleCollapsed(): void;
     _enterColapsed: boolean;
     onMouseEnter(): void;
     onMouseLeave(): void;
+    HandleNav(item: Menu | any, event: MouseEvent): void;
+    SetTitle(item: Menu): void;
+    search: WritableSignal<string>;
+    lstMenuFiltered: Signal<Menu[]>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DrawerComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DrawerComponent, "drawer", never, { "loading": { "alias": "loading"; "required": false; }; "lstMenu": { "alias": "lstMenu"; "required": false; "isSignal": true; }; "colapsed": { "alias": "colapsed"; "required": false; }; "title": { "alias": "title"; "required": false; }; "useTranslation": { "alias": "useTranslation"; "required": false; }; }, { "colapsedChange": "colapsedChange"; }, never, ["[slot=logo]", "[slot=drawer]"], true, never>;
 }

package/lib/components/main-content/main-content.component.d.ts

@@ -10,10 +10,18 @@ export declare class MainContentComponent implements OnInit {
     drawerComponent: DrawerComponent;
     constructor(authService: AuthService);
     Token: any;
-    ngOnInit(): void;
+    ngOnInit(): Promise<void>;
+    Theme: Theme;
+    SetTheme(theme: Theme): Promise<void>;
     get fullScreen(): boolean;
     FullScreenConteiner: any;
     FullScreen(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MainContentComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MainContentComponent, "main-content", never, { "backdrop": { "alias": "backdrop"; "required": false; }; "shadowColor": { "alias": "shadowColor"; "required": false; }; "colapsed": { "alias": "colapsed"; "required": false; }; "drawerComponent": { "alias": "drawerComponent"; "required": false; }; }, {}, never, ["[slot=start]", "[slot=end]", "[slot=user-popover]", "*"], true, never>;
 }
+declare enum Theme {
+    System = 0,
+    Light = 1,
+    Dark = 2
+}
+export {};

package/lib/components/popover/sion-popover/sion-popover.component.d.ts

@@ -1,9 +1,10 @@
-import { ElementRef, EventEmitter, OnDestroy, QueryList, TemplateRef, ViewContainerRef } from '@angular/core';
+import { ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, QueryList, TemplateRef, ViewContainerRef } from '@angular/core';
 import { ComputePositionReturn, Placement } from '@floating-ui/dom';
 import * as i0 from "@angular/core";
 type Fill = 'solid' | 'outline' | 'blur' | 'clear';
-export declare class SIonPopoverComponent implements OnDestroy {
+export declare class SIonPopoverComponent implements OnDestroy, OnInit {
     private viewContainerRef;
+    private ngZone;
     fill: Fill;
     arrow: boolean;
     flip: boolean;
@@ -15,7 +16,7 @@ export declare class SIonPopoverComponent implements OnDestroy {
     onWillDismiss: EventEmitter<void>;
     onDidDismiss: EventEmitter<void>;
     anchor: HTMLElement | undefined;
-    constructor(viewContainerRef: ViewContainerRef);
+    constructor(viewContainerRef: ViewContainerRef, ngZone: NgZone);
     popoverTemplate: TemplateRef<any>;
     contentContainer: ElementRef<HTMLDivElement>;
     arrowElement: ElementRef<HTMLElement>;
@@ -27,7 +28,9 @@ export declare class SIonPopoverComponent implements OnDestroy {
     present(event?: Event): Promise<void>;
     GetComputePositionReturn(refEl: HTMLElement, popEl: HTMLElement, arrowEl: HTMLElement): Promise<ComputePositionReturn>;
     private CreatePopoverInBody;
-    HandleClicks(event: MouseEvent): void;
+    onClick(event: MouseEvent): void;
+    documentClickListener: (event: MouseEvent) => void;
+    ngOnInit(): void;
     dismiss(): Promise<void>;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SIonPopoverComponent, never>;

package/lib/components/stepper/step/step.component.d.ts

@@ -9,7 +9,7 @@ export declare class StepComponent implements OnInit {
     get index(): number;
     get fill(): boolean;
     get selected(): boolean;
-    get _fill(): 1 | 0;
+    get _fill(): 0 | 1;
     static ɵfac: i0.ɵɵFactoryDeclaration<StepComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<StepComponent, "step", never, { "label": { "alias": "label"; "required": false; }; }, {}, never, ["ion-icon, ion-text"], false, never>;
 }

package/package.json

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

package/themes/compiled-styles.scss

@@ -1555,6 +1555,10 @@ video {
   align-items: center;
 }
 
+.\!justify-start {
+  justify-content: flex-start !important;
+}
+
 .justify-start {
   justify-content: flex-start;
 }
@@ -1828,6 +1832,10 @@ video {
   border-right-width: 2px;
 }
 
+.border-t {
+  border-top-width: 1px;
+}
+
 .border-solid {
   border-style: solid;
 }
@@ -1976,6 +1984,11 @@ video {
   padding-right: 0px !important;
 }
 
+.\!py-2 {
+  padding-top: 0.5rem !important;
+  padding-bottom: 0.5rem !important;
+}
+
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -2035,6 +2048,10 @@ video {
   padding-bottom: 0px !important;
 }
 
+.\!pl-8 {
+  padding-left: 2rem !important;
+}
+
 .\!pr-0 {
   padding-right: 0px !important;
 }
@@ -2051,6 +2068,10 @@ video {
   padding-left: 0.75rem;
 }
 
+.pl-4 {
+  padding-left: 1rem;
+}
+
 .pl-8 {
   padding-left: 2rem;
 }
@@ -2273,6 +2294,11 @@ video {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.drop-shadow {
+  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .grayscale {
   --tw-grayscale: grayscale(100%);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);

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

@@ -1,21 +1,61 @@
 
-.bg-active{
-  --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{
-  --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;
+  @apply rounded-xl cursor-pointer p-1.5 flex items-center justify-start shrink-0 overflow-hidden;
   transition: --color-primary, --step-1-opacity, --step-2-opacity .2s ease-in-out;
-  --inset: var(--color-primary) 0px 1.75px 1px 0px inset;
+  --inset: var(--color-primary) 0px 1.75px 2px 0px inset;
   box-shadow: var(--inset);
+  .content{
+    @apply flex items-center justify-start gap-2;
+  }
+
+  
+  &.bg-active{
+    &::after{
+      content: '';
+      position: absolute;
+      top: 50%;
+      right: 0;
+      width: .375rem;
+      height: 75%;
+      transform: translateY(-50%);
+      border-radius: inherit;
+      background-color: color-mix(in srgb, var(--ion-color-primary) 70%, transparent);
+      opacity: 1 !important;
+
+      filter: drop-shadow(color-mix(in srgb, var(--ion-color-primary) 70%, transparent) 0px 0px 3px)
+    }
+    &::before{
+      content: "";
+      position: absolute;
+      top: 50%;
+      right: -2.3rem;
+      width: 5rem;
+      height: 7rem;
+      transform: translateY(-50%);
+      border-radius: inherit;
+      opacity: .5 !important;
+      background: radial-gradient(color-mix(in srgb, var(--ion-color-primary) 70%, transparent) 0%, transparent 66%);
+    }
+  }
+  &.bg-inactive{
+    --color-primary: var(--ion-color-step-250);
+    --step-1-opacity: .5;
+    --step-2-opacity: .4;
+    --step-3-opacity: .8;
+    position: relative;
+    &::after{
+      content: '';
+      opacity: 0;
+      transition: opacity .2s ease-in-out;
+      will-change: opacity;
+    }
+    &::before{
+      content: '';
+      opacity: 0;
+      transition: opacity .2s ease-in-out;
+      will-change: opacity;
+    }
+  }
 }
 
 .header{

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

@@ -60,10 +60,66 @@
 .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;
+  --inset: var(--color-primary) 0px 1.75px 2px 0px inset;
   box-shadow: var(--inset);
 }
 .toggle:hover{
   --color-primary: var(--ion-color-step-500) !important;
   transition: --color-primary .2s ease-in-out;
-} 
+} 
+
+.search-button{
+  --inset2: var(--ion-color-medium) 0px 0px 5px -1px inset;
+    box-shadow: var(--inset2);
+}
+
+.menu-search{
+  @apply relative overflow-hidden cursor-pointer;
+  &.bg-active{
+    &::after{
+      content: '';
+      position: absolute;
+      top: 50%;
+      right: 0;
+      width: .375rem;
+      height: 75%;
+      transform: translateY(-50%);
+      border-radius: 1rem;
+      background-color: color-mix(in srgb, var(--ion-color-primary) 70%, transparent);
+      opacity: 1 !important;
+
+      filter: drop-shadow(color-mix(in srgb, var(--ion-color-primary) 70%, transparent) 0px 0px 3px)
+    }
+    &::before{
+      content: "";
+      position: absolute;
+      top: 50%;
+      right: -2.3rem;
+      width: 5rem;
+      height: 7rem;
+      transform: translateY(-50%);
+      border-radius: 1rem;
+      opacity: .5 !important;
+      background: radial-gradient(color-mix(in srgb, var(--ion-color-primary) 70%, transparent) 0%, transparent 66%);
+    }
+  }
+  &.bg-inactive{
+    --color-primary: var(--ion-color-step-250);
+    --step-1-opacity: .5;
+    --step-2-opacity: .4;
+    --step-3-opacity: .8;
+    position: relative;
+    &::after{
+      content: '';
+      opacity: 0;
+      transition: opacity .2s ease-in-out;
+      will-change: opacity;
+    }
+    &::before{
+      content: '';
+      opacity: 0;
+      transition: opacity .2s ease-in-out;
+      will-change: opacity;
+    }
+  }
+}

package/themes/components/inputs/inputs.scss

@@ -35,7 +35,7 @@
   --color: var(--ion-color-dark);
   --input-color: var(--input-background, var(--ion-color-step-250));
   --shadow: 0 3px 4px -1px rgb(0 0 0 / 0.1);
-  --inset-shadow: var(--input-color) 0px 1.75px 1px 0px inset;
+  --inset-shadow: var(--input-color) 0px 1.75px 2px 0px inset;
   --focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);
 
   box-shadow: var(--inset-shadow), var(--shadow);

package/themes/styles/core.styles.scss

@@ -463,4 +463,4 @@ text-tooltip{
     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));
-} 
+}