@ng-zen/cli 0.0.1-alpha.1

package/CHANGELOG.md

@@ -0,0 +1,28 @@
+# Changelog
+
+
+### 0.0.1-alpha.1 (2024-06-26)
+
+
+### Features
+
+* add BSD 2-Clause License and author information ([#52](https://github.com/Kordrad/ng-zen/issues/52)) ([9336578](https://github.com/Kordrad/ng-zen/commit/93365782656f8166f6f8205dc9c4ea9f4c8c0c27))
+* add docs script ([#39](https://github.com/Kordrad/ng-zen/issues/39)) ([d5e1e37](https://github.com/Kordrad/ng-zen/commit/d5e1e37eed26ebf2227c9039ad9b97161f7316c3))
+* **avatar:** add component ([#32](https://github.com/Kordrad/ng-zen/issues/32)) ([35d89ab](https://github.com/Kordrad/ng-zen/commit/35d89abeb5baf934ec68b83ca8ef5f28ff40332c))
+* **badge:** add new component ([#10](https://github.com/Kordrad/ng-zen/issues/10)) ([06b7e3a](https://github.com/Kordrad/ng-zen/commit/06b7e3acf4d947ee8ee79bde772d987d813bbf62))
+* **badge:** add top/right/bottom/left positions to component ([#20](https://github.com/Kordrad/ng-zen/issues/20)) ([4cb3b6e](https://github.com/Kordrad/ng-zen/commit/4cb3b6e5db1f9e239ccee01c86a7b00102cfb70e))
+* **button:** add component ([#59](https://github.com/Kordrad/ng-zen/issues/59)) ([b72a67a](https://github.com/Kordrad/ng-zen/commit/b72a67aa39ba3dd9a893395d178935573cfc9038))
+* **kit:** add new library ([#7](https://github.com/Kordrad/ng-zen/issues/7)) ([1576da6](https://github.com/Kordrad/ng-zen/commit/1576da623fece9910e289d53abe0928d8c15664b))
+* **pin:** add component ([#33](https://github.com/Kordrad/ng-zen/issues/33)) ([2f8c021](https://github.com/Kordrad/ng-zen/commit/2f8c0214a47defb0f748e399b83872ef9e8cc2a0))
+* **pin:** add stream animation ([#34](https://github.com/Kordrad/ng-zen/issues/34)) ([1fc4968](https://github.com/Kordrad/ng-zen/commit/1fc4968e31ce05fe36cfb1b89d9248df68684a2f))
+* **pull-request-check:** cache module installation to improve performance ([#53](https://github.com/Kordrad/ng-zen/issues/53)) ([c82c279](https://github.com/Kordrad/ng-zen/commit/c82c2792c8b0b436e5856a63a53c5b2ffd433a76))
+* **schematics:** add new project ([#45](https://github.com/Kordrad/ng-zen/issues/45)) ([1325318](https://github.com/Kordrad/ng-zen/commit/1325318a8c4941f3ff696138d7ae427aa95279f1))
+* **storybook:** add storybook instead of demo app ([#26](https://github.com/Kordrad/ng-zen/issues/26)) ([edac7b1](https://github.com/Kordrad/ng-zen/commit/edac7b16cb2573c86b52a614b2539e9fb6b9fafe))
+* **switch:** add component ([#56](https://github.com/Kordrad/ng-zen/issues/56)) ([a6028d5](https://github.com/Kordrad/ng-zen/commit/a6028d5d3bc00fd5f13bf51192225e2eda68e0fc))
+* **tag:** add component ([#35](https://github.com/Kordrad/ng-zen/issues/35)) ([33dc67c](https://github.com/Kordrad/ng-zen/commit/33dc67c5830ed42323e76c8658ea1d85c0509155))
+
+
+### Bug Fixes
+
+* **eslint:** remove quiet flag ([#21](https://github.com/Kordrad/ng-zen/issues/21)) ([06fbc75](https://github.com/Kordrad/ng-zen/commit/06fbc752b50470fec745bcd77d4b64ba2bec82ee))
+* restore project name to ng-zen ([#19](https://github.com/Kordrad/ng-zen/issues/19)) ([0c659d7](https://github.com/Kordrad/ng-zen/commit/0c659d77bbda95414fd29ab2dbc58b4ffd3d61d7))

package/LICENSE

@@ -0,0 +1,24 @@
+BSD 2-Clause License
+
+Copyright (c) 2024, Konrad Stępień
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,39 @@
+# @ng-zen/cli
+
+## Overview
+
+The ng-zen CLI is a command-line tool designed to facilitate the generation of UI-kit elements for Angular applications using Angular schematics. It provides out-of-the-box components that can be quickly integrated into Angular projects.
+
+## Installation
+
+To install ng-zen CLI, use the following command:
+
+```bash
+ng add @ng-zen/cli
+```
+
+This command will add the necessary dependencies and configurations to your Angular project.
+
+## Generating Components
+
+You can generate components using the ng-zen CLI. Components are generated using the following command format:
+
+```bash
+ng generate @ng-zen/cli:component
+```
+
+## License
+
+This project is licensed under the BSD 2-Clause License. For more details, refer to the LICENSE file in the repository.
+
+
+## Author
+
+**@ng-zen/cli** is maintained by Konrad Stępień.
+
+- Email: kord.stp@gmail.com
+- LinkedIn: [Konrad Stępień](https://www.linkedin.com/in/konradstepien/)
+
+## Documentation
+
+The ng-zen CLI is documented using Storybook for component examples and JSDoc, as well as Compodoc for Angular project documentation.

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@ng-zen/cli",
+  "version": "0.0.1-alpha.1",
+  "license": "BSD-2-Clause",
+  "private": false,
+  "repository": {
+    "url": "https://github.com/Kordrad/ng-zen",
+    "directory": "projects/cli"
+  },
+  "bugs": {
+    "url": "https://github.com/Kordrad/ng-zen/issues"
+  },
+  "author": {
+    "name": "Konrad Stępień",
+    "email": "kord.stp@gmail.com",
+    "url": "https://www.linkedin.com/in/KonradStepien/"
+  },
+  "schematics": "./schematics/collection.json",
+  "ng-add": {
+    "save": "devDependencies"
+  },
+  "peerDependencies": {
+    "@angular/common": "^17.3.0",
+    "@angular/core": "^17.3.0"
+  },
+  "dependencies": {
+    "@angular-devkit/core": "^17.3.0",
+    "@angular-devkit/schematics": "^17.3.0",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.3.5",
+    "@storybook/addon-essentials": "^8.1.0",
+    "@storybook/addon-interactions": "^8.1.0",
+    "@storybook/addon-links": "^8.1.0"
+  },
+  "sideEffects": false
+}

package/schematics/collection.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Add library to the project.",
+      "factory": "./ng-add/index#ngAdd",
+      "schema": "./ng-add/schema.json"
+    },
+    "component": {
+      "description": "This schematic generates ui components",
+      "factory": "./components/index#componentGenerator",
+      "schema": "./components/schema.json",
+      "aliases": ["c"]
+    }
+  }
+}

package/schematics/components/components-generator.d.ts

@@ -0,0 +1,5 @@
+export interface ComponentGeneratorSchema {
+    components: ('avatar' | 'badge' | 'button' | 'pin' | 'switch' | 'tag')[];
+    path: string;
+}
+//# sourceMappingURL=components-generator.d.ts.map

package/schematics/components/components-generator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"components-generator.d.ts","sourceRoot":"","sources":["../../../../../projects/cli/schematics/components/components-generator.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,wBAAwB;IACvC,UAAU,EAAE,CAAC,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,KAAK,CAAC,EAAE,CAAC;IACzE,IAAI,EAAE,MAAM,CAAC;CACd"}

package/schematics/components/components-generator.js

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

package/schematics/components/components-generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components-generator.js","sourceRoot":"","sources":["../../../../../projects/cli/schematics/components/components-generator.ts"],"names":[],"mappings":"","sourcesContent":["export interface ComponentGeneratorSchema {\r\n  components: ('avatar' | 'badge' | 'button' | 'pin' | 'switch' | 'tag')[];\r\n  path: string;\r\n}\r\n"]}

package/schematics/components/files/avatar/avatar.component.scss

@@ -0,0 +1,23 @@
+zen-avatar {
+  height: 32px;
+  width: 32px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  overflow: hidden;
+  touch-action: none;
+  pointer-events: none;
+  user-select: none;
+
+  // Text
+  &:not(:has(img)) {
+    background-color: #6b7280;
+  }
+
+  & > * {
+    height: 100%;
+    width: 100%;
+  }
+}

package/schematics/components/files/avatar/avatar.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ZenAvatarComponent } from './avatar.component';
+
+describe('ZenAvatarComponent', () => {
+  let component: ZenAvatarComponent;
+  let fixture: ComponentFixture<ZenAvatarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ZenAvatarComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ZenAvatarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/schematics/components/files/avatar/avatar.component.ts

@@ -0,0 +1,60 @@
+import { NgOptimizedImage } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+
+/**
+ * A component to display an avatar image. If a valid image source URL is provided,
+ * it will render an image element. Otherwise, it will display projected content.
+ *
+ * The component uses Angular's optimized image directives for enhanced performance.
+ *
+ * Usage:
+ *
+ * ```html
+ * <!-- If an image source is provided, it will display the image -->
+ * <zen-avatar [src]="'/path/to/image.jpg'" />
+ *
+ * <!-- If no image source is provided, it will display the projected content -->
+ * <zen-avatar> A </zen-avatar>
+ * ```
+ *
+ * @example
+ * <zen-avatar src="https://picsum.photos/32" />
+ *
+ * @component
+ * @selector `zen-avatar`
+ *
+ * @license BSD-2-Clause
+ * @author Konrad Stępień <kord.stp@gmail.com>
+ * @link https://github.com/Kordrad/ng-zen
+ */
+@Component({
+  selector: 'zen-avatar',
+  standalone: true,
+  imports: [NgOptimizedImage],
+  template: `
+    @if (src()) {
+      <img [ngSrc]="src()" alt="" fill />
+    } @else {
+      <ng-content />
+    }
+  `,
+  styleUrl: './avatar.component.scss',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ZenAvatarComponent {
+  /**
+   * Path to the image source. If the `src` is provided, an image element will be rendered.
+   * Otherwise, the content projected into this component will be displayed.
+   *
+   * @default ''
+   * @input
+   * @type string
+   */
+  readonly src = input<string>('');
+}

package/schematics/components/files/avatar/index.ts

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

package/schematics/components/files/badge/badge.component.scss

@@ -0,0 +1,70 @@
+:root {
+  --zen-badge-offset: unset;
+  --zen-badge-offset-x: unset;
+  --zen-badge-offset-y: unset;
+}
+
+zen-badge,
+[zenBadge] {
+  display: inline-flex;
+  position: relative;
+
+  [topLeft],
+  [top],
+  [topRight],
+  [right],
+  [bottomRight],
+  [bottom],
+  [bottomLeft],
+  [left] {
+    position: absolute;
+  }
+
+  [topLeft] {
+    top: var(--zen-badge-offset-y, calc(var(--zen-badge-offset, 0px) * -1));
+    left: var(--zen-badge-offset-x, calc(var(--zen-badge-offset, 0px) * -1));
+    transform: translateY(-50%) translateX(-50%);
+  }
+
+  [top] {
+    top: var(--zen-badge-offset-y, calc(var(--zen-badge-offset, 0px) * -1));
+    left: 50%;
+    transform: translateY(-50%) translateX(-50%);
+  }
+
+  [topRight] {
+    top: var(--zen-badge-offset-y, calc(var(--zen-badge-offset, 0px) * -1));
+    right: var(--zen-badge-offset-x, calc(var(--zen-badge-offset, 0px) * -1));
+    transform: translateY(-50%) translateX(50%);
+  }
+
+  [right] {
+    right: var(--zen-badge-offset-x, calc(var(--zen-badge-offset, 0px) * -1));
+    top: 50%;
+    transform: translateY(-50%) translateX(50%);
+  }
+
+  [bottomRight] {
+    bottom: var(--zen-badge-offset-y, calc(var(--zen-badge-offset, 0px) * -1));
+    right: var(--zen-badge-offset-x, calc(var(--zen-badge-offset, 0px) * -1));
+    transform: translateY(50%) translateX(50%);
+  }
+
+  [bottom] {
+    bottom: var(--zen-badge-offset-y, calc(var(--zen-badge-offset, 0px) * -1));
+    left: 50%;
+    transform: translateY(50%) translateX(-50%);
+  }
+
+  [bottomLeft] {
+    bottom: var(--zen-badge-offset-y, calc(var(--zen-badge-offset, 0px) * -1));
+    left: var(--zen-badge-offset-x, calc(var(--zen-badge-offset, 0px) * -1));
+    transform: translateY(50%) translateX(-50%);
+  }
+
+  [left] {
+    left: var(--zen-badge-offset-x, calc(var(--zen-badge-offset, 0px) * -1));
+    top: 50%;
+    transform: translateY(-50%) translateX(-50%);
+  }
+}

package/schematics/components/files/badge/badge.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ZenBadgeComponent } from './badge.component';
+
+describe('BadgeComponent', () => {
+  let component: ZenBadgeComponent;
+  let fixture: ComponentFixture<ZenBadgeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ZenBadgeComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ZenBadgeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/schematics/components/files/badge/badge.component.ts

@@ -0,0 +1,52 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+} from '@angular/core';
+
+/**
+ * ZenBadgeComponent is a versatile Angular component used to display badges or indicators
+ * in various positions within its parent container. It allows for flexible placement
+ * of badge content such as icons, text, or other elements in the top-left, top,
+ * top-right, left, right, bottom-left, bottom, and bottom-right positions.
+ *
+ * This component offers standalone usage and is highly customizable through its
+ * template and styling. It leverages Angular's change detection strategy 'OnPush'
+ * for optimal performance.
+ *
+ * Additionally, it provides support for CSS variables to customize badge positioning
+ *
+ * ```css
+ * --zen-badge-offset: unset; // Controls the overall offset of the badge
+ * --zen-badge-offset-x: unset; // Controls the horizontal offset of the badge.
+ * --zen-badge-offset-y: unset; // Controls the vertical offset of the badge.
+ * ```
+ *
+ * @example <zen-badge> Text <span bottom>🦆</span></zen-badge>
+ *
+ * @component
+ * @selector `zen-badge`,`[zenBadge]`
+ *
+ * @license BSD-2-Clause
+ * @author Konrad Stępień <kord.stp@gmail.com>
+ * @link https://github.com/Kordrad/ng-zen
+ */
+@Component({
+  selector: 'zen-badge,[zenBadge]',
+  standalone: true,
+  template: `
+    <ng-content />
+    <ng-content select="[topLeft]" />
+    <ng-content select="[top]" />
+    <ng-content select="[topRight]" />
+    <ng-content select="[left]" />
+    <ng-content select="[right]" />
+    <ng-content select="[bottomLeft]" />
+    <ng-content select="[bottom]" />
+    <ng-content select="[bottomRight]" />
+  `,
+  styleUrl: './badge.component.scss',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ZenBadgeComponent {}

package/schematics/components/files/badge/index.ts

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

package/schematics/components/files/button/button.component.scss

@@ -0,0 +1,42 @@
+$bg-color-hover: #333;
+$bg-color: #000;
+$color: #fff;
+$padding: 8px 24px;
+$shadow-hover: 0 0 0 3px rgb(0 123 255 / 50%);
+$shadow: 0 2px 4px rgb(0 0 0 / 10%);
+$transition-duration: 0.4s;
+
+:host {
+  display: inline-block;
+  font-size: 14px;
+  font-weight: bold;
+  text-align: center;
+  cursor: pointer;
+  border: none;
+  padding: $padding;
+  border-radius: 99999px;
+  transition: all $transition-duration ease;
+  background-color: $bg-color;
+  color: $color;
+  box-shadow: $shadow;
+  text-decoration: none;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Hover state */
+:host:hover {
+  background-color: $bg-color-hover;
+}
+
+/* Focus state */
+:host:focus {
+  box-shadow: $shadow-hover;
+}
+
+/* Disabled state */
+:host[disabled] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}

package/schematics/components/files/button/button.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ZenButtonComponent } from './button.component';
+
+describe('ButtonComponent', () => {
+  let component: ZenButtonComponent;
+  let fixture: ComponentFixture<ZenButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ZenButtonComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ZenButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/schematics/components/files/button/button.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'button[zen-button], a[zen-button]',
+  standalone: true,
+  template: ` <ng-content /> `,
+  styleUrl: './button.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ZenButtonComponent {}

package/schematics/components/files/button/index.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+
+import { ZenButtonComponent } from './button.component';
+
+@NgModule({
+  imports: [ZenButtonComponent],
+  exports: [ZenButtonComponent],
+})
+export class ZenButtonModule {}
+export * from './button.component';

package/schematics/components/files/pin/index.ts

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

package/schematics/components/files/pin/pin.component.scss

@@ -0,0 +1,29 @@
+zen-pin,
+zen-pin.stream::before {
+  display: block;
+  height: 8px;
+  width: 8px;
+  border-radius: 50%;
+  background-color: #6b7280;
+}
+
+zen-pin {
+  position: relative;
+
+  &.stream::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+    animation: stream 1s ease-in-out infinite;
+  }
+}
+
+@keyframes stream {
+  75%,
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}

package/schematics/components/files/pin/pin.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ZenPinComponent } from './pin.component';
+
+describe('PinComponent', () => {
+  let component: ZenPinComponent;
+  let fixture: ComponentFixture<ZenPinComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ZenPinComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ZenPinComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/schematics/components/files/pin/pin.component.ts

@@ -0,0 +1,46 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+
+/**
+ * The ZenPinComponent represents a simple visual pin with a circular shape.
+ *
+ * ```html
+ * <zen-pin />
+ * ```
+ *
+ * @example <zen-pin />
+ * @component
+ * @selector `zen-pin`
+ *
+ * @license BSD-2-Clause
+ * @author Konrad Stępień <kord.stp@gmail.com>
+ * @link https://github.com/Kordrad/ng-zen
+ */
+@Component({
+  selector: 'zen-pin',
+  standalone: true,
+  imports: [],
+  template: ``,
+  styleUrl: './pin.component.scss',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ZenPinComponent {
+  /**
+   * Displays waving stream animation
+   */
+  readonly stream = input<boolean, boolean | 'true' | 'false' | ''>(false, {
+    transform: booleanAttribute,
+  });
+
+  @HostBinding('class.stream')
+  get classStream() {
+    return this.stream();
+  }
+}

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

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+
+import { ZenSwitchComponent } from './zen-switch.component';
+
+@NgModule({
+  imports: [ZenSwitchComponent],
+  exports: [ZenSwitchComponent],
+})
+export class ZenSwitchModule {}
+export * from './zen-switch.component';

package/schematics/components/files/switch/zen-switch.component.html

@@ -0,0 +1,11 @@
+<button
+  class="switch"
+  [attr.aria-checked]="checked()"
+  [attr.aria-disabled]="disabled()"
+  [disabled]="disabled()"
+  (click)="onToggle()"
+  (keydown)="onKeyDown($event)"
+  role="switch"
+>
+  <span class="slider"></span>
+</button>

package/schematics/components/files/switch/zen-switch.component.scss

@@ -0,0 +1,62 @@
+// Define SCSS variables for better maintainability
+$switch-width: 36px;
+$switch-height: 22px;
+$slider-size: 16px;
+$transition-duration: 0.4s;
+$switch-bg-color: grey;
+$switch-checked-bg-color: green;
+$switch-disabled-bg-color: lightgrey;
+$slider-bg-color: white;
+
+// Other
+$slider-padding: calc(($switch-height - $slider-size) / 2);
+$slider-transform-distance: calc(
+  $switch-width - $slider-size - $slider-padding * 2
+);
+
+/* Switch container */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: $switch-width;
+  height: $switch-height;
+  background-color: $switch-bg-color;
+  border: none;
+  border-radius: 99999px; // force perfectly rounded
+  cursor: pointer;
+  transition: background-color $transition-duration;
+
+  /*
+    outline: none;
+    &:focus {
+      box-shadow: 0 0 3px 2px rgba(21, 156, 228, 0.4);
+    }
+  */
+}
+
+/* Slider */
+.slider {
+  position: absolute;
+  top: $slider-padding;
+  left: $slider-padding;
+  height: $slider-size;
+  width: $slider-size;
+  background-color: $slider-bg-color;
+  transition: transform $transition-duration;
+  border-radius: 50%;
+}
+
+/* Styles when the button is checked */
+.switch[aria-checked='true'] {
+  background-color: $switch-checked-bg-color;
+
+  .slider {
+    transform: translateX($slider-transform-distance);
+  }
+}
+
+/* Styles when the button is disabled */
+.switch[aria-disabled='true'] {
+  background-color: $switch-disabled-bg-color;
+  cursor: not-allowed;
+}

package/schematics/components/files/switch/zen-switch.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ZenSwitchComponent } from './zen-switch.component';
+
+describe('SwitchComponent', () => {
+  let component: ZenSwitchComponent;
+  let fixture: ComponentFixture<ZenSwitchComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ZenSwitchComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ZenSwitchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/schematics/components/files/switch/zen-switch.component.ts

@@ -0,0 +1,123 @@
+import { NgIf } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  forwardRef,
+  model,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+} from '@angular/forms';
+
+type OnChangeFn = (value: boolean) => void;
+type OnTouchedFn = () => void;
+
+/**
+ * ZenSwitchComponent is a custom switch component that implements ControlValueAccessor to work seamlessly with Angular forms.
+ *
+ * @example <zen-switch />
+ *
+ * @export
+ * @class ZenSwitchComponent
+ * @implements {ControlValueAccessor}
+ *
+ * @license BSD-2-Clause
+ * @author Konrad Stępień <kord.stp@gmail.com>
+ * @link https://github.com/Kordrad/ng-zen
+ */
+@Component({
+  selector: 'zen-switch',
+  standalone: true,
+  templateUrl: './zen-switch.component.html',
+  styleUrl: './zen-switch.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ZenSwitchComponent),
+      multi: true,
+    },
+  ],
+  imports: [FormsModule, NgIf],
+})
+export class ZenSwitchComponent implements ControlValueAccessor {
+  /** Model for the checked state of the switch. */
+  checked = model<boolean>(false);
+
+  /** Model for the disabled state of the switch. */
+  disabled = model<boolean>(false);
+
+  /** @ignore */
+  private onChange: OnChangeFn = () => {};
+  /** @ignore */
+  private onTouched: OnTouchedFn = () => {};
+
+  /**
+   * Writes a new value to the component.
+   * @ignore
+   */
+  writeValue(value: boolean): void {
+    this.checked.set(value);
+  }
+
+  /**
+   * Registers a function to be called when the value changes.
+   * @ignore
+   */
+  registerOnChange(fn: OnChangeFn): void {
+    this.onChange = fn;
+  }
+
+  /**
+   * Registers a function to be called when the component is touched.
+   * @ignore
+   */
+  registerOnTouched(fn: OnTouchedFn): void {
+    this.onTouched = fn;
+  }
+
+  /**
+   * Sets the disabled state of the component.
+   * @ignore
+   */
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled.set(isDisabled);
+  }
+
+  /**
+   * Toggles the switch value and notifies the change.
+   */
+  onToggle(check?: boolean): void {
+    if (this.disabled()) return;
+
+    const value = check ?? !this.checked();
+
+    this.checked.set(value);
+    this.onChange(value);
+    this.onTouched();
+  }
+
+  /**
+   * Handles keyboard events for accessibility.
+   */
+  onKeyDown(event: KeyboardEvent): void {
+    switch (event.code) {
+      case 'Enter':
+      case 'Space': {
+        event.preventDefault();
+        this.onToggle();
+        break;
+      }
+      case 'ArrowRight': {
+        this.onToggle(true);
+        break;
+      }
+      case 'ArrowLeft': {
+        this.onToggle(false);
+        break;
+      }
+    }
+  }
+}

package/schematics/components/files/tag/index.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+
+import { ZenTagComponent } from './tag.component';
+
+@NgModule({
+  imports: [ZenTagComponent],
+  exports: [ZenTagComponent],
+})
+export class ZenTagModule {}
+export * from './tag.component';

package/schematics/components/files/tag/tag.component.scss

@@ -0,0 +1,9 @@
+:host {
+  border-radius: 9999999px;
+  background-color: lightgray;
+  padding: 2px 8px;
+  line-height: 20px;
+  font-size: 12px;
+  color: #343434;
+  font-weight: bold;
+}

package/schematics/components/files/tag/tag.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ZenTagComponent } from './tag.component';
+
+describe('ZenTagComponent', () => {
+  let component: ZenTagComponent;
+  let fixture: ComponentFixture<ZenTagComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ZenTagComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ZenTagComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/schematics/components/files/tag/tag.component.ts

@@ -0,0 +1,26 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+/**
+ * The `ZenTagComponent` is a reusable UI component designed to display a tag or label.
+ * It allows for custom content to be projected inside the tag.
+ *
+ * ```html
+ * <zen-tag>...</zen-tag>
+ * ```
+ *
+ * @example <zen-tag>Simple tag</zen-tag>
+ * @component
+ * @selector `zen-tag`
+ *
+ * @license BSD-2-Clause
+ * @author Konrad Stępień <kord.stp@gmail.com>
+ * @link https://github.com/Kordrad/ng-zen
+ */
+@Component({
+  selector: 'zen-tag',
+  standalone: true,
+  template: `<ng-content />`,
+  styleUrl: './tag.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ZenTagComponent {}

package/schematics/components/index.d.ts

@@ -0,0 +1,4 @@
+import { Rule } from '@angular-devkit/schematics';
+import { ComponentGeneratorSchema } from './components-generator';
+export declare function componentGenerator(options: ComponentGeneratorSchema): Rule;
+//# sourceMappingURL=index.d.ts.map

package/schematics/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../projects/cli/schematics/components/index.ts"],"names":[],"mappings":"AACA,OAAO,EAML,IAAI,EAEL,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAElE,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,wBAAwB,GAAG,IAAI,CAoB1E"}

package/schematics/components/index.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentGenerator = void 0;
+const core_1 = require("@angular-devkit/core");
+const schematics_1 = require("@angular-devkit/schematics");
+function componentGenerator(options) {
+    return () => {
+        const componentsSource = options.components.map(component => {
+            const rules = [
+                (0, schematics_1.applyTemplates)(Object.assign({ name: component, localeDate: new Date().toLocaleString() }, core_1.strings)),
+                (0, schematics_1.move)((0, core_1.normalize)(`${options.path}/${component}`)),
+            ];
+            const componentTemplateSource = (0, schematics_1.apply)((0, schematics_1.url)(`./files/${component}`), rules);
+            const genericTemplates = (0, schematics_1.apply)((0, schematics_1.url)(`./templates`), rules);
+            return (0, schematics_1.chain)([componentTemplateSource, genericTemplates].map(schematics_1.mergeWith));
+        });
+        return (0, schematics_1.chain)(componentsSource);
+    };
+}
+exports.componentGenerator = componentGenerator;
+//# sourceMappingURL=index.js.map

package/schematics/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../projects/cli/schematics/components/index.ts"],"names":[],"mappings":";;;AAAA,+CAA0D;AAC1D,2DAQoC;AAIpC,SAAgB,kBAAkB,CAAC,OAAiC;IAClE,OAAO,GAAG,EAAE;QACV,MAAM,gBAAgB,GAAG,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YAC1D,MAAM,KAAK,GAAW;gBACpB,IAAA,2BAAc,kBACZ,IAAI,EAAE,SAAS,EACf,UAAU,EAAE,IAAI,IAAI,EAAE,CAAC,cAAc,EAAE,IACpC,cAAO,EACV;gBACF,IAAA,iBAAI,EAAC,IAAA,gBAAS,EAAC,GAAG,OAAO,CAAC,IAAI,IAAI,SAAS,EAAE,CAAC,CAAC;aAChD,CAAC;YAEF,MAAM,uBAAuB,GAAG,IAAA,kBAAK,EAAC,IAAA,gBAAG,EAAC,WAAW,SAAS,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC;YAC1E,MAAM,gBAAgB,GAAG,IAAA,kBAAK,EAAC,IAAA,gBAAG,EAAC,aAAa,CAAC,EAAE,KAAK,CAAC,CAAC;YAE1D,OAAO,IAAA,kBAAK,EAAC,CAAC,uBAAuB,EAAE,gBAAgB,CAAC,CAAC,GAAG,CAAC,sBAAS,CAAC,CAAC,CAAC;QAC3E,CAAC,CAAC,CAAC;QAEH,OAAO,IAAA,kBAAK,EAAC,gBAAgB,CAAC,CAAC;IACjC,CAAC,CAAC;AACJ,CAAC;AApBD,gDAoBC","sourcesContent":["import { normalize, strings } from '@angular-devkit/core';\r\nimport {\r\n  apply,\r\n  applyTemplates,\r\n  chain,\r\n  mergeWith,\r\n  move,\r\n  Rule,\r\n  url,\r\n} from '@angular-devkit/schematics';\r\n\r\nimport { ComponentGeneratorSchema } from './components-generator';\r\n\r\nexport function componentGenerator(options: ComponentGeneratorSchema): Rule {\r\n  return () => {\r\n    const componentsSource = options.components.map(component => {\r\n      const rules: Rule[] = [\r\n        applyTemplates({\r\n          name: component,\r\n          localeDate: new Date().toLocaleString(),\r\n          ...strings,\r\n        }),\r\n        move(normalize(`${options.path}/${component}`)),\r\n      ];\r\n\r\n      const componentTemplateSource = apply(url(`./files/${component}`), rules);\r\n      const genericTemplates = apply(url(`./templates`), rules);\r\n\r\n      return chain([componentTemplateSource, genericTemplates].map(mergeWith));\r\n    });\r\n\r\n    return chain(componentsSource);\r\n  };\r\n}\r\n"]}

package/schematics/components/schema.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "NgZenCliComponents",
+  "title": "Schema to create Zen UI components",
+  "type": "object",
+  "description": "Adds Zen UI component 📦",
+  "properties": {
+    "components": {
+      "description": "Select component to generate (e.g: --components=avatar pin)",
+      "type": "array",
+      "items": {
+        "type": "string",
+        "enum": ["avatar", "badge", "button", "pin", "switch", "tag"]
+      },
+      "multiselect": true,
+      "x-prompt": "Which component should be generated?"
+    },
+    "path": {
+      "description": "Where should be created the components",
+      "type": "string",
+      "format": "path",
+      "default": "/projects/ng-zen/components"
+    }
+  }
+}

package/schematics/components/templates/README.md.template

@@ -0,0 +1,41 @@
+# <%= classify(name) %> component
+
+![GitHub License](https://img.shields.io/github/license/Kordrad/ng-zen)
+![Angular Version](https://img.shields.io/badge/angular-v17-red)
+
+Generated by `@ng-zen/cli` on <%= localeDate %>
+
+## Overview
+
+<%= classify(name) %> component was generated by
+```bash
+ng generate @ng-zen/cli:component --components=<%= name %>
+```
+
+This component is part of a larger set of UI components aimed at enhancing and streamlining the development process in Angular applications.
+
+More information you can find here
+```bash
+ng generate @ng-zen/cli:component --help
+```
+
+## Installation
+
+To generate other components, ensure that you have the `@ng-zen/cli` library installed. You can add it to your project with the following command:
+```bash
+ng add @ng-zen/cli
+```
+
+then you can generate components via
+```bash
+ng generate @ng-zen/cli:component
+```
+
+
+## Author
+
+This component was generated by the `@ng-zen/cli` tool developed by Konrad Stępień.
+
+This code is licensed under the BSD-2-Clause license. See the [LICENSE](https://github.com/Kordrad/ng-zen/blob/master/projects/cli/LICENSE) file for more details.
+
+Source code can be found [here](https://github.com/Kordrad/ng-zen).

package/schematics/ng-add/index.d.ts

@@ -0,0 +1,4 @@
+import { Rule } from '@angular-devkit/schematics';
+import { NgZenGeneratorSchema } from './ng-zen-generator';
+export declare function ngAdd(options: NgZenGeneratorSchema): Rule;
+//# sourceMappingURL=index.d.ts.map

package/schematics/ng-add/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../projects/cli/schematics/ng-add/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAA0B,MAAM,4BAA4B,CAAC;AAG1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE1D,wBAAgB,KAAK,CAAC,OAAO,EAAE,oBAAoB,GAAG,IAAI,CAQzD"}

package/schematics/ng-add/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ngAdd = void 0;
+const add_path_to_tsconfig_util_1 = require("../utils/add-path-to-tsconfig.util");
+function ngAdd(options) {
+    return (tree, _context) => {
+        _context.logger.info('Adding library to the project');
+        (0, add_path_to_tsconfig_util_1.addPathToTsconfigUtil)(tree, 'ng-zen/*', [`${options.path}/*`]);
+        return tree;
+    };
+}
+exports.ngAdd = ngAdd;
+//# sourceMappingURL=index.js.map

package/schematics/ng-add/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../projects/cli/schematics/ng-add/index.ts"],"names":[],"mappings":";;;AAEA,kFAA2E;AAG3E,SAAgB,KAAK,CAAC,OAA6B;IACjD,OAAO,CAAC,IAAU,EAAE,QAA0B,EAAE,EAAE;QAChD,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,+BAA+B,CAAC,CAAC;QAEtD,IAAA,iDAAqB,EAAC,IAAI,EAAE,UAAU,EAAE,CAAC,GAAG,OAAO,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC;QAE/D,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;AACJ,CAAC;AARD,sBAQC","sourcesContent":["import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';\r\n\r\nimport { addPathToTsconfigUtil } from '../utils/add-path-to-tsconfig.util';\r\nimport { NgZenGeneratorSchema } from './ng-zen-generator';\r\n\r\nexport function ngAdd(options: NgZenGeneratorSchema): Rule {\r\n  return (tree: Tree, _context: SchematicContext) => {\r\n    _context.logger.info('Adding library to the project');\r\n\r\n    addPathToTsconfigUtil(tree, 'ng-zen/*', [`${options.path}/*`]);\r\n\r\n    return tree;\r\n  };\r\n}\r\n"]}

package/schematics/ng-add/ng-zen-generator.d.ts

@@ -0,0 +1,4 @@
+export interface NgZenGeneratorSchema {
+    path: string;
+}
+//# sourceMappingURL=ng-zen-generator.d.ts.map

package/schematics/ng-add/ng-zen-generator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-zen-generator.d.ts","sourceRoot":"","sources":["../../../../../projects/cli/schematics/ng-add/ng-zen-generator.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;CACd"}

package/schematics/ng-add/ng-zen-generator.js

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

package/schematics/ng-add/ng-zen-generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-zen-generator.js","sourceRoot":"","sources":["../../../../../projects/cli/schematics/ng-add/ng-zen-generator.ts"],"names":[],"mappings":"","sourcesContent":["export interface NgZenGeneratorSchema {\r\n  path: string;\r\n}\r\n"]}

package/schematics/ng-add/schema.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "NgZenCliComponents",
+  "title": "Schema to create Zen UI library",
+  "type": "object",
+  "description": "Adds Zen CLI library and configure project 📦",
+  "properties": {
+    "path": {
+      "description": "Where should be created the library",
+      "type": "string",
+      "format": "path",
+      "default": "projects/ng-zen"
+    }
+  }
+}

package/schematics/utils/add-path-to-tsconfig.util.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@angular-devkit/schematics';
+export declare function addPathToTsconfigUtil(tree: Tree, key: string, value: string[]): void;
+//# sourceMappingURL=add-path-to-tsconfig.util.d.ts.map

package/schematics/utils/add-path-to-tsconfig.util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-path-to-tsconfig.util.d.ts","sourceRoot":"","sources":["../../../../../projects/cli/schematics/utils/add-path-to-tsconfig.util.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAElD,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,EAAE,GACd,IAAI,CA+CN"}

package/schematics/utils/add-path-to-tsconfig.util.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addPathToTsconfigUtil = void 0;
+const schematics_1 = require("@angular-devkit/schematics");
+function addPathToTsconfigUtil(tree, key, value) {
+    const tsconfigPath = 'tsconfig.json';
+    // Check if tsconfig.json exists
+    if (!tree.exists(tsconfigPath)) {
+        throw new schematics_1.SchematicsException('tsconfig.json does not exist');
+    }
+    // Read tsconfig.json content as string
+    const tsconfigBuffer = tree.read(tsconfigPath);
+    if (!tsconfigBuffer) {
+        throw new schematics_1.SchematicsException('Failed to read tsconfig.json');
+    }
+    let tsconfigContent = tsconfigBuffer.toString('utf-8');
+    // Extract and preserve the comment
+    const commentMatch = tsconfigContent.match(/\/\*[\s\S]*?\*\//);
+    const comment = commentMatch ? commentMatch[0] : '';
+    // Remove comment from content to parse JSON
+    tsconfigContent = tsconfigContent.replace(comment, '');
+    // Parse tsconfig.json content
+    let tsconfig;
+    try {
+        tsconfig = JSON.parse(tsconfigContent);
+    }
+    catch (e) {
+        throw new schematics_1.SchematicsException('Failed to parse tsconfig.json');
+    }
+    // Modify compilerOptions.paths to add your new mapping
+    if (!tsconfig.compilerOptions) {
+        tsconfig.compilerOptions = {};
+    }
+    if (!tsconfig.compilerOptions.paths) {
+        tsconfig.compilerOptions.paths = {};
+    }
+    tsconfig.compilerOptions.paths[key] = value;
+    // Convert tsconfig back to JSON string
+    tsconfigContent = JSON.stringify(tsconfig, null, 2);
+    // Ensure the preserved comment is prepended to the JSON string
+    tsconfigContent = `${comment}\n${tsconfigContent}`;
+    // Write back to tsconfig.json
+    tree.overwrite(tsconfigPath, tsconfigContent);
+}
+exports.addPathToTsconfigUtil = addPathToTsconfigUtil;
+//# sourceMappingURL=add-path-to-tsconfig.util.js.map

package/schematics/utils/add-path-to-tsconfig.util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-path-to-tsconfig.util.js","sourceRoot":"","sources":["../../../../../projects/cli/schematics/utils/add-path-to-tsconfig.util.ts"],"names":[],"mappings":";;;AAAA,2DAAiE;AAGjE,SAAgB,qBAAqB,CACnC,IAAU,EACV,GAAW,EACX,KAAe;IAEf,MAAM,YAAY,GAAG,eAAe,CAAC;IAErC,gCAAgC;IAChC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC;QAC/B,MAAM,IAAI,gCAAmB,CAAC,8BAA8B,CAAC,CAAC;IAChE,CAAC;IAED,uCAAuC;IACvC,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC/C,IAAI,CAAC,cAAc,EAAE,CAAC;QACpB,MAAM,IAAI,gCAAmB,CAAC,8BAA8B,CAAC,CAAC;IAChE,CAAC;IACD,IAAI,eAAe,GAAG,cAAc,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IAEvD,mCAAmC;IACnC,MAAM,YAAY,GAAG,eAAe,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC;IAC/D,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAEpD,4CAA4C;IAC5C,eAAe,GAAG,eAAe,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;IAEvD,8BAA8B;IAC9B,IAAI,QAAQ,CAAC;IACb,IAAI,CAAC;QACH,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;IACzC,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC;QACX,MAAM,IAAI,gCAAmB,CAAC,+BAA+B,CAAC,CAAC;IACjE,CAAC;IAED,uDAAuD;IACvD,IAAI,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC;QAC9B,QAAQ,CAAC,eAAe,GAAG,EAAE,CAAC;IAChC,CAAC;IACD,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,KAAK,EAAE,CAAC;QACpC,QAAQ,CAAC,eAAe,CAAC,KAAK,GAAG,EAAE,CAAC;IACtC,CAAC;IACD,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;IAE5C,uCAAuC;IACvC,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAEpD,+DAA+D;IAC/D,eAAe,GAAG,GAAG,OAAO,KAAK,eAAe,EAAE,CAAC;IAEnD,8BAA8B;IAC9B,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC;AAChD,CAAC;AAnDD,sDAmDC","sourcesContent":["import { SchematicsException } from '@angular-devkit/schematics';\r\nimport { Tree } from '@angular-devkit/schematics';\r\n\r\nexport function addPathToTsconfigUtil(\r\n  tree: Tree,\r\n  key: string,\r\n  value: string[]\r\n): void {\r\n  const tsconfigPath = 'tsconfig.json';\r\n\r\n  // Check if tsconfig.json exists\r\n  if (!tree.exists(tsconfigPath)) {\r\n    throw new SchematicsException('tsconfig.json does not exist');\r\n  }\r\n\r\n  // Read tsconfig.json content as string\r\n  const tsconfigBuffer = tree.read(tsconfigPath);\r\n  if (!tsconfigBuffer) {\r\n    throw new SchematicsException('Failed to read tsconfig.json');\r\n  }\r\n  let tsconfigContent = tsconfigBuffer.toString('utf-8');\r\n\r\n  // Extract and preserve the comment\r\n  const commentMatch = tsconfigContent.match(/\\/\\*[\\s\\S]*?\\*\\//);\r\n  const comment = commentMatch ? commentMatch[0] : '';\r\n\r\n  // Remove comment from content to parse JSON\r\n  tsconfigContent = tsconfigContent.replace(comment, '');\r\n\r\n  // Parse tsconfig.json content\r\n  let tsconfig;\r\n  try {\r\n    tsconfig = JSON.parse(tsconfigContent);\r\n  } catch (e) {\r\n    throw new SchematicsException('Failed to parse tsconfig.json');\r\n  }\r\n\r\n  // Modify compilerOptions.paths to add your new mapping\r\n  if (!tsconfig.compilerOptions) {\r\n    tsconfig.compilerOptions = {};\r\n  }\r\n  if (!tsconfig.compilerOptions.paths) {\r\n    tsconfig.compilerOptions.paths = {};\r\n  }\r\n  tsconfig.compilerOptions.paths[key] = value;\r\n\r\n  // Convert tsconfig back to JSON string\r\n  tsconfigContent = JSON.stringify(tsconfig, null, 2);\r\n\r\n  // Ensure the preserved comment is prepended to the JSON string\r\n  tsconfigContent = `${comment}\\n${tsconfigContent}`;\r\n\r\n  // Write back to tsconfig.json\r\n  tree.overwrite(tsconfigPath, tsconfigContent);\r\n}\r\n"]}