@ngbase/adk 0.1.2 → 0.1.3

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

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

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

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

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

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

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

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

@@ -1,8 +0,0 @@
-/*
- * 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

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

@@ -1,37 +0,0 @@
-import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
-import { AccessibleGroup } from '@ngbase/adk/a11y';
-import { NgbMenu, NgbMenuTrigger, NgpMenuGroup, aliasMenu } from '@ngbase/adk/menu';
-
-@Component({
-  selector: '<%= name %>-menu',
-  exportAs: '<%= name %>Menu',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [aliasMenu(Menu)],
-  imports: [AccessibleGroup, NgpMenuGroup],
-  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

@@ -1,8 +0,0 @@
-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/otp/index.ts.template

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

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

@@ -1,37 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { injectDirectionality } from '@ngbase/adk/bidi';
-import { NgbInputOtp, NgbOtpInput, NgbOtpValue, aliasInputOtp } from '@ngbase/adk/otp';
-import { NumberOnly, RangePipe } from '@ngbase/adk/utils';
-import { InputStyle } from '<%= basepath %>/form-field';
-
-@Component({
-  selector: '<%= name %>-input-otp',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [aliasInputOtp(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/pagination/index.ts.template

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

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

@@ -1,71 +0,0 @@
-import { Component, input } from '@angular/core';
-import { aliasPagination, 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: [aliasPagination(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

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

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

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

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

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

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

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

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

@@ -1,64 +0,0 @@
-import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
-import {
-  aliasPopover,
-  NgbPopover,
-  NgbPopoverArrow,
-  NgbPopoverBackdrop,
-  NgbPopoverClose,
-  NgbPopoverMain,
-  ngbPopoverPortal,
-  NgbPopoverTrigger,
-  registerNgbPopover,
-} from '@ngbase/adk/popover';
-
-@Component({
-  selector: '<%= name %>-popover',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [aliasPopover(Popover)],
-  imports: [NgbPopoverBackdrop, NgbPopoverMain, NgbPopoverArrow],
-  template: ` <div
-      ngbPopoverMain
-      [@slideInOutAnimation]
-      class="menu-container pointer-events-auto fixed z-10 flex flex-col rounded-lg border bg-foreground shadow-md"
-    >
-      <div class="flex flex-1 flex-col overflow-auto" ngbPopoverArrow>
-        <ng-container #myDialog />
-      </div>
-    </div>
-    @if (options().backdrop) {
-      <div ngbPopoverBackdrop class="pointer-events-auto fixed top-0 h-full w-full"></div>
-    }`,
-  host: {
-    class:
-      'fixed top-0 left-0 w-full h-full pointer-events-none z-p flex items-center justify-center',
-  },
-})
-class Popover extends NgbPopover {}
-
-export function registerPopover() {
-  return registerNgbPopover(Popover);
-}
-
-export const popoverPortal = ngbPopoverPortal;
-
-@Directive({
-  selector: '[<%= name %>PopoverTrigger]',
-  hostDirectives: [
-    {
-      directive: NgbPopoverTrigger,
-      inputs: [
-        'ngbPopoverTrigger: <%= name %>PopoverTrigger',
-        'ngbPopoverTriggerData: <%= name %>PopoverTriggerData',
-        'options',
-      ],
-    },
-  ],
-  providers: [registerPopover()],
-})
-export class PopoverTrigger {}
-
-@Directive({
-  selector: '[<%= name %>PopoverClose]',
-  hostDirectives: [NgbPopoverClose],
-})
-export class PopoverClose {}

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

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

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

@@ -1,14 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { NgbProgress, NgbProgressBar } from '@ngbase/adk/progress';
-
-@Component({
-  selector: '<%= name %>-progress',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  hostDirectives: [{ directive: NgbProgress, inputs: ['value'] }],
-  imports: [NgbProgressBar],
-  template: `<div class="h-full bg-primary transition" ngbProgressBar></div>`,
-  host: {
-    class: 'block h-2 my-1 bg-muted-background rounded-full',
-  },
-})
-export class Progress {}

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

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

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

@@ -1,35 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { NgbRadio, NgbRadioGroup, NgbRadioIndicator } from '@ngbase/adk/radio';
-import { ɵFocusStyle as FocusStyle } from '<%= basepath %>/checkbox';
-
-@Component({
-  selector: '<%= name %>-radio-group',
-  hostDirectives: [{ directive: NgbRadioGroup, inputs: ['value'], outputs: ['valueChange'] }],
-  template: `<ng-content />`,
-  host: {
-    class: 'flex gap-2',
-  },
-})
-export class RadioGroup {}
-
-@Component({
-  selector: '<%= name %>-radio, [<%= name %>Radio]',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  hostDirectives: [{ directive: NgbRadio, inputs: ['value', 'disabled'] }],
-  imports: [FocusStyle, NgbRadioIndicator],
-  template: `
-    <button
-      <%= name %>FocusStyle
-      ngbRadioIndicator
-      class="custom-radio relative flex h-4 w-4 flex-none items-center justify-center rounded-full border border-primary group-aria-[disabled='true']:border-muted"
-    >
-       <div class="h-2 w-2 rounded-full bg-primary group-aria-[disabled='true']:bg-muted"></div>
-    </button>
-    <ng-content />
-  `,
-  host: {
-    class:
-      'flex items-center gap-2 py-1 cursor-pointer aria-[disabled="true"]:opacity-40 aria-[disabled="true"]:cursor-not-allowed group',
-  },
-})
-export class Radio {}

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

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

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

@@ -1,56 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { Icon } from '<%= basepath %>/icon';
-import { provideIcons } from '@ng-icons/core';
-import { lucideGripVertical } from '@ng-icons/lucide';
-import {
-  NgbGutter,
-  NgbResizable,
-  NgbResizableGroup,
-  aliasResizable,
-  aliasResizableGroup,
-} from '@ngbase/adk/resizable';
-
-@Component({
-  selector: '<%= name %>-resizable-group',
-  exportAs: '<%= name %>ResizableGroup',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [aliasResizableGroup(ResizableGroup)],
-  template: `<ng-content select="<%= name %>-resizable" />`,
-  host: {
-    class: 'flex w-full',
-    '[class.flex-col]': "direction() === 'vertical'",
-    '[attr.id]': 'id',
-  },
-})
-export class ResizableGroup extends NgbResizableGroup {}
-
-@Component({
-  selector: '<%= name %>-resizable',
-  exportAs: '<%= name %>Resizable',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [aliasResizable(Resizable)],
-  viewProviders: [provideIcons({ lucideGripVertical })],
-  imports: [Icon, NgbGutter],
-  template: `<ng-content />
-    <ng-template #dragElement>
-      @if (draggable()) {
-        <div
-          ngbGutter
-          class="{{
-            'dragElement relative flex cursor-ew-resize items-center justify-center after:absolute after:top-0' +
-              (resizable.direction() === 'vertical'
-                ? ' bottom-0 left-0 h-0 w-full cursor-ns-resize border-b after:-mt-1 after:h-2 after:w-full'
-                : ' right-0 top-0 w-0 cursor-ew-resize border-l after:h-full after:w-2')
-          }}"
-        >
-          <<%= name %>-icon name="lucideGripVertical" class="z-30 rounded-lg border
-          bg-muted-background py-0.5" size=".75rem" [class]="resizable.direction() === 'vertical' ?
-          'rotate-90' : ''" />
-        </div>
-      }
-    </ng-template>`,
-  host: {
-    class: 'relative overflow-hidden block flex-none',
-  },
-})
-export class Resizable extends NgbResizable {}

package/schematics/components/files/scroll-area/index.ts.template

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