@ngbase/adk 0.1.14 → 0.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngbase/adk",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "repository": {
     "type": "git",
     "url": "https://github.com/ng-base/ngbase.git"
@@ -48,14 +48,14 @@
       "types": "./accordion/index.d.ts",
       "default": "./fesm2022/ngbase-adk-accordion.mjs"
     },
-    "./breadcrumb": {
-      "types": "./breadcrumb/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-breadcrumb.mjs"
-    },
     "./bidi": {
       "types": "./bidi/index.d.ts",
       "default": "./fesm2022/ngbase-adk-bidi.mjs"
     },
+    "./breadcrumb": {
+      "types": "./breadcrumb/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-breadcrumb.mjs"
+    },
     "./cache": {
       "types": "./cache/index.d.ts",
       "default": "./fesm2022/ngbase-adk-cache.mjs"
@@ -64,22 +64,22 @@
       "types": "./carousel/index.d.ts",
       "default": "./fesm2022/ngbase-adk-carousel.mjs"
     },
-    "./checkbox": {
-      "types": "./checkbox/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-checkbox.mjs"
-    },
     "./chip": {
       "types": "./chip/index.d.ts",
       "default": "./fesm2022/ngbase-adk-chip.mjs"
     },
-    "./collections": {
-      "types": "./collections/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-collections.mjs"
-    },
     "./clipboard": {
       "types": "./clipboard/index.d.ts",
       "default": "./fesm2022/ngbase-adk-clipboard.mjs"
     },
+    "./checkbox": {
+      "types": "./checkbox/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-checkbox.mjs"
+    },
+    "./collections": {
+      "types": "./collections/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-collections.mjs"
+    },
     "./color-picker": {
       "types": "./color-picker/index.d.ts",
       "default": "./fesm2022/ngbase-adk-color-picker.mjs"
@@ -92,14 +92,14 @@
       "types": "./dialog/index.d.ts",
       "default": "./fesm2022/ngbase-adk-dialog.mjs"
     },
-    "./drag": {
-      "types": "./drag/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-drag.mjs"
-    },
     "./datepicker": {
       "types": "./datepicker/index.d.ts",
       "default": "./fesm2022/ngbase-adk-datepicker.mjs"
     },
+    "./drag": {
+      "types": "./drag/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-drag.mjs"
+    },
     "./form-field": {
       "types": "./form-field/index.d.ts",
       "default": "./fesm2022/ngbase-adk-form-field.mjs"
@@ -112,6 +112,10 @@
       "types": "./icon/index.d.ts",
       "default": "./fesm2022/ngbase-adk-icon.mjs"
     },
+    "./jwt": {
+      "types": "./jwt/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-jwt.mjs"
+    },
     "./inline-edit": {
       "types": "./inline-edit/index.d.ts",
       "default": "./fesm2022/ngbase-adk-inline-edit.mjs"
@@ -120,54 +124,50 @@
       "types": "./layout/index.d.ts",
       "default": "./fesm2022/ngbase-adk-layout.mjs"
     },
-    "./jwt": {
-      "types": "./jwt/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-jwt.mjs"
+    "./keys": {
+      "types": "./keys/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-keys.mjs"
     },
     "./list": {
       "types": "./list/index.d.ts",
       "default": "./fesm2022/ngbase-adk-list.mjs"
     },
-    "./keys": {
-      "types": "./keys/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-keys.mjs"
-    },
     "./mask": {
       "types": "./mask/index.d.ts",
       "default": "./fesm2022/ngbase-adk-mask.mjs"
     },
-    "./menu": {
-      "types": "./menu/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-menu.mjs"
-    },
     "./network": {
       "types": "./network/index.d.ts",
       "default": "./fesm2022/ngbase-adk-network.mjs"
     },
+    "./menu": {
+      "types": "./menu/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-menu.mjs"
+    },
     "./otp": {
       "types": "./otp/index.d.ts",
       "default": "./fesm2022/ngbase-adk-otp.mjs"
     },
+    "./pagination": {
+      "types": "./pagination/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-pagination.mjs"
+    },
     "./popover": {
       "types": "./popover/index.d.ts",
       "default": "./fesm2022/ngbase-adk-popover.mjs"
     },
-    "./portal": {
-      "types": "./portal/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-portal.mjs"
-    },
     "./progress": {
       "types": "./progress/index.d.ts",
       "default": "./fesm2022/ngbase-adk-progress.mjs"
     },
-    "./pagination": {
-      "types": "./pagination/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-pagination.mjs"
-    },
     "./radio": {
       "types": "./radio/index.d.ts",
       "default": "./fesm2022/ngbase-adk-radio.mjs"
     },
+    "./portal": {
+      "types": "./portal/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-portal.mjs"
+    },
     "./resizable": {
       "types": "./resizable/index.d.ts",
       "default": "./fesm2022/ngbase-adk-resizable.mjs"
@@ -176,6 +176,10 @@
       "types": "./scroll-area/index.d.ts",
       "default": "./fesm2022/ngbase-adk-scroll-area.mjs"
     },
+    "./selectable": {
+      "types": "./selectable/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-selectable.mjs"
+    },
     "./select": {
       "types": "./select/index.d.ts",
       "default": "./fesm2022/ngbase-adk-select.mjs"
@@ -184,10 +188,6 @@
       "types": "./sheet/index.d.ts",
       "default": "./fesm2022/ngbase-adk-sheet.mjs"
     },
-    "./selectable": {
-      "types": "./selectable/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-selectable.mjs"
-    },
     "./sidenav": {
       "types": "./sidenav/index.d.ts",
       "default": "./fesm2022/ngbase-adk-sidenav.mjs"
@@ -208,22 +208,22 @@
       "types": "./switch/index.d.ts",
       "default": "./fesm2022/ngbase-adk-switch.mjs"
     },
-    "./test": {
-      "types": "./test/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-test.mjs"
-    },
-    "./tabs": {
-      "types": "./tabs/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-tabs.mjs"
-    },
     "./table": {
       "types": "./table/index.d.ts",
       "default": "./fesm2022/ngbase-adk-table.mjs"
     },
+    "./test": {
+      "types": "./test/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-test.mjs"
+    },
     "./toggle": {
       "types": "./toggle/index.d.ts",
       "default": "./fesm2022/ngbase-adk-toggle.mjs"
     },
+    "./tabs": {
+      "types": "./tabs/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-tabs.mjs"
+    },
     "./toggle-group": {
       "types": "./toggle-group/index.d.ts",
       "default": "./fesm2022/ngbase-adk-toggle-group.mjs"
@@ -253,4 +253,4 @@
       "default": "./fesm2022/ngbase-adk-virtualizer.mjs"
     }
   }
-}
+}

package/schematics/components/files/alert/alert-llm.md.template

@@ -1,34 +1,22 @@
 # MEE Alert
 
 ```typescript
-import { alertPortal } from '@/ui/alert';
+import { Alert } from '@/ui/alert';
 ```
 
-## Usage
+## Components
+
+### `<<%= name %>-alert>`
 
-```ts
-const alert = alertPortal();
-alert.open({
-  title: 'Alert',
-  description: 'This is an alert',
-  actions: [
-    {
-      text: 'Cancel',
-      type: 'secondary', // ButtonVariant
-      handler: close => close(),
-    },
-    {
-      text: 'OK',
-      type: 'primary', // ButtonVariant
-      handler: close => {
-        okHandler();
-        close();
-      },
-    },
-  ],
-});
+- **Inputs:**
+  - `variant`: 'error' | 'default' | 'success' | 'info' = 'default' - The variant of the alert
+
+## Usage
 
-function okHandler() {
-  console.log('OK');
-}
+```html
+<<%= name %>-alert variant="info">
+  <ng-container class="a-title">Info</ng-container>
+  This is an info alert
+</<%= name %>-alert>
+<<%= name %>-alert variant="success"> This is a success alert </<%= name %>-alert>
 ```

package/schematics/components/files/alert/alert.ts.template

@@ -1,62 +1,43 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { DialogInput, DialogOptions, DialogRef } from '@ngbase/adk/portal';
-import { Button, ButtonVariant } from '<%= basepath %>/button';
-import { dialogPortal } from '<%= basepath %>/dialog';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { Icon } from '<%= basepath %>/icon';
+import { lucideInfo, lucideCircleCheck, lucideCircleAlert } from '@ng-icons/lucide';
 
-export interface AlertOptions {
-  title?: string;
-  description?: string;
-  actions?: {
-    text: string;
-    type?: ButtonVariant;
-    handler: (fn: (v?: any) => any) => any;
-  }[];
-}
-
-export function alertPortal() {
-  const base = dialogPortal();
-
-  function open<T>(opt: AlertOptions, comp?: DialogInput<T>) {
-    const options: DialogOptions = {
-      ...new DialogOptions(),
-      data: opt,
-      title: opt.title,
-      width: '32rem',
-      maxWidth: '95vw',
-      disableClose: true,
-      header: true,
-      focusTrap: true,
-    };
-
-    const diaRef = base.open(comp || Alert, options);
-
-    return diaRef;
-  }
-
-  function closeAll() {
-    base.closeAll();
-  }
-  return { open, closeAll };
-}
+export type AlertVariant = 'error' | 'default' | 'success' | 'info';
 
 @Component({
   selector: '<%= name %>-alert',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [Button],
-  template: `
-    <h4 class="mb-2 text-base font-bold">{{ data?.title }}</h4>
-    <p class="text-muted-foreground pb-3">{{ data?.description }}</p>
-    <div class="flex justify-end gap-4 pt-1">
-      @for (action of data?.actions; track action) {
-        <button [<%= name %>Button]="action.type || 'primary'" (click)="action.handler(diaRef.close)">
-          {{ action.text }}
-        </button>
-      }
+  imports: [Icon],
+  template: `<div class="flex items-start space-x-2">
+    <<%= name %>-icon [svg]="i[variant()]" size="16" class="mt-0.5 text-blue-600" />
+    <div class="text-sm text-blue-800">
+      <p class="mb-1 font-medium empty:hidden"><ng-content select=".a-title" /></p>
+      <p><ng-content /></p>
     </div>
-  `,
+  </div>`,
+  host: {
+    class: 'block rounded-lg p-3',
+    '[class]': 'hostClass()',
+    role: 'status',
+  },
 })
 export class Alert {
-  diaRef = inject<DialogRef<AlertOptions>>(DialogRef);
-
-  data = this.diaRef.options?.data;
+  readonly variant = input<AlertVariant>('default');
+  readonly i = {
+    default: lucideInfo,
+    info: lucideInfo,
+    success: lucideCircleCheck,
+    error: lucideCircleAlert,
+  };
+
+  readonly hostClass = computed(() => {
+    const base = 'block rounded-md p-4';
+    const variants: Record<AlertVariant, string> = {
+      error: 'bg-red-50 text-red-800 border border-red-200',
+      success: 'bg-green-50 text-green-800 border border-green-200',
+      info: 'bg-blue-50 text-blue-800 border border-blue-200',
+      default: 'bg-slate-50 text-slate-800 border border-slate-200',
+    };
+    return `${base} ${variants[this.variant()] ?? variants.default}`;
+  });
 }

package/schematics/components/files/confirmation/confirmation-llm.md.template

@@ -0,0 +1,34 @@
+# MEE Confirmation
+
+```typescript
+import { confirmationPortal } from '@/ui/confirmation';
+```
+
+## Usage
+
+```ts
+const confirmation = confirmationPortal();
+confirmation.open({
+  title: 'Confirmation',
+  description: 'This is a confirmation dialog.',
+  actions: [
+    {
+      text: 'Cancel',
+      type: 'secondary', // ButtonVariant
+      handler: close => close(),
+    },
+    {
+      text: 'OK',
+      type: 'primary', // ButtonVariant
+      handler: close => {
+        okHandler();
+        close();
+      },
+    },
+  ],
+});
+
+function okHandler() {
+  console.log('OK');
+}
+```

package/schematics/components/files/confirmation/confirmation.ts.template

@@ -0,0 +1,62 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { DialogInput, DialogOptions, DialogRef } from '@ngbase/adk/portal';
+import { Button, ButtonVariant } from '<%= basepath %>/button';
+import { dialogPortal } from '<%= basepath %>/dialog';
+
+export interface ConfirmationOptions {
+  title?: string;
+  description?: string;
+  actions?: {
+    text: string;
+    type?: ButtonVariant;
+    handler: (fn: (v?: any) => any) => any;
+  }[];
+}
+
+export function ConfirmationPortal() {
+  const base = dialogPortal();
+
+  function open<T>(opt: ConfirmationOptions, comp?: DialogInput<T>) {
+    const options: DialogOptions = {
+      ...new DialogOptions(),
+      data: opt,
+      title: opt.title,
+      width: '32rem',
+      maxWidth: '95vw',
+      disableClose: true,
+      header: true,
+      focusTrap: true,
+    };
+
+    const diaRef = base.open(comp || Confirmation, options);
+
+    return diaRef;
+  }
+
+  function closeAll() {
+    base.closeAll();
+  }
+  return { open, closeAll };
+}
+
+@Component({
+  selector: '<%= name %>-confirmation',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [Button],
+  template: `
+    <!-- <h4 class="mb-2 text-base font-bold">{{ data?.title }}</h4> -->
+    <p class="text-muted-foreground pb-3">{{ data?.description }}</p>
+    <div class="flex justify-end gap-4 pt-1">
+      @for (action of data?.actions; track action) {
+        <button [<%= name %>Button]="action.type || 'primary'" (click)="action.handler(diaRef.close)">
+          {{ action.text }}
+        </button>
+      }
+    </div>
+  `,
+})
+export class Confirmation {
+  diaRef = inject<DialogRef<ConfirmationOptions>>(DialogRef);
+
+  data = this.diaRef.options?.data;
+}

package/schematics/components/files/confirmation/index.ts.template

@@ -0,0 +1 @@
+export * from './confirmation';

package/schematics/components/files/datepicker/datepicker.ts.template

@@ -40,7 +40,8 @@ export class DatePicker<D> extends NgbDatePicker<D> {}
   exportAs: '<%= name %>DatepickerTrigger',
   providers: [registerDatePicker(DatePicker), aliasDatePickerTrigger(DatepickerTrigger)],
   host: {
-    class: 'cursor-pointer hover:bg-muted outline-none w-full bg-transparent',
+    class:
+      'cursor-pointer hover:bg-muted outline-none w-full bg-transparent placeholder:text-gray-400',
   },
 })
 export class DatepickerTrigger<D> extends NgbDatepickerTrigger<D> {}

package/schematics/components/files/form-field/form-field.ts.template

@@ -49,7 +49,7 @@ export class FormField {
   selector: '[<%= name %>Input]',
   hostDirectives: [{ directive: InputBase, inputs: ['value'], outputs: ['valueChange'] }],
   host: {
-    class: 'outline-none w-full bg-transparent',
+    class: 'outline-none w-full bg-transparent placeholder:text-gray-400',
     '[class.border-red-500]': 'formField?.hasErrors()',
   },
 })

package/schematics/components/files/icon/icon.ts.template

@@ -5,12 +5,13 @@ import { IconType, NgIconComponent } from '@ng-icons/core';
   selector: '<%= name %>-icon',
   imports: [NgIconComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<ng-icon [name]="name()" [size]="size()"></ng-icon>`,
+  template: `<ng-icon [name]="name()" [svg]="svg()" [size]="size()"></ng-icon>`,
   host: {
     class: 'inline-flex items-center justify-center',
   },
 })
 export class Icon {
-  readonly name = input.required<IconType>();
+  readonly name = input<IconType>();
   readonly size = input<string>('1rem');
+  readonly svg = input<string>();
 }

package/schematics/components/files/spinner/spinner.ts.template

@@ -1,4 +1,4 @@
-import { Component, input } from '@angular/core';
+import { Component, input, numberAttribute } from '@angular/core';
 
 @Component({
   selector: '<%= name %>-spinner',
@@ -45,7 +45,7 @@ import { Component, input } from '@angular/core';
 })
 export class Spinner {
   readonly mode = input<'light' | 'dark' | ''>('light');
-  readonly diameter = input<number>(35);
-  readonly strokeWidth = input<any>(3);
+  readonly diameter = input(35, { transform: numberAttribute });
+  readonly strokeWidth = input(3, { transform: numberAttribute });
   readonly root = input<boolean>(false);
 }

package/schematics/components/schema.json

@@ -7,21 +7,22 @@
     "name": {
       "description": "The name of the component prefix.",
       "x-prompt": "What is the name of the component prefix?",
-      "type": "string"
+      "type": "string",
+      "default": "mee"
     },
     "path": {
       "description": "Where should be created the file",
       "type": "string",
       "format": "path",
       "x-prompt": "Where should be created the file?",
-      "default": "src/app"
+      "default": "src/app/ui"
     },
     "basepath": {
       "description": "The base path of the UI library.",
       "type": "string",
       "format": "path",
       "x-prompt": "What is the base path of the UI library?",
-      "default": "@"
+      "default": "@/ui"
     },
     "component": {
       "description": "The file extension or preprocessor to use for style files.",