@ngbase/adk 0.1.2 → 0.1.3

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,35 +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: 'outline-none',
-    '[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 { Icon } from '<%= basepath %>/icon';
-import { provideIcons } from '@ng-icons/core';
-import { lucideChevronsUpDown } from '@ng-icons/lucide';
-import {
-  aliasSelect,
-  NgbSelect,
-  NgbSelectOption,
-  NgbSelectOptionGroup,
-  SelectValue,
-} from '@ngbase/adk/select';
-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: [aliasSelect(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 gap-1 whitespace-nowrap text-left outline-none"
-    >
-      <!-- Prefix template -->
-      <ng-content select=".select-prefix" />
-
-      <span class="flex-1 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 outline-none',
-    '[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,69 +0,0 @@
-import { NgStyle } 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 { lucideX } from '@ng-icons/lucide';
-import { sideAnimation } from '@ngbase/adk/dialog';
-import { NgbSheet, NgbSheetContainer, ngbSheetPortal } from '@ngbase/adk/sheet';
-import { aliasSheet } from '@ngbase/adk/sheet';
-import { createHostAnimation, fadeAnimation } from '@ngbase/adk/utils';
-
-@Component({
-  selector: '<%= name %>-sheet',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [aliasSheet(SheetContainer)],
-  viewProviders: [provideIcons({ lucideX })],
-  imports: [NgStyle, Button, Icon],
-  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',
-  },
-  animations: [
-    createHostAnimation(['@fadeAnimation', '@sideAnimation']),
-    fadeAnimation('300ms'),
-    sideAnimation,
-  ],
-})
-export class SheetContainer extends NgbSheetContainer {}
-
-export function sheetPortal() {
-  return ngbSheetPortal(SheetContainer);
-}
-
-export type Sheet = NgbSheet;

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,
-  SidenavType,
-  aliasSidenav,
-  slideAnimation,
-} from '@ngbase/adk/sidenav';
-
-export type { SidenavType };
-
-@Component({
-  selector: '<%= name %>-sidenav',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [aliasSidenav(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,35 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { NgbSlider, SliderRange, SliderThumb, SliderTrack, aliasSlider } from '@ngbase/adk/slider';
-import { ɵFocusStyle as FocusStyle } from '<%= basepath %>/checkbox';
-
-@Component({
-  selector: '<%= name %>-slider',
-  exportAs: '<%= name %>Slider',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [aliasSlider(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-2 aria-[orientation=vertical]:w-2 aria-[orientation=horizontal]: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';

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

@@ -1,59 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { NgbSonner, ngbSonnerPortal, sonnerAnimation, SonnerBase } from '@ngbase/adk/sonner';
-import { Icon } from '<%= basepath %>/icon';
-import { provideIcons } from '@ng-icons/core';
-import {
-  lucideCircleAlert,
-  lucideCircleCheck,
-  lucideInfo,
-  lucideTriangleAlert,
-} from '@ng-icons/lucide';
-
-@Component({
-  selector: '<%= name %>-sonner',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    provideIcons({ lucideCircleCheck, lucideInfo, lucideTriangleAlert, lucideCircleAlert }),
-  ],
-  imports: [Icon, SonnerBase],
-  template: `
-    <ul class="fixed bottom-0 right-0 flex flex-col gap-1">
-      @for (msg of messages(); track msg.id) {
-        <li
-          [ngbSonnerBase]="$index"
-          class="{{
-            'm-4 w-96 rounded-lg border bg-foreground p-4 shadow-lg transition-all duration-300' +
-              (msg.type === 'success' ? ' bg-green-50 text-green-600' : '') +
-              (msg.type === 'error' ? ' bg-red-50 text-red-600' : '') +
-              (msg.type === 'warning' ? ' bg-yellow-50 text-yellow-600' : '')
-          }}"
-        >
-          <h4 class="flex items-center gap-2 font-semibold">
-            @if (msg.type && icons[msg.type]; as iconName) {
-              <<%= name %>-icon [name]="iconName" />
-            }
-            {{ msg.message }}
-          </h4>
-          @if (msg.data?.description) {
-            <p class="text-muted">{{ msg.data?.description }}</p>
-          }
-        </li>
-      }
-    </ul>
-  `,
-  animations: [sonnerAnimation],
-})
-export class Sonner extends NgbSonner {
-  readonly icons = {
-    success: 'lucideCircleCheck',
-    error: 'lucideCircleAlert',
-    info: 'lucideInfo',
-    warning: 'lucideTriangleAlert',
-    default: '',
-  };
-}
-
-export function sonnerPortal() {
-  const portal = ngbSonnerPortal(Sonner);
-  return portal;
-}

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

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

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

@@ -1,79 +0,0 @@
-import { Component, input } from '@angular/core';
-import { animate, keyframes, style, transition, trigger } from '@angular/animations';
-
-const spinnerAnimation = trigger('enterLeave', [
-  transition(':enter', [
-    animate(
-      '500ms cubic-bezier(0.68, -0.55, 0.265, 1.55)',
-      keyframes([
-        style({ opacity: 0, transform: 'scale(0)', offset: 0 }),
-        style({ opacity: 1, transform: 'scale(1.5)', offset: 0.7 }),
-        style({ opacity: 1, transform: 'scale(1)', offset: 1 }),
-      ]),
-    ),
-  ]),
-  transition(':leave', [
-    animate(
-      '500ms cubic-bezier(0.68, -0.55, 0.265, 1.55)',
-      keyframes([
-        style({ opacity: 1, transform: 'scale(1)', offset: 0 }),
-        style({ opacity: 1, transform: 'scale(1.5)', offset: 0.3 }),
-        style({ opacity: 0, transform: 'scale(0)', offset: 1 }),
-      ]),
-    ),
-  ]),
-]);
-
-@Component({
-  selector: '<%= name %>-spinner',
-  template: `
-    <ng-content />
-    <!-- <div
-      class="aspect-square w-full animate-spin rounded-full border-primary border-l-transparent"
-      [class]="mode()"
-      [style.border-width.px]="strokeWidth()"
-      [style.width.px]="diameter()"
-    ></div> -->
-    <div
-      class="spinner"
-      [style]="{
-        width: diameter() + 'px',
-        height: diameter() + 'px',
-      }"
-    >
-      <svg viewBox="0 0 50 50">
-        <circle
-          cx="25"
-          cy="25"
-          r="20"
-          [style.strokeWidth.px]="strokeWidth()"
-          stroke-dasharray="88 38"
-          stroke-linecap="round"
-          class="fill-none stroke-current"
-        >
-          <animateTransform
-            attributeName="transform"
-            type="rotate"
-            repeatCount="indefinite"
-            dur="1s"
-            values="0 25 25;360 25 25"
-          />
-        </circle>
-      </svg>
-    </div>
-  `,
-  host: {
-    class: 'inline-flex items-center justify-center transition-all duration-300 text-primary',
-    '[class]': `root() ? 'fixed inset-0 z-p bg-foreground bg-opacity-60 backdrop-blur-sm' : 'relative'`,
-  },
-  animations: [
-    // animation for entering and exiting, with a bouncy effect
-    spinnerAnimation,
-  ],
-})
-export class Spinner {
-  readonly mode = input<'light' | 'dark' | ''>('light');
-  readonly diameter = input<number>(35);
-  readonly strokeWidth = input<any>(3);
-  readonly root = input<boolean>(false);
-}

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

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