@ngbase/adk 0.1.1 → 0.1.3

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

@@ -1,40 +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
-      #radioIndicator
-      class="custom-radio relative flex h-4 w-4 flex-none items-center justify-center rounded-full border border-primary"
-      [class]="radioIndicator.disabled() ? 'border-muted' : 'border-primary'"
-    >
-      <div
-        class="h-2 w-2 rounded-full"
-        [class]="radioIndicator.disabled() ? 'bg-muted' : 'bg-primary'"
-      ></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',
-  },
-})
-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 {
-  NgbGutter,
-  NgbResizable,
-  NgbResizableGroup,
-  provideResizable,
-  provideResizableGroup,
-} from '@ngbase/adk/resizable';
-import { Icon } from '<%= basepath %>/icon';
-import { provideIcons } from '@ng-icons/core';
-import { lucideGripVertical } from '@ng-icons/lucide';
-
-@Component({
-  selector: '<%= name %>-resizable-group',
-  exportAs: '<%= name %>ResizableGroup',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideResizableGroup(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: [provideResizable(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';

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

@@ -1,40 +0,0 @@
-import { Component, ChangeDetectionStrategy, input } from '@angular/core';
-import { NgbScrollArea, NgbScrollBar, ScrollBarOrientation } from '@ngbase/adk/scroll-area';
-
-@Component({
-  selector: '<%= name %>-scroll-area',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgbScrollBar, NgbScrollArea],
-  template: `
-    <div
-      ngbScrollArea
-      [alwaysShow]="alwaysShow()"
-      [orientation]="orientation()"
-      [hideDelay]="hideDelay()"
-      class="flex-1"
-    >
-      <ng-content></ng-content>
-
-      <div
-        ngbScrollBar="vertical"
-        class="!right-0.5 rounded bg-black/10 opacity-0 transition-colors duration-150 hover:bg-black/50 data-[active=true]:bg-black/50 data-[visible=true]:opacity-100"
-      ></div>
-
-      <div
-        ngbScrollBar="horizontal"
-        class="!bottom-0.5 rounded bg-black/10 opacity-0 transition-colors duration-150 hover:bg-black/50 data-[active=true]:bg-black/50 data-[visible=true]:opacity-100"
-      ></div>
-
-      <!-- Corner piece when both scrollbars are visible -->
-      <div class="scroll-area-corner absolute bottom-0 right-0 h-2 w-2 rounded bg-black/10"></div>
-    </div>
-  `,
-  host: {
-    class: 'flex flex-col w-full',
-  },
-})
-export class ScrollArea {
-  readonly alwaysShow = input<boolean>(false);
-  readonly orientation = input<ScrollBarOrientation>('both');
-  readonly hideDelay = input(1000);
-}

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

@@ -1,8 +0,0 @@
-/*
- * Public API Surface of select
- */
-
-export * from './select';
-export * from './option';
-export * from './select-input';
-export * from './list-selection';

package/schematics/components/files/select/list-selection.ts.template

@@ -1,15 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { provideValueAccessor } from '@ngbase/adk/utils';
-import { SelectBase } from '@ngbase/adk/select';
-
-@Component({
-  selector: '<%= name %>-list-selection',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<ng-content />`,
-  providers: [provideValueAccessor(ListSelection)],
-})
-export class ListSelection<T> extends SelectBase<T> {
-  constructor() {
-    super(true);
-  }
-}

package/schematics/components/files/select/option.ts.template

@@ -1,34 +0,0 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { NgbOption, NgbOptionGroup } from '@ngbase/adk/select';
-import { Checkbox } from '<%= basepath %>/checkbox';
-import { ListStyle } from '<%= basepath %>/list';
-
-@Component({
-  selector: '<%= name %>-option, [<%= name %>Option]',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  hostDirectives: [ListStyle, { directive: NgbOption, inputs: ['value', 'disabled', 'ayId'] }],
-  imports: [Checkbox],
-  template: ` @if (option.multiple()) {
-      <<%= name %>-checkbox [checked]="option.checked()" class="!py-0" />
-    }
-    <ng-content />`,
-  host: {
-    '[class.bg-muted-background]': 'option.active() || option.checked()',
-  },
-})
-export class Option<T> {
-  readonly option = inject(NgbOption<T>);
-}
-
-@Component({
-  selector: '<%= name %>-option-group, [<%= name %>OptionGroup]',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<div class="sticky -top-1 z-10 bg-foreground px-2 py-1.5 text-sm text-muted">
-      {{ label() }}
-    </div>
-    <ng-content />`,
-  host: {
-    class: 'block',
-  },
-})
-export class OptionGroup extends NgbOptionGroup {}

package/schematics/components/files/select/select-input.ts.template

@@ -1,21 +0,0 @@
-import { Directive } from '@angular/core';
-import { NgbSelectInput, NgbSelectTrigger } from '@ngbase/adk/select';
-import { InputStyle } from '<%= basepath %>/form-field';
-
-@Directive({
-  selector: '[<%= name %>SelectInput]',
-  hostDirectives: [
-    { directive: NgbSelectInput, inputs: ['placeholder', 'options', 'filterFn'] },
-    InputStyle,
-  ],
-  host: {
-    class: 'w-full !m-0 mb-1 !ring-0 !border-0 !border-b rounded-none px-3 z-10',
-  },
-})
-export class SelectInput<T> {}
-
-@Directive({
-  selector: '[<%= name %>SelectTrigger]',
-  hostDirectives: [NgbSelectTrigger],
-})
-export class SelectTrigger {}

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

@@ -1,96 +0,0 @@
-import { NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import {
-  NgbSelect,
-  NgbSelectOption,
-  NgbSelectOptionGroup,
-  provideSelect,
-  SelectValue,
-} from '@ngbase/adk/select';
-import { Icon } from '<%= basepath %>/icon';
-import { provideIcons } from '@ng-icons/core';
-import { lucideChevronsUpDown } from '@ng-icons/lucide';
-import { Option } from './option';
-import { SelectInput } from './select-input';
-
-@Directive({
-  selector: '[<%= name %>SelectOption]',
-  hostDirectives: [NgbSelectOption],
-})
-export class SelectOption<T> {}
-
-@Component({
-  selector: '<%= name %>-select',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  viewProviders: [provideIcons({ lucideChevronsUpDown })],
-  providers: [provideSelect(Select)],
-  imports: [
-    Icon,
-    FormsModule,
-    SelectInput,
-    Option,
-    NgTemplateOutlet,
-    SelectValue,
-    NgbSelectOptionGroup,
-  ],
-  template: `
-    <button
-      ngbSelectValue
-      [class.opacity-50]="disabled()"
-      class="flex min-h-5 w-full items-center justify-between gap-1 whitespace-nowrap outline-none"
-    >
-      <!-- Prefix template -->
-      <ng-content select=".select-prefix" />
-
-      <span class="truncate" [class.text-muted]="!cValue()">
-        <ng-content select="[<%= name %>SelectTrigger]">
-          {{ cValue() || placeholder() }}
-        </ng-content>
-      </span>
-      <<%= name %>-icon name="lucideChevronsUpDown" class="ml-0.5 text-muted" />
-    </button>
-
-    <!-- Options template -->
-    <ng-template #optionsTemplate>
-      <div class="flex flex-col overflow-hidden">
-        <ng-content select="[<%= name %>SelectInput]">
-          @if (options().length) {
-            <input
-              <%= name %>SelectInput
-              placeholder="Search options"
-              [(ngModel)]="optionsFilter.search"
-              [ngModelOptions]="{ standalone: true }"
-            />
-          }
-        </ng-content>
-        <div #optionsGroup ngbSelectOptionGroup class="overflow-auto p-1">
-          <div class="h-full" role="listbox" aria-label="Suggestions">
-            <ng-content>
-              @for (option of optionsFilter.filteredList(); track option; let i = $index) {
-                <<%= name %>-option [value]="option" [ayId]="ayId">
-                  @if (optionTemplate(); as ot) {
-                    <ng-template
-                      [ngTemplateOutlet]="ot.template"
-                      [ngTemplateOutletContext]="{ $implicit: option, index: i }"
-                    />
-                  } @else {
-                    {{ option }}
-                  }
-                </<%= name %>-option>
-              }
-            </ng-content>
-          </div>
-        </div>
-        <ng-content select=".select-footer" />
-      </div>
-    </ng-template>
-  `,
-  host: {
-    class: 'flex cursor-pointer font-medium',
-    '[class.pointer-events-none]': 'disabled()',
-  },
-})
-export class Select<T> extends NgbSelect<T> {
-  override sideOffset = 16;
-}

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

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

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

@@ -1,34 +0,0 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { NgbSelectable, NgbSelectableItem } from '@ngbase/adk/selectable';
-
-@Component({
-  selector: '<%= name %>-selectable-item, [<%= name %>SelectableItem]',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  hostDirectives: [{ directive: NgbSelectableItem, inputs: ['value'] }],
-  template: `<ng-content />`,
-  host: {
-    class:
-      'flex-1 flex items-center font-medium justify-center px-3 py-1.5 cursor-pointer transition-colors rounded-md whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
-    '[class]': `selectable.selected() ? 'bg-foreground shadow-md ring-1 ring-border' : 'opacity-60'`,
-  },
-})
-export class SelectableItem<T> {
-  readonly selectable = inject(NgbSelectableItem);
-}
-
-@Component({
-  selector: '<%= name %>-selectable',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<ng-content />`,
-  host: {
-    class: 'inline-flex relative bg-muted-background rounded-md p-0.5',
-  },
-  hostDirectives: [
-    {
-      directive: NgbSelectable,
-      inputs: ['activeIndex'],
-      outputs: ['activeIndexChange', 'valueChanged'],
-    },
-  ],
-})
-export class Selectable<T> {}

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

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

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

@@ -1,19 +0,0 @@
-import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';
-
-@Component({
-  selector: '<%= name %>-separator',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: ``,
-  host: {
-    class: 'bg-border block flex-none',
-    '[class]': `vertical() ? 'w-[1px]' : 'h-[1px] w-full'`,
-    // '[class.my-1]': `menu`,
-  },
-})
-export class Separator {
-  vertical = input(false, { transform: booleanAttribute });
-
-  constructor() {
-    // console.log('Separator', this.menu);
-  }
-}

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

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

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

@@ -1,134 +0,0 @@
-import { NgStyle } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  OnDestroy,
-  ViewContainerRef,
-  afterNextRender,
-  inject,
-  signal,
-  viewChild,
-} from '@angular/core';
-import { BaseDialog, basePortal, DialogInput, DialogOptions, DialogRef } from '@ngbase/adk/portal';
-import { createHostAnimation, fadeAnimation } from '@ngbase/adk/utils';
-import { Button } from '<%= basepath %>/button';
-import { sideAnimation } from '@ngbase/adk/dialog';
-import { Icon } from '<%= basepath %>/icon';
-import { provideIcons } from '@ng-icons/core';
-import { lucideX } from '@ng-icons/lucide';
-
-@Component({
-  selector: '<%= name %>-sheet',
-  imports: [NgStyle, Button, Icon],
-  viewProviders: [provideIcons({ lucideX })],
-  template: `
-    <div
-      class="pointer-events-none flex h-full"
-      [class]="options.position === 'left' ? 'justify-start' : 'justify-end'"
-    >
-      <div
-        class="pointer-events-auto m-2 flex flex-col overflow-hidden rounded-lg border-l bg-foreground shadow-2xl will-change-transform"
-        [@sideAnimation]="position()"
-        [ngStyle]="{
-          width: options.width,
-          minWidth: options.minWidth,
-          maxWidth: options.maxWidth,
-        }"
-      >
-        @if (!isHideHeader) {
-          <div class="flex items-center border-b px-4 py-2">
-            <h2 class="flex-1 font-bold">{{ options.title }}</h2>
-            <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 #myDialog />
-        </div>
-      </div>
-    </div>
-    @if (backdropColor) {
-      <div
-        class="absolute top-0 -z-10 h-full w-full bg-black bg-opacity-30 will-change-transform"
-        [@fadeAnimation]
-        (click)="close()"
-      ></div>
-      <!-- [class]="status() ? 'pointer-events-auto' : 'pointer-events-none'" -->
-    }
-  `,
-  host: {
-    class: 'fixed block top-0 bottom-0 left-0 right-0  z-p',
-    '[@parentAnimation]': '',
-    '(@parentAnimation.done)': 'animationDone()',
-  },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [
-    createHostAnimation(['@fadeAnimation', '@sideAnimation']),
-    fadeAnimation('300ms'),
-    sideAnimation,
-  ],
-})
-export class SheetContainer extends BaseDialog implements OnDestroy {
-  myDialog = viewChild('myDialog', { read: ViewContainerRef });
-  backdropColor = true;
-  options!: SheetOptions;
-  classNames = '';
-  isHideHeader = false;
-  position = signal<'left' | 'right' | 'center'>('left');
-
-  constructor() {
-    super();
-    afterNextRender(() => {
-      this._afterViewSource.next(this.myDialog()!);
-      this.position.set('center');
-    });
-    const ref = inject(DialogRef);
-    ref.afterClosed.subscribe(() => {
-      console.log('afterClosed', this.options.position);
-      this.position.set(this.options.position as 'left' | 'right' | 'center');
-    });
-  }
-
-  override setOptions(options: SheetOptions): void {
-    this.options = options;
-    this.classNames = this.options.classNames?.join(' ') || '';
-    this.isHideHeader = this.options.header || false;
-    this.backdropColor = this.options.backdropColor || true;
-    this.position.set(this.options.position as 'left' | 'right' | 'center');
-  }
-
-  ngOnDestroy(): void {
-    // this.position.set(this.options.position as 'left' | 'right' | 'center');
-  }
-}
-
-export class SheetOptions extends DialogOptions {
-  position?: 'left' | 'right' = 'right';
-}
-
-export function sheetPortal() {
-  const NAME = 'sheet';
-  const base = basePortal(NAME, SheetContainer);
-
-  function open<T>(component: DialogInput, opt?: SheetOptions) {
-    const { diaRef } = base.open(
-      component,
-      comp => {
-        const options = { ...new SheetOptions(), ...opt };
-        comp.instance.setOptions(options);
-      },
-      opt,
-    );
-
-    const { afterClosed } = diaRef;
-    return { afterClosed };
-  }
-
-  function closeAll() {
-    base.closeAll();
-  }
-  return { open, closeAll };
-}
-
-export type Sheet = ReturnType<typeof sheetPortal>;

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

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

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

@@ -1,48 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import {
-  NgbSidenav,
-  NgbSidenavHeader,
-  NgbSidenavHeaderContent,
-  NgbSidenavHeaderTrack,
-  NgbSidenavOverlay,
-  provideSidenav,
-  slideAnimation,
-  SidenavType,
-} from '@ngbase/adk/sidenav';
-
-export type { SidenavType };
-
-@Component({
-  selector: '<%= name %>-sidenav',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideSidenav(Sidenav)],
-  imports: [NgbSidenavOverlay, NgbSidenavHeaderTrack],
-  template: `
-    @if (showOverlay()) {
-      <div ngbSidenavOverlay class="z-p bg-black/70"></div>
-    }
-    <div ngbSidenavHeaderTrack class="transition-[width] duration-500"></div>
-    <ng-content select="<%= name %>-sidenav-header" />
-    <ng-content />
-  `,
-  host: {
-    class: 'flex w-full overflow-hidden relative top-0 left-0 h-full',
-  },
-})
-export class Sidenav extends NgbSidenav {}
-
-@Component({
-  selector: '<%= name %>-sidenav-header',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgbSidenavHeaderContent],
-  template: `
-    <div ngbSidenavHeaderContent class="h-full overflow-auto">
-      <ng-content />
-    </div>
-  `,
-  host: {
-    class: 'block h-full bg-foreground z-p transition-[width] duration-500',
-  },
-  animations: [slideAnimation('500ms cubic-bezier(0.4, 0, 0.2, 1)')],
-})
-export class SidenavHeader extends NgbSidenavHeader {}

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

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

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

@@ -1,15 +0,0 @@
-import { Component, input } from '@angular/core';
-
-@Component({
-  selector: '<%= name %>-skeleton',
-  template: ``,
-  host: {
-    class: 'block animate-pulse bg-muted-background',
-    '[class]': `shape() === 'circle' ? 'rounded-full' : 'rounded-md'`,
-  },
-})
-export class Skeleton {
-  readonly shape = input<'circle' | 'rectangle'>('rectangle');
-  readonly width = input<string>('100%');
-  readonly height = input<string>('20px');
-}

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

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

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

@@ -1,42 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import {
-  NgbSlider,
-  SliderRange,
-  SliderThumb,
-  SliderTrack,
-  provideSlider,
-} from '@ngbase/adk/slider';
-import { ɵFocusStyle as FocusStyle } from '<%= basepath %>/checkbox';
-
-@Component({
-  selector: '<%= name %>-slider',
-  exportAs: '<%= name %>Slider',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideSlider(Slider)],
-  imports: [FocusStyle, SliderTrack, SliderRange, SliderThumb],
-  template: `
-    <div
-      ngbSliderTrack
-      class="h-full overflow-hidden rounded-full bg-muted-background aria-[disabled=true]:bg-opacity-30"
-    >
-      <div ngbSliderRange class="bg-primary aria-[disabled=true]:bg-muted-background"></div>
-    </div>
-    @for (thumb of noOfThumbs(); track thumb) {
-      <button
-        ngbSliderThumb
-        <%= name %>FocusStyle
-        class="{{
-          'inline-block h-5 w-5 rounded-full border-2 bg-foreground shadow-md aria-[disabled=false]:border-primary aria-[disabled=true]:bg-muted-background ' +
-            (orientation() === 'vertical'
-              ? '-left-1.5 -translate-y-1/2'
-              : '-top-1.5 -translate-x-1/2')
-        }}"
-      ></button>
-    }
-  `,
-  host: {
-    class: 'block relative my-1',
-    '[class]': 'orientation() === "vertical" ? "w-2" : "h-2"',
-  },
-})
-export class Slider extends NgbSlider {}

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

@@ -1,5 +0,0 @@
-/*
- * Public API Surface of sonner
- */
-
-export { sonnerPortal } from './sonner';