@ngbase/adk 0.1.1 → 0.1.3

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

@@ -1,82 +0,0 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { RouterLink } from '@angular/router';
-import { AccessibleGroup, AccessibleItem, Autofocus } from '@ngbase/adk/a11y';
-import { DialogRef } from '@ngbase/adk/portal';
-import { filterFunction, uniqueId } from '@ngbase/adk/utils';
-import { List } from '<%= basepath %>/list';
-
-export interface CommandGroup {
-  name: string;
-  items: CommandItem[];
-}
-
-export interface CommandItem {
-  name: string;
-  link: string;
-}
-
-@Component({
-  selector: '<%= name %>-command',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [FormsModule, List, AccessibleGroup, AccessibleItem, Autofocus, RouterLink],
-  template: `
-    <div ngbAccessibleGroup [ayId]="ayId" [isPopup]="true" class="static w-full">
-      <input
-        ngbAutofocus
-        [(ngModel)]="filter.search"
-        type="text"
-        placeholder="Search for apps and commands"
-        class="sticky -top-4 w-full border-b bg-foreground p-4 outline-none"
-      />
-      @for (group of filter.filteredList(); track group.name) {
-        <h4 class="mx-4 my-2 text-sm text-gray-500">{{ group.name }}</h4>
-        <div class="flex flex-col px-2">
-          @for (item of group.items; track item.name) {
-            <a
-              <%= name %>List
-              class="w-full"
-              [ayId]="ayId"
-              [routerLink]="item.link || null"
-              (click)="close()"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="mr-2"
-              >
-                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
-              </svg>
-              <span>{{ item.name }}</span>
-            </a>
-          }
-        </div>
-      }
-    </div>
-  `,
-  host: {
-    class: 'block -m-4',
-  },
-})
-export class Command {
-  private dialogRef = inject<DialogRef<CommandGroup[]>>(DialogRef);
-
-  readonly ayId = uniqueId();
-
-  readonly filter = filterFunction<CommandGroup, CommandItem>(this.dialogRef.data!, {
-    filter: item => item.name,
-    key: 'items',
-    childrenFilter: item => item.items,
-  });
-
-  close() {
-    this.dialogRef.close();
-  }
-}

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

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

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

@@ -1,117 +0,0 @@
-import { NgClass } from '@angular/common';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import {
-  CalendarBtn,
-  CalendarDayBtn,
-  CalendarMonthBtn,
-  CalendarTitle,
-  CalendarYearBtn,
-  NgbCalendar,
-  provideCalendar,
-} from '@ngbase/adk/datepicker';
-import { Button } from '<%= basepath %>/button';
-import { Icon } from '<%= basepath %>/icon';
-import { provideIcons } from '@ng-icons/core';
-import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
-import { TimePicker } from './time';
-
-@Component({
-  selector: '<%= name %>-calendar',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideCalendar(Calendar)],
-  viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
-  imports: [
-    NgClass,
-    Button,
-    Icon,
-    TimePicker,
-    CalendarBtn,
-    CalendarTitle,
-    CalendarYearBtn,
-    CalendarMonthBtn,
-    CalendarDayBtn,
-  ],
-  template: `
-    <div class="mb-2 flex items-center justify-between">
-      <button ngbCalendarBtn="left" <%= name %>Button="outline" class="h-6 w-6 rounded-md !px-0">
-        <<%= name %>-icon [name]="dir.isRtl() ? 'lucideChevronRight' : 'lucideChevronLeft'" />
-      </button>
-      <button ngbCalendarTitle <%= name %>Button="ghost" class="small rounded-md">
-        {{ title() }}
-      </button>
-      <button ngbCalendarBtn="right" <%= name %>Button="outline" class="h-6 w-6 rounded-md !px-0">
-        <<%= name %>-icon [name]="dir.isRtl() ? 'lucideChevronLeft' : 'lucideChevronRight'" />
-      </button>
-    </div>
-
-    @if (datePicker.showType() === 'year') {
-      <div class="grid grid-cols-3">
-        @for (year of years(); track year.year) {
-          <button
-            [ngbCalYearBtn]="year"
-            #yearBtn="ngbCalYearBtn"
-            class="items-center justify-center rounded-md py-2 h-9 w-[84px] {{
-              year.disabled ? 'cursor-default opacity-50' : 'hover:bg-muted-background'
-            }}"
-            [ngClass]="{
-              'border bg-muted-background': yearBtn.selected(),
-              '!bg-primary text-foreground': yearBtn.active(),
-            }"
-          >
-            {{ year.year }}
-          </button>
-        }
-      </div>
-    } @else if (datePicker.showType() === 'month') {
-      <div class="grid grid-cols-3">
-        @for (month of months(); track month.value) {
-          <button
-            [ngbCalMonthBtn]="month"
-            #monthBtn="ngbCalMonthBtn"
-            class="items-center justify-center rounded-md py-2 h-9 w-[84px] {{
-              month.disabled ? 'cursor-default opacity-50' : 'hover:bg-muted-background'
-            }}"
-            [ngClass]="{
-              'border bg-muted-background': monthBtn.selected(),
-              '!bg-primary text-foreground': monthBtn.active(),
-            }"
-          >
-            {{ month.name }}
-          </button>
-        }
-      </div>
-    } @else {
-      <div class="day-names grid grid-cols-7">
-        @for (dayName of dayNames; track dayName) {
-          <div class="p-1 text-center text-muted">{{ dayName }}</div>
-        }
-      </div>
-      <div class="grid grid-cols-7 gap-y-2">
-        @for (day of getDaysArray(); track day.day + '-' + day.mon) {
-          <button
-            #days="ngbCalDayBtn"
-            [ngbCalDayBtn]="day"
-            class="mx-auto flex h-9 w-9 items-center justify-center text-center {{
-              day.disabled ? 'cursor-default opacity-50' : 'hover:bg-muted-background'
-            }}"
-            [ngClass]="{
-              'bg-muted-background': days.selected(),
-              'opacity-40': days.dummy(),
-              '!bg-primary text-foreground': days.active(),
-            }"
-          >
-            {{ day.day }}
-          </button>
-        }
-      </div>
-      @if (datePicker.time() && datePicker.range()) {
-        <<%= name %>-time class="mt-5 w-full" [(value)]="time1" (valueChange)="timeChanged(0, time1()!)" />
-        <<%= name %>-time class="mt-5 w-full" [(value)]="time2" (valueChange)="timeChanged(1, time2()!)" />
-      }
-    }
-  `,
-  host: {
-    class: 'inline-flex flex-col min-h-[18.75rem] p-2 w-full',
-  },
-})
-export class Calendar<D> extends NgbCalendar<D> {}

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

@@ -1,27 +0,0 @@
-import { Directive } from '@angular/core';
-import { NgbDatepickerTrigger, registerDatePicker } from '@ngbase/adk/datepicker';
-import { DatePicker } from './datepicker';
-
-@Directive({
-  selector: '[<%= name %>DatepickerTrigger]',
-  providers: [registerDatePicker(DatePicker)],
-  hostDirectives: [
-    {
-      directive: NgbDatepickerTrigger,
-      inputs: [
-        'noOfCalendars',
-        'range',
-        'time',
-        'format',
-        'fieldFormat',
-        'dateFilter',
-        'pickerType',
-        'pickerTemplate',
-      ],
-    },
-  ],
-  host: {
-    class: 'cursor-pointer hover:bg-muted-background',
-  },
-})
-export class DatepickerTrigger<D> {}

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

@@ -1,28 +0,0 @@
-import { NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { DatepickerGroup, NgbDatePicker, provideDatePicker } from '@ngbase/adk/datepicker';
-import { RangePipe } from '@ngbase/adk/utils';
-import { Calendar } from './calendar';
-
-@Component({
-  selector: '<%= name %>-date-picker',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideDatePicker(DatePicker)],
-  imports: [Calendar, RangePipe, NgTemplateOutlet, DatepickerGroup],
-  template: `
-    <div class="flex" ngbDatepickerGroup>
-      @for (no of noOfCalendar() | range; track no) {
-        <<%= name %>-calendar [first]="$first" [last]="$last" [index]="$index" />
-      }
-    </div>
-    @if (template()) {
-      <div class="px-2 pb-2">
-        <ng-container *ngTemplateOutlet="template()" />
-      </div>
-    }
-  `,
-  host: {
-    class: 'inline-block',
-  },
-})
-export class DatePicker<D> extends NgbDatePicker<D> {}

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

@@ -1,3 +0,0 @@
-export * from './datepicker';
-export * from './datepicker-trigger';
-export * from './time';

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

@@ -1,46 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { NgbTimeInput, NgbTimePicker, provideTimePicker } from '@ngbase/adk/datepicker';
-import { Button } from '<%= basepath %>/button';
-
-@Component({
-  selector: '<%= name %>-time',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideTimePicker(TimePicker)],
-  imports: [Button, NgbTimeInput],
-  template: `
-    <input
-      ngbTimeInput="hours"
-      [(value)]="hours"
-      (valueChange)="updateValue()"
-      class="w-7 px-1 text-center font-semibold focus:bg-muted-background"
-    />
-    <span>:</span>
-    <input
-      ngbTimeInput="minutes"
-      [(value)]="minutes"
-      (valueChange)="updateValue()"
-      class="w-7 px-1 text-center font-semibold focus:bg-muted-background"
-    />
-    <span>:</span>
-    <input
-      ngbTimeInput="seconds"
-      [(value)]="seconds"
-      (valueChange)="updateValue()"
-      class="w-7 px-1 text-center font-semibold focus:bg-muted-background"
-    />
-    @if (!is24()) {
-      <div class="ml-1 flex gap-2">
-        <button [<%= name %>Button]="am() ? 'primary' : 'ghost'" class="small" (click)="changeAm(true)">
-          AM
-        </button>
-        <button [<%= name %>Button]="!am() ? 'primary' : 'ghost'" class="small" (click)="changeAm(false)">
-          PM
-        </button>
-      </div>
-    }
-  `,
-  host: {
-    class: 'inline-flex gap-1 items-center justify-center',
-  },
-})
-export class TimePicker extends NgbTimePicker {}

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

@@ -1,89 +0,0 @@
-import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
-import {
-  NgbDialogBackdrop,
-  NgbDialogContainer,
-  NgbDialogMain,
-  ngbDialogPortal,
-  provideDialog,
-  NgbDialog,
-  NgbDialogClose,
-} from '@ngbase/adk/dialog';
-import { DragMove } from '@ngbase/adk/drag';
-import { Button } from '<%= basepath %>/button';
-import { Icon } from '<%= basepath %>/icon';
-import { provideIcons } from '@ng-icons/core';
-import { lucideX } from '@ng-icons/lucide';
-
-@Component({
-  selector: '<%= name %>-dialog',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideDialog(DialogContainer)],
-  viewProviders: [provideIcons({ lucideX })],
-  imports: [Button, Icon, DragMove, NgbDialogMain, NgbDialogBackdrop],
-  template: `
-    <div class="pointer-events-none flex h-full items-center justify-center">
-      <div
-        #myDialog
-        ngbDialogMain
-        [@viewAnimation]
-        class="{{
-          'pointer-events-auto relative flex max-w-[100vw] flex-col overflow-hidden border bg-foreground shadow-lg' +
-            (options().fullWindow
-              ? ' h-screen w-screen border-none'
-              : ' max-w-[calc(100vw-30px)] rounded-lg')
-        }}"
-      >
-        @if (!isHideHeader) {
-          <div
-            class="flex items-center justify-between border-b px-4 py-2"
-            ngbDragMove
-            [target]="myDialog"
-          >
-            <h2 class="flex-1 text-base font-bold">{{ options().title }}</h2>
-            @if (!options().disableClose) {
-              <button <%= name %>Button="ghost" class="-mr-2 !p-2" (click)="close()">
-                <<%= name %>-icon name="lucideX" />
-              </button>
-            }
-          </div>
-        }
-        <div class="h-full overflow-auto p-4">
-          <ng-container #contentContainer />
-        </div>
-      </div>
-      @if (showBackdrop()) {
-        <div
-          class="pointer-events-auto absolute top-0 -z-10 h-full w-full bg-black bg-opacity-30"
-          ngbDialogBackdrop
-          [@fadeAnimation]
-        ></div>
-      }
-    </div>
-  `,
-  host: {
-    class: 'fixed block top-0 bottom-0 left-0 right-0 overflow-auto pointer-events-none z-p',
-  },
-})
-export class DialogContainer extends NgbDialogContainer {}
-
-@Directive({
-  selector: '[<%= name %>DialogClose]',
-  hostDirectives: [NgbDialogClose],
-})
-export class DialogClose {}
-
-@Component({
-  selector: '[<%= name %>DialogTitle]',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<ng-content />`,
-  host: {
-    class: 'text-lg font-semibold',
-  },
-})
-export class DialogTitle {}
-
-export function dialogPortal() {
-  return ngbDialogPortal(DialogContainer);
-}
-
-export type Dialog = NgbDialog;

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

@@ -1,5 +0,0 @@
-/*
- * Public API Surface of dialog
- */
-
-export * from './dialog';

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

@@ -1,104 +0,0 @@
-import { animate, state, style, transition, trigger } from '@angular/animations';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ViewContainerRef,
-  afterNextRender,
-  viewChild,
-} from '@angular/core';
-import { FocusTrap } from '@ngbase/adk/a11y';
-import { BaseDialog, basePortal, DialogInput, DialogOptions } from '@ngbase/adk/portal';
-import { createHostAnimation, fadeAnimation } from '@ngbase/adk/utils';
-
-@Component({
-  selector: '<%= name %>-drawer',
-  template: `
-    <div class="pointer-events-none flex h-full flex-col justify-end">
-      <div
-        class="pointer-events-auto flex max-h-[90vh] flex-col overflow-hidden rounded-tl-2xl rounded-tr-2xl border-t bg-foreground p-4 shadow-2xl"
-        [@bottomAnimation]
-      >
-        <button class="mx-auto h-2 w-20 rounded-full bg-muted"></button>
-        @if (!isHideHeader) {
-          <div class="flex h-8 items-center">
-            <h2 class="flex-1 font-bold">{{ options.title }}</h2>
-            <!-- <button <%= name %>Button (click)="close()" class="mr-1"></button> -->
-          </div>
-        }
-        <div class="h-full overflow-auto">
-          <ng-container #myDialog />
-        </div>
-      </div>
-    </div>
-    @if (backdropColor) {
-      <div
-        class="absolute top-0 -z-10 h-full w-full bg-black bg-opacity-30"
-        [@fadeAnimation]
-        (click)="close()"
-      ></div>
-    }
-  `,
-  host: {
-    class: 'fixed block top-0 bottom-0 left-0 right-0 overflow-hidden z-p',
-    '[@parentAnimation]': '',
-    '(@parentAnimation.done)': 'animationDone()',
-  },
-  hostDirectives: [FocusTrap],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [
-    createHostAnimation(['@bottomAnimation', '@fadeAnimation']),
-    trigger('bottomAnimation', [
-      state('1', style({ transform: 'none' })),
-      state('void', style({ transform: 'translate3d(0, 100%, 0)' })),
-      state('0', style({ transform: 'translate3d(0, 100%, 0)' })),
-      transition('* => *', animate('200ms ease')),
-    ]),
-    fadeAnimation('200ms'),
-  ],
-})
-export class DrawerContainer extends BaseDialog {
-  myDialog = viewChild('myDialog', { read: ViewContainerRef });
-  backdropColor = true;
-  options!: DialogOptions;
-  classNames = '';
-  isHideHeader = false;
-
-  constructor() {
-    super();
-    afterNextRender(() => {
-      this._afterViewSource.next(this.myDialog()!);
-    });
-  }
-
-  override setOptions(options: DialogOptions): void {
-    this.options = options;
-    this.classNames = this.options.classNames?.join(' ') || '';
-    this.isHideHeader = this.options.header || false;
-    this.backdropColor = this.options.backdropColor || true;
-  }
-}
-
-export function drawerPortal() {
-  const NAME = 'sheet';
-  const base = basePortal(NAME, DrawerContainer);
-
-  function open<T>(component: DialogInput<T>, opt?: DialogOptions) {
-    const { diaRef } = base.open(
-      component,
-      (comp, options) => {
-        comp.instance.setOptions(options);
-      },
-      opt,
-    );
-
-    const { afterClosed } = diaRef;
-    return { afterClosed };
-  }
-
-  function closeAll() {
-    base.closeAll();
-  }
-  return { open, closeAll };
-}
-
-export type Drawer = ReturnType<typeof drawerPortal>;

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

@@ -1,5 +0,0 @@
-/*
- * Public API Surface of drawer
- */
-
-export * from './drawer';

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

@@ -1,7 +0,0 @@
-/*
- * Public API Surface of input
- */
-
-export * from './input';
-export * from './otp';
-export * from './input-style.directive';

package/schematics/components/files/form-field/input-style.directive.ts.template

@@ -1,11 +0,0 @@
-import { Directive } from '@angular/core';
-import { ɵFocusStyle as FocusStyle } from '<%= basepath %>/checkbox';
-
-@Directive({
-  selector: '[<%= name %>InputStyle]',
-  hostDirectives: [{ directive: FocusStyle, inputs: ['unfocus'] }],
-  host: {
-    class: 'inline-block rounded-lg bg-foreground px-3 py-2 border font-normal min-h-10',
-  },
-})
-export class InputStyle {}

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

@@ -1,100 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Directive,
-  effect,
-  ElementRef,
-  inject,
-  viewChild,
-} from '@angular/core';
-import {
-  InputBase,
-  NgbFormField,
-  NgbInputError,
-  NgbLabel,
-  toggleDiv,
-} from '@ngbase/adk/form-field';
-import { InputStyle } from './input-style.directive';
-import { NgbSelectTarget } from '@ngbase/adk/select';
-
-@Component({
-  selector: '<%= name %>-form-field, [<%= name %>FormField]',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  hostDirectives: [NgbFormField, NgbSelectTarget],
-  imports: [InputStyle],
-  template: `
-    <ng-content select="[<%= name %>Label]" />
-    <ng-content select="[<%= name %>Description]" />
-    <div class="flex items-center" #target <%= name %>InputStyle>
-      <ng-content select="[<%= name %>InputPrefix]" />
-      <ng-content />
-      <ng-content select="[<%= name %>InputSuffix]" />
-    </div>
-    <ng-content select="[<%= name %>Error]" />
-  `,
-  host: {
-    class: 'inline-flex flex-col font-medium mb-2 gap-1',
-  },
-})
-export class FormField {
-  readonly selectTarget = inject(NgbSelectTarget);
-  readonly target = viewChild.required<ElementRef<HTMLDivElement>>('target');
-  private _ = effect(() => {
-    this.selectTarget.target.set(this.target().nativeElement);
-  });
-}
-
-@Directive({
-  selector: '[<%= name %>Input]',
-  hostDirectives: [{ directive: InputBase, inputs: ['value'] }],
-  host: {
-    class: 'focus:outline-none',
-    '[class.border-red-500]': 'formField?.hasErrors()',
-  },
-})
-export class Input<T = unknown> {
-  readonly formField = inject(NgbFormField, { optional: true });
-}
-
-@Component({
-  selector: '[<%= name %>Label]',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  hostDirectives: [NgbLabel],
-  template: `<ng-content />`,
-  host: {
-    class: 'block font-medium mx-0.5',
-  },
-})
-export class Label {}
-
-@Directive({
-  selector: '[<%= name %>Description]',
-  host: {
-    class: 'text-sm text-muted',
-  },
-})
-export class Description {}
-
-@Directive({
-  selector: '[<%= name %>InputPrefix]',
-})
-export class InputPrefix {}
-
-@Component({
-  selector: '[<%= name %>Error]',
-  hostDirectives: [{ directive: NgbInputError, inputs: ['ngbError: <%= name %>Error'] }],
-  template: `<ng-content />`,
-  host: {
-    class: 'text-red-500 mx-0.5',
-    '[@toggleDiv]': 'isInvalid() ? "visible" : "hidden"',
-  },
-  animations: [toggleDiv],
-})
-export class InputError {
-  readonly error = inject(NgbInputError);
-  readonly isInvalid = this.error.isInvalid;
-
-  constructor() {
-    this.error.animate.set(true);
-  }
-}

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

@@ -1,37 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { injectDirectionality } from '@ngbase/adk/bidi';
-import { NgbInputOtp, NgbOtpInput, NgbOtpValue, provideInputOtp } from '@ngbase/adk/form-field';
-import { NumberOnly, RangePipe } from '@ngbase/adk/utils';
-import { InputStyle } from './input-style.directive';
-
-@Component({
-  selector: '<%= name %>-input-otp',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideInputOtp(InputOtp)],
-  imports: [InputStyle, RangePipe, NgbOtpInput, NgbOtpValue, NumberOnly],
-  template: `
-    @for (num of size(); track $index; let l = $last) {
-      @for (n of num | range; track n; let i = $index; let ll = $last) {
-        <div
-          <%= name %>InputStyle
-          ngbOtpValue
-          class="{{
-            'mb-0 aspect-square w-10 rounded-none !px-0 text-center text-base font-semibold data-[disabled]:bg-muted-background/40 data-[disabled]:text-muted data-[focus]:relative' +
-              ((dir.isRtl() ? ll : i === 0) ? ' !rounded-l-lg' : '') +
-              ((dir.isRtl() ? i === 0 : ll) ? ' !rounded-r-lg' : '')
-          }}"
-        ></div>
-      }
-      @if (!l) {
-        <div class="px-2">-</div>
-      }
-    }
-    <input type="text" ngbOtpInput ngbNumberOnly class="selection:bg-transparent" />
-  `,
-  host: {
-    class: 'inline-flex items-center justify-center rounded-lg relative',
-  },
-})
-export class InputOtp extends NgbInputOtp {
-  readonly dir = injectDirectionality();
-}