@shival99/z-vnetcity 1.4.13

package/README.md

@@ -0,0 +1,306 @@
+# Z-UI - Modern Angular Component Library
+
+A comprehensive, high-performance UI component library built with Angular 21+, featuring 40+ customizable components with dark mode, accessibility, and enterprise-ready features.
+
+## Features
+
+- **40+ Components** - Buttons, Inputs, Tables, Modals, Calendars, and more
+- **Dark Mode** - Built-in theme support with 9 color themes
+- **Accessible** - WCAG 2.1 compliant components
+- **Responsive** - Mobile-first responsive design
+- **High Performance** - OnPush change detection, virtual scrolling
+- **Customizable** - CSS variables, class-variance-authority
+- **Tree-shakable** - Import only what you need
+- **Type-safe** - Full TypeScript support with strict mode
+- **i18n Ready** - Built-in translation support
+
+## Installation
+
+```bash
+pnpm add @shival99/z-vnetcity
+```
+
+### Peer Dependencies
+
+```bash
+pnpm add @angular/cdk @ng-icons/core @ng-icons/lucide @ng-icons/iconsax \
+  @tanstack/angular-table @shival99/angular-virtual \
+  class-variance-authority clsx tailwind-merge \
+  ngx-mask ngx-scrollbar @shival99/ngx-sonner ngxtension minisearch
+```
+
+### Optional Dependencies
+
+```bash
+pnpm add ngx-quill quill                    # Rich Text Editor
+pnpm add shiki dompurify                    # Syntax Highlighting
+pnpm add echarts ngx-echarts                # Charts
+pnpm add @ngx-translate/core @ngx-translate/http-loader  # i18n
+pnpm add exceljs file-saver xlsx            # Excel Export
+```
+
+### Tailwind CSS v4 Setup
+
+Z-UI requires Tailwind CSS v4. Install the dependencies:
+
+```bash
+pnpm add -D tailwindcss @tailwindcss/postcss postcss
+```
+
+Create `postcss.config.mjs` in your project root:
+
+```javascript
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
+```
+
+Update your `project.json` or `angular.json` styles:
+
+```json
+"styles": [
+  "node_modules/@shival99/z-vnetcity/assets/css/themes/green.css",
+  "node_modules/@shival99/z-vnetcity/assets/css/tailwind.css",
+  "src/styles.scss"
+]
+```
+
+Copy theme files to assets for lazy loading (optional):
+
+```json
+"assets": [
+  {
+    "glob": "*.css",
+    "input": "node_modules/@shival99/z-vnetcity/assets/css/themes",
+    "output": "assets/css/themes"
+  }
+]
+```
+
+## Quick Start
+
+### Import Components
+
+```typescript
+import { ZButtonComponent } from '@shival99/z-vnetcity/components/z-button';
+import { ZInputComponent } from '@shival99/z-vnetcity/components/z-input';
+import { ZTableComponent } from '@shival99/z-vnetcity/components/z-table';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [ZButtonComponent, ZInputComponent, ZTableComponent],
+  template: `
+    <z-button zVariant="primary">Click me</z-button>
+    <z-input zLabel="Email" zPlaceholder="Enter email" />
+  `,
+})
+export class AppComponent {}
+```
+
+### Configure Providers
+
+```typescript
+import { provideZTranslate } from '@shival99/z-vnetcity/providers';
+import { provideZNgxMask } from '@shival99/z-vnetcity/providers';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideZTranslate({ defaultLang: 'vi', langPath: '/assets/i18n/' }), provideZNgxMask()],
+};
+```
+
+## Components
+
+| Category    | Components                                                       |
+| ----------- | ---------------------------------------------------------------- |
+| **Form**    | Input, Select, Checkbox, Radio, Switch, Calendar, Upload, Filter |
+| **Data**    | Table, Pagination, Code, Editor, Timeline                        |
+| **Overlay** | Modal, Drawer, Toast, Tooltip, Popover, Dropdown Menu            |
+| **Layout**  | Accordion, Tabs, Menu, Breadcrumb, Skeleton                      |
+| **Display** | Button, Icon, Loading                                            |
+
+## Import Paths
+
+```typescript
+import { ZButtonComponent } from '@shival99/z-vnetcity/components/z-button';
+import { ZTableComponent } from '@shival99/z-vnetcity/components/z-table';
+import { ZModalService } from '@shival99/z-vnetcity/components/z-modal';
+
+import { ZThemeService, ZCacheService } from '@shival99/z-vnetcity/services';
+import { provideZTranslate } from '@shival99/z-vnetcity/providers';
+import { zTransform, zMergeClasses } from '@shival99/z-vnetcity/utils';
+import { ZSafeHtmlPipe } from '@shival99/z-vnetcity/pipes';
+import { Z_UI_TRANSLATIONS } from '@shival99/z-vnetcity/i18n';
+```
+
+## Theming
+
+Available themes: `green`, `orange`, `violet`, `neutral`, `zinc`, `slate`, `stone`, `gray`, `hospital`
+
+```typescript
+import { ZThemeService } from '@shival99/z-vnetcity/services';
+
+export class AppComponent {
+  private themeService = inject(ZThemeService);
+
+  ngOnInit() {
+    this.themeService.setTheme('violet');
+    this.themeService.toggleDarkMode(true);
+  }
+}
+```
+
+## CSS Variables
+
+Z-UI uses CSS variables for customization. You can override these variables in your project's CSS to customize the look and feel.
+
+### Font Variables
+
+Override these in your `styles.css` or `styles.scss`:
+
+```css
+:root {
+  --font-sans: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
+  --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'Courier New', monospace;
+}
+```
+
+Example - Using Inter font:
+
+```css
+:root {
+  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+}
+```
+
+### Theme Variables (Light Mode)
+
+```css
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0.031 264.539);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0.031 264.539);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0.031 264.539);
+  --primary: oklch(0.422 0.095 166.913);
+  --primary-foreground: oklch(0.982 0.018 166.913);
+  --secondary: oklch(0.967 0.004 264.539);
+  --secondary-foreground: oklch(0.209 0.021 264.539);
+  --muted: oklch(0.967 0.004 264.539);
+  --muted-foreground: oklch(0.556 0.024 264.539);
+  --accent: oklch(0.967 0.004 264.539);
+  --accent-foreground: oklch(0.209 0.021 264.539);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.929 0.007 264.539);
+  --input: oklch(0.929 0.007 264.539);
+  --input-autofill: oklch(1 0 0);
+  --ring: oklch(0.422 0.095 166.913);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.334);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0.001 264.539);
+  --sidebar-foreground: oklch(0.145 0.031 264.539);
+  --sidebar-primary: oklch(0.422 0.095 166.913);
+  --sidebar-primary-foreground: oklch(0.982 0.018 166.913);
+  --sidebar-accent: oklch(0.967 0.004 264.539);
+  --sidebar-accent-foreground: oklch(0.209 0.021 264.539);
+  --sidebar-border: oklch(0.929 0.007 264.539);
+  --sidebar-ring: oklch(0.422 0.095 166.913);
+}
+```
+
+### Theme Variables (Dark Mode)
+
+```css
+.dark {
+  --background: oklch(0.145 0.031 264.539);
+  --foreground: oklch(0.985 0.001 264.539);
+  --card: oklch(0.209 0.021 264.539);
+  --card-foreground: oklch(0.985 0.001 264.539);
+  --popover: oklch(0.209 0.021 264.539);
+  --popover-foreground: oklch(0.985 0.001 264.539);
+  --primary: oklch(0.696 0.17 162.48);
+  --primary-foreground: oklch(0.209 0.021 264.539);
+  --secondary: oklch(0.268 0.019 264.539);
+  --secondary-foreground: oklch(0.985 0.001 264.539);
+  --muted: oklch(0.268 0.019 264.539);
+  --muted-foreground: oklch(0.708 0.019 264.539);
+  --accent: oklch(0.268 0.019 264.539);
+  --accent-foreground: oklch(0.985 0.001 264.539);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --input-autofill: oklch(0.19 0 0);
+  --ring: oklch(0.527 0.154 150.069);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.209 0.021 264.539);
+  --sidebar-foreground: oklch(0.985 0.001 264.539);
+  --sidebar-primary: oklch(0.696 0.17 162.48);
+  --sidebar-primary-foreground: oklch(0.209 0.021 264.539);
+  --sidebar-accent: oklch(0.268 0.019 264.539);
+  --sidebar-accent-foreground: oklch(0.985 0.001 264.539);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.527 0.154 150.069);
+}
+```
+
+### Scrollbar Variables
+
+```css
+:root {
+  --scrollbar-track-color: transparent;
+  --scrollbar-track-shape: 5px;
+  --scrollbar-track-thickness: 7px;
+  --scrollbar-thumb-color: #d1d5db;
+  --scrollbar-thumb-hover-color: #9ca3af;
+  --scrollbar-thumb-shape: 5px;
+  --scrollbar-thumb-min-size: 40;
+  --scrollbar-hover-opacity-transition-leave-duration: 0.3s;
+  --scrollbar-hover-opacity-transition-leave-delay: 0.5s;
+}
+
+.dark {
+  --scrollbar-thumb-color: #4b5563;
+  --scrollbar-thumb-hover-color: #6b7280;
+}
+```
+
+### Example: Custom Override
+
+Create a custom theme by overriding variables in your project:
+
+```css
+/* styles.css */
+:root {
+  /* Custom font */
+  --font-sans: 'Roboto', system-ui, sans-serif;
+
+  /* Custom primary color */
+  --primary: oklch(0.6 0.2 240);
+  --primary-foreground: oklch(1 0 0);
+
+  /* Custom border radius */
+  --radius: 0.5rem;
+}
+
+.dark {
+  /* Dark mode primary color */
+  --primary: oklch(0.7 0.2 240);
+}
+```
+
+## License
+
+MIT © [VuBoi](https://github.com/vuboi)

package/assets/css/animations.css

@@ -0,0 +1,207 @@
+/* ===== Animation Utilities ===== */
+@layer base {
+  @keyframes z-enter {
+    from {
+      opacity: var(--z-enter-opacity, 1);
+      transform: translate3d(var(--z-enter-translate-x, 0), var(--z-enter-translate-y, 0), 0)
+        scale3d(var(--z-enter-scale, 1), var(--z-enter-scale, 1), var(--z-enter-scale, 1));
+    }
+  }
+
+  @keyframes z-exit {
+    to {
+      opacity: var(--z-exit-opacity, 1);
+      transform: translate3d(var(--z-exit-translate-x, 0), var(--z-exit-translate-y, 0), 0)
+        scale3d(var(--z-exit-scale, 1), var(--z-exit-scale, 1), var(--z-exit-scale, 1));
+    }
+  }
+
+  .z-animate-in {
+    animation: z-enter 180ms cubic-bezier(0.32, 0.72, 0, 1);
+    animation-fill-mode: forwards;
+  }
+
+  .z-animate-out {
+    animation: z-exit 150ms cubic-bezier(0.32, 0.72, 0, 1);
+    animation-fill-mode: forwards;
+  }
+
+  /* Fade */
+  .z-fade-in {
+    --z-enter-opacity: 0;
+  }
+
+  .z-fade-out {
+    --z-exit-opacity: 0;
+  }
+
+  /* Zoom/Scale */
+  .z-zoom-in-95 {
+    --z-enter-scale: 0.95;
+  }
+
+  .z-zoom-out-95 {
+    --z-exit-scale: 0.95;
+  }
+
+  .z-zoom-in-90 {
+    --z-enter-scale: 0.9;
+  }
+
+  .z-zoom-out-90 {
+    --z-exit-scale: 0.9;
+  }
+
+  /* Slide */
+  .z-slide-in-from-top-2 {
+    --z-enter-translate-y: -4px;
+  }
+
+  .z-slide-out-to-top-2 {
+    --z-exit-translate-y: -4px;
+  }
+
+  .z-slide-in-from-bottom-2 {
+    --z-enter-translate-y: 4px;
+  }
+
+  .z-slide-out-to-bottom-2 {
+    --z-exit-translate-y: 4px;
+  }
+
+  .z-slide-in-from-left-2 {
+    --z-enter-translate-x: -4px;
+  }
+
+  .z-slide-out-to-left-2 {
+    --z-exit-translate-x: -4px;
+  }
+
+  .z-slide-in-from-right-2 {
+    --z-enter-translate-x: 4px;
+  }
+
+  .z-slide-out-to-right-2 {
+    --z-exit-translate-x: 4px;
+  }
+
+  /* Slide-4 (8px) - for popover */
+  .z-slide-in-from-top-4 {
+    --z-enter-translate-y: -8px;
+  }
+
+  .z-slide-out-to-top-4 {
+    --z-exit-translate-y: -8px;
+  }
+
+  .z-slide-in-from-bottom-4 {
+    --z-enter-translate-y: 8px;
+  }
+
+  .z-slide-out-to-bottom-4 {
+    --z-exit-translate-y: 8px;
+  }
+
+  .z-slide-in-from-left-4 {
+    --z-enter-translate-x: -8px;
+  }
+
+  .z-slide-out-to-left-4 {
+    --z-exit-translate-x: -8px;
+  }
+
+  .z-slide-in-from-right-4 {
+    --z-enter-translate-x: 8px;
+  }
+
+  .z-slide-out-to-right-4 {
+    --z-exit-translate-x: 8px;
+  }
+
+  /* Duration modifiers */
+  .z-duration-100 {
+    animation-duration: 100ms;
+  }
+
+  .z-duration-150 {
+    animation-duration: 150ms;
+  }
+
+  .z-duration-200 {
+    animation-duration: 200ms;
+  }
+
+  .z-duration-300 {
+    animation-duration: 300ms;
+  }
+
+  /* CDK Overlay Backdrop Animation */
+  @keyframes z-backdrop-enter {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes z-backdrop-exit {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes z-spin-effect {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .z-animate-spin {
+    animation: z-spin-effect 1s linear infinite;
+  }
+
+  @keyframes z-wave-effect {
+    to {
+      box-shadow: 0 0 0 5px var(--z-wave-color, currentColor);
+    }
+  }
+
+  @keyframes z-fade-effect {
+    to {
+      opacity: 0;
+    }
+  }
+
+  .z-animate-wave {
+    position: absolute;
+    inset: 0;
+    display: block;
+    border-radius: inherit;
+    box-shadow: 0 0 0 0 var(--z-wave-color, currentColor);
+    opacity: 0.2;
+    animation:
+      z-fade-effect 2s cubic-bezier(0.08, 0.82, 0.17, 1),
+      z-wave-effect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
+    animation-fill-mode: forwards;
+    pointer-events: none;
+  }
+
+  /* CDK Backdrop Styles for Service Mode Modal */
+  .cdk-overlay-backdrop {
+    animation: z-backdrop-enter 150ms ease-out forwards;
+  }
+
+  .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
+    opacity: 1;
+  }
+
+  .cdk-overlay-backdrop.z-backdrop-leaving {
+    animation: z-backdrop-exit 120ms ease-in forwards;
+  }
+}

package/assets/css/base.css

@@ -0,0 +1,136 @@
+:root {
+  --font-sans: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
+  --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'Courier New', monospace;
+  --scrollbar-track-color: transparent;
+  --scrollbar-track-shape: 5px;
+  --scrollbar-track-thickness: 7px;
+  --scrollbar-thumb-color: #d1d5db;
+  --scrollbar-thumb-hover-color: #9ca3af;
+  --scrollbar-thumb-shape: 5px;
+  --scrollbar-thumb-min-size: 40;
+  --scrollbar-hover-opacity-transition-leave-duration: 0.3s;
+  --scrollbar-hover-opacity-transition-leave-delay: 0.5s;
+
+  /* Shadow tokens */
+  --shadow-card: 0 0 5px 0 rgba(0, 0, 0, 0.1), 0 0 1px 0 rgba(0, 0, 0, 0.1);
+  --shadow-card-md: 0 2px 8px rgba(0, 0, 0, 0.15);
+  --shadow-card-lg: 0 4px 8px -2px rgba(9, 30, 66, 0.25), 0 0 0 1px rgba(9, 30, 66, 0.08);
+  --shadow-card-soft: 0 0 0.25em rgba(67, 71, 85, 0.27), 0 0.25em 1em rgba(90, 125, 188, 0.05);
+}
+
+* {
+  border-color: var(--border);
+  outline-color: color-mix(in srgb, var(--ring) 50%, transparent);
+}
+
+body {
+  background-color: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+::-webkit-scrollbar {
+  width: 7px;
+  height: 7px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #d1d5db;
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover,
+::-webkit-scrollbar-thumb:active {
+  background-color: #9ca3af;
+}
+
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background-color: #4b5563;
+}
+
+.dark ::-webkit-scrollbar-thumb:hover,
+.dark ::-webkit-scrollbar-thumb:active {
+  background-color: #6b7280;
+}
+
+.dark {
+  --scrollbar-thumb-color: #4b5563;
+  --scrollbar-thumb-hover-color: #6b7280;
+  --input-autofill: oklch(0.25 0.03 265.94);
+}
+
+/* ==================== Utility Classes ==================== */
+
+@layer utilities {
+  .shadow-card {
+    box-shadow: var(--shadow-card);
+  }
+
+  .shadow-card-md {
+    box-shadow: var(--shadow-card-md);
+  }
+
+  .shadow-card-lg {
+    box-shadow: var(--shadow-card-lg);
+  }
+
+  .shadow-card-soft {
+    box-shadow: var(--shadow-card-soft);
+  }
+}
+
+/* ==================== CDK Drag-Drop Styles ==================== */
+
+/* Drag Preview - Element being dragged */
+.cdk-drag-preview {
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
+  border-radius: 6px;
+  background-color: var(--card);
+  z-index: 10000 !important;
+  pointer-events: none;
+  opacity: 1;
+  padding: 1rem;
+}
+
+.dark .cdk-drag-preview {
+  border: 1px solid var(--border);
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
+}
+
+/* Drag Placeholder - Empty space where item was */
+.cdk-drag-placeholder {
+  background-color: color-mix(in srgb, var(--primary) 12%, transparent);
+  border: 2px dashed var(--primary);
+  border-radius: 6px;
+  opacity: 0.8;
+  visibility: visible;
+}
+
+.cdk-drag-placeholder * {
+  opacity: 0;
+}
+
+/* Drag Animation - Item movement transition */
+.cdk-drag-animating {
+  transition: transform 100ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+/* Drop List Animation - Smooth sorting transition */
+.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder) {
+  transition: transform 100ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+/* Dragging Item - No transition during drag */
+.cdk-drag-dragging {
+  transition: none !important;
+}

package/assets/css/tailwind.css

@@ -0,0 +1,56 @@
+@import 'tailwindcss';
+
+/* Scan z-ui compiled components for class generation */
+@source '../../fesm2022';
+
+/* Configure dark mode to use class instead of prefers-color-scheme */
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+/* Base styles */
+@import './base.css';
+
+/* Animations */
+@import './animations.css';
+
+/* Themes - Homy theme is the default */
+/* Other themes are lazy loaded by ZThemeService when setTheme() is called */
+@import './themes/homy.css';