@ngbase/adk 0.1.2 → 0.1.3

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

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

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

@@ -1,44 +0,0 @@
-import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
-import { NgbAutocomplete, NgbAutocompleteInput, aliasAutocomplete } from '@ngbase/adk/autocomplete';
-import { NgbSelectOptionGroup } from '@ngbase/adk/select';
-
-@Component({
-  selector: '<%= name %>-autocomplete',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [aliasAutocomplete(Autocomplete)],
-  imports: [NgbSelectOptionGroup],
-  template: `
-    <ul #container class="readonly !flex w-full flex-wrap gap-2" (click)="prevent($event)">
-      <ng-content select="<%= name %>-chip, <%= name %>-chip-group" />
-
-      <li class="flex min-w-8 flex-1 items-center" (click)="open()">
-        <ng-content select="input" />
-      </li>
-    </ul>
-    <ng-template #optionsTemplate>
-      <div #optionsGroup ngbSelectOptionGroup class="p-1">
-        <ng-content />
-      </div>
-    </ng-template>
-  `,
-  host: {
-    class: 'inline-flex',
-  },
-})
-export class Autocomplete<T> extends NgbAutocomplete<T> {}
-
-@Directive({
-  selector: '[<%= name %>AutocompleteInput]',
-  exportAs: '<%= name %>AutocompleteInput',
-  hostDirectives: [
-    {
-      directive: NgbAutocompleteInput,
-      inputs: ['options', 'filterFn'],
-      outputs: ['ngbAutocompleteInput: <%= name %>AutocompleteInput'],
-    },
-  ],
-  host: {
-    class: 'w-full bg-transparent shadow-none outline-none',
-  },
-})
-export class AutocompleteInput<T> {}

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

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

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

@@ -1,31 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { NgbAvatar, NgbAvatarGroup, aliasAvatar } from '@ngbase/adk/avatar';
-
-@Component({
-  selector: '<%= name %>-avatar-group',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  hostDirectives: [{ directive: NgbAvatarGroup, inputs: ['reverse', 'left'] }],
-  template: `<ng-content select="<%= name %>-avatar,[<%= name %>Avatar]" />`,
-  host: {
-    class: 'flex flex-row',
-  },
-})
-export class AvatarGroup {}
-
-@Component({
-  selector: '<%= name %>-avatar, [<%= name %>Avatar]',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [aliasAvatar(Avatar)],
-  template: `
-    @if (src(); as img) {
-      <img [src]="img" alt="avatar" class="h-full max-h-full max-w-full" />
-    } @else {
-      <ng-content>{{ nameChar() }}</ng-content>
-    }
-  `,
-  host: {
-    class:
-      'inline-flex aspect-square rounded-full overflow-hidden border-2 border-foreground relative bg-background text-muted items-center justify-center',
-  },
-})
-export class Avatar extends NgbAvatar {}

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

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

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

@@ -1,11 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-
-@Component({
-  selector: '<%= name %>-badge, [<%= name %>Badge]',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<ng-content />`,
-  host: {
-    class: 'inline-block bg-muted-background rounded-full px-2 py-1 text-xs font-semibold',
-  },
-})
-export class Badge {}

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

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

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

@@ -1,49 +0,0 @@
-import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
-import { Icon } from '<%= basepath %>/icon';
-import { provideIcons } from '@ng-icons/core';
-import { lucideChevronRight } from '@ng-icons/lucide';
-import {
-  aliasBreadcrumb,
-  NgbBreadcrumb,
-  NgbBreadcrumbLink,
-  NgbBreadcrumbs,
-  NgbBreadcrumbSeparator,
-  NgbBreadcrumbSeparatorAria,
-} from '@ngbase/adk/breadcrumb';
-
-@Component({
-  selector: '<%= name %>-breadcrumbs',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  hostDirectives: [NgbBreadcrumbs],
-  template: `<ng-content />`,
-  host: {
-    class: 'flex items-center gap-2',
-  },
-})
-export class Breadcrumbs {}
-
-@Component({
-  selector: '<%= name %>-breadcrumb',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [aliasBreadcrumb(Breadcrumb)],
-  viewProviders: [provideIcons({ lucideChevronRight })],
-  imports: [Icon, NgbBreadcrumbLink, NgbBreadcrumbSeparatorAria],
-  template: `
-    <a class='hover:text-primary aria-[current="page"]:text-primary' ngbBreadcrumbLink>
-      <ng-content />
-    </a>
-    @if (!active()) {
-      <<%= name %>-icon ngbBreadcrumbSeparatorAria name="lucideChevronRight" class="text-muted" />
-    }
-  `,
-  host: {
-    class: 'flex items-center gap-2 text-muted',
-  },
-})
-export class Breadcrumb extends NgbBreadcrumb {}
-
-@Directive({
-  selector: '[<%= name %>BreadcrumbsSeparator]',
-  hostDirectives: [NgbBreadcrumbSeparator],
-})
-export class BreadcrumbsSeparator {}

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

@@ -1 +0,0 @@
-export { Breadcrumbs, BreadcrumbsSeparator, Breadcrumb } from './breadcrumb';

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

@@ -1,29 +0,0 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-import { ɵFocusStyle as FocusStyle } from '<%= basepath %>/checkbox';
-
-export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'icon';
-
-@Component({
-  selector: '[<%= name %>Button]',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  hostDirectives: [FocusStyle],
-  template: `<ng-content />`,
-  host: {
-    type: 'button',
-    class:
-      'inline-flex items-center justify-center rounded-lg px-4 py-2 border disabled:text-muted disabled:cursor-not-allowed',
-    '[class]': `variant() === 'primary'
-          ? 'bg-primary text-foreground disabled:bg-background disabled:border-background border-primary'
-          : variant() === 'secondary'
-          ? 'bg-muted-background disabled:bg-muted-background border-muted-background'
-          : variant() === 'ghost' || variant() === 'icon'
-            ? '[&:not(:disabled)]:hover:bg-muted-background [&:not(:disabled)]:active:bg-muted-background/50 border-transparent'
-              : ' text-primary [&:not(:disabled)]:hover:bg-background [&:not(:disabled)]:active:bg-background/50'`,
-  },
-})
-export class Button {
-  variant = input('primary', {
-    alias: '<%= name %>Button',
-    transform: (value: ButtonVariant | '') => value || 'primary',
-  });
-}

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

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

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

@@ -1,11 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-
-@Component({
-  selector: '<%= name %>-card, [<%= name %>Card]',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<ng-content />`,
-  host: {
-    class: 'block rounded-lg border bg-foreground p-4',
-  },
-})
-export class Card {}

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

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

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

@@ -1,44 +0,0 @@
-import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
-import {
-  NgbCarousel,
-  NgbCarouselButton,
-  NgbCarouselContainer,
-  NgbCarouselItem,
-  NgbCarouselSubContainer,
-  aliasCarousel,
-} from '@ngbase/adk/carousel';
-
-@Component({
-  selector: '<%= name %>-carousel',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [aliasCarousel(Carousel)],
-  imports: [NgbCarouselContainer, NgbCarouselSubContainer],
-  template: `
-    <div class="touch-none overflow-hidden" ngbCarouselContainer>
-      <div ngbCarouselSubContainer class="relative -ml-4 flex">
-        <ng-content select="[<%= name %>CarouselItem]" />
-      </div>
-    </div>
-    <div>
-      <ng-content />
-    </div>
-  `,
-  host: {
-    class: 'flex flex-col gap-4 relative',
-  },
-})
-export class Carousel extends NgbCarousel {}
-
-@Directive({
-  selector: '[<%= name %>CarouselItem]',
-  hostDirectives: [NgbCarouselItem],
-})
-export class CarouselItem {}
-
-@Directive({
-  selector: '[<%= name %>CarouselButton]',
-  hostDirectives: [
-    { directive: NgbCarouselButton, inputs: ['ngbCarouselButton: <%= name %>CarouselButton'] },
-  ],
-})
-export class CarouselButton {}

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

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

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

@@ -1,46 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { FocusStyle } from './focus-style.directive';
-import { CheckboxButton, NgbCheckbox } from '@ngbase/adk/checkbox';
-
-@Component({
-  selector: '<%= name %>-checkbox',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  hostDirectives: [
-    {
-      directive: NgbCheckbox,
-      inputs: ['disabled', 'checked', 'indeterminate'],
-      outputs: ['checkedChange', 'change'],
-    },
-  ],
-  imports: [FormsModule, FocusStyle, CheckboxButton],
-  template: `
-    <button
-      <%= name %>FocusStyle
-      ngbCheckboxButton
-      class="custom-checkbox relative flex h-4 w-4 flex-none items-center justify-center rounded border border-primary transition-colors"
-      [class]="checkbox.disabled() ? '!border-muted bg-muted' : path() ? 'bg-primary' : ''"
-    >
-      @if (path(); as d) {
-        <svg class="h-full w-full text-foreground" viewBox="0 0 24 24" aria-hidden="true">
-          <path [attr.d]="d" stroke="currentColor" stroke-width="2" fill="none" />
-        </svg>
-      }
-    </button>
-    <ng-content />
-  `,
-  host: {
-    class: 'inline-flex items-center gap-2 py-1 disabled:opacity-60 disabled:cursor-not-allowed',
-  },
-})
-export class Checkbox {
-  readonly checkbox = inject(NgbCheckbox);
-
-  readonly path = computed(() =>
-    this.checkbox.indeterminate()
-      ? 'M6 12L18 12'
-      : this.checkbox.checked()
-        ? 'M20 6L9 17L4 12'
-        : '',
-  );
-}

package/schematics/components/files/checkbox/focus-style.directive.ts.template

@@ -1,12 +0,0 @@
-import { booleanAttribute, Directive, input } from '@angular/core';
-
-@Directive({
-  selector: '[<%= name %>FocusStyle]',
-  host: {
-    class: 'outline-none',
-    '[class]': `!unfocus() ? 'focus-visible:ring-2 focus:ring-2 focus:ring-offset-2 ring-primary focus-visible:ring-offset-2 ring-offset-background data-[focus]:ring-2 data-[focus]:ring-offset-2 data-[focus]:ring-offset-background data-[focus]:ring-primary' : ''`,
-  },
-})
-export class FocusStyle {
-  unfocus = input(false, { transform: booleanAttribute });
-}

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

@@ -1,6 +0,0 @@
-/*
- * Public API Surface of checkbox
- */
-
-export * from './checkbox';
-export { FocusStyle as ɵFocusStyle } from './focus-style.directive';

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

@@ -1,36 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { NgbChip, NgbChipGroup, NgbChipRemove, aliasChip } from '@ngbase/adk/chip';
-import { Button } from '<%= basepath %>/button';
-import { Icon } from '<%= basepath %>/icon';
-import { provideIcons } from '@ng-icons/core';
-import { lucideX } from '@ng-icons/lucide';
-
-@Component({
-  selector: '<%= name %>-chip-group',
-  hostDirectives: [NgbChipGroup],
-  template: `<ng-content />`,
-})
-export class ChipGroup<T> {}
-
-@Component({
-  selector: '<%= name %>-chip, [<%= name %>Chip]',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [aliasChip(Chip)],
-  viewProviders: [provideIcons({ lucideX })],
-  imports: [Button, Icon, NgbChipRemove],
-  template: `<ng-content />
-    @if (removable()) {
-      <button
-        <%= name %>Button="ghost"
-        ngbChipRemove
-        class="small -my-2 data-[dir=ltr]:-mr-4 data-[dir=rtl]:-ml-4"
-      >
-        <<%= name %>-icon name="lucideX" />
-      </button>
-    }`,
-  host: {
-    class:
-      'inline-flex items-center bg-muted-background rounded-lg px-2 py-1 text-xs font-medium',
-  },
-})
-export class Chip<T = any> extends NgbChip<T> {}

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

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

package/schematics/components/files/color-picker/color-picker.ts.template

@@ -1,104 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import {
-  ColorAlpha,
-  ColorAlphaThumb,
-  ColorHue,
-  ColorHueThumb,
-  ColorPickerTrigger,
-  ColorSelected,
-  ColorSpectrum,
-  ColorSpectrumSelector,
-  NgbColorInput,
-  NgbColorPicker,
-  registerColorPicker,
-} from '@ngbase/adk/color-picker';
-import { InputBase } from '@ngbase/adk/form-field';
-
-@Component({
-  selector: '<%= name %>-color-picker-container',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    ColorSpectrum,
-    ColorSpectrumSelector,
-    ColorSelected,
-    ColorHue,
-    ColorHueThumb,
-    ColorAlpha,
-    ColorAlphaThumb,
-  ],
-  template: `
-    <div class="flex w-full flex-col">
-      <div ngbColorSpectrum class="relative h-[160px] w-full overflow-hidden rounded-md">
-        <button
-          ngbColorSpectrumSelector
-          class="pointer-events-none absolute -left-2 -top-2 h-4 w-4 cursor-pointer rounded-full border"
-        ></button>
-      </div>
-      <div class="flex gap-4 p-3">
-        <div ngbColorSelected class="aspect-square w-10 rounded-md border bg-slate-500"></div>
-        <div class="flex flex-1 flex-col gap-4">
-          <div ngbColorHue class="relative h-3">
-            <button
-              ngbColorHueThumb
-              class="border-red pointer-events-none absolute -top-1 h-5 w-5 -translate-x-2.5 cursor-pointer rounded-full border-2"
-            ></button>
-          </div>
-
-          <div ngbColorAlpha class="relative h-3">
-            <button
-              ngbColorAlphaThumb
-              class="alpha-selector border-red pointer-events-none absolute -top-1 h-5 w-5 -translate-x-2.5 cursor-pointer rounded-full border-2"
-            ></button>
-          </div>
-        </div>
-      </div>
-      @if (presetColors().length) {
-        <div class="flex flex-wrap gap-2 border-t p-2 pt-3">
-          @for (color of presetColors(); track color) {
-            <button
-              type="button"
-              class="aspect-square w-4 rounded-md border"
-              [style.backgroundColor]="color"
-              (click)="setValue(color, true)"
-            ></button>
-          }
-        </div>
-      }
-    </div>
-  `,
-  host: {
-    class: 'inline-block min-w-[245px]',
-  },
-})
-export class ColorPicker extends NgbColorPicker {}
-
-@Component({
-  selector: '<%= name %>-color-input',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [registerColorPicker({ picker: ColorPicker, accessor: ColorInput })],
-  imports: [ColorPickerTrigger, InputBase],
-  template: `
-    <input
-      ngbInputBase
-      type="text"
-      [value]="value()"
-      (valueChange)="updateValue($event)"
-      class="w-full flex-1 bg-transparent outline-none"
-    />
-    <button
-      #color
-      type="button"
-      ngbColorPickerTrigger
-      [value]="value()"
-      [format]="format()"
-      [presetColors]="presetColors()"
-      (valueChange)="updateValue($event)"
-      class="h-5 w-5 flex-none rounded-full border"
-      [style.backgroundColor]="value()"
-    ></button>
-  `,
-  host: {
-    class: '!inline-flex gap-2 items-center',
-  },
-})
-export class ColorInput extends NgbColorInput {}

package/schematics/components/files/color-picker/index.ts.template

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

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

@@ -1,82 +0,0 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { RouterLink } from '@angular/router';
-import { AccessibleGroup, AccessibleItem, Autofocus } from '@ngbase/adk/a11y';
-import { DialogRef } from '@ngbase/adk/portal';
-import { filterFunction, uniqueId } from '@ngbase/adk/utils';
-import { List } from '<%= basepath %>/list';
-
-export interface CommandGroup {
-  name: string;
-  items: CommandItem[];
-}
-
-export interface CommandItem {
-  name: string;
-  link: string;
-}
-
-@Component({
-  selector: '<%= name %>-command',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [FormsModule, List, AccessibleGroup, AccessibleItem, Autofocus, RouterLink],
-  template: `
-    <div ngbAccessibleGroup [ayId]="ayId" [isPopup]="true" class="static w-full">
-      <input
-        ngbAutofocus
-        [(ngModel)]="filter.search"
-        type="text"
-        placeholder="Search for apps and commands"
-        class="sticky -top-4 w-full border-b bg-foreground p-4 outline-none"
-      />
-      @for (group of filter.filteredList(); track group.name) {
-        <h4 class="mx-4 my-2 text-sm text-gray-500">{{ group.name }}</h4>
-        <div class="flex flex-col px-2">
-          @for (item of group.items; track item.name) {
-            <a
-              <%= name %>List
-              class="w-full"
-              [ayId]="ayId"
-              [routerLink]="item.link || null"
-              (click)="close()"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="mr-2"
-              >
-                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
-              </svg>
-              <span>{{ item.name }}</span>
-            </a>
-          }
-        </div>
-      }
-    </div>
-  `,
-  host: {
-    class: 'block -m-4',
-  },
-})
-export class Command {
-  private dialogRef = inject<DialogRef<CommandGroup[]>>(DialogRef);
-
-  readonly ayId = uniqueId();
-
-  readonly filter = filterFunction<CommandGroup, CommandItem>(this.dialogRef.data!, {
-    filter: item => item.name,
-    key: 'items',
-    childrenFilter: item => item.items,
-  });
-
-  close() {
-    this.dialogRef.close();
-  }
-}

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

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