@ngbase/adk 0.1.3 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngbase/adk",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/ng-base/ngbase.git"
@@ -40,14 +40,14 @@
       "types": "./accordion/index.d.ts",
       "default": "./fesm2022/ngbase-adk-accordion.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"
     },
+    "./avatar": {
+      "types": "./avatar/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-avatar.mjs"
+    },
     "./bidi": {
       "types": "./bidi/index.d.ts",
       "default": "./fesm2022/ngbase-adk-bidi.mjs"
@@ -56,14 +56,14 @@
       "types": "./cache/index.d.ts",
       "default": "./fesm2022/ngbase-adk-cache.mjs"
     },
-    "./carousel": {
-      "types": "./carousel/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-carousel.mjs"
-    },
     "./breadcrumb": {
       "types": "./breadcrumb/index.d.ts",
       "default": "./fesm2022/ngbase-adk-breadcrumb.mjs"
     },
+    "./carousel": {
+      "types": "./carousel/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-carousel.mjs"
+    },
     "./checkbox": {
       "types": "./checkbox/index.d.ts",
       "default": "./fesm2022/ngbase-adk-checkbox.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,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-background',
+  },
+})
+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="text-muted-foreground px-3 pb-4">
+          <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="pb-3 text-muted-foreground">{{ 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: ['isChip'],
+      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-muted relative bg-background text-muted-foreground 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 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,53 @@
+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-foreground"
+      />
+    }
+  `,
+  host: {
+    class: 'flex items-center gap-2 text-muted-foreground',
+  },
+})
+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:opacity-50 disabled:pointer-events-none',
+    '[class]': `variant() === 'primary'
+          ? 'bg-primary text-primary-foreground border-primary'
+          : variant() === 'secondary'
+          ? 'bg-secondary text-secondary-foreground border-secondary hover:bg-secondary/80'
+          : variant() === 'ghost' || variant() === 'icon'
+            ? 'hover:bg-accent hover:text-accent-foreground border-transparent'
+              : 'bg-background hover:bg-accent hover:text-accent-foreground'`,
+  },
+})
+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-card text-card-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,36 @@
+import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { FocusStyle } from './focus-style.directive';
+import { CheckboxButton, NgbCheckbox, aliasCheckbox } from '@ngbase/adk/checkbox';
+
+@Component({
+  selector: '<%= name %>-checkbox',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [aliasCheckbox(Checkbox)],
+  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]="
+        disabled() ? '!border-muted-foreground bg-muted-foreground' : path() ? 'bg-primary' : ''
+      "
+    >
+      @if (path(); as d) {
+        <svg class="h-full w-full text-background" 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 extends NgbCheckbox {
+  readonly path = computed(() =>
+    this.indeterminate() ? 'M6 12L18 12' : this.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-within:ring-2 focus-within: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,38 @@
+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 />`,
+  host: {
+    class: 'flex flex-wrap gap-2',
+  },
+})
+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 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';

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

@@ -0,0 +1,104 @@
+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 border-b">
+        <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

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