@ngbase/adk 0.1.3 → 0.1.4

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

@@ -0,0 +1,79 @@
+import { Component, input } from '@angular/core';
+import { animate, keyframes, style, transition, trigger } from '@angular/animations';
+
+const spinnerAnimation = trigger('enterLeave', [
+  transition(':enter', [
+    animate(
+      '500ms cubic-bezier(0.68, -0.55, 0.265, 1.55)',
+      keyframes([
+        style({ opacity: 0, transform: 'scale(0)', offset: 0 }),
+        style({ opacity: 1, transform: 'scale(1.5)', offset: 0.7 }),
+        style({ opacity: 1, transform: 'scale(1)', offset: 1 }),
+      ]),
+    ),
+  ]),
+  transition(':leave', [
+    animate(
+      '500ms cubic-bezier(0.68, -0.55, 0.265, 1.55)',
+      keyframes([
+        style({ opacity: 1, transform: 'scale(1)', offset: 0 }),
+        style({ opacity: 1, transform: 'scale(1.5)', offset: 0.3 }),
+        style({ opacity: 0, transform: 'scale(0)', offset: 1 }),
+      ]),
+    ),
+  ]),
+]);
+
+@Component({
+  selector: '<%= name %>-spinner',
+  template: `
+    <ng-content />
+    <!-- <div
+      class="aspect-square w-full animate-spin rounded-full border-primary border-l-transparent"
+      [class]="mode()"
+      [style.border-width.px]="strokeWidth()"
+      [style.width.px]="diameter()"
+    ></div> -->
+    <div
+      class="spinner"
+      [style]="{
+        width: diameter() + 'px',
+        height: diameter() + 'px',
+      }"
+    >
+      <svg viewBox="0 0 50 50">
+        <circle
+          cx="25"
+          cy="25"
+          r="20"
+          [style.strokeWidth.px]="strokeWidth()"
+          stroke-dasharray="88 38"
+          stroke-linecap="round"
+          class="fill-none stroke-current"
+        >
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            repeatCount="indefinite"
+            dur="1s"
+            values="0 25 25;360 25 25"
+          />
+        </circle>
+      </svg>
+    </div>
+  `,
+  host: {
+    class: 'inline-flex items-center justify-center transition-all duration-300 text-primary',
+    '[class]': `root() ? 'fixed inset-0 z-p bg-background bg-opacity-60 backdrop-blur-sm' : 'relative'`,
+  },
+  animations: [
+    // animation for entering and exiting, with a bouncy effect
+    spinnerAnimation,
+  ],
+})
+export class Spinner {
+  readonly mode = input<'light' | 'dark' | ''>('light');
+  readonly diameter = input<number>(35);
+  readonly strokeWidth = input<any>(3);
+  readonly root = input<boolean>(false);
+}

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

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

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

@@ -0,0 +1,88 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import {
+  aliasStepper,
+  NgbStep,
+  NgbStepHeader,
+  NgbStepper,
+  NgbStepperStep,
+  provideStep,
+  stepperAnimation,
+} from '@ngbase/adk/stepper';
+
+@Component({
+  selector: '<%= name %>-stepper',
+  exportAs: '<%= name %>Stepper',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [aliasStepper(Stepper)],
+  imports: [NgTemplateOutlet, NgbStepperStep],
+  template: `
+    <div class="flex justify-between" [class.flex-col]="direction() === 'vertical'">
+      @for (step of steps(); track step) {
+        <div
+          [ngbStepperStep]="$index"
+          class="{{
+            'relative flex pb-4 data-[index]:flex-1 data-[index]:after:mx-2 data-[index]:after:block data-[index]:after:flex-1 data-[index]:after:bg-foreground data-[index]:after:transition-colors' +
+              (activeIndex() > $index ? ' data-[index]:after:bg-primary' : '') +
+              (direction() === 'vertical'
+                ? ' flex-col data-[index]:after:absolute data-[index]:after:bottom-0 data-[index]:after:left-3 data-[index]:after:top-10 data-[index]:after:w-0.5'
+                : ' items-center data-[index]:after:h-0.5')
+          }}"
+        >
+          <div class="flex items-center">
+            <div
+              class="{{
+                'mr-2 grid aspect-square w-10 place-content-center rounded-full border-2 transition-colors' +
+                  (activeIndex() > $index ? ' bg-primary' : '') +
+                  (activeIndex() >= $index ? ' border-primary' : '')
+              }}"
+            >
+              {{ $index + 1 }}
+            </div>
+            @if (step.header(); as header) {
+              <ng-container *ngTemplateOutlet="header" />
+            } @else {
+              {{ step.title() }}
+            }
+          </div>
+          @if (step.verticalTemplate(); as template) {
+            <div class="ml-12" [@slide]>
+              <div class="pt-4">
+                <ng-container *ngTemplateOutlet="template" />
+              </div>
+            </div>
+          }
+        </div>
+      }
+    </div>
+    <ng-content />
+  `,
+  animations: [stepperAnimation],
+})
+export class Stepper extends NgbStepper {}
+
+@Component({
+  selector: '<%= name %>-step',
+  exportAs: '<%= name %>Step',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [provideStep(Step)],
+  imports: [NgTemplateOutlet],
+  template: `
+    <ng-template #stepContainer>
+      <ng-content />
+    </ng-template>
+
+    @if (horizontalTemplate(); as template) {
+      <div class="pb-4">
+        <ng-container *ngTemplateOutlet="template" />
+      </div>
+    }
+  `,
+})
+export class Step extends NgbStep {}
+
+@Directive({
+  selector: '[<%= name %>StepHeader]',
+  hostDirectives: [NgbStepHeader],
+})
+export class StepHeader {}

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

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

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

@@ -0,0 +1,29 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgbSwitch, NgbSwitchLabel, NgbSwitchThumb, NgbSwitchTrack } from '@ngbase/adk/switch';
+
+@Component({
+  selector: '<%= name %>-switch',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [
+    { directive: NgbSwitch, inputs: ['checked', 'disabled'], outputs: ['checkedChange', 'change'] },
+  ],
+  imports: [NgbSwitchTrack, NgbSwitchLabel, NgbSwitchThumb],
+  template: `
+    <button
+      ngbSwitchTrack
+      class="relative w-9 rounded-full border-2 border-transparent bg-muted transition-colors aria-[checked=true]:bg-primary"
+    >
+      <span
+        #thumb="ngbSwitchThumb"
+        ngbSwitchThumb
+        [class]="thumb.checked() ? (thumb.rtl() ? '-translate-x-full' : 'translate-x-full') : ''"
+        class="block h-4 w-4 rounded-full bg-background shadow-sm transition-transform"
+      ></span>
+    </button>
+    <label ngbSwitchLabel><ng-content /></label>
+  `,
+  host: {
+    class: 'inline-flex items-center gap-2 py-1',
+  },
+})
+export class Switch {}

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

@@ -0,0 +1,27 @@
+import {
+  BodyRow,
+  BodyRowDef,
+  Cell,
+  CellDef,
+  Column,
+  HeadDef,
+  Head,
+  Table,
+  HeadRow,
+  HeadRowDef,
+} from './table';
+
+export * from './table';
+
+export const TableComponents = [
+  BodyRow,
+  BodyRowDef,
+  Cell,
+  CellDef,
+  Head,
+  HeadDef,
+  HeadRow,
+  HeadRowDef,
+  Column,
+  Table,
+];

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

@@ -0,0 +1,122 @@
+import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import {
+  NgbBodyRow,
+  NgbBodyRowDef,
+  NgbCell,
+  NgbCellDef,
+  NgbColumn,
+  NgbHead,
+  NgbHeadDef,
+  NgbHeadRow,
+  NgbHeadRowDef,
+  NgbTable,
+} from '@ngbase/adk/table';
+
+@Component({
+  selector: 'table[<%= name %>Table]',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{ provide: NgbTable, useExisting: Table }],
+  template: `
+    <thead>
+      <ng-container #thead />
+    </thead>
+    <tbody>
+      <ng-container #tbody />
+    </tbody>
+  `,
+  host: {
+    class: 'w-full text-sm',
+  },
+})
+export class Table<T> extends NgbTable<T> {}
+
+// Cell
+@Component({
+  selector: '[<%= name %>Cell]',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [NgbCell],
+  template: `<ng-content />`,
+  host: {
+    class: 'px-4 py-2 align-middle bg-background',
+  },
+})
+export class Cell {}
+
+@Directive({
+  selector: '[<%= name %>CellDef]',
+  hostDirectives: [NgbCellDef],
+})
+export class CellDef {}
+
+// Body
+
+@Directive({
+  selector: '[<%= name %>BodyRowDef]',
+  hostDirectives: [
+    { directive: NgbBodyRowDef, inputs: ['ngbBodyRowDefColumns: <%= name %>BodyRowDefColumns'] },
+  ],
+})
+export class BodyRowDef {}
+
+@Component({
+  selector: '[<%= name %>BodyRow]',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{ provide: NgbBodyRow, useExisting: BodyRow }],
+  template: `<ng-container #container />`,
+  host: {
+    class: '[&:not(:last-child)]:border-b hover:bg-muted h-12',
+  },
+})
+export class BodyRow extends NgbBodyRow {}
+
+// Column
+
+@Directive({
+  selector: '[<%= name %>Column]',
+  hostDirectives: [{ directive: NgbColumn, inputs: ['ngbColumn: <%= name %>Column', 'sticky'] }],
+})
+export class Column {}
+
+// Head Cell
+
+@Component({
+  selector: '[<%= name %>Head]',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [NgbHead],
+  template: `<ng-content />`,
+  host: {
+    class:
+      'px-4 py-2 text-left align-middle font-medium text-muted-foreground border-b bg-background',
+  },
+})
+export class Head {}
+
+@Directive({
+  selector: '[<%= name %>HeadDef]',
+  hostDirectives: [NgbHeadDef],
+})
+export class HeadDef {}
+
+// Head Row
+
+@Component({
+  selector: '[<%= name %>HeadRow]',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{ provide: NgbHeadRow, useExisting: HeadRow }],
+  template: `<ng-container #container />`,
+  host: {
+    class: `h-10 [&[data-sticky=true]]:sticky [&[data-sticky=true]]:top-0 [&[data-sticky=true]]:bg-background`,
+  },
+})
+export class HeadRow extends NgbHeadRow {}
+
+@Directive({
+  selector: '[<%= name %>HeadRowDef]',
+  hostDirectives: [
+    {
+      directive: NgbHeadRowDef,
+      inputs: ['ngbHeadRowDef: <%= name %>HeadRowDef', 'ngbHeadRowDefSticky: <%= name %>HeadRowDefSticky'],
+    },
+  ],
+})
+export class HeadRowDef {}

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

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

package/schematics/components/files/tabs/tab.ts.template

@@ -0,0 +1,92 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { Icon } from '<%= basepath %>/icon';
+import { provideIcons } from '@ng-icons/core';
+import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
+import {
+  aliasTab,
+  aliasTabs,
+  NgbTab,
+  NgbTabChangeEvent,
+  NgbTabHeader,
+  NgbTabLazy,
+  NgbTabs,
+  TabButton,
+  TabButtonsGroup,
+  TabScroll,
+} from '@ngbase/adk/tabs';
+
+@Component({
+  selector: '<%= name %>-tabs',
+  imports: [Icon, TabButton, TabButtonsGroup, TabScroll],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [aliasTabs(Tabs)],
+  viewProviders: [provideIcons({ lucideChevronRight, lucideChevronLeft })],
+  template: `<div class="flex items-center border-b">
+      <ng-content select=".tab-start-header-content" />
+      <div class="relative flex overflow-hidden">
+        <button
+          ngbTabScroll="left"
+          class="absolute left-0 z-10 h-full place-items-center bg-background px-2"
+        >
+          <<%= name %>-icon name="lucideChevronLeft" />
+        </button>
+        <nav ngbTabButtonsGroup class="overflow-auto">
+          <div #tabListContainer class="flex h-full w-max">
+            @for (tab of tabs(); track tab.id) {
+              <button
+                [ngbTabButton]="tab"
+                class="text-muted-foreground aria-[disabled=true]:text-muted-foreground whitespace-nowrap border-b-2 border-transparent px-4 py-3 font-medium aria-[disabled=true]:cursor-not-allowed aria-[selected=true]:!border-primary aria-[selected=true]:!text-primary aria-[disabled=true]:opacity-50"
+              ></button>
+            }
+          </div>
+        </nav>
+        <button
+          ngbTabScroll="right"
+          class="absolute right-0 z-10 h-full place-items-center bg-background px-2"
+        >
+          <<%= name %>-icon name="lucideChevronRight" />
+        </button>
+      </div>
+      <ng-content select=".tab-header-content" />
+    </div>
+    <ng-content /> `,
+  host: {
+    class: 'bg-background flex flex-col',
+  },
+})
+export class Tabs extends NgbTabs<Tab> {}
+
+@Component({
+  selector: '<%= name %>-tab',
+  exportAs: '<%= name %>Tab',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [aliasTab(Tab)],
+  imports: [NgTemplateOutlet],
+  template: `
+    @if (lazyTemplate(); as template) {
+      <ng-container *ngTemplateOutlet="template" />
+    } @else if (activeMode()) {
+      <ng-content />
+    }
+  `,
+  host: {
+    class: 'block overflow-auto',
+    '[class]': `active() ? 'flex-1 h-full pt-4' : 'hidden'`,
+  },
+})
+export class Tab extends NgbTab {}
+
+@Directive({
+  selector: '[<%= name %>TabHeader]',
+  hostDirectives: [NgbTabHeader],
+})
+export class TabHeader {}
+
+@Directive({
+  selector: '[<%= name %>TabLazy]',
+  hostDirectives: [NgbTabLazy],
+})
+export class TabLazy {}
+
+export type TabChangeEvent = NgbTabChangeEvent;

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

@@ -0,0 +1,2 @@
+export { injectTheme } from './theme.service';
+export { ThemeButton } from './theme-button.component';

package/schematics/components/files/theme/theme-button.component.ts.template

@@ -0,0 +1,26 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Button } from '<%= basepath %>/button';
+import { Icon } from '<%= basepath %>/icon';
+import { provideIcons } from '@ng-icons/core';
+import { lucideMoon, lucideSun } from '@ng-icons/lucide';
+import { injectTheme } from './theme.service';
+
+@Component({
+  selector: '<%= name %>-theme-button',
+  imports: [Icon, Button],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [provideIcons({ lucideMoon, lucideSun })],
+  template: `
+    <button <%= name %>Button="icon" class="tour-mode h-9 w-9" (click)="themeService.toggle()">
+      <<%= name %>-icon [name]="themeService.mode() === 'dark' ? 'lucideSun' : 'lucideMoon'" />
+      <span class="sr-only">Toggle theme</span>
+    </button>
+  `,
+})
+export class ThemeButton {
+  readonly themeService = injectTheme();
+
+  constructor() {
+    // shortcutListener('ctrl+d', () => this.themeService.toggle());
+  }
+}

package/schematics/components/files/theme/theme.service.ts.template

@@ -0,0 +1,33 @@
+import { inject, Injectable, signal } from '@angular/core';
+import { isClient } from '@ngbase/adk/utils';
+
+@Injectable({ providedIn: 'root' })
+export class ThemeService {
+  mode = signal<'light' | 'dark' | ''>('light');
+
+  constructor() {
+    if (isClient()) {
+      const theme = localStorage.getItem('theme');
+      this._update((theme as 'light' | 'dark') || 'light');
+
+      // registerShortcut('ctrl+h', () => this.open());
+    }
+  }
+
+  toggle() {
+    this._update(this.mode() === 'dark' ? 'light' : 'dark');
+  }
+
+  private _update(mode: 'light' | 'dark' = 'light') {
+    const body = document.body;
+    if (mode === 'dark') {
+      body.classList.add('dark');
+    } else {
+      body.classList.remove('dark');
+    }
+    localStorage.setItem('theme', mode);
+    this.mode.set(mode);
+  }
+}
+
+export const injectTheme = () => inject(ThemeService);

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

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

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

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgbToggle } from '@ngbase/adk/toggle';
+
+@Component({
+  selector: 'button[<%= name %>Toggle]',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [{ directive: NgbToggle, inputs: ['value'], outputs: ['valueChange'] }],
+  template: `<ng-content />`,
+  host: {
+    class: 'block w-9 h-9 rounded relative aria-[pressed=true]:bg-foreground',
+  },
+})
+export class Toggle {}

package/schematics/components/files/toggle-group/index.ts.template

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

package/schematics/components/files/toggle-group/toggle-group.ts.template

@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { NgbToggleGroup, NgbToggleItem } from '@ngbase/adk/toggle-group';
+
+@Component({
+  selector: '<%= name %>-toggle-group',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [
+    { directive: NgbToggleGroup, inputs: ['value', 'multiple'], outputs: ['valueChange'] },
+  ],
+  template: ` <ng-content select="[<%= name %>ToggleItem]" /> `,
+  host: {
+    class: 'flex gap-1',
+  },
+})
+export class ToggleGroup<T> {}
+
+@Directive({
+  selector: 'button[<%= name %>ToggleItem]',
+  hostDirectives: [{ directive: NgbToggleItem, inputs: ['disabled', 'value'] }],
+  host: {
+    class:
+      'inline-block rounded h-9 px-3 hover:bg-opacity-80 active:bg-opacity-70 aria-[selected=true]:bg-foreground',
+  },
+})
+export class ToggleItem<T> {}

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

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of tooltip
+ */
+
+export { provideTooltipOptions, Tooltip } from './tooltip';

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

@@ -0,0 +1,45 @@
+import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { injectTheme } from '<%= basepath %>/theme';
+import { NgbPopoverArrow, providePopoverArrowTracker } from '@ngbase/adk/popover';
+import {
+  NgbTooltip,
+  NgbTooltipTemplate,
+  provideNgbTooltipOptions,
+  tooltipAnimation,
+  TooltipOptions,
+} from '@ngbase/adk/tooltip';
+
+@Directive({
+  selector: '[<%= name %>Tooltip]',
+  hostDirectives: [
+    {
+      directive: NgbTooltip,
+      inputs: [
+        'ngbTooltip: <%= name %>Tooltip',
+        'ngbTooltipPosition: <%= name %>TooltipPosition',
+        'delay',
+      ],
+    },
+  ],
+})
+export class Tooltip {}
+
+@Component({
+  selector: '<%= name %>-tooltip',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [providePopoverArrowTracker()],
+  imports: [NgbPopoverArrow],
+  template: `<div ngbPopoverArrow>{{ content() }}</div>`,
+  host: {
+    class:
+      'fixed inline-block rounded-lg bg-background px-3 py-1 border shadow-md z-p whitespace-pre-line max-w-[15rem] text-text',
+    '[class]': `theme.mode() === 'dark' ? 'light' : 'dark'`,
+  },
+  animations: [tooltipAnimation],
+})
+export class TooltipComponent extends NgbTooltipTemplate {
+  readonly theme = injectTheme();
+}
+
+export const provideTooltipOptions = (options: TooltipOptions) =>
+  provideNgbTooltipOptions({ ...options, component: TooltipComponent });

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

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

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

@@ -0,0 +1,19 @@
+import { Directive, inject, InjectionToken } from '@angular/core';
+import { NgbTour, NgbTourService, NgbTourStep } from '@ngbase/adk/tour';
+
+export const TourService = new InjectionToken<NgbTourService>('TourService', {
+  providedIn: 'root',
+  factory: () => inject(NgbTourService),
+});
+
+@Directive({
+  selector: '[<%= name %>Tour]',
+  hostDirectives: [NgbTour],
+})
+export class Tour {}
+
+@Directive({
+  selector: '[<%= name %>TourStep]',
+  hostDirectives: [{ directive: NgbTourStep, inputs: ['ngbTourStep: <%= name %>TourStep'] }],
+})
+export class TourStep {}

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

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