@ngbase/adk 0.1.0 → 0.1.1

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

@@ -0,0 +1,87 @@
+import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import {
+  NgbPopover,
+  NgbPopoverBackdrop,
+  NgbPopoverClose,
+  NgbPopoverMain,
+  ngbPopoverPortal,
+  NgbPopoverTrigger,
+  providePopover,
+  registerNgbPopover,
+} from '@ngbase/adk/popover';
+
+@Component({
+  selector: '<%= name %>-popover',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [providePopover(Popover)],
+  imports: [NgbPopoverBackdrop, NgbPopoverMain],
+  template: ` <style>
+      .popover-anchor {
+        --action-angle: 180deg;
+        --action-left: 50%;
+        --action-top: -1rem;
+      }
+      .popover-anchor::before {
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-top: 0.8rem solid;
+        @apply border-foreground;
+        border-left: 0.5rem solid transparent;
+        border-right: 0.5rem solid transparent;
+        top: var(--action-top);
+        left: var(--action-left);
+        transform: translateX(-50%) rotate(var(--action-angle, 180deg));
+      }
+    </style>
+    <div
+      ngbPopoverMain
+      [@slideInOutAnimation]
+      class="{{
+        'menu-container pointer-events-auto fixed z-10 flex flex-col rounded-lg border bg-foreground shadow-md ' +
+          (options().anchor ? 'popover-anchor ' : 'overflow-auto ')
+      }}"
+    >
+      <div class="flex flex-1 flex-col overflow-auto">
+        <ng-container #myDialog />
+      </div>
+    </div>
+    @if (options().backdrop) {
+      <div ngbPopoverBackdrop class="pointer-events-auto fixed top-0 h-full w-full"></div>
+    }`,
+  host: {
+    class:
+      'fixed top-0 left-0 w-full h-full pointer-events-none z-p flex items-center justify-center',
+  },
+})
+class Popover extends NgbPopover {}
+
+export function registerPopover() {
+  return registerNgbPopover(Popover);
+}
+
+export const popoverPortal = ngbPopoverPortal;
+
+@Directive({
+  selector: '[<%= name %>PopoverTrigger]',
+  hostDirectives: [
+    {
+      directive: NgbPopoverTrigger,
+      inputs: [
+        'ngbPopoverTrigger: <%= name %>PopoverTrigger',
+        'ngbPopoverTriggerData: <%= name %>PopoverTriggerData',
+        'options',
+      ],
+    },
+  ],
+  providers: [registerPopover()],
+})
+export class PopoverTrigger {}
+
+@Directive({
+  selector: '[<%= name %>PopoverClose]',
+  hostDirectives: [NgbPopoverClose],
+})
+export class PopoverClose {}

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

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

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

@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgbProgress, NgbProgressBar } from '@ngbase/adk/progress';
+
+@Component({
+  selector: '<%= name %>-progress',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [{ directive: NgbProgress, inputs: ['value'] }],
+  imports: [NgbProgressBar],
+  template: `<div class="h-full bg-primary transition" ngbProgressBar></div>`,
+  host: {
+    class: 'block h-2 my-1 bg-muted-background rounded-full',
+  },
+})
+export class Progress {}

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

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

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

@@ -0,0 +1,40 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgbRadio, NgbRadioGroup, NgbRadioIndicator } from '@ngbase/adk/radio';
+import { ɵFocusStyle as FocusStyle } from '<%= basepath %>/checkbox';
+
+@Component({
+  selector: '<%= name %>-radio-group',
+  hostDirectives: [{ directive: NgbRadioGroup, inputs: ['value'], outputs: ['valueChange'] }],
+  template: `<ng-content />`,
+  host: {
+    class: 'flex gap-2',
+  },
+})
+export class RadioGroup {}
+
+@Component({
+  selector: '<%= name %>-radio, [<%= name %>Radio]',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [{ directive: NgbRadio, inputs: ['value', 'disabled'] }],
+  imports: [FocusStyle, NgbRadioIndicator],
+  template: `
+    <button
+      <%= name %>FocusStyle
+      ngbRadioIndicator
+      #radioIndicator
+      class="custom-radio relative flex h-4 w-4 flex-none items-center justify-center rounded-full border border-primary"
+      [class]="radioIndicator.disabled() ? 'border-muted' : 'border-primary'"
+    >
+      <div
+        class="h-2 w-2 rounded-full"
+        [class]="radioIndicator.disabled() ? 'bg-muted' : 'bg-primary'"
+      ></div>
+    </button>
+    <ng-content />
+  `,
+  host: {
+    class:
+      'flex items-center gap-2 py-1 cursor-pointer aria-[disabled="true"]:opacity-40 aria-[disabled="true"]:cursor-not-allowed',
+  },
+})
+export class Radio {}

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

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

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

@@ -0,0 +1,56 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+  NgbGutter,
+  NgbResizable,
+  NgbResizableGroup,
+  provideResizable,
+  provideResizableGroup,
+} from '@ngbase/adk/resizable';
+import { Icon } from '<%= basepath %>/icon';
+import { provideIcons } from '@ng-icons/core';
+import { lucideGripVertical } from '@ng-icons/lucide';
+
+@Component({
+  selector: '<%= name %>-resizable-group',
+  exportAs: '<%= name %>ResizableGroup',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [provideResizableGroup(ResizableGroup)],
+  template: `<ng-content select="<%= name %>-resizable" />`,
+  host: {
+    class: 'flex w-full',
+    '[class.flex-col]': "direction() === 'vertical'",
+    '[attr.id]': 'id',
+  },
+})
+export class ResizableGroup extends NgbResizableGroup {}
+
+@Component({
+  selector: '<%= name %>-resizable',
+  exportAs: '<%= name %>Resizable',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [provideResizable(Resizable)],
+  viewProviders: [provideIcons({ lucideGripVertical })],
+  imports: [Icon, NgbGutter],
+  template: `<ng-content />
+    <ng-template #dragElement>
+      @if (draggable()) {
+        <div
+          ngbGutter
+          class="{{
+            'dragElement relative flex cursor-ew-resize items-center justify-center after:absolute after:top-0' +
+              (resizable.direction() === 'vertical'
+                ? ' bottom-0 left-0 h-0 w-full cursor-ns-resize border-b after:-mt-1 after:h-2 after:w-full'
+                : ' right-0 top-0 w-0 cursor-ew-resize border-l after:h-full after:w-2')
+          }}"
+        >
+          <<%= name %>-icon name="lucideGripVertical" class="z-30 rounded-lg border
+          bg-muted-background py-0.5" size=".75rem" [class]="resizable.direction() === 'vertical' ?
+          'rotate-90' : ''" />
+        </div>
+      }
+    </ng-template>`,
+  host: {
+    class: 'relative overflow-hidden block flex-none',
+  },
+})
+export class Resizable extends NgbResizable {}

package/schematics/components/files/scroll-area/index.ts.template

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

package/schematics/components/files/scroll-area/scroll-area.ts.template

@@ -0,0 +1,40 @@
+import { Component, ChangeDetectionStrategy, input } from '@angular/core';
+import { NgbScrollArea, NgbScrollBar, ScrollBarOrientation } from '@ngbase/adk/scroll-area';
+
+@Component({
+  selector: '<%= name %>-scroll-area',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgbScrollBar, NgbScrollArea],
+  template: `
+    <div
+      ngbScrollArea
+      [alwaysShow]="alwaysShow()"
+      [orientation]="orientation()"
+      [hideDelay]="hideDelay()"
+      class="flex-1"
+    >
+      <ng-content></ng-content>
+
+      <div
+        ngbScrollBar="vertical"
+        class="!right-0.5 rounded bg-black/10 opacity-0 transition-colors duration-150 hover:bg-black/50 data-[active=true]:bg-black/50 data-[visible=true]:opacity-100"
+      ></div>
+
+      <div
+        ngbScrollBar="horizontal"
+        class="!bottom-0.5 rounded bg-black/10 opacity-0 transition-colors duration-150 hover:bg-black/50 data-[active=true]:bg-black/50 data-[visible=true]:opacity-100"
+      ></div>
+
+      <!-- Corner piece when both scrollbars are visible -->
+      <div class="scroll-area-corner absolute bottom-0 right-0 h-2 w-2 rounded bg-black/10"></div>
+    </div>
+  `,
+  host: {
+    class: 'flex flex-col w-full',
+  },
+})
+export class ScrollArea {
+  readonly alwaysShow = input<boolean>(false);
+  readonly orientation = input<ScrollBarOrientation>('both');
+  readonly hideDelay = input(1000);
+}

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

@@ -0,0 +1,8 @@
+/*
+ * Public API Surface of select
+ */
+
+export * from './select';
+export * from './option';
+export * from './select-input';
+export * from './list-selection';

package/schematics/components/files/select/list-selection.ts.template

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { provideValueAccessor } from '@ngbase/adk/utils';
+import { SelectBase } from '@ngbase/adk/select';
+
+@Component({
+  selector: '<%= name %>-list-selection',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<ng-content />`,
+  providers: [provideValueAccessor(ListSelection)],
+})
+export class ListSelection<T> extends SelectBase<T> {
+  constructor() {
+    super(true);
+  }
+}

package/schematics/components/files/select/option.ts.template

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { NgbOption, NgbOptionGroup } from '@ngbase/adk/select';
+import { Checkbox } from '<%= basepath %>/checkbox';
+import { ListStyle } from '<%= basepath %>/list';
+
+@Component({
+  selector: '<%= name %>-option, [<%= name %>Option]',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [ListStyle, { directive: NgbOption, inputs: ['value', 'disabled', 'ayId'] }],
+  imports: [Checkbox],
+  template: ` @if (option.multiple()) {
+      <<%= name %>-checkbox [checked]="option.checked()" class="!py-0" />
+    }
+    <ng-content />`,
+  host: {
+    '[class.bg-muted-background]': 'option.active() || option.checked()',
+  },
+})
+export class Option<T> {
+  readonly option = inject(NgbOption<T>);
+}
+
+@Component({
+  selector: '<%= name %>-option-group, [<%= name %>OptionGroup]',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<div class="sticky -top-1 z-10 bg-foreground px-2 py-1.5 text-sm text-muted">
+      {{ label() }}
+    </div>
+    <ng-content />`,
+  host: {
+    class: 'block',
+  },
+})
+export class OptionGroup extends NgbOptionGroup {}

package/schematics/components/files/select/select-input.ts.template

@@ -0,0 +1,21 @@
+import { Directive } from '@angular/core';
+import { NgbSelectInput, NgbSelectTrigger } from '@ngbase/adk/select';
+import { InputStyle } from '<%= basepath %>/form-field';
+
+@Directive({
+  selector: '[<%= name %>SelectInput]',
+  hostDirectives: [
+    { directive: NgbSelectInput, inputs: ['placeholder', 'options', 'filterFn'] },
+    InputStyle,
+  ],
+  host: {
+    class: 'w-full !m-0 mb-1 !ring-0 !border-0 !border-b rounded-none px-3 z-10',
+  },
+})
+export class SelectInput<T> {}
+
+@Directive({
+  selector: '[<%= name %>SelectTrigger]',
+  hostDirectives: [NgbSelectTrigger],
+})
+export class SelectTrigger {}

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

@@ -0,0 +1,96 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+  NgbSelect,
+  NgbSelectOption,
+  NgbSelectOptionGroup,
+  provideSelect,
+  SelectValue,
+} from '@ngbase/adk/select';
+import { Icon } from '<%= basepath %>/icon';
+import { provideIcons } from '@ng-icons/core';
+import { lucideChevronsUpDown } from '@ng-icons/lucide';
+import { Option } from './option';
+import { SelectInput } from './select-input';
+
+@Directive({
+  selector: '[<%= name %>SelectOption]',
+  hostDirectives: [NgbSelectOption],
+})
+export class SelectOption<T> {}
+
+@Component({
+  selector: '<%= name %>-select',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [provideIcons({ lucideChevronsUpDown })],
+  providers: [provideSelect(Select)],
+  imports: [
+    Icon,
+    FormsModule,
+    SelectInput,
+    Option,
+    NgTemplateOutlet,
+    SelectValue,
+    NgbSelectOptionGroup,
+  ],
+  template: `
+    <button
+      ngbSelectValue
+      [class.opacity-50]="disabled()"
+      class="flex min-h-5 w-full items-center justify-between gap-1 whitespace-nowrap outline-none"
+    >
+      <!-- Prefix template -->
+      <ng-content select=".select-prefix" />
+
+      <span class="truncate" [class.text-muted]="!cValue()">
+        <ng-content select="[<%= name %>SelectTrigger]">
+          {{ cValue() || placeholder() }}
+        </ng-content>
+      </span>
+      <<%= name %>-icon name="lucideChevronsUpDown" class="ml-0.5 text-muted" />
+    </button>
+
+    <!-- Options template -->
+    <ng-template #optionsTemplate>
+      <div class="flex flex-col overflow-hidden">
+        <ng-content select="[<%= name %>SelectInput]">
+          @if (options().length) {
+            <input
+              <%= name %>SelectInput
+              placeholder="Search options"
+              [(ngModel)]="optionsFilter.search"
+              [ngModelOptions]="{ standalone: true }"
+            />
+          }
+        </ng-content>
+        <div #optionsGroup ngbSelectOptionGroup class="overflow-auto p-1">
+          <div class="h-full" role="listbox" aria-label="Suggestions">
+            <ng-content>
+              @for (option of optionsFilter.filteredList(); track option; let i = $index) {
+                <<%= name %>-option [value]="option" [ayId]="ayId">
+                  @if (optionTemplate(); as ot) {
+                    <ng-template
+                      [ngTemplateOutlet]="ot.template"
+                      [ngTemplateOutletContext]="{ $implicit: option, index: i }"
+                    />
+                  } @else {
+                    {{ option }}
+                  }
+                </<%= name %>-option>
+              }
+            </ng-content>
+          </div>
+        </div>
+        <ng-content select=".select-footer" />
+      </div>
+    </ng-template>
+  `,
+  host: {
+    class: 'flex cursor-pointer font-medium',
+    '[class.pointer-events-none]': 'disabled()',
+  },
+})
+export class Select<T> extends NgbSelect<T> {
+  override sideOffset = 16;
+}

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

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

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

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { NgbSelectable, NgbSelectableItem } from '@ngbase/adk/selectable';
+
+@Component({
+  selector: '<%= name %>-selectable-item, [<%= name %>SelectableItem]',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [{ directive: NgbSelectableItem, inputs: ['value'] }],
+  template: `<ng-content />`,
+  host: {
+    class:
+      'flex-1 flex items-center font-medium justify-center px-3 py-1.5 cursor-pointer transition-colors rounded-md whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
+    '[class]': `selectable.selected() ? 'bg-foreground shadow-md ring-1 ring-border' : 'opacity-60'`,
+  },
+})
+export class SelectableItem<T> {
+  readonly selectable = inject(NgbSelectableItem);
+}
+
+@Component({
+  selector: '<%= name %>-selectable',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<ng-content />`,
+  host: {
+    class: 'inline-flex relative bg-muted-background rounded-md p-0.5',
+  },
+  hostDirectives: [
+    {
+      directive: NgbSelectable,
+      inputs: ['activeIndex'],
+      outputs: ['activeIndexChange', 'valueChanged'],
+    },
+  ],
+})
+export class Selectable<T> {}

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

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

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

@@ -0,0 +1,19 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  selector: '<%= name %>-separator',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: ``,
+  host: {
+    class: 'bg-border block flex-none',
+    '[class]': `vertical() ? 'w-[1px]' : 'h-[1px] w-full'`,
+    // '[class.my-1]': `menu`,
+  },
+})
+export class Separator {
+  vertical = input(false, { transform: booleanAttribute });
+
+  constructor() {
+    // console.log('Separator', this.menu);
+  }
+}

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

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

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

@@ -0,0 +1,134 @@
+import { NgStyle } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnDestroy,
+  ViewContainerRef,
+  afterNextRender,
+  inject,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { BaseDialog, basePortal, DialogInput, DialogOptions, DialogRef } from '@ngbase/adk/portal';
+import { createHostAnimation, fadeAnimation } from '@ngbase/adk/utils';
+import { Button } from '<%= basepath %>/button';
+import { sideAnimation } from '@ngbase/adk/dialog';
+import { Icon } from '<%= basepath %>/icon';
+import { provideIcons } from '@ng-icons/core';
+import { lucideX } from '@ng-icons/lucide';
+
+@Component({
+  selector: '<%= name %>-sheet',
+  imports: [NgStyle, Button, Icon],
+  viewProviders: [provideIcons({ lucideX })],
+  template: `
+    <div
+      class="pointer-events-none flex h-full"
+      [class]="options.position === 'left' ? 'justify-start' : 'justify-end'"
+    >
+      <div
+        class="pointer-events-auto m-2 flex flex-col overflow-hidden rounded-lg border-l bg-foreground shadow-2xl will-change-transform"
+        [@sideAnimation]="position()"
+        [ngStyle]="{
+          width: options.width,
+          minWidth: options.minWidth,
+          maxWidth: options.maxWidth,
+        }"
+      >
+        @if (!isHideHeader) {
+          <div class="flex items-center border-b px-4 py-2">
+            <h2 class="flex-1 font-bold">{{ options.title }}</h2>
+            <button <%= name %>Button="ghost" class="-mr-2 !p-2" (click)="close()">
+              <<%= name %>-icon name="lucideX" />
+            </button>
+          </div>
+        }
+        <div class="h-full overflow-auto p-4">
+          <ng-container #myDialog />
+        </div>
+      </div>
+    </div>
+    @if (backdropColor) {
+      <div
+        class="absolute top-0 -z-10 h-full w-full bg-black bg-opacity-30 will-change-transform"
+        [@fadeAnimation]
+        (click)="close()"
+      ></div>
+      <!-- [class]="status() ? 'pointer-events-auto' : 'pointer-events-none'" -->
+    }
+  `,
+  host: {
+    class: 'fixed block top-0 bottom-0 left-0 right-0  z-p',
+    '[@parentAnimation]': '',
+    '(@parentAnimation.done)': 'animationDone()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    createHostAnimation(['@fadeAnimation', '@sideAnimation']),
+    fadeAnimation('300ms'),
+    sideAnimation,
+  ],
+})
+export class SheetContainer extends BaseDialog implements OnDestroy {
+  myDialog = viewChild('myDialog', { read: ViewContainerRef });
+  backdropColor = true;
+  options!: SheetOptions;
+  classNames = '';
+  isHideHeader = false;
+  position = signal<'left' | 'right' | 'center'>('left');
+
+  constructor() {
+    super();
+    afterNextRender(() => {
+      this._afterViewSource.next(this.myDialog()!);
+      this.position.set('center');
+    });
+    const ref = inject(DialogRef);
+    ref.afterClosed.subscribe(() => {
+      console.log('afterClosed', this.options.position);
+      this.position.set(this.options.position as 'left' | 'right' | 'center');
+    });
+  }
+
+  override setOptions(options: SheetOptions): void {
+    this.options = options;
+    this.classNames = this.options.classNames?.join(' ') || '';
+    this.isHideHeader = this.options.header || false;
+    this.backdropColor = this.options.backdropColor || true;
+    this.position.set(this.options.position as 'left' | 'right' | 'center');
+  }
+
+  ngOnDestroy(): void {
+    // this.position.set(this.options.position as 'left' | 'right' | 'center');
+  }
+}
+
+export class SheetOptions extends DialogOptions {
+  position?: 'left' | 'right' = 'right';
+}
+
+export function sheetPortal() {
+  const NAME = 'sheet';
+  const base = basePortal(NAME, SheetContainer);
+
+  function open<T>(component: DialogInput, opt?: SheetOptions) {
+    const { diaRef } = base.open(
+      component,
+      comp => {
+        const options = { ...new SheetOptions(), ...opt };
+        comp.instance.setOptions(options);
+      },
+      opt,
+    );
+
+    const { afterClosed } = diaRef;
+    return { afterClosed };
+  }
+
+  function closeAll() {
+    base.closeAll();
+  }
+  return { open, closeAll };
+}
+
+export type Sheet = ReturnType<typeof sheetPortal>;

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

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