@ngbase/adk 0.1.0 → 0.1.2

package/schematics/components/files/color-picker/color-picker.ts.template

@@ -0,0 +1,104 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+  ColorAlpha,
+  ColorAlphaThumb,
+  ColorHue,
+  ColorHueThumb,
+  ColorPickerTrigger,
+  ColorSelected,
+  ColorSpectrum,
+  ColorSpectrumSelector,
+  NgbColorInput,
+  NgbColorPicker,
+  registerColorPicker,
+} from '@ngbase/adk/color-picker';
+import { InputBase } from '@ngbase/adk/form-field';
+
+@Component({
+  selector: '<%= name %>-color-picker-container',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    ColorSpectrum,
+    ColorSpectrumSelector,
+    ColorSelected,
+    ColorHue,
+    ColorHueThumb,
+    ColorAlpha,
+    ColorAlphaThumb,
+  ],
+  template: `
+    <div class="flex w-full flex-col">
+      <div ngbColorSpectrum class="relative h-[160px] w-full overflow-hidden rounded-md">
+        <button
+          ngbColorSpectrumSelector
+          class="pointer-events-none absolute -left-2 -top-2 h-4 w-4 cursor-pointer rounded-full border"
+        ></button>
+      </div>
+      <div class="flex gap-4 p-3">
+        <div ngbColorSelected class="aspect-square w-10 rounded-md border bg-slate-500"></div>
+        <div class="flex flex-1 flex-col gap-4">
+          <div ngbColorHue class="relative h-3">
+            <button
+              ngbColorHueThumb
+              class="border-red pointer-events-none absolute -top-1 h-5 w-5 -translate-x-2.5 cursor-pointer rounded-full border-2"
+            ></button>
+          </div>
+
+          <div ngbColorAlpha class="relative h-3">
+            <button
+              ngbColorAlphaThumb
+              class="alpha-selector border-red pointer-events-none absolute -top-1 h-5 w-5 -translate-x-2.5 cursor-pointer rounded-full border-2"
+            ></button>
+          </div>
+        </div>
+      </div>
+      @if (presetColors().length) {
+        <div class="flex flex-wrap gap-2 border-t p-2 pt-3">
+          @for (color of presetColors(); track color) {
+            <button
+              type="button"
+              class="aspect-square w-4 rounded-md border"
+              [style.backgroundColor]="color"
+              (click)="setValue(color, true)"
+            ></button>
+          }
+        </div>
+      }
+    </div>
+  `,
+  host: {
+    class: 'inline-block min-w-[245px]',
+  },
+})
+export class ColorPicker extends NgbColorPicker {}
+
+@Component({
+  selector: '<%= name %>-color-input',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [registerColorPicker({ picker: ColorPicker, accessor: ColorInput })],
+  imports: [ColorPickerTrigger, InputBase],
+  template: `
+    <input
+      ngbInputBase
+      type="text"
+      [value]="value()"
+      (valueChange)="updateValue($event)"
+      class="w-full flex-1 bg-transparent outline-none"
+    />
+    <button
+      #color
+      type="button"
+      ngbColorPickerTrigger
+      [value]="value()"
+      [format]="format()"
+      [presetColors]="presetColors()"
+      (valueChange)="updateValue($event)"
+      class="h-5 w-5 flex-none rounded-full border"
+      [style.backgroundColor]="value()"
+    ></button>
+  `,
+  host: {
+    class: '!inline-flex gap-2 items-center',
+  },
+})
+export class ColorInput extends NgbColorInput {}

package/schematics/components/files/color-picker/index.ts.template

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

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

@@ -0,0 +1,82 @@
+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

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

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

@@ -0,0 +1,117 @@
+import { NgClass } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Button } from '<%= basepath %>/button';
+import { Icon } from '<%= basepath %>/icon';
+import { provideIcons } from '@ng-icons/core';
+import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
+import {
+  CalendarBtn,
+  CalendarDayBtn,
+  CalendarMonthBtn,
+  CalendarTitle,
+  CalendarYearBtn,
+  NgbCalendar,
+  aliasCalendar,
+} from '@ngbase/adk/datepicker';
+import { TimePicker } from './time';
+
+@Component({
+  selector: '<%= name %>-calendar',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [aliasCalendar(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.ts.template

@@ -0,0 +1,58 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import {
+  DatepickerGroup,
+  NgbDatePicker,
+  NgbDatepickerTrigger,
+  aliasDatePicker,
+  registerDatePicker,
+} from '@ngbase/adk/datepicker';
+import { RangePipe } from '@ngbase/adk/utils';
+import { Calendar } from './calendar';
+
+@Component({
+  selector: '<%= name %>-date-picker',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [aliasDatePicker(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> {}
+
+@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 outline-none',
+  },
+})
+export class DatepickerTrigger<D> {}

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

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

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

@@ -0,0 +1,54 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgbTimeInput, NgbTimePicker, aliasTimePicker } from '@ngbase/adk/datepicker';
+import { Button } from '<%= basepath %>/button';
+
+@Component({
+  selector: '<%= name %>-time',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [aliasTimePicker(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 !px-1 !py-0"
+          (click)="changeAm(true)"
+        >
+          AM
+        </button>
+        <button
+          [<%= name %>Button]="!am() ? 'primary' : 'ghost'"
+          class="small !px-1 !py-0"
+          (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

@@ -0,0 +1,89 @@
+import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { Button } from '<%= basepath %>/button';
+import { Icon } from '<%= basepath %>/icon';
+import { provideIcons } from '@ng-icons/core';
+import { lucideX } from '@ng-icons/lucide';
+import {
+  aliasDialog,
+  NgbDialog,
+  NgbDialogBackdrop,
+  NgbDialogClose,
+  NgbDialogContainer,
+  NgbDialogMain,
+  ngbDialogPortal,
+} from '@ngbase/adk/dialog';
+import { DragMove } from '@ngbase/adk/drag';
+
+@Component({
+  selector: '<%= name %>-dialog',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [aliasDialog(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

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

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

@@ -0,0 +1,104 @@
+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

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