@ngbase/adk 0.1.3 → 0.1.5

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

@@ -0,0 +1,48 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+  NgbSidenav,
+  NgbSidenavHeader,
+  NgbSidenavHeaderContent,
+  NgbSidenavHeaderTrack,
+  NgbSidenavOverlay,
+  SidenavType,
+  aliasSidenav,
+  slideAnimation,
+} from '@ngbase/adk/sidenav';
+
+export type { SidenavType };
+
+@Component({
+  selector: '<%= name %>-sidenav',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [aliasSidenav(Sidenav)],
+  imports: [NgbSidenavOverlay, NgbSidenavHeaderTrack],
+  template: `
+    @if (showOverlay()) {
+      <div ngbSidenavOverlay class="z-p bg-black/70"></div>
+    }
+    <div ngbSidenavHeaderTrack class="transition-[width] duration-500"></div>
+    <ng-content select="<%= name %>-sidenav-header" />
+    <ng-content />
+  `,
+  host: {
+    class: 'flex w-full overflow-hidden relative top-0 left-0 h-full',
+  },
+})
+export class Sidenav extends NgbSidenav {}
+
+@Component({
+  selector: '<%= name %>-sidenav-header',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgbSidenavHeaderContent],
+  template: `
+    <div ngbSidenavHeaderContent class="h-full overflow-auto">
+      <ng-content />
+    </div>
+  `,
+  host: {
+    class: 'block h-full bg-background z-p transition-[width] duration-500',
+  },
+  animations: [slideAnimation('500ms cubic-bezier(0.4, 0, 0.2, 1)')],
+})
+export class SidenavHeader extends NgbSidenavHeader {}

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

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

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

@@ -0,0 +1,15 @@
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: '<%= name %>-skeleton',
+  template: ``,
+  host: {
+    class: 'block animate-pulse bg-muted',
+    '[class]': `shape() === 'circle' ? 'rounded-full' : 'rounded-md'`,
+  },
+})
+export class Skeleton {
+  readonly shape = input<'circle' | 'rectangle'>('rectangle');
+  readonly width = input<string>('100%');
+  readonly height = input<string>('20px');
+}

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

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

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

@@ -0,0 +1,35 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgbSlider, SliderRange, SliderThumb, SliderTrack, aliasSlider } from '@ngbase/adk/slider';
+import { ɵFocusStyle as FocusStyle } from '<%= basepath %>/checkbox';
+
+@Component({
+  selector: '<%= name %>-slider',
+  exportAs: '<%= name %>Slider',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [aliasSlider(Slider)],
+  imports: [FocusStyle, SliderTrack, SliderRange, SliderThumb],
+  template: `
+    <div
+      ngbSliderTrack
+      class="h-full overflow-hidden rounded-full bg-muted aria-[disabled=true]:bg-opacity-30"
+    >
+      <div ngbSliderRange class="bg-primary aria-[disabled=true]:bg-muted"></div>
+    </div>
+    @for (thumb of noOfThumbs(); track thumb) {
+      <button
+        ngbSliderThumb
+        <%= name %>FocusStyle
+        class="{{
+          'inline-block h-5 w-5 rounded-full border-2 bg-background shadow-md aria-[disabled=false]:border-primary aria-[disabled=true]:bg-muted ' +
+            (orientation() === 'vertical'
+              ? '-left-1.5 -translate-y-1/2'
+              : '-top-1.5 -translate-x-1/2')
+        }}"
+      ></button>
+    }
+  `,
+  host: {
+    class: 'block relative my-2 aria-[orientation=vertical]:w-2 aria-[orientation=horizontal]:h-2',
+  },
+})
+export class Slider extends NgbSlider {}

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

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

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

@@ -0,0 +1,59 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgbSonner, ngbSonnerPortal, sonnerAnimation, SonnerBase } from '@ngbase/adk/sonner';
+import { Icon } from '<%= basepath %>/icon';
+import { provideIcons } from '@ng-icons/core';
+import {
+  lucideCircleAlert,
+  lucideCircleCheck,
+  lucideInfo,
+  lucideTriangleAlert,
+} from '@ng-icons/lucide';
+
+@Component({
+  selector: '<%= name %>-sonner',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    provideIcons({ lucideCircleCheck, lucideInfo, lucideTriangleAlert, lucideCircleAlert }),
+  ],
+  imports: [Icon, SonnerBase],
+  template: `
+    <ul class="fixed bottom-0 right-0 z-p flex flex-col gap-1">
+      @for (msg of messages(); track msg.id) {
+        <li
+          [ngbSonnerBase]="$index"
+          class="{{
+            'm-4 w-96 rounded-lg border bg-background p-4 shadow-lg transition-all duration-300' +
+              (msg.type === 'success' ? ' bg-green-50 text-green-600' : '') +
+              (msg.type === 'error' ? ' bg-red-50 text-red-600' : '') +
+              (msg.type === 'warning' ? ' bg-yellow-50 text-yellow-600' : '')
+          }}"
+        >
+          <h4 class="flex items-center gap-2 font-semibold">
+            @if (msg.type && icons[msg.type]; as iconName) {
+              <<%= name %>-icon [name]="iconName" />
+            }
+            {{ msg.message }}
+          </h4>
+          @if (msg.data?.description) {
+            <p class="text-muted-foreground">{{ msg.data?.description }}</p>
+          }
+        </li>
+      }
+    </ul>
+  `,
+  animations: [sonnerAnimation],
+})
+export class Sonner extends NgbSonner {
+  readonly icons = {
+    success: 'lucideCircleCheck',
+    error: 'lucideCircleAlert',
+    info: 'lucideInfo',
+    warning: 'lucideTriangleAlert',
+    default: '',
+  };
+}
+
+export function sonnerPortal() {
+  const portal = ngbSonnerPortal(Sonner);
+  return portal;
+}

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

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

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());
+  }
+}