aril 0.0.76 → 0.0.77

package/theme/styles/layout/_sidebar_slim_plus.scss

@@ -22,11 +22,11 @@
 			}
 
 			.layout-sidebar {
-				width: 10rem;
+				width: 132px;
 				overflow: visible;
 				z-index: 999;
-				padding-left: 1rem;
-				padding-right: 1rem;
+				padding-left: 11px;
+				padding-right: 11px;
 
 				.layout-menu-container {
 					overflow: auto;
@@ -38,10 +38,13 @@
 			}
 
 			.layout-content-wrapper {
-				margin-left: 10rem;
+				margin-left: 132px;
 			}
 
 			.layout-menu {
+				display: flex;
+				gap: 2rem;
+
 				ul {
 					display: none;
 				}
@@ -62,28 +65,28 @@
 						flex-direction: column;
 						align-items: center;
 						justify-content: center;
-						border-radius: var(--border-radius);
+						gap: 14px;
+						border-radius: 12px;
 						text-align: center;
 						cursor: pointer;
 						outline: none;
 						transition: background-color var(--transition-duration);
 						width: auto;
-						height: auto;
-						margin: 0 auto 1rem auto;
-						padding: 1rem 0.25rem;
+						height: 100%;
+						padding: 14px 5px;
 
 						.layout-submenu-toggler {
 							display: none;
 						}
 
 						.layout-menuitem-icon {
-							font-size: 2.5rem;
+							font-size: 32px;
 							color: var(--menuitem-icon-color);
 						}
 
 						.layout-menuitem-text {
-							font-size: 0.875rem;
-							font-weight: 500;
+							font-size: 16px;
+							font-weight: 600;
 							display: block;
 							margin-top: 0.25rem;
 							color: var(--primary-color);

package/theme/styles/layout/_sidebar_vertical.scss

@@ -40,6 +40,9 @@
 		list-style-type: none;
 
 		.layout-root-menuitem {
+			width: 109px;
+			height: 109px;
+
 			> .layout-menuitem-root-text {
 				font-size: 0.857rem;
 				text-transform: uppercase;

package/theme/styles/layout/_topbar.scss

@@ -2,12 +2,12 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	height: 5rem;
+	height: 70px;
 	background: #fff;
-	padding: 1rem;
+	padding: 12px 30px;
 	position: sticky;
 	top: 0;
-	z-index: 2103;
+	z-index: 1101;
 
 	.topbar-start {
 		display: flex;
@@ -50,7 +50,11 @@
 
 		li {
 			button {
+				width: 32px;
+				height: 32px;
+				font-size: 14px !important;
 				background-color: var(--accent-500);
+				justify-content: center;
 			}
 
 			&.topbar-profile {
@@ -85,21 +89,16 @@
 		}
 	}
 }
-.bell-topbar {
-	color: var(--primary-color);
-	cursor: pointer;
-	font-weight: bold;
-	border: none;
-	border-radius: 50%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
 
-.vertical-line {
-	border-left: 1.5px solid var(--muted-foreground);
-	width: 30px;
-	height: 0px;
-	transform: rotate(90deg);
-	margin-left: 10px;
+@layer primeng {
+	.topbar-menu {
+		.pi {
+			font-size: 14px !important;
+
+			&.pi-bell {
+				cursor: pointer;
+				font-size: 18px !important;
+			}
+		}
+	}
 }

package/theme/styles/theme/base/components/panel/_panel.scss

@@ -49,6 +49,7 @@
 	.p-panel-icons {
 		display: flex;
 		align-items: center;
+		color: var(--muted-foreground);
 	}
 
 	.p-panel-icons-end {

package/theme/styles/theme/dark/_variables.scss

@@ -359,7 +359,7 @@ $panelHeaderBg: $shade800 !default;
 $panelHeaderTextColor: $shade000 !default;
 $panelHeaderFontWeight: 700 !default;
 $panelHeaderPadding: 1.25rem !default;
-$panelToggleableHeaderPadding: 0.25rem 1.25rem !default;
+$panelToggleableHeaderPadding: 0.5rem 1.25rem !default;
 
 $panelHeaderHoverBg: $hoverBg !default;
 $panelHeaderHoverBorderColor: $shade600 !default;

package/theme/styles/theme/light/_variables.scss

@@ -358,7 +358,7 @@ $panelHeaderBg: $shade100 !default;
 $panelHeaderTextColor: $shade800 !default;
 $panelHeaderFontWeight: 700 !default;
 $panelHeaderPadding: 1.25rem !default;
-$panelToggleableHeaderPadding: 0.25rem 1.25rem !default;
+$panelToggleableHeaderPadding: 0.5rem 1.25rem !default;
 
 $panelHeaderHoverBg: $shade200 !default;
 $panelHeaderHoverBorderColor: $shade300 !default;
@@ -669,7 +669,7 @@ $menuBorder: 1px solid $shade300 !default;
 $menuTextColor: $shade700 !default;
 $menuitemPadding: 0.75rem 1.25rem !default;
 $menuitemBorderRadius: 0 !default;
-$menuitemTextColor: $shade700 !default;
+$menuitemTextColor: $shade600 !default;
 $menuitemIconColor: $shade600 !default;
 $menuitemTextHoverColor: $shade700 !default;
 $menuitemIconHoverColor: $shade600 !default;
@@ -921,4 +921,5 @@ $imagePreviewActionIconBorderRadius: 50% !default;
 	--highlight-text-color: #{$highlightTextColor};
 	color-scheme: light;
 	--transition-duration: #{$transitionDuration};
+	--primary-foreground: #fefefe;
 }

package/ui/calendar/src/calendar.component.d.ts

@@ -18,6 +18,8 @@ export declare class CalendarComponent extends BaseInputComponent implements OnI
     minDate: import("@angular/core").InputSignal<number | undefined, number | undefined>;
     maxDate: import("@angular/core").InputSignal<number | undefined, number | undefined>;
     inputStyle: import("@angular/core").InputSignal<object | undefined, object | undefined>;
+    inputStyleClass: import("@angular/core").InputSignal<string | undefined, string | undefined>;
+    autoZIndex: import("@angular/core").InputSignal<boolean, boolean>;
     inline: import("@angular/core").InputSignal<boolean, boolean>;
     showIcon: import("@angular/core").InputSignal<boolean, boolean>;
     showTime: import("@angular/core").InputSignal<boolean, boolean>;
@@ -36,6 +38,6 @@ export declare class CalendarComponent extends BaseInputComponent implements OnI
     _dateFormat: import("@angular/core").Signal<"MM/yy" | "yy" | "dd/MM/yy">;
     setLocale(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CalendarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarComponent, "aril-calendar[ngModel], aril-calendar[formControl], aril-calendar[formControlName]", never, { "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "inputStyle": { "alias": "inputStyle"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; "showTime": { "alias": "showTime"; "required": false; "isSignal": true; }; "showWeek": { "alias": "showWeek"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "disabledDates": { "alias": "disabledDates"; "required": false; "isSignal": true; }; "numberOfMonthToShow": { "alias": "numberOfMonthToShow"; "required": false; "isSignal": true; }; "view": { "alias": "view"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "showOnFocus": { "alias": "showOnFocus"; "required": false; "isSignal": true; }; "timeOnly": { "alias": "timeOnly"; "required": false; "isSignal": true; }; }, {}, never, ["[header]", "[footer]"], true, [{ directive: typeof i1.ValueAccessorDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarComponent, "aril-calendar[ngModel], aril-calendar[formControl], aril-calendar[formControlName]", never, { "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "inputStyle": { "alias": "inputStyle"; "required": false; "isSignal": true; }; "inputStyleClass": { "alias": "inputStyleClass"; "required": false; "isSignal": true; }; "autoZIndex": { "alias": "autoZIndex"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; "showTime": { "alias": "showTime"; "required": false; "isSignal": true; }; "showWeek": { "alias": "showWeek"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "disabledDates": { "alias": "disabledDates"; "required": false; "isSignal": true; }; "numberOfMonthToShow": { "alias": "numberOfMonthToShow"; "required": false; "isSignal": true; }; "view": { "alias": "view"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "showOnFocus": { "alias": "showOnFocus"; "required": false; "isSignal": true; }; "timeOnly": { "alias": "timeOnly"; "required": false; "isSignal": true; }; }, {}, never, ["[header]", "[footer]"], true, [{ directive: typeof i1.ValueAccessorDirective; inputs: {}; outputs: {}; }]>;
 }
 export {};

package/ui/panel/src/panel.component.d.ts

@@ -2,9 +2,11 @@ import * as i0 from "@angular/core";
 export declare class PanelComponent {
     toggleable: import("@angular/core").InputSignal<boolean, boolean>;
     canFullScreen: import("@angular/core").InputSignal<boolean, boolean>;
+    collapsed: import("@angular/core").InputSignal<boolean, boolean>;
+    styleClass: import("@angular/core").InputSignal<string | undefined, string | undefined>;
     showFooter: import("@angular/core").InputSignal<boolean, boolean>;
     isFullScreen: boolean;
     toggleFullScreen(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PanelComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PanelComponent, "aril-panel", never, { "toggleable": { "alias": "toggleable"; "required": false; "isSignal": true; }; "canFullScreen": { "alias": "canFullScreen"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; }, {}, never, ["[header]", "[tools]", "[body]", "[footer]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PanelComponent, "aril-panel", never, { "toggleable": { "alias": "toggleable"; "required": false; "isSignal": true; }; "canFullScreen": { "alias": "canFullScreen"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "styleClass": { "alias": "styleClass"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; }, {}, never, ["[header]", "[tools]", "[body]", "[footer]"], true, never>;
 }