@ngbase/adk 0.1.3 → 0.1.5

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';

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

@@ -0,0 +1,66 @@
+import { ChangeDetectionStrategy, Component, Directive, signal } from '@angular/core';
+import {
+  NgbTree,
+  NgbTreeNode,
+  NgbTreeNodeContent,
+  NgbTreeNodeDef,
+  NgbTreeNodeToggle,
+  aliasTree,
+  aliasTreeNode,
+} from '@ngbase/adk/tree';
+
+@Component({
+  selector: '<%= name %>-tree',
+  exportAs: '<%= name %>Tree',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [aliasTree(Tree)],
+  template: `<ng-container #container />`,
+  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

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

package/schematics/components/index.js

@@ -0,0 +1,23 @@
+"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 () => {
+        if (!options.component || options.component.length === 0) {
+            return (0, schematics_1.noop)();
+        }
+        const rules = options.component.map(comp => {
+            const sourceTemplates = (0, schematics_1.url)(`./files/${comp}`);
+            const targetPath = options.path || '';
+            const sourceParametrizedTemplates = (0, schematics_1.apply)(sourceTemplates, [
+                (0, schematics_1.applyTemplates)(Object.assign(Object.assign(Object.assign({}, core_1.strings), options), { component: comp })),
+                (0, schematics_1.move)((0, core_1.normalize)(`/${targetPath}/${comp}`)),
+            ]);
+            return (0, schematics_1.mergeWith)(sourceParametrizedTemplates);
+        });
+        return (0, schematics_1.chain)(rules);
+    };
+}
+//# sourceMappingURL=index.js.map

package/schematics/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../projects/adk/schematics/components/index.ts"],"names":[],"mappings":";;AAaA,kCAyBC;AAtCD,2DASoC;AACpC,+CAA0D;AAG1D,SAAgB,WAAW,CAAC,OAA0B;IACpD,OAAO,GAAG,EAAE;QACV,IAAI,CAAC,OAAO,CAAC,SAAS,IAAI,OAAO,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACzD,OAAO,IAAA,iBAAI,GAAE,CAAC;QAChB,CAAC;QAED,MAAM,KAAK,GAAW,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YACjD,MAAM,eAAe,GAAG,IAAA,gBAAG,EAAC,WAAW,IAAI,EAAE,CAAC,CAAC;YAE/C,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,IAAI,EAAE,CAAC;YAEtC,MAAM,2BAA2B,GAAG,IAAA,kBAAK,EAAC,eAAe,EAAE;gBACzD,IAAA,2BAAc,gDACT,cAAO,GACP,OAAO,KACV,SAAS,EAAE,IAAI,IACf;gBACF,IAAA,iBAAI,EAAC,IAAA,gBAAS,EAAC,IAAI,UAAU,IAAI,IAAI,EAAE,CAAC,CAAC;aAC1C,CAAC,CAAC;YAEH,OAAO,IAAA,sBAAS,EAAC,2BAA2B,CAAC,CAAC;QAChD,CAAC,CAAC,CAAC;QAEH,OAAO,IAAA,kBAAK,EAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;AACJ,CAAC"}

package/schematics/components/index.ts

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

package/schematics/components/schema.d.ts

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

package/schematics/components/schema.js

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

package/schematics/components/schema.js.map

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

package/schematics/components/schema.json

@@ -0,0 +1,142 @@
+{
+  "$schema": "http://json-schema.org/draft-07/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": "array",
+      "items": {
+        "type": "string",
+        "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",
+          "otp",
+          "pagination",
+          "popover",
+          "progress",
+          "radio",
+          "resizable",
+          "scroll-area",
+          "select",
+          "selectable",
+          "separator",
+          "sheet",
+          "sidenav",
+          "skeleton",
+          "slider",
+          "sonner",
+          "spinner",
+          "stepper",
+          "switch",
+          "table",
+          "tabs",
+          "toggle",
+          "toggle-group",
+          "tooltip",
+          "tour",
+          "tree"
+        ]
+      },
+      "x-prompt": {
+        "message": "Which component would you like to create?",
+        "type": "list",
+        "multiselect": true,
+        "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": "otp", "label": "OTP" },
+          { "value": "pagination", "label": "Pagination" },
+          { "value": "popover", "label": "Popover" },
+          { "value": "progress", "label": "Progress" },
+          { "value": "radio", "label": "Radio" },
+          { "value": "resizable", "label": "Resizable" },
+          { "value": "scroll-area", "label": "Scroll Area" },
+          { "value": "select", "label": "Select" },
+          { "value": "selectable", "label": "Selectable" },
+          { "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": "tabs", "label": "Tabs" },
+          { "value": "toggle", "label": "Toggle" },
+          { "value": "toggle-group", "label": "Toggle Group" },
+          { "value": "tooltip", "label": "Tooltip" },
+          { "value": "tour", "label": "Tour" },
+          { "value": "tree", "label": "Tree" }
+        ]
+      }
+    }
+  },
+  "required": ["name", "path", "basepath", "component"]
+}

package/schematics/components/schema.ts

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