shirkasoft-ui-components 1.0.23 → 1.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shirkasoft-ui-components",
-  "version": "1.0.23",
+  "version": "1.0.26",
   "description": "Angular UI Components Library — themeable via CSS custom properties",
   "keywords": [
     "angular",
@@ -19,11 +19,12 @@
   "bugs": {
     "url": "https://github.com/Ansem13/shirkasoft-ui-components/issues"
   },
-  "homepage": "https://github.com/Ansem13/shirkasoft-ui-components#readme",
+  "homepage": "https://ansem13.github.io/shirkasoft-ui-components/",
   "peerDependencies": {
     "@angular/common": "^21.2.0",
     "@angular/core": "^21.2.0",
     "@angular/forms": "^21.2.0",
+    "@angular/router": "^21.2.0",
     "rxjs": "^7.8.0",
     "@jsverse/transloco": ">= 8.0.0",
     "@lucide/angular": "^1.17.0",

package/src/theme.css

@@ -144,6 +144,12 @@
 ._shk-bg-primary-soft  { background-color: var(--shk-primary-50); }
 ._shk-bg-primary-border { background-color: var(--shk-primary-200); }
 
+/* Active nav child in dark mode (30% primary-900 over transparent).
+   Must be a single token (no spaces) so it works with [class.X] bindings. */
+.dark ._shk-bg-primary-soft-dark {
+  background-color: color-mix(in srgb, var(--shk-primary-900) 30%, transparent);
+}
+
 ._shk-bg-surface-50  { background-color: var(--shk-surface-50); }
 ._shk-bg-surface-100 { background-color: var(--shk-surface-100); }
 ._shk-bg-surface-200 { background-color: var(--shk-surface-200); }
@@ -226,9 +232,30 @@
 ._shk-gradient-amber   { background-image: linear-gradient(to right, var(--shk-amber-400), var(--shk-amber-600)); }
 
 /* ============================================================
-   Scrollbar (table)
+   Scrollbar (table, sidebar, dropdowns, …)
    ============================================================ */
-._shk-scrollbar::-webkit-scrollbar { height: 6px; }
-._shk-scrollbar::-webkit-scrollbar-track { background: transparent; }
-._shk-scrollbar::-webkit-scrollbar-thumb { background: var(--shk-scrollbar-thumb); border-radius: 9999px; }
-._shk-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--shk-scrollbar-thumb-hover); }
+._shk-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--shk-scrollbar-thumb) transparent;
+}
+._shk-scrollbar::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+._shk-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+._shk-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--shk-scrollbar-thumb);
+  border-radius: 9999px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+._shk-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: var(--shk-scrollbar-thumb-hover);
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+._shk-scrollbar::-webkit-scrollbar-corner {
+  background: transparent;
+}

package/types/shirkasoft-ui-components.d.ts

@@ -456,7 +456,7 @@ declare class FileUploadComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<FileUploadComponent, "shk-file-upload", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "maxFiles": { "alias": "maxFiles"; "required": false; "isSignal": true; }; "fileUploadText": { "alias": "fileUploadText"; "required": false; "isSignal": true; }; "fileRecommendation": { "alias": "fileRecommendation"; "required": false; "isSignal": true; }; "changeFilesText": { "alias": "changeFilesText"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; }, { "fileSelected": "fileSelected"; "fileRemoved": "fileRemoved"; "fileError": "fileError"; "fileWarning": "fileWarning"; }, never, never, true, never>;
 }
 
-declare function getIcon(name: string): any;
+declare function getIcon$2(name: string): any;
 interface Column {
     field: string;
     header: string;
@@ -509,7 +509,7 @@ declare class TableComponent {
     private fb;
     private cdr;
     private transloco;
-    protected getIcon: typeof getIcon;
+    protected getIcon: typeof getIcon$2;
     private actionsHeaderLabel;
     data: _angular_core.InputSignal<any[]>;
     columns: _angular_core.InputSignal<Column[]>;
@@ -612,6 +612,136 @@ declare class TooltipComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TooltipComponent, "shk-tooltip", never, { "text": { "alias": "text"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+declare function getIcon$1(name?: string): any;
+interface SidebarItem {
+    id: string;
+    label: string;
+    icon?: string;
+    route?: string;
+    children?: SidebarItem[];
+    roles?: string[];
+    badge?: string | number;
+    disabled?: boolean;
+    separator?: boolean;
+}
+interface SidebarGroup {
+    id?: string;
+    label?: string;
+    items: SidebarItem[];
+}
+declare class SidebarComponent {
+    private platformId;
+    items: _angular_core.InputSignal<SidebarItem[]>;
+    groups: _angular_core.InputSignal<SidebarGroup[]>;
+    title: _angular_core.InputSignal<string>;
+    subtitle: _angular_core.InputSignal<string>;
+    logo: _angular_core.InputSignal<string>;
+    activeItemId: _angular_core.InputSignal<string>;
+    userRole: _angular_core.InputSignal<string>;
+    collapsible: _angular_core.InputSignal<boolean>;
+    showToggle: _angular_core.InputSignal<boolean>;
+    responsive: _angular_core.InputSignal<boolean>;
+    fixed: _angular_core.InputSignal<boolean>;
+    hasShadow: _angular_core.InputSignal<boolean>;
+    expandedWidth: _angular_core.InputSignal<string>;
+    collapsedWidth: _angular_core.InputSignal<string>;
+    defaultExpanded: _angular_core.InputSignal<string[]>;
+    labelPipe: _angular_core.InputSignal<(label: string) => string>;
+    expandTooltip: _angular_core.InputSignal<string>;
+    collapseTooltip: _angular_core.InputSignal<string>;
+    collapsed: _angular_core.ModelSignal<boolean>;
+    mobileOpen: _angular_core.ModelSignal<boolean>;
+    itemClick: _angular_core.OutputEmitterRef<SidebarItem>;
+    toggle: _angular_core.OutputEmitterRef<boolean>;
+    protected getIcon: typeof getIcon$1;
+    protected selectedId: _angular_core.WritableSignal<string>;
+    protected expandedGroups: _angular_core.WritableSignal<Set<string>>;
+    private isBrowser;
+    constructor(platformId: Object);
+    protected width: _angular_core.Signal<string>;
+    protected navItems: _angular_core.Signal<SidebarItem[]>;
+    onResize(_event: Event): void;
+    protected label(item: SidebarItem): string;
+    protected isItemActive(item: SidebarItem): boolean;
+    protected isGroupActive(item: SidebarItem): boolean;
+    protected isGroupExpanded(item: SidebarItem): boolean;
+    protected toggleGroup(item: SidebarItem): void;
+    protected onItemClick(item: SidebarItem): void;
+    protected onToggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidebarComponent, "shk-sidebar", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "groups": { "alias": "groups"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "logo": { "alias": "logo"; "required": false; "isSignal": true; }; "activeItemId": { "alias": "activeItemId"; "required": false; "isSignal": true; }; "userRole": { "alias": "userRole"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "showToggle": { "alias": "showToggle"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "fixed": { "alias": "fixed"; "required": false; "isSignal": true; }; "hasShadow": { "alias": "hasShadow"; "required": false; "isSignal": true; }; "expandedWidth": { "alias": "expandedWidth"; "required": false; "isSignal": true; }; "collapsedWidth": { "alias": "collapsedWidth"; "required": false; "isSignal": true; }; "defaultExpanded": { "alias": "defaultExpanded"; "required": false; "isSignal": true; }; "labelPipe": { "alias": "labelPipe"; "required": false; "isSignal": true; }; "expandTooltip": { "alias": "expandTooltip"; "required": false; "isSignal": true; }; "collapseTooltip": { "alias": "collapseTooltip"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "mobileOpen": { "alias": "mobileOpen"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; "mobileOpen": "mobileOpenChange"; "itemClick": "itemClick"; "toggle": "toggle"; }, never, ["[sidebarHeader]", "[sidebarContent]", "[sidebarFooter]"], true, never>;
+}
+
+declare function getIcon(name?: string): any;
+interface RailSidebarItem {
+    id: string;
+    label: string;
+    icon?: string;
+    routerLink?: string;
+    children?: RailSidebarItem[];
+    roles?: string[];
+    badge?: string | number;
+    disabled?: boolean;
+    separator?: boolean;
+}
+interface RailSidebarSection {
+    key: string;
+    label: string;
+    icon?: string;
+    routerLink?: string;
+    matchPrefixes?: string[];
+    items?: RailSidebarItem[];
+}
+interface RailSidebarSectionEvent {
+    key: string;
+    routerLink?: string;
+}
+declare class RailSidebarComponent {
+    sections: _angular_core.InputSignal<RailSidebarSection[]>;
+    activeUrl: _angular_core.InputSignal<string>;
+    activeSectionKey: _angular_core.ModelSignal<string>;
+    collapsed: _angular_core.ModelSignal<boolean>;
+    activeLang: _angular_core.InputSignal<string>;
+    langs: _angular_core.InputSignal<string[]>;
+    logo: _angular_core.InputSignal<string>;
+    appName: _angular_core.InputSignal<string>;
+    userRole: _angular_core.InputSignal<string>;
+    labelPipe: _angular_core.InputSignal<(label: string) => string>;
+    railWidth: _angular_core.InputSignal<string>;
+    expandedWidth: _angular_core.InputSignal<string>;
+    workspaceTooltip: _angular_core.InputSignal<string>;
+    logoutTooltip: _angular_core.InputSignal<string>;
+    collapseTooltip: _angular_core.InputSignal<string>;
+    expandTooltip: _angular_core.InputSignal<string>;
+    sectionSelected: _angular_core.OutputEmitterRef<RailSidebarSectionEvent>;
+    itemClick: _angular_core.OutputEmitterRef<RailSidebarItem>;
+    setLang: _angular_core.OutputEmitterRef<string>;
+    logoutRequested: _angular_core.OutputEmitterRef<void>;
+    toggleSidebar: _angular_core.OutputEmitterRef<boolean>;
+    workspaceClick: _angular_core.OutputEmitterRef<void>;
+    protected getIcon: typeof getIcon;
+    protected expandedGroups: _angular_core.WritableSignal<Set<string>>;
+    constructor();
+    protected width: _angular_core.Signal<string>;
+    protected activeSection: _angular_core.Signal<RailSidebarSection | null>;
+    protected navItems: _angular_core.Signal<RailSidebarItem[]>;
+    protected label(label: string): string;
+    protected isSectionActive(section: RailSidebarSection): boolean;
+    protected isItemActive(item: RailSidebarItem): boolean;
+    protected isGroupActive(item: RailSidebarItem): boolean;
+    private matchesUrl;
+    private bestMatchItem;
+    protected isGroupExpanded(item: RailSidebarItem): boolean;
+    protected toggleGroup(item: RailSidebarItem): void;
+    protected onSectionClick(section: RailSidebarSection): void;
+    protected onItemClick(item: RailSidebarItem): void;
+    protected onWorkspace(): void;
+    protected onToggleLang(): void;
+    protected onToggleSidebar(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RailSidebarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RailSidebarComponent, "shk-rail-sidebar", never, { "sections": { "alias": "sections"; "required": false; "isSignal": true; }; "activeUrl": { "alias": "activeUrl"; "required": false; "isSignal": true; }; "activeSectionKey": { "alias": "activeSectionKey"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "activeLang": { "alias": "activeLang"; "required": false; "isSignal": true; }; "langs": { "alias": "langs"; "required": false; "isSignal": true; }; "logo": { "alias": "logo"; "required": false; "isSignal": true; }; "appName": { "alias": "appName"; "required": false; "isSignal": true; }; "userRole": { "alias": "userRole"; "required": false; "isSignal": true; }; "labelPipe": { "alias": "labelPipe"; "required": false; "isSignal": true; }; "railWidth": { "alias": "railWidth"; "required": false; "isSignal": true; }; "expandedWidth": { "alias": "expandedWidth"; "required": false; "isSignal": true; }; "workspaceTooltip": { "alias": "workspaceTooltip"; "required": false; "isSignal": true; }; "logoutTooltip": { "alias": "logoutTooltip"; "required": false; "isSignal": true; }; "collapseTooltip": { "alias": "collapseTooltip"; "required": false; "isSignal": true; }; "expandTooltip": { "alias": "expandTooltip"; "required": false; "isSignal": true; }; }, { "activeSectionKey": "activeSectionKeyChange"; "collapsed": "collapsedChange"; "sectionSelected": "sectionSelected"; "itemClick": "itemClick"; "setLang": "setLang"; "logoutRequested": "logoutRequested"; "toggleSidebar": "toggleSidebar"; "workspaceClick": "workspaceClick"; }, never, never, true, never>;
+}
+
 declare class ChartComponent implements AfterViewInit, OnDestroy {
     private static registered;
     type: _angular_core.InputSignal<"line" | "bar" | "pie" | "doughnut" | "polarArea">;
@@ -620,10 +750,12 @@ declare class ChartComponent implements AfterViewInit, OnDestroy {
     private canvasRef;
     private chartInstance;
     private initialized;
+    constructor();
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
+    private resetCanvas;
     private initChart;
-    constructor();
+    private deepClone;
     private updateChart;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChartComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChartComponent, "shk-chart", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
@@ -639,5 +771,5 @@ declare function readThemeColors(): {
     border: string;
 };
 
-export { COLOR_PALETTE, ChartComponent, ConfirmDialogComponent, ConfirmDialogService, DatePickerComponent, FileUploadComponent, ModalComponent, ModalService, NotificationComponent, NotificationService, PriceInputComponent, SelectComponent, TableComponent, TextFieldComponent, ToggleComponent, TooltipComponent, readThemeColors };
-export type { Column, ConfirmConfig, DatePickerView, FileUploadError, FilterChangeEvent, ModalConfig, Notification, NotificationPosition, PageChangeEvent, RowAction, TableAction };
+export { COLOR_PALETTE, ChartComponent, ConfirmDialogComponent, ConfirmDialogService, DatePickerComponent, FileUploadComponent, ModalComponent, ModalService, NotificationComponent, NotificationService, PriceInputComponent, RailSidebarComponent, SelectComponent, SidebarComponent, TableComponent, TextFieldComponent, ToggleComponent, TooltipComponent, readThemeColors };
+export type { Column, ConfirmConfig, DatePickerView, FileUploadError, FilterChangeEvent, ModalConfig, Notification, NotificationPosition, PageChangeEvent, RailSidebarItem, RailSidebarSection, RailSidebarSectionEvent, RowAction, SidebarGroup, SidebarItem, TableAction };