npm - @scania-nl/tegel-angular-extensions - Versions diffs - 0.0.1 → 0.0.4 - Mend

@scania-nl/tegel-angular-extensions 0.0.1 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/esm2022/index.mjs +5 -0
package/esm2022/lib/toast/models/toast-state.enum.mjs +19 -0
package/esm2022/lib/toast/models/toast-type.mjs +5 -0
package/esm2022/lib/toast/models/toast.model.mjs +2 -0
package/esm2022/lib/toast/provide-toast.mjs +19 -0
package/esm2022/lib/toast/toast.component.mjs +34 -0
package/esm2022/lib/toast/toast.config.mjs +11 -0
package/esm2022/lib/toast/toast.service.mjs +206 -0
package/esm2022/lib/utils/bootstrap-global-component.mjs +43 -0
package/esm2022/scania-nl-tegel-angular-extensions.mjs +5 -0
package/{src/index.ts → index.d.ts} +1 -1
package/lib/toast/models/toast-state.enum.d.ts +17 -0
package/lib/toast/models/toast-type.d.ts +8 -0
package/lib/toast/models/toast.model.d.ts +73 -0
package/lib/toast/provide-toast.d.ts +3 -0
package/lib/toast/toast.component.d.ts +24 -0
package/lib/toast/toast.config.d.ts +35 -0
package/lib/toast/toast.service.d.ts +98 -0
package/lib/utils/bootstrap-global-component.d.ts +23 -0
package/package.json +16 -2
package/eslint.config.mjs +0 -48
package/jest.config.ts +0 -21
package/ng-package.json +0 -7
package/project.json +0 -36
package/src/lib/toast/models/toast-state.enum.ts +0 -19
package/src/lib/toast/models/toast-type.ts +0 -9
package/src/lib/toast/models/toast.model.ts +0 -87
package/src/lib/toast/provide-toast.ts +0 -29
package/src/lib/toast/toast.component.html +0 -41
package/src/lib/toast/toast.component.scss +0 -118
package/src/lib/toast/toast.component.spec.ts +0 -28
package/src/lib/toast/toast.component.ts +0 -37
package/src/lib/toast/toast.config.ts +0 -50
package/src/lib/toast/toast.service.ts +0 -275
package/src/lib/utils/bootstrap-global-component.ts +0 -73
package/src/test-setup.ts +0 -6
package/tsconfig.json +0 -28
package/tsconfig.lib.json +0 -17
package/tsconfig.lib.prod.json +0 -7
package/tsconfig.spec.json +0 -16

package/lib/toast/toast.service.d.ts ADDED Viewed

@@ -0,0 +1,98 @@
+import { Toast, ToastOptions } from './models/toast.model';
+import * as i0 from "@angular/core";
+/**
+ * Service for creating, managing, and removing toast notifications.
+ * Supports automatic dismissal, manual control, and lifecycle hooks.
+ */
+export declare class ToastService {
+    private readonly config;
+    /** Internal ID tracker for unique toast IDs */
+    private id;
+    /** Signal state holding all toasts */
+    private readonly _toasts;
+    /** Public signal of all toasts */
+    readonly toasts: import("@angular/core").Signal<Toast[]>;
+    /** Signal of toasts that are not yet closed (open or closing) */
+    readonly activeToasts: import("@angular/core").Signal<Toast[]>;
+    /** Internal stream for auto-closing toasts */
+    private readonly autoCloseSubject;
+    /** Internal stream for fade-out/removal of toasts */
+    private readonly closeSubject;
+    constructor();
+    /**
+     * Creates and adds a new toast.
+     * @param toastOptions Partial toast definition.
+     * @returns The toast's unique ID.
+     */
+    create(toastOptions: Partial<ToastOptions>): number;
+    /**
+     * Initiates the fade-out transition for a toast.
+     * @param id The toast ID.
+     */
+    close(id: number): void;
+    /**
+     * Immediately marks a toast as closed and removes it from display.
+     * @param id The toast ID.
+     */
+    remove(id: number): void;
+    /**
+     * Closes and removes all toasts immediately without fade-out.
+     */
+    removeAll(): void;
+    /**
+     * Initiates closing process for all open toasts.
+     */
+    closeAll(): void;
+    /**
+     * Gets a toast by ID.
+     * @param id The toast ID.
+     * @returns The toast instance or undefined.
+     */
+    getToast(id: number): Toast | undefined;
+    /** Whether the toast is eligible for auto-closing */
+    private shouldAutoClose;
+    /** Whether the toast is eligible for final removal */
+    private shouldRemove;
+    /** Add toast to signal list */
+    private addToast;
+    /**
+     * Updates the state of a toast.
+     * @param id Toast ID
+     * @param state New state
+     * @returns The updated toast or undefined
+     */
+    private updateToastState;
+    /**
+     * Creates a unique id
+     * @returns New id
+     */
+    private createId;
+    /**
+     * Creates a success toast.
+     * @param props Toast props without type.
+     */
+    readonly success: (props?: Partial<Omit<ToastOptions, "type">>) => number;
+    /**
+     * Creates an error toast.
+     * @param props Toast props without type.
+     */
+    readonly error: (props?: Partial<Omit<ToastOptions, "type">>) => number;
+    /**
+     * Creates a warning toast.
+     * @param props Toast props without type.
+     */
+    readonly warning: (props?: Partial<Omit<ToastOptions, "type">>) => number;
+    /**
+     * Creates an informational toast.
+     * @param props Toast props without type.
+     */
+    readonly info: (props?: Partial<Omit<ToastOptions, "type">>) => number;
+    /**
+     * Creates a random toast for testing/demo purposes.
+     * @param props Optional overrides
+     */
+    readonly createRandomToast: (props?: Partial<ToastOptions>) => number;
+    private normalizeDuration;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToastService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ToastService>;
+}

package/lib/utils/bootstrap-global-component.d.ts ADDED Viewed

@@ -0,0 +1,23 @@
+import { ComponentRef, Type } from '@angular/core';
+interface BootstrapGlobalComponentOptions {
+    /**
+     * If true, avoids re-creating the component if it's already mounted.
+     */
+    reuseIfExists?: boolean;
+}
+/**
+ * Bootstraps a global Angular component directly into the <body> element.
+ * Useful for toasts, modals, and other global overlays.
+ *
+ * @param component - The component class to bootstrap.
+ * @param options - Optional settings like preventing duplicates.
+ * @returns The created ComponentRef.
+ */
+export declare function bootstrapGlobalComponent<T>(component: Type<T>, options?: BootstrapGlobalComponentOptions): ComponentRef<T>;
+/**
+ * Destroys a previously bootstrapped global component.
+ *
+ * @param component - The component class to remove from DOM.
+ */
+export declare function destroyGlobalComponent<T>(component: Type<T>): void;
+export {};

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@scania-nl/tegel-angular-extensions",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -16,5 +16,19 @@
   "author": {
     "name": "Patrick Groot Koerkamp",
     "email": "patrick.groot.koerkamp@scania.com"
+  },
+  "module": "esm2022/scania-nl-tegel-angular-extensions.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./esm2022/scania-nl-tegel-angular-extensions.mjs"
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
   }
-}
+}

package/eslint.config.mjs DELETED Viewed

@@ -1,48 +0,0 @@
-import nx from '@nx/eslint-plugin';
-import baseConfig from '../../eslint.base.config.mjs';
-export default [
-  ...baseConfig,
-  {
-    files: ['**/*.json'],
-    rules: {
-      '@nx/dependency-checks': [
-        'error',
-        {
-          ignoredFiles: ['{projectRoot}/eslint.config.{js,cjs,mjs}'],
-        },
-      ],
-    },
-    languageOptions: {
-      parser: await import('jsonc-eslint-parser'),
-    },
-  },
-  ...nx.configs['flat/angular'],
-  ...nx.configs['flat/angular-template'],
-  {
-    files: ['**/*.ts'],
-    rules: {
-      '@angular-eslint/directive-selector': [
-        'error',
-        {
-          type: 'attribute',
-          prefix: 'lib',
-          style: 'camelCase',
-        },
-      ],
-      '@angular-eslint/component-selector': [
-        'error',
-        {
-          type: 'element',
-          prefix: 'tds-ext',
-          style: 'kebab-case',
-        },
-      ],
-    },
-  },
-  {
-    files: ['**/*.html'],
-    // Override or add rules here
-    rules: {},
-  },
-];

package/jest.config.ts DELETED Viewed

@@ -1,21 +0,0 @@
-export default {
-  displayName: 'tegel-angular-extensions',
-  preset: '../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
-  coverageDirectory: '../../coverage/libs/tegel-angular-extensions',
-  transform: {
-    '^.+\\.(ts|mjs|js|html)$': [
-      'jest-preset-angular',
-      {
-        tsconfig: '<rootDir>/tsconfig.spec.json',
-        stringifyContentPathRegex: '\\.(html|svg)$',
-      },
-    ],
-  },
-  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
-  snapshotSerializers: [
-    'jest-preset-angular/build/serializers/no-ng-attributes',
-    'jest-preset-angular/build/serializers/ng-snapshot',
-    'jest-preset-angular/build/serializers/html-comment',
-  ],
-};

package/ng-package.json DELETED Viewed

@@ -1,7 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/libs/tegel-angular-extensions",
-  "lib": {
-    "entryFile": "src/index.ts"
-  }
-}

package/project.json DELETED Viewed

@@ -1,36 +0,0 @@
-{
-  "name": "tegel-angular-extensions",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "libs/tegel-angular-extensions/src",
-  "prefix": "lib",
-  "projectType": "library",
-  "tags": [],
-  "targets": {
-    "build": {
-      "executor": "@nx/angular:ng-packagr-lite",
-      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
-      "options": {
-        "project": "libs/tegel-angular-extensions/ng-package.json"
-      },
-      "configurations": {
-        "production": {
-          "tsConfig": "libs/tegel-angular-extensions/tsconfig.lib.prod.json"
-        },
-        "development": {
-          "tsConfig": "libs/tegel-angular-extensions/tsconfig.lib.json"
-        }
-      },
-      "defaultConfiguration": "production"
-    },
-    "test": {
-      "executor": "@nx/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
-      "options": {
-        "jestConfig": "libs/tegel-angular-extensions/jest.config.ts"
-      }
-    },
-    "lint": {
-      "executor": "@nx/eslint:lint"
-    }
-  }
-}

package/src/lib/toast/models/toast-state.enum.ts DELETED Viewed

@@ -1,19 +0,0 @@
-/**
- * Represents the current lifecycle state of a toast.
- */
-export enum ToastState {
-  /**
-   * The toast is fully visible and active.
-   */
-  Open = 'open',
-  /**
-   * The toast is transitioning out (e.g., fading out).
-   */
-  Closing = 'closing',
-  /**
-   * The toast is fully removed or dismissed.
-   */
-  Closed = 'closed',
-}

package/src/lib/toast/models/toast-type.ts DELETED Viewed

@@ -1,9 +0,0 @@
-/**
- * List of available toast types (inherited from Tegel)
- */
-export const TOAST_TYPES = ['success', 'information', 'warning', 'error'] as const;
-/**
- * Type representing valid toast type values.
- */
-export type ToastType = (typeof TOAST_TYPES)[number];

package/src/lib/toast/models/toast.model.ts DELETED Viewed

@@ -1,87 +0,0 @@
-import { ToastState } from './toast-state.enum';
-import { ToastType } from './toast-type';
-/**
- * Defines the base structure for a toast message.
- */
-export interface ToastOptions {
-  /**
-   * The visual style of the toast (e.g., success, error).
-   */
-  type: ToastType;
-  /**
-   * The main title text displayed in the toast.
-   */
-  title: string;
-  /**
-   * Optional description text providing additional context.
-   */
-  description?: string;
-  /**
-   * Duration in milliseconds before the toast auto-dismisses.
-   * Use `0` for persistent toasts.
-   */
-  duration: number;
-  /**
-   * Duration in milliseconds for the fade-out transition.
-   */
-  closeDuration: number;
-  /**
-   * Whether the toast can be manually closed by the user.
-   */
-  closable?: boolean;
-  /**
-   * Optional router link to navigate to when the toast is clicked.
-   */
-  link?: string;
-  /**
-   * Custom link text shown if a link is provided.
-   */
-  linkText?: string;
-  /**
-   * Optional callback triggered when the linkText is clicked.
-   * Used as an alternative to `link` for invoking custom behavior.
-   */
-  action?: () => void;
-  /**
-   * Optional callback triggered when the toast is created.
-   * @param toast The created toast instance.
-   */
-  onCreated?: (toast: Toast) => void;
-  /**
-   * Optional callback triggered when the toast begins to close.
-   * @param toast The toast that is closing.
-   */
-  onClose?: (toast: Toast) => void;
-  /**
-   * Optional callback triggered when the toast has been fully removed.
-   * @param toast The removed toast instance.
-   */
-  onRemoved?: (toast: Toast) => void;
-}
-/**
- * Represents a fully instantiated toast, including unique ID and current state.
- */
-export interface Toast extends ToastOptions {
-  /**
-   * Unique identifier for the toast instance.
-   */
-  id: number;
-  /**
-   * The current state of the toast (open, closing, or closed).
-   */
-  state: ToastState;
-}

package/src/lib/toast/provide-toast.ts DELETED Viewed

@@ -1,29 +0,0 @@
-import {
-  EnvironmentProviders,
-  makeEnvironmentProviders,
-  provideAppInitializer,
-} from '@angular/core';
-import { bootstrapGlobalComponent } from '../utils/bootstrap-global-component';
-import { ToastComponent } from './toast.component';
-import {
-  DEFAULT_TOAST_CONFIG,
-  TOAST_CONFIG,
-  ToastConfig,
-} from './toast.config';
-export function provideToast(
-  config: Partial<ToastConfig> = {}
-): EnvironmentProviders {
-  return makeEnvironmentProviders([
-    {
-      provide: TOAST_CONFIG,
-      useFactory: () => ({
-        ...DEFAULT_TOAST_CONFIG,
-        ...(config ?? {}),
-      }),
-    },
-    provideAppInitializer(() => {
-      bootstrapGlobalComponent(ToastComponent, { reuseIfExists: true });
-    }),
-  ]);
-}

package/src/lib/toast/toast.component.html DELETED Viewed

@@ -1,41 +0,0 @@
-<ul class="toast-list" aria-live="polite" aria-atomic="true">
-  @for (toast of toastsSignal(); track toast.id) {
-  <li
-    class="toast-item"
-    [class]="'toast-' + toast.type"
-    [class.toast-closing]="toast.state === 'closing'"
-    [style.--duration.ms]="toast.duration"
-    [style.--close-duration.ms]="toast.closeDuration"
-    role="status"
-  >
-    <tds-toast
-      [variant]="toast.type"
-      [header]="toast.title"
-      [subheader]="toast.description"
-      [closable]="toast.closable"
-      tds-close-aria-label="Toast close button"
-    >
-      @if (toast.link) {
-      <tds-link slot="actions">
-        <a [routerLink]="toast.link">
-          {{ toast.linkText ?? 'Click here' }}
-        </a>
-      </tds-link>
-      } @else if (toast.action) {
-      <tds-link slot="actions">
-        <a href="#" (click)="toast.action()">
-          {{ toast.linkText ?? 'Click here' }}
-        </a>
-      </tds-link>
-      }
-    </tds-toast>
-    @if (toast.closable) {
-    <button
-      class="toast-close"
-      (click)="closeToast(toast)"
-      aria-label="Close toast"
-    ></button>
-    }
-  </li>
-  }
-</ul>

package/src/lib/toast/toast.component.scss DELETED Viewed

@@ -1,118 +0,0 @@
-$default-close-duration: 300ms;
-$default-duration: 7000ms;
-$item-gap: 6px;
-:host {
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  overflow: hidden;
-  z-index: 9999;
-}
-.toast-list {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: $item-gap;
-  /* List resets */
-  list-style: none;
-  padding: $item-gap;
-  margin: 0;
-}
-.toast-item {
-  position: relative;
-  animation: fadeIn $default-close-duration ease-in forwards;
-  &.toast-closing {
-    animation-name: fadeOut;
-    animation-duration: var(--close-duration, $default-close-duration);
-    animation-fill-mode: forwards;
-    pointer-events: none;
-  }
-  &::before {
-    content: '';
-    position: absolute;
-    height: 3px;
-    width: 100%;
-    bottom: 0;
-    left: 4px; /* Toast border itself */
-    right: 0;
-    animation: progress var(--duration, $default-duration)
-      linear forwards;
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
-  }
-  &.toast-information::before {
-    background: var(--tds-information);
-  }
-  &.toast-success::before {
-    background: var(--tds-positive);
-  }
-  &.toast-warning::before {
-    background: var(--tds-warning);
-  }
-  &.toast-error::before {
-    background: var(--tds-negative);
-  }
-  /*
-  Custom Close element for TDS, which is just a transparent block covering the close-button of the TdsToast element
-  Height, width, and positioning values are equal to TdsToast's button.close element for a perfect overlap
-  */
-  .toast-close {
-    height: 20px;
-    width: 20px;
-    box-sizing: border-box;
-    cursor: pointer;
-    position: absolute;
-    top: 14px;
-    right: 14px;
-    border: 0;
-    background: transparent;
-    &:active {
-      border: 2px solid var(--tds-blue-400);
-      outline-offset: -2px;
-    }
-  }
-}
-@keyframes fadeIn {
-  0% {
-    transform: translateY(40%);
-    opacity: 0;
-    margin-bottom: -25%;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-    margin-bottom: 0%;
-  }
-}
-@keyframes fadeOut {
-  0% {
-    transform: translateY(0);
-    opacity: 1;
-    margin-top: 0;
-  }
-  100% {
-    opacity: 0;
-    transform: translateY(75%);
-    margin-top: -25%;
-  }
-}
-@keyframes progress {
-  100% {
-    width: 0%;
-  }
-}

package/src/lib/toast/toast.component.spec.ts DELETED Viewed

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

package/src/lib/toast/toast.component.ts DELETED Viewed

@@ -1,37 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { RouterLink } from '@angular/router';
-import { TegelModule } from '@scania/tegel-angular-17';
-import { Toast } from './models/toast.model';
-import { ToastService } from './toast.service';
-/**
- * Displays toast notifications provided by the ToastService.
- *
- * Toasts are non-blocking messages that automatically disappear after a set duration
- * or can be dismissed manually by the user.
- */
-@Component({
-  selector: 'tds-ext-toast',
-  templateUrl: './toast.component.html',
-  styleUrls: ['./toast.component.scss'],
-  imports: [CommonModule, TegelModule, RouterLink],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ToastComponent {
-  private readonly toastService = inject(ToastService);
-  /**
-   * A reactive signal of all currently active toasts (open or closing).
-   */
-  readonly toastsSignal = this.toastService.activeToasts;
-  /**
-   * Initiates the closing process for the given toast.
-   *
-   * @param toast The toast to be closed.
-   * @returns void
-   */
-  closeToast = (toast: Toast) => this.toastService.close(toast.id);
-}

package/src/lib/toast/toast.config.ts DELETED Viewed

@@ -1,50 +0,0 @@
-import { InjectionToken } from '@angular/core';
-import { ToastType } from './models/toast-type';
-/**
- * Global default configuration for toast behavior.
- * Used when individual toast properties are not explicitly set.
- */
-export interface ToastConfig {
-  /**
-   * Default toast type (e.g., 'success', 'information', etc.).
-   */
-  type: ToastType;
-  /**
-   * Default title to use when none is provided.
-   */
-  title: string;
-  /**
-   * Default description to use when none is provided.
-   */
-  description: string;
-  /**
-   * Default duration (ms) before auto-dismiss.
-   * Use `0` for persistent toasts.
-   */
-  duration: number;
-  /**
-   * Default duration (ms) for the fade-out animation.
-   */
-  closeDuration: number;
-  /**
-   * Whether toasts are closable by default.
-   */
-  closable: boolean;
-}
-export const TOAST_CONFIG = new InjectionToken<ToastConfig>('ToastConfig');
-export const DEFAULT_TOAST_CONFIG: Required<ToastConfig> = {
-  type: 'information',
-  title: 'Notification',
-  description: '',
-  duration: 7500,
-  closeDuration: 300,
-  closable: true,
-};