@ngbase/adk 0.1.0 → 0.1.2

package/popover/utils.d.ts

@@ -1,10 +1,24 @@
-import { PopoverOptions, PopoverPosition } from './popover.service';
+export interface PopoverUtilConfig {
+    offset?: number;
+    sideOffset?: number;
+    smoothScroll?: boolean;
+    position?: Position | OverlayPosition;
+    client?: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    } | null;
+    target: HTMLElement;
+    el?: HTMLElement;
+}
 export interface Rect {
     top: number;
     left: number;
     width: number;
     height: number;
 }
+export type OverlayPosition = 'top' | 'bottom' | 'left' | 'right' | 'rs' | 're' | 'ls' | 'le' | 'tl' | 'tr' | 'bl' | 'br';
 export declare enum Position {
     Top = "top",
     Bottom = "bottom",
@@ -13,44 +27,15 @@ export declare enum Position {
     TopLeft = "tl",
     TopRight = "tr",
     BottomLeft = "bl",
-    BottomRight = "br"
-}
-export interface ConfigObj {
-    top: number;
-    left: number;
-    width: number;
-    height: number;
-    elWidth: number;
-    elHeight: number;
-    offset: number;
-    priority: PopoverPosition;
-    position: PopoverPosition;
-    windowWidth: number;
-    windowHeight: number;
-    scrollWidth: number;
-}
-export interface OverflowData {
-    top: boolean;
-    bottom: boolean;
-    left: boolean;
-    right: boolean;
-    leftSide: boolean;
-    rightSide: boolean;
-    any: boolean;
-    preferredHorizontal: 'left' | 'right' | undefined;
-    preferredVertical: 'top' | 'bottom' | undefined;
-    overflowAmount: {
-        top: number;
-        bottom: number;
-        left: number;
-        right: number;
-        leftSide: number;
-        rightSide: number;
-    };
+    BottomRight = "br",
+    RightStart = "rs",
+    RightEnd = "re",
+    LeftStart = "ls",
+    LeftEnd = "le"
 }
 export interface PositionResult {
-    top: number;
-    left: number;
+    top?: number;
+    left?: number;
     bottom?: number;
     right?: number;
     position: Position;
@@ -61,25 +46,24 @@ export declare class PopoverPositioner {
     private config;
     private windowDimensions;
     private scrollWidth;
-    private overflow;
-    private elRect;
     private offset;
-    constructor(config: PopoverOptions, windowDimensions: {
+    private sideOffset;
+    private elementRect;
+    constructor(config: PopoverUtilConfig, windowDimensions: {
         width: number;
         height: number;
-    }, scrollWidth: number);
+    }, scrollWidth?: number);
     calculatePosition(): PositionResult;
     private getTargetRect;
     private getElementRect;
-    private getInitialPosition;
-    private getCoordinatesForPosition;
-    private adjustForOverflow;
-    private checkOverflow;
-    getAlternativePosition(position: Position, overflow: OverflowData): Position;
+    private findBestPosition;
+    private getAvailableSpace;
+    private positionOverflows;
+    private getOverflowAmount;
+    private getPositionWithLeastOverflow;
     private finalizePosition;
-    private getOverallOffset;
 }
-export declare function tooltipPosition(config: PopoverOptions, windowDimensions?: {
+export declare function tooltipPosition(config: PopoverUtilConfig, windowDimensions?: {
     width: number;
     height: number;
 }, scrollWidth?: number): PositionResult;

package/portal/dialog-ref.d.ts

@@ -54,7 +54,6 @@ export declare class DialogOptions<T = any> {
     maxHeight?: string;
     classNames?: string[];
     header?: boolean;
-    overrideLowerDialog?: boolean;
     disableClose?: boolean | undefined;
     ayId?: string;
     focusTrap?: boolean | undefined;

package/resizable/resizable-group.d.ts

@@ -14,9 +14,9 @@ export declare class NgbResizableGroup {
     start(): void;
     end(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgbResizableGroup, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgbResizableGroup, "[ngbResizableGroup]", ["ngbResizableGroup"], { "direction": { "alias": "direction"; "required": false; "isSignal": true; }; }, {}, ["panels"], ["[ngbResizable]"], true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgbResizableGroup, "[ngbResizableGroup]", ["ngbResizableGroup"], { "direction": { "alias": "direction"; "required": false; "isSignal": true; }; }, {}, ["panels"], never, true, never>;
 }
-export declare function provideResizableGroup(resizableGroup: typeof NgbResizableGroup): {
+export declare function aliasResizableGroup(resizableGroup: typeof NgbResizableGroup): {
     provide: typeof NgbResizableGroup;
     useExisting: typeof NgbResizableGroup;
 };

package/resizable/resizable.d.ts

@@ -42,9 +42,9 @@ export declare class NgbResizable {
     private updateFlex;
     updateElementSize(str: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgbResizable, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgbResizable, "[ngbResizable]", ["ngbResizable"], { "size": { "alias": "size"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgbResizable, "[ngbResizable]", ["ngbResizable"], { "size": { "alias": "size"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
-export declare function provideResizable(resizable: typeof NgbResizable): {
+export declare function aliasResizable(resizable: typeof NgbResizable): {
     provide: typeof NgbResizable;
     useExisting: typeof NgbResizable;
 };

package/schematics/collection.json

@@ -0,0 +1,15 @@
+{
+  "$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

@@ -0,0 +1,53 @@
+import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import {
+  aliasAccordion,
+  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',
+  exportAs: '<%= name %>Accordion',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [aliasAccordion(Accordion)],
+  imports: [NgbAccordionContent],
+  template: `
+    <ng-content select="[<%= name %>AccordionHeader]" />
+    @if (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 extends 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

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

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

@@ -0,0 +1,62 @@
+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

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

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

@@ -0,0 +1,44 @@
+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

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

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

@@ -0,0 +1,31 @@
+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

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

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

@@ -0,0 +1,11 @@
+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

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

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

@@ -0,0 +1,49 @@
+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

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

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

@@ -0,0 +1,29 @@
+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

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

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

@@ -0,0 +1,11 @@
+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

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

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

@@ -0,0 +1,44 @@
+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

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

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

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,12 @@
+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

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

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

@@ -0,0 +1,36 @@
+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

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