@ngbase/adk 0.1.0 → 0.1.1

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

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

@@ -0,0 +1,37 @@
+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();
+}

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,35 @@
+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 });
+    });
+  }
+}

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

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

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

@@ -0,0 +1,28 @@
+import { Directive } from '@angular/core';
+import { NgbList, NgbListActionGroup, provideList } from '@ngbase/adk/list';
+
+@Directive({
+  selector: '[<%= name %>ListStyle]',
+  host: {
+    class:
+      'flex items-center gap-2 py-2 px-2 hover:bg-muted-background cursor-pointer rounded-md text-left data-[focus="true"]:bg-muted-background',
+  },
+})
+export class ListStyle {}
+
+@Directive({
+  selector: '[<%= name %>List]',
+  hostDirectives: [ListStyle],
+  providers: [provideList(List)],
+  host: {
+    role: 'list',
+    '[class]': 'disabled() ? "pointer-events-none cursor-not-allowed opacity-50" : ""',
+  },
+})
+export class List extends NgbList {}
+
+@Directive({
+  selector: '[<%= name %>ActionGroup]',
+  hostDirectives: [NgbListActionGroup],
+})
+export class ListActionGroup {}

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

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

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

@@ -0,0 +1,8 @@
+import { Directive } from '@angular/core';
+import { Mask } from '@ngbase/adk/mask';
+
+@Directive({
+  selector: '[<%= name %>Mask]',
+  hostDirectives: [{ directive: Mask, inputs: ['ngbMask: <%= name %>Mask', 'showMaskType'] }],
+})
+export class MaskInput {}

package/schematics/components/files/menu/context-menu.ts.template

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { NgbContextMenu } from '@ngbase/adk/menu';
+
+@Directive({
+  selector: '[<%= name %>ContextMenu]',
+  hostDirectives: [
+    {
+      directive: NgbContextMenu,
+      inputs: ['ngbContextMenu: <%= name %>ContextMenu'],
+      outputs: ['ctxOpen', 'ctxClose'],
+    },
+  ],
+})
+export class ContextMenu {}

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

@@ -0,0 +1,8 @@
+/*
+ * Public API Surface of menu
+ */
+
+export * from './menu';
+export * from './context-menu';
+export * from './navigation-menu';
+export * from './mention';

package/schematics/components/files/menu/mention.ts.template

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { NgbMentionTrigger } from '@ngbase/adk/menu';
+
+@Directive({
+  selector: '[<%= name %>MentionTrigger]',
+  hostDirectives: [
+    {
+      directive: NgbMentionTrigger,
+      inputs: ['ngbMentionTrigger: <%= name %>MentionTrigger', 'key', 'options'],
+      outputs: ['search'],
+    },
+  ],
+})
+export class MentionTrigger {}

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

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { AccessibleGroup } from '@ngbase/adk/a11y';
+import { NgbMenu, NgbMenuTrigger, MenuGroup, provideMenu } from '@ngbase/adk/menu';
+
+@Component({
+  selector: '<%= name %>-menu',
+  exportAs: '<%= name %>Menu',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [provideMenu(Menu)],
+  imports: [AccessibleGroup, MenuGroup],
+  template: `
+    <ng-template #container>
+      <div ngbMenuGroup class="flex flex-col p-1">
+        <ng-content />
+      </div>
+    </ng-template>
+  `,
+})
+export class Menu extends NgbMenu {}
+
+@Directive({
+  selector: '[<%= name %>MenuTrigger]',
+  hostDirectives: [
+    {
+      directive: NgbMenuTrigger,
+      inputs: [
+        'ngbMenuTrigger: <%= name %>MenuTrigger',
+        'ngbMenuTriggerData: <%= name %>MenuTriggerData',
+        'options',
+      ],
+    },
+  ],
+  host: {
+    class: 'outline-none',
+  },
+})
+export class MenuTrigger {}

package/schematics/components/files/menu/navigation-menu.ts.template

@@ -0,0 +1,8 @@
+import { Directive } from '@angular/core';
+import { NgbNavigationMenu } from '@ngbase/adk/menu';
+
+@Directive({
+  selector: '[<%= name %>NavigationMenu]',
+  hostDirectives: [{ directive: NgbNavigationMenu, inputs: ['hover'] }],
+})
+export class NavigationMenu {}

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

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

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

@@ -0,0 +1,71 @@
+import { Component, input } from '@angular/core';
+import { NgbPagination, NgbPaginationBtn } from '@ngbase/adk/pagination';
+import { Button } from '<%= basepath %>/button';
+import { Icon } from '<%= basepath %>/icon';
+import { Option, Select } from '<%= basepath %>/select';
+import { provideIcons } from '@ng-icons/core';
+import {
+  lucideChevronLeft,
+  lucideChevronRight,
+  lucideChevronsLeft,
+  lucideChevronsRight,
+} from '@ng-icons/lucide';
+
+@Component({
+  selector: '<%= name %>-pagination',
+  providers: [{ provide: NgbPagination, useExisting: Pagination }],
+  viewProviders: [
+    provideIcons({
+      lucideChevronLeft,
+      lucideChevronRight,
+      lucideChevronsLeft,
+      lucideChevronsRight,
+    }),
+  ],
+  imports: [Button, Icon, Select, Option, NgbPaginationBtn],
+  template: `
+    <div class="flex items-center gap-2">
+      <div>Rows per page</div>
+      <<%= name %>-select [value]="size()" (valueChange)="sizeChanged($event)" class="w-20 !py-1.5">
+        @for (size of sizeOptions(); track size) {
+          <<%= name %>-option [value]="size">
+            {{ size }}
+          </<%= name %>-option>
+        }
+      </<%= name %>-select>
+    </div>
+    <div>Page {{ active() }} of {{ totalSnaps() }}</div>
+    <div class="flex items-center gap-2">
+      <button ngbPaginationBtn="prev" <%= name %>Button="outline" class="h-8 w-8 !p-2">
+        <<%= name %>-icon name="lucideChevronsLeft" />
+      </button>
+      <button ngbPaginationBtn="prev" jump="-1" <%= name %>Button="outline" class="h-8 w-8 !p-2">
+        <<%= name %>-icon name="lucideChevronLeft" />
+      </button>
+      @if (showPage()) {
+        @for (snap of snaps(); track snap) {
+          <button
+            ngbPaginationBtn="page"
+            [jump]="snap"
+            <%= name %>Button="ghost"
+            class="min-w-9 !p-2 ring-offset-background aria-[current=page]:bg-muted-background aria-[current=page]:text-primary"
+          >
+            {{ snap }}
+          </button>
+        }
+      }
+      <button ngbPaginationBtn="next" jump="1" <%= name %>Button="outline" class="h-8 w-8 !p-2">
+        <<%= name %>-icon name="lucideChevronRight" />
+      </button>
+      <button ngbPaginationBtn="next" <%= name %>Button="outline" class="h-8 w-8 !p-2">
+        <<%= name %>-icon name="lucideChevronsRight" />
+      </button>
+    </div>
+  `,
+  host: {
+    class: 'flex items-center gap-8 font-semibold',
+  },
+})
+export class Pagination extends NgbPagination {
+  readonly showPage = input<boolean>(false);
+}

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

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

package/schematics/components/files/picasa/picasa-base.component.ts.template

@@ -0,0 +1,80 @@
+import {
+  afterNextRender,
+  ChangeDetectionStrategy,
+  Component,
+  viewChild,
+  ViewContainerRef,
+} from '@angular/core';
+import { BaseDialog, DialogOptions } from '@ngbase/adk/portal';
+import { createHostAnimation, fadeAnimation } from '@ngbase/adk/utils';
+import { Subject } from 'rxjs';
+
+@Component({
+  selector: '<%= name %>-dialog',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="pointer-events-none flex h-full items-center justify-center">
+      <div class="pointer-events-auto">
+        <ng-container #myDialog />
+      </div>
+      <div
+        class="backdropColor pointer-events-auto absolute top-0 -z-10 h-full w-full"
+        (click)="!options.disableClose && close()"
+        [@fadeAnimation]=""
+      ></div>
+    </div>
+  `,
+  host: {
+    '[ngStyle]': '{ "z-index": options.overrideLowerDialog ? "982" : "980" }',
+    class: 'fixed block top-0 bottom-0 left-0 right-0 overflow-auto pointer-events-none z-p',
+    '[@parentAnimation]': '',
+  },
+  styles: `
+    .backdropColor {
+      background: rgba(0, 0, 0, 0.32);
+    }
+
+    .full-window {
+      width: 100vw !important;
+      height: 100vh;
+      max-width: initial;
+      top: 0;
+      border-radius: 0;
+    }
+  `,
+  animations: [createHostAnimation(['@fadeAnimation']), fadeAnimation('300ms')],
+})
+export class PicasaBase extends BaseDialog {
+  myDialog = viewChild('myDialog', { read: ViewContainerRef });
+
+  backdropColor = true;
+  isSidePopup = true;
+
+  options!: DialogOptions;
+  classNames = '';
+  isHideHeader = false;
+  onDone = new Subject<any>();
+
+  constructor() {
+    super();
+    afterNextRender(() => {
+      this._afterViewSource.next(this.myDialog()!);
+
+      // setTimeout(() => {
+      //   this.show.set(false);
+      // }, 2000);
+    });
+    // this.dialogRef.afterClosed.subscribe(() => {
+    //   setTimeout(() => {
+    //     this.animationDone();
+    //   }, 500);
+    // });
+  }
+
+  override setOptions(options: DialogOptions) {
+    this.options = options;
+    this.classNames = this.options.classNames?.join(' ') || '';
+    this.isHideHeader = this.options.header || false;
+    this.backdropColor = this.options.backdropColor || true;
+  }
+}

package/schematics/components/files/picasa/picasa.component.ts.template

@@ -0,0 +1,57 @@
+import { Component, ElementRef, afterNextRender, inject, viewChild } from '@angular/core';
+import { DialogRef } from '@ngbase/adk/portal';
+import { PicasaBase } from './picasa-base.component';
+
+@Component({
+  selector: '<%= name %>-picasa',
+  template: `
+    <img
+      #imgEl
+      [src]="data.data.src"
+      alt="Placeholder"
+      class="max-h-[100vh] max-w-[100vw] object-contain"
+      [style.viewTransitionName]="data.data.id"
+    />
+  `,
+  host: {
+    class: 'block',
+  },
+})
+export class PicasaContainer {
+  data = inject(DialogRef);
+  imgEl = viewChild<ElementRef<HTMLImageElement>>('imgEl');
+  dialogRef = inject(DialogRef);
+  picasa = inject(PicasaBase);
+
+  constructor() {
+    let transform = '';
+    afterNextRender(() => {
+      const imgEl = this.imgEl()!.nativeElement;
+      const target = this.data.data.target as HTMLElement;
+      const { width, height, top, left } = target.getBoundingClientRect();
+      const { clientWidth, clientHeight } = document.documentElement;
+      const imgRect = imgEl.getBoundingClientRect();
+      const scale = Math.max(width / imgRect.width, height / imgRect.height);
+      imgEl.style.transform = `scale(${scale})`;
+      const x = left + width / 2 - clientWidth / 2;
+      const y = top + height / 2 - clientHeight / 2;
+      transform = `translate3d(${x}px, ${y}px, 0) scale(${scale})`;
+      imgEl.style.transform = transform;
+      console.log(transform);
+      setTimeout(() => {
+        imgEl.style.transition = '300ms cubic-bezier(0.55, 0.31, 0.15, 0.93)';
+        imgEl.style.transform = `none`;
+      });
+    });
+
+    this.dialogRef.afterClosed.subscribe(() => {
+      const imgEl = this.imgEl()!.nativeElement;
+      imgEl.style.transition = '300ms cubic-bezier(0.55, 0.31, 0.15, 0.93)';
+      imgEl.style.transform = transform;
+      console.log(transform);
+      imgEl.addEventListener('transitionend', this.picasa.onClose, {
+        once: true,
+      });
+    });
+  }
+}

package/schematics/components/files/picasa/picasa.directive.ts.template

@@ -0,0 +1,41 @@
+import { Directive, ElementRef, contentChildren, inject, input } from '@angular/core';
+import { PicasaContainer } from './picasa.component';
+import { picasaPortal } from './picase.service';
+
+@Directive({
+  selector: '[<%= name %>Picasa]',
+})
+export class Picasa {
+  dialog = picasaPortal();
+  items = contentChildren(PicasaItem);
+
+  open(src: string, id: string, target: HTMLElement) {
+    this.dialog.open(PicasaContainer, {
+      data: { src, id, target },
+      classNames: ['bg-transparent', 'border-0', 'shadow-none'],
+      height: '100vh',
+    });
+  }
+}
+
+@Directive({
+  selector: 'img[<%= name %>PicasaItem]',
+  host: {
+    '(click)': 'open()',
+    '[style.viewTransitionName]': 'id',
+  },
+})
+export class PicasaItem {
+  picasa = inject(Picasa);
+  src = input.required<string>();
+  el = inject<ElementRef<HTMLElement>>(ElementRef);
+  id = 'generateId()';
+
+  constructor() {
+    (this.el.nativeElement.style as any).viewTransitionName = this.id;
+  }
+
+  open() {
+    this.picasa.open(this.src(), this.id, this.el.nativeElement);
+  }
+}

package/schematics/components/files/picasa/picase.service.ts.template

@@ -0,0 +1,24 @@
+import { basePortal, DialogInput, DialogOptions } from '@ngbase/adk/portal';
+import { PicasaBase } from './picasa-base.component';
+
+export function picasaPortal() {
+  const NAME = 'picasa';
+  const base = basePortal(NAME, PicasaBase);
+
+  function open<T>(component: DialogInput, opt?: DialogOptions) {
+    const { diaRef } = base.open(
+      component,
+      (comp, options) => {
+        comp.instance.setOptions(options);
+      },
+      opt,
+    );
+
+    return diaRef;
+  }
+
+  function closeAll() {
+    base.closeAll();
+  }
+  return { open, closeAll };
+}

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

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