@ngbase/adk 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngbase/adk",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/ng-base/ngbase.git"
@@ -20,6 +20,7 @@
   "dependencies": {
     "tslib": "^2.3.0"
   },
+  "schematics": "./schematics/collection.json",
   "sideEffects": false,
   "module": "fesm2022/ngbase-adk.mjs",
   "typings": "index.d.ts",
@@ -39,14 +40,14 @@
       "types": "./accordion/index.d.ts",
       "default": "./fesm2022/ngbase-adk-accordion.mjs"
     },
-    "./autocomplete": {
-      "types": "./autocomplete/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-autocomplete.mjs"
-    },
     "./avatar": {
       "types": "./avatar/index.d.ts",
       "default": "./fesm2022/ngbase-adk-avatar.mjs"
     },
+    "./autocomplete": {
+      "types": "./autocomplete/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-autocomplete.mjs"
+    },
     "./bidi": {
       "types": "./bidi/index.d.ts",
       "default": "./fesm2022/ngbase-adk-bidi.mjs"
@@ -55,14 +56,14 @@
       "types": "./breadcrumb/index.d.ts",
       "default": "./fesm2022/ngbase-adk-breadcrumb.mjs"
     },
-    "./cache": {
-      "types": "./cache/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-cache.mjs"
-    },
     "./carousel": {
       "types": "./carousel/index.d.ts",
       "default": "./fesm2022/ngbase-adk-carousel.mjs"
     },
+    "./cache": {
+      "types": "./cache/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-cache.mjs"
+    },
     "./checkbox": {
       "types": "./checkbox/index.d.ts",
       "default": "./fesm2022/ngbase-adk-checkbox.mjs"
@@ -99,14 +100,14 @@
       "types": "./drag/index.d.ts",
       "default": "./fesm2022/ngbase-adk-drag.mjs"
     },
-    "./form-field": {
-      "types": "./form-field/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-form-field.mjs"
-    },
     "./hover-card": {
       "types": "./hover-card/index.d.ts",
       "default": "./fesm2022/ngbase-adk-hover-card.mjs"
     },
+    "./form-field": {
+      "types": "./form-field/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-form-field.mjs"
+    },
     "./icon": {
       "types": "./icon/index.d.ts",
       "default": "./fesm2022/ngbase-adk-icon.mjs"
@@ -191,26 +192,26 @@
       "types": "./sonner/index.d.ts",
       "default": "./fesm2022/ngbase-adk-sonner.mjs"
     },
-    "./switch": {
-      "types": "./switch/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-switch.mjs"
-    },
     "./stepper": {
       "types": "./stepper/index.d.ts",
       "default": "./fesm2022/ngbase-adk-stepper.mjs"
     },
+    "./switch": {
+      "types": "./switch/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-switch.mjs"
+    },
     "./table": {
       "types": "./table/index.d.ts",
       "default": "./fesm2022/ngbase-adk-table.mjs"
     },
-    "./tabs": {
-      "types": "./tabs/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-tabs.mjs"
-    },
     "./test": {
       "types": "./test/index.d.ts",
       "default": "./fesm2022/ngbase-adk-test.mjs"
     },
+    "./tabs": {
+      "types": "./tabs/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-tabs.mjs"
+    },
     "./toggle": {
       "types": "./toggle/index.d.ts",
       "default": "./fesm2022/ngbase-adk-toggle.mjs"
@@ -227,14 +228,14 @@
       "types": "./tour/index.d.ts",
       "default": "./fesm2022/ngbase-adk-tour.mjs"
     },
-    "./translate": {
-      "types": "./translate/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-translate.mjs"
-    },
     "./tree": {
       "types": "./tree/index.d.ts",
       "default": "./fesm2022/ngbase-adk-tree.mjs"
     },
+    "./translate": {
+      "types": "./translate/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-translate.mjs"
+    },
     "./utils": {
       "types": "./utils/index.d.ts",
       "default": "./fesm2022/ngbase-adk-utils.mjs"

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,55 @@
+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

@@ -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,48 @@
+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

@@ -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, 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

@@ -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 {
+  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

@@ -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,
+  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

@@ -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, 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

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