@ngbase/adk 0.1.1 → 0.1.3

package/tree/tree.d.ts

@@ -46,9 +46,9 @@ export declare class NgbTree<T> {
     foldAll(): void;
     expandAll(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgbTree<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgbTree<any>, "[ngbTree]", ["ngbTree"], { "dataSource": { "alias": "dataSource"; "required": true; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": true; "isSignal": true; }; "children": { "alias": "children"; "required": true; "isSignal": true; }; }, {}, ["treeNodeDef"], never, true, [{ directive: typeof i1.AccessibleGroup; inputs: {}; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgbTree<any>, "[ngbTree]", ["ngbTree"], { "dataSource": { "alias": "dataSource"; "required": true; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": true; "isSignal": true; }; "children": { "alias": "children"; "required": true; "isSignal": true; }; }, {}, ["treeNodeDef"], never, true, [{ directive: typeof i1.AccessibleGroup; inputs: {}; outputs: {}; }]>;
 }
-export declare function provideTree<T>(tree: Type<NgbTree<T>>): {
+export declare function aliasTree<T>(tree: Type<NgbTree<T>>): {
     provide: typeof NgbTree;
     useExisting: Type<NgbTree<T>>;
 };

package/utils/utils.d.ts

@@ -15,12 +15,13 @@ export declare function documentListener<T extends Event>(ev: string, fn: (e: T)
     skip?: number;
     element?: HTMLElement | Document | Window;
 }>): ListenerOut;
-export declare function filterFunction<T, V = T>(data: Signal<T[]> | T[], options: {
-    filter?: (v: V) => string;
+export type FilterOptions<T, V = any> = {
+    filter: (v: V) => string;
+    query?: (query: string, option: V) => boolean;
     key?: keyof T;
     childrenFilter?: (v: T) => V[];
-    query?: (v: V, search: string) => boolean;
-}): {
+};
+export declare function filterFunction<T, V = T>(data: Signal<T[]> | T[], ops: () => FilterOptions<T, V>): {
     search: import("@angular/core").WritableSignal<string>;
     list: import("@angular/core").WritableSignal<T[]>;
     filteredList: Signal<T[]>;

package/schematics/collection.json

@@ -1,15 +0,0 @@
-{
-  "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
-  "schematics": {
-    "ng-add": {
-      "description": "Add my library to the project.",
-      "factory": "./ng-add/index#ngAdd",
-      "schema": "./ng-add/schema.json"
-    },
-    "ui": {
-      "description": "Add an component to the project.",
-      "factory": "./components/index#myGenerator",
-      "schema": "./components/schema.json"
-    }
-  }
-}

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

@@ -1,55 +0,0 @@
-import { ChangeDetectionStrategy, Component, Directive, inject } from '@angular/core';
-import {
-  NgbAccordion,
-  NgbAccordionContent,
-  NgbAccordionGroup,
-  NgbAccordionHeader,
-  slideAnimation,
-} from '@ngbase/adk/accordion';
-
-@Component({
-  selector: '<%= name %>-accordion-group',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  hostDirectives: [{ directive: NgbAccordionGroup, inputs: ['multiple'] }],
-  template: `<ng-content />`,
-  host: {
-    class: 'block rounded-lg border bg-foreground',
-  },
-})
-export class AccordionGroup {}
-
-@Component({
-  selector: '<%= name %>-accordion',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  hostDirectives: [
-    { directive: NgbAccordion, inputs: ['expanded', 'disabled'], outputs: ['expandedChange'] },
-  ],
-  imports: [NgbAccordionContent],
-  template: `
-    <ng-content select="[<%= name %>AccordionHeader]" />
-    @if (accordion.expanded()) {
-      <div ngbAccordionContent [@slide] class="overflow-hidden">
-        <div class="px-3 pb-4 text-muted">
-          <ng-content />
-        </div>
-      </div>
-    }
-  `,
-  host: {
-    class: 'block will-change-auto [&:not(:last-child)]:border-b',
-  },
-  animations: [slideAnimation],
-})
-export class Accordion {
-  readonly accordion = inject(NgbAccordion);
-}
-
-@Directive({
-  selector: '[<%= name %>AccordionHeader]',
-  hostDirectives: [NgbAccordionHeader],
-  host: {
-    class:
-      'flex items-center w-full py-3 px-3 aria-disabled:cursor-not-allowed aria-disabled:opacity-50',
-  },
-})
-export class AccordionHeader {}

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

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

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

@@ -1,62 +0,0 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { DialogInput, DialogOptions, DialogRef } from '@ngbase/adk/portal';
-import { Button, ButtonVariant } from '<%= basepath %>/button';
-import { dialogPortal } from '<%= basepath %>/dialog';
-
-export interface AlertOptions {
-  title?: string;
-  description?: string;
-  actions?: {
-    text: string;
-    type?: ButtonVariant;
-    handler: (fn: VoidFunction) => any;
-  }[];
-}
-
-export function alertPortal() {
-  const base = dialogPortal();
-
-  function open<T>(opt: AlertOptions, comp?: DialogInput<T>) {
-    const options: DialogOptions = {
-      ...new DialogOptions(),
-      data: opt,
-      title: opt.title,
-      width: '32rem',
-      maxWidth: '95vw',
-      disableClose: true,
-      header: true,
-      focusTrap: true,
-    };
-
-    const diaRef = base.open(comp || Alert, options);
-
-    return diaRef;
-  }
-
-  function closeAll() {
-    base.closeAll();
-  }
-  return { open, closeAll };
-}
-
-@Component({
-  selector: '<%= name %>-alert',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [Button],
-  template: `
-    <h4 class="mb-2 text-base font-bold">{{ data?.title }}</h4>
-    <p class="text-muted-foreground pb-3">{{ data?.description }}</p>
-    <div class="flex justify-end gap-4 pt-1">
-      @for (action of data?.actions; track action) {
-        <button [<%= name %>Button]="action.type || 'primary'" (click)="action.handler(diaRef.close)">
-          {{ action.text }}
-        </button>
-      }
-    </div>
-  `,
-})
-export class Alert {
-  diaRef = inject<DialogRef<AlertOptions>>(DialogRef);
-
-  data = this.diaRef.options?.data;
-}

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

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

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

@@ -1,48 +0,0 @@
-import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
-import {
-  NgbAutocomplete,
-  NgbAutocompleteInput,
-  provideAutocomplete,
-} from '@ngbase/adk/autocomplete';
-import { NgbSelectOptionGroup } from '@ngbase/adk/select';
-
-@Component({
-  selector: '<%= name %>-autocomplete',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideAutocomplete(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, provideAvatar } 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: [provideAvatar(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 {
-  NgbBreadcrumb,
-  NgbBreadcrumbLink,
-  NgbBreadcrumbs,
-  NgbBreadcrumbSeparator,
-  NgbBreadcrumbSeparatorAria,
-  provideBreadcrumb,
-} from '@ngbase/adk/breadcrumb';
-import { Icon } from '<%= basepath %>/icon';
-import { provideIcons } from '@ng-icons/core';
-import { lucideChevronRight } from '@ng-icons/lucide';
-
-@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: [provideBreadcrumb(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,
-  provideCarousel,
-} from '@ngbase/adk/carousel';
-
-@Component({
-  selector: '<%= name %>-carousel',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideCarousel(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, provideChip } 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: [provideChip(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';