@ngbase/adk 0.1.2 → 0.1.3

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

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

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

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

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

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

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

@@ -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/form-field.ts.template

@@ -1,111 +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="mt-1 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 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]',
-  host: {
-    class: 'mr-2.5',
-  },
-})
-export class InputPrefix {}
-
-@Directive({
-  selector: '[<%= name %>InputSuffix]',
-  host: {
-    class: 'ml-2.5',
-  },
-})
-export class InputSuffix {}
-
-@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/index.ts.template

@@ -1,6 +0,0 @@
-/*
- * Public API Surface of input
- */
-
-export * from './form-field';
-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-2.5 py-2 border font-normal min-h-10',
-  },
-})
-export class InputStyle {}

package/schematics/components/files/hover-card/hover-card.ts.template

@@ -1,13 +0,0 @@
-import { Directive } from '@angular/core';
-import { NgbHoverCard } from '@ngbase/adk/hover-card';
-
-@Directive({
-  selector: '[<%= name %>HoverCard]',
-  hostDirectives: [
-    {
-      directive: NgbHoverCard,
-      inputs: ['ngbHoverCard: <%= name %>HoverCard', 'options', 'delay'],
-    },
-  ],
-})
-export class HoverCard<T = any> {}

package/schematics/components/files/hover-card/index.ts.template

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

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

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

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

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

package/schematics/components/files/inline-edit/index.ts.template

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

package/schematics/components/files/inline-edit/inline-edit.ts.template

@@ -1,24 +0,0 @@
-import { Component } from '@angular/core';
-import {
-  NgbInlineEdit,
-  NgbInlineInput,
-  NgbInlineValue,
-  provideInlineEdit,
-} from '@ngbase/adk/inline-edit';
-
-@Component({
-  selector: '<%= name %>-inline-edit',
-  imports: [NgbInlineInput, NgbInlineValue],
-  providers: [provideInlineEdit(), { provide: NgbInlineEdit, useExisting: InlineEdit }],
-  template: `
-    @if (isEditing()) {
-      <input
-        ngbInlineInput
-        class="rounded p-1 drop-shadow-md focus:border-transparent focus:outline-none"
-      />
-    } @else {
-      <div ngbInlineValue class="cursor-pointer p-1">{{ localValue() }}</div>
-    }
-  `,
-})
-export class InlineEdit extends NgbInlineEdit {}

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

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

package/schematics/components/files/keys/key.ts.template

@@ -1,35 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  effect,
-  ElementRef,
-  inject,
-  Injector,
-  input,
-} from '@angular/core';
-import { keyMap } from '@ngbase/adk/keys';
-
-@Component({
-  selector: '<%= name %>-key, [<%= name %>Key]',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `{{ content() }}`,
-  host: {
-    class: 'ml-auto text-xs tracking-widest opacity-60 text-muted',
-  },
-})
-export class Key {
-  readonly el = inject<ElementRef<HTMLButtonElement>>(ElementRef);
-
-  readonly <%= name %>Key = input.required<string>();
-  readonly content = computed(() => {
-    return this.<%= name %>Key().replace(/\+/g, ' ');
-  });
-
-  constructor() {
-    const injector = inject(Injector);
-    effect(cleanup => {
-      keyMap(this.<%= name %>Key(), () => this.el.nativeElement.click(), { cleanup, injector });
-    });
-  }
-}