@ngbase/adk 0.1.1 → 0.1.3

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

@@ -1,58 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { NgbSonner, ngbSonnerPortal, 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,
-  imports: [Icon, SonnerBase],
-  providers: [
-    provideIcons({ lucideCircleCheck, lucideInfo, lucideTriangleAlert, lucideCircleAlert }),
-  ],
-  template: `
-    <ul class="fixed bottom-0 right-0 flex flex-col gap-1">
-      @for (msg of messages(); track msg.id) {
-        <li
-          [ngbSonnerBase]="$index"
-          class="{{
-            'm-4 w-96 rounded-lg border bg-foreground 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">{{ msg.data?.description }}</p>
-          }
-        </li>
-      }
-    </ul>
-  `,
-})
-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

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

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

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

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

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

@@ -1,88 +0,0 @@
-import { NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
-import {
-  NgbStep,
-  NgbStepHeader,
-  NgbStepper,
-  NgbStepperStep,
-  provideStep,
-  provideStepper,
-  slideAnimation,
-} from '@ngbase/adk/stepper';
-
-@Component({
-  selector: '<%= name %>-stepper',
-  exportAs: '<%= name %>Stepper',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideStepper(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-background 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: [slideAnimation],
-})
-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

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

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

@@ -1,29 +0,0 @@
-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-0.5 border-transparent bg-muted-background 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-foreground 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/body-cell.ts.template

@@ -1,19 +0,0 @@
-import { Component, Directive, ChangeDetectionStrategy } from '@angular/core';
-import { NgbCell, NgbCellDef } from '@ngbase/adk/table';
-
-@Component({
-  selector: '[<%= name %>Cell]',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  hostDirectives: [NgbCell],
-  host: {
-    class: 'px-4 py-2 align-middle bg-foreground',
-  },
-  template: `<ng-content />`,
-})
-export class Cell {}
-
-@Directive({
-  selector: '[<%= name %>CellDef]',
-  hostDirectives: [NgbCellDef],
-})
-export class CellDef {}

package/schematics/components/files/table/body-row.ts.template

@@ -1,21 +0,0 @@
-import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
-import { NgbBodyRow, NgbBodyRowDef } from '@ngbase/adk/table';
-
-@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-background h-12',
-  },
-})
-export class BodyRow extends NgbBodyRow {}

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

@@ -1,8 +0,0 @@
-import { Directive } from '@angular/core';
-import { NgbColumn } from '@ngbase/adk/table';
-
-@Directive({
-  selector: '[<%= name %>Column]',
-  hostDirectives: [{ directive: NgbColumn, inputs: ['ngbColumn: <%= name %>Column', 'sticky'] }],
-})
-export class Column {}

package/schematics/components/files/table/head-cell.ts.template

@@ -1,19 +0,0 @@
-import { Component, Directive, ChangeDetectionStrategy } from '@angular/core';
-import { NgbHead, NgbHeadDef } from '@ngbase/adk/table';
-
-@Component({
-  selector: '[<%= name %>Head]',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: 'px-4 py-2 text-left align-middle font-medium text-muted border-b bg-foreground',
-  },
-  hostDirectives: [NgbHead],
-  template: `<ng-content />`,
-})
-export class Head {}
-
-@Directive({
-  selector: '[<%= name %>HeadDef]',
-  hostDirectives: [NgbHeadDef],
-})
-export class HeadDef {}

package/schematics/components/files/table/head-row.ts.template

@@ -1,27 +0,0 @@
-import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
-import { NgbHeadRow, NgbHeadRowDef } from '@ngbase/adk/table';
-
-@Component({
-  selector: '[<%= name %>HeadRow]',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: `h-10 [&[data-sticky=true]]:sticky [&[data-sticky=true]]:top-0 [&[data-sticky=true]]:bg-foreground`,
-  },
-  providers: [{ provide: NgbHeadRow, useExisting: HeadRow }],
-  template: `<ng-container #container />`,
-})
-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/table/index.ts.template

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

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

@@ -1,20 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { NgbTable } from '@ngbase/adk/table';
-
-@Component({
-  selector: 'table[<%= name %>Table]',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: 'w-full text-sm',
-  },
-  providers: [{ provide: NgbTable, useExisting: Table }],
-  template: `
-    <thead>
-      <ng-container #thead />
-    </thead>
-    <tbody>
-      <ng-container #tbody />
-    </tbody>
-  `,
-})
-export class Table<T> extends NgbTable<T> {}

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

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

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

@@ -1,89 +0,0 @@
-import { NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
-import {
-  NgbTab,
-  NgbTabHeader,
-  NgbTabLazy,
-  NgbTabs,
-  provideTab,
-  provideTabs,
-  TabButton,
-  TabButtonsGroup,
-  TabScroll,
-} from '@ngbase/adk/tabs';
-import { Icon } from '<%= basepath %>/icon';
-import { provideIcons } from '@ng-icons/core';
-import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
-
-@Component({
-  selector: '<%= name %>-tabs',
-  imports: [Icon, TabButton, TabButtonsGroup, TabScroll],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideTabs(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-foreground 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="whitespace-nowrap border-b-2 border-transparent aria-[disabled=true]:cursor-not-allowed aria-[selected=true]:!border-primary aria-[disabled=true]:text-muted 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-foreground px-2"
-        >
-          <<%= name %>-icon name="lucideChevronRight" />
-        </button>
-      </div>
-      <ng-content select=".tab-header-content" />
-    </div>
-    <ng-content /> `,
-  host: {
-    class: 'bg-foreground flex flex-col',
-  },
-})
-export class Tabs extends NgbTabs<Tab> {}
-
-@Component({
-  selector: '<%= name %>-tab',
-  exportAs: '<%= name %>Tab',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideTab(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 {}

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

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

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

@@ -1,26 +0,0 @@
-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());
-  }
-}