@ngbase/adk 0.1.1 → 0.1.3

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

@@ -1,165 +0,0 @@
-import { Component, inject } from '@angular/core';
-import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
-import { Button } from '<%= basepath %>/button';
-import { ColorInput } from '<%= basepath %>/color-picker';
-import { Input } from '<%= basepath %>/form-field';
-
-interface ThemeData {
-  name: string;
-  radius: string;
-  space: string;
-  background: string;
-  foreground: string;
-  primary: string;
-  muted: string;
-  border: string;
-  text: string;
-  input: string;
-}
-
-@Component({
-  selector: '<%= name %>-theme',
-  imports: [Input, ReactiveFormsModule, Button, ColorInput],
-  template: `
-    <div class="mb-4 flex gap-4">
-      @for (theme of themes; track theme) {
-        <button <%= name %>Button="outline" (click)="changeTheme(theme)">
-          {{ theme.name }}
-        </button>
-      }
-    </div>
-    <form [formGroup]="form">
-      <table>
-        <tr>
-          <td>Radius:</td>
-          <td><input class="w-48" <%= name %>Input formControlName="radius" /></td>
-        </tr>
-        <tr>
-          <td>Space:</td>
-          <td><input class="w-48" <%= name %>Input formControlName="space" /></td>
-        </tr>
-        <tr>
-          <td>Background:</td>
-          <td><<%= name %>-color-input class="w-48" formControlName="background" /></td>
-        </tr>
-        <tr>
-          <td>Foreground:</td>
-          <td><<%= name %>-color-input class="w-48" formControlName="foreground" /></td>
-        </tr>
-        <tr>
-          <td>Primary:</td>
-          <td><<%= name %>-color-input class="w-48" formControlName="primary" /></td>
-        </tr>
-        <tr>
-          <td>Muted:</td>
-          <td><<%= name %>-color-input class="w-48" formControlName="muted" /></td>
-        </tr>
-        <tr>
-          <td>Border:</td>
-          <td><<%= name %>-color-input class="w-48" formControlName="border" /></td>
-        </tr>
-        <tr>
-          <td>Text:</td>
-          <td><<%= name %>-color-input class="w-48" formControlName="text" /></td>
-        </tr>
-      </table>
-    </form>
-  `,
-})
-export class ThemeComponent {
-  fb = inject(FormBuilder);
-
-  form = this.fb.nonNullable.group({
-    radius: ['0.5rem'],
-    space: ['1rem'],
-    background: ['#ffffff'],
-    foreground: ['#000000'],
-    primary: ['#000000'],
-    muted: ['#71717a'],
-    border: ['#000000'],
-    text: ['#000000'],
-    input: ['#000000'],
-  });
-
-  themes: ThemeData[] = [
-    {
-      name: 'Light',
-      radius: '0.5rem',
-      space: '0.25rem',
-      background: '#f4f4f5',
-      foreground: '#ffffff',
-      primary: '#000000',
-      muted: '#71717a',
-      border: '#e4e4e7',
-      text: '#000000',
-      input: '#f3f4f6',
-    },
-    {
-      name: 'Dark',
-      radius: '0.5rem',
-      space: '1rem',
-      background: '#000000',
-      foreground: '#191b23',
-      primary: '#000000',
-      muted: '#a1a1aa',
-      border: '#27272a',
-      text: '#ffffff',
-      input: '#27272a',
-    },
-  ];
-
-  constructor() {
-    this.form.patchValue(this.themes[0]);
-    this.form.valueChanges.subscribe(value => {
-      const style = document.documentElement.style;
-      style.setProperty('--radius', value.radius!);
-      style.setProperty('--spacing-base', value.space!);
-      style.setProperty('---color-background', this.colorRGB(value.background!));
-      style.setProperty('---color-foreground', this.colorRGB(value.foreground!));
-      style.setProperty('--color-primary', this.colorRGB(value.primary!));
-      style.setProperty('---color-muted', this.colorRGB(value.muted!));
-      style.setProperty('---color-border', this.colorRGB(value.border!));
-      style.setProperty('---color-text', this.colorRGB(value.text!));
-      style.setProperty('---color-input', this.colorRGB(value.input!));
-    });
-
-    console.log(this.colorRGB('#ffffff'));
-  }
-
-  colorRGB(color: string): string {
-    if (this.isHex(color)) {
-      color = this.hexToRgb(color);
-    }
-    const rgb = this.rgbToVariable(color);
-    return `${rgb.r}, ${rgb.g}, ${rgb.b}`;
-  }
-
-  changeTheme(theme: ThemeData) {
-    this.form.patchValue(theme);
-  }
-
-  isHex(hex: string) {
-    return /^#[0-9A-F]{6}$/i.test(hex);
-  }
-
-  hexToRgb(hex: string): string {
-    const rgb = hex
-      .replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => r + r + g + g + b + b)
-      .substring(1)
-      .match(/.{2}/g)
-      ?.map(x => parseInt(x, 16));
-    return rgb ? `rgb(${rgb.join(', ')})` : '';
-  }
-
-  rgbToHex(r: number, g: number, b: number) {
-    return `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
-  }
-
-  rgbToVariable(rgb: string): { r: number; g: number; b: number } {
-    const [r, g, b] = rgb
-      .substring(4, rgb.length - 1)
-      .split(', ')
-      .map(x => parseInt(x));
-    return { r, g, b };
-  }
-}

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

@@ -1,44 +0,0 @@
-import { inject, Injectable, signal } from '@angular/core';
-import { isClient } from '@ngbase/adk/utils';
-import { dialogPortal } from '<%= basepath %>/dialog';
-import { ThemeComponent } from './theme.component';
-
-@Injectable({ providedIn: 'root' })
-export class ThemeService {
-  dialog = dialogPortal();
-  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);
-  }
-
-  open() {
-    this.dialog.open(ThemeComponent, {
-      title: 'Theme',
-      backdrop: false,
-      width: '20rem',
-    });
-  }
-}
-
-export const injectTheme = () => inject(ThemeService);

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

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

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

@@ -1,13 +0,0 @@
-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-background',
-  },
-})
-export class Toggle {}

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

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

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

@@ -1,25 +0,0 @@
-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-background',
-  },
-})
-export class ToggleItem<T> {}

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

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

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

@@ -1,40 +0,0 @@
-import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
-import {
-  NgbTooltipTemplate,
-  provideNgbTooltipOptions,
-  TooltipOptions,
-  NgbTooltip,
-} from '@ngbase/adk/tooltip';
-import { injectTheme } from '<%= basepath %>/theme';
-
-@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,
-  template: `{{ content() }}`,
-  host: {
-    class:
-      'fixed inline-block rounded-lg bg-foreground px-3 py-1 border shadow-md z-p whitespace-pre-line max-w-[15rem] text-text',
-    '[class]': `theme.mode() === 'dark' ? 'light' : 'dark'`,
-  },
-})
-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

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

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

@@ -1,8 +0,0 @@
-import { Directive } from '@angular/core';
-import { NgbTourStep } from '@ngbase/adk/tour';
-
-@Directive({
-  selector: '[<%= name %>TourStep]',
-  hostDirectives: [{ directive: NgbTourStep, inputs: ['ngbTourStep: <%= name %>TourStep'] }],
-})
-export class TourStep {}

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

@@ -1,7 +0,0 @@
-import { inject, InjectionToken } from '@angular/core';
-import { NgbTourService } from '@ngbase/adk/tour';
-
-export const TourService = new InjectionToken<NgbTourService>('TourService', {
-  providedIn: 'root',
-  factory: () => inject(NgbTourService),
-});

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

@@ -1,8 +0,0 @@
-import { Directive } from '@angular/core';
-import { NgbTour } from '@ngbase/adk/tour';
-
-@Directive({
-  selector: '[<%= name %>Tour]',
-  hostDirectives: [NgbTour],
-})
-export class Tour {}

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

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

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

@@ -1,66 +0,0 @@
-import { ChangeDetectionStrategy, Component, Directive, signal } from '@angular/core';
-import {
-  NgbTree,
-  NgbTreeNode,
-  NgbTreeNodeContent,
-  NgbTreeNodeDef,
-  NgbTreeNodeToggle,
-  provideTree,
-  provideTreeNode,
-} from '@ngbase/adk/tree';
-
-@Component({
-  selector: '<%= name %>-tree',
-  exportAs: '<%= name %>Tree',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<ng-container #container />`,
-  providers: [provideTree(Tree)],
-  host: {
-    class: 'block',
-  },
-})
-export class Tree<T> extends NgbTree<T> {}
-
-@Component({
-  selector: '<%= name %>-tree-node',
-  exportAs: '<%= name %>TreeNode',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <div class="flex items-start">
-      <ng-content />
-    </div>
-    <ng-content select="[<%= name %>TreeNodeContent]" />
-    <ng-container #container />
-  `,
-  providers: [provideTreeNode(TreeNode)],
-  host: {
-    class: 'block w-full cursor-pointer',
-  },
-})
-export class TreeNode<T> extends NgbTreeNode<T> {
-  override size = signal(16);
-}
-
-@Directive({
-  selector: '[<%= name %>TreeNodeToggle]',
-  hostDirectives: [NgbTreeNodeToggle],
-  host: {
-    class: `aria-[hidden="true"]:invisible`,
-  },
-})
-export class TreeNodeToggle {}
-
-@Directive({
-  selector: '[<%= name %>TreeNodeDef]',
-  hostDirectives: [NgbTreeNodeDef],
-})
-export class TreeNodeDef<T> {}
-
-@Directive({
-  selector: '[<%= name %>TreeNodeContent]',
-  hostDirectives: [NgbTreeNodeContent],
-  host: {
-    class: 'ml-8',
-  },
-})
-export class TreeNodeContent {}

package/schematics/components/index.d.ts

@@ -1,3 +0,0 @@
-import { Rule } from '@angular-devkit/schematics';
-import { MyGeneratorSchema } from './schema';
-export declare function myGenerator(options: MyGeneratorSchema): Rule;

package/schematics/components/index.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.myGenerator = myGenerator;
-const schematics_1 = require("@angular-devkit/schematics");
-const core_1 = require("@angular-devkit/core");
-function myGenerator(options) {
-    return () => {
-        const sourceTemplates = (0, schematics_1.url)(`./files/${options.component}`);
-        const targetPath = options.path || '';
-        const sourceParametrizedTemplates = (0, schematics_1.apply)(sourceTemplates, [
-            (0, schematics_1.applyTemplates)(Object.assign(Object.assign({}, core_1.strings), options)),
-            (0, schematics_1.move)((0, core_1.normalize)(`/${targetPath}/${options.component}`)),
-        ]);
-        return (0, schematics_1.chain)([(0, schematics_1.mergeWith)(sourceParametrizedTemplates)]);
-    };
-}
-//# sourceMappingURL=index.js.map

package/schematics/components/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../projects/adk/schematics/components/index.ts"],"names":[],"mappings":";;AAYA,kCAgBC;AA5BD,2DAQoC;AACpC,+CAA0D;AAG1D,SAAgB,WAAW,CAAC,OAA0B;IACpD,OAAO,GAAG,EAAE;QACV,MAAM,eAAe,GAAG,IAAA,gBAAG,EAAC,WAAW,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC;QAE5D,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,IAAI,EAAE,CAAC;QAEtC,MAAM,2BAA2B,GAAG,IAAA,kBAAK,EAAC,eAAe,EAAE;YACzD,IAAA,2BAAc,kCACT,cAAO,GACP,OAAO,EACV;YACF,IAAA,iBAAI,EAAC,IAAA,gBAAS,EAAC,IAAI,UAAU,IAAI,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC;SACvD,CAAC,CAAC;QAEH,OAAO,IAAA,kBAAK,EAAC,CAAC,IAAA,sBAAS,EAAC,2BAA2B,CAAC,CAAC,CAAC,CAAC;IACzD,CAAC,CAAC;AACJ,CAAC"}

package/schematics/components/index.ts

@@ -1,29 +0,0 @@
-import {
-  Rule,
-  apply,
-  mergeWith,
-  move,
-  applyTemplates,
-  url,
-  chain,
-} from '@angular-devkit/schematics';
-import { strings, normalize } from '@angular-devkit/core';
-import { MyGeneratorSchema } from './schema';
-
-export function myGenerator(options: MyGeneratorSchema): Rule {
-  return () => {
-    const sourceTemplates = url(`./files/${options.component}`);
-
-    const targetPath = options.path || '';
-
-    const sourceParametrizedTemplates = apply(sourceTemplates, [
-      applyTemplates({
-        ...strings,
-        ...options,
-      }),
-      move(normalize(`/${targetPath}/${options.component}`)),
-    ]);
-
-    return chain([mergeWith(sourceParametrizedTemplates)]);
-  };
-}

package/schematics/components/schema.d.ts

@@ -1,6 +0,0 @@
-export interface MyGeneratorSchema {
-    name: string;
-    path?: string;
-    project?: string;
-    component: string;
-}

package/schematics/components/schema.js

@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=schema.js.map

package/schematics/components/schema.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../projects/adk/schematics/components/schema.ts"],"names":[],"mappings":""}

package/schematics/components/schema.json

@@ -1,137 +0,0 @@
-{
-  "$schema": "http://json-schema.org/schema",
-  "$id": "SchematicsAccordion",
-  "title": "Accordion Schema",
-  "type": "object",
-  "properties": {
-    "name": {
-      "description": "The name of the component prefix.",
-      "x-prompt": "What is the name of the component prefix?",
-      "type": "string"
-    },
-    "path": {
-      "description": "Where should be created the file",
-      "type": "string",
-      "format": "path",
-      "x-prompt": "Where should be created the file?",
-      "default": "src/app"
-    },
-    "basepath": {
-      "description": "The base path of the UI library.",
-      "type": "string",
-      "format": "path",
-      "x-prompt": "What is the base path of the UI library?",
-      "default": "@"
-    },
-    "component": {
-      "description": "The file extension or preprocessor to use for style files.",
-      "type": "string",
-      "default": "accordion",
-      "enum": [
-        "accordion",
-        "alert",
-        "autocomplete",
-        "avatar",
-        "badge",
-        "breadcrumb",
-        "button",
-        "card",
-        "carousel",
-        "checkbox",
-        "chip",
-        "color-picker",
-        "command",
-        "datepicker",
-        "dialog",
-        "drawer",
-        "form-field",
-        "hover-card",
-        "icon",
-        "inline-edit",
-        "keys",
-        "list",
-        "mask",
-        "menu",
-        "pagination",
-        "popover",
-        "progress",
-        "radio",
-        "resizable",
-        "select",
-        "separator",
-        "sheet",
-        "sidenav",
-        "skeleton",
-        "slider",
-        "sonner",
-        "spinner",
-        "stepper",
-        "switch",
-        "table",
-        "toggle",
-        "toggle-group",
-        "tooltip",
-        "tour",
-        "tree"
-      ],
-      "x-prompt": {
-        "message": "Which component would you like to create?",
-        "type": "list",
-        "items": [
-          { "value": "accordion", "label": "Accordion" },
-          { "value": "alert", "label": "Alert" },
-          { "value": "autocomplete", "label": "Autocomplete" },
-          { "value": "avatar", "label": "Avatar" },
-          { "value": "badge", "label": "Badge" },
-          { "value": "breadcrumb", "label": "Breadcrumb" },
-          { "value": "button", "label": "Button" },
-          { "value": "card", "label": "Card" },
-          { "value": "carousel", "label": "Carousel" },
-          { "value": "checkbox", "label": "Checkbox" },
-          { "value": "chip", "label": "Chip" },
-          { "value": "color-picker", "label": "Color Picker" },
-          { "value": "command", "label": "Command" },
-          { "value": "datepicker", "label": "Datepicker" },
-          { "value": "dialog", "label": "Dialog" },
-          { "value": "drawer", "label": "Drawer" },
-          { "value": "form-field", "label": "Form Field" },
-          { "value": "hover-card", "label": "Hover Card" },
-          { "value": "icon", "label": "Icon" },
-          { "value": "inline-edit", "label": "Inline Edit" },
-          { "value": "keys", "label": "Keys" },
-          { "value": "list", "label": "List" },
-          { "value": "mask", "label": "Mask" },
-          { "value": "menu", "label": "Menu" },
-          { "value": "pagination", "label": "Pagination" },
-          { "value": "popover", "label": "Popover" },
-          { "value": "progress", "label": "Progress" },
-          { "value": "radio", "label": "Radio" },
-          { "value": "resizable", "label": "Resizable" },
-          { "value": "select", "label": "Select" },
-          { "value": "separator", "label": "Separator" },
-          { "value": "sheet", "label": "Sheet" },
-          { "value": "sidenav", "label": "Sidenav" },
-          { "value": "skeleton", "label": "Skeleton" },
-          { "value": "slider", "label": "Slider" },
-          { "value": "sonner", "label": "Sonner" },
-          { "value": "spinner", "label": "Spinner" },
-          { "value": "stepper", "label": "Stepper" },
-          { "value": "switch", "label": "Switch" },
-          { "value": "table", "label": "Table" },
-          { "value": "toggle", "label": "Toggle" },
-          { "value": "toggle-group", "label": "Toggle Group" },
-          { "value": "tooltip", "label": "Tooltip" },
-          { "value": "tour", "label": "Tour" },
-          { "value": "tree", "label": "Tree" }
-        ]
-      },
-      "project": {
-        "type": "string",
-        "description": "The name of the project.",
-        "$default": {
-          "$source": "projectName"
-        }
-      }
-    }
-  }
-}

package/schematics/components/schema.ts

@@ -1,6 +0,0 @@
-export interface MyGeneratorSchema {
-  name: string;
-  path?: string;
-  project?: string;
-  component: string;
-}