aril 0.0.24 → 0.0.26

package/theme/layout/service/app.layout.service.ts

@@ -1,178 +1,178 @@
-import { Injectable, effect, signal } from '@angular/core';
-
-import { Subject } from 'rxjs';
-
-export type MenuMode = 'static' | 'overlay' | 'horizontal' | 'slim' | 'slim-plus' | 'reveal' | 'drawer';
-
-export type ColorScheme = 'light' | 'dark' | 'dim';
-
-export type MenuColorScheme = 'colorScheme' | 'primaryColor' | 'transparent';
-
-export interface AppConfig {
-	inputStyle: string;
-	colorScheme: ColorScheme;
-	theme: string;
-	ripple: boolean;
-	menuMode: MenuMode;
-	scale: number;
-	menuTheme: MenuColorScheme;
-}
-
-interface LayoutState {
-	staticMenuDesktopInactive: boolean;
-	overlayMenuActive: boolean;
-	profileSidebarVisible: boolean;
-	configSidebarVisible: boolean;
-	staticMenuMobileActive: boolean;
-	menuHoverActive: boolean;
-	sidebarActive: boolean;
-	anchored: boolean;
-}
-
-@Injectable({
-	providedIn: 'root'
-})
-export class LayoutService {
-	_config: AppConfig = {
-		ripple: false,
-		inputStyle: 'outlined',
-		menuMode: 'horizontal',
-		colorScheme: 'light',
-		theme: 'indigo',
-		scale: 12,
-		menuTheme: 'colorScheme'
-	};
-
-	// TODO: Set User Config
-	config = signal<AppConfig>(this._config);
-
-	state: LayoutState = {
-		staticMenuDesktopInactive: false,
-		overlayMenuActive: false,
-		profileSidebarVisible: false,
-		configSidebarVisible: false,
-		staticMenuMobileActive: false,
-		menuHoverActive: false,
-		sidebarActive: false,
-		anchored: false
-	};
-
-	private configUpdate = new Subject<AppConfig>();
-
-	private overlayOpen = new Subject<any>();
-
-	configUpdate$ = this.configUpdate.asObservable();
-
-	overlayOpen$ = this.overlayOpen.asObservable();
-
-	constructor() {
-		effect(() => {
-			const config = this.config();
-			if (this.updateStyle(config)) {
-				this.changeTheme();
-			}
-			this.changeScale(config.scale);
-			this.onConfigUpdate();
-		});
-	}
-
-	updateStyle(config: AppConfig) {
-		return config.theme !== this._config.theme || config.colorScheme !== this._config.colorScheme;
-	}
-
-	onMenuToggle() {
-		if (this.isOverlay()) {
-			this.state.overlayMenuActive = !this.state.overlayMenuActive;
-
-			if (this.state.overlayMenuActive) {
-				this.overlayOpen.next(null);
-			}
-		}
-
-		if (this.isDesktop()) {
-			this.state.staticMenuDesktopInactive = !this.state.staticMenuDesktopInactive;
-		} else {
-			this.state.staticMenuMobileActive = !this.state.staticMenuMobileActive;
-
-			if (this.state.staticMenuMobileActive) {
-				this.overlayOpen.next(null);
-			}
-		}
-	}
-
-	onOverlaySubmenuOpen() {
-		this.overlayOpen.next(null);
-	}
-
-	showProfileSidebar() {
-		this.state.profileSidebarVisible = true;
-	}
-
-	showConfigSidebar() {
-		this.state.configSidebarVisible = true;
-	}
-
-	isOverlay() {
-		return this.config().menuMode === 'overlay';
-	}
-
-	isDesktop() {
-		return window.innerWidth > 991;
-	}
-
-	isSlim() {
-		return this.config().menuMode === 'slim';
-	}
-
-	isSlimPlus() {
-		return this.config().menuMode === 'slim-plus';
-	}
-
-	isHorizontal() {
-		return this.config().menuMode === 'horizontal';
-	}
-
-	isMobile() {
-		return !this.isDesktop();
-	}
-
-	onConfigUpdate() {
-		this._config = { ...this.config() };
-		this.configUpdate.next(this.config());
-	}
-
-	changeTheme() {
-		const config = this.config();
-		const themeLink = <HTMLLinkElement>document.getElementById('theme-link');
-		const themeLinkHref = themeLink.getAttribute('href')!;
-		const newHref = themeLinkHref
-			.split('/')
-			.map((el) =>
-				el == this._config.theme ? (el = config.theme)
-				: el == `theme-${this._config.colorScheme}` ? (el = `theme-${config.colorScheme}`)
-				: el
-			)
-			.join('/');
-
-		this.replaceThemeLink(newHref);
-	}
-
-	replaceThemeLink(href: string) {
-		const id = 'theme-link';
-		let themeLink = <HTMLLinkElement>document.getElementById(id);
-		const cloneLinkElement = <HTMLLinkElement>themeLink.cloneNode(true);
-
-		cloneLinkElement.setAttribute('href', href);
-		cloneLinkElement.setAttribute('id', id + '-clone');
-
-		themeLink.parentNode!.insertBefore(cloneLinkElement, themeLink.nextSibling);
-		cloneLinkElement.addEventListener('load', () => {
-			themeLink.remove();
-			cloneLinkElement.setAttribute('id', id);
-		});
-	}
-
-	changeScale(value: number) {
-		document.documentElement.style.fontSize = `${value}px`;
-	}
-}
+import { Injectable, effect, signal } from '@angular/core';
+
+import { Subject } from 'rxjs';
+
+export type MenuMode = 'static' | 'overlay' | 'horizontal' | 'slim' | 'slim-plus' | 'reveal' | 'drawer';
+
+export type ColorScheme = 'light' | 'dark' | 'dim';
+
+export type MenuColorScheme = 'colorScheme' | 'primaryColor' | 'transparent';
+
+export interface AppConfig {
+	inputStyle: string;
+	colorScheme: ColorScheme;
+	theme: string;
+	ripple: boolean;
+	menuMode: MenuMode;
+	scale: number;
+	menuTheme: MenuColorScheme;
+}
+
+interface LayoutState {
+	staticMenuDesktopInactive: boolean;
+	overlayMenuActive: boolean;
+	profileSidebarVisible: boolean;
+	configSidebarVisible: boolean;
+	staticMenuMobileActive: boolean;
+	menuHoverActive: boolean;
+	sidebarActive: boolean;
+	anchored: boolean;
+}
+
+@Injectable({
+	providedIn: 'root'
+})
+export class LayoutService {
+	_config: AppConfig = {
+		ripple: false,
+		inputStyle: 'outlined',
+		menuMode: 'horizontal',
+		colorScheme: 'light',
+		theme: 'indigo',
+		scale: 12,
+		menuTheme: 'colorScheme'
+	};
+
+	// TODO: Set User Config
+	config = signal<AppConfig>(this._config);
+
+	state: LayoutState = {
+		staticMenuDesktopInactive: false,
+		overlayMenuActive: false,
+		profileSidebarVisible: false,
+		configSidebarVisible: false,
+		staticMenuMobileActive: false,
+		menuHoverActive: false,
+		sidebarActive: false,
+		anchored: false
+	};
+
+	private configUpdate = new Subject<AppConfig>();
+
+	private overlayOpen = new Subject<any>();
+
+	configUpdate$ = this.configUpdate.asObservable();
+
+	overlayOpen$ = this.overlayOpen.asObservable();
+
+	constructor() {
+		effect(() => {
+			const config = this.config();
+			if (this.updateStyle(config)) {
+				this.changeTheme();
+			}
+			this.changeScale(config.scale);
+			this.onConfigUpdate();
+		});
+	}
+
+	updateStyle(config: AppConfig) {
+		return config.theme !== this._config.theme || config.colorScheme !== this._config.colorScheme;
+	}
+
+	onMenuToggle() {
+		if (this.isOverlay()) {
+			this.state.overlayMenuActive = !this.state.overlayMenuActive;
+
+			if (this.state.overlayMenuActive) {
+				this.overlayOpen.next(null);
+			}
+		}
+
+		if (this.isDesktop()) {
+			this.state.staticMenuDesktopInactive = !this.state.staticMenuDesktopInactive;
+		} else {
+			this.state.staticMenuMobileActive = !this.state.staticMenuMobileActive;
+
+			if (this.state.staticMenuMobileActive) {
+				this.overlayOpen.next(null);
+			}
+		}
+	}
+
+	onOverlaySubmenuOpen() {
+		this.overlayOpen.next(null);
+	}
+
+	showProfileSidebar() {
+		this.state.profileSidebarVisible = true;
+	}
+
+	showConfigSidebar() {
+		this.state.configSidebarVisible = true;
+	}
+
+	isOverlay() {
+		return this.config().menuMode === 'overlay';
+	}
+
+	isDesktop() {
+		return window.innerWidth > 991;
+	}
+
+	isSlim() {
+		return this.config().menuMode === 'slim';
+	}
+
+	isSlimPlus() {
+		return this.config().menuMode === 'slim-plus';
+	}
+
+	isHorizontal() {
+		return this.config().menuMode === 'horizontal';
+	}
+
+	isMobile() {
+		return !this.isDesktop();
+	}
+
+	onConfigUpdate() {
+		this._config = { ...this.config() };
+		this.configUpdate.next(this.config());
+	}
+
+	changeTheme() {
+		const config = this.config();
+		const themeLink = <HTMLLinkElement>document.getElementById('theme-link');
+		const themeLinkHref = themeLink.getAttribute('href')!;
+		const newHref = themeLinkHref
+			.split('/')
+			.map((el) =>
+				el == this._config.theme ? (el = config.theme)
+				: el == `theme-${this._config.colorScheme}` ? (el = `theme-${config.colorScheme}`)
+				: el
+			)
+			.join('/');
+
+		this.replaceThemeLink(newHref);
+	}
+
+	replaceThemeLink(href: string) {
+		const id = 'theme-link';
+		let themeLink = <HTMLLinkElement>document.getElementById(id);
+		const cloneLinkElement = <HTMLLinkElement>themeLink.cloneNode(true);
+
+		cloneLinkElement.setAttribute('href', href);
+		cloneLinkElement.setAttribute('id', id + '-clone');
+
+		themeLink.parentNode!.insertBefore(cloneLinkElement, themeLink.nextSibling);
+		cloneLinkElement.addEventListener('load', () => {
+			themeLink.remove();
+			cloneLinkElement.setAttribute('id', id);
+		});
+	}
+
+	changeScale(value: number) {
+		document.documentElement.style.fontSize = `${value}px`;
+	}
+}

package/theme/layout/service/app.menu.service.ts

@@ -1,57 +1,59 @@
-import { Injectable, computed, signal } from '@angular/core';
-
-import { Subject } from 'rxjs';
-import { MenuItem } from 'primeng/api';
-
-import { APIs } from 'aril/http';
-import { MenuChangeEvent } from './menuchangeevent';
-
-interface MenuConfig {
-	items: MenuItem[];
-	prefix?: APIs;
-}
-
-@Injectable({
-	providedIn: 'root'
-})
-export class AppMenuService {
-	private menuSource = new Subject<MenuChangeEvent>();
-	private resetSource = new Subject();
-
-	public menuConfig = signal<MenuConfig>({ items: [], prefix: undefined });
-	public subMenuConfig = signal<MenuConfig>({ items: [], prefix: undefined });
-
-	public menuItems = computed(() => {
-		const config = this.menuConfig();
-
-		if (config.prefix) return config.items.map((item) => this.addPrefix(item, config.prefix));
-		else return config.items;
-	});
-
-	public subMenuItems = computed(() => {
-		const config = this.subMenuConfig();
-
-		if (config.prefix) return config.items.map((item) => this.addPrefix(item, config.prefix));
-		else return config.items;
-	});
-
-	menuSource$ = this.menuSource.asObservable();
-	resetSource$ = this.resetSource.asObservable();
-
-	addPrefix(menuItem: MenuItem, appPrefix: APIs | undefined) {
-		if (menuItem.items) {
-			menuItem.items = menuItem.items.map((item) => this.addPrefix(item, appPrefix));
-		} else {
-			menuItem.routerLink = `/${appPrefix}/${menuItem.routerLink}`;
-		}
-		return menuItem;
-	}
-
-	onMenuStateChange(event: MenuChangeEvent) {
-		this.menuSource.next(event);
-	}
-
-	reset() {
-		this.resetSource.next(true);
-	}
-}
+import { Injectable, computed, signal } from '@angular/core';
+
+import { MenuItem } from 'primeng/api';
+
+import { Subject } from 'rxjs';
+
+import { APIs } from 'aril/http';
+
+import { MenuChangeEvent } from './menuchangeevent';
+
+interface MenuConfig {
+	items: MenuItem[];
+	prefix?: APIs;
+}
+
+@Injectable({
+	providedIn: 'root'
+})
+export class AppMenuService {
+	private menuSource = new Subject<MenuChangeEvent>();
+	private resetSource = new Subject();
+
+	public menuConfig = signal<MenuConfig>({ items: [], prefix: undefined });
+	public subMenuConfig = signal<MenuConfig>({ items: [], prefix: undefined });
+
+	public menuItems = computed(() => {
+		const config = this.menuConfig();
+
+		if (config.prefix) return config.items.map((item) => this.addPrefix(item, config.prefix));
+		else return config.items;
+	});
+
+	public subMenuItems = computed(() => {
+		const config = this.subMenuConfig();
+
+		if (config.prefix) return config.items.map((item) => this.addPrefix(item, config.prefix));
+		else return config.items;
+	});
+
+	menuSource$ = this.menuSource.asObservable();
+	resetSource$ = this.resetSource.asObservable();
+
+	addPrefix(menuItem: MenuItem, appPrefix: APIs | undefined) {
+		if (menuItem.items) {
+			menuItem.items = menuItem.items.map((item) => this.addPrefix(item, appPrefix));
+		} else {
+			menuItem.routerLink = `/${appPrefix}/${menuItem.routerLink}`;
+		}
+		return menuItem;
+	}
+
+	onMenuStateChange(event: MenuChangeEvent) {
+		this.menuSource.next(event);
+	}
+
+	reset() {
+		this.resetSource.next(true);
+	}
+}

package/theme/ng-package.json

@@ -1,6 +1,6 @@
-{
-	"$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
-	"lib": {
-		"entryFile": "./index.ts"
-	}
-}
+{
+	"$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+	"lib": {
+		"entryFile": "./index.ts"
+	}
+}

package/theme/styles/theme/base/components/data/_paginator.scss

@@ -1,92 +1,92 @@
-.p-paginator {
-	background: $paginatorBg;
-	color: $paginatorTextColor;
-	border: $paginatorBorder;
-	border-width: $paginatorBorderWidth;
-	padding: $paginatorPadding;
-	border-radius: $borderRadius;
-
-	.p-paginator-first,
-	.p-paginator-prev,
-	.p-paginator-next,
-	.p-paginator-last {
-		background-color: $paginatorElementBg;
-		border: $paginatorElementBorder;
-		color: $paginatorElementIconColor;
-		min-width: $paginatorElementWidth;
-		height: $paginatorElementHeight;
-		margin: $paginatorElementMargin;
-		transition: $listItemTransition;
-		border-radius: $paginatorElementBorderRadius;
-
-		&:not(.p-disabled):not(.p-highlight):hover {
-			background: $paginatorElementHoverBg;
-			border-color: $paginatorElementHoverBorderColor;
-			color: $paginatorElementIconHoverColor;
-		}
-	}
-
-	.p-paginator-first {
-		border-top-left-radius: $paginatorElementBorderRadius;
-		border-bottom-left-radius: $paginatorElementBorderRadius;
-	}
-
-	.p-paginator-last {
-		border-top-right-radius: $paginatorElementBorderRadius;
-		border-bottom-right-radius: $paginatorElementBorderRadius;
-	}
-
-	.p-dropdown {
-		margin-left: $inlineSpacing;
-		margin-right: $inlineSpacing;
-		height: $paginatorElementHeight;
-
-		.p-dropdown-label {
-			padding-right: 0;
-		}
-	}
-
-	.p-paginator-page-input {
-		margin-left: $inlineSpacing;
-		margin-right: $inlineSpacing;
-
-		.p-inputtext {
-			max-width: $paginatorElementWidth;
-		}
-	}
-
-	.p-paginator-current {
-		background-color: $paginatorElementBg;
-		border: $paginatorElementBorder;
-		color: $paginatorElementIconColor;
-		min-width: $paginatorElementWidth;
-		height: $paginatorElementHeight;
-		margin: $paginatorElementMargin;
-		padding: 0 $inlineSpacing;
-	}
-
-	.p-paginator-pages {
-		.p-paginator-page {
-			background-color: $paginatorElementBg;
-			border: $paginatorElementBorder;
-			color: $paginatorElementIconColor;
-			min-width: 2rem;
-			height: 2rem;
-			margin: $paginatorElementMargin;
-			transition: $listItemTransition;
-			border-radius: $paginatorElementBorderRadius;
-
-			&.p-highlight {
-				background: $highlightBg;
-				border-color: $highlightBg;
-				color: $highlightTextColor;
-			}
-
-			&:not(.p-highlight):hover {
-				background: $paginatorElementHoverBg;
-				border-color: $paginatorElementHoverBorderColor;
-				color: $paginatorElementIconHoverColor;
-			}
-		}
-	}
-}
+.p-paginator {
+	background: $paginatorBg;
+	color: $paginatorTextColor;
+	border: $paginatorBorder;
+	border-width: $paginatorBorderWidth;
+	padding: $paginatorPadding;
+	border-radius: $borderRadius;
+
+	.p-paginator-first,
+	.p-paginator-prev,
+	.p-paginator-next,
+	.p-paginator-last {
+		background-color: $paginatorElementBg;
+		border: $paginatorElementBorder;
+		color: $paginatorElementIconColor;
+		min-width: $paginatorElementWidth;
+		height: $paginatorElementHeight;
+		margin: $paginatorElementMargin;
+		transition: $listItemTransition;
+		border-radius: $paginatorElementBorderRadius;
+
+		&:not(.p-disabled):not(.p-highlight):hover {
+			background: $paginatorElementHoverBg;
+			border-color: $paginatorElementHoverBorderColor;
+			color: $paginatorElementIconHoverColor;
+		}
+	}
+
+	.p-paginator-first {
+		border-top-left-radius: $paginatorElementBorderRadius;
+		border-bottom-left-radius: $paginatorElementBorderRadius;
+	}
+
+	.p-paginator-last {
+		border-top-right-radius: $paginatorElementBorderRadius;
+		border-bottom-right-radius: $paginatorElementBorderRadius;
+	}
+
+	.p-dropdown {
+		margin-left: $inlineSpacing;
+		margin-right: $inlineSpacing;
+		height: $paginatorElementHeight;
+
+		.p-dropdown-label {
+			padding-right: 0;
+		}
+	}
+
+	.p-paginator-page-input {
+		margin-left: $inlineSpacing;
+		margin-right: $inlineSpacing;
+
+		.p-inputtext {
+			max-width: $paginatorElementWidth;
+		}
+	}
+
+	.p-paginator-current {
+		background-color: $paginatorElementBg;
+		border: $paginatorElementBorder;
+		color: $paginatorElementIconColor;
+		min-width: $paginatorElementWidth;
+		height: $paginatorElementHeight;
+		margin: $paginatorElementMargin;
+		padding: 0 $inlineSpacing;
+	}
+
+	.p-paginator-pages {
+		.p-paginator-page {
+			background-color: $paginatorElementBg;
+			border: $paginatorElementBorder;
+			color: $paginatorElementIconColor;
+			min-width: 2rem;
+			height: 2rem;
+			margin: $paginatorElementMargin;
+			transition: $listItemTransition;
+			border-radius: $paginatorElementBorderRadius;
+
+			&.p-highlight {
+				background: $highlightBg;
+				border-color: $highlightBg;
+				color: $highlightTextColor;
+			}
+
+			&:not(.p-highlight):hover {
+				background: $paginatorElementHoverBg;
+				border-color: $paginatorElementHoverBorderColor;
+				color: $paginatorElementIconHoverColor;
+			}
+		}
+	}
+}