@ngbase/adk 0.1.14 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngbase/adk",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "repository": {
     "type": "git",
     "url": "https://github.com/ng-base/ngbase.git"
@@ -36,25 +36,25 @@
       "types": "./a11y/index.d.ts",
       "default": "./fesm2022/ngbase-adk-a11y.mjs"
     },
-    "./avatar": {
-      "types": "./avatar/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-avatar.mjs"
-    },
-    "./autocomplete": {
-      "types": "./autocomplete/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-autocomplete.mjs"
-    },
     "./accordion": {
       "types": "./accordion/index.d.ts",
       "default": "./fesm2022/ngbase-adk-accordion.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"
     },
-    "./bidi": {
-      "types": "./bidi/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-bidi.mjs"
+    "./avatar": {
+      "types": "./avatar/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-avatar.mjs"
+    },
+    "./autocomplete": {
+      "types": "./autocomplete/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-autocomplete.mjs"
     },
     "./cache": {
       "types": "./cache/index.d.ts",
@@ -64,10 +64,6 @@
       "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"
@@ -76,10 +72,6 @@
       "types": "./collections/index.d.ts",
       "default": "./fesm2022/ngbase-adk-collections.mjs"
     },
-    "./clipboard": {
-      "types": "./clipboard/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-clipboard.mjs"
-    },
     "./color-picker": {
       "types": "./color-picker/index.d.ts",
       "default": "./fesm2022/ngbase-adk-color-picker.mjs"
@@ -88,50 +80,58 @@
       "types": "./cookies/index.d.ts",
       "default": "./fesm2022/ngbase-adk-cookies.mjs"
     },
+    "./datepicker": {
+      "types": "./datepicker/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-datepicker.mjs"
+    },
+    "./clipboard": {
+      "types": "./clipboard/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-clipboard.mjs"
+    },
     "./dialog": {
       "types": "./dialog/index.d.ts",
       "default": "./fesm2022/ngbase-adk-dialog.mjs"
     },
+    "./checkbox": {
+      "types": "./checkbox/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-checkbox.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"
-    },
-    "./form-field": {
-      "types": "./form-field/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-form-field.mjs"
-    },
     "./hover-card": {
       "types": "./hover-card/index.d.ts",
       "default": "./fesm2022/ngbase-adk-hover-card.mjs"
     },
-    "./icon": {
-      "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"
     },
+    "./form-field": {
+      "types": "./form-field/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-form-field.mjs"
+    },
+    "./keys": {
+      "types": "./keys/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-keys.mjs"
+    },
     "./layout": {
       "types": "./layout/index.d.ts",
       "default": "./fesm2022/ngbase-adk-layout.mjs"
     },
-    "./jwt": {
-      "types": "./jwt/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-jwt.mjs"
+    "./icon": {
+      "types": "./icon/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-icon.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"
@@ -140,33 +140,29 @@
       "types": "./menu/index.d.ts",
       "default": "./fesm2022/ngbase-adk-menu.mjs"
     },
-    "./network": {
-      "types": "./network/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-network.mjs"
+    "./pagination": {
+      "types": "./pagination/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-pagination.mjs"
     },
     "./otp": {
       "types": "./otp/index.d.ts",
       "default": "./fesm2022/ngbase-adk-otp.mjs"
     },
+    "./network": {
+      "types": "./network/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-network.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",
@@ -180,6 +176,10 @@
       "types": "./select/index.d.ts",
       "default": "./fesm2022/ngbase-adk-select.mjs"
     },
+    "./radio": {
+      "types": "./radio/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-radio.mjs"
+    },
     "./sheet": {
       "types": "./sheet/index.d.ts",
       "default": "./fesm2022/ngbase-adk-sheet.mjs"
@@ -188,25 +188,29 @@
       "types": "./selectable/index.d.ts",
       "default": "./fesm2022/ngbase-adk-selectable.mjs"
     },
-    "./sidenav": {
-      "types": "./sidenav/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-sidenav.mjs"
-    },
     "./slider": {
       "types": "./slider/index.d.ts",
       "default": "./fesm2022/ngbase-adk-slider.mjs"
     },
+    "./sidenav": {
+      "types": "./sidenav/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-sidenav.mjs"
+    },
     "./sonner": {
       "types": "./sonner/index.d.ts",
       "default": "./fesm2022/ngbase-adk-sonner.mjs"
     },
+    "./switch": {
+      "types": "./switch/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-switch.mjs"
+    },
     "./stepper": {
       "types": "./stepper/index.d.ts",
       "default": "./fesm2022/ngbase-adk-stepper.mjs"
     },
-    "./switch": {
-      "types": "./switch/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-switch.mjs"
+    "./table": {
+      "types": "./table/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-table.mjs"
     },
     "./test": {
       "types": "./test/index.d.ts",
@@ -216,10 +220,6 @@
       "types": "./tabs/index.d.ts",
       "default": "./fesm2022/ngbase-adk-tabs.mjs"
     },
-    "./table": {
-      "types": "./table/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-table.mjs"
-    },
     "./toggle": {
       "types": "./toggle/index.d.ts",
       "default": "./fesm2022/ngbase-adk-toggle.mjs"
@@ -228,22 +228,22 @@
       "types": "./toggle-group/index.d.ts",
       "default": "./fesm2022/ngbase-adk-toggle-group.mjs"
     },
-    "./tour": {
-      "types": "./tour/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-tour.mjs"
-    },
     "./tooltip": {
       "types": "./tooltip/index.d.ts",
       "default": "./fesm2022/ngbase-adk-tooltip.mjs"
     },
-    "./translate": {
-      "types": "./translate/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-translate.mjs"
-    },
     "./tree": {
       "types": "./tree/index.d.ts",
       "default": "./fesm2022/ngbase-adk-tree.mjs"
     },
+    "./tour": {
+      "types": "./tour/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-tour.mjs"
+    },
+    "./translate": {
+      "types": "./translate/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-translate.mjs"
+    },
     "./utils": {
       "types": "./utils/index.d.ts",
       "default": "./fesm2022/ngbase-adk-utils.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 +0,0 @@
-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 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 };
-}
-
-@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>
-      }
-    </div>
-  `,
-})
-export class Alert {
-  diaRef = inject<DialogRef<AlertOptions>>(DialogRef);
-
-  data = this.diaRef.options?.data;
-}

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);
 }