@acorex/components 18.10.2 → 18.10.5

package/fesm2022/acorex-components-rate-picker.mjs

@@ -0,0 +1,250 @@
+import { MXValueComponent, AXValuableComponent } from '@acorex/components/common';
+import * as i0 from '@angular/core';
+import { input, computed, signal, viewChild, inject, Renderer2, effect, forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
+/**
+ * Calculates the horizontal position of a pointer event (mouse or touch) as a percentage
+ * of the target element's width.
+ *
+ * @param event - The mouse or touch event to get the pointer position from.
+ * @returns The percentage of the event's position relative to the target element's width,
+ *          or -1 if the event is invalid.
+ *
+ * @remarks
+ * - For `MouseEvent`, it uses the `clientX` property.
+ * - For `TouchEvent`, it uses the `clientX` of the first touch point.
+ * - Returns `-1` if the event is neither a valid `MouseEvent` nor a `TouchEvent`.
+ *
+ * @example
+ * ```typescript
+ * document.addEventListener('click', function(event) {
+ *   const percentage = getPointerPercentage(event);
+ *   console.log(`Click position: ${percentage.toFixed(2)}% of the element's width`);
+ * });
+ *
+ * document.addEventListener('touchstart', function(event) {
+ *   const percentage = getPointerPercentage(event);
+ *   console.log(`Touch position: ${percentage.toFixed(2)}% of the element's width`);
+ * });
+ * ```
+ */
+function getPointerPercentage(event) {
+    let clientX;
+    if (event instanceof MouseEvent) {
+        clientX = event.clientX; // Mouse event uses clientX
+    }
+    else if (event instanceof TouchEvent && event.touches.length > 0) {
+        clientX = event.touches[0].clientX; // Touch event uses the first touch's clientX
+    }
+    else {
+        return -1; // Return -1 for invalid events
+    }
+    // Use currentTarget to get the bounding box of the element the event listener is attached to
+    const rect = event.currentTarget.getBoundingClientRect();
+    const clickX = clientX - rect.left; // Calculate X position relative to the element
+    const divWidth = rect.width; // Get the width from the bounding box
+    const percentage = (clickX / divWidth) * 100; // Calculate percentage
+    return percentage;
+}
+
+/**
+ * A component for selecting a rating using star icons.
+ *
+ * This component allows users to pick a rating by clicking or dragging over star icons.
+ * It supports rounding options and manages the rating state internally.
+ */
+class AXRatePickerComponent extends MXValueComponent {
+    /**
+     * Initializes the component and sets up value change subscription.
+     */
+    constructor() {
+        super();
+        /** The icon name to use for stars (e.g., 'fa-star'). */
+        this.iconName = input('fa-star');
+        /** The maximum rating value (e.g., 5 stars). */
+        this.max = input(5);
+        /** Determines if the rating should be rounded to the nearest integer. */
+        this.isRound = input(true);
+        /** choosing to have css transition for unchanging value after hover. */
+        this.hasTransition = input(true);
+        /** The percentage of the current rating value relative to the maximum rating. */
+        this.ratePercentage = computed(() => Math.round((this.currentValue() / this.max()) * 10000) / 100);
+        /** The current rating value as a signal. */
+        this.currentValue = signal(this.max());
+        /** State for tracking hover status and previous value. */
+        this.prevState = {
+            ishover: false,
+            previousValue: undefined,
+        };
+        /** Reference to the container element. */
+        this.containerEl = viewChild.required('c');
+        /** Reference to the rating element. */
+        this.ratingEl = viewChild.required('r');
+        /** Renderer for manipulating styles. */
+        this.renderer = inject(Renderer2);
+        /** Array of rating values from 1 to `max`. */
+        this.rates = computed(() => Array(this.max())
+            .fill(0)
+            .map((_, index) => index + 1));
+        effect(() => {
+            if (!this.hasTransition()) {
+                this.renderer.removeStyle(this.ratingEl().nativeElement, 'transition');
+            }
+            return this.hasTransition();
+        });
+        this.onValueChanged.subscribe((val) => {
+            if (val.value < 0) {
+                this.currentValue.set(0);
+                console.warn('ax-rate-picker: value cant be negative!');
+            }
+            else if (val.value > this.max()) {
+                this.currentValue.set(this.max());
+                console.warn('ax-rate-picker: value cant be more than max!');
+            }
+            else {
+                this.currentValue.set(val.value);
+            }
+        });
+    }
+    /**
+     * Calculates and updates the rating based on the mouse or touch event.
+     *
+     * @param event - The mouse or touch event triggering the rating calculation.
+     */
+    calculateRate(event) {
+        if (this.hasTransition()) {
+            this.renderer.removeStyle(this.ratingEl().nativeElement, 'transition');
+        }
+        event.preventDefault();
+        if (!this.readonly && !this.disabled) {
+            const pointerPercentage = getPointerPercentage(event);
+            if (pointerPercentage === -1) {
+                return console.log('Only support touch and click events.');
+            }
+            const value = (pointerPercentage / 100) * this.max();
+            const finalValue = this.isRound() ? Math.ceil(value) : Number.parseFloat(value.toFixed(2));
+            if (finalValue !== this.value) {
+                if (this.prevState.ishover === true) {
+                    this.currentValue.set(finalValue);
+                }
+                else {
+                    this.commitValue(finalValue);
+                }
+            }
+        }
+    }
+    /**
+     * Handles mouse enter events to start tracking mouse movements for rating.
+     */
+    mouseEnter() {
+        this.prevState = {
+            ishover: true,
+            previousValue: this.value,
+        };
+        if (this.hasTransition()) {
+            this.renderer.setStyle(this.ratingEl().nativeElement, 'opacity', '80%');
+        }
+        const moveListener = (moveEvent) => this.calculateRate(moveEvent);
+        const endListener = () => this.onEnd(moveListener, endListener);
+        const container = this.containerEl().nativeElement;
+        container.addEventListener('mousemove', moveListener);
+        container.addEventListener('mouseup', endListener);
+        container.addEventListener('mouseleave', endListener);
+    }
+    mouseLeave() {
+        if (this.hasTransition()) {
+            this.renderer.removeStyle(this.ratingEl().nativeElement, 'opacity');
+        }
+    }
+    /**
+     * Cleans up event listeners and restores the previous rating value.
+     *
+     * @param moveListener - The function to remove for mouse move events.
+     * @param endListener - The function to remove for mouse end events.
+     */
+    onEnd(moveListener, endListener) {
+        if (this.hasTransition()) {
+            this.renderer.setStyle(this.ratingEl().nativeElement, 'transition', `width ${this.max() * 50 + 250}ms cubic-bezier(0.29, 0.72, 0.68, 0.85)`);
+            this.renderer.removeStyle(this.ratingEl().nativeElement, 'opacity');
+        }
+        this.currentValue.set(this.prevState.previousValue);
+        this.prevState = {
+            ishover: false,
+            previousValue: undefined,
+        };
+        const container = this.containerEl().nativeElement;
+        container.removeEventListener('mousemove', moveListener);
+        container.removeEventListener('mouseup', endListener);
+        container.removeEventListener('mouseleave', endListener);
+    }
+    /**
+     * Determines if the component is active (i.e., not readonly or disabled).
+     */
+    get isActive() {
+        return !this.readonly && !this.disabled;
+    }
+    /**
+     * Determines if the component is in readonly mode.
+     */
+    get isReadonly() {
+        return this.readonly;
+    }
+    /**
+     * Determines if the component is disabled.
+     */
+    get isDisabled() {
+        return this.disabled;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXRatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXRatePickerComponent, selector: "ax-rate-picker", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, isRound: { classPropertyName: "isRound", publicName: "isRound", isSignal: true, isRequired: false, transformFunction: null }, hasTransition: { classPropertyName: "hasTransition", publicName: "hasTransition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.active": "this.isActive", "class.readonly": "this.isReadonly", "class.disable": "this.isDisabled" } }, providers: [
+            { provide: AXValuableComponent, useExisting: AXRatePickerComponent },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AXRatePickerComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["c"], descendants: true, isSignal: true }, { propertyName: "ratingEl", first: true, predicate: ["r"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #c\n  class=\"ax-rate-picker-container\"\n  (click)=\"calculateRate($event)\"\n  (touchstart)=\"calculateRate($event)\"\n  (mouseenter)=\"mouseEnter()\"\n  (mouseleave)=\"mouseLeave()\"\n>\n  <div #r class=\"ax-rate-picker-rating\" [style.width.%]=\"ratePercentage()\">\n    <div class=\"ax-rate-picker-icons ax-rp-active\">\n      @for (rate of rates(); track rate) {\n        <i class=\"ax-rate-picker-icon fa-solid\" [class]=\"iconName()\" [class.pointer]=\"!this.readonly\"></i>\n      }\n    </div>\n  </div>\n  <div class=\"ax-rate-picker-icons ax-rp-inactive\">\n    @for (rate of rates(); track rate) {\n      <i class=\"ax-rate-picker-icon fa-solid\" [class]=\"iconName()\"></i>\n    }\n  </div>\n</div>\n", styles: [":root{--ax-rate-picker-color: rgba(var(--ax-color-primary-500));--ax-rate-picker-background: rgba(var(--ax-color-neutral-300))}ax-rate-picker.active{cursor:pointer}ax-rate-picker.readonly{opacity:.75}ax-rate-picker.disable{cursor:not-allowed;opacity:.5}ax-rate-picker.ax-sm{font-size:1rem}ax-rate-picker.ax-md{font-size:1.5rem}ax-rate-picker.ax-lg{font-size:2rem}ax-rate-picker.ax-xl{font-size:2.5rem}ax-rate-picker.ax-2xl{font-size:3rem}ax-rate-picker.ax-3xl{font-size:4rem}ax-rate-picker .ax-rate-picker-container{position:relative;width:min-content}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-rating{position:relative;z-index:10;overflow:hidden}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-rating .ax-rate-picker-icons{display:flex}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-rating .ax-rate-picker-icons.ax-rp-active{color:var(--ax-rate-picker-color)}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-icons{display:flex}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-icons.ax-rp-inactive{color:var(--ax-rate-picker-background);position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:5}.ax-dark :root{--ax-rate-picker-color: rgba(var(--ax-color-primary-300));--ax-rate-picker-background: rgba(var(--ax-color-neutral-600))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXRatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-rate-picker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['readonly', 'disabled'], providers: [
+                        { provide: AXValuableComponent, useExisting: AXRatePickerComponent },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AXRatePickerComponent),
+                            multi: true,
+                        },
+                    ], template: "<div\n  #c\n  class=\"ax-rate-picker-container\"\n  (click)=\"calculateRate($event)\"\n  (touchstart)=\"calculateRate($event)\"\n  (mouseenter)=\"mouseEnter()\"\n  (mouseleave)=\"mouseLeave()\"\n>\n  <div #r class=\"ax-rate-picker-rating\" [style.width.%]=\"ratePercentage()\">\n    <div class=\"ax-rate-picker-icons ax-rp-active\">\n      @for (rate of rates(); track rate) {\n        <i class=\"ax-rate-picker-icon fa-solid\" [class]=\"iconName()\" [class.pointer]=\"!this.readonly\"></i>\n      }\n    </div>\n  </div>\n  <div class=\"ax-rate-picker-icons ax-rp-inactive\">\n    @for (rate of rates(); track rate) {\n      <i class=\"ax-rate-picker-icon fa-solid\" [class]=\"iconName()\"></i>\n    }\n  </div>\n</div>\n", styles: [":root{--ax-rate-picker-color: rgba(var(--ax-color-primary-500));--ax-rate-picker-background: rgba(var(--ax-color-neutral-300))}ax-rate-picker.active{cursor:pointer}ax-rate-picker.readonly{opacity:.75}ax-rate-picker.disable{cursor:not-allowed;opacity:.5}ax-rate-picker.ax-sm{font-size:1rem}ax-rate-picker.ax-md{font-size:1.5rem}ax-rate-picker.ax-lg{font-size:2rem}ax-rate-picker.ax-xl{font-size:2.5rem}ax-rate-picker.ax-2xl{font-size:3rem}ax-rate-picker.ax-3xl{font-size:4rem}ax-rate-picker .ax-rate-picker-container{position:relative;width:min-content}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-rating{position:relative;z-index:10;overflow:hidden}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-rating .ax-rate-picker-icons{display:flex}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-rating .ax-rate-picker-icons.ax-rp-active{color:var(--ax-rate-picker-color)}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-icons{display:flex}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-icons.ax-rp-inactive{color:var(--ax-rate-picker-background);position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:5}.ax-dark :root{--ax-rate-picker-color: rgba(var(--ax-color-primary-300));--ax-rate-picker-background: rgba(var(--ax-color-neutral-600))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { isActive: [{
+                type: HostBinding,
+                args: ['class.active']
+            }], isReadonly: [{
+                type: HostBinding,
+                args: ['class.readonly']
+            }], isDisabled: [{
+                type: HostBinding,
+                args: ['class.disable']
+            }] } });
+
+class AXRatePickerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXRatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: AXRatePickerModule, declarations: [AXRatePickerComponent], imports: [CommonModule], exports: [AXRatePickerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXRatePickerModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXRatePickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AXRatePickerComponent],
+                    imports: [CommonModule],
+                    exports: [AXRatePickerComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXRatePickerComponent, AXRatePickerModule };
+//# sourceMappingURL=acorex-components-rate-picker.mjs.map

package/fesm2022/acorex-components-rate-picker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-components-rate-picker.mjs","sources":["../../../../libs/components/rate-picker/src/lib/calculatePercentage.ts","../../../../libs/components/rate-picker/src/lib/rate-picker.component.ts","../../../../libs/components/rate-picker/src/lib/rate-picker.component.html","../../../../libs/components/rate-picker/src/lib/rate-picker.module.ts","../../../../libs/components/rate-picker/src/acorex-components-rate-picker.ts"],"sourcesContent":["/**\n * Calculates the horizontal position of a pointer event (mouse or touch) as a percentage\n * of the target element's width.\n *\n * @param event - The mouse or touch event to get the pointer position from.\n * @returns The percentage of the event's position relative to the target element's width,\n *          or -1 if the event is invalid.\n *\n * @remarks\n * - For `MouseEvent`, it uses the `clientX` property.\n * - For `TouchEvent`, it uses the `clientX` of the first touch point.\n * - Returns `-1` if the event is neither a valid `MouseEvent` nor a `TouchEvent`.\n *\n * @example\n * ```typescript\n * document.addEventListener('click', function(event) {\n *   const percentage = getPointerPercentage(event);\n *   console.log(`Click position: ${percentage.toFixed(2)}% of the element's width`);\n * });\n *\n * document.addEventListener('touchstart', function(event) {\n *   const percentage = getPointerPercentage(event);\n *   console.log(`Touch position: ${percentage.toFixed(2)}% of the element's width`);\n * });\n * ```\n */\nexport function getPointerPercentage(event: MouseEvent | TouchEvent): number {\n  let clientX: number;\n\n  if (event instanceof MouseEvent) {\n    clientX = event.clientX; // Mouse event uses clientX\n  } else if (event instanceof TouchEvent && event.touches.length > 0) {\n    clientX = event.touches[0].clientX; // Touch event uses the first touch's clientX\n  } else {\n    return -1; // Return -1 for invalid events\n  }\n\n  // Use currentTarget to get the bounding box of the element the event listener is attached to\n  const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();\n  const clickX = clientX - rect.left; // Calculate X position relative to the element\n  const divWidth = rect.width; // Get the width from the bounding box\n  const percentage = (clickX / divWidth) * 100; // Calculate percentage\n\n  return percentage;\n}\n","import { AXValuableComponent, MXValueComponent } from '@acorex/components/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  ElementRef,\n  forwardRef,\n  HostBinding,\n  inject,\n  input,\n  Renderer2,\n  signal,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { getPointerPercentage } from './calculatePercentage';\n\n/**\n * A component for selecting a rating using star icons.\n *\n * This component allows users to pick a rating by clicking or dragging over star icons.\n * It supports rounding options and manages the rating state internally.\n */\n@Component({\n  selector: 'ax-rate-picker',\n  templateUrl: './rate-picker.component.html',\n  styleUrls: ['./rate-picker.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  inputs: ['readonly', 'disabled'],\n  providers: [\n    { provide: AXValuableComponent, useExisting: AXRatePickerComponent },\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXRatePickerComponent),\n      multi: true,\n    },\n  ],\n})\nexport class AXRatePickerComponent extends MXValueComponent<number> {\n  /** The icon name to use for stars (e.g., 'fa-star'). */\n  iconName = input('fa-star');\n\n  /** The maximum rating value (e.g., 5 stars). */\n  max = input(5);\n\n  /** Determines if the rating should be rounded to the nearest integer. */\n  isRound = input(true);\n\n  /** choosing to have css transition for unchanging value after hover. */\n  hasTransition = input(true);\n\n  /** The percentage of the current rating value relative to the maximum rating. */\n  protected ratePercentage = computed(() => Math.round((this.currentValue() / this.max()) * 10000) / 100);\n\n  /** The current rating value as a signal. */\n  private currentValue = signal(this.max());\n\n  /** State for tracking hover status and previous value. */\n  private prevState: { ishover: boolean; previousValue?: number } = {\n    ishover: false,\n    previousValue: undefined,\n  };\n\n  /** Reference to the container element. */\n  containerEl = viewChild.required<ElementRef>('c');\n\n  /** Reference to the rating element. */\n  ratingEl = viewChild.required<ElementRef>('r');\n\n  /** Renderer for manipulating styles. */\n  renderer = inject(Renderer2);\n\n  /** Array of rating values from 1 to `max`. */\n  protected rates = computed(() =>\n    Array(this.max())\n      .fill(0)\n      .map((_, index) => index + 1),\n  );\n\n  /**\n   * Initializes the component and sets up value change subscription.\n   */\n  constructor() {\n    super();\n    effect(() => {\n      if (!this.hasTransition()) {\n        this.renderer.removeStyle(this.ratingEl().nativeElement, 'transition');\n      }\n      return this.hasTransition();\n    });\n    this.onValueChanged.subscribe((val: { value }) => {\n      if (val.value < 0) {\n        this.currentValue.set(0);\n        console.warn('ax-rate-picker: value cant be negative!');\n      } else if (val.value > this.max()) {\n        this.currentValue.set(this.max());\n        console.warn('ax-rate-picker: value cant be more than max!');\n      } else {\n        this.currentValue.set(val.value);\n      }\n    });\n  }\n\n  /**\n   * Calculates and updates the rating based on the mouse or touch event.\n   *\n   * @param event - The mouse or touch event triggering the rating calculation.\n   */\n  protected calculateRate(event: MouseEvent | TouchEvent): void {\n    if (this.hasTransition()) {\n      this.renderer.removeStyle(this.ratingEl().nativeElement, 'transition');\n    }\n    event.preventDefault();\n    if (!this.readonly && !this.disabled) {\n      const pointerPercentage = getPointerPercentage(event);\n      if (pointerPercentage === -1) {\n        return console.log('Only support touch and click events.');\n      }\n      const value = (pointerPercentage / 100) * this.max();\n      const finalValue = this.isRound() ? Math.ceil(value) : Number.parseFloat(value.toFixed(2));\n      if (finalValue !== this.value) {\n        if (this.prevState.ishover === true) {\n          this.currentValue.set(finalValue);\n        } else {\n          this.commitValue(finalValue);\n        }\n      }\n    }\n  }\n\n  /**\n   * Handles mouse enter events to start tracking mouse movements for rating.\n   */\n  protected mouseEnter() {\n    this.prevState = {\n      ishover: true,\n      previousValue: this.value,\n    };\n    if (this.hasTransition()) {\n      this.renderer.setStyle(this.ratingEl().nativeElement, 'opacity', '80%');\n    }\n    const moveListener = (moveEvent: MouseEvent | TouchEvent) => this.calculateRate(moveEvent);\n    const endListener = () => this.onEnd(moveListener, endListener);\n    const container = this.containerEl().nativeElement;\n    container.addEventListener('mousemove', moveListener);\n    container.addEventListener('mouseup', endListener);\n    container.addEventListener('mouseleave', endListener);\n  }\n  mouseLeave() {\n    if (this.hasTransition()) {\n      this.renderer.removeStyle(this.ratingEl().nativeElement, 'opacity');\n    }\n  }\n  /**\n   * Cleans up event listeners and restores the previous rating value.\n   *\n   * @param moveListener - The function to remove for mouse move events.\n   * @param endListener - The function to remove for mouse end events.\n   */\n  private onEnd(moveListener: (event: MouseEvent | TouchEvent) => void, endListener: () => void): void {\n    if (this.hasTransition()) {\n      this.renderer.setStyle(\n        this.ratingEl().nativeElement,\n        'transition',\n        `width ${this.max() * 50 + 250}ms cubic-bezier(0.29, 0.72, 0.68, 0.85)`,\n      );\n      this.renderer.removeStyle(this.ratingEl().nativeElement, 'opacity');\n    }\n\n    this.currentValue.set(this.prevState.previousValue);\n    this.prevState = {\n      ishover: false,\n      previousValue: undefined,\n    };\n\n    const container = this.containerEl().nativeElement;\n    container.removeEventListener('mousemove', moveListener);\n    container.removeEventListener('mouseup', endListener);\n    container.removeEventListener('mouseleave', endListener);\n  }\n\n  /**\n   * Determines if the component is active (i.e., not readonly or disabled).\n   */\n  @HostBinding('class.active') get isActive() {\n    return !this.readonly && !this.disabled;\n  }\n\n  /**\n   * Determines if the component is in readonly mode.\n   */\n  @HostBinding('class.readonly') get isReadonly() {\n    return this.readonly;\n  }\n\n  /**\n   * Determines if the component is disabled.\n   */\n  @HostBinding('class.disable') get isDisabled() {\n    return this.disabled;\n  }\n}\n","<div\n  #c\n  class=\"ax-rate-picker-container\"\n  (click)=\"calculateRate($event)\"\n  (touchstart)=\"calculateRate($event)\"\n  (mouseenter)=\"mouseEnter()\"\n  (mouseleave)=\"mouseLeave()\"\n>\n  <div #r class=\"ax-rate-picker-rating\" [style.width.%]=\"ratePercentage()\">\n    <div class=\"ax-rate-picker-icons ax-rp-active\">\n      @for (rate of rates(); track rate) {\n        <i class=\"ax-rate-picker-icon fa-solid\" [class]=\"iconName()\" [class.pointer]=\"!this.readonly\"></i>\n      }\n    </div>\n  </div>\n  <div class=\"ax-rate-picker-icons ax-rp-inactive\">\n    @for (rate of rates(); track rate) {\n      <i class=\"ax-rate-picker-icon fa-solid\" [class]=\"iconName()\"></i>\n    }\n  </div>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXRatePickerComponent } from './rate-picker.component';\n\n@NgModule({\n  declarations: [AXRatePickerComponent],\n  imports: [CommonModule],\n  exports: [AXRatePickerComponent],\n})\nexport class AXRatePickerModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-time-line.mjs

@@ -0,0 +1,65 @@
+import * as i0 from '@angular/core';
+import { input, signal, Component, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+class AXTimeLineItemComponent {
+    constructor() {
+        this.text = input('');
+        this.isCollapsed = signal(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXTimeLineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: AXTimeLineItemComponent, selector: "ax-time-line-item", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="ax-time-line-header">
+      <span class="ax-time-line-text">{{ text() }}</span>
+      <span
+        class="ax-icon ax-icon-chevron-down ax-collapse-arrow"
+        [ngClass]="{ '-rotation-90': isCollapsed(), 'rotation-90': !isCollapsed() }"
+      ></span>
+    </div>
+    <div class="ax-time-line-content"><ng-content></ng-content></div>
+  `, isInline: true, styles: ["ax-time-line-item{padding-bottom:.75rem;display:block}ax-time-line-item .ax-time-line-header{display:flex;justify-content:space-between;align-items:center;padding:0 .75rem}ax-time-line-item .ax-time-line-header .ax-time-line-text{flex:1}ax-time-line-item .ax-time-line-content{padding:.75rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXTimeLineItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-time-line-item', template: `
+    <div class="ax-time-line-header">
+      <span class="ax-time-line-text">{{ text() }}</span>
+      <span
+        class="ax-icon ax-icon-chevron-down ax-collapse-arrow"
+        [ngClass]="{ '-rotation-90': isCollapsed(), 'rotation-90': !isCollapsed() }"
+      ></span>
+    </div>
+    <div class="ax-time-line-content"><ng-content></ng-content></div>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["ax-time-line-item{padding-bottom:.75rem;display:block}ax-time-line-item .ax-time-line-header{display:flex;justify-content:space-between;align-items:center;padding:0 .75rem}ax-time-line-item .ax-time-line-header .ax-time-line-text{flex:1}ax-time-line-item .ax-time-line-content{padding:.75rem}\n"] }]
+        }] });
+
+class AXTimeLineComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXTimeLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXTimeLineComponent, selector: "ax-time-line", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXTimeLineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-time-line', template: "<ng-content></ng-content>\n" }]
+        }] });
+
+class AXTimeLineModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXTimeLineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: AXTimeLineModule, declarations: [AXTimeLineComponent, AXTimeLineItemComponent], imports: [CommonModule], exports: [AXTimeLineComponent, AXTimeLineItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXTimeLineModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXTimeLineModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AXTimeLineComponent, AXTimeLineItemComponent],
+                    imports: [CommonModule],
+                    exports: [AXTimeLineComponent, AXTimeLineItemComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXTimeLineComponent, AXTimeLineItemComponent, AXTimeLineModule };
+//# sourceMappingURL=acorex-components-time-line.mjs.map

package/fesm2022/acorex-components-time-line.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-components-time-line.mjs","sources":["../../../../libs/components/time-line/src/lib/time-line-item.component.ts","../../../../libs/components/time-line/src/lib/time-line.component.ts","../../../../libs/components/time-line/src/lib/time-line.component.html","../../../../libs/components/time-line/src/lib/time-line.module.ts","../../../../libs/components/time-line/src/acorex-components-time-line.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, signal, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'ax-time-line-item',\n  template: `\n    <div class=\"ax-time-line-header\">\n      <span class=\"ax-time-line-text\">{{ text() }}</span>\n      <span\n        class=\"ax-icon ax-icon-chevron-down ax-collapse-arrow\"\n        [ngClass]=\"{ '-rotation-90': isCollapsed(), 'rotation-90': !isCollapsed() }\"\n      ></span>\n    </div>\n    <div class=\"ax-time-line-content\"><ng-content></ng-content></div>\n  `,\n  styleUrl: './time-line-item.component.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AXTimeLineItemComponent {\n  text = input('');\n\n  isCollapsed = signal(false);\n}\n","import { Component } from '@angular/core';\n\n@Component({\n  selector: 'ax-time-line',\n  templateUrl: './time-line.component.html',\n  styleUrls: ['./time-line.component.scss'],\n})\nexport class AXTimeLineComponent {}\n","<ng-content></ng-content>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXTimeLineItemComponent } from './time-line-item.component';\nimport { AXTimeLineComponent } from './time-line.component';\n\n@NgModule({\n  declarations: [AXTimeLineComponent, AXTimeLineItemComponent],\n  imports: [CommonModule],\n  exports: [AXTimeLineComponent, AXTimeLineItemComponent],\n})\nexport class AXTimeLineModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-wysiwyg.mjs

@@ -96,7 +96,7 @@ class AXWysiwygContainerComponent extends classes((MXInputBaseValueComponent), M
         clearTimeout(this.setTimeOut);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXWysiwygContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: { look: "look" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: { look: "look" }, outputs: { onValueChanged: "onValueChanged" }, providers: [
             { provide: AXComponent, useExisting: AXWysiwygContainerComponent },
             { provide: AXFocusableComponent, useExisting: AXWysiwygContainerComponent },
             { provide: AXClearableComponent, useExisting: AXWysiwygContainerComponent },
@@ -110,7 +110,7 @@ class AXWysiwygContainerComponent extends classes((MXInputBaseValueComponent), M
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXWysiwygContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-wysiwyg-container', inputs: ['look'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+            args: [{ selector: 'ax-wysiwyg-container', inputs: ['look'], outputs: ['onValueChanged'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         { provide: AXComponent, useExisting: AXWysiwygContainerComponent },
                         { provide: AXFocusableComponent, useExisting: AXWysiwygContainerComponent },
                         { provide: AXClearableComponent, useExisting: AXWysiwygContainerComponent },