c3-components 0.0.12 → 0.0.14

package/CONTRIBUTING.md

@@ -0,0 +1,80 @@
+# Contributing to c3-components
+
+First of all, thank you for your interest in contributing to the c3-components project! We appreciate your effort and look forward to collaborating with you. This document provides guidelines and best practices for contributing to the project.
+
+## Table of Contents
+
+- [Code of Conduct](#code-of-conduct)
+- [Getting Started](#getting-started)
+- [Reporting Issues](#reporting-issues)
+- [Submitting Pull Requests](#submitting-pull-requests)
+- [Coding Style](#coding-style)
+- [Testing](#testing)
+- [Documentation](#documentation)
+- [Additional Resources](#additional-resources)
+
+## Code of Conduct
+
+By participating in this project, you are expected to uphold our [Code of Conduct](./CODE_OF_CONDUCT.md). Please take a moment to read it before contributing.
+
+## Getting Started
+
+1. Fork the repository on GitHub.
+2. Clone your fork of the repository to your local machine.
+3. Install the required dependencies with `npm install`.
+4. Create a new branch for your changes using `git checkout -b your-feature-branch`.
+5. Implement your changes, following the [coding style](#coding-style) and [testing](#testing) guidelines.
+6. Commit your changes and push them to your fork on GitHub.
+7. Create a pull request with a clear description of your changes.
+
+## Reporting Issues
+
+If you encounter any issues or bugs, please report them on the [issue tracker](https://github.com/Kroenen62/c3-components/issues). When submitting an issue, make sure to:
+
+- Use a clear and descriptive title.
+- Provide a detailed description of the issue and steps to reproduce it.
+- Include any relevant code snippets or screenshots.
+
+## Submitting Pull Requests
+
+When submitting a pull request, please follow these guidelines:
+
+- Use a clear and descriptive title.
+- Provide a detailed description of your changes.
+- Reference any related issues in the pull request description.
+- Make sure your changes follow the [coding style](#coding-style) and [testing](#testing) guidelines.
+- Update the documentation if necessary.
+
+## Coding Style
+
+To ensure consistency and readability, please adhere to the following coding style guidelines:
+
+- Use 2 spaces for indentation.
+- Follow the [Angular style guide](https://angular.io/guide/styleguide).
+- Use camelCase for variable and function names.
+- Use PascalCase for class names.
+- Add comments to explain complex or non-obvious code.
+- Break down long functions or classes into smaller, more manageable pieces.
+
+## Testing
+
+Before submitting a pull request, make sure to test your changes thoroughly. Follow these testing guidelines:
+
+- Write unit tests for new features and bug fixes.
+- Ensure all tests pass by running `ng test`.
+- Test your changes in multiple browsers and screen sizes.
+
+## Documentation
+
+Keep the documentation up-to-date by following these guidelines:
+
+- Update the README.md file if you add or change any functionality.
+- Document any new components or features in the [documentation website](https://c3-components.example.com/).
+- Use clear and concise language, and provide examples when possible.
+
+## Additional Resources
+
+- [Angular Documentation](https://angular.io/docs)
+- [@angular/material Documentation](https://material.angular.io/)
+
+Once again, thank you for your interest in contributing to the c3-components project. Your time and expertise are greatly appreciated!

package/ng-package.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/c3-components",
+  "assets": [
+    {
+      "glob": "**/**.scss",
+      "input": "./src",
+      "output": "."
+    },
+    {
+      "glob": "**/**.sass",
+      "input": "./src",
+      "output": "."
+    }
+  ],
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "c3-components",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "C3 Components Library",
   "author": "Kroenen62",
   "license": "MIT",
@@ -11,8 +11,7 @@
     "@angular/cdk": ">=16.0.0",
     "@angular/material": ">=16.0.0",
     "autoprefixer": "^10.4.16",
-    "postcss": "^8.4.31",
-    "tailwindcss": ">=3.3.3"
+    "@formkit/auto-animate": "^0.8.2"
   },
   "dependencies": {
     "tslib": "^2.3.0"
@@ -20,16 +19,7 @@
   "sideEffects": false,
   "exports": {
     ".": {
-      "sass": "./_index.scss",
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/c3-components.mjs",
-      "esm": "./esm2022/c3-components.mjs",
-      "default": "./fesm2022/c3-components.mjs"
-    },
-    "./package.json": {
-      "default": "./package.json"
+      "sass": "./_index.scss"
     }
-  },
-  "module": "fesm2022/c3-components.mjs",
-  "typings": "index.d.ts"
-}
+  }
+}

package/{_index.scss → src/_index.scss}

@@ -1,5 +1,3 @@
 @forward "./lib/c3-dropdown/styles/c3-dropdown" show c3-material-dropdown;
+@forward "./lib/c3-expansion/styles/c3-expansion" show c3-expansion;
 @forward "./lib/c3-styles/c3-core" show c3-core;
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/src/lib/c3-auto-animate/C3AutoAnimate.directive.ts

@@ -0,0 +1,18 @@
+import { AfterViewInit, Directive, ElementRef, Input } from '@angular/core';
+import autoAnimate, {
+  AutoAnimateOptions,
+  AutoAnimationPlugin,
+} from '@formkit/auto-animate';
+
+@Directive({
+  selector: '[c3AutoAnimate]',
+  standalone: true,
+})
+export class C3AutoAnimateDirective implements AfterViewInit {
+  @Input() options?: Partial<AutoAnimateOptions> | AutoAnimationPlugin;
+  constructor(private el: ElementRef) {}
+
+  ngAfterViewInit(): void {
+    autoAnimate(this.el.nativeElement, this.options);
+  }
+}

package/src/lib/c3-dialog/c3-dialog.module.ts

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { ConfirmDialogComponent } from './components/c3-dialog-confirm.component';
+import { C3DialogEmbedChildComponent } from './components/c3-dialog-embed-child.component';
+import { C3PromptDialogComponent } from './components/c3-dialog-prompt.component';
+import { C3DialogService } from './services/c3-dialog.service';
+
+@NgModule({
+  declarations: [
+    ConfirmDialogComponent,
+    C3PromptDialogComponent,
+    C3DialogEmbedChildComponent,
+  ],
+  imports: [
+    CommonModule,
+    MatDialogModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
+  providers: [C3DialogService],
+})
+export class C3DialogModule {}

package/src/lib/c3-dialog/components/c3-dialog-confirm.component.ts

@@ -0,0 +1,44 @@
+import { Component, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+export interface ConfirmConfig {
+  text: string;
+  placeholder?: string;
+  reject?: {
+    color?: string;
+    text?: string;
+  };
+  accept?: {
+    color?: string;
+    text: string;
+  };
+  width?: string;
+}
+
+@Component({
+  selector: 'ConfirmDialogComponent',
+  template: `
+    <mat-dialog-content>
+      <div [innerHtml]="data.text"></div>
+    </mat-dialog-content>
+    <mat-dialog-actions class="flex flex-row justify-end items-center">
+      <button mat-button mat-dialog-close [color]="data.reject?.color">
+        {{ data.reject?.text }}
+      </button>
+      <button mat-button [color]="data.accept?.color" [mat-dialog-close]="true">
+        {{ data.accept?.text }}
+      </button>
+    </mat-dialog-actions>
+  `,
+})
+export class ConfirmDialogComponent {
+  constructor(
+    public dialogRef: MatDialogRef<ConfirmDialogComponent>,
+    @Inject(MAT_DIALOG_DATA)
+    public data: ConfirmConfig
+  ) {}
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+}

package/src/lib/c3-dialog/components/c3-dialog-embed-child.component.ts

@@ -0,0 +1,40 @@
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ComponentRef,
+  Inject,
+  Type,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+  selector: 'C3DialogEmbedChildComponent',
+  template: `<mat-dialog-content>
+    <ng-template #target></ng-template>
+  </mat-dialog-content>`,
+  styles: [],
+})
+export class C3DialogEmbedChildComponent<ComponenyType>
+  implements AfterViewInit
+{
+  @ViewChild('target', { read: ViewContainerRef }) target!: ViewContainerRef;
+
+  createdComponent?: ComponentRef<ComponenyType>;
+
+  constructor(
+    public dialogRef: MatDialogRef<C3DialogEmbedChildComponent<ComponenyType>>,
+    @Inject(MAT_DIALOG_DATA)
+    public data: {
+      component: Type<ComponenyType>;
+    },
+    private _cdr: ChangeDetectorRef
+  ) {}
+
+  ngAfterViewInit() {
+    this.createdComponent = this.target.createComponent(this.data.component);
+    this._cdr.detectChanges();
+  }
+}

package/src/lib/c3-dialog/components/c3-dialog-prompt.component.ts

@@ -0,0 +1,81 @@
+import { Component, Inject } from '@angular/core';
+import { FormBuilder, FormControl, ValidatorFn } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+export interface PromptConfig {
+  text: string;
+  defaultValue?: string;
+  placeholder?: string;
+  multiline?: boolean;
+  validators?: ValidatorFn | ValidatorFn[];
+  required?: boolean;
+  reject?: {
+    color: string;
+    text: string;
+  };
+  accept?: {
+    color: string;
+    text: string;
+  };
+  width?: string;
+  maxWidth?: string;
+}
+
+@Component({
+  selector: 'PrompDialogComponent',
+  template: `
+    <div mat-dialog-title>{{ data.text }}</div>
+    <mat-dialog-content>
+      <mat-form-field>
+        <mat-label *ngIf="data.placeholder">{{ data.placeholder }}</mat-label>
+        <input
+          *ngIf="!data.multiline"
+          matInput
+          [formControl]="result"
+          (keydown.enter)="dialogRef.close(result.value)"
+        />
+        <textarea
+          *ngIf="data.multiline"
+          matInput
+          [formControl]="result"
+          cdkTextareaAutosize
+        ></textarea>
+      </mat-form-field>
+    </mat-dialog-content>
+    <mat-dialog-actions align="center">
+      <button mat-raised-button mat-dialog-close [class]="data.reject?.color">
+        {{ data.reject?.text }}
+      </button>
+      <button
+        mat-raised-button
+        [disabled]="result.invalid || (data.required && !result.value)"
+        [class]="data.accept?.color"
+        [mat-dialog-close]="result.value"
+      >
+        {{ data.accept?.text }}
+      </button>
+    </mat-dialog-actions>
+  `,
+  styles: [
+    `
+      mat-form-field {
+        width: 100%;
+      }
+    `,
+  ],
+})
+export class C3PromptDialogComponent {
+  result: FormControl;
+  constructor(
+    public dialogRef: MatDialogRef<C3PromptDialogComponent>,
+    @Inject(MAT_DIALOG_DATA)
+    public data: PromptConfig,
+    private _fb: FormBuilder
+  ) {
+    this.result = this._fb.control(data.defaultValue, data.validators);
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+}

package/src/lib/c3-dialog/services/c3-dialog.service.ts

@@ -0,0 +1,87 @@
+import { Injectable, Type, inject } from '@angular/core';
+import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
+import {
+  ConfirmConfig,
+  ConfirmDialogComponent,
+} from '../components/c3-dialog-confirm.component';
+import { C3DialogEmbedChildComponent } from '../components/c3-dialog-embed-child.component';
+import {
+  PromptConfig,
+  C3PromptDialogComponent,
+} from '../components/c3-dialog-prompt.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class C3DialogService {
+  readonly #dialog = inject(MatDialog);
+
+  public confirm(data: ConfirmConfig): Promise<boolean> {
+    return new Promise((resolve, reject) => {
+      const dialogRef = this.#dialog.open(ConfirmDialogComponent, {
+        width: data.width || '250px',
+        data: {
+          text: data.text,
+          reject: {
+            color:
+              data.reject && data.reject.color ? data.reject.color : undefined,
+            text: (data.reject && data.reject.text) || 'Annuler',
+          },
+          accept: {
+            color: (data.accept && data.accept.color) || 'primary',
+            text: (data.accept && data.accept.text) || 'Accepter',
+          },
+        },
+      });
+
+      dialogRef.afterClosed().subscribe(async (result) => {
+        if (result) resolve(true);
+        else resolve(false);
+      });
+    });
+  }
+
+  public prompt<T = any>(data: PromptConfig): Promise<false | T> {
+    return new Promise((resolve, reject) => {
+      const dialogRef = this.#dialog.open<C3PromptDialogComponent, any, T>(
+        C3PromptDialogComponent,
+        {
+          width: data.width || '250px',
+          maxWidth: data.maxWidth || '100vw',
+          data: {
+            text: data.text,
+            defaultValue: data.defaultValue,
+            placeholder: data.placeholder,
+            multiline: data.multiline,
+            validators: data.validators,
+            required: data.required,
+            reject: {
+              color:
+                data.reject && data.reject.color
+                  ? data.reject.color
+                  : undefined,
+              text: (data.reject && data.reject.text) || 'Annuler',
+            },
+            accept: {
+              color: (data.accept && data.accept.color) || 'primary',
+              text: (data.accept && data.accept.text) || 'Accepter',
+            },
+          },
+        }
+      );
+
+      dialogRef.afterClosed().subscribe(async (result) => {
+        if (result) resolve(result);
+        else resolve(false);
+      });
+    });
+  }
+
+  createDialgFromComponent<T>(
+    config: Partial<MatDialogConfig> & {
+      data: { component: Type<T> };
+    }
+  ) {
+    return this.#dialog.open(C3DialogEmbedChildComponent, config);
+  }
+}

package/src/lib/c3-dropdown/c3-dropdown.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { C3DropdownComponent } from './components/c3-dropdown.component';
+import { C3DropdownTrigger } from './directives/c3-dropdown.trigger';
+import { OverlayModule } from '@angular/cdk/overlay';
+
+@NgModule({
+  imports: [CommonModule, OverlayModule],
+  declarations: [C3DropdownComponent, C3DropdownTrigger],
+  exports: [C3DropdownComponent, C3DropdownTrigger],
+})
+export class C3DropdownModule {}

package/src/lib/c3-dropdown/components/c3-dropdown.component.spec.ts

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

package/src/lib/c3-dropdown/components/c3-dropdown.component.ts

@@ -0,0 +1,39 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  TemplateRef,
+  ViewChild,
+  Input,
+  OnChanges,
+  SimpleChanges,
+} from '@angular/core';
+
+@Component({
+  selector: 'c3-dropdown',
+  template: `
+    <ng-template>
+      <div class="c3-dropdown-panel" [ngClass]="dropdownClass">
+        <ng-content></ng-content>
+      </div>
+    </ng-template>
+  `,
+})
+export class C3DropdownComponent implements OnChanges {
+  @ViewChild(TemplateRef) template!: TemplateRef<any>;
+
+  /** Classes to be added to the container of the content. Supports the same syntax as `ngClass`. */
+  @Input()
+  dropdownClass: string | string[] | Set<string> | { [key: string]: any } = '';
+
+  constructor(private _changeDetectorRef: ChangeDetectorRef) {}
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['dropdownClass']) {
+      this._markForCheck();
+    }
+  }
+
+  _markForCheck(): void {
+    this._changeDetectorRef.markForCheck();
+  }
+}

package/src/lib/c3-dropdown/directives/c3-dropdown.trigger.ts

@@ -0,0 +1,161 @@
+import {
+  Directive,
+  forwardRef,
+  ElementRef,
+  ViewContainerRef,
+  Input,
+  OnDestroy,
+  HostListener,
+  OnChanges,
+  SimpleChanges,
+} from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import {
+  Overlay,
+  OverlayRef,
+  OverlayConfig,
+  ConnectedPosition,
+} from '@angular/cdk/overlay';
+import { C3DropdownComponent } from '../components/c3-dropdown.component';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { merge, Subject, Subscription, takeUntil } from 'rxjs';
+
+export const MAT_DROPDOWN_VALUE_ACCESSOR: any = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => C3DropdownTrigger),
+  multi: true,
+};
+
+/**
+ * @description The C3DropdownTrigger directive is used to display or hide a dropdown menu
+ * C3DropdownComponent when an item is clicked.
+ * @selector [c3Dropdown]
+ * @exportAs c3DropdownTrigger
+ * @input c3Dropdown - A reference to an instance of C3DropdownComponent.
+ * @input c3DropdownDisabled - A boolean indicating whether the directive should be disabled.
+ * @input c3DropdownClass - A string, an array of strings, a set of strings or a
+ * object representing the CSS classes to be applied to the dropdown menu.
+ */
+@Directive({
+  selector: '[c3Dropdown]',
+  exportAs: 'c3DropdownTrigger',
+  providers: [MAT_DROPDOWN_VALUE_ACCESSOR],
+})
+export class C3DropdownTrigger implements OnChanges, OnDestroy {
+  private overlayRef?: OverlayRef | null;
+  private _closingActionsSubscription: Subscription = Subscription.EMPTY;
+  private _destroyed = new Subject<void>();
+
+  private _dropdownClass:
+    | string
+    | string[]
+    | Set<string>
+    | { [key: string]: any } = '';
+
+  private _dropdownDisabled: boolean = false;
+
+  /** The dropdown menu instance */
+  @Input('c3Dropdown')
+  dropdown?: C3DropdownComponent;
+
+  /** Whether the dropdown is disabled. */
+  @Input('c3DropdownDisabled')
+  get dropdownDisabled(): boolean {
+    return this._dropdownDisabled;
+  }
+  set dropdownDisabled(value: boolean) {
+    this._dropdownDisabled = coerceBooleanProperty(value);
+  }
+
+  /** Classes to be passed to the dropdown menu. Supports the same syntax as `ngClass`. */
+  @Input('c3DropdownClass')
+  dropdownClass: string | string[] | Set<string> | { [key: string]: any } = '';
+
+  constructor(
+    private _element: ElementRef<HTMLElement>,
+    private _overlay: Overlay,
+    private _viewContainerRef: ViewContainerRef
+  ) {}
+
+  @HostListener('click')
+  onClick() {
+    this.show();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['dropdownClass'] && this.dropdown) {
+      this.dropdown.dropdownClass = this._dropdownClass;
+      this.dropdown._markForCheck();
+    }
+  }
+
+  ngOnDestroy() {
+    this._destroyed.next();
+    this._destroyed.complete();
+    this._closingActionsSubscription.unsubscribe();
+    this.close();
+  }
+
+  public show(): void {
+    if (!this.dropdown) return;
+
+    const overlayRef = this._overlay.create(this._getOverlayConfig());
+    const portal = new TemplatePortal(
+      this.dropdown.template,
+      this._viewContainerRef
+    );
+    overlayRef.attach(portal);
+
+    this.overlayRef = overlayRef;
+
+    this._closingActionsSubscription = this._menuClosingActions().subscribe(
+      () => this.close()
+    );
+  }
+
+  public close(): void {
+    if (this.overlayRef && this.overlayRef.hasAttached())
+      this.overlayRef.detach();
+  }
+
+  private _getOverlayConfig(): OverlayConfig {
+    const belowPosition: ConnectedPosition = {
+      originX: 'start',
+      originY: 'bottom',
+      overlayX: 'start',
+      overlayY: 'top',
+    };
+    const abovePosition: ConnectedPosition = {
+      originX: 'start',
+      originY: 'top',
+      overlayX: 'start',
+      overlayY: 'bottom',
+
+      // The overlay edge connected to the trigger should have squared corners, while
+      // the opposite end has rounded corners. We apply a CSS class to swap the
+      // border-radius based on the overlay position.
+      panelClass: 'mat-autocomplete-panel-above',
+    };
+
+    const positionStrategy = this._overlay
+      .position()
+      .flexibleConnectedTo(this._element)
+      .withLockedPosition()
+      .withPositions([belowPosition, abovePosition]);
+
+    return new OverlayConfig({
+      positionStrategy,
+      backdropClass: 'cdk-overlay-transparent-backdrop',
+      hasBackdrop: true,
+    });
+  }
+
+  /** Returns a stream that emits whenever an action that should close the menu occurs. */
+  private _menuClosingActions() {
+    const backdrop = this.overlayRef!.backdropClick();
+    const detachments = this.overlayRef!.detachments();
+
+    return merge(backdrop, detachments).pipe(takeUntil(this._destroyed));
+  }
+}