@ngbase/adk 0.1.1 → 0.1.3

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 });
-    });
-  }
-}

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, 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

@@ -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/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 { 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

@@ -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,87 +0,0 @@
-import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
-import {
-  NgbPopover,
-  NgbPopoverBackdrop,
-  NgbPopoverClose,
-  NgbPopoverMain,
-  ngbPopoverPortal,
-  NgbPopoverTrigger,
-  providePopover,
-  registerNgbPopover,
-} from '@ngbase/adk/popover';
-
-@Component({
-  selector: '<%= name %>-popover',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [providePopover(Popover)],
-  imports: [NgbPopoverBackdrop, NgbPopoverMain],
-  template: ` <style>
-      .popover-anchor {
-        --action-angle: 180deg;
-        --action-left: 50%;
-        --action-top: -1rem;
-      }
-      .popover-anchor::before {
-        content: '';
-        position: absolute;
-        width: 0;
-        height: 0;
-        border-style: solid;
-        border-top: 0.8rem solid;
-        @apply border-foreground;
-        border-left: 0.5rem solid transparent;
-        border-right: 0.5rem solid transparent;
-        top: var(--action-top);
-        left: var(--action-left);
-        transform: translateX(-50%) rotate(var(--action-angle, 180deg));
-      }
-    </style>
-    <div
-      ngbPopoverMain
-      [@slideInOutAnimation]
-      class="{{
-        'menu-container pointer-events-auto fixed z-10 flex flex-col rounded-lg border bg-foreground shadow-md ' +
-          (options().anchor ? 'popover-anchor ' : 'overflow-auto ')
-      }}"
-    >
-      <div class="flex flex-1 flex-col overflow-auto">
-        <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';