@acorex/components 5.8.0 → 6.0.1

package/progress-bar/src/progress-bar.component.ts

@@ -0,0 +1,32 @@
+import { COLOR_LOOK_INPUTS, AXBaseComponentMixin } from '@acorex/components/mixin';
+import { Component, HostBinding, Input } from '@angular/core';
+
+/**
+ * The Button is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+@Component({
+  selector: 'ax-progress-bar',
+  templateUrl: './progress-bar.component.html',
+  inputs: ['color', 'look',],
+  host: { class: 'ax-progress-bar' },
+})
+export class AXProgressBarComponent extends AXBaseComponentMixin {
+  @Input()
+  value: number = 0;
+
+  /**
+   *  @ignore
+   */
+  constructor() {
+    super();
+  }
+
+  ngOnInit(): void {}
+
+  @HostBinding('class')
+  private get __hostClass(): string {
+    return `ax-${this['color']}-default`;
+  }
+}

package/progress-bar/src/progress-bar.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXProgressBarComponent } from './progress-bar.component';
+
+@NgModule({
+    declarations: [AXProgressBarComponent],
+    imports: [CommonModule],
+    exports: [AXProgressBarComponent],
+    providers: [],
+})
+export class AXProgressBarModule { }

package/public-api.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of components
+ */
+
+export const ACOREX_COMPONENTS = "@acorex/components";

package/radio/index.ts

@@ -0,0 +1 @@
+export * from './public-api'

package/radio/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/radio/public-api.ts

@@ -0,0 +1,2 @@
+export * from './src/radio.component';
+export * from './src/radio.module';

package/radio/src/radio.component.html

@@ -0,0 +1,11 @@
+<div class="ax-flex ax-items-start">
+    <div class="ax-flex ax-items-center ax-h-5">
+        <input [id]="id" class="ax-radio" type="radio" [(ngModel)]="value" [checked]="value" [disabled]="disabled" [readonly]="readonly" [tabindex]="tabIndex" (click)="_handleOnClickEvent($event)" (focus)="_emitOnFocusEvent($event)"
+        (blur)="_emitOnBlurEvent($event)">
+    </div>
+    <div class="ax-ms-3 ax-text-sm">
+        <ng-content select="ax-label"></ng-content>
+        <ng-content select="ax-form-hint"></ng-content>
+    </div>
+</div>
+<ng-content select="ax-validation-rule"></ng-content>

package/radio/src/radio.component.ts

@@ -0,0 +1,44 @@
+
+import { INTERACTIVE_INPUTS, VALUE_INPUTS, INTERACTIVE_OUTPUT, VALUE_OUTPUT, AXBaseValueComponentMixin } from '@acorex/components/mixin';
+import {
+  Component,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  ElementRef,
+  ChangeDetectorRef,
+} from '@angular/core';
+
+/**
+ * The Button is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+@Component({
+  selector: 'ax-radio',
+  templateUrl: './radio.component.html',
+  inputs: ['disabled', 'tabIndex', 'readonly','allowNull','value','name', 'checked'],
+  outputs: ['onBlur', 'onFocus', 'valueChange', 'onValueChanged'],
+  host: { class: 'ax-radio' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class AXRadioComponent extends AXBaseValueComponentMixin {
+  /**
+   *  @ignore
+   */
+  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
+    super(elementRef, cdr);
+    //TODO: ax-radio
+  }
+
+  // TODO: Not all code paths return a value.
+  _handleOnClickEvent(e: MouseEvent) {
+    if (this.readonly || this.disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+    return true
+
+  }
+}

package/radio/src/radio.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { AXRadioComponent } from './radio.component';
+
+const COMPONENT = [AXRadioComponent];
+const MODULES = [CommonModule,FormsModule];
+
+@NgModule({
+    declarations: [...COMPONENT],
+    imports: [...MODULES],
+    exports: [...COMPONENT],
+    providers: [],
+})
+export class AXRadioModule { }

package/range-slider/index.ts

@@ -0,0 +1 @@
+export * from './public-api'

package/range-slider/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/range-slider/public-api.ts

@@ -0,0 +1,2 @@
+export * from './src/range-slider.component';
+export * from './src/range-slider.module';

package/range-slider/src/range-slider.component.html

@@ -0,0 +1 @@
+<input type="range" [min]="minValue" [max]="maxValue" [(ngModel)]="value" [step]="step">

package/range-slider/src/range-slider.component.ts

@@ -0,0 +1,132 @@
+import {
+  Component,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  ElementRef,
+  ChangeDetectorRef,
+  Input,
+  EventEmitter,
+  HostBinding,
+  Output,
+  NgZone,
+} from '@angular/core';
+
+import { AXStyleColorType, AXValuableComponent } from '@acorex/components/common';
+import { AXBaseValueComponentMixin, AXComponentOptionChanged } from '@acorex/components/mixin';
+
+
+@Component({
+  selector: 'ax-range-slider',
+  templateUrl: './range-slider.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  inputs: ['readonly','allowNull','value','name', 'checked'],
+  outputs: ['valueChange', 'onValueChanged'],
+  host: { class: 'ax-range-slider' },
+  encapsulation: ViewEncapsulation.None,
+  providers: [
+    { provide: AXValuableComponent, useExisting: AXRangeSliderComponent },
+  ],
+})
+export class AXRangeSliderComponent extends AXBaseValueComponentMixin {
+  constructor(
+    elementRef: ElementRef,
+    cdr: ChangeDetectorRef,
+    private _zone: NgZone
+  ) {
+    super(elementRef, cdr);
+  }
+
+  private _minValue: number = 0;
+  /**
+   *  Specifies the smallest value that is valid
+   */
+  @Input()
+  public get minValue(): number {
+    return this._minValue ?? 0;
+  }
+  public set minValue(v: number) {
+    this._setOption({
+      name: 'minValue',
+      value: v != null ? Number(v) : 0,
+    });
+  }
+
+  private _maxValue: number = 100;
+  /**
+   *  Specifies the greatest value that is valid
+   */
+  @Input()
+  public get maxValue(): number {
+    return this._maxValue ?? 100;
+  }
+  public set maxValue(v: number) {
+    this._setOption({
+      name: 'maxValue',
+      value: v != null ? Number(v) : 100,
+    });
+  }
+
+  private _step: number = 1;
+  /**
+   *  Specifies the greatest value that is valid
+   */
+  @Input()
+  public get step(): number {
+    return this._step ?? 100;
+  }
+  public set step(v: number) {
+    this._setOption({
+      name: 'step',
+      value: v != null ? Number(v) : 1,
+    });
+  }
+
+  @Output()
+  colorChange: EventEmitter<AXStyleColorType> = new EventEmitter();
+  _color: AXStyleColorType = 'primary';
+  /**
+   *  Predefined color schemes
+   */
+  @Input()
+  get color(): AXStyleColorType {
+    return this._color;
+  }
+  set color(value: AXStyleColorType) {
+    this._setOption({
+      name: 'color',
+      value,
+      afterCallback: () => {
+        this._cdr.markForCheck();
+      },
+    });
+  }
+
+  onViewInit() {
+    this._calcVars();
+    this.value = this.value ?? (this.maxValue - this.minValue) / 2;
+  }
+
+  _onValueChanged(oldValue: number, newValue: number) {
+    this._calcVars();
+  }
+
+  _onOptionChanged(e: AXComponentOptionChanged) {
+    this._calcVars();
+  }
+
+  private _calcVars() {
+    this._zone.runOutsideAngular(() => {
+      const per =
+        (((this.value ?? 0) - this.minValue) /
+          (this.maxValue - this.minValue)) *
+          100 -
+        0.1;
+      this._getHostElement().style.setProperty('--ax-current-value', `${per}%`);
+    });
+  }
+
+  @HostBinding('class')
+  private get __hostClass(): string {
+    return `ax-${this.color}-default`;
+  }
+}

package/range-slider/src/range-slider.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXRangeSliderComponent } from './range-slider.component';
+import { FormsModule } from '@angular/forms';
+
+const COMPONENT = [AXRangeSliderComponent];
+const MODULES = [CommonModule,FormsModule];
+
+@NgModule({
+    declarations: [...COMPONENT],
+    imports: [...MODULES],
+    exports: [...COMPONENT],
+    providers: [],
+})
+export class AXRangeSliderModule { }

package/rating/index.ts

@@ -0,0 +1 @@
+export * from './public-api'

package/rating/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/rating/public-api.ts

@@ -0,0 +1,2 @@
+export * from './src/rating.component';
+export * from './src/rating.component.module';

package/rating/src/rating.component.html

@@ -0,0 +1,5 @@
+<div class="ax-rating-container" #stars>
+    <ng-container *ngFor="let item of items">
+        <span class="ax-rating-start ax-ic-star-outline ax-text-2xl" (click)="handleStarClick(item)"></span>
+    </ng-container>
+</div>

package/rating/src/rating.component.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXRatingComponent } from './rating.component';
+
+@NgModule({
+    declarations: [AXRatingComponent],
+    imports: [ CommonModule ],
+    exports: [AXRatingComponent],
+    providers: [],
+})
+export class AXRatingModule {}

package/rating/src/rating.component.ts

@@ -0,0 +1,43 @@
+import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
+/**
+ * The Button is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+@Component({
+    selector: 'ax-rating',
+    templateUrl: './rating.component.html',
+    host: { class: 'ax-rating' }
+})
+export class AXRatingComponent implements AfterViewInit {
+
+    @ViewChild('stars') stars: ElementRef<HTMLDivElement>
+
+    items: any[] = [
+        { index: 0, selected: false },
+        { index: 1, selected: false },
+        { index: 2, selected: false },
+        { index: 3, selected: false },
+        { index: 4, selected: false },
+    ]
+    /**
+     *  @ignore
+     */
+    constructor() { }
+
+    ngAfterViewInit(): void {
+
+    }
+
+
+    handleStarClick(item) {
+        var a = this.items.slice(0,++item.index)
+        console.log(a);
+        
+    }
+
+    handleMouseEnter() {
+
+    }
+    handleMouseLeave() { }
+}

package/result/index.ts

@@ -0,0 +1 @@
+export * from './public-api'

package/result/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/result/public-api.ts

@@ -0,0 +1,2 @@
+export * from './src/result.component';
+export * from './src/result.module';